/* 2base key public patterns: shell, navigation, constructor and company. */
/* ============================================================================
   Redesign 2026-07 components (source: 2026-07 redesign) —
   wordmark, marker highlight, header search, light footer, bottom status bar.
   ============================================================================ */

/* Wordmark: Inter 600, same face as the rest of the product. */
.app-brand-word {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-strong);
  font-size: var(--text-lg);   /* 21px */
  letter-spacing: var(--letter-spacing);
  line-height: 1;
  color: var(--ink);
}

.app-brand-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 3px;
  border-radius: var(--radius-pill);
  background: var(--marker-dot);
}

/* Full-width search inside the mobile drawer. */
.app-header-search--full,
.app-header-search.app-header-search--full {
  display: flex;
  max-width: none;
}

/* Micro-label: JetBrains Mono caps (counters, eyebrows, table meta) */
.app-mono-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--letter-spacing);
  text-transform: uppercase;
  color: var(--muted);
}

/* Light footer: mono-caps column heads, quiet links, 34px icon buttons */
.app-footer-heading {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--letter-spacing);
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.75rem;
}

.app-footer-nav {
  display: block;
  padding: 0.3125rem 0;
  font-size: var(--text-xs);
  line-height: 1.35;
  color: var(--muted);
  text-decoration: none;
}

.app-footer-nav:hover {
  color: var(--ink);
}

.app-footer-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--color-border-control);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--ink);
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.app-footer-icon:hover {
  border-color: var(--color-border-hover);
  background: var(--tint);
}

/* ============================================================
   Constructor wave 1b — filter pills, filter modal, sample table
   (mockup «База (дашборд)», rows 63-274)
   ============================================================ */

/* ============================================================
   Header «Каталог» mega-menu (mockup rows 32-59)
   <details>-driven: opens without JS, Alpine only adds escape/outside-click.
   ============================================================ */
.app-mega {
  position: static;   /* panel spans the full header width, not the summary */
}

/* «Каталог» reads as a control, not a link — a tint pill, per the mockup */
.app-mega__trigger {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  border-radius: var(--radius-sm);
  background: var(--tint);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-body);
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}


.app-mega__trigger::-webkit-details-marker { display: none; }

.app-mega__trigger:hover {
  background: var(--gray-200);
}

/* Open state reads as a pressed control — decorative dark pill */
.app-mega[open] .app-mega__trigger {
  background: var(--ink-deep);
  color: var(--color-text-inverse);
}

.app-mega__burger {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 14px;
}

.app-mega__burger > span {
  height: 1.8px;
  background: currentColor;
}

.app-mega__panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 64px;
  z-index: var(--z-overlay);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  box-shadow: var(--shadow-mega);
  max-height: calc(100vh - 64px);
  overflow: hidden;
}

.app-mega__inner {
  padding-top: 20px;
  padding-bottom: 28px;
}

.app-mega__top {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border);
}

.app-mega__top p {
  margin-top: 4px;
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-strong);
}

.app-mega__top a {
  flex-shrink: 0;
  color: var(--ink);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-strong);
  text-decoration: underline;
  text-decoration-color: var(--color-border-hover);
  text-underline-offset: 3px;
}

/* Two panes, per the mockup: a 300px industry rail on the left, the niches of
   the hovered industry on the right. Fixed left track → flex, not an
   arbitrary grid template (layout-class guard). */
.app-mega__grid {
  display: flex;
  align-items: stretch;
  gap: 28px;
}

.app-mega__rail {
  width: 300px;
  flex: 0 0 300px;
  max-height: min(52vh, 460px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-right: 1px solid var(--color-border);
  padding-right: 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-hover) transparent;
}

/* The mockup dims the page behind the open panel. Sits under the panel
   (z-index 61) and over everything else. */
.app-mega__scrim {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  top: 64px;
  bottom: 0;
  z-index: var(--z-overlay);
  background: var(--overlay);
}

.app-mega[open] .app-mega__scrim {
  display: block;
}

.app-mega__pane {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 350px;
  padding-top: 2px;
}

.app-mega__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--ink);
  transition: background-color var(--transition-fast);
}

.app-mega__item:hover,
.app-mega__item.is-on {
  background: var(--tint);
}

/* 3×3 grid of niches — the mockup's right pane */
.app-mega__subs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px 20px;
}

.app-mega__sub {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.625rem;
  padding: 7px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.app-mega__sub:hover {
  background: var(--tint);
  color: var(--ink);
}

.app-mega__sub-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-mega__item:focus-visible,
.app-mega__sub:focus-visible,
.app-mega__top a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* «также» — inside the right pane, its rule spanning that pane only */
.app-mega__foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 24px;
  padding-top: 16px;
  padding-left: 8px;
  border-top: 1px solid var(--color-border);
}


/* Filter lists inside the constructor. */
.app-filter-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px 16px;
  max-height: 344px;
  overflow-y: auto;
  padding-right: 4px;
}

@media (min-width: 640px) {
  .app-filter-list { grid-template-columns: 1fr 1fr; }
}

/* Телефон: фильтры в потоке страницы со своим скроллом — вложенный скроллер
   списка на тач-устройстве только мешает (палец скроллит не то, что ожидаешь).
   Правило обязано стоять ПОСЛЕ базового `.app-filter-list`: специфичность
   одинаковая, побеждает то, что ниже в файле. */
@media (max-width: 1023px) {
  .app-filter-list {
    max-height: none;
    overflow-y: visible;
    padding-right: 0;
  }
}

.app-filter-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  /* Grid-элементы по умолчанию не сжимаются ниже своего контента: без этого
     длинное название ниши распирало колонку 1fr и весь список получал
     горизонтальный скролл. */
  min-width: 0;
  padding: 7px 8px;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  font-size: var(--text-sm);
  line-height: 1.35;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: background 0.14s ease;
}

.app-filter-list-row:hover { background: var(--tint); }

.app-filter-list-row.is-selected {
  background: var(--tint);
  font-weight: var(--font-weight-strong);
}

.app-filter-list-row.is-active:not(.is-selected) {
  background: var(--tint);
  box-shadow: inset 0 0 0 1px var(--color-border-control);
}

.app-filter-list-row__check {
  display: inline-block;
  flex-shrink: 0;
  width: 16px;
  font-weight: var(--font-weight-strong);
  color: var(--ink);
}

