/* Self-hosted variable fonts (SIL OFL, see fonts/LICENSE.txt); no third-party font requests. */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 100 1000;
  src: url("fonts/dm-sans-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 100 1000;
  src: url("fonts/dm-sans-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("fonts/manrope-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("fonts/manrope-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root {
  /* Palette after ljubljana.si: city green, warm neutrals, near-black text. */
  --bg: #f5f5f5;
  --paper: #fff;
  --text: #1a1a1a;
  --muted: #5c5c5c;
  --border: #e5e5e5;
  --green: #2d853c;
  --green-dark: #016241;
  --green-deep: #1f3832;
  --green-light: #d0e0ba;
  --green-tint: #edf5df;
  --beige-tint: #f5ede7;
  --orange: #d46000;
  --teal: var(--green);
  --teal-dark: var(--green-deep);
  --lime: var(--green-light);
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font:
    14px "DM Sans",
    sans-serif;
}
button,
input,
select {
  font: inherit;
}
button,
a,
input,
select {
  outline-offset: 4px;
}
button,
a,
summary {
  touch-action: manipulation;
}
button {
  cursor: pointer;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  color: inherit;
}
input,
select {
  min-width: 0;
}
h1,
h2,
.brand,
.metric-value {
  font-family: Manrope, sans-serif;
}
h1 {
  font-size: clamp(30px, 3vw, 43px);
  font-weight: 750;
  letter-spacing: -1.8px;
  line-height: 1.2;
  margin: 10px 0 12px;
}
h2 {
  font-size: 17px;
  letter-spacing: -0.5px;
  margin: 0;
  font-weight: 750;
}
p {
  line-height: 1.6;
}
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: 216px;
  background: #fff;
  border-right: 1px solid var(--border);
  padding: 35px 24px;
  display: flex;
  flex-direction: column;
  z-index: 10;
}
.brand {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -1.3px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.brand-icon {
  display: grid;
  place-items: center;
  background: var(--teal);
  color: #fff;
  font-size: 23px;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  line-height: 1;
}
.brand-dot {
  color: var(--teal);
}
.sidebar-label {
  font-size: 12px;
  letter-spacing: 1.6px;
  font-weight: 700;
  color: #6c6c6c;
  margin: 54px 10px 18px;
}
nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
nav a {
  padding: 13px 10px;
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 12px;
  font-weight: 550;
  color: #6b6b6b;
  border-radius: 7px;
}
nav a svg,
.info-button svg {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.outlier-control {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.info-button {
  display: inline-grid;
  place-items: center;
  padding: 2px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: #6b6b6b;
  cursor: pointer;
}
.info-button svg {
  width: 15px;
  height: 15px;
}
.info-button:hover,
.info-button[aria-expanded="true"] {
  color: var(--teal);
  background: #eef6f0;
}
.outlier-help {
  flex-basis: 100%;
  margin: 4px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: #f4f8f5;
  color: #5e5e5e;
  font-size: 13px;
  line-height: 1.55;
}
nav a:hover,
nav a.active {
  background: #eef6f0;
  color: #21712e;
}
.sidebar-bottom {
  margin-top: auto;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}
.sidebar-bottom p {
  font-weight: 400;
  color: var(--muted);
  font-size: 13px;
}
.sidebar-bottom a {
  font-size: 12px;
  color: #6b6b6b;
}
.location-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.location-pin {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: var(--green);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
main {
  margin-left: 216px;
  padding: 0 38px;
  max-width: 1800px;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: #fff;
  border: 1px solid #e2e2e2;
  padding: 11px 16px;
  border-radius: 7px;
  font-weight: 550;
  font-size: 12px;
}
.button:hover {
  border-color: #b0b0b0;
  background: #f4f9f5;
}
.button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.button-small {
  font-size: 13px;
  padding: 9px 12px;
}
.intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 38px 0 20px;
  gap: 20px;
}
.eyebrow {
  font-size: 12px;
  color: var(--teal);
  font-weight: 750;
  letter-spacing: 1.6px;
}
.intro p {
  margin: 0;
  color: #6c6c6c;
  font-size: 13px;
}
.data-banner {
  color: #6b6b6b;
  font-size: 13px;
  margin-bottom: 24px;
  line-height: 1.6;
}
.data-banner a {
  text-decoration: underline;
}
.filter-card {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 10px;
  padding: 18px 21px 12px;
  margin-bottom: 24px;
}
.filter-top {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}
.segmented {
  background: #f3f3f3;
  display: flex;
  padding: 4px;
  border-radius: 7px;
  gap: 3px;
}
.segmented button {
  border: 0;
  background: transparent;
  border-radius: 5px;
  color: #6b6b6b;
  padding: 8px 17px;
  font-size: 13px;
  font-weight: 600;
}
.segmented .selected {
  background: var(--text);
  color: #fff;
  box-shadow: 0 1px 2px #0001;
}
.text-button {
  border: 0;
  background: none;
  font-size: 12px;
  color: #6c6c6c;
  margin-left: auto;
}
.muted {
  color: var(--muted);
  font-size: 12px;
}
.filter-grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr 1fr 1fr;
  gap: 16px;
}
.filter-grid > label {
  font-size: 11px;
  letter-spacing: 1px;
  font-weight: 750;
  color: #6b6b6b;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
select,
input[type="search"],
.input-unit,
.area-inputs {
  height: 39px;
  border: 1px solid #e6e6e6;
  border-radius: 5px;
  background: #fff;
  padding: 0 11px;
  font-size: 13px;
  color: #535353;
}
.filter-grid select {
  width: 100%;
}
input::placeholder {
  color: #6b6b6b;
}
input[type="number"] {
  border: 0;
  background: transparent;
  width: 100%;
  outline-offset: 0;
  color: inherit;
}
.input-unit,
.area-inputs {
  display: flex;
  align-items: center;
  gap: 8px;
}
.input-unit input {
  width: 100%;
  height: 100%;
}
.input-unit span,
.area-inputs span {
  color: #6b6b6b;
  font-size: 12px;
}
.area-inputs input {
  width: 40%;
  height: 100%;
}
.filter-bottom {
  margin-top: 14px;
  padding-top: 11px;
  border-top: 1px solid #efefef;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.checkbox {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #6b6b6b;
}
.checkbox input {
  accent-color: var(--teal);
  width: 12px;
  height: 12px;
}
.warning {
  color: #995c2e;
  font-size: 12px;
}
.metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.metric {
  background: #fff;
  border: 1px solid var(--border);
  padding: 23px 21px 21px;
  border-radius: 9px;
}
.metric.featured {
  background: var(--teal-dark);
  color: #fff;
  border-color: var(--teal-dark);
}
.metric-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.2px;
  color: #6b6b6b;
  display: flex;
  justify-content: space-between;
  gap: 3px;
  align-items: center;
}
.featured .metric-label {
  color: #b8d9be;
}
.metric-value {
  font-size: clamp(23px, 2.5vw, 35px);
  font-weight: 700;
  letter-spacing: -1.2px;
  margin: 16px 0 12px;
  white-space: nowrap;
}
.metric-value small {
  font-size: 12px;
  letter-spacing: 0;
  font-weight: 400;
  color: #6a6a6a;
  margin-left: 5px;
}
.featured .metric-value small {
  color: #add1b3;
}
.metric-note {
  font-size: 12px;
  color: #6b6b6b;
  line-height: 1.5;
}
.featured .metric-note {
  color: #a8ccae;
}
.chart-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 21px;
  margin-bottom: 21px;
}
.panel {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 9px;
  overflow: hidden;
}
.panel-heading {
  padding: 23px 23px 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.panel-heading p {
  font-size: 12px;
  color: #6b6b6b;
  margin: 7px 0 0;
}
.panel-heading select {
  font-size: 12px;
  height: 29px;
  min-width: 94px;
}
.pill {
  border: 1px solid #e8e8e8;
  color: #6a6a6a;
  border-radius: 5px;
  padding: 6px 8px;
  font-size: 12px;
  white-space: nowrap;
}
.chart {
  padding: 12px 18px 0;
  min-height: 250px;
}
.chart svg {
  width: 100%;
  height: 260px;
  overflow: visible;
}
.chart text {
  font-family: "DM Sans", sans-serif;
  font-size: 12px;
  fill: #6b6b6b;
}
.chart .grid {
  stroke: #eeeeee;
  stroke-dasharray: 3 4;
}
.chart .axis-label {
  font-size: 12px;
  fill: #6c6c6c;
}
.chart-footer {
  border-top: 1px solid #f2f2f2;
  margin: 0 22px;
  padding: 13px 0 15px;
  font-size: 12px;
  color: #6b6b6b;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
}
.legend-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin: 0 5px 0 8px;
}
.legend-dot:first-child {
  margin-left: 0;
}
.teal {
  background: var(--teal);
}
.orange {
  background: var(--orange);
}
.bars-chart {
  padding: 22px 23px 16px;
  min-height: 277px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 13px;
}
.bar-row {
  display: grid;
  grid-template-columns: 100px 1fr 67px;
  gap: 11px;
  align-items: center;
  font-size: 12px;
}
.bar-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #6b6b6b;
}
.bar-value {
  font-weight: 650;
  color: #335839;
  text-align: right;
  white-space: nowrap;
}
.bar-value small {
  color: #6a6a6a;
  display: block;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.2;
}
.bar-track {
  height: 16px;
  border-radius: 3px;
  background: #f8f8f8;
}
.bar-fill {
  height: 100%;
  background: #c2ddc6;
  border-radius: 3px;
  min-width: 2px;
}
.budget-copy h2 {
  font-size: 24px;
  margin: 10px 0;
}
.listing-panel .panel-heading {
  align-items: center;
  padding-bottom: 22px;
}
.table-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}
.table-controls input {
  font-size: 12px;
  width: 200px;
  height: 33px;
}
.table-wrap {
  overflow-x: auto;
}
table {
  border-collapse: collapse;
  width: 100%;
  font-size: 13px;
  white-space: nowrap;
}
th {
  background: #f8fafb;
  color: #6b6b6b;
  font-weight: 500;
  text-align: left;
  font-size: 12px;
  padding: 12px 14px;
}
th button {
  border: 0;
  background: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
}
td {
  padding: 15px 14px;
  border-bottom: 1px solid #f0f0f0;
  color: #6b6b6b;
}
td:first-child,
th:first-child {
  padding-left: 23px;
}
td:first-child {
  font-weight: 600;
  color: #385c3e;
  max-width: 230px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.numeric {
  text-align: right;
}
td.price {
  font-weight: 700;
  color: #254f2c;
}
td a {
  color: #347940;
  font-size: 12px;
}
td a:hover {
  text-decoration: underline;
}
.type-tag {
  font-size: 12px;
  background: #f4f4f4;
  color: #6b6b6b;
  padding: 4px 7px;
  border-radius: 4px;
}
.table-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 17px 23px;
  color: #6b6b6b;
  font-size: 12px;
}
.pagination {
  display: flex;
  align-items: center;
  gap: 14px;
}
.pagination .button {
  padding: 6px 10px;
}
.methodology {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: 60px;
  padding: 49px 0 44px;
}
.methodology h2 {
  font-size: 29px;
  line-height: 1.3;
  margin: 11px 0 20px;
  font-weight: 650;
}
.text-link {
  font-size: 12px;
  color: #6b6b6b;
}
.method-details details {
  border-bottom: 1px solid #e7e7e7;
  padding: 16px 0;
}
.method-details details:first-child {
  padding-top: 0;
}
.method-details summary {
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.method-details p {
  color: #6b6b6b;
  font-size: 12px;
  line-height: 1.8;
  margin: 12px 0 0;
}
.method-details p a {
  text-decoration: underline;
  color: #6b6b6b;
}
footer {
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0;
  color: #6b6b6b;
  font-size: 12px;
}
footer .brand {
  font-size: 20px;
  color: #676767;
  gap: 0;
}
.empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  text-align: center;
  color: #6b6b6b;
  font-size: 12px;
  line-height: 1.8;
  padding: 20px;
}
.tooltip {
  position: fixed;
  pointer-events: none;
  z-index: 100;
  background: #183d1e;
  color: #fff;
  border-radius: 7px;
  font-size: 13px;
  line-height: 1.7;
  padding: 10px 13px;
  max-width: 260px;
  box-shadow: 0 8px 28px #0002;
}
.tooltip[hidden] {
  display: none;
}
svg [data-tip] {
  cursor: crosshair;
}
svg [data-tip]:hover {
  opacity: 1;
  filter: brightness(0.88);
}
@media (min-width: 1600px) {
  main {
    padding: 0 55px;
  }
  .chart svg {
    height: 290px;
  }
  .bars-chart {
    min-height: 307px;
  }
}
@media (max-width: 1200px) {
  .sidebar {
    width: 180px;
    padding: 30px 17px;
  }
  main {
    margin-left: 180px;
    padding: 0 25px;
  }
  .metric {
    padding: 18px 15px;
  }
  .metric-label {
    font-size: 11px;
    letter-spacing: 0.9px;
  }
  .bar-row {
    grid-template-columns: 85px 1fr 60px;
    gap: 8px;
  }
  .panel-heading {
    padding: 20px 18px 0;
  }
  .panel-heading h2 {
    font-size: 15px;
  }
  .bars-chart {
    padding: 22px 18px 16px;
  }
  .table-controls input {
    width: 170px;
  }
}
@media (max-width: 980px) {
  .sidebar {
    width: 74px;
    padding: 24px 18px;
  }
  .sidebar .brand > span:last-child,
  .sidebar-label,
  .sidebar-bottom {
    display: none;
  }
  nav {
    margin-top: 40px;
  }
  nav a {
    font-size: 0;
    padding: 12px 9px;
  }
  main {
    margin-left: 74px;
    padding: 0 24px;
  }
  .metrics {
    gap: 11px;
  }
  .metric-value {
    font-size: 26px;
  }
  .metric-label {
    font-size: 11px;
  }
  .metric-note {
    font-size: 11px;
  }
  .filter-grid {
    gap: 11px;
  }
  .methodology {
    gap: 30px;
  }
}
@media (max-width: 700px) {
  .sidebar {
    position: relative;
    width: 100%;
    height: 62px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
    padding: 13px 20px;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .sidebar .brand > span:last-child {
    display: block;
    font-size: 23px;
  }
  .brand-icon {
    width: 28px;
    height: 28px;
    font-size: 20px;
  }
  nav {
    flex-direction: row;
    margin: 0;
    gap: 4px;
  }
  nav a {
    padding: 8px;
  }
  nav a[href="#charts"],
  nav a[href="#methodology"] {
    display: none;
  }
  main {
    margin: 0;
    padding: 0 17px;
  }
  .intro {
    padding: 28px 0 16px;
    align-items: flex-start;
  }
  h1 {
    font-size: 29px;
    letter-spacing: -1.3px;
  }
  .intro p {
    font-size: 13px;
    max-width: 280px;
  }
  .eyebrow {
    font-size: 11px;
  }
  .data-banner {
    font-size: 12px;
    margin-bottom: 18px;
  }
  .filter-card {
    padding: 13px 13px 9px;
    margin-bottom: 16px;
  }
  .filter-top {
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 15px;
  }
  .filter-top > .muted {
    display: none;
  }
  .segmented button {
    font-size: 12px;
    padding: 8px 13px;
  }
  .text-button {
    font-size: 11px;
  }
  .filter-grid {
    grid-template-columns: 1fr 1fr;
    gap: 13px;
  }
  .filter-bottom > .muted {
    display: none;
  }
  .metrics {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .metric {
    padding: 17px 15px;
  }
  .metric-value {
    font-size: 28px;
    margin: 12px 0 9px;
  }
  .metric-label {
    font-size: 11px;
  }
  .metric-note {
    font-size: 11px;
  }
  .chart-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 16px;
  }
  .panel-heading {
    padding: 20px 18px 0;
  }
  .panel-heading h2 {
    font-size: 16px;
  }
  .chart {
    padding: 9px 14px 0;
  }
  .chart svg {
    height: 245px;
  }
  .bars-chart {
    min-height: 250px;
  }
  .bar-row {
    grid-template-columns: 98px 1fr 65px;
  }
  .budget-copy h2 {
    font-size: 23px;
  }
  .listing-panel .panel-heading {
    align-items: stretch;
    flex-direction: column;
    gap: 16px;
  }
  .table-controls input {
    width: 100%;
    flex: 1;
  }
  .table-controls {
    width: 100%;
  }
  .listing-panel h2 {
    font-size: 17px;
  }
  .methodology {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 30px 3px;
  }
  .methodology h2 {
    font-size: 24px;
    line-height: 1.3;
  }
  .methodology h2 br {
    display: none;
  }
  .method-details summary {
    font-size: 13px;
  }
  .method-details p {
    font-size: 12px;
  }
  footer {
    gap: 15px;
    flex-wrap: wrap;
    font-size: 11px;
  }
  footer > span:last-child {
    width: 100%;
  }
  .table-bottom {
    padding: 14px 16px;
    font-size: 12px;
  }
  .chart-footer {
    font-size: 11px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    transition: none !important;
  }
}
@media print {
  .sidebar,
  .filter-card,
  .table-controls,
  .pagination {
    display: none;
  }
  main {
    margin: 0;
    padding: 0;
  }
  .panel,
  .metric {
    break-inside: avoid;
  }
  .chart-grid {
    display: block;
  }
  .panel {
    margin-bottom: 12px;
  }
  .method-details details {
    display: block;
  }
  .metric.featured {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}
/* Keep chart labels legible in the narrow Codex panel and on tablets. */
@media (min-width: 701px) and (max-width: 1080px) {
  .chart-grid {
    grid-template-columns: 1fr;
  }
  .chart svg {
    height: 300px;
  }
  .bars-chart {
    gap: 12px;
  }
  .bar-row {
    grid-template-columns: 125px 1fr 80px;
    font-size: 13px;
  }
}

/* Give the full wordmark room; compact tablet navigation keeps its icon. */
.sidebar .brand {
  font-size: 23px;
  white-space: nowrap;
}
.sidebar .brand-icon {
  display: none;
}
@media (min-width: 701px) and (max-width: 980px) {
  .sidebar .brand-icon {
    display: grid;
  }
}

.source-method-row {
  display: block;
  margin-bottom: 10px;
}
.sidebar-bottom [data-source-link="bolha"] {
  display: block;
  margin-top: 5px;
}
.filter-grid {
  grid-template-columns: 1fr 1fr 1.2fr 1fr 1.1fr;
}
@media (min-width: 701px) and (max-width: 1100px) {
  .filter-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .filter-grid > label:last-child {
    grid-column: 1/-1;
  }
}

/* Headline answer: the typical rent is visible right under the question. */
.headline-answer {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 18px 0 10px;
}
.answer {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 18px;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.answer-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--teal);
}
.answer strong {
  font-family: Manrope, sans-serif;
  font-size: clamp(26px, 3vw, 34px);
  letter-spacing: -1px;
  color: var(--text);
  white-space: nowrap;
}
.answer strong small {
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--muted);
}
.answer-note {
  margin: 0;
}
.data-banner {
  margin: 0 0 22px;
}

