/* GENERATED by scripts/10_generate_site.py -- do not edit by hand. */

/* Wide tables scroll inside their own box rather than pushing the page. */
.table-responsive, .cell-output-display > table, div.quarto-figure {
  overflow-x: auto;
  max-width: 100%;
}

/* Tier badges: the two-tier design is the site's central claim, so the tier a
   figure belongs to should be visible without reading the caption. */
.tier {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  vertical-align: middle;
}
.tier-a { background: #7c3aed22; color: #6d28d9; border: 1px solid #7c3aed55; }
.tier-b { background: #0d948822; color: #0f766e; border: 1px solid #0d948855; }

/* A standing caveat block. Used wherever imputed rent or zone-vs-region
   aggregation is in play -- these are not footnotes, they are load-bearing. */
.caveat {
  border-left: 3px solid #d97706;
  background: #d9770611;
  padding: 0.75rem 1rem;
  margin: 1.25rem 0;
  border-radius: 0 4px 4px 0;
}
.caveat strong { color: #b45309; }

/* ---- Explorer controls -------------------------------------------------
   The explorer runs on vendored Observable Plot plus plain JS rather than
   Quarto's OJS, so its controls are ordinary form elements and need styling
   that the Quarto theme does not provide. */
.explorer {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 1.5rem 0;
  padding: 1rem 1.15rem;
  border: 1px solid rgba(128, 128, 128, 0.28);
  border-radius: 4px;
}
.ctl { display: flex; flex-direction: column; gap: 0.45rem; }
.ctl-label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.65;
}
.ctl-group { display: flex; flex-wrap: wrap; gap: 0.3rem 1.1rem; }
.ctl-group label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.9rem;
  cursor: pointer;
  margin: 0;
}
.ctl-regions label { min-width: 12.5rem; }
.ctl-actions { display: flex; gap: 0.5rem; margin-top: 0.15rem; }
.ctl-actions button {
  font: inherit;
  font-size: 0.8rem;
  padding: 0.2rem 0.7rem;
  border: 1px solid rgba(128, 128, 128, 0.45);
  border-radius: 3px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.ctl-actions button:hover { border-color: currentColor; }
.ctl-actions button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Charts scroll inside their own box; the page never scrolls sideways. */
.plotbox { overflow-x: auto; margin: 1rem 0 0.4rem; }
.plotbox svg { max-width: 100%; height: auto; }
.plotnote { font-size: 0.85rem; opacity: 0.7; margin: 0 0 1.5rem; }
.ploterr {
  font-size: 0.9rem;
  padding: 0.8rem 1rem;
  border-left: 3px solid #d97706;
  background: rgba(217, 119, 6, 0.08);
}