/* Одна строка на позицию: названия ниш из ЕГРЮЛ бывают под 90 символов и
   ломали двухколоночную сетку макета. */
.app-filter-list-row__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-filter-list-row__sub {
  font-size: var(--text-xs);   /* 11.5px */
  color: var(--muted);
  font-weight: var(--font-weight-body);
}

.app-filter-list-row__count {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-body);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.app-filter-list-row__meta {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.app-filter-list-row__kind {
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-body);
  white-space: nowrap;
}

.app-filter-list-empty {
  grid-column: 1 / -1;
  padding: 16px 8px;
  font-size: var(--text-xs);
  color: var(--muted);
}

.app-filter-hint {
  margin-top: 10px;
  font-size: var(--text-xs);
  color: var(--muted);
}

/* The native <select>s stay in the DOM as the vanilla path's real controls
   (deep links, form submit, the fallback filter UI). Once Alpine boots, the
   mockup lists above take over and the selects are hidden — the class lands on
   <html> from the alpine:initialized listener, so a dead Alpine leaves them
   visible and usable. */
.js-alpine .app-filter-native { display: none; }

/* Alpine owns the compact controls. Without it the underlying fields remain
   directly usable instead of leaving a dead disclosure button on the page. */
html:not(.js-alpine) .app-constructor-alpine-only { display: none !important; }
html:not(.js-alpine) .app-constructor-dropdown--compact .app-constructor-dropdown__panel {
  position: static;
  display: block !important;
  margin-top: 10px;
  box-shadow: none;
}

/* Sample table — mono-caps head, dashed row separators, tint hover */
.app-ctab {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: var(--text-sm);   /* 13.5px */
}

/* Keep the preview columns stable while async rows arrive. Auto table layout
   used the skeleton/header widths first and then recomputed from real names,
   which produced a visible late shift on the main conversion screen. */
.app-ctab th:nth-child(1), .app-ctab th:nth-child(2), .app-ctab th:nth-child(8) { width: 32px; }
.app-ctab th:nth-child(4) { width: 118px; }
.app-ctab th:nth-child(5) { width: 110px; }
.app-ctab th:nth-child(6) { width: 165px; }
.app-ctab th:nth-child(7) { width: 62px; }

.app-ctab thead th {
  padding: 12px 8px 8px;
  border-bottom: 1px solid var(--color-border-control);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-strong);
  letter-spacing: var(--letter-spacing);
  text-transform: uppercase;
  color: var(--gray-600);
  text-align: left;
  white-space: nowrap;
}

.app-ctab tbody td {
  padding: 11px 8px;
  border-bottom: 1px dashed var(--color-border-control);
  vertical-align: top;
}

.app-ctab tbody tr:hover {
  background: var(--tint);
}

.app-ctab .app-ctab-num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted);
}

/* «Готовые базы»: the native search sits on the same line as H1. */
.app-bases-hero-line {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

.app-bases-search {
  display: flex;
  flex: 0 1 500px;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.app-bases-search__input {
  min-width: 0;
  background: var(--color-surface);
}

@media (max-width: 767px) {
  .app-bases-hero-line {
    align-items: stretch;
    flex-direction: column;
    gap: var(--space-4);
  }

  .app-bases-search {
    flex-basis: auto;
  }
}

/* Masked emails are long and unbreakable; wrapping them turned every row into
   three lines once the pick/★/⋯ columns joined. Clip instead — the full value
   is in the title attribute, and the real one ships in the XLSX anyway. */
.app-ctab .app-ctab-cat {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-ctab .app-ctab-cat { max-width: 150px; }

/* Row controls from the mockup: pick column, ★ shortlist, ⋯ menu, ⇅ headers */
.app-ctab .app-ctab-pick {
  width: 1%;
  padding-left: 6px;
  padding-right: 6px;
  white-space: nowrap;
}

.app-ctab-check {
  width: 18px;
  height: 18px;
  accent-color: var(--ink);
  cursor: pointer;
  vertical-align: middle;
}

.app-ctab-star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  background: none;
  padding: 0;
  font-size: var(--text-md);
  line-height: 1;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color var(--transition-fast);
}

.app-ctab-star:hover { color: var(--ink); }
.app-ctab-star.is-on { color: var(--accent-hover); }

.app-ctab-sort {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  cursor: pointer;
}

.app-ctab-sort--end { justify-content: flex-end; width: 100%; }
.app-ctab-sort:hover { color: var(--ink); }
.app-ctab-sort.is-on { color: var(--ink); }

.app-ctab-sort__mark {
  display: inline-block;
  position: relative;
  width: 7px;
  height: 11px;
  flex-shrink: 0;
  letter-spacing: var(--letter-spacing);
  text-transform: none;
}
.app-ctab-sort__mark::before,
.app-ctab-sort__mark::after {
  content: "";
  position: absolute;
  left: 0;
  width: 0;
  height: 0;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
}
.app-ctab-sort__mark::before {
  top: 0;
  border-bottom: 4px solid currentColor;
  opacity: 0.4;
}
.app-ctab-sort__mark::after {
  bottom: 0;
  border-top: 4px solid currentColor;
  opacity: 0.4;
}
.app-ctab-sort.is-on[data-dir="asc"] .app-ctab-sort__mark::before { opacity: 1; }
.app-ctab-sort.is-on[data-dir="asc"] .app-ctab-sort__mark::after { opacity: 0.18; }
.app-ctab-sort.is-on[data-dir="desc"] .app-ctab-sort__mark::after { opacity: 1; }
.app-ctab-sort.is-on[data-dir="desc"] .app-ctab-sort__mark::before { opacity: 0.18; }

.app-ctab-name {
  color: inherit;
  text-decoration: none;
}
.app-ctab-name:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.app-ctab tbody tr.is-picked { background: var(--tint); }

.app-ctab-menu { position: relative; }

.app-ctab-dots {
  border: 0;
  background: none;
  padding: 0 4px;
  font-size: var(--text-sm);
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
}

.app-ctab-dots:hover { color: var(--ink); }

.app-ctab-menu__pop {
  position: absolute;
  right: 0;
  top: 100%;
  z-index: var(--z-raised);
  min-width: 190px;
  padding: 4px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-control);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-mega);
}

.app-ctab-menu__item {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  text-align: left;
  font-size: var(--text-xs);
  color: var(--ink);
  white-space: nowrap;
  cursor: pointer;
}

