/* Демо 3: FlipRadar. Каркас: шаги сверху, панель «запрос / поиск», ниже карта и список.
   Базовые токены, плашка, кнопки и подвал из ../shared.css. */

.num{font-variant-numeric:tabular-nums}
.fr-main{padding-top:var(--sp-4)}

/* Шаги */
.fr-steps{list-style:none;margin:0 0 var(--sp-3);padding:0;display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-3)}
.fr-step{display:flex;align-items:center;gap:8px;font-size:var(--fs-small);color:var(--c-muted)}
.fr-step-no{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--c-border-strong);font-weight:600;font-size:var(--fs-small)}
.fr-step.is-current{color:var(--c-heading);font-weight:600}
.fr-step.is-current .fr-step-no{background:var(--c-accent);border-color:var(--c-accent);color:var(--c-on-accent)}
.fr-step.is-done .fr-step-no{border-color:var(--c-gain);color:var(--c-gain)}

/* Панель: оба состояния лежат в одной ячейке, высота панели постоянная */
.fr-panel{display:grid;background:var(--c-bg);box-shadow:var(--c-shadow);border:1px solid var(--c-border);border-radius:var(--radius);padding:var(--sp-3)}
.fr-state{grid-area:1 / 1;min-width:0}
/* Скрытое состояние скрыто целиком, вместе с потомками: у блока результата поиска своя видимость (.is-on),
   без !important она перебивала скрытие родителя и строка «Из N объявлений… Изменить запрос» оставалась поверх шага 1 */
.fr-panel[data-state="request"] .fr-scan,.fr-panel[data-state="request"] .fr-scan *,
.fr-panel[data-state="scan"] .fr-request,.fr-panel[data-state="scan"] .fr-request *{visibility:hidden!important}

/* Шаг 1: диалог с ботом */
.fr-request{display:grid;gap:var(--sp-3)}
.fr-bot{display:grid;gap:var(--sp-1)}
.fr-bot-q{justify-self:start;background:var(--c-surface-2);border-radius:14px 14px 14px 4px;padding:8px 14px;font-weight:600;color:var(--c-heading)}
.fr-options{display:flex;flex-wrap:wrap;gap:var(--sp-1)}
.fr-opt{font:inherit;font-size:var(--fs-small);min-height:44px;padding:0 14px;border-radius:10px;border:1px solid var(--c-border-strong);background:var(--c-tint);color:var(--c-text);cursor:pointer;transition:background .15s,border-color .15s}
.fr-opt:hover{border-color:var(--c-accent)}
.fr-opt[aria-pressed="true"]{background:var(--c-accent);border-color:var(--c-accent);color:var(--c-on-accent);font-weight:600}
.fr-opt:focus-visible,.fr-item:focus-visible{outline:3px solid var(--c-focus);outline-offset:2px}
.fr-request-foot{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-3);align-items:center;justify-content:space-between;border-top:1px solid var(--c-border);padding-top:var(--sp-3)}
.fr-summary{color:var(--c-muted);font-size:var(--fs-small);flex:1 1 280px}
.fr-summary b{color:var(--c-heading);font-weight:600}
.fr-request-foot .btn{min-width:240px}
.fr-request-go{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-3);align-items:center;justify-content:flex-end}
@media (max-width:639.98px){.fr-request-go{justify-content:stretch}.fr-request-go .btn{flex:1 1 100%}.fr-request-go .demo-hint{order:-1}}

