/* ============================================================
   VERA — editorial radar. Warm black ground, parchment ink,
   radar green for what's alive, brass for what's curated,
   clay for honesty. Serif speaks; mono measures; sans reads.
   ============================================================ */

@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-var.woff2") format("woff2-variations");
  font-weight: 100 700;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Serif";
  src: url("../fonts/ibm-plex-serif-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Serif";
  src: url("../fonts/ibm-plex-serif-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Serif";
  src: url("../fonts/ibm-plex-serif-latin-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --bg: #0b0d0c;
  --bg2: #0e110f;
  --panel: #121614;
  --panel2: #161b18;
  --line: rgba(233, 226, 210, 0.09);
  --line2: rgba(233, 226, 210, 0.16);
  --ink: #ece4d3;
  --dim: #b3aa96;
  --mute: #817b6e;   /* 4.63:1 on the page ground — WCAG AA. #7d776a measured 4.38 and failed. */
  --green: #4cc38a;
  --green-soft: rgba(76, 195, 138, 0.14);
  --amber: #e3b567;
  --red: #e06a70;
  --blue: #7ba7d9;
  --brass: #c8a468;
  --clay: #cf7352;
  --serif: "IBM Plex Serif", Georgia, serif;
  --sans: "IBM Plex Sans", -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", "SF Mono", Menlo, monospace;
  --r: 14px;
  --r-sm: 9px;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
  --pad: clamp(16px, 3.4vw, 44px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; color-scheme: dark; }
body {
  margin: 0;
  background:
    radial-gradient(1200px 500px at 80% -10%, rgba(200, 164, 104, 0.05), transparent 60%),
    radial-gradient(900px 480px at -10% 0%, rgba(76, 195, 138, 0.045), transparent 55%),
    var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: clip;
}
a { color: var(--ink); }
a:hover { color: #fff; }
button { font-family: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
.mono { font-family: var(--mono); }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3, h4 { text-wrap: balance; scroll-margin-top: 132px; }

/* paper grain — one fixed layer, barely there */
.grain {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}

.skip-link {
  position: absolute; left: -999px; top: 8px; z-index: 200;
  background: var(--brass); color: #14110a; padding: 9px 16px; border-radius: 8px;
  font-family: var(--mono); font-size: 13px; text-decoration: none;
}
.skip-link:focus { left: 12px; }

.shell {
  max-width: 1460px;
  margin: 0 auto;
  padding-left: max(var(--pad), env(safe-area-inset-left));
  padding-right: max(var(--pad), env(safe-area-inset-right));
}

/* ============================================================
   MASTHEAD
   ============================================================ */

.masthead {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  padding: 20px 0 0;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 40;
  background: linear-gradient(rgba(11, 13, 12, 0.94), rgba(11, 13, 12, 0.88));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.brand { display: flex; align-items: center; gap: 13px; text-decoration: none; }
.insignia { color: var(--dim); flex: none; }
.insignia .sweep { fill: var(--green); transform-origin: 50% 50%; animation: sweep 7s linear infinite; }
.insignia .core { fill: var(--ink); }
@keyframes sweep { to { transform: rotate(360deg); } }
.brand__word { display: flex; flex-direction: column; gap: 1px; }
.brand__name {
  font-family: var(--serif); font-weight: 600; font-size: 27px;
  letter-spacing: 0.14em; line-height: 1; color: var(--ink);
}
.brand__tag {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--mute);
}
.masthead__status {
  display: flex; align-items: center; gap: 9px;
  font-size: 11.5px; color: var(--mute); margin-left: auto; order: 2;
}
.masthead__status .mono { font-size: 11px; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(76, 195, 138, 0.5); animation: pulse 2.4s infinite; flex: none; }
.pulse.is-warn { background: var(--amber); }
.pulse.is-bad { background: var(--red); }
@keyframes pulse { 70% { box-shadow: 0 0 0 9px rgba(76, 195, 138, 0); } }

.mastnav {
  display: flex; gap: 2px; order: 3; width: 100%;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  margin-top: 4px; overscroll-behavior-inline: contain; scroll-padding-inline: 14px;
}
.mastnav::-webkit-scrollbar { display: none; }
.mastnav a {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.07em;
  text-transform: uppercase; text-decoration: none; color: var(--dim);
  padding: 9px 14px 12px; border-radius: 9px 9px 0 0; position: relative;
  white-space: nowrap; display: inline-flex; align-items: center; gap: 7px;
}
.mastnav a:hover { color: var(--ink); background: rgba(233, 226, 210, 0.04); }
.mastnav a.is-on { color: var(--ink); }
.mastnav a.is-on::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 0;
  height: 2px; background: var(--brass); border-radius: 2px;
}
.nv__badge {
  font-family: var(--mono); font-size: 10px; background: var(--green);
  color: #08110c; border-radius: 9px; padding: 1px 6px; font-weight: 600;
}

/* ============================================================
   FILTER DECK — travels across Market, Browse, Atlas
   ============================================================ */

.filters {
  display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center;
  padding: 13px 0; border-bottom: 1px solid var(--line);
}
.filters__group { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; min-width: 0; }
.filters__label {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--mute); margin-right: 3px;
}
.filters button, .pills button {
  background: transparent; border: 1px solid var(--line); border-radius: 999px;
  color: var(--dim); font-size: 12.5px; padding: 6px 13px; min-height: 32px;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.filters button:hover, .pills button:hover { border-color: var(--line2); color: var(--ink); }
.filters button.is-on, .pills button.is-on {
  background: var(--green-soft); border-color: rgba(76, 195, 138, 0.5); color: var(--green);
}
.filters__group--hoods { flex: 1 1 260px; }
.filters__hoods { display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; min-width: 0; overscroll-behavior-inline: contain; }
.filters__hoods::-webkit-scrollbar { display: none; }
.filters__hoods button { flex: none; }
.dimcount { opacity: 0.55; font-family: var(--mono); font-size: 11px; }
.filters__clear { border-color: rgba(224, 106, 112, 0.4) !important; color: var(--red) !important; }

/* ============================================================
   PAGE CHROME
   ============================================================ */

.main { min-height: 62vh; padding-bottom: 70px; }
.page { padding-top: 8px; }

.kicker {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.19em;
  text-transform: uppercase; color: var(--brass); margin: 0 0 10px;
}
.pagehead { padding: 34px 0 8px; max-width: 900px; }
.pagehead__title {
  font-family: var(--serif); font-weight: 600; margin: 0;
  font-size: clamp(30px, 4.6vw, 52px); line-height: 1.06; letter-spacing: -0.008em;
}
.pagehead__lede { color: var(--dim); font-size: 16.5px; max-width: 68ch; margin: 14px 0 0; }

.panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  padding: 18px 20px; min-width: 0;
}
.panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.panel__title { font-family: var(--sans); font-weight: 600; font-size: 14.5px; margin: 0; }
.panel__hint { font-family: var(--mono); font-size: 11px; color: var(--mute); margin: 0; white-space: nowrap; }

.grid { display: grid; gap: 14px; margin-top: 14px; min-width: 0; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.lane__empty { color: var(--mute); font-size: 13.5px; padding: 14px 4px; }
.notice {
  background: rgba(227, 181, 103, 0.08); border: 1px solid rgba(227, 181, 103, 0.3);
  color: var(--amber); border-radius: var(--r-sm); padding: 10px 14px; font-size: 13px;
}

/* ============================================================
   TODAY — THE DROP
   ============================================================ */

.drophead { padding: 44px 0 26px; max-width: 980px; }
.drophead__title {
  font-family: var(--serif); font-weight: 600; margin: 0;
  font-size: clamp(38px, 6.4vw, 74px); line-height: 1.02; letter-spacing: -0.01em;
}
.drophead__lede { font-size: clamp(16.5px, 2vw, 19px); color: var(--dim); max-width: 62ch; margin: 18px 0 0; }
.drophead__lede b { color: var(--ink); font-family: var(--mono); font-weight: 600; }
.drophead__trust { font-size: 13px; color: var(--mute); margin: 12px 0 0; max-width: 70ch; }
.drophead__trust a { color: var(--dim); }
.drophead__next {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--mute); margin: 18px 0 0;
  display: flex; align-items: center; gap: 9px;
}
.drophead__next .mono { color: var(--green); font-size: 14px; letter-spacing: 0.06em; }

.dropgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.dropcard { min-width: 0; }
.dropcard__hit {
  display: block; width: 100%; text-align: left; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; padding: 0;
  transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1), border-color 0.22s, box-shadow 0.22s;
}
.dropcard__hit:hover {
  transform: translateY(-3px);
  border-color: rgba(200, 164, 104, 0.45);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42);
}
.dropcard__media { display: block; position: relative; aspect-ratio: 32 / 15; overflow: hidden; background: #141a20; }
.dropcard__media .port { position: absolute; inset: 0; width: 100%; height: 100%; }
.dropcard__media .shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shot__n {
  position: absolute; right: 10px; bottom: 10px; z-index: 2;
  font-family: var(--mono); font-size: 10.5px; color: var(--ink);
  background: rgba(10, 12, 11, 0.72); border: 1px solid var(--line);
  padding: 3px 8px; border-radius: 6px; backdrop-filter: blur(6px);
}
.dropcard__rent {
  position: absolute; left: 12px; bottom: 10px; z-index: 2;
  font-family: var(--mono); font-weight: 600; font-size: 24px; color: #fff;
  background: rgba(10, 12, 11, 0.72); border: 1px solid var(--line);
  padding: 5px 12px; border-radius: 9px; backdrop-filter: blur(6px);
}
.dropcard__rent small { font-size: 12px; color: var(--dim); font-weight: 400; }
.dropcard__body { display: block; padding: 18px 20px 20px; position: relative; }
.dropcard__no {
  position: absolute; top: 20px; right: 20px;
  font-family: var(--mono); font-size: 12px; color: var(--brass); letter-spacing: 0.12em;
}
.dropcard__name {
  font-family: var(--serif); font-weight: 600; font-size: clamp(21px, 2.4vw, 27px);
  line-height: 1.12; margin: 0 44px 7px 0; letter-spacing: -0.005em;
}
.dropcard__where { font-family: var(--mono); font-size: 12px; color: var(--mute); margin: 0 0 12px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.dropcard__why { font-size: 14.5px; color: var(--dim); margin: 0 0 8px; }
.dropcard__flaw { font-size: 13.5px; color: var(--clay); margin: 0 0 12px; font-style: italic; font-family: var(--serif); }
.dropcard__chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.prov { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-family: var(--mono); font-size: 10.5px; color: var(--mute); border-top: 1px solid var(--line); padding-top: 11px; }
.prov__dot { opacity: 0.5; }

/* staggered arrival */
.is-entered .dropcard { animation: rise 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }

.dropempty { text-align: center; padding: 60px 20px; max-width: 560px; margin: 0 auto; }
.dropempty__mark { color: var(--dim); }
.dropempty h2 { font-family: var(--serif); font-size: 28px; margin: 18px 0 8px; }
.dropempty p { color: var(--dim); }

.bubble { margin-top: 46px; border-top: 1px solid var(--line); padding-top: 26px; }
.bubble__title { font-family: var(--serif); font-weight: 600; font-size: 24px; margin: 0 0 6px; }
.bubble__hint { color: var(--mute); font-size: 13.5px; margin: 0 0 16px; max-width: 70ch; }
.bubblegrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.bubcard {
  text-align: left; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-sm); overflow: hidden; padding: 0; min-width: 0;
  transition: border-color 0.18s, transform 0.18s;
}
.bubcard:hover { border-color: var(--line2); transform: translateY(-2px); }
.bubcard__port { display: block; position: relative; aspect-ratio: 300 / 132; }
.bubcard__port .port, .bubcard__port .shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bubcard__body { display: flex; flex-direction: column; gap: 4px; padding: 12px 13px 13px; font-size: 12.5px; color: var(--dim); }
.bubcard__body b { font-family: var(--serif); font-size: 15px; color: var(--ink); line-height: 1.2; }
.bubcard__why { color: var(--clay); font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; }

.wire { margin-top: 46px; }
.wire__card {
  border: 1px solid rgba(76, 195, 138, 0.25);
  background: linear-gradient(140deg, rgba(76, 195, 138, 0.07), transparent 55%), var(--panel);
  border-radius: var(--r); padding: 26px 28px; max-width: 720px;
}
.wire__card h2 { font-family: var(--serif); font-size: 23px; margin: 0 0 8px; }
.wire__card p { color: var(--dim); margin: 0 0 6px; max-width: 62ch; }
.wire__fine { font-size: 12.5px; color: var(--mute); }

/* ============================================================
   TAGS, KPIs, TILES, CHARTS
   ============================================================ */

.tag {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.05em;
  border: 1px solid var(--line); color: var(--dim); border-radius: 5px;
  padding: 2.5px 7px; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
}
.tag--green { color: var(--green); border-color: rgba(76, 195, 138, 0.4); background: rgba(76, 195, 138, 0.07); }
.tag--amber { color: var(--amber); border-color: rgba(227, 181, 103, 0.4); background: rgba(227, 181, 103, 0.06); }
.tag--red { color: var(--red); border-color: rgba(224, 106, 112, 0.4); background: rgba(224, 106, 112, 0.06); }
.tag--blue { color: var(--blue); border-color: rgba(123, 167, 217, 0.4); background: rgba(123, 167, 217, 0.07); }
.bul {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border-radius: 50%; color: #fff;
  font-family: var(--mono); font-size: 9px; font-weight: 600; font-style: normal;
}

.kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 17px 14px; min-width: 0; }
.kpi--click { cursor: pointer; transition: border-color 0.16s, transform 0.16s; }
.kpi--click:hover { border-color: var(--line2); transform: translateY(-2px); }
.kpi__label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--mute); margin: 0 0 7px; }
.kpi__value { font-family: var(--mono); font-weight: 600; font-size: clamp(30px, 3.2vw, 44px); line-height: 1; margin: 0; letter-spacing: -0.02em; }
.kpi__value small { font-size: 14px; color: var(--mute); font-weight: 400; }
.kpi__value--word { font-family: var(--serif); font-size: 26px; }
.kpi__note { font-size: 11.5px; color: var(--mute); margin: 7px 0 0; }
.kpi--good .kpi__value { color: var(--green); }
.kpi--warn .kpi__value { color: var(--amber); }
.kpi--bad .kpi__value { color: var(--red); }