/* Chart details. */
.legend-dot.light {
  background: #b7d7bc;
}
.bar-row.low-n {
  opacity: 0.5;
}
.bar-row[data-tip] {
  cursor: default;
}
.mobile-unit {
  display: none;
}
.metric-label {
  letter-spacing: 0.6px;
}

/* Table sorting: a visible control and arrows that show the current order. */
#sort-select {
  height: 40px;
  font-size: 13px;
}
.table-controls input {
  height: 40px;
}
.sort-arrow {
  margin-left: 3px;
}
th[aria-sort="ascending"],
th[aria-sort="descending"] {
  color: var(--text);
}

/* Larger hit areas for touch and pointer. */
.segmented button {
  min-height: 38px;
}
.text-button {
  padding: 10px 6px;
}
.checkbox {
  min-height: 36px;
}
.checkbox input {
  width: 18px;
  height: 18px;
}
.info-button {
  padding: 8px;
}
.info-button svg {
  width: 18px;
  height: 18px;
}

/* Navigation keeps short text labels whenever the sidebar shows icons only. */
@media (max-width: 980px) {
  .sidebar {
    width: 92px;
    padding: 24px 8px;
  }
  .sidebar .brand {
    justify-content: center;
  }
  main {
    margin-left: 92px;
  }
  nav a {
    flex-direction: column;
    gap: 4px;
    font-size: 11px;
    padding: 10px 2px;
    text-align: center;
  }
}
@media (max-width: 700px) {
  .sidebar {
    width: 100%;
    height: auto;
    flex-wrap: wrap;
    padding: 12px 12px 6px;
    gap: 6px;
  }
  .sidebar .brand {
    padding-left: 6px;
    justify-content: flex-start;
  }
  nav {
    width: 100%;
    justify-content: space-between;
  }
  nav a,
  nav a[href="#charts"],
  nav a[href="#methodology"] {
    display: flex;
    flex: 1;
    min-height: 52px;
    padding: 6px 2px;
  }
  main {
    margin-left: 0;
  }
  .headline-answer {
    gap: 10px;
  }
  .answer {
    min-width: 0;
    flex: 1 1 140px;
    padding: 12px 14px;
  }
  .segmented button,
  .pagination .button,
  select,
  input[type="search"],
  .input-unit,
  .area-inputs {
    min-height: 44px;
  }
  .text-button {
    min-height: 44px;
  }
  .table-controls {
    flex-wrap: wrap;
  }
  #sort-select {
    width: 100%;
  }
  /* Listings become cards with the price first. */
  .listing-panel .table-wrap {
    overflow: visible;
  }
  .listing-panel table,
  .listing-panel tbody {
    display: block;
    white-space: normal;
  }
  .listing-panel thead {
    display: none;
  }
  .listing-panel tbody tr {
    display: grid;
    grid-template-columns: max-content max-content 1fr max-content;
    grid-template-areas:
      "location location location price"
      "type area ppm ppm"
      "source source source source";
    gap: 6px 10px;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid #f0f0f0;
  }
  .listing-panel tbody td {
    display: block;
    padding: 0;
    border: 0;
  }
  .listing-panel td.cell-location {
    grid-area: location;
    max-width: none;
    white-space: normal;
  }
  .listing-panel td.cell-price {
    grid-area: price;
    font-size: 16px;
    white-space: nowrap;
    align-self: start;
  }
  .listing-panel td.cell-source a {
    display: inline-block;
    padding: 8px 0 2px;
  }
  .answer strong {
    font-size: 24px;
  }
  .listing-panel td.cell-type {
    grid-area: type;
  }
  .listing-panel td.cell-area {
    grid-area: area;
    text-align: left;
  }
  .listing-panel td.cell-ppm {
    grid-area: ppm;
  }
  .listing-panel td.cell-source {
    grid-area: source;
  }
  .listing-panel td:first-child {
    padding-left: 0;
  }
  .mobile-unit {
    display: inline;
  }
  .listing-panel td.empty {
    grid-column: 1/-1;
  }
}
/* Portals write locations in different cases; show them one way. */
td.cell-location {
  text-transform: uppercase;
  letter-spacing: 0.2px;
}

