/* OpenVibe.Rent's and OpenVibe.Homes' front pages (server/render/home-blocks.js). The numbers, rails, cards, folds and
   the search pill are the shared kit's (kit.css, room.css); this is only what the homes draw themselves and how the
   kit's pieces sit in the hero. Theme tokens only, so light and dark both read; everything fits a 320px phone. */

/* The hero: a line of what it is, the search, two small doors and the one rule that matters. */
.sc-hero-aside .ovk-find { margin: 0; min-height: 52px; }
.sc-hero-aside .ovk-find input { font-size: 1.02rem; }
.home-doors { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.home-note { margin: 10px 0 0; font-size: .84rem; line-height: 1.45; color: var(--text-muted, #7386a3); }

/* Sections of rails and folds sit at the kit's rail rhythm, closer than the showcase's sections; the rail brings its heading. */
.sc-sec.home-sec { margin-top: clamp(30px, 4vw, 44px); }
.home-sec > .ovk-rail:first-child { margin-top: 0; }
.home-sec .ovk-fold { margin: 10px 0 0; }
.home-sec .ovk-fold + .ovk-fold { margin-top: 8px; }
.home-under { margin: 2px 0 12px; }
/* From 760 px the rails wrap into a grid (kit.rail wrap, openvibe-shared 4.39.0); phones keep the rail they swipe. */

/* The listings' kinds, as quick filters under their rail: one strip that scrolls sideways on a phone. */
.home-kinds { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; }
@media (max-width: 599px) {
  .home-kinds { flex-wrap: nowrap; overflow-x: auto; margin-inline: -16px; padding: 2px 16px; scrollbar-width: none; }
  .home-kinds::-webkit-scrollbar { display: none; }
  .home-kinds > * { flex: none; }
}
/* The narrowest phones give the place's box the room the pill's magnifier took (the go button still says Search). */
@media (max-width: 359px) { .sc-hero-aside .ovk-find > .ovk-i:first-child { display: none; } }

/* Inside the folds: the cheapest and dearest cities side by side, every state as a chip, every site searched. */
.home-ranks { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); margin-top: 10px; }
.home-rank { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border, #1f2d47); background: var(--bg-secondary, #0f1729); }
.home-rank h3 { margin: 0 0 8px; font-size: 1rem; }
.home-rank ol { margin: 0; padding-left: 22px; display: grid; gap: 6px; }
.home-rank li { padding-left: 2px; }
.home-rank li::marker { color: var(--text-muted, #7386a3); font-variant-numeric: tabular-nums; }
.home-rank li > a, .home-rank li > span:first-child { overflow-wrap: anywhere; }
.hr-val { float: right; margin-left: 10px; font-weight: 700; font-variant-numeric: tabular-nums; }

.home-chips { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.home-chips a { display: inline-flex; align-items: baseline; gap: 6px; min-height: 36px; box-sizing: border-box; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border-light, #2c3d5c); background: var(--bg-secondary, #0f1729); color: var(--text-primary, #e6edf7); text-decoration: none; font-size: .92rem; }
.home-chips a:hover, .home-chips a:focus-visible { border-color: var(--accent, #3b82f6); }
.home-chips span { font-size: .78rem; color: var(--text-muted, #7386a3); }

.home-sites { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); }
.home-sites li { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border, #1f2d47); background: var(--bg-secondary, #0f1729); }
.home-sites b { font-size: 1rem; }
.home-sites span { font-size: .8rem; color: var(--text-muted, #7386a3); overflow-wrap: anywhere; }
.home-sites p { margin: 4px 0 0; font-size: .88rem; color: var(--text-secondary, #96a7c2); }

/* The questions: each a fold (kit.fold); the answer reads as prose. */
.sc-sec .ovk-fold-body > p { margin: 0 0 8px; color: var(--text-secondary, #96a7c2); line-height: 1.55; }
.sc-sec .ovk-fold-body > p:last-child { margin-bottom: 0; }

/* The phone home (2026-10-30, the owner's short-pages rule): the questions and the other OpenVibe places are folds,
   closed on a phone and open where there is room. Both stay in the page for the crawlers. */
/* Pick (the owner's short-pages rule, 2026-10-30): on a phone the front page's blocks of the same kind are one at a
   time, picked with a row of chips. Radio inputs and :has(), no script: the chips and the one-pane rule live under
   640 px and only where :has() is understood, so a wider screen, or an older browser, shows every pane and no chips.
   Every pane stays in the page for crawlers. */
.pick-head { display: none; }
.pick-row { display: none; }
@supports selector(:has(*)) { @media (max-width: 640px) {
  .pick-bar { margin-top: 30px; }
  .pick-head { display: block; }
  .pick-head h2 { margin: 0 0 4px; font: 700 clamp(20px, 2.4vw, 28px)/1.2 var(--ov-font, 'Inter', system-ui, sans-serif); letter-spacing: -.02em; }
  .pick-row { display: flex; gap: 8px; overflow-x: auto; margin: 10px -16px 0; padding: 2px 16px 4px; scrollbar-width: none; overscroll-behavior-x: contain; }
  .pick-row::-webkit-scrollbar { display: none; }
  .pick-row input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
  .pick-row label { display: inline-flex; align-items: center; flex: none; min-height: 44px; padding: 0 15px; border-radius: 999px; border: 1px solid var(--border, #1f2d47); color: var(--text-secondary, #96a7c2); font-size: .9rem; font-weight: 650; white-space: nowrap; cursor: pointer; }
  .pick-row input:checked + label { color: var(--text-primary, #e6edf7); border-color: var(--accent, #3b82f6); background: color-mix(in srgb, var(--accent, #3b82f6) 12%, transparent); }
  .pick-row input:focus-visible + label { outline: 2px solid var(--accent, #3b82f6); outline-offset: 2px; }
  .pick .pick-pane { display: none; }
  /* A link that points at a pane opens that pane on a phone too. */
  .pick .pick-pane:target { display: block !important; }
  .pick:has(.pick-pane:target) .pick-pane:not(:target) { display: none !important; }
  /* The chip names the pane, so the pane's own heading gives way to it; the link to more stays. */
  .pick .pick-pane > h2, .pick .pick-pane > h3 { display: none; }
} }

/* The fold (the owner's short-pages rule): closed on a phone, and where there is room it looks like the section it
   replaces: a heading and its content, with no card around it. */
.hm-fold-block { margin-top: 32px; }
.hm-fold-block > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; cursor: pointer; list-style: none; }
.hm-fold-block > summary::-webkit-details-marker { display: none; }
.hm-fold-block > summary h2 { margin: 0; font: 700 clamp(19px, 2.2vw, 26px)/1.2 var(--ov-font, 'Inter', system-ui, sans-serif); }
.hm-fold-block > summary span { color: var(--text-muted, #7386a3); font-weight: 600; font-size: .86rem; white-space: nowrap; }
.hm-fold-block > summary:focus-visible { outline: 2px solid var(--accent, #3b82f6); outline-offset: 2px; }
@media (min-width: 641px) {
  .hm-fold-block { border: 0; background: none; border-radius: 0; margin: 56px auto 0; padding: 0; }
  .hm-fold-block > summary { display: block; min-height: 0; }
  .hm-fold-block > summary h2 { margin: 0 0 6px; font: 700 clamp(22px, 2.6vw, 30px)/1.2 var(--ov-font, 'Inter', system-ui, sans-serif); }
  .hm-fold-block > summary span { display: none; }
  .hm-fold-block .hm-sec, .hm-fold-block .sc-sec { margin: 0; max-width: none; padding: 0; }
}
@media (max-width: 640px) { .hm-fold-block { margin-top: 24px; } .hm-fold-block > summary h2 { font-size: 1.05rem; } }
/* A fold that sits inside the section it replaces adds no space of its own. */
:where(.sc-sec, .cm-sec, .hm-sec, .section) > .hm-fold-block { margin: 0; }
/* The folds hold the kit's own folds, so they get the room the section gave them. */
.hm-fold-block .kit-fold, .hm-fold-block .home-site-list { margin: 0; }

/* The largest cities as bars, the dearest first (2026-11-01): the name and state, a bar, the figure. Each row is a link;
   the bar is the accent at full strength against a quiet track. */
.home-bars-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 10px; }
.home-bars-head h2 { margin: 0; }
.home-more { position: relative; flex: none; font-size: .9rem; font-weight: 600; }
/* "All 885 cities" measured 24px to a finger (the 11-03 tap re-audit): its hit area grows into the head's own room,
   up and to the sides, and down only into the 10px before the bars, so the first city keeps its taps. 44px. */
.home-more::after { content: ''; position: absolute; inset: -13px -6px -8px; }
.home-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.home-bars a { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 44px; padding: 6px 10px; border-radius: 10px; color: inherit; text-decoration: none; }
.home-bars a:hover, .home-bars a:focus-visible { background: color-mix(in srgb, var(--text-primary, #fff) 5%, transparent); }
.hb-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.hb-name small { margin-left: 6px; font-size: .78rem; font-weight: 600; color: var(--text-muted, #7386a3); }
.hb-bar { height: 10px; border-radius: 999px; background: color-mix(in srgb, var(--text-primary, #fff) 7%, transparent); overflow: hidden; }
.hb-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent-dark, #1d4ed8), var(--accent, #3b82f6)); }
.hb-n { font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 520px) {
    .home-bars a { grid-template-columns: minmax(0, 8.5em) minmax(0, 1fr) auto; gap: 8px; padding: 6px 4px; }
}
@media (min-width: 900px) {
    .home-bars { display: block; columns: 2; column-gap: 32px; }
    .home-bars li { break-inside: avoid; }
}

/* Touch pointers: a state chip answers a finger at 44 px (fleet phone sweep, 2026-11-05); a mouse keeps the 36 px pill. */
@media (pointer: coarse) {
    .home-chips a { min-height: 44px; }
}