/* Concept selectors = the 26 MAISI selector in black and white (Lev 09.11). Loaded after tokens.css and picker-v2.css;
   only colours change: taupe -> ink, stone -> grey; statuses: available ink, reserved yellow, sold red (Lev 10.11). Copied by tools/concept-maisi.py to concept/<slug>/css/bw.css. */
:root {
  --stone: #f1f1f1;
  --taupe: #282828;
  --taupe-d: #000000;
  --taupe-l: rgba(40, 40, 40, .34);
  --night: #111111;
  --line: rgba(40, 40, 40, .14);
  --line-2: rgba(40, 40, 40, .26);
  --pv-rs: #e8b10c;          /* chessboard cells: reserved yellow, sold red */
  --pv-sd: #c8301e;
  --pv-nf: #a3a3a3;          /* not for sale: grey (launch 11.11) */
}
[data-theme="app"] {
  --brand: #282828;
  --fg-0: #282828;
  --fg-unit-title: #282828;
  --brand-light: #e6e6e6;
  --badge-type-bg: #555555;
  --polygon-static: #282828;
  --status-available: #282828;
  --status-reserved: #e8b10c;
  --status-sold: #c8301e;
  --status-notforsale: #a3a3a3;
  --status-available-aa: #282828;
  --status-reserved-aa: #8a6600;
  --plan-tone-0: #efefef;
  --plan-tone-1: #dedede;
  --plan-tone-2: #cccccc;
  --plan-tone-3: #e6e6e6;
}
/* back to the page the visitor came from (concept/back.js) instead of the MAISI home link */
.pv-back { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font: 500 var(--caps-fs)/1.2 var(--sans); letter-spacing: var(--caps-ls); text-transform: var(--caps-tt); color: var(--taupe); }
.pv-back:hover { opacity: .6; }
.pv-bar .pv-back + .pv-mark { margin-left: 24px; }
.pv-bar > .pv-back { margin-right: auto; }
.pv-bar { justify-content: flex-start; }
.pv-bar .segmented { margin: 0 auto; }
/* no sales phone on a concept: the header links are removed by the generator, this hides any phone the scripts draw */
.pv-call { display: none !important; }
/* the concept tag next to the project name: header, phone header, apartment page (launch 10.11) */
.pv-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; margin-inline-start: 10px; border: 1px solid var(--taupe-l); font: 500 10px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--taupe); white-space: nowrap; flex: none; }
.pv-bar .pv-mark + .pv-tag { margin-inline-start: -12px; }
.pv-cmark { display: inline-flex; align-items: center; min-width: 0; }
.pv-cmark__n { font: 400 18px/1 var(--serif); letter-spacing: .02em; color: var(--taupe); white-space: nowrap; direction: ltr; }
.mhead .pv-cmark { margin: 0 auto 0 14px; }
.mhead .pv-cmark__n { font-size: 16px; }
.mhead .pv-tag { margin-inline-start: 7px; height: 18px; padding: 0 5px; font-size: 9px; }
/* contacts in the apartment card on phones: «Почта» keeps its width, «Обсудить проект» takes the rest and wraps to two
   lines when it has to (launch 11.11: the old nowrap + flex 1.7 cut «Почта» by 17 px at 360, 2 px at 375) */