.brackets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.brtile {
  text-align: left; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r); padding: 18px 20px; min-width: 0;
  transition: border-color 0.16s, transform 0.16s;
}
.brtile:hover { border-color: var(--line2); transform: translateY(-2px); }
.brtile.is-on { border-color: rgba(76, 195, 138, 0.5); background: linear-gradient(160deg, rgba(76, 195, 138, 0.08), transparent 60%), var(--panel); }
.brtile__label { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.09em; color: var(--brass); display: block; margin-bottom: 8px; }
.brtile__n { font-family: var(--mono); font-weight: 600; font-size: clamp(38px, 4.4vw, 58px); line-height: 1; display: block; letter-spacing: -0.02em; }
.brtile__meta { font-size: 12px; color: var(--mute); display: block; margin-top: 8px; }

.chart svg { width: 100%; height: auto; display: block; }
.is-entered .chart path[stroke] { stroke-dasharray: 1200; stroke-dashoffset: 1200; animation: drawin 1.1s ease-out forwards; }
@keyframes drawin { to { stroke-dashoffset: 0; } }

.strip { display: flex; flex-wrap: wrap; gap: 6px; }
.srcstrip { margin-top: 12px; }
.chip {
  font-family: var(--mono); font-size: 10.5px; color: var(--dim);
  border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px 3px 7px;
  display: inline-flex; align-items: center; gap: 6px;
}
.chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--mute); }
.chip.is-ok i { background: var(--green); }
.chip.is-warn i { background: var(--amber); }
.chip.is-bad i { background: var(--red); }
.chip.is-off { opacity: 0.5; }

.hist { display: flex; align-items: flex-end; gap: 4px; height: 150px; overflow: hidden; min-width: 0; }
.hist__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.hist__bar { width: 100%; max-width: 38px; background: linear-gradient(to top, rgba(76, 195, 138, 0.5), rgba(76, 195, 138, 0.14)); border-radius: 4px 4px 0 0; }
.hist__label { font-family: var(--mono); font-size: 10px; color: var(--mute); white-space: nowrap; overflow: hidden; max-width: 100%; text-overflow: ellipsis; }

