/*
 * najemnine.si stylesheet: base and page components with their breakpoints
 * (1600 / 1200 / 980 / 700 / 480 / 360 px), then the multi-city pages (city
 * navigation, overview, comparison) at the end.
 */

/* 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 {
  --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: 92px;
}

body {
  margin: 0;
  font: 14px "DM Sans", sans-serif;
  background: var(--bg);
}

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-weight: 750;
  letter-spacing: -1.8px;
  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 {
  letter-spacing: -1.3px;
  display: flex;
  align-items: center;
  gap: 9px;
}

.brand-icon {
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 23px;
  width: 34px;
  height: 34px;
  line-height: 1;
  background: var(--green);
  border-radius: 0;
  font-family: "DM Serif Display", Georgia, serif;
}

.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;
  border-radius: 0;
}

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;
  border: 0;
  border-radius: 50%;
  background: none;
  color: #6b6b6b;
  cursor: pointer;
}

.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;
}

.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;
  padding: 11px 16px;
  font-weight: 550;
  font-size: 12px;
  border-radius: 999px;
  border: 2px solid var(--green);
  letter-spacing: 1px;
  background: #fff;
}

.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 {
  display: flex;
  padding: 4px;
  gap: 3px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--border);
}

.segmented button {
  border: 0;
  background: transparent;
  padding: 8px 17px;
  font-size: 13px;
  font-weight: 600;
}

.segmented .selected {
  box-shadow: 0 1px 2px #0001;
  background: var(--green);
}

.text-button {
  border: 0;
  background: none;
  font-size: 12px;
  margin-left: auto;
}

.muted {
  color: var(--muted);
  font-size: 12px;
}

.filter-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.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"] {
  height: 39px;
  border: 1px solid #e6e6e6;
  background: #fff;
  font-size: 13px;
  border-radius: 999px;
  border-color: #ccc;
}

.filter-grid select {
  width: 100%;
}

input::placeholder {
  color: #6b6b6b;
}

input[type="number"] {
  border: 0;
  background: transparent;
  width: 100%;
  outline-offset: 0;
  color: inherit;
}

.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: 18px;
  height: 18px;
}

.metrics {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.metric {
  background: #fff;
  border: 1px solid var(--border);
  padding: 23px 21px 21px;
  border-radius: 9px;
}

.metric.featured {
  color: #fff;
  background: var(--green-deep);
  border-color: var(--green-deep);
}

.metric-label {
  font-size: 11px;
  font-weight: 600;
  color: #6b6b6b;
  display: flex;
  justify-content: space-between;
  gap: 3px;
  align-items: center;
  letter-spacing: 0.6px;
}

.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%;
  overflow: visible;
  height: auto;
}

.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: var(--green-tint);
}

.bar-fill {
  height: 100%;
  border-radius: 3px;
  min-width: 2px;
  background: var(--green);
}

.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: 40px;
}

.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;
  padding: 4px 7px;
}

.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;
}

.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 {
  flex-wrap: wrap;
  row-gap: 14px;
}
/* A plain row of links: undo the sidebar's nav styles. */
.footer-links {
  flex-basis: 100%;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 6px 16px;
}
.footer-links a {
  display: inline;
  flex: none;
  min-height: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  color: #6b6b6b;
}
.footer-links a:hover {
  color: var(--green);
}

footer .brand {
  font-size: 20px;
  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;
}

.answer[hidden],
.segmented[hidden],
.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;
  }
  .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;
  }
  .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 .brand > span:last-child,
  .sidebar-label,
  .sidebar-bottom {
    display: none;
  }
  main {
    padding: 0 24px;
  }
  .metrics {
    gap: 11px;
  }
  .metric-value {
    font-size: 26px;
  }
  .metric-label {
    font-size: 11px;
  }
  .metric-note {
    font-size: 11px;
  }
  .methodology {
    gap: 30px;
  }
}

@media (max-width: 700px) {
  .sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--border);
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: auto;
    flex-wrap: wrap;
    gap: 6px;
  }
  .sidebar .brand > span:last-child {
    display: block;
    font-size: 23px;
  }
  .brand-icon {
    width: 28px;
    height: 28px;
    font-size: 20px;
  }
  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 {
    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;
  }
  .segmented button {
    font-size: 12px;
    padding: 8px 13px;
  }
  .metrics {
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .metric {
    padding: 17px 15px;
  }
  .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;
  }
  .bar-row {
    grid-template-columns: 98px 1fr 65px;
  }
  .listing-panel .panel-heading {
    align-items: stretch;
    flex-direction: column;
    gap: 16px;
  }
  .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;
  }
  .method-details summary {
    font-size: 13px;
    padding: 12px 0;
  }
  footer {
    gap: 15px;
    flex-wrap: wrap;
    font-size: 11px;
  }
  .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 {
    margin-bottom: 12px;
  }
  .method-details details {
    display: block;
  }
}

@media (min-width: 701px) and (max-width: 1080px) {
  .chart-grid {
    grid-template-columns: 1fr;
  }
  .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;
}

.source-method-row {
  display: block;
  margin-bottom: 10px;
}

.sidebar-bottom [data-source-link="bolha"] {
  display: block;
  margin-top: 5px;
}

/* 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(--green);
}

.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;
  color: var(--muted);
}

.answer-compare select {
  margin: 6px 0 4px;
  width: 100%;
}

.data-banner {
  margin: 0 0 22px;
}

.bar-row.low-n {
  opacity: 0.5;
}

.bar-row[data-tip] {
  cursor: default;
}

.mobile-unit {
  display: none;
}

/* Table sorting: a visible control and arrows that show the current order. */
#sort-select {
  height: 40px;
  font-size: 13px;
}

.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;
  border-radius: 999px;
  letter-spacing: 0.6px;
  color: var(--text);
}

.text-button {
  padding: 10px 6px;
  color: var(--green-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.checkbox {
  min-height: 36px;
}

.info-button {
  padding: 8px;
}

.info-button svg {
  width: 18px;
  height: 18px;
}

@media (max-width: 980px) {
  .sidebar {
    width: 92px;
    padding: 24px 8px;
  }
  nav a {
    flex-direction: column;
    gap: 4px;
    font-size: 11px;
    padding: 10px 2px;
    text-align: center;
  }
}

@media (max-width: 700px) {
  .sidebar {
    width: 100%;
    padding: 12px 12px 6px;
    position: sticky;
    top: -50px;
    z-index: 20;
  }
  nav a,
  nav a[href="#charts"],
  nav a[href="#methodology"] {
    display: flex;
    flex: 1;
    min-height: 52px;
    padding: 6px 2px;
  }
  .answer {
    min-width: 0;
    flex: 1 1 140px;
    padding: 12px 14px;
  }
  .segmented button,
  .pagination .button,
  select,
  input[type="search"] {
    min-height: 44px;
  }
  .text-button {
    min-height: 44px;
    font-size: 13px;
  }
  .listing-panel table,
  .listing-panel tbody {
    display: block;
    white-space: normal;
  }
  .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;
  }
  .listing-panel td.cell-type {
    grid-area: type;
  }
  .listing-panel td.cell-area {
    grid-area: area;
    text-align: left;
  }
  .listing-panel td:first-child {
    padding-left: 0;
  }
}

/* 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 {
  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);
}

/* Flat, square cards. */
.panel,
.metric,
.answer,
.filter-card,
.outlier-help {
  border-radius: 0;
  box-shadow: none;
}

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

.budget-copy h2::before {
  background: var(--green);
}

.segmented .selected {
  color: #fff;
}

select,
input[type="search"] {
  padding: 0 16px;
  color: var(--text);
}

.button {
  color: var(--green-dark);
}

.button:hover {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}

.type-tag {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 3px;
  color: var(--text);
}

/* Navigation. */
nav a {
  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,
td a {
  color: var(--green-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legend-dot.light {
  background: var(--green-light);
}

.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 {
  display: block;
}

@media (max-width: 700px) {
  select,
  input,
  input[type="search"] {
    font-size: 16px;
  }
  .panel-heading select {
    font-size: 16px;
    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;
    width: 100%;
  }
  .method-details details {
    padding: 4px 0;
  }
  .metric-label,
  .metric-note,
  .eyebrow,
  .filter-grid > label,
  .chart-footer,
  .bar-value small,
  nav a,
  .table-bottom,
  footer {
    font-size: 12px;
  }
}

@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) {
  .sidebar {
    position: relative;
    top: 0;
  }
}

@media (min-width: 701px) and (max-width: 980px) {
  .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;
  }
  .sidebar .brand-icon {
    display: grid;
  }
}

/* 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;
}

.table-note {
  margin: 0;
  padding: 10px 22px 18px;
  font-size: 12px;
  color: var(--muted);
}

.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;
}

/* Our own chevron inside the column: the browser's marker hung over the edge.
   The methodology's questions look the same. */
.faq-list summary,
.method-details summary {
  cursor: pointer;
  padding: 12px 0;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.faq-list summary::-webkit-details-marker,
.method-details summary::-webkit-details-marker {
  display: none;
}
.faq-list summary::before,
.method-details summary::before {
  content: "";
  flex: none;
  position: relative;
  top: -2px;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--green);
  border-bottom: 2px solid var(--green);
  transform: rotate(-45deg);
  transition: transform 0.15s;
}
.faq-list details[open] > summary::before,
.method-details details[open] > summary::before {
  transform: rotate(45deg);
}
.faq-list details p,
.method-details p {
  padding-left: 21px;
}

.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: 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;
  }
  .bars-chart {
    gap: 16px;
  }
  .bar-track {
    grid-area: track;
    height: 12px;
  }
  .bar-value small {
    display: inline;
    margin-left: 6px;
  }
  .bar-value {
    grid-area: value;
  }
  .bar-label {
    grid-area: label;
  }
  .bar-row {
    grid-template-columns: 1fr auto;
    grid-template-areas: "label value" "track track";
    gap: 4px 10px;
  }
  .chart-footer > span {
    white-space: nowrap;
  }
  .chart-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .panel-heading .pill {
    display: none;
  }
  .panel-heading select {
    align-self: flex-start;
    min-width: 150px;
  }
  .panel-heading {
    flex-direction: column;
    align-items: stretch;
  }
}

@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 {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

.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.is-stuck {
    padding-bottom: 10px;
  }
}

@media (max-width: 360px) {
  .filter-bar .segmented button {
    padding: 8px 10px;
  }
}