.app-ctab-menu__item:hover { background: var(--tint); }

/* Bar above the table: what is selected / shortlisted right now */
.app-ctab-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 8px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--tint);
}

.app-ctab-bar__act {
  border: 0;
  background: none;
  padding: 0;
  font-size: var(--text-xs);
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--color-border-hover);
  cursor: pointer;
}

.app-ctab-bar__act:hover { text-decoration-color: var(--ink); }

/* Contact-channel controls with the coverage of the current selection. */
.app-cov-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--color-border-control);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-size: var(--text-xs);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.app-cov-row:hover {
  background: var(--tint);
}

/* Active channel = accent frame + wash. This is the one place a filter
   changes what the buyer pays for. */
.app-cov-row.is-on {
  border-color: var(--marker);
  background: var(--marker-tint);
}

.app-cov-row.is-on:hover {
  background: var(--marker-tint);
}

/* Mono count + share of the matched set, right-aligned */
.app-cov-row__num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-strong);
  color: var(--ink);
  white-space: pre;
  flex-shrink: 0;
}

.app-cov-row__box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border: 1.5px solid var(--gray-300);
  border-radius: var(--radius-xs);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-strong);
  line-height: 1;
  color: var(--color-text-inverse);
  background: var(--color-surface);
}

.app-cov-row.is-on .app-cov-row__box {
  border-color: var(--ink);
  background: var(--ink);
}

/* Quantity presets sit in a flex row; selected state is .app-btn.is-on. */

/* ===== Company card (redesign wave 1c) =====
   Mockup screen «Карточка компании»: white blocks on paper, mono for every
   machine-readable value (ИНН/ОГРН, contacts, dates), tint chips for the
   at-a-glance facts, one ink CTA in the contacts block. */

.app-company-block {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.375rem 1.625rem;
}

@media (max-width: 639px) {
  .app-company-block {
    padding: 1.125rem 1.125rem;
  }
}

.app-company-name {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-strong);
  letter-spacing: var(--letter-spacing);
  line-height: 1.15;
  color: var(--ink);
  margin: 0;
}

@media (max-width: 639px) {
  .app-company-name {
    font-size: var(--text-lg);
  }
}

/* ИНН · ОГРН — mono so the digits stay scannable and copy cleanly */
.app-company-ids {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted);
  margin-top: 0.5rem;
  overflow-wrap: anywhere;
}

.app-company-copy {
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-strong);
  color: var(--ink);
  background: none;
  border: none;
  padding: 0 0 0 0.375rem;
  cursor: pointer;
}

.app-company-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.app-company-chip {
  font-size: var(--text-xs);
  color: var(--muted);
  background: var(--tint);
  border-radius: var(--radius-xs);
  padding: 0.3125rem 0.625rem;
}

.app-company-chip a,
a.app-company-chip {
  color: inherit;
  text-decoration: none;
}

.app-company-chip a:hover,
a.app-company-chip:hover {
  color: var(--ink);
}

.app-company-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-top: 1.125rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}

.app-company-action {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.875rem;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-strong);
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.app-company-action:hover {
  background: var(--tint);
}

/* Contacts money block: masked values are masked SERVER-side (mask.go), so
   they render as plain mono text — the mockup shows the shape of the number
   on purpose, it is what makes the unlock worth 25 ₽. */
.app-company-mono-contacts {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.8;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.app-company-mono-contacts--open {
  font-size: var(--text-md);
  line-height: 1.85;
  color: var(--ink);
}

.app-company-mono-contacts a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--color-border-hover);
}

.app-company-mono-contacts a:hover {
  color: var(--ink);
}

/* Key/value rows — two columns on desktop, one on narrow screens */
.app-company-rows {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 2rem;
  font-size: var(--text-sm);
}

@media (max-width: 767px) {
  .app-company-rows {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

.app-company-rows--single {
  grid-template-columns: 1fr;
}

.app-company-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.6875rem 0;
  border-bottom: 1px solid var(--color-border);
  min-width: 0;
}

.app-company-row__k {
  color: var(--muted);
  white-space: nowrap;
}

.app-company-row__v {
  font-weight: var(--font-weight-strong);
  text-align: right;
  color: var(--ink);
  min-width: 0;
  overflow-wrap: anywhere;
}

.app-company-row__v a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--color-border-hover);
}

.app-company-row__v--num {
  font-variant-numeric: tabular-nums;
}

/* Wide rows (address, ОКВЭД, руководитель) span both columns */
.app-company-row--wide {
  grid-column: 1 / -1;
}

/* Timeline-ish rows: mono date + event text */
.app-company-fact {
  display: flex;
  gap: 0.75rem;
  padding: 0.5625rem 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--ink);
}

.app-company-fact:last-child {
  border-bottom: none;
}

/* Label + value variant of the same row, used by the «Реквизиты» block on
   /contacts (the mockup's separate requisites screen lives there — /requisites
   301s to it). Same dashed rhythm as the company card's facts. */
.app-company-facts {
  margin: 0;
}

.app-company-fact__k {
  flex: 0 0 190px;
  color: var(--muted);
}

.app-company-fact__v {
  flex: 1;
  min-width: 0;
  font-weight: var(--font-weight-body);
  overflow-wrap: anywhere;
}

@media (max-width: 639px) {
  .app-company-fact {
    flex-direction: column;
    gap: 0.2rem;
  }

  .app-company-fact__k {
    flex: none;
  }
}

/* Outlined status pill — the mockup's «Действует». Ink outline, no fill:
   an active company is the default state and should not shout. */
.app-company-status {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-strong);
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 0.3125rem 0.6875rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
/* Key public interaction contract: every dense control remains operable by keyboard. */
.app-filter-list-row:focus-visible,
.app-ctab-star:focus-visible,
.app-ctab-sort:focus-visible,
.app-ctab-dots:focus-visible,
.app-ctab-menu__item:focus-visible,
.app-ctab-bar__act:focus-visible,
.app-ctab-name:focus-visible,
.app-company-copy:focus-visible,
.app-company-action:focus-visible,
.app-company-chip a:focus-visible,
a.app-company-chip:focus-visible,
.app-company-mono-contacts a:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
}

.app-ctab-th--end,
.app-ctab-num--end { text-align: right; }
.app-ctab-num--ink { color: var(--ink); }
.app-constructor-quantity-range { accent-color: var(--ink); }

