/**
 * AstroQ Core · responsive matrix.
 * xl >1023 · lg ≤1023 · tb ≤860 · md ≤767 · sm ≤639 · xs ≤479 · 2xs ≤390
 */

/* ═══════════════════════════════════════════════════════════════════════════
   Форма «Момент вопроса» — 7 брейкпоинтов, только токены .input-section
   ═══════════════════════════════════════════════════════════════════════════ */

/* lg ≤1023 */
@media (max-width: 1023px) {
  .input-section {
    --form-shell-margin-bottom: 28px;
    --form-title-size: clamp(1.38rem, 2.1vw, 1.72rem);
  }
}

/* tb ≤860 */
@media (max-width: 860px) {
  .input-section {
    --form-gap: 14px;
    --form-stack: 13px;
    --form-shell-pad-x: clamp(20px, 3.5vw, 36px);
  }
}

/* md ≤767 */
@media (max-width: 767px) {
  .input-section {
    --form-shell-pad-top: 26px;
    --form-shell-pad-x: 20px;
    --form-shell-pad-bottom: 22px;
    --form-gap: 14px;
    --form-stack: 13px;
    --form-intro-mb: 20px;
    --form-intro-pb: 18px;
    --form-title-size: 1.48rem;
    --form-fc-size: 1rem;
    --form-fc-size-sm: 0.9rem;
    --form-control-pad-y: 11px;
    --form-control-pad-x: 15px;
    --form-area-min-h: 84px;
    --form-area-pad-y: 14px;
    --form-area-pad-x: 16px;
    --form-option-min-h: 32px;
    --form-suggest-max-h: min(42vh, 220px);
    --form-btn-size: 1.1rem;
    --form-btn-min-h: 46px;
  }
}

/* sm ≤639 */
@media (max-width: 639px) {
  .input-section {
    --form-shell-width: calc(100% - 1rem);
    --form-shell-pad-top: 24px;
    --form-shell-pad-x: 18px;
    --form-shell-pad-bottom: 20px;
    --form-gap: 12px;
    --form-stack: 12px;
    --form-field-pad-y: 11px;
    --form-field-pad-x: 14px;
    --form-btn-size: 1.08rem;
    --form-btn-pad: 13px;
    --form-btn-min-h: 48px;
  }

  .input-section .form-row,
  .input-section .form-row--datetime,
  .input-section .coordinates-row.visible {
    grid-template-columns: 1fr;
  }

  #chartForm .suggest-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
  }
}

/* xs ≤479 */
@media (max-width: 479px) {
  .input-section {
    --form-shell-width: calc(100% - 0.75rem);
    --form-shell-radius: 14px;
    --form-shell-margin-y: 12px;
    --form-shell-margin-bottom: 20px;
    --form-shell-pad-top: 20px;
    --form-shell-pad-x: 14px;
    --form-shell-pad-bottom: 18px;
    --form-gap: 10px;
    --form-stack: 11px;
    --form-field-pad-x: 12px;
    --form-title-size: 1.32rem;
    --form-intro-mb: 18px;
    --form-intro-pb: 16px;
    --form-label-size: 0.66rem;
    --form-label-mb: 6px;
    --form-fc-size-sm: 0.86rem;
    --form-area-min-h: 76px;
    --form-radius: 11px;
    --form-option-min-h: 30px;
  }

  #chartForm .field-error,
  #chartForm .city-hint {
    font-size: var(--form-fc-size-sm);
  }

  #chartForm .pick-input {
    padding-right: 42px;
  }

  .input-section .error-banner {
    font-size: 0.82rem;
    padding: 10px 12px;
  }
}

/* 2xs ≤390 */
@media (max-width: 390px) {
  .input-section {
    --form-shell-pad-x: 12px;
    --form-shell-pad-top: 18px;
    --form-title-size: 1.24rem;
    --form-fc-size: 0.98rem;
    --form-fc-size-sm: 0.84rem;
    --form-control-pad-x: 13px;
    --form-area-pad-x: 14px;
    --form-btn-size: 1.02rem;
    --form-btn-pad: 12px;
  }
}