.bars { display: flex; flex-direction: column; gap: 7px; }
.bar {
  display: grid; grid-template-columns: 128px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  background: none; border: 1px solid transparent; border-radius: 8px; padding: 5px 8px; text-align: left;
}
.bar:hover { border-color: var(--line); }
.bar.is-on { border-color: rgba(76, 195, 138, 0.45); background: var(--green-soft); }
.bar__name { font-size: 12.5px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar__track { height: 8px; background: rgba(233, 226, 210, 0.06); border-radius: 4px; overflow: hidden; display: block; }
.bar__fill { display: block; height: 100%; background: linear-gradient(90deg, rgba(76, 195, 138, 0.75), rgba(76, 195, 138, 0.3)); border-radius: 4px; }
.bar__val { font-family: var(--mono); font-size: 11.5px; color: var(--mute); white-space: nowrap; }

.feed { display: flex; flex-direction: column; gap: 6px; }
.feed__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 4px; border-bottom: 1px solid var(--line); min-width: 0; }
.feed__row:last-child { border-bottom: 0; }
.feed__badge { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; padding: 2px 7px; border-radius: 4px; flex: none; border: 1px solid var(--line); color: var(--dim); }
.feed__badge--new { color: var(--green); border-color: rgba(76, 195, 138, 0.4); }
.feed__badge--drop { color: var(--blue); border-color: rgba(123, 167, 217, 0.4); }
.feed__badge--hike { color: var(--amber); border-color: rgba(227, 181, 103, 0.4); }
.feed__badge--gone { color: var(--mute); }
.feed__what { font-size: 12.5px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.feed__num { font-family: var(--mono); font-size: 11.5px; color: var(--dim); }

/* ============================================================
   BROWSE
   ============================================================ */

.pills { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 18px; }
.dtoolbar { display: flex; align-items: center; gap: 12px; margin: 16px 0 10px; flex-wrap: wrap; }
.dtoolbar input[type="search"] {
  flex: 1 1 260px; background: var(--panel); border: 1px solid var(--line); border-radius: 9px;
  color: var(--ink); font-family: var(--sans); font-size: 14px; padding: 10px 14px; min-height: 40px;
}
.dtoolbar input[type="search"]::placeholder { color: var(--mute); }
.dtoolbar__count { font-family: var(--mono); font-size: 11.5px; color: var(--mute); white-space: nowrap; }
.dtoolbar__density { display: flex; gap: 4px; }
.dtoolbar__density button { background: none; border: 1px solid var(--line); border-radius: 7px; color: var(--mute); font-size: 11.5px; padding: 6px 10px; }
.dtoolbar__density button.is-on { color: var(--ink); border-color: var(--line2); }

.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); -webkit-overflow-scrolling: touch; overscroll-behavior-inline: contain; scrollbar-gutter: stable; }
.dt { width: 100%; border-collapse: collapse; font-size: 13px; }
.dt thead th {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--mute); text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--line2);
  position: sticky; top: 0; background: var(--panel2); cursor: pointer; white-space: nowrap; user-select: none;
}
.dt thead th.is-sort { color: var(--green); }
.dt thead th button {
  display: inline-flex; align-items: center; gap: 5px; min-height: 44px; margin: -11px -12px;
  padding: 11px 12px; border: 0; background: transparent; color: inherit;
  font: inherit; letter-spacing: inherit; text-transform: inherit; white-space: nowrap;
}
.dt tbody tr { cursor: pointer; }
.dt tbody tr:hover { background: rgba(233, 226, 210, 0.03); }
.dt tbody tr.is-open { background: var(--green-soft); }
.dt tbody td { padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.dt.is-compact tbody td { padding: 6px 12px; font-size: 12px; }
.dt__empty { padding: 26px !important; color: var(--mute); white-space: normal !important; }
.t-score { font-family: var(--mono); font-weight: 600; color: var(--ink); }
.t-title { white-space: normal; display: block; max-width: 300px; min-width: 180px; line-height: 1.3; }
.t-dim { color: var(--mute); }
.t-mono { font-family: var(--mono); font-size: 12px; }
.risk { font-family: var(--mono); font-size: 12px; padding: 2px 7px; border-radius: 5px; }
.risk--lo { color: var(--green); background: rgba(76, 195, 138, 0.09); }
.risk--md { color: var(--amber); background: rgba(227, 181, 103, 0.09); }
.risk--hi { color: var(--red); background: rgba(224, 106, 112, 0.1); }

/* ============================================================
   ATLAS
   ============================================================ */

.maplay { display: grid; grid-template-columns: 0.72fr 0.28fr; gap: 14px; margin-top: 18px; }
.mapwrap { padding-bottom: 14px; }
.mp { width: 100%; height: auto; display: block; border-radius: var(--r-sm); }
.mp-water { fill: #0c1211; }
.mp-land { fill: #151d18; stroke: rgba(233, 226, 210, 0.07); stroke-width: 1; }
.mp-land--far { fill: #10160f; }
.mp-park { fill: #1a2b1f; }
.mp-stn { opacity: 0.85; }
.mp-hood { font-family: var(--mono); font-size: 19px; letter-spacing: 0.22em; fill: rgba(233, 226, 210, 0.22); }
.mp-tether { stroke: rgba(76, 195, 138, 0.22); stroke-width: 1.4; }
.mp-pin { cursor: pointer; }
.mp-halo { fill: rgba(76, 195, 138, 0.1); }
.mp-dot { fill: #0e1411; stroke: var(--green); stroke-width: 2.4; }
.mp-pin--warn .mp-dot { stroke: var(--amber); }
.mp-pin--warn .mp-halo { fill: rgba(227, 181, 103, 0.09); }
.mp-pin--bad .mp-dot { stroke: var(--red); }
.mp-pin--bad .mp-halo { fill: rgba(224, 106, 112, 0.09); }
.mp-rent { font-family: var(--mono); font-size: 12px; font-weight: 600; fill: var(--ink); text-anchor: middle; pointer-events: none; }
.is-entered .mp-pin { animation: pinin 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) both; animation-delay: var(--d, 0ms); }
@keyframes pinin { from { opacity: 0; } }
.mp-pin:hover .mp-dot, .mp-pin:focus-visible .mp-dot { stroke-width: 4; }
.mp-key { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; }
.mp-key__i { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 10.5px; color: var(--mute); }
.mp-swatch { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--green); background: transparent; display: inline-block; }
.mp-swatch--warn { border-color: var(--amber); }
.mp-swatch--bad { border-color: var(--red); }
.mp-swatch--stn { border: 0; background: var(--blue); width: 8px; height: 8px; }

.walklist { display: flex; flex-direction: column; max-height: 560px; overflow-y: auto; }
.walkrow {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  background: none; border: 0; border-bottom: 1px solid var(--line); text-align: left; padding: 9px 4px;
}
.walkrow:hover { background: rgba(233, 226, 210, 0.03); }
.walkrow__min { font-family: var(--mono); font-weight: 600; font-size: 16px; color: var(--green); }
.walkrow__min small { font-size: 9px; color: var(--mute); display: block; }
.walkrow__body { min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--mute); }
.walkrow__body b { font-size: 12.5px; color: var(--dim); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.walkrow__rent { font-family: var(--mono); font-size: 12px; color: var(--dim); }

/* ============================================================
   MY HUNT
   ============================================================ */

.board { display: grid; grid-template-columns: repeat(6, minmax(190px, 1fr)); gap: 10px; margin-top: 18px; overflow-x: auto; padding-bottom: 8px; }
.col { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 13px; min-width: 0; }
.col--dead { opacity: 0.62; }
.col__head { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); margin: 0; display: flex; justify-content: space-between; }
.col__hint { font-size: 10.5px; color: var(--mute); margin: 2px 0 10px; }
.col__empty { color: var(--mute); font-size: 12px; }
.ccard { border: 1px solid var(--line); border-radius: var(--r-sm); margin-bottom: 8px; overflow: hidden; background: var(--bg2); }
.ccard--gone { opacity: 0.6; }
.ccard__open { display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left; background: none; border: 0; padding: 10px 11px; font-size: 12px; color: var(--mute); }
.ccard__open b { font-size: 12.5px; color: var(--ink); font-weight: 500; line-height: 1.25; }
.ccard__open em { color: var(--mute); font-style: italic; font-family: var(--serif); }
.ccard__gone { color: var(--red); font-family: var(--mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.08em; }
.ccard__moves { display: flex; gap: 3px; padding: 0 8px 8px; flex-wrap: wrap; }
.ccard__moves button { background: none; border: 1px solid var(--line); border-radius: 5px; color: var(--mute); font-size: 10px; padding: 3px 7px; }
.ccard__moves button:hover { color: var(--ink); border-color: var(--line2); }
.ccard__drop { margin-left: auto; color: var(--red) !important; }

.empty-hero { text-align: center; max-width: 520px; margin: 60px auto; }
.empty-hero__mark { color: var(--dim); }
.empty-hero h1, .empty-hero h2 { font-family: var(--serif); font-size: 28px; margin: 18px 0 8px; }
.empty-hero p { color: var(--dim); }
.empty-hero__fine { font-size: 12.5px; color: var(--mute); }

.bigbtn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; background: var(--green); color: #08110c; border: 0; border-radius: 10px;
  font-weight: 600; font-size: 14.5px; padding: 12px 22px; text-decoration: none;
  transition: transform 0.15s, filter 0.15s;
}
.bigbtn:hover { transform: translateY(-1px); filter: brightness(1.07); color: #08110c; }
.ghostbtn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; background: none; border: 1px solid var(--line2); border-radius: 10px;
  color: var(--dim); font-size: 13.5px; padding: 11px 18px; text-decoration: none;
}
.ghostbtn:hover { color: var(--ink); border-color: var(--dim); }

/* ============================================================
   FIELD MANUAL
   ============================================================ */

.tool .slider { display: block; margin: 6px 0 16px; }
.tool .slider span { display: flex; justify-content: space-between; font-size: 13px; color: var(--dim); margin-bottom: 8px; }
.tool .slider b { font-family: var(--mono); color: var(--ink); }
.tool input[type="range"] { width: 100%; accent-color: var(--green); min-height: 28px; }
.ledger { border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.ledger__row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 13.5px; color: var(--dim); }
.ledger__row:last-child { border-bottom: 0; }
.ledger__row em { color: var(--mute); font-style: normal; font-size: 11px; display: block; }
.ledger__row b { font-family: var(--mono); color: var(--ink); }
.ledger__row--zero b { color: var(--green); }
.ledger__row--total { background: rgba(233, 226, 210, 0.04); }
.ledger__row--total b { font-size: 16px; }
.verdict { border-radius: var(--r-sm); padding: 12px 14px; font-size: 13.5px; }
.verdict--good { background: rgba(76, 195, 138, 0.09); color: var(--green); }
.verdict--warn { background: rgba(227, 181, 103, 0.08); color: var(--amber); }

.manual-sec { margin-top: 42px; }
.manual-sec__title { font-family: var(--serif); font-weight: 600; font-size: 27px; margin: 0 0 6px; }
.manual-sec__lede { color: var(--mute); font-size: 14px; max-width: 70ch; margin: 0 0 16px; }
.telldeck { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tell {
  text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 14px 16px; display: block; transition: border-color 0.15s; width: 100%;
}
.tell:hover { border-color: var(--line2); }
.tell.is-open { border-color: rgba(200, 164, 104, 0.4); }
.tell b { font-family: var(--serif); font-size: 16.5px; font-weight: 600; display: block; }
.tell__body { display: block; color: var(--dim); font-size: 13.5px; margin-top: 8px; }
.cgroup { margin-top: 18px; }
.cgroup h3 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--brass); margin: 0 0 8px; }
.cgroup ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cgroup li { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 11px 13px; font-size: 13px; background: var(--panel); }
.cgroup li b { display: block; font-weight: 600; }
.cgroup li em { color: var(--mute); font-style: normal; font-size: 12px; }
.vtools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.vtool { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 13px 15px; text-decoration: none; background: var(--panel); transition: border-color 0.15s; display: block; }
.vtool:hover { border-color: rgba(200, 164, 104, 0.45); }
.vtool b { display: block; font-size: 13.5px; margin-bottom: 4px; color: var(--brass); }
.vtool span { font-size: 12px; color: var(--mute); line-height: 1.45; display: block; }

/* ============================================================
   SYSTEM
   ============================================================ */

.stages { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
.stage { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px 13px; min-width: 0; }
.stage__name { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--dim); margin: 0 0 7px; display: flex; align-items: center; gap: 7px; }
.stage__name i { width: 7px; height: 7px; border-radius: 50%; background: var(--mute); flex: none; }
.stage.is-ok .stage__name i { background: var(--green); }
.stage.is-run .stage__name i { background: var(--blue); }
.stage.is-bad .stage__name i { background: var(--red); }
.stage__nums { font-family: var(--mono); font-size: 17px; margin: 0; color: var(--ink); }
.stage__nums small { font-size: 10px; color: var(--mute); }
.srcgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.src { display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 9px 12px; font-size: 12px; color: var(--mute); min-width: 0; }
.src i { width: 8px; height: 8px; border-radius: 50%; background: var(--mute); flex: none; }
.src.is-ok i { background: var(--green); }
.src.is-warn i { background: var(--amber); }
.src.is-bad i { background: var(--red); }
.src.is-off { opacity: 0.55; }
.src b { color: var(--dim); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.src span { margin-left: auto; font-family: var(--mono); font-size: 10.5px; white-space: nowrap; }
.ethos { max-width: 760px; margin-top: 40px; border-top: 1px solid var(--line); padding-top: 26px; }
.ethos h2 { font-family: var(--serif); font-size: 26px; margin: 0 0 10px; }
.ethos p { color: var(--dim); }
.ethos__credit { font-size: 12.5px; color: var(--mute); }

/* ============================================================
   THE LEDGER (inspector)
   ============================================================ */

.scrim { position: fixed; inset: 0; background: rgba(5, 7, 6, 0.62); z-index: 80; backdrop-filter: blur(3px); }
.inspector {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100vw);
  background: var(--bg2); border-left: 1px solid var(--line2); z-index: 90;
  display: flex; flex-direction: column; box-shadow: var(--shadow);
  transform: translateX(24px); opacity: 0; transition: transform 0.26s cubic-bezier(0.2, 0.7, 0.3, 1), opacity 0.26s;
  overscroll-behavior: contain;
}
.inspector.is-open { transform: translateX(0); opacity: 1; }
.inspector__head { display: flex; justify-content: space-between; gap: 14px; padding: max(22px, env(safe-area-inset-top)) 24px 14px; border-bottom: 1px solid var(--line); }
.inspector__kicker { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; color: var(--brass); margin: 0 0 6px; }
.inspector__title { font-family: var(--serif); font-weight: 600; font-size: 24px; line-height: 1.12; margin: 0; }
.inspector__sub { font-size: 12.5px; color: var(--mute); margin: 7px 0 0; }
.inspector__close { background: none; border: 1px solid var(--line); border-radius: 9px; color: var(--dim); font-size: 21px; width: 44px; height: 44px; flex: none; line-height: 1; }
.inspector__close:hover { color: var(--ink); border-color: var(--line2); }
.inspector__actions { display: flex; gap: 8px; padding: 13px 24px; border-bottom: 1px solid var(--line); flex-wrap: wrap; align-items: center; }
.stagepick { display: flex; gap: 4px; flex-wrap: wrap; }
.stagepick button { background: none; border: 1px solid var(--line); border-radius: 999px; color: var(--mute); font-size: 11.5px; padding: 6px 11px; }
.stagepick button.is-on { color: var(--green); border-color: rgba(76, 195, 138, 0.5); background: var(--green-soft); }
.inspector__tabs { display: flex; gap: 2px; padding: 10px 24px 0; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; overscroll-behavior-inline: contain; scroll-padding-inline: 24px; }
.inspector__tabs::-webkit-scrollbar { display: none; }
.inspector__tabs button {
  background: none; border: 0; color: var(--mute); font-family: var(--mono); font-size: 11.5px;
  letter-spacing: 0.05em; text-transform: uppercase; padding: 8px 11px 11px; min-height: 44px; position: relative; white-space: nowrap;
}
.inspector__tabs button:hover { color: var(--dim); }
.inspector__tabs button.is-on { color: var(--ink); }
.inspector__tabs button.is-on::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 0; height: 2px; background: var(--brass); border-radius: 2px; }
.inspector__body { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 24px max(34px, env(safe-area-inset-bottom)); scrollbar-gutter: stable; overscroll-behavior-y: contain; }
.insp-port { display: block; margin-bottom: 18px; }
.insp-port__frame { display: block; position: relative; aspect-ratio: 44 / 19; border-radius: var(--r-sm); overflow: hidden; }
.insp-port__frame .port, .insp-port__frame .shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.insp-port__cap { display: block; font-size: 11px; color: var(--mute); margin-top: 8px; line-height: 1.45; }
.insp-sec { margin-bottom: 22px; }
.insp-sec h3 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--brass); margin: 0 0 9px; }
.insp-sec p { margin: 0 0 8px; font-size: 14px; color: var(--dim); }
.insp-sec ul { margin: 0; padding-left: 18px; font-size: 13.5px; color: var(--dim); }
.insp-sec li { margin-bottom: 6px; }
ul.good li::marker { color: var(--green); }
ul.bad li::marker { color: var(--red); }
.insp-save { color: var(--green) !important; }
.insp-fine { font-size: 12px !important; color: var(--mute) !important; }
.insp-link { display: inline-block; font-size: 13.5px; color: var(--brass); margin-top: 4px; }
.kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 7px 16px; margin: 0 0 20px; font-size: 13px; }
.kv dt { color: var(--mute); font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; padding-top: 2px; }
.kv dd { margin: 0; color: var(--dim); overflow-wrap: anywhere; }
.kv dd .warn { color: var(--amber); font-weight: 600; }
.chain { margin: 0 0 14px; padding-left: 20px; font-size: 13.5px; color: var(--dim); }
.chain li { margin-bottom: 9px; }
.chain b { color: var(--brass); font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; }
.chain li::marker { color: var(--brass); font-family: var(--mono); }
.prot { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px 14px; margin-bottom: 8px; display: flex; flex-direction: column; gap: 3px; position: relative; }
.prot b { font-size: 14px; padding-right: 88px; }
.prot__state { position: absolute; top: 12px; right: 12px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.09em; text-transform: uppercase; padding: 2px 8px; border-radius: 5px; border: 1px solid var(--line); color: var(--mute); }
.prot.is-good .prot__state { color: var(--green); border-color: rgba(76, 195, 138, 0.4); }
.prot.is-bad .prot__state { color: var(--red); border-color: rgba(224, 106, 112, 0.4); }
.prot__gives { font-size: 12.5px; color: var(--dim); }
.prot__why { font-size: 12px; color: var(--mute); margin-top: 3px; }
.scorebar { display: grid; grid-template-columns: 128px minmax(0, 1fr) 40px; gap: 10px; align-items: center; margin-bottom: 7px; font-size: 12px; color: var(--dim); }
.scorebar__track { height: 7px; background: rgba(233, 226, 210, 0.06); border-radius: 4px; overflow: hidden; display: block; }
.scorebar__fill { display: block; height: 100%; background: linear-gradient(90deg, var(--green), rgba(76, 195, 138, 0.4)); }
.scorebar__num { font-family: var(--mono); font-size: 11.5px; text-align: right; }
.notes { width: 100%; min-height: 84px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--ink); font-family: var(--sans); font-size: 13.5px; padding: 11px 13px; resize: vertical; }
.cprog { font-family: var(--mono); color: var(--green); margin-left: 8px; }
.cbar { height: 6px; background: rgba(233, 226, 210, 0.06); border-radius: 3px; overflow: hidden; margin-bottom: 14px; }
.cbar span { display: block; height: 100%; background: var(--green); border-radius: 3px; }
.cgh { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); margin: 14px 0 7px; }
.ck { display: flex; gap: 10px; align-items: flex-start; padding: 9px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); margin-bottom: 6px; cursor: pointer; }
.ck.is-on { border-color: rgba(76, 195, 138, 0.4); background: rgba(76, 195, 138, 0.05); }
.ck input { accent-color: var(--green); margin-top: 3px; min-width: 16px; min-height: 16px; }
.ck b { display: block; font-size: 13px; font-weight: 500; }
.ck em { font-style: normal; font-size: 11.5px; color: var(--mute); }