/* Company record details keep their fact-first hierarchy without inline styling. */
.app-company-contact-state--open,
.app-company-contact-access-note,
.app-company-report-status { color: var(--ink); }

.app-company-contact-state--masked,
.app-company-contact-type,
.app-company-map-meta { color: var(--muted); }

.app-company-inline-link { text-decoration-color: var(--color-border-hover); }
.app-company-inline-link:hover { text-decoration-color: currentColor; }
.app-company-inline-link:focus-visible {
  outline: none;
  border-radius: var(--radius-xs);
  box-shadow: var(--ring-focus);
}

.app-company-map {
  height: 18.75rem;
  border: 1px solid var(--color-border);
}
/* Site shell uses shared tokens instead of static inline declarations. */
.app-site-header {
  background: var(--color-surface);
  border-color: var(--color-border);
}

.app-site-header__inner { height: 4rem; }
.app-text-muted { color: var(--muted); }
.app-underline-link { text-decoration-color: var(--color-border-hover); }
.app-underline-link:hover { text-decoration-color: currentColor; }
.app-underline-link:focus-visible {
  outline: none;
  border-radius: var(--radius-xs);
  box-shadow: var(--ring-focus);
}

.app-header-mobile-summary { list-style: none; }.app-header-search__symbol {
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1;
}
.app-header-mobile-overlay { background: var(--overlay); }

/* Compact two-level header: one dominant search control, three labelled tasks.
   Solid paint + isolation so constructor filters cannot slide over the bar on
   scroll. Height token lives in tokens.css. */

.app-site-header {
  isolation: isolate;
  z-index: var(--z-sticky);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}

.app-site-header__inner {
  height: 4rem;
  gap: 16px;
}

.app-header-search {
  display: flex;
  width: 100%;
  max-width: none;
  height: var(--control-height);
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: var(--tint);
  padding: 0 6px 0 12px;
  transition: border-color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast);
}

.app-header-search:focus-within {
  border-color: var(--ink);
  background: var(--color-surface);
  box-shadow: var(--ring-focus);
}

.app-header-search__icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: var(--muted);
}

.app-header-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 0;
  color: var(--ink);
  font-size: var(--text-sm);
}

.app-header-search input:focus { box-shadow: none; }

.app-header-search__submit {
  display: inline-flex;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--accent-hover);
  color: var(--color-text-inverse);
}

.app-header-search__submit:hover {
  background: color-mix(in srgb, var(--accent-hover) 84%, var(--ink));
}

.app-header-search__submit svg { width: 17px; height: 17px; }

.app-site-header .app-mega__trigger {
  min-height: var(--control-height);
  border-radius: var(--radius-md);
  background: var(--ink-deep);
  color: var(--color-text-inverse);
  font-weight: var(--font-weight-strong);
}

.app-site-header .app-mega__trigger:hover,
.app-site-header .app-mega[open] .app-mega__trigger {
  background: var(--ink-hover);
  color: var(--color-text-inverse);
}

.app-header-action {
  position: relative;
  display: inline-flex;
  width: 68px;
  min-height: var(--control-height);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-body);
  line-height: 1.15;
  list-style: none;
  white-space: nowrap;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.app-header-action::-webkit-details-marker { display: none; }
.app-header-action:hover { background: var(--tint); color: var(--ink); }
.app-header-action__icon { display: inline-flex; width: 21px; height: 21px; }
.app-header-action__icon svg { width: 100%; height: 100%; }

.app-header-account { position: relative; }
.app-header-account__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: var(--z-modal);
  width: 180px;
  border: 1px solid var(--color-border-control);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-mega);
  padding: 6px;
}

.app-header-account:not([open]) .app-header-account__panel { display: none; }
.app-header-account__panel a,
.app-header-account__panel button {
  display: block;
  width: 100%;
  border-radius: var(--radius-sm);
  padding: 10px 11px;
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
  text-align: left;
}
.app-header-account__panel a:hover,
.app-header-account__panel button:hover { background: var(--tint); color: var(--ink); }

.app-site-header__subnav {
  border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  background: var(--color-surface);
}

.app-header-subnav {
  display: flex;
  height: 38px;
  align-items: center;
  gap: 26px;
}

.app-header-subnav__item {
  position: relative;
  display: inline-flex;
  height: 38px;
  align-items: center;
  gap: 5px;
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-body);
  list-style: none;
  white-space: nowrap;
}
.app-header-subnav__item::-webkit-details-marker { display: none; }
.app-header-subnav__item:hover,
.app-header-subnav__item.is-active { color: var(--ink); }
.app-header-subnav__item.is-active::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: var(--marker);
}

.app-header-subnav__dropdown {
  position: absolute;
  top: calc(100% + 1px);
  left: 0;
  z-index: var(--z-modal);
  width: 330px;
  border: 1px solid var(--color-border-control);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-mega);
  padding: 8px;
}
.app-header-subnav details:not([open]) .app-header-subnav__dropdown { display: none; }
.app-header-subnav__group { padding: 5px; }
.app-header-subnav__group .app-mono-label { padding: 4px 7px; }
.app-header-subnav__group a {
  display: block;
  border-radius: var(--radius-sm);
  padding: 8px 7px;
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
}
.app-header-subnav__group a:hover { background: var(--tint); color: var(--ink); }

@media (min-width: 1024px) {
  .app-site-header__inner { height: 68px; }
  .app-mega__panel { top: 68px; max-height: calc(100vh - 68px); }
  .app-mega__scrim { top: 68px; }
}

@media (min-width: 1024px) {
  .app-header-action { width: 60px; }
  .app-header-subnav { gap: 20px; }
}
/* Панель заказа: при переходе на шаг 2 мобильный скролл ведёт к её верху.
   Отступ — под ДВЕ липкие полосы: шапку и панель фильтров-пиллов; при 76px
   они накрывали «← к сегменту». */
#constructor-step3 {
  scroll-margin-top: calc(var(--app-header-height) + 16px);
}