/* Шаг 2: поиск */
.fr-scan{display:grid;gap:var(--sp-2);align-content:start}
.fr-scan-num{font-size:var(--fs-kpi);font-weight:700;line-height:1.1;color:var(--c-heading)}
.fr-scan-unit{font-size:var(--fs-small);font-weight:500;color:var(--c-muted)}
.fr-progress{height:8px;border-radius:999px;background:var(--c-surface-2);overflow:hidden}
.fr-progress span{display:block;height:100%;width:0;background:var(--c-accent);border-radius:inherit}
.fr-scan-lines{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.fr-scan-lines li{font-size:var(--fs-small);color:var(--c-muted);padding-left:22px;position:relative;transition:color .3s}
.fr-scan-lines li::before{content:"";position:absolute;left:0;top:5px;width:12px;height:12px;border-radius:50%;border:2px solid #94A3B8}
.fr-scan-lines li.is-on{color:var(--c-text)}
.fr-scan-lines li.is-on::before{border-color:var(--c-gain);background:var(--c-gain)}
.fr-scan-done{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-3);align-items:center;visibility:hidden}
.fr-scan-done.is-on{visibility:visible}
.fr-scan-result{font-weight:600;color:var(--c-gain)}

/* Шаг 3: карта и список */
.fr-results{padding:var(--sp-4) 0 var(--sp-3)}
.fr-results-head{display:grid;gap:4px;margin-bottom:var(--sp-2)}
.fr-results-head h2{font-size:var(--fs-h2);scroll-margin-top:120px}
.fr-results-body{display:grid;gap:var(--sp-3)}
.fr-map{background:var(--c-bg);border:1px solid var(--c-border);border-radius:var(--radius);padding:var(--sp-1);min-width:0}
.fr-map svg{display:block;width:100%;height:auto;aspect-ratio:1000 / 640}
.fr-map-legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;color:var(--c-muted);padding:6px 8px 2px}
.fr-legend-dot{display:inline-block;width:14px;height:14px;border-radius:3px;background:#B45309}
.fr-legend-dot.is-strong{background:#15803D}

.fr-district{stroke:#CBD5E1;stroke-width:2}
.fr-district-label{fill:#475569;font:700 22px var(--f-sans);letter-spacing:.06em;text-transform:uppercase}
.fr-district.is-picked{stroke:var(--c-accent);stroke-width:3}
.fr-river{fill:none;stroke:#93C5FD;stroke-width:38;stroke-linecap:round}
.fr-river-label{fill:#1E40AF;font:italic 600 22px var(--f-sans)}
.fr-road{fill:none;stroke:#CBD5E1;stroke-width:6;stroke-linecap:round}
.fr-bridge{stroke:#94A3B8;stroke-width:10}
.fr-marker{cursor:pointer}
.fr-marker rect{fill:#B45309;stroke:#FFFFFF;stroke-width:2}
.fr-marker.is-strong rect{fill:#15803D}
.fr-marker text{fill:#fff;font:700 22px var(--f-sans);text-anchor:middle;pointer-events:none}
.fr-marker.is-hot rect{stroke:#0F172A;stroke-width:3}
.fr-marker-pin{fill:#0F172A}

.fr-list{list-style:none;margin:0;padding:var(--sp-1);background:var(--c-surface-2);border:1px solid var(--c-border);border-radius:var(--radius);height:440px;overflow-y:auto;display:grid;gap:var(--sp-1);align-content:start}
.fr-list-empty{color:var(--c-muted);font-size:var(--fs-small);padding:var(--sp-3);text-align:center}
.fr-list-note{color:var(--c-muted);font-size:var(--fs-small);padding:6px 8px}
.fr-item{display:grid;gap:4px;width:100%;text-align:left;font:inherit;color:var(--c-text);background:var(--c-bg);border:1px solid var(--c-border);border-radius:10px;padding:12px 14px;cursor:pointer;box-shadow:0 1px 2px rgba(15,23,42,.06)}
.fr-item:hover,.fr-item.is-hot{border-color:var(--c-accent)}
.fr-item-price{font-size:var(--fs-h2);font-weight:700;color:var(--c-heading)}
.fr-item-meta{font-size:var(--fs-small);color:var(--c-muted)}
.fr-item-badge{justify-self:start;font-size:var(--fs-small);font-weight:600;padding:2px 10px;border-radius:999px;background:#FEF3C7;color:#92400E}
.fr-item-badge.is-strong{background:var(--c-gain-soft);color:var(--c-gain)}

.fr-disclaimer{margin-top:var(--sp-3);padding:var(--sp-2) var(--sp-3);border:1px dashed var(--c-border-strong);border-radius:var(--radius-sm);color:var(--c-text);font-size:var(--fs-small)}

/* Разбор варианта */
.fr-dialog{border:1px solid var(--c-border-strong);border-radius:var(--radius);background:var(--c-bg);color:var(--c-text);padding:0;width:min(560px,calc(100vw - 32px));max-height:calc(100vh - 48px)}
.fr-dialog::backdrop{background:rgba(15,23,42,.45)}
.fr-dialog-body{padding:var(--sp-4);display:grid;gap:var(--sp-3)}
.fr-dialog h2{font-size:var(--fs-h2)}
.fr-dialog h3{font-size:var(--fs-base);margin-bottom:6px}
.fr-an-prices{margin:0;display:grid;gap:6px}
.fr-an-prices div{display:flex;justify-content:space-between;gap:var(--sp-2);border-bottom:1px solid var(--c-border);padding-bottom:6px}
.fr-an-prices dt{color:var(--c-muted)}
.fr-an-prices dd{margin:0;font-weight:600;color:var(--c-heading);text-align:right}
.fr-an-prices .fr-gain{color:var(--c-gain)}
.fr-an-cols{display:grid;gap:var(--sp-3)}
.fr-pros,.fr-cons{margin:0;padding-left:20px;display:grid;gap:4px;font-size:var(--fs-base)}
.fr-pros li::marker{content:"+  ";color:var(--c-gain);font-weight:700}
.fr-cons li::marker{content:"−  ";color:var(--c-loss);font-weight:700}
.fr-dialog .btn{justify-self:start}


.fr-map-hint{display:none;font-size:var(--fs-small);color:var(--c-muted);padding:4px 8px 0}
/* Телефон: карта в полный размер прокручивается внутри своей рамки, страница не уезжает вбок */
@media (max-width:639.98px){
  .fr-map-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius-sm)}
  .fr-map svg{width:760px;max-width:none}
  .fr-an-prices div{flex-wrap:wrap;gap:0 var(--sp-2)}
  .fr-an-prices dd{text-align:left}
  .fr-map-hint{display:block}
}
.fr-an-prices dd{white-space:nowrap}
@media (min-width:640px){
  .fr-an-cols{grid-template-columns:1fr 1fr}
}
@media (min-width:1000px){
  .fr-results-body{grid-template-columns:minmax(0,1.65fr) minmax(320px,1fr);align-items:stretch}
  /* Список по высоте карты: свой размер не влияет на высоту строки, лишнее прокручивается внутри */
  .fr-list{height:auto;contain:size;align-self:stretch}
}
@media (prefers-reduced-motion:reduce){
  .fr-opt,.fr-scan-lines li{transition:none}
}
/* Подсказка слева от кнопки: стрелка вправо, на телефоне подсказка над кнопкой, стрелка вниз */
.fr-hint-right{flex-direction:row-reverse}
.fr-hint-right::before{transform:rotate(-135deg)}
@media (max-width:639.98px){
  .fr-hint-right{flex-direction:row}
  .fr-hint-right::before{transform:rotate(-45deg)}
}
/* Телефон: кнопка «Найти варианты» прилипает к низу экрана, пока виден блок запроса, листать до неё не нужно */
@media (max-width:639.98px){
  .fr-request-foot{position:sticky;bottom:0;z-index:5;background:var(--c-bg);margin:0 calc(-1 * var(--sp-3)) calc(-1 * var(--sp-3));padding:var(--sp-2) var(--sp-3) var(--sp-3);box-shadow:0 -10px 20px rgba(15,23,42,.08);border-radius:0 0 var(--radius) var(--radius)}
}
/* Тёмная тема: схема города (цвета районов заданы атрибутами в app.js, CSS их перекрывает) */
html[data-theme="dark"] .fr-map svg > rect:first-child{fill:#0F1829}
html[data-theme="dark"] .fr-district{fill:#152038;stroke:#334766}
html[data-theme="dark"] .fr-district-label{fill:#CBD5E1}
html[data-theme="dark"] .fr-river{stroke:#1E3A8A}
html[data-theme="dark"] .fr-river-label{fill:#93C5FD}
html[data-theme="dark"] .fr-road{stroke:#334766}
html[data-theme="dark"] .fr-bridge{stroke:#475B80}
html[data-theme="dark"] .fr-marker rect{stroke:#0B1220}
html[data-theme="dark"] .fr-marker.is-hot rect{stroke:#F4F6FA}
html[data-theme="dark"] .fr-marker-pin{fill:#F4F6FA}