/* 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;
  }
  .summary-tables {
    grid-template-columns: 1fr;
  }
  main {
    margin-left: 92px;
  }
  .sidebar .brand {
    justify-content: center;
  }
  .filter-grid {
    gap: 11px;
  }
  nav {
    margin-top: 40px;
  }
}

@media (max-width: 700px) {
  .budget-panel {
    padding: 24px 16px;
    margin: 20px 0;
  }
  .budget-card {
    padding: 20px 16px;
  }
  .budget-count strong {
    font-size: 34px;
  }
  html {
    scroll-padding-top: 146px;
  }
  .reset-short {
    display: inline;
  }
  .reset-long {
    display: none;
  }
  .filter-bar + .filter-card {
    padding-top: 10px;
  }
  .filter-bar .filter-top {
    flex-wrap: nowrap;
    gap: 8px;
  }
  .pagination .button {
    min-width: 44px;
  }
  .checkbox {
    min-height: 44px;
  }
  .metric-value small {
    display: block;
    margin: 2px 0 0;
  }
  .listing-panel td.empty {
    grid-column: 1/-1;
  }
  .mobile-unit {
    display: inline;
  }
  .listing-panel td.cell-source {
    grid-area: source;
  }
  .listing-panel td.cell-ppm {
    grid-area: ppm;
  }
  .answer strong {
    font-size: 24px;
  }
  .listing-panel thead {
    display: none;
  }
  .listing-panel .table-wrap {
    overflow: visible;
  }
  .headline-answer {
    gap: 10px;
  }
  main {
    margin-left: 0;
  }
  .sidebar .brand {
    padding-left: 6px;
    justify-content: flex-start;
  }
  footer > span:last-child {
    width: 100%;
  }
  .method-details p {
    font-size: 12px;
  }
  .methodology h2 br {
    display: none;
  }
  .table-controls {
    width: 100%;
    flex-wrap: wrap;
  }
  .table-controls input {
    width: 100%;
    flex: 1;
  }
  .table-controls select {
    flex: 1;
  }
  .budget-copy h2 {
    font-size: 23px;
  }
  .bars-chart {
    min-height: 250px;
  }
  .metric-value {
    margin: 12px 0 9px;
    white-space: normal;
    font-size: 26px;
  }
  .filter-bottom > .muted {
    display: none;
  }
  .filter-grid {
    gap: 13px;
  }
  .filter-top > .muted {
    display: none;
  }
  nav {
    flex-direction: row;
    margin: 0;
    gap: 4px;
    width: 100%;
    justify-content: space-between;
  }
}

@media print {
  .budget-panel {
    break-inside: avoid;
  }
  .metric.featured {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .chart-grid {
    display: block;
  }
  .panel,
  .metric {
    break-inside: avoid;
  }
}

/* "Show all" under the location chart: a text link in the city green. */
.more-button {
  flex: none;
  margin-left: 16px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 650;
  color: var(--green-dark);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

.more-button:hover {
  color: var(--green);
}

/* ---------------------------------------------------------------------------
 * Multi-city pages: city navigation, overview (/) and comparison (/primerjava/).
 * City A is the brand green, city B violet; the pair passes the palette check
 * for colour-vision deficiency, and every bar also carries its value as text.
 * ------------------------------------------------------------------------- */
:root {
  --city-a: var(--green);
  --city-b: #7b5cc4;
}

.sidebar {
  overflow-y: auto;
}
.sidebar .sidebar-label {
  margin: 34px 10px 12px;
}
.sidebar .sidebar-label-page {
  margin-top: 26px;
}
.city-nav,
.section-nav {
  gap: 4px;
}
.city-nav a,
.section-nav a {
  padding: 10px;
}

/* Few listings: the city's figures are a rough estimate. */
.sample-note {
  max-width: 640px;
  margin: 10px 0 6px;
  padding: 10px 14px;
  border-left: 3px solid var(--orange);
  background: var(--beige-tint);
  font-size: 13px;
  color: #5b3a1e;
}
.sample-mark {
  margin-left: 1px;
  color: #8a4a12;
}
.cards-note {
  margin: -12px 0 24px;
  font-size: 12px;
  color: var(--muted);
}
.cards-note:empty {
  display: none;
}
.answers-note {
  margin: -4px 0 6px;
  font-size: 12px;
  color: var(--muted);
}

.license-note {
  font-size: 12px;
  color: var(--muted);
  margin: 12px 0 0;
}
.license-note a {
  color: var(--green-dark);
  text-decoration: underline;
}

.compare-links {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--muted);
}
.compare-links a,
.lead a {
  color: var(--green-dark);
  text-decoration: underline;
}

.lead {
  max-width: 720px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}