/* Footer shell shares the same paper and quiet-link treatment as the header. */
.app-site-footer {
  background: var(--paper);
  border-color: var(--color-border);
}
.app-site-footer__inner { padding-block: var(--space-10); }
.app-site-footer__nav {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-6);
}
.app-footer-group > summary {
  list-style: none;
}
.app-footer-group > summary::-webkit-details-marker { display: none; }
.app-footer-group > summary > span { display: none; }
.app-footer-group .app-footer-heading { margin-bottom: var(--space-3); }
.app-site-footer__legal { border-color: var(--color-border); }
.app-footer-link { text-decoration-color: var(--muted); }
.app-footer-link:hover { text-decoration-color: currentColor; }
.app-footer-link:focus-visible {
  outline: none;
  border-radius: var(--radius-xs);
  box-shadow: var(--ring-focus);
}
/* Constructor 2026: compact faceted builder + sticky quote.
   The controls stay the single source of truth; preview opens in one dialog. */
.app-filter {
  position: static;
  width: 100%;
  max-height: none;
  z-index: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: none;
  overflow: visible;
}

.app-filter .app-filter-pane {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: visible;
}

.app-filter #filter-geo { order: 1; }
.app-filter #filter-cat { order: 2; }
.app-filter #filter-firm { order: 3; }
.app-filter #filter-fin { order: 5; }

.app-constructor-filter-section {
  display: block !important;
  padding: 24px 24px 24px;
  border-bottom: 0;
  scroll-margin-top: calc(var(--app-header-height) + 12px);
}

.app-constructor-filter-section:last-child {
  border-bottom: 0;
}

.app-constructor-filter-title {
  margin-bottom: 12px;
  color: var(--ink);
  font-size: var(--text-md);
  font-weight: var(--font-weight-strong);
  line-height: 1.25;
  letter-spacing: var(--letter-spacing);
}

.app-constructor-advanced__trigger {
  display: none;
  width: 100%;
  min-height: var(--control-height);
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--ink);
  text-align: left;
}

.app-constructor-advanced__trigger > span:first-child {
  display: grid;
  gap: 2px;
}

.app-constructor-advanced__trigger strong {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-strong);
}

.app-constructor-advanced__trigger small {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.app-constructor-advanced__mark {
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-body);
  transition: transform var(--transition-fast);
}

.app-constructor-advanced.is-open .app-constructor-advanced__mark {
  transform: rotate(45deg);
}

.app-constructor-budget-toggle {
  display: inline-flex;
  min-height: var(--control-height);
  align-items: center;
}

.app-constructor-quantity-range {
  min-height: 28px;
}

.app-constructor-filter-section .app-form-field {
  min-height: var(--control-height);
  border-color: var(--color-border-hover);
  background: var(--color-surface);
}

.app-constructor-filter-section .app-form-field:focus {
  border-color: var(--accent);
  box-shadow: var(--ring-focus);
}

.app-constructor-filter-section .app-filter-list {
  margin-top: 8px;
  padding: 8px;
  border: 1px solid var(--color-border-control);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.app-constructor-filter-section .app-filter-native {
  margin-top: 16px;
}

.app-constructor-filter-section .app-chip--choice {
  min-height: var(--control-height);
  border-radius: var(--radius-md);
}

.app-constructor-filter-section .app-chip--choice.is-selected {
  border-color: var(--accent);
  background: var(--accent-wash);
  color: var(--ink);
}

.app-constructor-export-note {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  line-height: 1.4;
}

.app-constructor-export-note span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--color-text-inverse);
  font-weight: var(--font-weight-strong);
}

#constructor-step3 {
  min-height: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-elevated);
}

#constructor-count {
  font-size: var(--text-xl);
  letter-spacing: var(--letter-spacing);
}

#constructor-price {
  font-size: var(--text-xl);
  letter-spacing: var(--letter-spacing);
}

.app-constructor-price-currency {
  font-size: 0.55em;
  font-weight: var(--font-weight-strong);
  letter-spacing: var(--letter-spacing);
}

.app-constructor-filter-receipt {
  border-top: 1px solid var(--color-border);
  padding-top: 12px;
}

.app-constructor-filter-receipt__rows {
  display: grid;
  gap: 7px;
}

.app-constructor-filter-receipt__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--text-xs);
}

.app-constructor-filter-receipt__row > span:first-child {
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.app-constructor-filter-receipt__row > span:last-child {
  color: var(--ink);
  font-weight: var(--font-weight-strong);
  text-align: right;
  overflow-wrap: anywhere;
}

.app-constructor-preview-dialog .app-ctab {
  border-radius: var(--radius-md);
  overflow: hidden;
}

@media (max-width: 1023px) {
  .app-filter #filter-cat { order: 1; }
  .app-filter #filter-geo { order: 2; }

  .app-constructor-shell {
    display: block;
  }

  .app-filter {
    position: static;
    width: 100%;
    height: auto;
    max-height: none;
    z-index: auto;
    border: 1px solid var(--color-border-control);
    border-radius: var(--radius-lg);
  }

  .app-filter .app-filter-pane {
    padding: 0;
    overflow: visible;
  }

  .app-constructor-filter-section {
    padding: 20px 16px 24px;
  }

  #constructor-results {
    display: flex !important;
    flex-direction: column;
    min-height: 0;
    margin-top: 16px;
  }

  .app-constructor-shell.is-mobile-checkout {
    padding-top: 12px;
  }

  .app-constructor-shell.is-mobile-checkout > .app-page-hero--workbench,
  .app-constructor-shell.is-mobile-checkout > .app-filter {
    display: none;
  }

  .app-constructor-shell.is-mobile-checkout > #constructor-results {
    margin-top: 0;
  }

  .app-constructor-advanced__desktop-title,
  .app-constructor-value {
    display: none;
  }

  .app-constructor-advanced__trigger {
    display: flex;
  }

  .app-constructor-advanced__body {
    display: none;
    padding-top: 14px;
  }

  .app-constructor-advanced.is-open .app-constructor-advanced__body,
  html:not(.js-alpine) .app-constructor-advanced__body {
    display: block;
  }

  .app-constructor-step1-summary,
  .app-constructor-step1-actions,
  [data-constructor-step1-action] {
    display: none !important;
  }
}

@media (max-width: 1023px) {
  .app-constructor-filter-section .app-chip--choice,
  #constructor-step3 .app-btn {
    min-height: var(--control-height);
  }

  .app-constructor-shell .text-neutral-400,
  .app-constructor-shell .text-neutral-500,
  .app-constructor-filter-section .app-form-help {
    color: var(--color-text-secondary);
  }

  #constructor-results .app-ctab-pick {
    min-width: 44px;
  }

  #constructor-results .app-ctab-star,
  #constructor-results .app-ctab-dots {
    width: 44px;
    height: 44px;
  }
}
@media (max-width: 1023px) {
  #constructor-order-btn-mobile {
    min-height: var(--control-height);
  }
}

