/* Homes · calm, precise, honest. 4px spacing rhythm, Inter throughout. */
:root {
  --bg: #f5f6f8; --panel: #ffffff; --inset: #f0f2f5;
  --fg: #16191e; --fg-2: #5a626f; --fg-3: #99a1ad;
  --line: #e5e7ec; --line-2: #d5d9e1;
  --hover: #eef1f5;
  --acc: #2f6df6; --acc-soft: #e9f0fe; --acc-ink: #1e4fc4;
  --good: #1f8a4c; --good-soft: #e2f4e9;
  --warn: #b7791f; --warn-soft: #fdf3dd;
  --bad: #c8313d; --bad-soft: #fde7e9;
  --shadow: 0 12px 32px rgba(18, 22, 32, .14), 0 2px 6px rgba(18, 22, 32, .07);
  --r-s: 8px; --r-m: 10px; --r-l: 12px; --r-pill: 999px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;
  --fs-xs: .6875rem; --fs-s: .75rem; --fs-b: .8125rem; --fs-n: .875rem; --fs-l: .9375rem; --fs-xl: 1.25rem; --fs-2xl: 1.625rem;
  --z-pop: 30; --z-scrim: 40; --z-drawer: 41;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e1014; --panel: #151920; --inset: #0b0d11;
    --fg: #e9ebef; --fg-2: #a4abb9; --fg-3: #6e7584;
    --line: #222834; --line-2: #303847;
    --hover: #1b212c;
    --acc: #6b9cff; --acc-soft: #1a2742; --acc-ink: #9dbcff;
    --good: #4fc47f; --good-soft: #122f20;
    --warn: #e2b04a; --warn-soft: #372a0e;
    --bad: #f06b74; --bad-soft: #3a1417;
    --shadow: 0 12px 32px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .4);
  }
}
:root[data-theme="dark"] {
  --bg: #0e1014; --panel: #151920; --inset: #0b0d11;
  --fg: #e9ebef; --fg-2: #a4abb9; --fg-3: #6e7584;
  --line: #222834; --line-2: #303847;
  --hover: #1b212c;
  --acc: #6b9cff; --acc-soft: #1a2742; --acc-ink: #9dbcff;
  --good: #4fc47f; --good-soft: #122f20;
  --warn: #e2b04a; --warn-soft: #372a0e;
  --bad: #f06b74; --bad-soft: #3a1417;
  --shadow: 0 12px 32px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .4);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font: 400 var(--fs-n)/1.45 Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-feature-settings: "cv11", "ss01"; font-kerning: normal;
  color: var(--fg); background: var(--bg);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
#app { display: flex; flex-direction: column; min-height: 100dvh; max-width: 1720px; margin-inline: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--acc); text-decoration: none; }
a:hover { text-decoration: underline; }
::selection { background: var(--acc-soft); }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: 6px; }

.num, td.num, .summary .v, .hero .v, table.mini td.num {
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum", "cv11";
}
.muted { color: var(--fg-2); } .faint { color: var(--fg-3); } .small { font-size: var(--fs-s); }

/* ---------- top bar ---------- */
.top {
  position: sticky; top: 0; z-index: 20;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--sp-4); align-items: center;
  padding: var(--sp-3) var(--sp-5);
  background: var(--bg); border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: baseline; gap: var(--sp-3); min-width: 0; }