/* ============================================================
   SHARED BITS
   ============================================================ */

.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 14px); z-index: 120;
  background: var(--panel2); border: 1px solid var(--line2); color: var(--ink);
  font-size: 13.5px; padding: 12px 18px; border-radius: 11px; box-shadow: var(--shadow);
  opacity: 0; transition: transform 0.24s, opacity 0.24s; max-width: min(480px, 90vw);
}
.toast.is-up { transform: translate(-50%, 0); opacity: 1; }

.loading { text-align: center; padding: 90px 0; color: var(--mute); }
.loading__mark { animation: spin 3s linear infinite; color: var(--dim); }
@keyframes spin { to { transform: rotate(360deg); } }

.deckfoot { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; border-top: 1px solid var(--line); padding: 18px 0 30px; font-size: 12px; color: var(--mute); }
.deckfoot a { color: var(--dim); }
.deckfoot p { margin: 0; }
.fallback { padding: 40px; text-align: center; color: #ece4d3; font-family: monospace; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1120px) {
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bubblegrid, .srcgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stages { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vtools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .maplay { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  body { font-size: 15.5px; }
  .dropgrid, .grid--2, .grid--3, .telldeck, .cgroup ul, .brackets { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bubblegrid, .vtools, .srcgrid { grid-template-columns: 1fr; }
  .masthead { gap: 10px; padding-top: 14px; }
  .masthead__status { display: none; }
  .brand__name { font-size: 22px; }
  .board { grid-template-columns: repeat(6, 78vw); }
  .bar { grid-template-columns: 96px minmax(0, 1fr) auto; }
  .inspector { width: 100vw; border-left: 0; }
  /* A nowrap hint line ("68 plotted · 158 outside the zone…") set the page's
     min width and slid the whole document sideways on phones. Wrap it. */
  .panel__head { flex-wrap: wrap; }
  .panel__hint { white-space: normal; }
  .dropcard__rent { font-size: 19px; }
  .drophead { padding-top: 30px; }
  .stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filters { gap: 6px 12px; }
}

/* The hidden attribute must beat any authored display — this codebase has
   been bitten three separate times (.toast, .filters, .inspector). */
[hidden] { display: none !important; }

/* ============================================================
   REDUCED MOTION — everything arrives, nothing performs
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .insignia .sweep, .pulse, .loading__mark { animation: none; }
  .is-entered .dropcard, .is-entered .mp-pin { animation: none; }
  .is-entered .chart path[stroke] { animation: none; stroke-dasharray: none; }
  .dropcard__hit, .brtile, .kpi--click, .bubcard, .inspector, .toast { transition: none; }
}

/* ============================================================
   ROUND 7 — the big-print edition.
   Price, Neighborhood, Photos, Location, Private Owner — huge,
   photo-forward, on the real city. Cascade overrides below.
   ============================================================ */

body { font-size: 18px; }
.pagehead__lede { font-size: 18px; }
.drophead__lede { font-size: clamp(18px, 2.2vw, 22px); }
.drophead__trust { font-size: 15px; }
.panel__title { font-size: 16px; }
.panel__hint { font-size: 12px; }
.kpi__label { font-size: 11px; }
.kpi__note { font-size: 13px; }
.tag { font-size: 12px; padding: 4px 9px; }
.dt { font-size: 14.5px; }
.dt thead th { font-size: 11px; }
.filters button, .pills button { font-size: 14px; min-height: 38px; }
.filters__label { font-size: 11px; }
.mastnav a { font-size: 13.5px; }
.feed__what { font-size: 14px; }
.bar__name { font-size: 14px; }
.bar { grid-template-columns: 150px minmax(0, 1fr) auto; }
.insp-sec p { font-size: 15px; }
.insp-sec ul { font-size: 15px; }
.kv { font-size: 14.5px; }
.inspector__title { font-size: 28px; }
.inspector__sub { font-size: 14px; }
.inspector { width: min(640px, 100vw); }

/* --- the drop: one huge editorial card per row --- */
.dropgrid { grid-template-columns: 1fr; gap: 26px; }
.dropcard__media { aspect-ratio: 21 / 9; }
.dropcard__rent {
  font-size: clamp(30px, 3.4vw, 44px); padding: 8px 18px; left: 16px; bottom: 14px;
  border-radius: 12px;
}
.dropcard__rent small { font-size: 15px; }
.dropcard__no { position: absolute; top: 16px; right: 16px; left: auto; color: var(--ink); background: rgba(10,12,11,.72); border: 1px solid var(--line); padding: 4px 10px; border-radius: 8px; font-size: 13px; backdrop-filter: blur(6px); z-index: 2; }
.dropcard__body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; padding: 22px 24px 24px; }
.dropcard__main { display: block; min-width: 0; position: static; }
.dropcard__hood { display: block; font-family: var(--mono); font-size: 14px; color: var(--brass); letter-spacing: 0.04em; margin-bottom: 8px; }
.dropcard__hood .bul { width: 17px; height: 17px; font-size: 10px; }
.dropcard__pinwarn { color: var(--amber); }
.dropcard__name { font-size: clamp(27px, 3.4vw, 40px); margin: 0 0 6px; line-height: 1.05; }
.dropcard__flavor { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--mute); font-size: 16px; margin: 0 0 14px; }
.dropcard__why { font-size: 17px; margin: 12px 0 8px; color: var(--dim); }
.dropcard__flaw { font-size: 15.5px; }
.dropcard__map { display: block; align-self: start; border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--line); }
.prov { font-size: 12.5px; }