.app-constructor-filter-section {
  padding: 20px 24px;
  scroll-margin-top: calc(var(--app-header-height) + 16px);
}

.app-constructor-filter-title {
  margin: 0 0 12px;
  font-size: var(--text-md);
  font-weight: var(--font-weight-strong);
}

.app-constructor-dropdown { position: relative; }

.app-constructor-dropdown--compact { max-width: 32rem; }

.app-filter #filter-firm {
  padding-top: 18px;
  padding-bottom: 18px;
}

/* Two form types and four contact channels share the same quiet toggle.
   Native checkboxes remain in the focus order; the track is only its visual
   representation. */
.app-constructor-switch-list {
  display: grid;
  max-width: none;
  gap: 8px;
}

.app-constructor-switches-grid {
  display: grid;
  width: 100%;
  max-width: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.app-constructor-switches-grid .app-constructor-switch-list {
  max-width: none;
}

/* The two legal-form controls make the first column. Contact channels use the
   remaining 2×2 cells; equal columns keep the whole block on one grid. */
.app-constructor-switches-grid > .app-constructor-switch-list:first-child {
  grid-column: 1;
}

.app-constructor-switches-grid > .app-constructor-switch-list--contacts {
  grid-column: 2 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
}

.app-constructor-switch-row,
.app-constructor-contact-switch {
  position: relative;
  display: grid;
  align-items: center;
  min-height: var(--control-height);
  border: 1px solid var(--color-border-control);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--ink);
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.app-constructor-switch-row {
  grid-template-columns: minmax(0, 1fr) 38px;
  gap: 12px;
  padding: 0 10px 0 12px;
}

.app-constructor-switch-row:hover,
.app-constructor-contact-switch:hover {
  border-color: var(--color-border-hover);
  background: var(--tint);
}

.app-constructor-switch-row.is-on,
.app-constructor-contact-switch.is-on {
  border-color: var(--accent);
  background: var(--accent-wash);
}

.app-constructor-switch-row__label,
.app-constructor-contact-switch__label {
  min-width: 0;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-strong);
}

.app-constructor-switch-row__input {
  position: absolute;
  top: 50%;
  right: 10px;
  z-index: 1;
  width: 38px;
  height: 24px;
  margin: 0;
  opacity: 0;
  transform: translateY(-50%);
  cursor: pointer;
}

.app-constructor-switch-row__track {
  position: relative;
  display: block;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: var(--gray-300);
  transition: background-color var(--transition-fast);
}

.app-constructor-switch-row__track::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-surface);
  box-shadow: 0 1px 2px rgb(0 0 0 / 18%);
  content: "";
  transition: transform var(--transition-fast);
}

.app-constructor-switch-row__input:checked + .app-constructor-switch-row__track {
  background: var(--accent);
}

.app-constructor-switch-row__input:checked + .app-constructor-switch-row__track::after {
  transform: translateX(16px);
}

.app-constructor-switch-row__input:focus-visible + .app-constructor-switch-row__track {
  box-shadow: var(--ring-focus);
}

.app-constructor-switch-list--contacts { gap: 8px; }

.app-constructor-contact-switch {
  display: flex;
  gap: 0;
  padding: 0 10px 0 12px;
}

.app-constructor-contact-switch__label {
  order: 1;
  flex: 0 1 auto;
  overflow: hidden;
  cursor: pointer;
  letter-spacing: -0.015em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-constructor-contact-switch > .app-info-tip {
  order: 2;
  flex: 0 0 14px;
  margin-left: 6px;
}

.app-constructor-contact-switch__metric {
  order: 3;
  flex: 0 0 auto;
  margin-left: auto;
  padding-left: 12px;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: var(--font-weight-body);
  text-align: right;
  white-space: nowrap;
}

.app-constructor-contact-switch > .app-constructor-switch-row__track {
  order: 4;
  flex: 0 0 38px;
  margin-left: 16px;
}

/* Tiny help affordance. Hover/focus shows the hint; a tap keeps it visible
   through .is-open so the same control works on touch screens. */
.app-info-tip {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
}

.app-info-tip__trigger {
  display: inline-grid;
  width: 14px;
  height: 14px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--color-border-control);
  border-radius: 50%;
  background: transparent;
  color: var(--color-text-muted);
  cursor: help;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: var(--font-weight-strong);
  line-height: 1;
}

/* Keep the visible glyph tiny while giving touch users a real target. */
@media (max-width: 1023px) {
  .app-info-tip__trigger {
    width: 32px;
    height: 32px;
    margin: -9px;
  }
}

.app-info-tip__trigger:hover,
.app-info-tip__trigger:focus-visible {
  border-color: var(--ink);
  color: var(--ink);
  outline: none;
}

.app-info-tip__trigger:focus-visible { box-shadow: var(--ring-focus); }

.app-info-tip__content {
  position: absolute;
  z-index: 3;
  bottom: calc(100% + 8px);
  left: 50%;
  width: max-content;
  max-width: 190px;
  padding: 8px 10px;
  border-radius: var(--radius-xs);
  background: var(--ink-deep);
  box-shadow: var(--shadow-elevated);
  color: var(--color-text-on-dark);
  font-size: var(--text-xs);
  line-height: 1.35;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
  visibility: hidden;
}

.app-info-tip:hover .app-info-tip__content,
.app-info-tip:focus-within .app-info-tip__content,
.app-info-tip.is-open .app-info-tip__content {
  opacity: 1;
  transform: translate(-50%, 0);
  visibility: visible;
}

@media (max-width: 639px) {
  .app-constructor-switches-grid {
    grid-template-columns: 1fr;
  }

  .app-constructor-switches-grid > .app-constructor-switch-list:first-child,
  .app-constructor-switches-grid > .app-constructor-switch-list--contacts {
    grid-column: auto;
  }

  .app-constructor-switches-grid > .app-constructor-switch-list:first-child {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .app-constructor-switches-grid > .app-constructor-switch-list--contacts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0;
  }

  .app-constructor-switch-list--contacts .app-constructor-contact-switch__metric,
  .app-constructor-switch-list--contacts .app-info-tip {
    display: none;
  }

  .app-constructor-switch-list--contacts .app-constructor-contact-switch > .app-constructor-switch-row__track {
    margin-left: auto;
  }
}

