/**
 * deck-planner-overlay.css
 * Hides the engine's controls-panel (replaced by the new sidebar UI).
 * Also cleans up canvas-panel chrome for the new planer__plan container.
 */

/* Hide the right-hand controls sidebar entirely */
.exw-deck-planner .controls-panel {
  display: none !important;
}

/* The engine container should fill its host .planer__plan */
.exw-deck-planner,
.exw-deck-planner .container {
  width: 100%;
  height: auto !important;
  min-height: 0;
}

/* Canvas panel: auto height, full width */
.exw-deck-planner .canvas-panel {
  border-right: none;
  width: 100%;
  flex: 1;
  height: auto !important;
}

/* Remove canvas-panel top bar (shape/scale title) — toolbar above replaces it */
/* Inline style="display:flex" on this div requires !important to override */
.exw-deck-planner .canvas-panel > div:first-child {
  display: none !important;
}

/* With title bar gone, remove the panel's top padding so canvas aligns
   with the top of the adjacent sidebar panel */
.exw-deck-planner .canvas-panel {
  padding-top: 0 !important;
}

/* Final summary (STEP 4 / results bar) — hidden in this UI */
.exw-deck-planner .final-summary {
  display: none !important;
}

/* Canvas fills full width */
.exw-deck-planner canvas {
  width: 100% !important;
}

/* Floorboard/tile dropdown: show options when .open class is toggled by script */
.planer__chosen--select.open .select__options {
  display: block;
}

/* Base edge sub-selects: show options on .open */
.select[data-mirror].open .select__options {
  display: block;
}