.dropcard__owner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 13px;
  margin: 4px 0 4px; background: rgba(233, 226, 210, 0.025);
}
.dropcard__ownerlabel { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--mute); }
.dropcard__owner b { font-size: 15.5px; font-weight: 600; }
.ometer { flex: 1 1 70px; max-width: 130px; height: 7px; background: rgba(233,226,210,.07); border-radius: 4px; overflow: hidden; }
.ometer i { display: block; height: 100%; background: linear-gradient(90deg, var(--green), rgba(76,195,138,.45)); }
.ometer__n { font-family: var(--mono); font-size: 12px; color: var(--dim); }

/* --- photo gallery: swipeable, snap, photos win over the portrait --- */
.gal {
  position: absolute; inset: 0; display: flex; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.gal::-webkit-scrollbar { display: none; }
.gal__shot { flex: none; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: start; }
.gal__n {
  position: absolute; right: 12px; bottom: 12px; z-index: 2;
  font-family: var(--mono); font-size: 12px; color: var(--ink);
  background: rgba(10, 12, 11, 0.72); border: 1px solid var(--line);
  padding: 5px 10px; border-radius: 7px; backdrop-filter: blur(6px);
}

/* --- neighborhood minimap --- */
.gm { display: block; width: 100%; height: auto; }
.gm-water { fill: #0c1211; }
.gm-hood { fill: #141c17; stroke: rgba(233, 226, 210, 0.13); stroke-width: 1; }
.gm-hood--home { fill: #1b2a20; stroke: rgba(76, 195, 138, 0.5); stroke-width: 1.6; }
.gm-tether { stroke: rgba(76, 195, 138, 0.35); stroke-width: 1.6; stroke-dasharray: 4 4; }
.gm-stn { stroke: #0b0d0c; stroke-width: 1.6; }
.gm-stnname { font-family: var(--mono); font-size: 11px; fill: var(--dim); text-anchor: middle; }
.gm-label { font-family: var(--mono); font-size: 13px; letter-spacing: 0.18em; fill: var(--brass); }
.gm-halo { fill: rgba(76, 195, 138, 0.14); }
.gm-dot { fill: var(--green); stroke: #0b0d0c; stroke-width: 2.4; }
@keyframes gmpulse { 0% { r: 12; opacity: .5; } 100% { r: 22; opacity: 0; } }
.gm-halo { animation: gmpulse 2.2s ease-out infinite; }
.insp-map { border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; margin-bottom: 8px; }

/* --- atlas on real polygons --- */
.mp-nta { fill: #151d18; stroke: rgba(233, 226, 210, 0.14); stroke-width: 1.1; transition: fill 0.2s; }
.mp-nta:hover { fill: #1b2620; }
.mp-ntaname { font-family: var(--mono); font-size: 13px; letter-spacing: 0.14em; fill: rgba(233, 226, 210, 0.34); text-anchor: middle; pointer-events: none; }

/* --- motion: springier arrivals, photo life on hover --- */
.is-entered .dropcard { animation: rise7 0.65s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(var(--i, 0) * 90ms); }
@keyframes rise7 { from { opacity: 0; transform: translateY(26px) scale(0.985); } }
.dropcard__hit:hover .gal__shot, .dropcard__hit:hover .port { transform: scale(1.025); }
.gal__shot, .dropcard__media .port { transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.dropcard__hit:hover { transform: translateY(-4px); }

@media (max-width: 900px) {
  .dropcard__body { grid-template-columns: 1fr; gap: 14px; }
  .dropcard__map { max-width: 420px; }
  .dropcard__media { aspect-ratio: 16 / 10; }
  .dropcard__name { font-size: clamp(26px, 7.2vw, 34px); }
  .inspector__title { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .gm-halo { animation: none; }
  .is-entered .dropcard { animation: none; }
  .gal__shot, .dropcard__media .port, .mp-nta { transition: none; }
  .gal { scroll-behavior: auto; }
}

/* keep the hidden guarantee last */
[hidden] { display: none !important; }

/* --- the city vs the net (market_context) --- */
.mctx { margin-top: 14px; }
.mctx__lanes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: end; }
.mctx__lane { min-width: 0; }
.mctx__lane svg { width: 100%; height: auto; display: block; }
.mctx__who { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12.5px; color: var(--dim); margin-bottom: 6px; }
.mctx__who i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.mctx__who b { color: var(--ink); font-size: 15px; margin-left: auto; }
.mctx__lane--ours { border: 1px dashed rgba(233, 226, 210, 0.25); border-radius: var(--r-sm); padding: 12px 14px; align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.mctx__note { font-size: 12.5px; color: var(--mute); margin: 6px 0 0; }
.mctx__hoods { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; border-top: 1px solid var(--line); padding-top: 13px; }
.mctx__hood { font-size: 13px; color: var(--dim); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; }
.mctx__hood b { font-weight: 500; color: var(--ink); }
.mctx__hood em { font-style: normal; font-family: var(--mono); font-size: 11px; }
.mctx__hood em.is-up { color: var(--clay); }
.mctx__hood em.is-down { color: var(--green); }
@media (max-width: 900px) { .mctx__lanes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

[hidden] { display: none !important; }

/* --- the steward grade: does this owner fix things --- */
.steward { display: flex; align-items: center; gap: 13px; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 11px 14px; margin: 10px 0 4px; }
.steward__grade { font-family: var(--serif); font-weight: 600; font-size: 34px; line-height: 1; width: 46px; height: 46px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.steward--A .steward__grade { color: #0a130d; background: var(--green); }
.steward--B .steward__grade { color: var(--green); background: rgba(76,195,138,.13); }
.steward--C .steward__grade { color: var(--amber); background: rgba(227,181,103,.13); }
.steward--D .steward__grade { color: var(--clay); background: rgba(207,115,82,.14); }
.steward--E .steward__grade { color: #14090a; background: var(--red); }
.steward--\? .steward__grade { color: var(--mute); background: rgba(233,226,210,.06); }
.steward__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.steward__word { font-size: 15px; font-weight: 600; }
.steward__line { font-size: 13px; color: var(--mute); }
.steward__line--bad { color: var(--clay); }
.steward__line--good { color: var(--green); }
.steward--big { margin: 0 0 18px; }
.steward--big .steward__grade { font-size: 42px; width: 58px; height: 58px; }

.dropcard__fresh {
  position: absolute; left: 16px; top: 16px; z-index: 2;
  font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: #0a130d; background: var(--green); padding: 5px 11px; border-radius: 8px; font-weight: 600;
}
.dropcard__spatial { font-family: var(--mono); font-size: 13px; color: var(--mute); margin: 0 0 8px; }

[hidden] { display: none !important; }

/* --- commute anchors --- */
.anchorbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 11px 14px; background: rgba(233,226,210,.02); }
.anchorbar__label { font-family: var(--mono); font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--brass); }
.anchorbar select { background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; font-family: var(--sans); font-size: 14px; padding: 8px 10px; max-width: 240px; min-height: 38px; }
.anchorbar__hint { font-size: 12.5px; color: var(--mute); flex: 1 1 200px; }
.dropcard__commute { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; }
.commute { font-family: var(--mono); font-size: 13px; color: var(--dim); border: 1px solid var(--line); border-radius: 7px; padding: 5px 10px; display: inline-flex; align-items: center; gap: 5px; }
.commute--good { color: var(--green); border-color: rgba(76,195,138,.35); }

[hidden] { display: none !important; }

/* --- price memory --- */
.pricepath { width: 100%; height: auto; display: block; border: 1px solid var(--line); border-radius: var(--r-sm); background: rgba(233,226,210,.02); margin-bottom: 8px; }

[hidden] { display: none !important; }

/* --- phase 1: personal value math --- */
.qualify { font-family: var(--mono); font-size: 13px; margin: 0 0 10px; padding: 6px 11px; border-radius: 7px; display: inline-block; }
.qualify--good { color: var(--green); background: rgba(76,195,138,.08); }
.qualify--warn { color: var(--amber); background: rgba(227,181,103,.08); }
.t-under { color: var(--green); font-family: var(--mono); font-size: 12.5px; }
.t-over { color: var(--amber); font-family: var(--mono); font-size: 12.5px; }
.anchorbar input[type="number"] { background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; font-family: var(--mono); font-size: 14px; padding: 8px 10px; width: 150px; min-height: 38px; }
.outcomes { display: flex; gap: 6px; }
.outcomes button { background: none; border: 1px solid var(--line); border-radius: 999px; color: var(--dim); font-size: 13.5px; padding: 7px 16px; }
.outcomes button.is-on { color: var(--green); border-color: rgba(76,195,138,.5); background: var(--green-soft); }
.ccard__outcome { font-family: var(--mono); font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; }
.ccard__outcome--yes { color: var(--green); }
.ccard__outcome--roughly { color: var(--amber); }
.ccard__outcome--no { color: var(--red); }

[hidden] { display: none !important; }

.prov__i--warn { color: var(--clay); }

[hidden] { display: none !important; }

/* --- phase 2: the sweep hero, transitions, living windows, sky --- */
.sweephero { position: relative; height: 300px; overflow: hidden; border-radius: var(--r); border: 1px solid var(--line); margin-top: 20px; transition: height .6s cubic-bezier(.22,1,.36,1), opacity .6s, margin .6s; }
.sweephero svg { width: 100%; height: 100%; display: block; }
.sweephero.is-done { height: 0; opacity: 0; margin-top: 0; border-width: 0; }
.sweephero__beam path { fill: rgba(76, 195, 138, 0.16); }
.sweephero__beam { animation: heroSweep 2.2s cubic-bezier(.45,.05,.55,.95) 1 both; }
@keyframes heroSweep { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.sweephero__cap { position: absolute; left: 16px; bottom: 10px; margin: 0; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }

::view-transition-old(vera-hero), ::view-transition-new(vera-hero) { animation-duration: .32s; }

.pwin { animation: pwin 5.5s ease-in-out infinite; }
@keyframes pwin { 0%, 92%, 100% { opacity: inherit; } 95% { opacity: .18; } }

.mp[data-sky="night"] .mp-nta { fill: #10160f; }
.mp[data-sky="night"] { background: #090e0d; }
.mp[data-sky="day"] .mp-nta { fill: #1b241e; }
.mp[data-sky="dawn"] .mp-nta { fill: #171d15; }

@media (prefers-reduced-motion: reduce) {
  .sweephero, .sweephero__beam { animation: none; display: none; }
  .pwin { animation: none; }
}

[hidden] { display: none !important; }

/* --- phase 3: receipts, memorial, field kit --- */
.memorial { font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--dim); border-left: 3px solid var(--clay); padding: 6px 0 6px 16px; margin: 34px 0 0; max-width: 60ch; }
.arcday { margin-top: 30px; }
.arcday__date { font-family: var(--mono); font-size: 13px; letter-spacing: .12em; color: var(--brass); margin: 0 0 10px; }
.arcrows { display: flex; flex-direction: column; gap: 8px; }
.arcrow { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 14px; align-items: center; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px 15px; background: var(--panel); cursor: pointer; font-size: 14px; color: var(--dim); }
.arcrow--dead { cursor: default; opacity: .75; }
.arcrow b { color: var(--ink); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arcrow__badge { font-family: var(--mono); font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; padding: 3px 9px; border-radius: 5px; border: 1px solid var(--line); }
.arcrow__badge.is-live { color: var(--green); border-color: rgba(76,195,138,.4); }
.arcrow__badge.is-drop { color: var(--blue); border-color: rgba(123,167,217,.4); }
.arcrow__badge.is-gone { color: var(--mute); }
#fieldkit { display: none; }
@media print {
  body > *:not(#fieldkit) { display: none !important; }
  #fieldkit, #fieldkit[hidden] { display: block !important; color: #000; background: #fff; font-family: Georgia, serif; padding: 24px; }
  #fieldkit h1 { font-size: 22pt; margin: 0 0 4px; }
  #fieldkit h2 { font-size: 13pt; margin: 14pt 0 4pt; }
  #fieldkit .fk-sub { font-size: 12pt; margin: 0; }
  #fieldkit .fk-link, #fieldkit .fk-foot { font-family: monospace; font-size: 8.5pt; color: #444; }
  #fieldkit .fk-warn { border: 1.5pt solid #000; padding: 6pt; font-weight: bold; }
  #fieldkit .fk-illegal { border: 2pt solid #000; padding: 8pt; margin: 8pt 0; }
  #fieldkit .fk-illegal h2 { margin: 0 0 5pt; font-size: 12pt; }
  #fieldkit .fk-illegal ul { margin: 0; padding-left: 14pt; font-size: 10pt; }
  #fieldkit .fk-illegal li { margin-bottom: 5pt; }
  #fieldkit .fk-illegal i { font-size: 9pt; }
  #fieldkit .fk-cues { font-size: 9.5pt; border-left: 2pt solid #000; padding-left: 6pt; }
  #fieldkit table { border-collapse: collapse; width: 100%; font-size: 10pt; }
  #fieldkit th, #fieldkit td { border-bottom: 0.5pt solid #999; text-align: left; padding: 3pt 6pt 3pt 0; vertical-align: top; }
  #fieldkit .fk-checks { columns: 2; font-size: 9pt; list-style: none; padding: 0; }
  /* Write-in lines for the address an unverified listing does not carry.
     Wider leading than the body copy because it is written on by hand. */
  #fieldkit .fk-write { font-size: 10pt; line-height: 2.1; margin-top: 4pt; }
  #fieldkit ol { font-size: 10.5pt; }
  .grain { display: none !important; }
}

[hidden] { display: none !important; }

.citelink { color: var(--brass); font-size: 11px; text-decoration: none; }
.citelink:hover { text-decoration: underline; }

[hidden] { display: none !important; }

.ccard__movein { font-family: var(--mono); font-size: 10px; color: var(--brass); line-height: 1.5; display: block; }

[hidden] { display: none !important; }


/* --- the real map --- */
.maplay--vector { grid-template-columns: 0.78fr 0.22fr; }
.veramap { height: 660px; border-radius: var(--r-sm); overflow: hidden; background: #0c1512; }
.veramap canvas { border-radius: var(--r-sm); }
.maplibregl-ctrl-attrib { background: rgba(11,13,12,.7) !important; color: var(--mute) !important; font-size: 10px !important; }
.maplibregl-ctrl-attrib a { color: var(--mute) !important; }
.maplibregl-ctrl-group { background: var(--panel) !important; border: 1px solid var(--line2) !important; box-shadow: none !important; }
.maplibregl-ctrl-group button { background: transparent !important; }
.maplibregl-ctrl-group button span { filter: invert(0.85); }
@media (max-width: 1120px) { .maplay--vector { grid-template-columns: 1fr; } .veramap { height: 480px; } }

[hidden] { display: none !important; }

/* ============================================================
   THE PIXAR PASS — one motion language, everywhere.
   A real spring (CSS linear()), press-weight on everything
   interactive, scroll reveals, and details that feel alive.
   All of it bows to prefers-reduced-motion.
   ============================================================ */

:root {
  --spring: linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077 20.4%, 1.121, 1.149 24.3%, 1.159, 1.163 27%, 1.154, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1);
  --springy: cubic-bezier(.34, 1.56, .64, 1);
  --glide: cubic-bezier(.22, 1, .36, 1);
}

/* press-weight: every interactive thing physically responds */
button:active, .dropcard__hit:active, .bubcard:active, .walkrow:active,
.arcrow:active, .vtool:active, .tell:active, .kpi--click:active, .brtile:active {
  transform: scale(0.974);
  transition: transform 0.07s ease-out;
}
.filters button, .pills button, .mastnav a, .tag, .chip, .stagepick button,
.outcomes button, .dtoolbar__density button, .ghostbtn, .bigbtn {
  transition: transform 0.16s var(--springy), border-color 0.16s, color 0.16s, background 0.16s, box-shadow 0.16s;
}
.filters button:hover, .pills button:hover { transform: translateY(-1px); }
.bigbtn:hover { transform: translateY(-2px) scale(1.02); }

/* the drop deals like cards — spring overshoot, slight rotation settle */
.is-entered .dropcard { animation: dealIn 0.85s var(--spring) both; animation-delay: calc(var(--i, 0) * 110ms); }
@keyframes dealIn {
  from { opacity: 0; transform: translateY(42px) scale(0.96) rotate(0.4deg); }
  to { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}
.dropcard__hit { transition: transform 0.45s var(--spring), border-color 0.25s, box-shadow 0.45s var(--glide); transform-style: preserve-3d; }
.dropcard__hit:hover { transform: translateY(-6px) perspective(1200px) rotateX(0.7deg) scale(1.004); box-shadow: 0 30px 70px rgba(0,0,0,.5), 0 0 0 1px rgba(200,164,104,.25); }

/* steward letter stamps in */
.is-entered .steward__grade { animation: stamp 0.6s var(--spring) both; animation-delay: calc(var(--i, 0) * 110ms + 300ms); }
@keyframes stamp { from { opacity: 0; transform: scale(1.7) rotate(-7deg); } to { opacity: 1; transform: scale(1) rotate(0); } }

/* fresh badge shimmer — once, subtle */
.dropcard__fresh { overflow: hidden; position: absolute; }
.dropcard__fresh::after { content: ""; position: absolute; inset: 0; transform: translateX(-110%); background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.5) 50%, transparent 70%); animation: shimmer 2.4s var(--glide) 1s 2; }
@keyframes shimmer { to { transform: translateX(110%); } }

/* scroll reveals */
.rv { opacity: 0; transform: translateY(22px); }
.rv-in { opacity: 1; transform: translateY(0); transition: opacity 0.7s var(--glide), transform 0.7s var(--spring); }

/* countdown flip-tick */
.flipd { display: inline-block; transition: transform 0.28s var(--springy), opacity 0.28s; }
.flipd.tick { animation: fliptick 0.45s var(--spring); }
@keyframes fliptick { 0% { transform: translateY(-0.55em); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }

/* gallery dots */
.gal__dots { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; justify-content: center; gap: 5px; z-index: 3; pointer-events: none; }
.gal__dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(236,228,211,.35); transition: transform .3s var(--springy), background .3s; }
.gal__dot.is-on { background: var(--ink); transform: scale(1.45); }

/* atlas pins: living markers */
.vpin { width: 26px; height: 26px; border-radius: 50%; border: 2.6px solid var(--green); background: rgba(14,20,17,.92); box-shadow: 0 4px 14px rgba(0,0,0,.5); cursor: pointer; display: flex; align-items: center; justify-content: center; font: 600 9px var(--mono); color: var(--ink); transition: transform .35s var(--spring); animation: pinDrop .7s var(--spring) both; animation-delay: var(--pd, 0ms); }
.vpin:hover { transform: scale(1.35); z-index: 5; }
.vpin--warn { border-color: var(--amber); }
.vpin--bad { border-color: var(--red); }
.vpin__pulse { position: absolute; inset: -7px; border-radius: 50%; border: 2px solid currentColor; opacity: 0; animation: vpulse 2.6s ease-out infinite; animation-delay: var(--pd, 0ms); color: var(--green); pointer-events: none; }
.vpin--warn .vpin__pulse { color: var(--amber); }
.vpin--bad .vpin__pulse { color: var(--red); }
@keyframes pinDrop { 0% { opacity: 0; transform: translateY(-26px) scale(.6); } 60% { opacity: 1; } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes vpulse { 0% { opacity: .55; transform: scale(.7); } 70% { opacity: 0; transform: scale(1.25); } 100% { opacity: 0; } }

/* aurora drift — the ground breathes, barely */
body { background-attachment: fixed; }
@keyframes aurora { 0% { background-position: 0% 0%, 100% 0%, 0 0; } 50% { background-position: 6% 3%, 94% 2%, 0 0; } 100% { background-position: 0% 0%, 100% 0%, 0 0; } }
body { animation: aurora 46s ease-in-out infinite; }

/* insignia quickens when the sweep is near */
.is-sweep-near .insignia .sweep { animation-duration: 2.6s; }
.is-sweep-near .pulse { animation-duration: 1.1s; }

@media (prefers-reduced-motion: reduce) {
  .is-entered .dropcard, .is-entered .steward__grade, .dropcard__fresh::after,
  .flipd.tick, .vpin, .vpin__pulse, body { animation: none !important; }
  .rv { opacity: 1; transform: none; }
  .dropcard__hit, .vpin, .filters button, .pills button, .bigbtn { transition: none; }
}

[hidden] { display: none !important; }

.recwarn { border: 1px solid rgba(224,106,112,.45); background: rgba(224,106,112,.07); border-radius: var(--r-sm); padding: 16px 19px; margin: 30px 0 0; font-size: 15px; line-height: 1.62; color: var(--dim); max-width: 74ch; }
.recwarn b { color: var(--red); font-weight: 500; display: block; margin-bottom: 5px; }

[hidden] { display: none !important; }

.pf-head { font-size: 16px; line-height: 1.5; margin: 0 0 10px; padding-left: 13px; border-left: 3px solid var(--line2); color: var(--dim); }
.pf-head b { color: var(--ink); font-weight: 500; }
.pf-head--bad { border-left-color: var(--red); }
.pf-head--warn { border-left-color: var(--amber); }
.pf-head--good { border-left-color: var(--green); }

[hidden] { display: none !important; }

/* an unlawful demand is the loudest thing on the page */
.illegal { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 11px; }
.illegal li { border-left: 3px solid var(--red); padding: 10px 0 10px 14px; }
.illegal b { display: block; color: var(--red); font-weight: 500; font-size: 15.5px; margin-bottom: 4px; }
.illegal__q { display: block; font-family: var(--mono); font-size: 12px; color: var(--dim); margin: 3px 0; }
.illegal__law { display: block; font-size: 12.5px; color: var(--mute); }

[hidden] { display: none !important; }

/* the funnel: where the net narrowed, on a day with no drop */
.funnel { list-style: none; padding: 0; margin: 26px 0 18px; display: flex; flex-direction: column; gap: 10px; max-width: 620px; text-align: left; }
.funnel__row { display: grid; grid-template-columns: 62px 120px minmax(0, 1fr); gap: 14px; align-items: center; }
.funnel__n { font-family: var(--mono); font-size: 21px; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.funnel__bar { height: 7px; border-radius: 4px; background: var(--line); overflow: hidden; }
.funnel__bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--brass), var(--green)); border-radius: 4px; transform-origin: left; animation: funnelIn .9s var(--spring) both; }
.funnel__l { font-size: 14px; color: var(--dim); line-height: 1.45; }
.funnel__row.is-last .funnel__n { color: var(--clay); }
.funnel__row.is-last .funnel__bar i { background: var(--clay); }
.funnel__note { font-size: 14px; color: var(--mute); max-width: 62ch; line-height: 1.6; margin: 0 0 6px; }
.dropempty__close { font-size: 14.5px; color: var(--dim); margin-top: 20px; }
@keyframes funnelIn { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .funnel__bar i { animation: none; } }
@media (max-width: 620px) { .funnel__row { grid-template-columns: 48px 1fr; } .funnel__bar { grid-column: 1 / -1; } }

[hidden] { display: none !important; }

.unlawful__h { font-size: 17px; margin: 26px 0 10px; color: var(--ink); font-weight: 500; }
.unlawful { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-direction: column; gap: 12px; }
.unlawful li { border-left: 2px solid var(--red); padding-left: 14px; font-size: 14.5px; line-height: 1.6; color: var(--dim); }
.unlawful b { color: var(--ink); font-weight: 500; }
.unlawful i { display: block; font-family: var(--mono); font-size: 11px; color: var(--mute); font-style: normal; letter-spacing: .04em; margin-top: 3px; }

[hidden] { display: none !important; }

.ethos__h { font-size: 17px; margin: 30px 0 8px; color: var(--ink); font-weight: 500; }
.credits { list-style: none; padding: 0; margin: 12px 0 18px; display: flex; flex-direction: column; gap: 9px; max-width: 68ch; }
.credits li { font-size: 14px; line-height: 1.6; color: var(--dim); border-left: 2px solid var(--line2); padding-left: 13px; }
.credits b { color: var(--ink); font-weight: 500; }
.credits a { color: var(--brass); }

/* Exact-address confirmation stays visually separate from VERA's published
   evidence. Green appears only after the renter confirms an official result. */
.address-check, .address-proof {
  margin: 18px 0 22px; padding: clamp(16px, 3vw, 22px); border: 1px solid var(--line2);
  border-radius: var(--r); background: linear-gradient(145deg, rgba(200,164,104,.055), rgba(76,195,138,.025));
}
.address-check label { display: block; margin-bottom: 11px; }
.address-check label b, .address-proof h4 { display: block; color: var(--ink); font-size: 16px; font-weight: 600; }
.address-check label span { display: block; margin-top: 3px; color: var(--mute); font-size: 13px; }
.address-check__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; align-items: stretch; }
.address-check__row:focus-within { filter: drop-shadow(0 0 12px rgba(200,164,104,.12)); }
.address-check input {
  width: 100%; min-width: 0; min-height: 48px; border: 1px solid var(--line2); border-radius: 10px;
  background: var(--bg2); color: var(--ink); padding: 11px 13px; font: 16px var(--sans);
}
.address-check input::placeholder { color: var(--mute); }
.address-check button[disabled] { cursor: wait; opacity: .68; transform: none; }
.address-check__result { min-height: 1.55em; margin-top: 12px; color: var(--dim); font-size: 13.5px; line-height: 1.55; }
.address-check__result:empty { min-height: 0; margin-top: 0; }
.address-check__result.is-error { color: var(--red); }
.address-check__result.is-ready { color: var(--dim); }
.address-check__result > p { margin: 0 0 9px; }
.address-candidates { display: grid; gap: 7px; }
.address-candidates button {
  display: grid; gap: 3px; width: 100%; min-height: 52px; padding: 10px 12px; text-align: left;
  border: 1px solid var(--line); border-radius: 9px; background: var(--panel); color: var(--dim);
}
.address-candidates button:hover { border-color: rgba(76,195,138,.55); background: var(--green-soft); }
.address-candidates b { color: var(--ink); overflow-wrap: anywhere; }
.address-candidates span { font: 11px/1.5 var(--mono); color: var(--mute); overflow-wrap: anywhere; }
.address-proof { border-color: rgba(76,195,138,.34); background: rgba(76,195,138,.045); }
.address-proof__eyebrow { margin: 0 0 6px; color: var(--green); font: 10.5px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.address-proof h4 { margin: 0 0 14px; overflow-wrap: anywhere; }
.address-proof .kv { margin-bottom: 13px; }
.address-proof__links { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-bottom: 12px; }
.address-proof__links a { color: var(--brass); font-size: 13px; }
.address-proof__actions { display: flex; flex-wrap: wrap; gap: 8px; }

.lab-callout {
  margin: 32px 0 20px; padding: clamp(20px, 4vw, 30px); border: 1px solid rgba(200,164,104,.34);
  border-radius: var(--r); background: radial-gradient(500px 180px at 0 0, rgba(200,164,104,.09), transparent 66%), var(--panel);
}
.lab-callout h3 { margin: 0 0 8px; font-family: var(--serif); font-size: clamp(22px, 3vw, 30px); }
.lab-callout p:not(.kicker) { max-width: 62ch; }

@media (max-width: 760px) {
  .masthead { padding-top: max(14px, env(safe-area-inset-top)); }
  .mastnav a, .filters button, .pills button, .dtoolbar__density button { min-height: 44px; }
  .filters__group { flex-wrap: nowrap; width: 100%; overflow-x: auto; padding-bottom: 2px; overscroll-behavior-inline: contain; scrollbar-width: none; }
  .filters__group::-webkit-scrollbar { display: none; }
  .filters__label { position: sticky; left: 0; z-index: 1; align-self: stretch; display: inline-flex; align-items: center; padding-right: 8px; background: var(--bg); }
  .address-check__row { grid-template-columns: 1fr; }
  .address-check__row .bigbtn { width: 100%; }
  .inspector__head, .inspector__actions, .inspector__body { padding-left: max(18px, env(safe-area-inset-left)); padding-right: max(18px, env(safe-area-inset-right)); }
  .inspector__tabs { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  .toast { bottom: max(18px, env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  .address-check__row:focus-within { filter: none; }
  .mastnav, .inspector__tabs { scroll-behavior: auto; }
}

[hidden] { display: none !important; }

.perunit { font-size: 14px; line-height: 1.62; color: var(--dim); border-left: 2px solid var(--line2); padding-left: 13px; margin: 14px 0; max-width: 66ch; }
.perunit b { color: var(--ink); font-weight: 500; }

[hidden] { display: none !important; }


/* visible only to assistive tech */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }