/* Rehabitaya product UI: the pieces the landing page shows inside its frames and the app pages use
   for real (town rows, score bars, listing cards, chips, the time map). Sized like product UI (13px). */
.rh { font-family: var(--font-text); color: var(--u-ink, var(--ink)); font-size: 13px; line-height: 1.45; }
.rh * { box-sizing: border-box; }
.rh img { display: block; max-width: none; }

/* chips */
.rh-chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 500;
  background: var(--u-fill-2, #eee); color: var(--u-text-2, inherit); white-space: nowrap; }
.rh-chip--ok { background: color-mix(in oklab, #1f8a4c 14%, var(--u-bg, #fff)); color: color-mix(in oklab, #1f8a4c 80%, #000); }
.rh-chip--warn { background: color-mix(in oklab, #c27a12 16%, var(--u-bg, #fff)); color: color-mix(in oklab, #a05f00 85%, #000); }
.rh-chip--blue { background: color-mix(in oklab, #0284c7 14%, var(--u-bg, #fff)); color: #035e8e; }
.rh-chip svg { width: 12px; height: 12px; }

/* window chrome */
.rh-win { background: var(--u-bg, #fff); border: 1px solid var(--u-border, rgba(0,0,0,.12)); border-radius: var(--u-r, 12px);
  box-shadow: 0 1px 2px rgba(20,24,28,.06), 0 12px 32px -12px rgba(20,24,28,.22); overflow: hidden; }
.rh-win__bar { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 16px; border-bottom: 1px solid var(--u-line, rgba(0,0,0,.08)); }
.rh-dots { display: inline-flex; gap: 6px; } .rh-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--u-fill-3, #ddd); }
.rh-crumb { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.rh-crumb img { width: 18px; height: 18px; border-radius: 5px; }
.rh-crumb i { font-style: normal; color: var(--u-muted, #777); }
.rh-search { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; border-radius: 8px;
  background: var(--u-fill, #f5f5f5); color: var(--u-muted, #777); min-width: 180px; }
.rh-search svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.rh-filters { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--u-line, rgba(0,0,0,.08)); }
.rh-filters .rh-chip.is-on { background: var(--u-ink, #1b1d1f); color: var(--u-bg, #fff); }

/* town rows */
.rh-towns { list-style: none; margin: 0; padding: 0; }
.rh-town { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--u-line, rgba(0,0,0,.08)); }
.rh-town.is-on { background: var(--u-tint, #e6f3fa); }
.rh-town img { width: 56px; height: 42px; border-radius: 6px; object-fit: cover; }
.rh-town b { display: block; font-weight: 500; font-size: 13px; }
.rh-town small { display: block; color: var(--u-muted, #777); font-size: 12px; }
.rh-town .rh-min { font-variant-numeric: tabular-nums; color: var(--u-text-2, inherit); font-size: 12px; white-space: nowrap; }
.rh-score { display: inline-grid; place-items: center; min-width: 34px; height: 24px; padding: 0 6px; border-radius: 6px; font-weight: 500; font-size: 12px; font-variant-numeric: tabular-nums;
  background: #15803d; color: #fff; }
.rh-score--mid { background: #b45309; } .rh-score--low { background: #b42318; }

/* score bars (the nomad-style rating rows) */
.rh-bars { display: grid; gap: 8px; }
.rh-bar { display: grid; grid-template-columns: 96px minmax(0, 1fr) 28px; align-items: center; gap: 10px; font-size: 12px; }
.rh-bar__track { height: 8px; border-radius: 999px; background: var(--u-fill-2, #eee); overflow: hidden; }
.rh-bar__fill { display: block; height: 100%; width: calc(var(--v) * 20%); border-radius: inherit; background: #16a34a; }
.rh-bar__fill[data-tone="mid"] { background: #e5a50a; } .rh-bar__fill[data-tone="low"] { background: #dc4a3d; }
.rh-bar span:last-child { text-align: right; color: var(--u-muted, #777); font-variant-numeric: tabular-nums; }

/* fact rows */
.rh-facts { display: grid; margin: 0; }
.rh-facts > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--u-line, rgba(0,0,0,.08)); }
.rh-facts dt { color: var(--u-muted, #777); } .rh-facts dd { margin: 0; font-weight: 500; text-align: right; }

/* a listing card (idealista-like) */
.rh-listing { display: grid; grid-template-columns: 200px minmax(0, 1fr); background: var(--u-bg, #fff); border: 1px solid var(--u-border, rgba(0,0,0,.12)); border-radius: var(--u-r2, 8px); overflow: hidden; }
.rh-listing > img { width: 100%; height: 100%; object-fit: cover; min-height: 150px; }
.rh-listing__body { padding: 14px 16px; display: grid; gap: 6px; align-content: start; }
.rh-price { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.rh-price small { font-size: 13px; font-weight: 400; color: var(--u-muted, #777); }
.rh-listing__title { font-weight: 500; }
.rh-listing__specs { color: var(--u-text-2, inherit); display: flex; gap: 10px; flex-wrap: wrap; }
.rh-listing__chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }

/* toggles list */
.rh-toggles { display: grid; }
.rh-toggle { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--u-line, rgba(0,0,0,.08)); }
.rh-toggle b { font-weight: 500; display: block; } .rh-toggle small { color: var(--u-muted, #777); font-size: 12px; }
.rh-switch { width: 34px; height: 20px; border-radius: 999px; background: var(--u-fill-3, #ccc); position: relative; flex: none; }
.rh-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.rh-switch.is-on { background: #0284c7; } .rh-switch.is-on::after { left: 16px; }

/* messages */
.rh-msgs { display: grid; gap: 10px; padding: 16px; }
.rh-msg { max-width: 88%; justify-self: start; padding: 10px 12px; border-radius: 12px; background: var(--u-fill-2, #eee); }
.rh-msg--me { background: #0369a1; color: #fff; }
.rh-msg small { display: block; font-size: 11.5px; opacity: .75; margin-top: 4px; }
.rh-who { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--u-line, rgba(0,0,0,.08)); }
.rh-who img { width: 32px; height: 32px; border-radius: 8px; object-fit: cover; }
.rh-who b { font-weight: 500; display: block; } .rh-who small { color: var(--u-muted, #777); font-size: 12px; }

/* the time map: Madrid in the middle, rings at 60, 90 and 120 minutes door to door */
.rh-map { position: relative; width: 100%; height: 100%; background: color-mix(in oklab, #cdd6c6 55%, var(--u-bg, #fff)); overflow: hidden; }
.rh-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.rh-map .ring { fill: none; stroke: color-mix(in oklab, #0284c7 45%, transparent); stroke-dasharray: 3 5; }
.rh-map .ring-label { font: 600 13px var(--font-text); fill: #035e8e; }
.rh-map .road { stroke: color-mix(in oklab, #1b1d1f 22%, transparent); stroke-width: 1.4; fill: none; }
.rh-map .hub { fill: #1b1d1f; }
.rh-map .hub-label { font: 600 12px var(--font-text); fill: #1b1d1f; }
.rh-pin { position: absolute; transform: translate(-50%, -100%); display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px;
  border-radius: 999px; background: #fff; color: #1b1d1f; font: 500 12px var(--font-text); white-space: nowrap; box-shadow: 0 1px 2px rgba(0,0,0,.18), 0 4px 10px -4px rgba(0,0,0,.25); }
.rh-pin::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 8px; height: 8px; background: inherit; transform: translateX(-50%) rotate(45deg); z-index: -1; }
.rh-pin.is-on { background: #0369a1; color: #fff; }

.rh-score--na { background: #8a8c8e; }
.rh-bar__fill[data-tone="low"] { background: #b42318; }