/* ------------------------------------------------------------------
   Visual language after ljubljana.si: serif display headings, flat
   square cards, pill-shaped controls, city green with light-green
   accents. No city crest or name is used.
   ------------------------------------------------------------------ */
@font-face {
  font-family: "DM Serif Display";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("fonts/dm-serif-display-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Serif Display";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("fonts/dm-serif-display-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
body {
  background: var(--bg);
  color: var(--text);
}
h1,
h2,
.brand,
.methodology h2,
.budget-copy h2 {
  font-family: "DM Serif Display", Georgia, serif;
  font-weight: 400;
  letter-spacing: 0;
}
h1 {
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.1;
}
.panel-heading h2,
.listing-panel h2 {
  font-size: 24px;
  line-height: 1.2;
}
.brand {
  font-size: 26px;
  font-weight: 400;
}
/* City green reaches 4.5:1 only on white; on the grey page use the dark green. */
.brand-dot,
.eyebrow {
  color: var(--green-dark);
}
.answer-label {
  color: var(--green);
}
.brand-icon {
  background: var(--green);
  border-radius: 0;
  font-family: "DM Serif Display", Georgia, serif;
}

/* Flat, square cards. */
.panel,
.metric,
.answer,
.filter-card,
.outlier-help {
  border-radius: 0;
  box-shadow: none;
}
.metric.featured {
  background: var(--green-deep);
  border-color: var(--green-deep);
}

/* Short light-green line above section titles, as on the city's cards. */
.panel-heading h2::before,
.budget-copy h2::before,
.methodology h2::before {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  margin-bottom: 14px;
  background: var(--green-light);
}
.budget-copy h2::before {
  background: var(--green);
}

/* Pill-shaped controls with generous letter spacing. */
.segmented {
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--border);
}
.segmented button {
  border-radius: 999px;
  letter-spacing: 0.6px;
  color: var(--text);
}
.segmented .selected {
  background: var(--green);
  color: #fff;
}
select,
input[type="search"],
.input-unit,
.area-inputs {
  border-radius: 999px;
  border-color: #ccc;
  padding: 0 16px;
  color: var(--text);
}
.button {
  border-radius: 999px;
  border: 2px solid var(--green);
  color: var(--green-dark);
  letter-spacing: 1px;
  background: #fff;
}
.button:hover {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}
.text-button {
  color: var(--green-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.type-tag {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 3px;
  color: var(--text);
}

/* Navigation. */
nav a {
  border-radius: 0;
  color: #464646;
}
nav a:hover,
nav a.active {
  background: var(--green-tint);
  color: var(--green-dark);
  box-shadow: inset 3px 0 0 var(--green);
}
@media (max-width: 700px) {
  nav a:hover,
  nav a.active {
    box-shadow: inset 0 -3px 0 var(--green);
  }
}

/* Links and chart accents in city green. */
.data-banner a,
.method-details p a,
.text-link,
td a {
  color: var(--green-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legend-dot.light {
  background: var(--green-light);
}
.bar-fill {
  background: var(--green);
}
.bar-track {
  background: var(--green-tint);
}
.headline-answer .answer {
  border-top: 4px solid var(--green);
}
footer .brand {
  color: var(--green-deep);
}

/* ------------------------------------------------------------------
   Mobile hardening (stress-tested at 320–430px and in landscape).
   ------------------------------------------------------------------ */
.chart svg {
  height: auto;
  display: block;
}
.metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 700px) {
  /* The nav row stays on screen; the brand row scrolls away. */
  .sidebar {
    position: sticky;
    top: -50px;
    z-index: 20;
  }
  /* Anchor jumps land below the sticky nav row. */
  html {
    scroll-padding-top: 72px;
  }
  .metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .metric-value {
    white-space: normal;
    font-size: 26px;
  }
  .metric-value small {
    display: block;
    margin: 2px 0 0;
  }
  /* 16px fields stop iOS Safari from zooming in on focus. */
  select,
  input,
  input[type="search"],
  .input-unit input,
  .area-inputs input {
    font-size: 16px;
  }
  .panel-heading select {
    font-size: 16px;
    height: 44px;
  }
  .checkbox {
    min-height: 44px;
  }
  .info-button {
    padding: 13px;
  }
  td.cell-source a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0;
  }
  #sort-select {
    font-size: 16px;
    height: 44px;
  }
  .text-button {
    font-size: 13px;
  }
  .pagination .button {
    min-width: 44px;
  }
  .text-link {
    display: inline-block;
    padding: 12px 0;
  }
  .method-details summary {
    padding: 12px 0;
  }
  .method-details details {
    padding: 4px 0;
  }
  /* Slightly larger small print on phones. */
  .metric-label,
  .metric-note,
  .eyebrow,
  .filter-grid > label,
  .chart-footer,
  .bar-value small,
  nav a,
  .table-bottom,
  footer {
    font-size: 12px;
  }
}
@media (max-width: 480px) {
  /* Chart headings stack: title first, its switch below at full size. */
  .panel-heading {
    flex-direction: column;
    align-items: stretch;
  }
  .panel-heading select {
    align-self: flex-start;
    min-width: 150px;
  }
  .panel-heading .pill {
    display: none;
  }
  .chart-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .chart-footer > span {
    white-space: nowrap;
  }
  /* Bars use the full card width: label and value above, bar below. */
  .bar-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "label value"
      "track track";
    gap: 4px 10px;
  }
  .bar-label {
    grid-area: label;
  }
  .bar-value {
    grid-area: value;
  }
  .bar-value small {
    display: inline;
    margin-left: 6px;
  }
  .bar-track {
    grid-area: track;
    height: 12px;
  }
  .bars-chart {
    gap: 16px;
  }
}
@media (max-width: 340px) {
  .metrics {
    grid-template-columns: 1fr;
  }
  .headline-answer .answer {
    flex-basis: 100%;
  }
  .segmented button {
    padding: 8px 12px;
  }
}
@media (max-height: 500px) and (orientation: landscape) {
  /* Phones in landscape: keep the header out of the way. */
  .sidebar {
    position: relative;
    top: 0;
  }
}
@media (min-width: 701px) and (max-width: 980px) {
  /* Tablets are touch devices too: same small-print floor as phones. */
  .metric-label,
  .metric-note,
  .eyebrow,
  .filter-grid > label,
  .chart-footer,
  .bar-value small,
  nav a,
  .table-bottom,
  footer,
  .text-button,
  th,
  .type-tag,
  td a {
    font-size: 12px;
  }
}

/* Summary, tables and FAQ: plain HTML content for readers, search and AI engines. */
.seo-summary {
  margin: 24px 0 0;
}
.summary-body {
  padding: 8px 23px 24px;
}
.key-facts {
  margin: 0 0 22px;
  padding-left: 20px;
  display: grid;
  gap: 8px;
  font-size: 15px;
  line-height: 1.6;
}
.key-facts strong {
  color: var(--green-deep);
}
.summary-tables {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.summary-tables table {
  white-space: normal;
  font-size: 14px;
}
.summary-tables caption {
  text-align: left;
  font-weight: 700;
  font-size: 14px;
  padding: 0 0 10px;
  color: var(--text);
}
.summary-tables th,
.summary-tables td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  color: var(--text);
}
.summary-tables thead th {
  background: var(--green-tint);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.4px;
}
.summary-tables tbody th {
  font-weight: 600;
  text-align: left;
}
.cite {
  margin: 18px 0 0;
  font-size: 13px;
  color: var(--muted);
}
.faq {
  padding: 49px 0 0;
}
.faq h2 {
  font-size: 32px;
  margin: 10px 0 18px;
}
.faq-list details {
  border-bottom: 1px solid var(--border);
  padding: 4px 0;
}
.faq-list summary {
  cursor: pointer;
  padding: 12px 0;
  list-style-position: outside;
}
.faq-list summary h3 {
  display: inline;
  font-family: "DM Sans", sans-serif;
  font-size: 17px;
  font-weight: 650;
}
.faq-list details p {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.7;
  max-width: 760px;
}
@media (max-width: 980px) {
  .summary-tables {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 700px) {
  .summary-body {
    padding: 4px 16px 20px;
  }
  .key-facts {
    font-size: 15px;
  }
  .faq h2 {
    font-size: 26px;
  }
  .faq-list summary {
    padding: 14px 0;
  }
}
.summary-tables td {
  white-space: nowrap;
}
@media (max-width: 480px) {
  .summary-tables th,
  .summary-tables td {
    padding: 9px 5px;
    font-size: 13px;
  }
  .summary-tables thead th {
    font-size: 12px;
    letter-spacing: 0;
  }
}
@media (max-width: 360px) {
  .summary-body {
    padding: 4px 10px 18px;
  }
}

/* Dropdowns: own chevron inside the pill instead of the browser's arrow at
   the edge, and a focus ring that follows the rounded shape. */
select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 44px;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231a1a1a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px 16px;
  text-overflow: ellipsis;
  cursor: pointer;
}
select:hover {
  border-color: var(--green);
}
select:focus-visible,
input:focus-visible,
.input-unit:focus-within,
.area-inputs:focus-within {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}
.input-unit input:focus-visible,
.area-inputs input:focus-visible {
  outline: none;
}
.panel-heading select,
#sort-select {
  padding-right: 40px;
  background-position: right 14px center;
}

/* Sticky category switch and reset: joined to the filter card at rest,
   pinned to the top (below the phone nav row) while scrolling. */
.filter-bar {
  position: sticky;
  top: 0;
  z-index: 15;
  background: #fff;
  border: 1px solid var(--border);
  border-bottom: 0;
  padding: 14px 21px 6px;
  transition: box-shadow 0.2s;
}
.filter-bar .filter-top {
  margin-bottom: 0;
}
.filter-bar + .filter-card {
  border-top: 0;
  padding-top: 14px;
}
.filter-bar.is-stuck {
  border-bottom: 1px solid var(--border);
  padding-bottom: 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}
.reset-short {
  display: none;
}
.segmented button:focus-visible,
.text-button:focus-visible,
.button:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}
@media (max-width: 700px) {
  .filter-bar {
    top: 58px;
    padding: 10px 13px 4px;
  }
  .filter-bar .filter-top {
    flex-wrap: nowrap;
    gap: 8px;
  }
  .filter-bar.is-stuck {
    padding-bottom: 10px;
  }
  .filter-bar + .filter-card {
    padding-top: 10px;
  }
  .reset-long {
    display: none;
  }
  .reset-short {
    display: inline;
  }
}
@media (max-width: 360px) {
  .filter-bar .segmented button {
    padding: 8px 10px;
  }
}
/* Section jumps land below the pinned filter bar (and the phone nav row). */
html {
  scroll-padding-top: 92px;
}
@media (max-width: 700px) {
  html {
    scroll-padding-top: 146px;
  }
}
/* Source and capture line sits under the filters, above the key figures. */
.filter-card + .data-banner {
  margin: -8px 0 20px;
}