.brand h1 { font-size: var(--fs-l); font-weight: 650; letter-spacing: -.015em; margin: 0; white-space: nowrap; }
.brand .context { margin: 0; font-size: var(--fs-s); color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search { display: flex; justify-content: center; min-width: 0; }
.search input {
  width: 100%; max-width: 460px;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line-2); border-radius: var(--r-m);
  background: var(--panel); outline: none;
}
.search input::placeholder { color: var(--fg-3); }
.search input:focus { border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-soft); }
.actions { display: flex; gap: var(--sp-2); align-items: center; }
.btn {
  padding: 7px var(--sp-3); border: 1px solid var(--line-2); background: var(--panel);
  border-radius: var(--r-m); cursor: pointer; white-space: nowrap;
  display: inline-flex; gap: 6px; align-items: center; justify-content: center;
  transition: background-color .15s, border-color .15s, color .15s;
}
.btn:hover { background: var(--hover); }
.btn:active { transform: translateY(1px); }
.btn.on { border-color: var(--acc); color: var(--acc-ink); background: var(--acc-soft); }
.btn.primary { background: var(--acc); border-color: var(--acc); color: #fff; font-weight: 550; }
:root[data-theme="dark"] .btn.primary, :root:not([data-theme="light"]) .btn.primary { color: #0d1526; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .btn.primary { color: #0d1526; } }
th.num { text-align: right; }
.count { background: var(--acc); color: #fff; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 600; padding: 1px 7px; line-height: 1.35; }
:root[data-theme="dark"] .count { color: #0d1526; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .count { color: #0d1526; } }
.link { background: none; border: 0; color: var(--acc-ink); cursor: pointer; padding: var(--sp-1); font-weight: 550; border-radius: 6px; }
.link:hover { text-decoration: underline; }

/* ---------- summary: one quiet line of key numbers ---------- */
.summary {
  display: flex; align-items: baseline; flex-wrap: wrap; row-gap: var(--sp-1);
  padding: var(--sp-3) var(--sp-5) 0;
}
.summary:empty { display: none; }
.stat { display: flex; align-items: baseline; gap: var(--sp-2); padding: 0 var(--sp-4); }
.stat:first-child { padding-left: 0; }
.stat + .stat { border-left: 1px solid var(--line); }
.stat .k { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--fg-3); white-space: nowrap; }
.stat .v { font-size: var(--fs-l); font-weight: 650; letter-spacing: -.01em; white-space: nowrap; }
.stat .d { font-size: var(--fs-s); color: var(--fg-2); white-space: nowrap; }

/* ---------- chips ---------- */
.chips { display: flex; gap: 6px; flex-wrap: wrap; padding: var(--sp-2) var(--sp-5) 0; }
.chips:empty { display: none; }
.chip {
  display: inline-flex; gap: var(--sp-2); align-items: center;
  font-size: var(--fs-s); font-weight: 500; padding: 3px 6px 3px 10px;
  border-radius: var(--r-pill); background: var(--acc-soft); color: var(--acc-ink);
}
.chip button {
  background: none; border: 0; cursor: pointer; color: inherit; border-radius: var(--r-pill);
  font-size: var(--fs-n); line-height: 1; padding: 1px 5px;
}
.chip button:hover { background: rgba(127, 140, 170, .25); }

/* ---------- table ---------- */
.tablewrap {
  margin: var(--sp-3) var(--sp-5) var(--sp-4);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-l);
  overflow: auto; max-height: calc(100dvh - 196px); min-height: 320px;
}
table { border-collapse: separate; border-spacing: 0; min-width: 100%; }
th, td { padding: 9px var(--sp-3); border-bottom: 1px solid var(--line); white-space: nowrap; font-size: var(--fs-b); }
tbody tr:last-child td { border-bottom: 0; }
th {
  position: sticky; top: 0; z-index: 3; background: var(--panel);
  font-size: var(--fs-s); font-weight: 600; color: var(--fg-2); text-align: left;
  cursor: pointer; user-select: none; border-bottom: 1px solid var(--line-2);
}
th .th-in { display: inline-flex; align-items: center; gap: 5px; }
th .arr { display: inline-block; min-width: 12px; font-size: .6875rem; color: transparent; }
th:hover .arr { color: var(--fg-3); }
th.sorted { color: var(--acc-ink); }
th.sorted .arr { color: var(--acc-ink); }
th.num { text-align: right; }
th.num .th-in { flex-direction: row-reverse; }
td.num { text-align: right; }
.tablewrap.sh-top thead th { box-shadow: 0 10px 14px -10px rgba(18, 22, 32, .28); }
th:first-child, td:first-child {
  position: sticky; left: 0; z-index: 2; background: var(--panel);
  border-right: 1px solid var(--line);
}
th:first-child { z-index: 4; }
.tablewrap.sh-x :is(th, td):first-child { box-shadow: 10px 0 14px -10px rgba(18, 22, 32, .25); }
tbody tr { cursor: pointer; }
tbody tr:hover td { background: var(--hover); }
tbody tr.open td { background: var(--acc-soft); }
tbody tr.open td:first-child { box-shadow: inset 3px 0 0 var(--acc); }
tbody tr:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; }
tbody tr.pass td { color: var(--fg-3); }
tbody tr.pass td.addr .street { color: var(--fg-2); }
td.addr .street { display: block; font-weight: 550; font-size: var(--fs-n); letter-spacing: -.005em; }
td.addr .city { display: block; font-size: var(--fs-s); color: var(--fg-2); font-weight: 400; }
td.monthly { font-weight: 650; font-size: var(--fs-n); }
.pill { display: inline-block; font-size: var(--fs-s); font-weight: 550; padding: 1px 8px; border-radius: var(--r-pill); line-height: 1.5; }
.pill.good { background: var(--good-soft); color: var(--good); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.bad { background: var(--bad-soft); color: var(--bad); }
.pill.none { background: var(--inset); color: var(--fg-3); font-weight: 450; }
.delta.good { color: var(--good); font-weight: 550; }
.delta.bad { color: var(--bad); font-weight: 550; }
.flg { display: inline; font-size: var(--fs-s); color: var(--fg-2); }
.flg + .flg::before { content: " · "; color: var(--fg-3); }
.flg.good { color: var(--good); font-weight: 600; }
.flg.warn { color: var(--warn); font-weight: 550; }
.est { display: inline-block; font-size: var(--fs-xs); font-weight: 600; padding: 0 6px; margin-left: 6px; border-radius: 6px; background: var(--warn-soft); color: var(--warn); vertical-align: 1px; }
.stsel { padding: 4px 6px; border: 1px solid var(--line-2); border-radius: var(--r-s); background: var(--panel); font-size: var(--fs-s); cursor: pointer; max-width: 118px; }
.stsel:hover { border-color: var(--fg-3); }
.stsel.Interested { border-color: var(--good); color: var(--good); }
.stsel.Toured { border-color: var(--acc); color: var(--acc-ink); }
.stsel.Pass { color: var(--fg-3); }
td.note { max-width: 260px; overflow: hidden; text-overflow: ellipsis; color: var(--fg-2); font-size: var(--fs-s); }

/* loading skeleton */
tr.skel { cursor: default; pointer-events: none; }
tr.skel td { border-bottom: 1px solid var(--line); }
tr.skel .bar { display: block; height: 12px; border-radius: 6px; background: var(--inset); }
tr.skel .bar.w { width: 62%; }
tr.skel .bar.n { width: 44%; margin-left: auto; }
@media (prefers-reduced-motion: no-preference) {
  tr.skel .bar { animation: pulse 1.2s ease-in-out infinite alternate; }
  @keyframes pulse { from { opacity: .55; } to { opacity: 1; } }
}

/* empty and error states */
.empty { padding: var(--sp-8) var(--sp-5); text-align: center; }
.empty-t { font-size: var(--fs-l); font-weight: 600; letter-spacing: -.01em; margin: 0 0 var(--sp-1); }
.empty-d { color: var(--fg-2); margin: 0 0 var(--sp-4); }
.empty .btn { margin-inline: auto; }
.loaderr { padding: var(--sp-8) var(--sp-5); text-align: center; color: var(--fg-2); }

/* ---------- popovers ---------- */
.pop {
  position: fixed; z-index: var(--z-pop);
  width: min(600px, calc(100vw - 32px));
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-l);
  box-shadow: var(--shadow);
}
.pop-h { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); }
.pop-h h2 { font-size: var(--fs-n); font-weight: 650; margin: 0; letter-spacing: -.005em; }
.pop-b { padding: var(--sp-2) var(--sp-4) var(--sp-4); max-height: min(70dvh, 600px); overflow: auto; }
.pop-f { padding: var(--sp-2) var(--sp-4); border-top: 1px solid var(--line); font-size: var(--fs-s); color: var(--fg-2); }
.pop-f:empty { display: none; }
.fsec { padding: var(--sp-2) 0 var(--sp-3); }
.fsec + .fsec { border-top: 1px solid var(--line); }
.fsec h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-xs); font-weight: 650; text-transform: uppercase; letter-spacing: .07em; color: var(--fg-3); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2) var(--sp-3); }
.pop label { display: flex; flex-direction: column; gap: 5px; font-size: var(--fs-s); font-weight: 500; color: var(--fg-2); }
.pop label.solo { margin-top: var(--sp-2); }
.pop input:not([type="checkbox"]), .pop select {
  padding: 7px 10px; border: 1px solid var(--line-2); border-radius: var(--r-s); background: var(--bg); font-weight: 400; color: var(--fg);
}
.pop input:focus, .pop select:focus { border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-soft); outline: none; }
.checks { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-1) var(--sp-3); margin-top: var(--sp-3); }
.pop label.check { flex-direction: row; align-items: center; gap: var(--sp-2); color: var(--fg); font-weight: 450; font-size: var(--fs-b); min-height: 32px; cursor: pointer; }
.pop input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; margin: 0; flex: none; cursor: pointer; border: 1.5px solid var(--line-2); border-radius: 5px; background: var(--panel); display: inline-grid; place-content: center; }
.pop input[type="checkbox"]::before { content: ""; width: 9px; height: 9px; transform: scale(0); background: #fff; clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); }
.pop input[type="checkbox"]:checked { background: var(--acc); border-color: var(--acc); }
.pop input[type="checkbox"]:checked::before { transform: scale(1); }
.pop input[type="checkbox"]:hover { border-color: var(--fg-3); }
.pop input[type="checkbox"]:checked:hover { border-color: var(--acc); }
.pop input[type="checkbox"]:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.fieldset { margin-top: var(--sp-2); }
.fieldset .legend { display: block; font-size: var(--fs-s); font-weight: 500; color: var(--fg-2); margin-bottom: 6px; }
.toggles { display: flex; flex-wrap: wrap; gap: 6px; }
.toggles button {
  padding: 4px 11px; border-radius: var(--r-pill); border: 1px solid var(--line-2);
  background: var(--panel); cursor: pointer; font-size: var(--fs-s); font-weight: 500;
  transition: background-color .15s, border-color .15s, color .15s;
}
.toggles button:hover { border-color: var(--fg-3); }
.toggles button.on { background: var(--acc-soft); border-color: var(--acc); color: var(--acc-ink); }
.toggles button:focus-visible { outline-offset: 0; box-shadow: 0 0 0 3px var(--acc-soft); }
.hint { font-size: var(--fs-s); line-height: 1.55; color: var(--fg-2); margin: var(--sp-3) 0 0; max-width: 62ch; }
.colgroup { padding: var(--sp-3) 0; }
.colgroup + .colgroup { border-top: 1px solid var(--line); }
.colgroup h4 { margin: 0 0 var(--sp-2); font-size: var(--fs-xs); font-weight: 650; text-transform: uppercase; letter-spacing: .07em; color: var(--fg-3); }
.colgroup .opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: var(--sp-1) var(--sp-3); }
.colgroup .opts label { flex-direction: row; align-items: center; gap: var(--sp-2); color: var(--fg); font-size: var(--fs-b); font-weight: 450; min-height: 30px; cursor: pointer; }
.presets { display: flex; gap: 0; font-weight: 400; }