.intro .lead {
  margin: 4px 0 0;
  font-size: 15px;
}
/* The answer in words under a city's heading, above the figures. */
.intro .lead-answer {
  margin: 10px 0 18px;
  color: var(--text);
}
/* A chart's reading in one or two sentences, also for crawlers that do not run scripts. */
.chart-summary {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

/* The capture date near the top, so the numbers read as current. */
.updated-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--green-tint);
  color: var(--green-dark);
  font-size: 13px;
  font-weight: 600;
}
.live-dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
}
.live-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--green);
  animation: live-pulse 2s ease-out infinite;
}
@keyframes live-pulse {
  from { transform: scale(1); opacity: .6; }
  to { transform: scale(2.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .live-dot::after { animation: none; }
}

/* Bars drawn as SVG width attributes, so static HTML needs no inline styles. */
.bar-svg {
  display: block;
  width: 100%;
  height: 12px;
  background: var(--green-tint);
  border-radius: 3px;
  overflow: hidden;
}
.bar-svg rect {
  fill: var(--city-a);
}
.bar-svg.city-b rect {
  fill: var(--city-b);
}

/* Overview: one card per city. */
.city-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  margin: 8px 0 24px;
}
.city-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #fff;
  border: 1px solid var(--border);
  border-top: 4px solid var(--green);
  border-radius: 9px;
  padding: 18px 20px 16px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.city-card:hover,
.city-card:focus-visible {
  border-color: var(--green);
  box-shadow: 0 6px 18px #1f383214;
}
.city-card-name {
  font: 26px/1.1 "DM Serif Display", serif;
  margin-bottom: 10px;
}
.city-card-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--green);
}
.city-card strong {
  font-family: Manrope, sans-serif;
  font-size: 32px;
  letter-spacing: -1px;
  white-space: nowrap;
}
.city-card strong small,
.city-bar-value small,
.overview-table td small {
  font-family: "DM Sans", sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--muted);
  margin-left: 4px;
}
.city-card-m2 {
  font-size: 13px;
  color: var(--muted);
}
.city-card dl {
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: space-between;
  gap: 8px;
  margin: 12px 0 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.city-card dt {
  font-size: 11px;
  color: var(--muted);
}
.city-card dd {
  margin: 2px 0 0;
  font-weight: 650;
  white-space: nowrap;
}
.city-card-date {
  font-size: 12px;
  color: var(--muted);
}
.city-card-cta {
  margin-top: auto;
  padding-top: 10px;
  font-size: 13px;
  font-weight: 650;
  color: var(--green-dark);
}

.home-panel,
.compare-panel {
  margin-bottom: 21px;
}
.home-chart {
  padding: 18px 23px 8px;
}
.city-bar {
  display: grid;
  grid-template-columns: 110px 1fr 150px;
  align-items: center;
  gap: 14px;
  padding: 9px 0;
  border-radius: 6px;
}
.city-bar:hover .city-bar-label {
  color: var(--green-dark);
  text-decoration: underline;
}
.city-bar-label {
  font-weight: 650;
}
.city-bar .bar-svg {
  height: 16px;
}
.city-bar-value {
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}
.home-panel .table-wrap,
.compare-panel .table-wrap {
  padding: 14px 23px 22px;
  overflow-x: auto;
}

/* Every pair of cities: the row city against the column city. */
.matrix-table tbody th small {
  display: block;
  font-size: 11px;
  font-weight: 450;
  color: var(--muted);
}
.matrix-table td a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--border);
  text-underline-offset: 3px;
}
.matrix-table td a:hover {
  color: var(--green-dark);
  text-decoration-color: currentColor;
}

.pair-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px 20px;
  margin: 0;
  padding: 4px 22px 20px;
  list-style: none;
  font-size: 14px;
}
.pair-list a {
  color: var(--green-dark);
  text-decoration: underline;
}
#druge-primerjave .compare-links {
  padding: 0 22px 20px;
}

/* Tables on the overview and the comparison. */
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.compare-table th,
.compare-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  white-space: nowrap;
}
.compare-table thead th {
  background: var(--green-tint);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.4px;
}
.compare-table tbody th {
  font-weight: 600;
  background: none;
  color: var(--text);
}
.compare-table .numeric {
  text-align: right;
}
.overview-table td small {
  display: block;
  margin: 0;
  font-size: 11px;
}

/* The comparison shortcut: the last card of the city grid. */
.pair-card {
  gap: 8px;
  background: var(--green-tint);
  border-color: var(--green-light);
}
.pair-card:hover {
  border-color: var(--green-light);
  border-top-color: var(--green);
  box-shadow: none;
}
.pair-card .city-card-name {
  margin: 0 0 2px;
  font-weight: 400;
  letter-spacing: 0;
}
.pair-card .city-card-label {
  margin-bottom: 4px;
}
.pair-card label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #6b6b6b;
}
.pair-card select {
  width: 100%;
  min-width: 0;
}
.city-card-cta.disabled {
  opacity: 0.5;
  pointer-events: none;
}
.compare-controls {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 12px;
}
.compare-controls > label:not(.checkbox) {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 1px;
  color: #6b6b6b;
}
.compare-controls select {
  min-width: 160px;
}
.button-primary {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
  font-size: 14px;
  padding: 11px 20px;
}
.button-primary:hover {
  background: var(--green-dark);
  border-color: var(--green-dark);
}
.button-primary.disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* Comparison. */
.compare-bar {
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 21px;
}
.compare-controls .segmented {
  margin-left: 6px;
}
/* The dropdowns and the swap button are as tall as the Stanovanja/Sobe switch
   beside them: its 38px buttons (44px on phones), 4px padding, 1px border. */