/* Budget: the question on the left, one white card on the right with the
   amount, the slider (marked at the typical rent) and the answer right
   underneath, so each change shows its effect where the eye already is. */
.budget-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 48px;
  align-items: start;
  background: var(--green-light);
  padding: 36px;
  margin: 27px 0;
}
.budget-copy p {
  font-size: 15px;
  line-height: 1.6;
  color: #2f3a2a;
  margin: 0;
  max-width: 400px;
}
.budget-card {
  background: #fff;
  padding: 26px 28px 24px;
}
.budget-card > label {
  display: block;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #2f3a2a;
}
.budget-input-row {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1.5px solid #9fb88a;
  border-radius: 999px;
  padding: 4px 22px;
  margin: 10px 0 8px;
  cursor: text;
}
.budget-input-row:hover {
  border-color: var(--green);
}
.budget-input-row:focus-within {
  outline: 2px solid var(--green-deep);
  outline-offset: 2px;
  border-color: var(--green);
}
.budget-input-row input[type="number"] {
  flex: 1;
  width: 0;
  min-width: 0;
  border: 0;
  background: transparent;
  font-family: Manrope, sans-serif;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -1px;
  color: var(--text);
  -moz-appearance: textfield;
  appearance: textfield;
}
.budget-input-row input[type="number"]:focus-visible {
  outline: none;
}
.budget-input-row input::-webkit-inner-spin-button,
.budget-input-row input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.budget-input-row span {
  font-size: 15px;
  color: #3d4a37;
  white-space: nowrap;
}
.budget-scale {
  position: relative;
  padding-top: 26px;
}
.budget-marker {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-size: 12px;
  font-weight: 650;
  color: var(--green-dark);
  white-space: nowrap;
  pointer-events: none;
}
.budget-marker::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 18px;
  width: 2px;
  height: 17px;
  margin-left: -1px;
  background: var(--green-dark);
}
#budget-range {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 28px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
#budget-range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--green-deep) var(--fill, 0%), #dfe7d6 var(--fill, 0%));
}
#budget-range::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--green-deep) var(--fill, 0%), #dfe7d6 var(--fill, 0%));
}
#budget-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -8px;
  border-radius: 50%;
  background: var(--green-deep);
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px var(--green-deep);
}
#budget-range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--green-deep);
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px var(--green-deep);
}
#budget-range:focus-visible {
  outline: 2px solid var(--green-deep);
  outline-offset: 4px;
}
.range-labels {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #5b6656;
}
.budget-result {
  background: var(--green-tint);
  padding: 16px 18px;
  margin-top: 18px;
}
.budget-result p {
  margin: 0;
}
.budget-count {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: 10px;
  font-size: 15px;
  color: #2f3a2a;
}
.budget-count strong {
  font-family: Manrope, sans-serif;
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -1.5px;
  line-height: 1.1;
  color: var(--green-deep);
}
.budget-result .budget-share {
  font-size: 14px;
  font-weight: 700;
  color: var(--green-dark);
  margin-top: 4px;
}
.budget-compare {
  font-size: 14px;
  color: #3d4a37;
}
@media (max-width: 980px) {
  .budget-panel {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 28px 24px;
  }
  .budget-copy p {
    max-width: none;
  }
}
@media (max-width: 700px) {
  .budget-panel {
    padding: 24px 16px;
    margin: 20px 0;
  }
  .budget-card {
    padding: 20px 16px;
  }
  .budget-count strong {
    font-size: 34px;
  }
}
@media print {
  .budget-panel {
    break-inside: avoid;
  }
}