@media (max-width: 420px) {
  .app-constructor-switches-grid > .app-constructor-switch-list--contacts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.app-constructor-dropdown__trigger {
  display: flex;
  width: 100%;
  min-height: var(--control-height);
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--color-border-hover);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: 0 14px;
  color: var(--ink);
  font: inherit;
  text-align: left;
}

.app-constructor-dropdown__trigger > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-constructor-dropdown__trigger > span:last-child {
  flex: 0 0 auto;
  color: var(--color-text-muted);
  font-size: var(--text-md);
}

.app-constructor-dropdown__trigger:hover { border-color: var(--color-border-hover); background: var(--tint); }
.app-constructor-dropdown__trigger:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring-focus);
}

.app-constructor-dropdown__panel {
  position: absolute;
  z-index: var(--z-raised);
  top: calc(100% + 8px);
  right: 0;
  left: 0;
  overflow-y: auto;
  border: 1px solid var(--color-border-control);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-elevated);
}

.app-constructor-dropdown__panel--choices { padding: 6px; }
.app-constructor-dropdown__panel--fields { padding: 14px; }
.app-constructor-dropdown__panel.app-filter-list {
  position: static;
  grid-template-columns: minmax(0, 1fr);
  max-height: 296px;
  margin-top: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: none;
}

.app-constructor-dropdown__choice {
  display: flex;
  min-height: 42px;
  align-items: center;
  gap: 10px;
  border-radius: var(--radius-xs);
  padding: 0 8px;
  color: var(--ink);
  cursor: pointer;
  font-size: var(--text-sm);
}

.app-constructor-dropdown__choice:hover { background: var(--tint); }
.app-constructor-dropdown__choice input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent);
}

.app-constructor-searchbox {
  position: relative;
}

.app-constructor-searchbox > svg {
  position: absolute;
  top: 50%;
  left: 13px;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  pointer-events: none;
}

.app-constructor-searchbox .app-form-field {
  width: 100%;
  min-height: var(--control-height);
  padding-right: 68px;
  padding-left: 42px;
  border-radius: var(--radius-md);
  font-family: inherit;
}

.app-constructor-searchbox__status {
  position: absolute;
  top: 50%;
  right: 13px;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.app-activity-results .app-filter-list-row {
  min-height: var(--control-height);
  border-radius: var(--radius-md);
}

.app-activity-results .app-filter-list-row__sub {
  margin-left: 6px;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.app-filter-selections {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
}

.app-filter-selection-chip {
  display: inline-flex;
  max-width: 100%;
  min-height: 28px;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--color-action-ghost-border);
  border-radius: var(--radius-pill);
  background: var(--accent-wash);
  padding: 3px 5px 3px 10px;
  color: var(--ink);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-strong);
}

.app-filter-selection-chip__code {
  flex: 0 0 auto;
  border-radius: var(--radius-xs);
  background: var(--accent-wash-strong);
  padding: 2px 6px;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-strong);
}

.app-filter-selection-chip__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-filter-selection-chip button {
  display: inline-flex;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  color: var(--ink);
  font-size: var(--text-sm);
}

.app-filter-selection-chip button:hover { background: var(--accent-wash-strong); color: var(--ink); }
.app-filter-selection-chip button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.app-filter-selections__clear {
  border-radius: var(--radius-xs);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.app-filter-selections__clear:hover { color: var(--ink); }
.app-filter-selections__clear:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.app-filter-list-row__code {
  color: var(--accent-hover);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-strong);
}

.app-filter-list-row--okved .app-filter-list-row__name {
  overflow: visible;
  line-height: 1.35;
  text-overflow: clip;
  white-space: normal;
}

.app-constructor-filter-section > .app-filter-hint,
.app-constructor-filter-section > .app-form-help {
  display: none;
}

#filter-geo .app-constructor-dropdown__panel.app-filter-list { max-height: 296px; }

.app-filter-selection-chip__sub {
  color: var(--color-text-muted);
  font-weight: var(--font-weight-body);
}

#constructor-step3 {
  scroll-margin-top: calc(var(--app-header-height) + 16px);
}

@media (max-width: 1023px) {
  .app-constructor-filter-section {
    padding: 16px 16px;
  }

  .app-constructor-searchbox .app-form-field {
    min-height: var(--control-height);
  }

}

.app-constructor-shell .app-mono-label {
  letter-spacing: var(--letter-spacing);
}

/* Constructor compact workspace + preview dialog. */
.app-constructor-preview-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.app-constructor-preview-dialog {
  display: flex;
  width: min(calc(100vw - 48px), 1440px);
  height: min(calc(100svh - 48px), 900px);
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-border-control);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-mega);
}

.app-constructor-preview-dialog__header {
  display: flex;
  min-height: 68px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--color-border);
  padding: 12px 16px 12px 20px;
}

.app-constructor-preview-dialog__title {
  color: var(--ink);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-strong);
  line-height: 1.2;
  letter-spacing: var(--letter-spacing);
}

.app-constructor-preview-dialog__lead {
  margin-top: 4px;
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-constructor-preview-dialog__close {
  display: inline-flex;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: var(--text-xl);
  line-height: 1;
}

.app-constructor-preview-dialog__close:hover { background: var(--tint); }
.app-constructor-preview-dialog__close:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
}

.app-constructor-preview-dialog__body {
  min-height: 0;
  flex: 1 1 auto;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 16px 20px 0;
}

.app-constructor-preview-dialog .app-ctab {
  min-width: 860px;
}

.app-constructor-preview-contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 5px;
}

.app-constructor-preview-contacts > span {
  border-radius: var(--radius-pill);
  background: var(--accent-wash);
  color: var(--accent-hover);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: var(--font-weight-strong);
  line-height: 1;
  padding: 4px 6px;
}

.app-constructor-preview-dialog .app-ctab thead th {
  position: sticky;
  top: 0;
  z-index: var(--z-base);
  background: var(--paper);
}

.app-constructor-preview-pagination {
  position: sticky;
  bottom: 0;
  z-index: var(--z-base);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  padding: 10px 0 12px;
}