.compare-controls select {
  height: 48px;
}
.compare-controls .swap-button {
  width: 48px;
  height: 48px;
  margin-bottom: 0;
}
.compare-controls .checkbox {
  margin-left: auto;
  align-self: center;
}
.swap-button {
  height: 39px;
  width: 39px;
  border: 1px solid #e6e6e6;
  border-radius: 50%;
  background: #fff;
  font-size: 17px;
  color: var(--green-dark);
}
.swap-button:hover {
  border-color: var(--green);
  background: var(--green-tint);
}
#compare-results[aria-busy="true"] {
  opacity: 0.6;
  transition: opacity 0.2s;
}
.compare-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.compare-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #fff;
  border: 1px solid var(--border);
  border-top: 5px solid var(--city-a);
  border-radius: 9px;
  padding: 18px 21px;
}
.compare-card.city-b {
  border-top-color: var(--city-b);
}
.compare-city {
  font: 24px/1.1 "DM Serif Display", serif;
  margin-bottom: 8px;
}
.compare-card strong {
  font-family: Manrope, sans-serif;
  font-size: 34px;
  letter-spacing: -1.2px;
}
.compare-card strong small {
  font-family: "DM Sans", sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--muted);
}
.compare-card span:not(.compare-city) {
  color: var(--muted);
  font-size: 13px;
}
.compare-card a {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 650;
  color: var(--green-dark);
}
.compare-verdict {
  font-size: 17px;
  line-height: 1.5;
  margin: 18px 0 22px;
}
.pair-wrap {
  padding: 16px 23px 20px;
}
.pair-legend {
  display: flex;
  gap: 18px;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 10px;
}
.swatch {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 2px;
  margin-right: 6px;
  vertical-align: -1px;
  background: var(--city-a);
}
.swatch.city-b {
  background: var(--city-b);
}
.pair-row {
  display: grid;
  grid-template-columns: 100px 1fr;
  align-items: center;
  gap: 14px;
  padding: 7px 0;
  border-bottom: 1px solid #f3f3f3;
}
.pair-row:last-child {
  border-bottom: 0;
}
.pair-label {
  font-weight: 600;
  font-size: 13px;
}
.pair-bars {
  display: grid;
  gap: 3px;
}
.pair-line {
  display: grid;
  grid-template-columns: 1fr 72px;
  align-items: center;
  gap: 10px;
}
.pair-line .bar-svg {
  height: 11px;
}
.pair-value {
  font-size: 12px;
  font-weight: 650;
  text-align: right;
  white-space: nowrap;
}
.pair-line + .pair-line .pair-value {
  color: var(--muted);
  font-weight: 500;
}
.compare-panel .notes {
  margin: 0;
  padding: 0 23px 22px 41px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}
.compare-panel .empty {
  padding: 24px 0;
  color: var(--muted);
}

@media (max-width: 980px) {
  .sidebar {
    overflow-y: auto;
  }
  .section-nav {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
  }
  .city-nav a,
  .section-nav a {
    padding: 9px 2px;
  }
  .compare-controls .checkbox {
    margin-left: 0;
    width: 100%;
  }
}

@media (max-width: 700px) {
  /* The brand and the city row scroll away; the section row stays at the top. */
  .sidebar {
    top: -98px;
    overflow: visible;
  }
  .city-nav {
    order: 1;
    width: 100%;
    flex-direction: row;
    gap: 6px;
    margin: 0;
    padding: 2px 0 4px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .city-nav a {
    flex: none;
    min-height: 34px;
    padding: 6px 13px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 13px;
  }
  .city-nav a svg {
    display: none;
  }
  .city-nav a.active {
    box-shadow: none;
    border-color: var(--green);
  }
  .section-nav {
    order: 2;
    margin-top: 2px;
    padding-top: 2px;
  }
  .city-bar {
    grid-template-columns: 82px 1fr;
    gap: 6px 10px;
  }
  .city-bar-value {
    grid-column: 2;
    text-align: left;
  }
  .home-chart,
  .pair-wrap {
    padding: 14px 16px 6px;
  }
  .home-panel .table-wrap,
  .compare-panel .table-wrap {
    padding: 12px 16px 18px;
  }
  .compare-controls {
    width: 100%;
  }
  .compare-controls > label:not(.checkbox) {
    flex: 1 1 120px;
  }
  .compare-controls select {
    min-width: 0;
    width: 100%;
    padding: 0 30px 0 12px;
    background-position: calc(100% - 10px) 50%;
  }
  .compare-controls {
    gap: 8px;
  }
  .swap-button {
    width: 34px;
    height: 34px;
    margin-bottom: 2px;
  }
  .compare-controls .segmented {
    margin-left: 0;
  }
  .compare-controls select {
    height: 54px;
  }
  .compare-controls .swap-button {
    width: 54px;
    height: 54px;
  }
  /* On a phone the choice is too tall to stay pinned; it scrolls with the page. */
  .compare-bar {
    position: static;
    padding: 12px 13px;
  }
  .compare-table tbody th {
    white-space: normal;
    min-width: 92px;
  }
  .compare-cards {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .compare-card {
    padding: 14px 13px;
  }
  .compare-card strong {
    font-size: 26px;
  }
  .compare-city {
    font-size: 20px;
  }
  .pair-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .compare-table th,
  .compare-table td {
    padding: 8px 5px;
    font-size: 13px;
  }
  .compare-verdict {
    font-size: 15px;
  }
}

/* ------------------------------------------------------------------
   The landlords' calculator (/kalkulator-najemnine/).
   ------------------------------------------------------------------ */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.estimate-panel {
  padding: 20px 23px;
}
.estimate-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
}
.estimate-form label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 1px;
  color: #6b6b6b;
}
.estimate-form select,
.estimate-form input {
  width: 100%;
  height: 39px;
  padding: 0 16px;
  border: 1px solid #ccc;
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  color: var(--text);
}
.estimate-result {
  margin-top: 18px;
}
.estimate-answer {
  padding: 22px 23px 4px;
}
.estimate-answer h2 {
  margin: 0 0 4px;
}
#est-headline {
  display: block;
  font-family: Manrope, sans-serif;
  font-size: clamp(30px, 4vw, 42px);
  letter-spacing: -1px;
  color: var(--text);
}
#est-headline small {
  font-family: "DM Sans", sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--muted);
}
#est-basis {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 14px;
}
#est-listings {
  padding: 18px 23px 22px;
}
/* The listing's place is the link; its type and portal sit under it. */
.estimate-table td:first-child {
  white-space: normal;
}
.estimate-table td a {
  color: var(--green-dark);
  font-weight: 600;
}
.estimate-table td small {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted);
}
.estimate-table caption {
  padding: 0 0 10px;
  text-align: left;
  font-size: 14px;
  font-weight: 700;
}
.factors {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.factors h3 {
  margin: 0 0 10px;
  font-size: 15px;
}
#dejavniki .notes {
  margin: 0;
  padding: 0 23px 22px 41px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}