/* ---------- drawer ---------- */
.scrim { position: fixed; inset: 0; background: rgba(10, 13, 20, .32); z-index: var(--z-scrim); opacity: 0; pointer-events: none; transition: opacity .2s; }
.drawer {
  position: fixed; top: 0; right: 0; height: 100dvh; width: min(620px, 100vw);
  background: var(--panel); border-left: 1px solid var(--line); z-index: var(--z-drawer);
  transform: translateX(102%); transition: transform .25s cubic-bezier(.2, .8, .2, 1);
  overflow-y: auto; overscroll-behavior: contain; box-shadow: var(--shadow);
}
body.drawer-open .drawer { transform: none; }
body.drawer-open .scrim { opacity: 1; pointer-events: auto; }
.drawer-inner { padding: var(--sp-5) var(--sp-5) 48px; }
.dh { display: flex; justify-content: space-between; gap: var(--sp-3); align-items: flex-start; }
.dh .kicker { margin: 0 0 var(--sp-1); font-size: var(--fs-xs); font-weight: 650; text-transform: uppercase; letter-spacing: .07em; color: var(--fg-3); }
.dh h2 { margin: 0; font-size: var(--fs-xl); font-weight: 680; letter-spacing: -.02em; line-height: 1.2; }
.dh .sub { color: var(--fg-2); margin: var(--sp-1) 0 0; font-size: var(--fs-b); }
.dh .flagsline { margin: var(--sp-2) 0 0; font-size: var(--fs-s); }
.dh .close {
  border: 1px solid transparent; background: transparent; border-radius: var(--r-s);
  min-width: 34px; min-height: 34px; cursor: pointer; font-size: 1.125rem; line-height: 1; color: var(--fg-2); flex: none;
}
.dh .close:hover { background: var(--hover); color: var(--fg); }
.links { display: flex; gap: var(--sp-3); margin-top: var(--sp-2); font-size: var(--fs-b); font-weight: 500; }
.hero {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  margin: var(--sp-4) 0 0; padding: var(--sp-4) 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.hero > div { display: flex; flex-direction: column; gap: 2px; }
.hero > div + div { border-left: 1px solid var(--line); padding-left: var(--sp-5); }
.hero .k { font-size: var(--fs-xs); font-weight: 650; text-transform: uppercase; letter-spacing: .07em; color: var(--fg-3); }
.hero .v { font-size: var(--fs-2xl); font-weight: 680; letter-spacing: -.025em; line-height: 1.15; }
.hero .d { font-size: var(--fs-s); color: var(--fg-2); }
.statusrow { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-4); }
.statusrow .k { font-size: var(--fs-xs); font-weight: 650; text-transform: uppercase; letter-spacing: .07em; color: var(--fg-3); flex: none; }
.seg { display: flex; flex: 1; border: 1px solid var(--line-2); border-radius: var(--r-m); overflow: hidden; }
.seg button { flex: 1; border: 0; border-right: 1px solid var(--line-2); background: var(--panel); padding: 7px 4px; cursor: pointer; font-size: var(--fs-b); font-weight: 500; color: var(--fg-2); transition: background-color .15s, color .15s; }
.seg button:last-child { border-right: 0; }
.seg button:hover { background: var(--hover); color: var(--fg); }
.seg button.on { background: var(--acc); color: #fff; font-weight: 600; }
:root[data-theme="dark"] .seg button.on { color: #0d1526; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .seg button.on { color: #0d1526; } }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3) var(--sp-4); margin: var(--sp-4) 0 0; }
.facts .k { font-size: var(--fs-xs); font-weight: 600; color: var(--fg-3); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 2px; }
.facts .fv { font-size: var(--fs-b); }
.facts .wide { grid-column: 1 / -1; }
h3.sec { font-size: var(--fs-xs); font-weight: 650; text-transform: uppercase; letter-spacing: .07em; color: var(--fg-3); margin: var(--sp-6) 0 var(--sp-2); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
table.mini { width: 100%; font-size: var(--fs-b); border-collapse: collapse; min-width: 0; }
table.mini td { padding: 6px 10px 6px 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.mini tr:last-child td { border-bottom: 0; }
table.mini td:last-child { white-space: normal; width: 99%; }
table.mini tr.hi td { color: var(--acc-ink); font-weight: 650; }
table.mini td.num { font-variant-numeric: tabular-nums; }
.notes-meta { display: flex; justify-content: space-between; align-items: baseline; }
.notes-state { font-size: var(--fs-s); color: var(--fg-3); }
textarea.notes {
  width: 100%; min-height: 96px; padding: var(--sp-3); margin-top: var(--sp-2);
  border: 1px solid var(--line-2); border-radius: var(--r-m); background: var(--bg);
  resize: vertical; line-height: 1.55;
}
textarea.notes:focus { border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-soft); outline: none; }
.pin { margin: var(--sp-4) 0 0; }

/* ---------- footer ---------- */
.foot { padding: var(--sp-1) var(--sp-5) var(--sp-5); font-size: var(--fs-s); line-height: 1.6; color: var(--fg-3); max-width: 120ch; }
.foot a { color: var(--fg-2); }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .brand .context { display: none; }
}
@media (max-width: 800px) {
  .top { grid-template-columns: 1fr; gap: var(--sp-2); padding: var(--sp-3); }
  .brand { display: none; }
  .actions { justify-content: space-between; gap: 6px; }
  .search { order: 2; }
  .search input { max-width: none; }
  .btn { padding: 7px 10px; }
  #theme { min-width: 58px; }
  .summary { padding: var(--sp-2) var(--sp-3) 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .summary::-webkit-scrollbar { display: none; }
  .stat { padding: 0 var(--sp-3); flex: none; }
  .stat:first-child { padding-left: 0; }
  .stat .v { font-size: var(--fs-n); }
  .stat .d { display: none; }
  .chips { padding: var(--sp-2) var(--sp-3) 0; }
  .tablewrap { margin: var(--sp-2) var(--sp-3) var(--sp-3); max-height: calc(100dvh - 236px); min-height: 280px; }
  th, td { padding: 8px 10px; }
  td.addr { max-width: 148px; }
  td.addr .street, td.addr .city { overflow: hidden; text-overflow: ellipsis; }
  .pop { top: auto !important; bottom: 0; right: 0 !important; left: 0 !important; width: 100%; max-height: 86dvh; border-radius: 16px 16px 0 0; }
  .pop-b { max-height: calc(86dvh - 120px); }
  .facts { grid-template-columns: 1fr 1fr; }
  .hero { grid-template-columns: 1fr; gap: var(--sp-3); }
  .hero > div + div { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: var(--sp-3); }
  .drawer-inner { padding: var(--sp-4) var(--sp-4) 40px; }
  .statusrow { flex-direction: column; align-items: stretch; gap: var(--sp-2); }
  .foot { padding: 0 var(--sp-3) var(--sp-4); }
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .drawer { transform: none; }
  .drawer[aria-hidden="true"] { display: none; }
  body:not(.drawer-open) .drawer { display: none; }
}