/* touch */
@media (hover: none) and (pointer: coarse) {
  .input-section {
    --form-option-min-h: 36px;
    --form-btn-min-h: 48px;
  }

  #chartForm .form-option__mark {
    width: 17px;
    height: 17px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Question path modal — те же 7 брейкпоинтов (оболочка + chrome)
   ═══════════════════════════════════════════════════════════════════════════ */

/* lg ≤1023 */
@media (max-width: 1023px) {
  .question-path {
    padding: clamp(12px, 3vh, 28px) clamp(14px, 2.5vw, 22px);
  }
}

/* tb ≤860 */
@media (max-width: 860px) {
  .question-path {
    padding: 12px clamp(10px, 3vw, 18px);
  }

  .question-path__dialog {
    max-width: 100%;
  }
}

/* md ≤767 */
@media (max-width: 767px) {
  .question-path {
    padding: 10px 12px;
    align-items: flex-start;
  }

  .question-path__head {
    margin-bottom: 10px;
  }
}

/* sm ≤639 */
@media (max-width: 639px) {
  .question-path {
    padding: 8px 10px;
  }

  .question-path__submit {
    margin-top: calc(var(--form-stack) + 2px);
  }
}

/* xs ≤479 */
@media (max-width: 479px) {
  .question-path {
    padding: 6px 8px;
  }

  .question-path__close {
    font-size: 24px;
    padding: 8px;
  }
}

/* 2xs ≤390 */
@media (max-width: 390px) {
  .question-path {
    padding: 4px 6px;
  }
}

@media (hover: none) and (pointer: coarse) {
  .question-path__close,
  .technical-veil__close {
    font-size: 28px;
    padding: 10px;
    min-width: 44px;
    min-height: 44px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Прочее (не форма)
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  .pick-popover {
    max-height: min(68vh, 380px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .pick-wheels {
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
  }

}

/* ═══════════════════════════════════════════════════════════════════════════
   Карта направлений — 7 брейкпоинтов (xl default в chart-core.css)
   xl >1023 · lg ≤1023 · tb ≤860 · md ≤767 · sm ≤639 · xs ≤479 · 2xs ≤390
   ═══════════════════════════════════════════════════════════════════════════ */

/* lg ≤1023 */
@media (max-width: 1023px) {
  .geo-direction-map {
    --geo-map-h: min(46vh, 360px);
    --geo-map-min-h: clamp(190px, 34vh, 260px);
    --geo-ctrl-margin: 9px;
  }

  .geo-direction-map-wrap--fullscreen {
    inset: max(0.5rem, env(safe-area-inset-top, 0px))
      max(0.5rem, env(safe-area-inset-right, 0px))
      max(0.5rem, env(safe-area-inset-bottom, 0px))
      max(0.5rem, env(safe-area-inset-left, 0px));
    padding: 0.5rem;
  }
}

/* tb ≤860 */
@media (max-width: 860px) {
  .geo-direction-map {
    --geo-map-h: min(44vh, 340px);
    --geo-map-min-h: clamp(185px, 33vh, 250px);
  }
}

/* md ≤767 */
@media (max-width: 767px) {
  .geo-direction-map {
    --geo-map-h: min(42vh, 320px);
    --geo-map-min-h: clamp(180px, 32vh, 240px);
    --geo-ctrl-margin: 8px;
  }

  .geo-direction-map-wrap--fullscreen {
    inset: max(0.35rem, env(safe-area-inset-top, 0px))
      max(0.35rem, env(safe-area-inset-right, 0px))
      max(0.35rem, env(safe-area-inset-bottom, 0px))
      max(0.35rem, env(safe-area-inset-left, 0px));
    padding: 0.4rem;
  }
}

/* sm ≤639 */
@media (max-width: 639px) {
  .geo-direction-map {
    --geo-map-h: min(40vh, 300px);
    --geo-map-min-h: clamp(172px, 30vh, 228px);
    --geo-ctrl-size: 30px;
  }
}

/* xs ≤479 */
@media (max-width: 479px) {
  .geo-direction-map {
    --geo-map-h: min(38vh, 280px);
    --geo-map-min-h: clamp(164px, 28vh, 216px);
    --geo-ctrl-margin: 7px;
    --geo-ctrl-icon-op: 0.72;
  }

  .geo-direction-map-wrap--fullscreen {
    inset: max(0.25rem, env(safe-area-inset-top, 0px))
      max(0.25rem, env(safe-area-inset-right, 0px))
      max(0.25rem, env(safe-area-inset-bottom, 0px))
      max(0.25rem, env(safe-area-inset-left, 0px));
    padding: 0.35rem;
  }
}

/* 2xs ≤390 */
@media (max-width: 390px) {
  .geo-direction-map {
    --geo-map-h: min(36vh, 260px);
    --geo-map-min-h: clamp(156px, 26vh, 200px);
    --geo-ctrl-size: 31px;
  }
}

/* touch — крупнее зона нажатия, чуть плотнее фон */
@media (hover: none) and (pointer: coarse) {
  .geo-direction-map {
    --geo-ctrl-size: 34px;
    --geo-ctrl-margin: 8px;
    --geo-ctrl-bg: rgba(32, 36, 48, 0.66);
    --geo-ctrl-icon-op: 0.74;
  }

  .geo-direction-map .maplibregl-ctrl-top-right {
    margin-top: max(var(--geo-ctrl-margin), env(safe-area-inset-top, 0px));
    margin-right: max(var(--geo-ctrl-margin), env(safe-area-inset-right, 0px));
  }

  .geo-direction-map .maplibregl-ctrl-top-left {
    margin-top: max(var(--geo-ctrl-margin), env(safe-area-inset-top, 0px));
    margin-left: max(var(--geo-ctrl-margin), env(safe-area-inset-left, 0px));
  }
}

@media (max-width: 479px) {
  .pick-grid {
    gap: 1px;
  }

  .pick-day {
    min-height: 34px;
    font-size: 0.8rem;
  }

  .pick-title {
    font-size: 0.7rem;
  }
}

@media (hover: none) and (pointer: coarse) {
  .field-pick .pick-trigger {
    width: 40px;
    height: 40px;
    right: 4px;
  }

  .pick-input {
    padding-right: 46px;
  }

  .stepper-btn {
    width: 22px;
    height: 14px;
  }

  .stepper-arrows {
    right: 4px;
  }

  .suggest-item {
    min-height: 44px;
    padding-top: 11px;
    padding-bottom: 11px;
  }

  .field-autocomplete .suggest-item {
    min-height: 0;
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Таблицы brief (SSOT)
   xl >1023 · lg ≤1023 · tb ≤860 · md ≤767 · sm ≤639 · xs ≤479 · 2xs ≤390
   Колонки: tbl-* (chart-core.css). Кегль ячеек: var(--table-fs) на table.data-table в стеке; панели без font-size. Ховер: --tip-fs (тот же шаг).
   Таблица width 100% wrap; колонки по контенту; без раздувания зазоров. Переполнение → .table-wrap--h-scroll.
   ═══════════════════════════════════════════════════════════════════════════ */
.chart-tables-stack .table-wrap--scroll {
  overflow-x: clip;
}

.chart-tables-stack .table-wrap--scroll table {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  table-layout: auto;
  border-collapse: collapse;
  border-spacing: 0;
  box-sizing: border-box;
}

.chart-tables-stack .table-wrap--h-scroll table {
  width: max-content;
  max-width: none;
}

/* Ячейки brief: одна строка; минимальный inset (--table-cell-inset-x), края 0 (chart-core) */
.chart-tables-stack .table-wrap--scroll table :is(th, td) {
  white-space: nowrap;
}

.chart-tables-stack .table-wrap--scroll table td.asp-mechanism-col {
  min-width: min-content;
}

.chart-tables-stack .table-wrap--scroll .tbl-chain-inner {
  display: inline-block;
}

.chart-tables-stack .table-wrap--scroll .tbl-cell-tags {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 0.28em 0.55em;
  max-width: none;
}

.chart-tables-stack .table-wrap--scroll .tbl-cell-tags :is(.tbl-cell-tag, .pt-dignity-val) {
  flex: 0 0 auto;
}

.chart-tables-stack .table-wrap--scroll table tr.asp-empty-row > td {
  white-space: normal;
}

/* asp-expr-wrap: две строки в ячейке (текст + подпись), не один nowrap на td */
.chart-tables-stack .table-wrap--scroll table :is(th, td):has(.asp-expr-wrap) {
  white-space: normal;
}

/* Brief UI scale + hover — 7 брейкпоинтов (кегль таблиц = кегль tip, токены на :root) */
@media (max-width: 1023px) {
  .chart-tables-stack {
    --table-fs: 0.56rem;
    --table-head-fs: calc(var(--table-fs) * 0.93);
    --tbl-pin-w: 2.55rem;
  }

  :root {
    --tip-fs: 0.56rem;
    --tip-max-w: min(46vw, 192px);
    --tip-planet-max-w: min(42vw, 176px);
    --tip-pad: 4px 5px;
    --tip-inner-pad-r: 0.72rem;
  }
}

@media (max-width: 860px) {
  .chart-tables-stack {
    --table-fs: 0.54rem;
    --table-head-fs: calc(var(--table-fs) * 0.92);
    --tbl-pin-w: 2.5rem;
  }

  :root {
    --tip-fs: 0.54rem;
    --tip-max-w: min(44vw, 178px);
    --tip-planet-max-w: min(40vw, 162px);
  }
}

@media (max-width: 767px) {
  .chart-tables-stack {
    --table-fs: 0.51rem;
    --table-head-fs: calc(var(--table-fs) * 0.9);
  }

  :root {
    --tip-fs: 9px;
    --tip-lh: 1.22;
    --tip-max-w: min(62vw, 132px);
    --tip-planet-max-w: 112px;
    --tip-pad: 2px 3px;
    --tip-inner-pad-r: 0.5rem;
    --tip-close-size: 0.88rem;
    --tip-stack-gap: 0;
    --tip-meta-fs: 0.88em;
  }

  .sb-hover-tip .hover-card__kicker + .hover-card__chips {
    margin-top: 2px;
  }

  .sb-hover-tip .hover-card:has(.hover-card__chips) .hover-card__body {
    margin-top: 4px;
    padding-top: 3px;
  }

  .hover-route-list {
    max-height: min(32vh, 150px);
  }
}

@media (max-width: 479px) {
  .chart-tables-stack table :is(th, td) {
    letter-spacing: 0;
  }
}

/* ---- ≤860 — узкий tablet ---- */
@media (max-width: 860px) {
  .result-column {
    width: 100%;
    max-width: 100%;
  }

}

/* ---- ≤767 (md) ---- */
@media (max-width: 767px) {
  .result-column { width: 100%; }

  .chart-tables-stack {
    --row-pad-y: 3px;
    --table-pad-x: 6px;
  }

  .chart-tables-stack .chart-section { padding: 14px 12px; }

}

/* ---- ≤639 (sm) ---- */
@media (max-width: 639px) {
  .chart-tables-stack {
    --table-pad-x: 5px;
    --table-fs: 0.48rem;
    --table-head-fs: calc(var(--table-fs) * 0.9);
    --tbl-pin-w: 2.35rem;
    --tbl-role-w: 4.75rem;
  }


  :root {
    --tip-fs: 8.5px;
    --tip-tag-fs: 0.7em;
    --tip-max-w: min(58vw, 120px);
    --tip-planet-max-w: 100px;
    --tip-pad: 2px 3px;
    --tip-inner-pad-r: 0.46rem;
    --tip-close-size: 0.82rem;
  }

  .rh-meta { font-size: 0.62rem; gap: 0.18rem 0.28rem; }
  .rh-meta__chip { padding: 0.12rem 0.36rem; }

}

/* ---- ≤479 (xs) ---- */
@media (max-width: 479px) {
  .chart-tables-stack {
    --row-pad-y: 2px;
    --table-pad-x: 3px;
    --table-fs: 0.45rem;
    --table-head-fs: calc(var(--table-fs) * 0.88);
    --tbl-pin-w: 2.28rem;
    --tbl-role-w: 4.6rem;
  }


  :root {
    --tip-fs: 8px;
    --tip-tag-fs: 0.68em;
    --tip-tag-gap: 0.12em 0.22em;
    --tip-max-w: min(54vw, 108px);
    --tip-planet-max-w: 92px;
    --tip-pad: 2px 2px;
    --tip-inner-pad-r: 0.42rem;
    --tip-close-size: 0.78rem;
  }

  .sb-hover-tip .hover-card__badge {
    margin-top: 1px;
  }

  .hover-route-list {
    max-height: min(28vh, 120px);
    padding-left: 0.7em;
  }

  .chart-visual { padding: 6px; border-radius: 10px; }
  .chart-section h3 { font-size: 1rem; }

}

@media (max-width: 390px) {
  .chart-tables-stack {
    --table-fs: 0.42rem;
    --table-head-fs: calc(var(--table-fs) * 0.86);
    --table-pad-x: 2px;
    --tbl-pin-w: 2.2rem;
    --tbl-role-w: 4.5rem;
  }

  :root {
    --tip-fs: 7.5px;
    --tip-max-w: min(50vw, 100px);
    --tip-planet-max-w: 84px;
    --tip-inner-pad-r: 0.38rem;
    --tip-close-size: 0.72rem;
  }
}

@media (max-width: 767px) {
  .sb-hover-tip .hover-card--planet {
    padding: 2px 3px 3px;
  }

  .sb-hover-tip--planet.sb-hover-tip {
    max-width: var(--tip-planet-max-w);
    width: min(max-content, var(--tip-planet-max-w));
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
  }

  .sb-hover-tip .hover-card--planet-compact {
    padding: 1px 2px 2px;
    max-width: var(--tip-planet-max-w);
  }

  .sb-hover-tip .hover-card--planet-compact .hover-card__primary {
    font-size: 1em;
    line-height: 1.18;
    letter-spacing: -0.02em;
  }

  .sb-hover-tip .hover-card--planet-compact .hover-card__meta {
    font-size: var(--tip-meta-fs);
    line-height: 1.15;
    opacity: 0.92;
  }

  .sb-hover-tip .hover-card__primary,
  .sb-hover-tip .hover-card__meta {
    white-space: normal;
    overflow-wrap: anywhere;
    hyphens: auto;
  }

  .sb-hover-tip .hover-card--planet-compact .hover-card__chips--tags {
    margin-top: 0;
    gap: 0.12em 0.28em;
  }

  .sb-hover-tip .hover-card__chips--tags .hover-chip {
    white-space: nowrap;
    line-height: 1.15;
  }
}

@media (hover: none) and (pointer: coarse) {
  .sb-hover-tip {
    max-width: var(--tip-max-w);
    width: min(max-content, var(--tip-max-w));
  }

  .sb-hover-tip--planet.sb-hover-tip {
    max-width: var(--tip-planet-max-w);
    width: min(max-content, var(--tip-planet-max-w));
  }

  .sb-hover-tip .hover-card--planet {
    max-width: var(--tip-planet-max-w);
  }
}