/* The overview's second call to action, for landlords: quieter than the comparison above it. */
.landlord-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 28px;
  margin: -8px 0 24px;
  padding: 22px 30px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
}
.landlord-cta h2 {
  margin: 0 0 4px;
  font: 22px/1.2 "DM Serif Display", serif;
}
.landlord-cta p {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}
/* The same card under the calculator result, pointing to a related service. */
.partner-cta {
  margin: 24px 0;
  background: var(--green-tint);
  border-color: var(--green-light);
}
/* Picture, text and button side by side; the button drops under the text when the row is narrow. */
.partner-cta {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) auto;
  gap: 18px 28px;
  padding: 18px 30px 18px 18px;
}
.partner-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 8px;
}
/* The opremiga.si wordmark as their site draws it: Arial, "ga" lighter, the green star mark. */
.partner-logo {
  display: inline-flex;
  align-items: center;
  margin-bottom: 8px;
  font: 800 20px/1 Arial, sans-serif;
  letter-spacing: -1.4px;
  color: #1f2a24;
}
.partner-logo span {
  font-weight: 700;
}
.partner-logo svg {
  width: 28px;
  height: 28px;
  margin-left: 5px;
  fill: none;
  stroke: #2f6b55;
  stroke-width: 4;
}
.partner-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.partner-action span {
  font-size: 12px;
  color: var(--muted);
}
@media (max-width: 1100px) {
  .partner-cta {
    grid-template-columns: 200px minmax(0, 1fr);
  }
  .partner-action {
    grid-column: 2;
    align-items: flex-start;
  }
}
.landlord-cta .button {
  flex: none;
  padding: 11px 20px;
  font-size: 14px;
  font-weight: 650;
}
@media (max-width: 700px) {
  .landlord-cta {
    margin-top: -12px;
    padding: 18px;
  }
  .partner-cta {
    margin-top: 18px;
  }
  .partner-cta {
    grid-template-columns: 1fr;
    padding: 14px 14px 18px;
  }
  .partner-action {
    grid-column: auto;
    width: 100%;
    align-items: center;
  }
  .landlord-cta .button {
    width: 100%;
    justify-content: center;
    min-height: 44px;
  }
}
@media (max-width: 700px) {
  .factors {
    grid-template-columns: 1fr;
  }
  .estimate-panel,
  .estimate-answer,
  #est-listings {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ------------------------------------------------------------------
   Phones and tablets: one top bar with the brand and a "Meni" button
   that opens every city and tool; the page's own sections stay as a
   row of tabs. The desktop sidebar list is hidden. Plain <details>,
   so it also works on the English pages, which have no scripts.
   ------------------------------------------------------------------ */
.site-menu {
  display: none;
}
@media (max-width: 980px) {
  .sidebar {
    position: sticky;
    inset: auto;
    top: -58px;
    width: 100%;
    height: auto;
    padding: 12px 16px 6px;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
    overflow: visible;
    z-index: 20;
  }
  main {
    margin-left: 0;
  }
  .sidebar .brand {
    justify-content: flex-start;
    padding-left: 0;
  }
  .sidebar .brand > span:last-child {
    display: block;
    font-size: 23px;
  }
  .sidebar .brand-icon,
  .sidebar .sidebar-label,
  .sidebar .city-nav,
  .sidebar-bottom {
    display: none;
  }
  .site-menu {
    display: block;
  }
  .site-menu summary {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 650;
    list-style: none;
    cursor: pointer;
    user-select: none;
  }
  .site-menu summary::-webkit-details-marker {
    display: none;
  }
  .site-menu[open] summary {
    border-color: var(--green);
    color: var(--green-dark);
  }
  /* Three bars; an X while the menu is open. */
  .menu-icon,
  .menu-icon::before,
  .menu-icon::after {
    display: block;
    width: 16px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform 0.15s;
  }
  .menu-icon {
    position: relative;
  }
  .menu-icon::before,
  .menu-icon::after {
    content: "";
    position: absolute;
    left: 0;
  }
  .menu-icon::before {
    top: -5px;
  }
  .menu-icon::after {
    top: 5px;
  }
  .site-menu[open] .menu-icon {
    background: transparent;
  }
  .site-menu[open] .menu-icon::before {
    transform: translateY(5px) rotate(45deg);
  }
  .site-menu[open] .menu-icon::after {
    transform: translateY(-5px) rotate(-45deg);
  }
  .sidebar .site-menu-panel {
    position: absolute;
    top: 58px;
    left: 12px;
    right: 12px;
    z-index: 30;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    margin: 0;
    padding: 10px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  }
  .sidebar .site-menu-panel a {
    display: flex;
    flex: none;
    flex-direction: row;
    align-items: center;
    min-height: 44px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 550;
    text-align: left;
  }
  .sidebar .site-menu-panel a:hover {
    background: var(--green-tint);
  }
  .sidebar .site-menu-panel a.active {
    background: var(--green-tint);
    color: var(--green-dark);
    box-shadow: none;
  }
  .sidebar .site-menu-panel .site-menu-tool {
    font-weight: 700;
    color: var(--green-dark);
  }
  .site-menu-divider {
    grid-column: 1 / -1;
    height: 1px;
    margin: 4px 0;
    background: var(--border);
  }
  .sidebar .section-nav {
    order: 2;
    width: 100%;
    flex-direction: row;
    margin: 2px 0 0;
    padding: 4px 0 0;
    border-top: 1px solid var(--border);
  }
  .sidebar .section-nav a {
    flex: 1;
    flex-direction: column;
    gap: 4px;
    min-height: 52px;
    padding: 6px 2px;
    font-size: 11px;
    text-align: center;
  }
}
@media (max-width: 560px) {
  .sidebar .site-menu-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-height: 500px) and (orientation: landscape) {
  .sidebar {
    position: relative;
    top: 0;
  }
}

/* ------------------------------------------------------------------
   Phones: readable text, thumb-sized targets, no zoom on focus.
   ------------------------------------------------------------------ */

/* Wide tables (all cities, all pairs): the label column stays put and a
   soft edge shows there is more to scroll. */
.overview-table th:first-child,
.matrix-table th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: #fff;
}
.overview-table thead th:first-child,
.matrix-table thead th:first-child {
  background: var(--green-tint);
}
.home-panel .table-wrap,
.compare-panel .table-wrap {
  background:
    linear-gradient(to left, #fff 30%, #fff0) right / 32px 100% no-repeat local,
    linear-gradient(to left, #1f38321f, #1f383200) right / 14px 100% no-repeat scroll;
}

/* The wrap's left padding moves into the sticky column, so nothing shows beside it. */
.table-wrap:has(> .overview-table, > .matrix-table) {
  padding-left: 0;
}
.overview-table th:first-child,
.matrix-table th:first-child {
  padding-left: 16px;
}

@media (max-width: 980px) {
  /* iOS zooms into fields with text under 16px. */
  select,
  input:not([type="checkbox"]):not([type="range"]),
  .estimate-form select,
  .estimate-form input {
    font-size: 16px;
  }
  .sidebar .section-nav a {
    font-size: 12px;
  }
  .swap-button {
    width: 44px;
    height: 44px;
  }
  label.checkbox {
    min-height: 44px;
    align-items: center;
  }
  .compare-card a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }
  /* City names in the English overview table are the links to each city. */
  #cities .compare-table th a {
    display: flex;
    align-items: center;
    min-height: 40px;
  }
  .estimate-form select,
  .estimate-form input {
    height: 44px;
  }
  .footer-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 16px;
  }
  .footer-links a {
    display: flex;
    align-items: center;
    min-height: 40px;
  }
}