.app-constructor-coverage {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.app-constructor-quantity {
  margin-top: 16px;
  border-top: 1px solid var(--color-border);
  padding-top: 16px;
}

.app-constructor-metrics-presets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.app-constructor-metric-group {
  display: grid;
  gap: 8px;
}

.app-constructor-metric-group__title {
  display: flex;
  align-items: center;
  gap: 6px;
}

.app-constructor-metric-presets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.app-constructor-metric-preset {
  min-width: 0;
  min-height: var(--control-height);
  padding-inline: 8px;
  font-size: var(--text-sm);
  white-space: nowrap;
}

.app-constructor-metric-preset:disabled {
  border-color: var(--color-border);
  background: var(--tint);
  color: var(--color-text-muted);
  cursor: not-allowed;
  opacity: 0.65;
}

.app-constructor-value {
  margin-top: 24px;
  border-radius: var(--radius-md);
  background: var(--tint);
  padding: 16px;
}

.app-constructor-value__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.app-constructor-value__title {
  margin: 0;
  color: var(--ink);
  font-size: var(--text-md);
  font-weight: var(--font-weight-strong);
  line-height: 1.25;
}

.app-constructor-value__preview {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--color-text-secondary);
  cursor: pointer;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-body);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.app-constructor-value__preview:hover { color: var(--ink); }
.app-constructor-value__preview:focus-visible {
  border-radius: var(--radius-xs);
  outline: none;
  box-shadow: var(--ring-focus);
}
.app-constructor-value__preview:disabled { cursor: wait; opacity: 0.5; }

.app-constructor-value__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.app-constructor-value-card {
  min-width: 0;
  min-height: 132px;
  border: 1px solid var(--color-border-control);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: 14px;
}

.app-constructor-value-card__icon {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  margin-bottom: 12px;
  border-radius: 10px;
  background: var(--accent-wash);
  color: var(--accent-hover);
}

.app-constructor-value-card__icon svg {
  width: 18px;
  height: 18px;
}

.app-constructor-value-card h3 {
  margin: 0;
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-strong);
  line-height: 1.25;
}

.app-constructor-value-card p {
  margin: 6px 0 0;
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
  line-height: 1.45;
}

@media (min-width: 1024px) {
  .app-constructor-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 344px;
    column-gap: 24px;
    align-items: stretch;
  }

  .app-constructor-shell > .app-page-hero--workbench {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .app-constructor-shell > .app-filter {
    grid-column: 1;
    grid-row: 2;
  }

  .app-constructor-shell > #constructor-results {
    display: contents;
    min-height: 0;
  }

  .app-constructor-order-column {
    grid-column: 2;
    grid-row: 2;
    align-self: stretch;
    width: auto !important;
  }

  .app-constructor-order-column > .sticky,
  .app-constructor-order-sticky {
    top: calc(var(--app-header-height) + 16px);
    z-index: var(--z-base);
    height: 100%;
  }

  .app-filter .app-filter-pane {
    /* The builder is read and filled out from top to bottom. Keeping every
       facet in the same column avoids the former chessboard of unrelated
       controls and makes the next decision obvious. */
    display: flex;
    flex-direction: column;
  }

  #filter-firm .app-form-help,
  #filter-contact .app-form-help {
    display: none;
  }

  .app-constructor-filter-section {
    padding: 20px 24px;
  }

  .app-constructor-filter-title {
    margin-bottom: 12px;
  }

  /* Every visible group follows the same available desktop width. */
  #filter-firm .app-form-field,
  #filter-contact .app-constructor-coverage {
    max-width: 32rem;
  }

  #filter-fin .app-constructor-metrics-presets {
    width: 100%;
    max-width: none;
  }

  #constructor-step3 {
    height: 100%;
    padding: 16px;
  }

  .app-constructor-coverage {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .app-constructor-coverage .app-cov-row {
    min-height: var(--control-height);
    padding: 9px 10px;
  }

  .app-constructor-quantity {
    margin-top: 10px;
    padding-top: 10px;
  }
}

@media (max-width: 1023px) {
  .app-constructor-order-column {
    order: -1;
    width: 100%;
  }
}

@media (max-width: 639px) {
  .app-constructor-metrics-presets {
    grid-template-columns: 1fr;
  }
  .app-constructor-value { margin-top: 20px; padding: 14px; }
  .app-constructor-value__header { align-items: flex-start; flex-direction: column; gap: 6px; }
  .app-constructor-value__cards { grid-template-columns: 1fr; }
  .app-constructor-value-card { min-height: 0; }
  .app-constructor-preview-overlay { padding: 0; }

  .app-constructor-preview-dialog {
    width: 100%;
    height: 100svh;
    border: 0;
    border-radius: 0;
  }

  .app-constructor-preview-dialog__header {
    min-height: 64px;
    padding: 10px 12px 10px 16px;
  }

  .app-constructor-preview-dialog__lead { white-space: normal; }

  .app-constructor-preview-dialog__close {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }

  .app-constructor-preview-dialog__body {
    padding: 12px 16px 0;
  }

  .app-constructor-preview-pagination {
    align-items: flex-start;
    flex-direction: column;
    padding-bottom: 10px;
  }
}

@media (max-width: 767px) {
  .app-site-footer__inner { padding-block: var(--space-6); }
  .app-site-footer__description { max-width: none; line-height: 1.5; }
  .app-site-footer__contacts { display: flex; flex-wrap: wrap; gap: 4px 20px; }
  .app-site-footer__nav {
    display: block;
    border-top: 1px solid var(--color-border-control);
  }
  .app-footer-group { border-bottom: 1px solid var(--color-border-control); }
  .app-footer-group > summary {
    display: flex;
    min-height: var(--control-height);
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
  }
  .app-footer-group > summary > span {
    display: inline-block;
    color: var(--color-text-muted);
    font-size: var(--text-lg);
    font-weight: var(--font-weight-body);
    transition: transform var(--transition-fast);
  }
  .app-footer-group[open] > summary > span { transform: rotate(45deg); }
  .app-footer-group .app-footer-heading { margin: 0; }
  .app-footer-group__links { padding: 0 0 var(--space-3); }
  .app-footer-nav { min-height: 36px; padding-block: 8px; }
  .app-site-footer__legal { margin-top: var(--space-6); padding-top: var(--space-4); }
}

@media (min-width: 768px) {
  .app-constructor-preview-contacts { display: none; }
  .app-footer-group > summary { pointer-events: none; }
}

@media (prefers-reduced-motion: reduce) {
  .app-constructor-preview-overlay { transition: none !important; }
}