/* Part B.2 — Base edge group row layout */
.planer__group--row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.planer__group--row:last-of-type {
  margin-bottom: 0;
}
.group__sublabel {
  font-size: 13px;
  color: var(--color-muted, #8b8e85);
  font-weight: 500;
}
.planer__group--edge-editor {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--color-line, #e8e8e2);
}
.planer__group--edge-editor:empty {
  display: none;
}

/* Fix dropdown stacking — open panel must paint above sibling rows */
.planer__group--row { position: relative; }
.planer__group--row .select.open { z-index: 1000; position: relative; }

/* __EXW_LENGTH_DROPDOWN_ZFIX_V1__ Phase 119: дропдаун длин «Use single length only»
   (.planer__radio--radio.select) при открытии перекрывался строкой дропдауна доски
   (.planer__chosen--select). Корень: оба .select имеют z-index:2 (main.css:1374); дропдаун
   доски ПОЗЖЕ в DOM (RUN_ME:530 vs 479) → при равном z-index красится поверх → опции длин
   3m/4m/5m уходят под строку доски. Проявляется на ≤1199px (block-flow, .planer__area не grid).
   Зеркало base-edge правила выше: при .open (навешивается box2-IIFE RUN_ME:3607) поднять над
   доской (z-index:1000 > 2). position:relative уже из .select. Только в открытом состоянии;
   десктоп ≥1200 (grid, нет перекрытия) безвреден. */
.planer__radio--radio.select.open { z-index: 1000; position: relative; }
.planer__group--base-edge .group__body { overflow: visible; }
/* Allow chosen-wrapper to grow taller than the toggle's border-radius clip box */
.exw-planer-page .planer__toggle { overflow: visible; }
.planer__group--row .select__option { padding: 10px 16px; cursor: pointer; }
.planer__group--row .select__option:hover { background: var(--color-section-bg, #f6f4ec); }
.planer__group--row .select__option.selected { background: var(--color-section-bg, #f6f4ec); font-weight: 500; }

/* Part D — checkbox pair below the 4×2 tools icon grid */
.planer__tools--checks {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.planer__tools--checks .checkbox__text {
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text, #2a301d);
}

/* Part C — hide the engine's canvas hint (three-line instruction text) */
.exw-deck-planner .hint {
  display: none !important;
}

/* Part E.0 — Substructure item grid override + active/missing classes */
.planer__substructure--list { display: flex; flex-direction: column; }
.planer__substructure--item {
  display: grid;
  grid-template-columns: 40px 1fr 120px 2fr 1fr;
  grid-template-areas: 'check name img desc price';
  column-gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-line, #e8e8e2);
  align-items: start;
}
.planer__substructure--item:last-child { border-bottom: none; }
.planer__substructure--checkbox { grid-area: check; }
.planer__substructure--name    { grid-area: name; text-transform: uppercase; font-weight: 600; font-size: 14px; }
.planer__substructure--img     { grid-area: img; }
.planer__substructure--img img { max-width: 100%; height: auto; display: block; }
.planer__substructure--desc    { grid-area: desc; font-size: 13px; color: var(--color-muted, #6e7163); line-height: 1.4; }
.planer__substructure--price   { grid-area: price; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 14px; }
.planer__substructure--qty     { color: var(--color-text, #2a301d); }
.planer__substructure--price b { font-weight: 600; }
.planer__substructure--text    { font-size: 12px; color: var(--color-muted, #6e7163); text-align: right; }
.planer__substructure--item.active .planer__substructure--name { color: var(--color-orange, #ff5733); }
.planer__substructure--item.active { background: rgba(255, 87, 51, 0.04); box-shadow: inset 3px 0 0 var(--color-orange, #ff5733); }

/* Part E — Installation pattern variation grid */
.planer__variation { display: grid; grid-template-columns: 64px 1fr 1fr; row-gap: 8px; column-gap: 12px; align-items: center; }
.planer__variation--head { display: contents; }
.planer__variation--head > span { font-size: 12px; font-weight: 500; text-transform: uppercase; color: var(--color-muted, #8b8e85); letter-spacing: 0.04em; }
.planer__variation--head > .planer__variation--col-cost { text-align: right; }
.planer__variation--rows { display: contents; }
.planer__variation--row { display: contents; cursor: pointer; }
.planer__variation--num { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--color-line, #e8e8e2); border-radius: 6px; font-weight: 600; font-size: 14px; background: #fff; color: var(--color-text, #2a301d); transition: all .12s ease; }
.planer__variation--row:hover .planer__variation--num { border-color: var(--color-orange, #ff5733); }
.planer__variation--row.is-active .planer__variation--num { background: var(--color-orange, #ff5733); border-color: var(--color-orange, #ff5733); color: #fff; }
.planer__variation--waste, .planer__variation--cost { font-size: 14px; color: var(--color-text, #2a301d); }
.planer__variation--cost { text-align: right; }
.planer__variation--row.is-active .planer__variation--waste,
.planer__variation--row.is-active .planer__variation--cost { font-weight: 500; }
.planer__variation--total { margin-top: 16px; font-size: 16px; font-weight: 600; color: var(--color-text, #2a301d); }

/* ── Necessary & Optional Accessories — shared layout ────────────────────── */
/* Top border separating each section from its group__title */
.planer__nec-accessories,
.planer__opt-accessories {
  border-top: 1px solid var(--color-line, #e8e8e2);
}

/* 8-col grid shared by header row and item rows:
   [32px chk] [110px photo] [1fr name] [5 × minmax(80px,1fr) numeric cols] */
.acc-row {
  display: grid;
  grid-template-columns: 32px 110px minmax(0, 1fr) repeat(5, minmax(80px, 1fr));
  gap: 16px;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-line, #e8e8e2);
  transition: opacity .15s;
}

/* Section title: 20px top/sides to match row gutter; gap:10px on .group handles bottom */
#planer-toggle-accessories .group__title {
  padding: 20px 20px 0;
}
.acc-row:last-child { border-bottom: none; }

/* Header: labels aligned to bottom, smaller/muted text */
.acc-row--head {
  align-items: end;
  padding-top: 0;
  padding-bottom: 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-muted, #8b8e85);
  line-height: 1.3;
}
/* numeric header cells right-aligned; Amount center */
.acc-row--head > div:nth-child(n+4) { text-align: right; }
.acc-row--head > div:nth-child(7)   { text-align: center; }

/* Inactive (unchecked) item */
.acc-row:not(.active):not(.acc-row--head) { opacity: .45; }

/* Active (checked) item — subtle orange tint + left accent bar */
.acc-row.active {
  background: rgba(255, 87, 51, 0.04);
  box-shadow: inset 3px 0 0 var(--color-orange, #ff5733);
}

/* Checkbox column: center the label */
.acc-row > label { display: flex; align-items: center; justify-content: center; }

/* Product photo placeholder */
.acc-img {
  width: 110px;
  height: 80px;
  background: var(--color-section-bg, #f6f4ec);
  border: 1px solid var(--color-line, #e8e8e2);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-muted, #8b8e85);
}
/*__EXW_ACC_IMG_FIT_V1__ real product photos vary in native aspect ratio; the global
  `img{max-width:100%}` reset (main.css:160) leaves height:auto, so each photo rendered
  at its own natural proportions inside the fixed 110x80 frame above -- some looked
  square, some elongated, frame itself was always consistent. Same root cause + same
  fix already proven for .planer__chosen--img (main.css:4538): fill the fixed box and
  letterbox via object-fit, no cropping/distortion. Mobile hides .acc-img entirely
  (display:none, media query below) so no separate override needed there. */
.acc-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Name + description column */
.acc-info { display: flex; flex-direction: column; gap: 4px; }
.acc-name { font-size: 14px; font-weight: 600; color: var(--color-text, #2a301d); }
.acc-desc { font-size: 12px; color: var(--color-muted, #6e7163); line-height: 1.4; }

/* Numeric data cells */
.acc-cell { font-size: 14px; color: var(--color-text, #2a301d); text-align: right; }
.acc-cell--input { text-align: center; }

/* Amount input */
.acc-cell--input input[type="number"] {
  width: 56px;
  text-align: center;
  border: 1px solid var(--color-line, #e8e8e2);
  border-radius: 6px;
  padding: 6px 4px;
  font-size: 14px;
  color: var(--color-text, #2a301d);
  background: #fff;
  font-family: inherit;
}
.acc-cell--input input[type="number"]:disabled {
  background: var(--color-section-bg, #f6f4ec);
  color: var(--color-muted, #8b8e85);
}
.acc-cell--input input[type="number"]:focus {
  outline: none;
  border-color: var(--color-orange, #ff5733);
}

/* Substructure checkbox wrapper — now a <label> that is its own grid cell */
.planer__substructure--checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hide native inputs inside custom checkbox rows
   (labels here don't carry .checkbox, so main.css rule won't apply) */
.planer__substructure--checkbox input[type="checkbox"],
.acc-row > label input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* __EXW_SUBSTRUCTURE_ACC_MOBILE_V1__ Phase 120 — мобильная раскладка строк подсистемы и
   аксессуаров (≤767px): весь контент влезает в контейнер и переносится по высоте (как имя),
   ничего не выезжает за правый край. До фикса обе строки держали десктопную многоколоночную
   сетку без мобильного брейкпоинта (substructure: overlay.css «40px 1fr 120px 2fr 1fr»;
   acc-row collapse был, но цена/атрибуты валились стеком). */
@media (max-width: 767px) {

  /* ── Accessories (.acc-row): итоговая цена пришпилена справа, атрибуты под названием ── */
  .acc-row--head { display: none; }
  .acc-row {
    grid-template-columns: 32px minmax(0, 1fr) auto;   /* check | контент | цена */
    gap: 4px 12px;
    align-items: start;
  }
  .acc-row > label  { grid-column: 1; grid-row: 1; align-self: start; padding-top: 2px; }
  .acc-img          { display: none; }
  .acc-info         { grid-column: 2; grid-row: 1; }
  /* атрибуты (pcs/pack, цена/pack, needed, степпер) — стеком в колонке 2 под названием */
  .acc-cell         { grid-column: 2; text-align: left; font-size: 12px; color: var(--color-muted, #8b8e85); }
  .acc-cell--input  { text-align: left; }
  /* итоговая цена = последняя ячейка → фиксируем вверху справа, одной строкой */
  .acc-row .acc-cell:last-child {
    grid-column: 3;
    grid-row: 1;
    text-align: right;
    align-self: start;
    font-size: 14px;
    color: var(--color-text, #2a301d);
    white-space: nowrap;
  }

  /* ── Substructure (.planer__substructure--item): картинка маленькая ПОД названием,
        весь контент колонкой; цена/кол-во/текст переносятся, не выезжают вправо ── */
  .planer__substructure--item {
    grid-template-columns: 32px minmax(0, 1fr);
    grid-template-areas:
      'check name'
      'check img'
      'check desc'
      'check price';
    column-gap: 12px;
    row-gap: 6px;
    align-items: start;
  }
  .planer__substructure--img img { width: 56px; height: auto; }
  .planer__substructure--price { align-items: flex-start; text-align: left; }
  .planer__substructure--text  { text-align: left; }
}

/* ── Unified checkbox / radio visual elements ────────────────────────────── */

/* span.checkbox — visual box, replaces span.checkbox__ico */
span.checkbox {
  width: 18px !important;
  height: 18px !important;
  border-radius: 4px;
  border: 1.5px solid var(--color-muted, #8b8e85);
  background: var(--color-bg, #fffffc);
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .15s, border-color .15s;
  cursor: pointer;
  box-sizing: border-box;
}
input:checked + span.checkbox {
  background: var(--color-orange, #ff5733) !important;
  border-color: var(--color-orange, #ff5733) !important;
}
input:checked + span.checkbox::after {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='m3 6.32 3.15 3.23 5.85-6' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C%2Fsvg%3E") center/contain no-repeat;
}

/* Large variant for table rows (Substructure, Accessories) */
span.checkbox--lg {
  width: 22px !important;
  height: 22px !important;
  border-radius: 5px;
}
input:checked + span.checkbox--lg::after {
  width: 13px;
  height: 13px;
}

/* span.radio — visual circle, replaces span.radio__ico */
span.radio {
  width: 18px !important;
  height: 18px !important;
  border-radius: 50%;
  border: 1.5px solid var(--color-muted, #8b8e85);
  background: var(--color-bg, #fffffc);
  flex-shrink: 0;
  position: relative;
  transition: border-color .15s;
  cursor: pointer;
  box-sizing: border-box;
}
input:checked + span.radio {
  border-color: var(--color-orange, #ff5733) !important;
}
input:checked + span.radio::after {
  content: '';
  position: absolute;
  inset: 3px;
  background: var(--color-orange, #ff5733);
  border-radius: 50%;
}

/* ── Tile mode: hide board-specific UI elements ─────────────────────── */
/*__EXW_FLICKER_FIX_V2__ Phase 55 fix #3: revert .planer__settings--box1
  hide (Phase 54 fix). That selector swallowed the Base edge group (Side
  dropdown + Board/Tile start position) which is needed in BOTH modes.
  Boards-only children are individually hidden below (orientation row,
  installation pattern) — that's sufficient. */
/*__EXW_TILE_SHOW_SHAPE_SELECTOR_V1__
 * Phase 72: shape selector toolbar (.planer__toolbar) is shared
 * geometry UI — needed in both boards AND tile modes. Reverts portion
 * of Phase 39-42 tile-mode cleanup that overzealously hid it. Also
 * reverts padding-top compensation that was added below for "no
 * toolbar above" scenario — no longer applicable. */
body.exw-tile-mode .tabs_step,
body.exw-tile-mode .planer__settings--box2,
body.exw-tile-mode #bridgeCornerWrap,
body.exw-tile-mode .planer__group--installation-pattern,
body.exw-tile-mode .planer__group--row--orientation,
body.exw-tile-mode #planer-group-necessary { display: none !important; }

/*__EXW_FLICKER_FIX_V2__ Phase 55 fix #1: removed visibility-hidden via
  data-i18n attribute selector. The Phase 54 CSS made the label/placeholder
  permanently hidden because JS only updated textContent but kept the
  data-i18n attribute → CSS selector kept matching. New strategy: JS
  removes the data-i18n attribute, so no CSS hide rule needed here. */

/* Engine's hidden controls panel (#boardProductSelect, joist controls etc.)
   already display:none via deck-planner-overlay.css elsewhere, but make explicit
   for tile mode in case any leak through stacking-context quirks. */
body.exw-tile-mode #boardProductSelect,
body.exw-tile-mode #showJoistsChk,
body.exw-tile-mode label[for="showJoistsChk"] { display: none !important; }

/*__EXW_TILE_NO_JOIST_DRAW_V1__ Phase 57: hide canvas during tile bootstrap
  to eliminate "мигание досок". Engine init runs applySurfaceMode('tile')
  followed by recalcLayout with empty polygon, then applyPresetShape via
  Phase 51 R2 gate (which waits for products-loaded). During this period
  the canvas may flicker showing intermediate states. We hide it until
  body gets `.exw-tile-bootstrap-ready` class. Body class added by engine
  in _doInitialShape() (Phase 51 R2) — after applyPresetShape completed. */
body.exw-tile-mode:not(.exw-tile-bootstrap-ready) #deckCanvas {
  visibility: hidden;
}

/*__EXW_TILE_SHOW_SHAPE_SELECTOR_V1__ Phase 72: removed
  `body.exw-tile-mode .planer__plan, body.exw-tile-mode .planer__sidebar
   { padding-top: 40px; }` — was compensating for hidden toolbar above
  (see compound rule near line 360). Since shape selector toolbar is now
  visible in tile mode, this padding caused a double gap. */

/* ── Layout Health Banner ──────────────────────────────────────────── */
.planer__health-banner {
  margin-top: 10px;
  padding: 12px 16px 12px 20px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.planer__health-banner--warning {
  background: #fef3c7;
  border-left: 4px solid #f59e0b;
  color: #92400e;
}
.planer__health-banner--error {
  background: #fee2e2;
  border-left: 4px solid #ef4444;
  color: #991b1b;
}
.planer__health-banner__icon {
  flex-shrink: 0;
  font-size: 16px;
  line-height: 1.5;
}
.planer__health-banner__text {
  flex: 1;
}

/* Cart button — health error disabled state */
#bridgeCartBtn.planer__health-cart--disabled {
  opacity: 0.45;
  cursor: not-allowed !important;
  pointer-events: none;
}

/* ── Restore-validation Banner ─────────────────────────────────────── */
.planer__restore-banner {
  margin-top: 10px;
  padding: 10px 12px 10px 16px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.planer__restore-banner--warning {
  background: #fffbeb;
  border-left: 4px solid #f59e0b;
  color: #92400e;
}
.planer__restore-banner--error {
  background: #fef2f2;
  border-left: 4px solid #ef4444;
  color: #991b1b;
}
.planer__restore-banner__text {
  flex: 1;
}
.planer__restore-banner__close {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 0 2px;
  color: inherit;
  opacity: 0.7;
}
.planer__restore-banner__close:hover {
  opacity: 1;
}

/* ── Restore-validation Modal ──────────────────────────────────────── */
dialog.exw-restore-modal {
  border: none;
  border-radius: 12px;
  padding: 0;
  max-width: 520px;
  width: 90vw;
  box-shadow: 0 8px 40px rgba(0,0,0,0.18);
}
dialog.exw-restore-modal::backdrop {
  background: rgba(0,0,0,0.45);
}
.exw-restore-modal__inner {
  padding: 28px 28px 24px;
}
.exw-restore-modal__title {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 600;
  color: #1a1a1a;
}
.exw-restore-modal__body {
  margin-bottom: 20px;
  max-height: 50vh;
  overflow-y: auto;
}
.exw-restore-modal__section {
  margin-bottom: 14px;
}
.exw-restore-modal__section-title {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b6b6b;
}
.exw-restore-modal__list {
  margin: 0;
  padding-left: 18px;
  font-size: 14px;
  color: #1a1a1a;
  line-height: 1.6;
}
.exw-restore-modal__actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.exw-restore-modal__btn {
  padding: 9px 20px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  line-height: 1.4;
}
.exw-restore-modal__btn--primary {
  background: #1a1a1a;
  color: #fff;
}
.exw-restore-modal__btn--primary:hover {
  background: #333;
}
.exw-restore-modal__btn--ghost {
  background: transparent;
  color: #1a1a1a;
  border: 1.5px solid #ccc;
}
.exw-restore-modal__btn--ghost:hover {
  border-color: #888;
}

/* __EXW_COSTS_HEIGHT_V1__ Phase 96: chosen breathing room + defensive override.
   After Phase 92 multi-line BOM the COSTS block grows (one row per stock length
   + corner/skirting), and on staging .planer__chosen has margin-bottom:0 → the
   block sits flush against the "Terrace Substructure" toggle below. The content
   itself is NOT clipped (computed: costs overflow:visible, no height/max-height
   in the active theme). This adds bottom breathing room (margin-bottom is the one
   critical rule; !important guards against the theme cascade) plus defensive
   no-op overrides so future theme height/overflow caps can't re-clip the costs/
   build-up blocks. Loaded after main.css (link order 137 → 142) so the cascade
   wins. .planer__chosen--box is chosen-scoped (used only by chosen.js) — no
   selector narrowing needed. */
.planer__chosen {
  margin-bottom: 24px !important;
}
.planer__chosen--costs,
.planer__chosen--current,
.planer__chosen--box {
  min-height: 0;
  max-height: none;
  overflow: visible;
}

/* __EXW_OPT_GROUP_SPACING_V1__ Phase 103: 13px gap between Optional accessory category
   groups (profiles / supports / pads). The between-group separators are RUN_ME `_DIV`
   nodes — direct <div> children WITHOUT .acc-row (header is .acc-row--head, items are
   .acc-row), so the direct-child combinator + :not(.acc-row) hits EXACTLY the 2
   separators and nothing else (the header's empty cells are nested, not direct children).
   PRE-FLIGHT note: `_DIV` is NOT an empty div — it carries inline
   `height:1px; background:var(--color-line); margin:0 20px` (a thin divider line). So
   min-height alone would yield a 13px GREY BAR; `background: transparent !important`
   neutralises the inline grey to give a clean empty 13px gap. Scoped to Optional ONLY
   (NOT .planer__nec-accessories per request). Parent is block layout → min-height works. */
.planer__opt-accessories > div:not(.acc-row) {
  min-height: 13px;
  background: transparent !important;
}

/* __EXW_EDGE_TRIM_MODE_V1__ Phase 105: visual affordances while edge-trim mode is ON.
   The body/canvas-wrapper gets `.exw-edge-trim-mode-on` from window.__exwSetEdgeTrimMode. */
.exw-edge-trim-mode-on #exw-deck-planner,
.exw-edge-trim-mode-on #exw-deck-planner canvas,
.exw-edge-trim-mode-on .planer__plan { cursor: crosshair; }
/* In trim mode the side-click marks/unmarks trims — the length editor must not open. */
.exw-edge-trim-mode-on .planer__group--edge-editor { display: none !important; }
/* Hint under the canvas — visible only in trim mode. */
.exw-edge-trim-hint { display: none; margin-top: 8px; font-size: 13px; color: var(--color-orange, #FF5733); }
.exw-edge-trim-mode-on .exw-edge-trim-hint { display: block; }

/* __EXW_ANGLE_TRIM_HINT_V1__ Phase 116: перманентная подсказка под канвой. Размер/цвет/
   line-height заданы INLINE на элементе (font-size:13px; color:#8B8E85; line-height:1.5 —
   ровно как у #bridgeEdgeHint «Click a side...»), чтобы совпадало точно независимо от
   каскада/кэша. Здесь — только позиция (margin-top:8px, то же место что у edge-trim hint)
   и тоггл: видна по умолчанию (Angle trim OFF); при .exw-edge-trim-mode-on скрывается →
   её сменяет оранжевая .exw-edge-trim-hint. В tile mode (кнопки нет, Phase 108) — скрыта. */
.exw-angle-trim-default-hint { display: block; margin-top: 8px; }
.exw-edge-trim-mode-on .exw-angle-trim-default-hint { display: none; }
body.exw-tile-mode .exw-angle-trim-default-hint { display: none; }

/* __EXW_COSTS_RESPONSIVE_PADDING_V1__ Phase 106 —
   COSTS / BUILD-UP HEIGHT block на mid-width viewport
   (768-1199px) тексты упирались в границы блока из-за
   унаследованного 28px column-gap и 16px padding.
   Bump до 24px padding-x и 36px column-gap — даёт
   достаточно воздуха для labels и prices.
   Не задеваем mobile (<768, flex column) и full-desktop
   (≥1200, padding 16 / gap 40). */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .planer__chosen--wrapper {
    padding: 16px 24px;
    column-gap: 36px;
  }
}

/* __EXW_DECKING_COST_SPACING_V1__ Phase 107 —
   В mid-width range (768-1199px) .planer__area block-flow
   (grid появляется только с ≥1200). Между .planer__sidebar
   (низ box1 c "Decking Cost") и .planer__chosen (верх с
   "Select the Floorboard") — sibling stack без vertical
   gap → визуальное слияние блоков. Margin-top 32px даёт
   ясный section break. На <768 разделяет box2 ("Select
   decking board lengths"). На ≥1200 grid разносит по
   ячейкам — наш rule не активен. */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .planer__chosen {
    margin-top: 32px;
  }
}

/* __EXW_TILE_HIDE_EDGE_TRIM_V1__ Phase 108 —
   Hide Edge trim toolbar button (Phase 105 #but9 /
   .planer__tools--item[data-tool="tool-edgetrim"]) в tile mode
   (URL ?isCeramic=true → body.exw-tile-mode, выставляется
   head inline-script на первый paint + _applyTileClass).
   Цоколь/уголок для плитки не применяется. OPTION A (CSS-only):
   auto-reset режима НЕ нужен — tile mode входит только через
   URL-параметр на page-load (свежий JS → window.__exwEdgeTrimMode
   = false, класс .exw-edge-trim-mode-on не выставлен), а
   user-facing runtime board↔tile switch отсутствует: движковый
   <select id="surfaceMode"> лежит в .controls-panel, скрытой
   выше (display:none). Phase 105 helpers/engine drawScene-патч
   остаются функциональными в board mode (другой режим). */
body.exw-tile-mode .planer__tools--item[data-tool="tool-edgetrim"] {
  display: none !important;
}

/* __EXW_DROPDOWN_SCROLL_V1__ Phase 114 → 114.1 — Floorboard/Tile dropdown ограничиваем
   6 опций × 48px (.planer__chosen--select .select__option height) = 288px max-height
   + overflow-y: auto. При 10+ досках dropdown раньше растягивался на весь экран
   (.select__options без max-height/overflow, main.css:1419). Scoped строго к
   .planer__chosen--select (board+tile picker) — length-dropdown (box2), base-edge
   sub-selects и tile start position (36px-опции) не задеты.
   Phase 114.1: !important — перебивает inline max-height (= scrollHeight, children×48),
   который ставит common.js `Element.prototype.fadeIn` (slide-анимация: maxHeight 0→N +
   overflow:hidden + transition; на transitionend → maxHeight:none/overflow:visible).
   Inline без !important < stylesheet с !important → правило выигрывает в ОБОИх состояниях
   анимации. common.js fadeIn НЕ трогаем — это shared theme-примитив (site-wide: меню,
   аккордеоны, все .select). Тред-офф: slide для ЭТОГО dropdown теряется (instant pop),
   но scroll работает; малые списки (<6) показываются на content-высоте. */
.planer__chosen--select .select__options {
  max-height: 288px !important;
  overflow-y: auto !important;
}