@media (max-width: 959px) {
  .up__cta-mobile .cta { min-width: 0; width: auto; flex: 1 1 auto; }
  .up__cta-mobile .cta--wa { flex: none; }
  .up__cta-mobile .cta { gap: 10px; padding: 0 12px; }
  .up__cta-mobile .cta span { line-height: 1.25; }
  .up__head .pv-cmark { margin-inline: 8px auto; }
}
/* 375 px and narrower: the concept tag goes (it ran into the RU button), the name keeps 8 px from «Назад» */
@media (max-width: 375px) {
  .pv-tag { display: none; }
  .mhead .pv-cmark { margin-inline-start: 8px; }
}
/* floor plan: apartment numbers from the data over the Figma picture; sizes are in plan units (6000 px wide raster) */
.fp-num { font: 600 110px/1 var(--sans); fill: var(--taupe-d); stroke: #fff; stroke-width: 24px; stroke-linejoin: round; paint-order: stroke; text-anchor: middle; dominant-baseline: central; pointer-events: none; letter-spacing: .02em; }
.pv-zoom { position: absolute; inset-inline-start: 112px; bottom: 42px; z-index: 3; display: flex; direction: ltr; background: var(--white); border: 1px solid var(--taupe-l); }
.pv-zoom button { width: 40px; height: 40px; font: 300 22px/1 var(--sans); color: var(--taupe); }
.pv-zoom button + button { border-inline-start: 1px solid var(--taupe-l); }
.pv-zoom button:hover { background: var(--stone); }
.plan-box.is-wide { padding-inline-start: 24px; }
@media (max-width: 959px) {
  .pv-zoom { display: none; }
  .plan-box:not(.is-wide) .fp-num { font-size: 230px; stroke-width: 46px; }
  /* the plan sits right under the floor picker, free space goes below it (not centred in the screen) */
  /* the Figma frames carry ~40-60 px of white above the drawing: the box starts under the picker, so the drawing is ~16-40 px below it */
  .plan-box, [dir="rtl"] .plan-box { align-items: flex-start; }   /* top padding: MAISI's 112 px, under the floor number (y 68-108) */
  .plan-box:not(.is-wide) svg { height: auto; aspect-ratio: var(--ar); max-height: 100%; }
  /* wide plans (Block 10): the viewBox is cropped to the drawing (app.js), the plan takes the height between the floor number
     (box top 132) and the «show all» toggle over the floor strip (MAISI 7120c3b: 100svh - 172, minus the cookie row when shown)
     less 24 px for the position track, and scrolls sideways from the left wall of the house to the right one */
  .plan-box.is-wide { --ph: clamp(200px, calc(100svh - 328px), 600px); overflow-x: auto; overflow-y: hidden; justify-content: flex-start; padding: 132px 16px 0; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .plan-box.is-wide svg { flex: none; height: var(--ph); width: calc(var(--ph) * var(--ar)); max-height: none; }
  .plan-box.is-wide .fp-num { font-size: 76px; stroke-width: 18px; }
  body:has(#cookieBanner:not([hidden])) .plan-box.is-wide { --ph: clamp(200px, calc(100svh - 328px - var(--ck-h, 64px)), 600px); }
  .plan-pos { position: absolute; inset-inline: 16px; height: 2px; background: var(--line-2); z-index: 2; pointer-events: none; }
  .plan-pos i { position: absolute; top: 0; bottom: 0; background: var(--taupe); transition: left .08s linear; }
  [dir="rtl"] .plan-pos { direction: ltr; }
}
.plan-pos[hidden] { display: none; }
@media (min-width: 960px) { .plan-pos { display: none; } }
/* the 3D card: a long rouble price pushes the status out of the card on phones -> it wraps under the price */
.pv3d__price { flex-wrap: wrap; row-gap: 6px; }
/* phones: the cookie notice is one slim row above the tab bar; the toggle and the arrows move above it while it is shown */
@media (max-width: 959px) {
  .cookie { inset-inline: 0; bottom: calc(64px + env(safe-area-inset-bottom)); max-width: none; border-width: 1px 0 0; padding: 8px 16px; flex-wrap: nowrap; gap: 12px; font-size: 12px; line-height: 1.35; }
  .cookie > span { flex: 1 1 auto; }
  .cookie__ok { height: 32px; padding: 0 14px; }
  .unit-page:not([hidden]) ~ .cookie { bottom: calc(69px + env(safe-area-inset-bottom)); }
  body:has(#cookieBanner:not([hidden])) .scene .capsule, body:has(#cookieBanner:not([hidden])) .scene .pv3d__rot,
  body:has(#cookieBanner:not([hidden])) .scene .toggle { bottom: 84px; }
  body:has(#cookieBanner:not([hidden])) .unit-page { padding-bottom: 170px; }
}
/* the fourth status «не в продаже» / «not for sale» (tools/concept-maisi.py notforsale()): treated as sold, drawn grey */
[data-status="notforsale"] { --st: var(--status-notforsale); --pvst: var(--pv-nf); }
.badge--notforsale { display: inline-flex; align-items: center; gap: 6px; }
.badge--notforsale::before { content: ""; width: 8px; height: 8px; background: var(--pv-nf); }
.pv-floor__row[data-status="notforsale"] { opacity: .55; }
.floor-plan-svg .unit[data-status="notforsale"], .scene3d .unit[data-status="notforsale"], .g-facade .unit[data-status="notforsale"] { --pa: .66; }
.floor-plan-svg .unit[data-status="notforsale"] { fill: var(--pv-nf); fill-opacity: var(--pa); }
.fp--real .unit[data-status="notforsale"] { fill: var(--pv-nf); stroke: var(--taupe-d); fill-opacity: var(--pa); stroke-opacity: .55; }
.cell[data-status="notforsale"] { color: var(--taupe-d); }
.legend__i:nth-child(4) .legend__sw { background: var(--pv-nf) !important; }
.ladder__i:has(.status-sq[data-status="notforsale"]) .ladder__p { white-space: normal; line-height: 1.15; }