@media (max-width: 700px) {
  .city-card-label,
  .city-card dt,
  .city-bar-value small,
  .overview-table td small,
  .matrix-table tbody th small,
  .pair-card label,
  .compare-controls > label:not(.checkbox),
  .estimate-form label {
    font-size: 12px;
  }
}

/* Two compact city cards per row: eight cities fit on about one screen. */
@media (max-width: 560px) {
  .city-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .city-card {
    padding: 13px 13px 12px;
    gap: 2px;
  }
  .city-card-name {
    font-size: 20px;
    margin-bottom: 6px;
  }
  .city-card strong {
    font-size: 25px;
  }
  .city-card strong small {
    display: block;
    margin: 0;
  }
  .city-card dl {
    margin: 8px 0 4px;
    padding-top: 8px;
  }
  .city-card-cta {
    display: none;
  }
}

/* Phones: the headline answers stay the focus; secondary links and the
   label above the title give way (the menu reaches every page). */
@media (max-width: 700px) {
  .answer-note {
    font-size: 12px;
    color: #767676;
  }
  body[data-page="city"] .compare-links,
  .intro .eyebrow {
    display: none;
  }
}

/* Narrow screens: the comparison picker takes one compact row below the two answers. */
@media (max-width: 700px) {
  .headline-answer .answer-compare {
    flex: 1 1 100%;
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }
  .answer-compare select {
    flex: 1;
    margin: 0;
  }
  .answer-compare .answer-note {
    display: none;
  }
}

/* The methodology reads like the FAQ: its title above, the questions below. */
.methodology {
  grid-template-columns: 1fr;
  gap: 12px;
}
.methodology h2 {
  font-size: 32px;
  margin: 10px 0 8px;
}
.method-details details,
.method-details details:first-child {
  padding: 4px 0;
}
.method-details summary {
  padding: 12px 0;
  font-size: 17px;
  font-weight: 650;
}
.method-details p {
  max-width: 760px;
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.7;
}
@media (max-width: 700px) {
  .methodology h2 {
    font-size: 26px;
  }
  .method-details summary {
    padding: 14px 0;
  }
}

/* Listing marks: new, good price, long on offer, and the price before a reduction. */
.mark {
  display: inline-block;
  margin-left: 4px;
  padding: 3px 7px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  vertical-align: middle;
}

.mark-new {
  background: var(--green);
  color: #fff;
}

.mark-deal {
  background: var(--green-tint);
  color: var(--green-dark);
  box-shadow: inset 0 0 0 1px var(--green-light);
}

.mark-long {
  background: var(--beige-tint);
  color: #7a4a1f;
}

.price-drop {
  display: block;
  margin-top: 2px;
  color: var(--orange);
  font-size: 11px;
  font-weight: 600;
}

@media (max-width: 700px) {
  /* The type column may shrink so its marks wrap instead of pushing the price off the card. */
  .listing-panel tbody tr {
    grid-template-columns: minmax(0, max-content) max-content 1fr max-content;
  }
  .listing-panel td.cell-type {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
  }
  .listing-panel td.cell-type .mark {
    margin-left: 0;
  }
  .price-drop {
    text-align: right;
  }
}

/* The renters' listing check: a link field, the typed values, then the verdict on a cheap-to-dear scale. */
.check-link label,
.check-manual-label {
  display: block;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 1px;
  color: #6b6b6b;
}

.check-manual-label {
  margin: 20px 0 10px;
  letter-spacing: 0;
  font-size: 13px;
  font-weight: 600;
}

.check-link-row {
  display: flex;
  gap: 10px;
  margin-top: 7px;
}

.check-link-row input {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 18px;
  border: 1px solid #ccc;
  border-radius: 999px;
  background: #fff;
  font-size: 14px;
  color: var(--text);
}

.check-link-row input:focus {
  border-color: var(--green);
  outline: 2px solid var(--green-tint);
}

.check-status {
  margin: 12px 0 0;
  padding: 10px 14px;
  border-radius: 6px;
  background: var(--green-tint);
  color: var(--green-deep);
  font-size: 14px;
}

#chk-verdict {
  display: block;
  font-family: Manrope, sans-serif;
  font-size: clamp(26px, 3.6vw, 38px);
  letter-spacing: -0.8px;
  color: var(--text);
}

#chk-verdict.verdict-deal,
#chk-verdict.verdict-low {
  color: var(--green);
}

#chk-verdict.verdict-high,
#chk-verdict.verdict-very-high {
  color: var(--orange);
}

.check-scale {
  max-width: 520px;
  margin: 18px 0 4px;
}

.check-scale-track {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--green) 0%, var(--green-light) 35%, #e8e8e8 50%, #f3d2b5 65%, var(--orange) 100%);
}

.check-scale-marker {
  position: absolute;
  top: 50%;
  width: 18px;
  height: 18px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--text);
  box-shadow: 0 1px 4px rgb(0 0 0 / 30%);
  transform: translate(-50%, -50%);
}

.check-scale-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
}

.check-marks {
  margin: 14px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--green-deep);
}

.check-tips {
  margin: 12px 0 0;
  padding-left: 20px;
  display: grid;
  gap: 6px;
  font-size: 14px;
  line-height: 1.5;
}

@media (max-width: 700px) {
  .check-link-row {
    flex-direction: column;
  }
  .check-link-row .button {
    min-height: 44px;
    justify-content: center;
  }
}

.check-steps {
  margin-bottom: 0;
}

.check-steps .button {
  display: inline-flex;
  margin: 8px 0 0;
  cursor: grab;
}

/* Type, area, report and About pages: static content built by the prerender. */
.summary-body .pair-list {
  padding: 0;
}
.links-title {
  margin: 22px 0 10px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.summary-body > p,
.about-body p {
  margin: 0 0 14px;
  max-width: 78ch;
  font-size: 15px;
  line-height: 1.65;
}
.summary-body > p.cite {
  margin: 18px 0 0;
  font-size: 13px;
}
.summary-body > p.compare-links {
  margin: 18px 0 0;
}
.summary-body p a,
.summary-tables tbody th a,
.compare-table tbody th a,
.compare-table td a,
.key-facts a,
.panel-heading p a {
  color: var(--green-dark);
  text-decoration: underline;
}
.report-list {
  padding-left: 20px;
}
body[data-page="segment"] .headline-answer,
body[data-page="report"] .lead,
body[data-page="about"] .lead {
  max-width: 78ch;
}

/* Code to paste on the media page: wraps, so it never widens the page. */
.embed-code {
  margin: 8px 0 14px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--surface-muted, #f3f5f1);
  font-size: 12.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.cite .text-button {
  margin-left: 6px;
  font-size: 13px;
}