/* cdogeo-traj — витрина по design/traj/storefront-spec.md; ред. E3 (T-022 круг 5, D-120…D-124): один список модулей
   (1280 — 3 колонки, 375 — M2), полоска итогов внизу, ниже — блок «Ваша программа» и блок «Оформление заявки».
   Подключается после base.css. Внутри iframe без своего скролла не работают sticky/fixed/vh: полоска и модалки считаются
   от переменных видимой области --vp-top/--vp-bottom/--vp-h (ставит traj.js по положению iframe у родителя).
   Запрещены: vh/dvh/svh и height:100% от html/body (петля «высота → postMessage → высота»). */

html, body { margin: 0; background: var(--t-base); }
body { font-family: var(--bs-body-font-family); }
.traj-root { padding: 0 0 24px; }
.traj-mono { font-family: var(--bs-font-monospace); }
.traj-muted { color: var(--t-muted); font-size: 15px; }
.traj-cap { font-family: var(--bs-font-monospace); font-size: 12.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--t-muted); font-weight: 400; }
h2 { font-weight: 700; font-size: 1.75rem; margin: 0 0 .5rem; }
.traj-skip { position: absolute; z-index: 1100; left: 8px; background: var(--t-panel); padding: 8px 12px; border-radius: var(--t-r-s); }

/* баннер тестового режима */
.traj-banner { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 16px; padding: 10px 14px; background: var(--t-spark-soft);
  color: var(--t-spark-ink); border-left: 4px solid var(--t-spark); border-radius: var(--t-r-s); font-size: 15px; line-height: 1.45; }
.traj-banner .bi { margin-top: 2px; }

/* верх конструктора: поиск, «Выбрано», оглавление */
.traj-top { display: flex; gap: 16px; align-items: center; margin-bottom: 16px; }
.traj-search { flex: 1 1 auto; }
.traj-search .form-control, .traj-search .input-group-text { min-height: 48px; }
.traj-search .input-group-text { background: var(--t-surface); color: var(--t-muted); border-color: var(--t-field-border); } /* T-034 UX-2 */
.traj-count { font-family: var(--bs-font-monospace); font-size: 15px; white-space: nowrap; color: var(--t-muted); }
.traj-count b { color: var(--t-primary); font-weight: 700; }
.traj-notice:empty { display: none; }
.traj-notice { margin-bottom: 12px; padding: 8px 12px; border-radius: var(--t-r-s); background: var(--t-surface); color: var(--t-ink); font-size: 15px; }
.traj-toc { margin: 0 0 20px; }
.traj-toc ul { list-style: none; margin: 0; padding: 0 6px; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14px; line-height: 1.6; }
.traj-toc a { color: var(--t-primary); text-decoration: none; }
.traj-toc a:hover { text-decoration: underline; }
.traj-tocsel { display: none; margin: 0 0 16px; }
.traj-tocsel .form-select { min-height: 48px; }

/* список разделами (D-119) */
.traj-n { font-family: var(--bs-font-monospace); font-size: 13px; color: var(--t-muted); font-weight: 400; }
.traj-selbadge { background: var(--t-primary); color: var(--t-on-primary); font-family: var(--bs-font-monospace); font-weight: 700; font-size: 12px; }
.traj-selbadge:empty { display: none; }
.traj-list { min-width: 0; }
.traj-found { margin: 0 0 12px; }
.traj-none { margin: 0 0 16px; padding: 0 6px 6px; }
.traj-sec { margin: 28px 0 0; }
.traj-sec:first-of-type, .traj-found[hidden] + .traj-none[hidden] + .traj-sec { margin-top: 0; }
.traj-sec-h { display: flex; align-items: baseline; gap: 10px; font-size: 20px; font-weight: 700; margin: 0 0 10px; color: var(--t-ink-strong); }
.traj-sec-h .traj-n { font-size: 14px; }

/* карточка модуля: 1280 — три колонки (E3), 375 — одна (M2) */
.traj-mods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.traj-mod { display: grid; grid-template-columns: auto minmax(0, 1fr) 32px; gap: 2px 10px; padding: 10px 12px; border: 1px solid var(--t-border);
  border-radius: var(--t-r-s); background: var(--t-panel); cursor: pointer; align-items: start; }
.traj-mod[hidden], .traj-sec[hidden] { display: none; }
.traj-mod:hover { border-color: var(--t-border-strong); }
.traj-mod.is-sel { border-color: var(--t-primary); background: var(--t-primary-tint-2); }
.traj-mod.rec-top { box-shadow: inset 3px 0 0 var(--t-ok-mark); }
.traj-mod.rec-also { box-shadow: inset 3px 0 0 var(--t-spark); }
.traj-mod .form-check-input { margin: 2px 0 0; cursor: pointer; }
.traj-mod-main { min-width: 0; }
.traj-mod-title { display: block; font-size: 15px; line-height: 1.33; cursor: pointer; color: var(--t-ink-strong); }
.traj-mod-line { display: flex; align-items: center; gap: 6px; font-family: var(--bs-font-monospace); font-size: 13px; color: var(--t-muted); margin-top: 2px; }
.traj-mod-why { display: block; font-size: 13px; color: var(--t-muted); margin-top: 2px; }
.traj-mod-why:empty { display: none; }
.traj-info { --bs-btn-padding-x: 0; --bs-btn-padding-y: 0; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  margin: -4px -4px 0 0; font-size: 17px; position: relative; }

/* бейджи подсказок (D-096: цвет — только место в списке) */
.traj-badge { display: inline-flex; align-items: center; gap: 4px; font: 700 13px/1.3 var(--bs-body-font-family); padding: 2px 8px; border: 1px solid;
  border-radius: 999px; white-space: nowrap; vertical-align: 2px; margin-left: 6px; }
.traj-badge--top { background: var(--t-ok-bg); color: var(--t-ok-ink); border-color: var(--t-ok-border); }
.traj-badge--also { background: var(--t-spark-soft); color: var(--t-spark-ink); border-color: var(--t-spark); }

/* блоки «Ваша программа» и «Оформление заявки»; отступ сверху — под полоской итогов (она прячется, когда блок в окне) */
.traj-block { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 40px; margin: 88px 0 0; padding: 24px;
  border: 1px solid var(--t-border); border-radius: var(--t-r-m); background: var(--t-surface); }
.traj-order { margin-top: 24px; background: var(--t-panel); grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); }
.traj-block-title { font-size: 1.375rem; margin: 0 0 12px; }
.traj-block-title:focus-visible, .traj-recs-title:focus-visible { outline-offset: -3px; border-radius: 4px; }
.traj-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 16px; }
.traj-nums dt { font-family: var(--bs-font-monospace); font-size: 12.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--t-muted); font-weight: 400; }
.traj-nums dd { margin: 2px 0 0; font-family: var(--bs-font-monospace); font-size: 28px; line-height: 1.1; color: var(--t-ink-strong); white-space: nowrap; }
.traj-nums dd.traj-price { font-size: 24px; }
.traj-doc { margin-bottom: 16px; }
.traj-doc-title { font-size: 17px; font-weight: 700; line-height: 1.35; margin: 2px 0 8px; color: var(--t-ink-strong); }
.traj-doc-next { font-size: 14px; color: var(--t-muted); margin-top: 6px; }
.traj-empty-hint { font-size: 15px; color: var(--t-muted); margin: 0 0 8px; }
.traj-program.is-empty .traj-program-recs { display: none; }
.traj-program.is-empty { grid-template-columns: minmax(0, 1fr); }
/* выбранные модули столбцами: Модуль | Часы | Цена | ×; часы и цена — по правому краю внутри столбцов (D-121) */
.traj-sel { width: 100%; border-collapse: collapse; font-size: 15px; margin: 0 0 4px; }
.traj-sel th { font-family: var(--bs-font-monospace); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--t-muted);
  font-weight: 400; padding: 0 0 6px; border-bottom: 1px solid var(--t-border); }
.traj-sel td { padding: 8px 0; border-bottom: 1px solid var(--t-border); vertical-align: top; }
.traj-sel .traj-sel-m { padding-right: 12px; line-height: 1.35; }
.traj-sel .traj-sel-h, .traj-sel .traj-sel-p { text-align: right; white-space: nowrap; font-family: var(--bs-font-monospace); font-size: 14px; padding-left: 12px; }
.traj-sel th.traj-sel-h, .traj-sel th.traj-sel-p { font-size: 12px; }
.traj-sel .traj-sel-h { width: 64px; }
.traj-sel .traj-sel-p { width: 104px; }
.traj-sel .traj-sel-x { width: 44px; text-align: right; padding-left: 8px; }
.traj-sel td.traj-sel-x { padding-top: 2px; padding-bottom: 2px; }
.traj-sel .btn-close { width: 32px; height: 32px; padding: 0; background-size: 12px; }
.traj-sum-links { display: flex; align-items: center; gap: 4px; margin-top: 12px; min-height: 32px; flex-wrap: wrap; }
.traj-sum-links .btn-link { --bs-btn-padding-x: .25rem; --bs-btn-padding-y: .25rem; }
.traj-sum-links .traj-clear { --bs-btn-color: var(--t-muted); }
.traj-dot-sep { color: var(--t-muted); }
.traj-cleared { font-size: 15px; }
/* рекомендации справа — компактно: название, «вместе с …», строка «часы · цена» и «+ Добавить» у правого края */
.traj-recs[aria-busy="true"] .traj-rec-list { opacity: .6; }
.traj-recs-title { font-size: 1rem; font-weight: 700; margin: 4px 0 10px; }
.traj-rec-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.traj-rec { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 4px 10px; }
.traj-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 8px; }
.traj-dot--top { background: var(--t-ok-mark); }
.traj-dot--also { background: var(--t-spark); }
.traj-rec-t { font-size: 15px; line-height: 1.35; }
.traj-rec-why { font-size: 13px; color: var(--t-muted); margin-top: 2px; }
.traj-rec-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.traj-rec-n { font-family: var(--bs-font-monospace); font-size: 14px; }
/* оформление заявки: поля по одному в строку; справа «Ваша заявка» и справка блоками (заголовки жирным, D-124) */
.traj-order-form .form-control { min-height: 48px; }
.traj-order-form textarea.form-control { min-height: 0; }
.traj-order-form .form-control:focus { outline-offset: -3px; }
.traj-order-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.traj-osum, .traj-help-card { padding: 16px 20px; border: 1px solid var(--t-border); border-radius: var(--t-r-s); background: var(--t-surface); }
.traj-osum-title, .traj-help-card h3 { font-size: 1rem; font-weight: 700; margin: 0 0 8px; color: var(--t-ink-strong); }
.traj-osum p { margin: 0 0 4px; }
.traj-osum-line { font-size: 15px; color: var(--t-ink-strong); }
.traj-osum-doc { font-size: 15px; }
.traj-osum-doc:empty { display: none; }
.traj-osum-format { font-size: 15px; color: var(--t-muted); }
.traj-help { display: flex; flex-direction: column; gap: 12px; }
.traj-help-card { font-size: 15px; line-height: 1.5; }
.traj-help-card ol, .traj-help-card ul { margin: 0; padding-left: 1.2em; }
.traj-help-card li + li { margin-top: 4px; }
.traj-help-card p { margin: 0 0 6px; }
.traj-order.is-done { grid-template-columns: minmax(0, 1fr); background: var(--t-panel); }
.traj-done-compo { font-size: 15px; }

/* полоска итогов внизу (spec ред. 3 §2.3; D-120): итоги-ссылка и одна кнопка «Оформить заявку» → к блоку «Ваша программа»;
   скрыта при пустом наборе и когда блок программы или формы в окне; высота 52 px; в DOM — сразу после списка (порядок Tab) */
.traj-bar { position: absolute; left: 0; right: 0; z-index: 1030; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 52px; padding: 6px 8px 6px 14px; background: var(--t-panel); border: 1px solid var(--t-border); border-radius: var(--t-r-s); box-shadow: var(--t-shadow); }
.traj-bar[hidden] { display: none; }
.traj-bar-text { margin: 0; font-family: var(--bs-font-monospace); font-size: 15px; line-height: 1.3; color: var(--t-ink-strong); text-decoration: none;
  display: flex; gap: 0 .5em; flex-wrap: wrap; border-radius: 4px; }
.traj-bar-text:hover { color: var(--t-primary); text-decoration: underline; }
.traj-bar-text span { white-space: nowrap; }
.traj-bar-b:not(:empty)::before { content: "· "; }
.traj-bar-go { flex: 0 0 auto; white-space: nowrap; }
html.traj-standalone .traj-bar { position: fixed; bottom: 8px; left: 8px; right: 8px; top: auto; }

/* T-034: описание модуля (модалка), пересечения (DOM-3: мягко, выбор не блокируется), тексты DOM-2 и DOM-5, «программа
   изменилась», общая строка подсказок (UX-11), «К выбору направления» (UX-12). Спецификация — tasks/T-034-…/design/spec.md */
.traj-desc { margin: 0 0 12px; font-size: 16px; line-height: 1.5; color: var(--t-ink); }
.traj-ovl { margin: 0 0 12px; padding: 10px 12px; border-left: 3px solid var(--t-spark); border-radius: 0 var(--t-r-s) var(--t-r-s) 0;
  background: var(--t-spark-soft); color: var(--t-ink); font-size: 15px; line-height: 1.45; }
.traj-ovl-h { display: flex; gap: 6px; align-items: baseline; font-weight: 700; margin: 0 0 4px; color: var(--t-ink-strong); }
.traj-ovl ul { margin: 0; padding-left: 1.1em; }
.traj-ovl li + li { margin-top: 4px; }
.traj-ovl-sel { font-family: var(--bs-font-monospace); font-size: 12.5px; color: var(--t-muted); white-space: nowrap; }
.traj-mod-ovl { display: flex; gap: 6px; align-items: baseline; margin-top: 4px; padding: 2px 8px; border-left: 3px solid var(--t-spark);
  background: var(--t-spark-soft); color: var(--t-ink); font-size: 13px; line-height: 1.35; border-radius: 0 4px 4px 0; }
.traj-nums-note { margin: -8px 0 16px; font-size: 13px; color: var(--t-muted); }
.traj-edu { margin: 0 0 12px; font-size: 15px; line-height: 1.45; color: var(--t-muted); }
.traj-rec-common { margin: -4px 0 10px; font-size: 13px; color: var(--t-muted); }
.traj-chg { padding: 16px 18px; color: var(--t-ink); }
.traj-chg-h { font-size: 1.0625rem; font-weight: 700; margin: 0 0 6px; color: var(--t-ink-strong); }
.traj-chg p { margin: 0 0 4px; }
.traj-chg-nums { font-family: var(--bs-font-monospace); font-size: 15px; }
.traj-chg-nums span { white-space: nowrap; }
.traj-chg-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 12px; }
.traj-back { display: none; }

@media (max-width: 991.98px) {
  .traj-count, .traj-toc { display: none; }
  .traj-tocsel { display: block; }
  .traj-sec-h { font-size: 18px; }
  .traj-mods { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .traj-mod { grid-template-columns: auto minmax(0, 1fr); padding: 10px 12px; }
  .traj-mod-title { font-size: 16px; line-height: 1.3; }
  .traj-mod-line { font-size: 14px; }
  .traj-mod-line .traj-info { margin: -6px 0 -6px auto; }
  .traj-info::after { content: ""; position: absolute; inset: -6px; }
  .traj-block, .traj-order { grid-template-columns: minmax(0, 1fr); padding: 16px; gap: 24px; }
  .traj-nums dd { font-size: 22px; }
  .traj-nums dd.traj-price { font-size: 18px; }
  /* выбранные: название строкой, ниже часы и цена, × справа */
  .traj-sel thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .traj-sel tr { display: grid; grid-template-columns: 56px 104px minmax(0, 1fr) 44px; grid-template-areas: "m m m x" "h p . x";
    border-bottom: 1px solid var(--t-border); padding: 6px 0; }
  .traj-sel td { border: 0; padding: 0; }
  .traj-sel .traj-sel-m { grid-area: m; padding-right: 8px; }
  .traj-sel .traj-sel-h { grid-area: h; text-align: right; padding: 2px 0 0; width: auto; }
  .traj-sel .traj-sel-p { grid-area: p; text-align: right; padding: 2px 0 0; width: auto; }
  .traj-sel .traj-sel-x { grid-area: x; align-self: center; width: auto; }
  .traj-sel .btn-close { width: 44px; height: 44px; }
  .traj-rec .btn { min-height: 44px; }
  .traj-send { width: 100%; }
  .traj-top { margin-bottom: 12px; }
  /* на телефоне справка у формы скрыта полностью (D-124); «Ваша заявка» — копией перед кнопкой отправки */
  .traj-order-side { display: none; }
  .traj-help { display: none; }
  .traj-bar-text { flex-direction: column; font-size: 13px; line-height: 1.3; }
  .traj-bar-b:not(:empty)::before { content: none; }
  /* T-034 UX-5: цели касания ≥ 44 px; полоска 52 → 54 px (поля 4 px) */
  .traj-sum-links .btn, .traj-cleared .btn { min-height: 44px; display: inline-flex; align-items: center; }
  .traj-bar { padding: 4px 4px 4px 12px; }
  .traj-bar-go { min-height: 44px; display: inline-flex; align-items: center; }
  .traj-bar-text { min-height: 44px; justify-content: center; }
  .modal .btn-close { box-sizing: border-box; flex: 0 0 44px; width: 44px; height: 44px; padding: 0; }
  .traj-chg-act { flex-direction: column; align-items: stretch; }
  .traj-chg-act .btn { --bs-btn-padding-x: 1rem; }
  /* T-034 UX-12: «К выбору направления» в конце раздела */
  .traj-back { display: flex; justify-content: flex-end; margin: 4px 0 0; }
  .traj-back a { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-size: 15px; }
}
/* T-034 UX-4: итоги на рамке уже 420 px (телефоны) — одной строкой по содержимому; уже 300 px (экран 320) — цена второй строкой;
   там же подпись кнопки полоски «Оформить» (« заявку» скрыто визуально, имя кнопки — целиком) */
@media (max-width: 419.98px) {
  .traj-nums { grid-template-columns: auto auto minmax(0, 1fr); column-gap: 20px; }
}
@media (max-width: 299.98px) {
  .traj-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .traj-nums > div:last-child { grid-column: 1 / -1; }
  .traj-nums dd.traj-price { font-size: 22px; }
  .traj-bar-go-x { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
}

/* модалки внутри iframe — от видимой области */
html:not(.traj-standalone) .modal, html:not(.traj-standalone) .modal-backdrop { top: var(--vp-top, 0px); height: var(--vp-h, 600px); bottom: auto; }
html:not(.traj-standalone) .modal-backdrop { width: 100%; }

/* запасной маршрут /zayavka (без JS) */
.traj-card { padding: 20px; border: 1px solid var(--t-border); border-radius: var(--t-r-m); background: var(--t-panel); box-shadow: var(--t-shadow); }
.traj-form-page .form-control { min-height: 48px; }
.traj-form-page textarea.form-control { min-height: 0; }
.traj-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.traj-consent { padding-left: 2em; font-size: 15px; }
.traj-consent .form-check-input { margin-left: -2em; }
.traj-consent .traj-badge { margin-left: 4px; }
.traj-compo { border: 1px solid var(--t-border); border-radius: var(--t-r-m); padding: 12px 16px; background: var(--t-panel); }
.traj-compo summary { cursor: pointer; display: flex; flex-direction: column; gap: 2px; min-height: 44px; justify-content: center; }
.traj-compo-doc { font-size: 13px; color: var(--t-muted); }
.traj-compo-list { list-style: none; padding: 0; margin: 8px 0; }
.traj-compo-list li { display: flex; flex-direction: column; padding: 8px 0; border-top: 1px solid var(--t-border); }
.traj-compo-dir { font-size: 13px; color: var(--t-muted); }
.traj-compo-title { font-size: 15px; line-height: 1.35; }
.traj-compo-num { font-size: 14px; }
.traj-compo-tot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0; }
.traj-compo-tot dt { font-family: var(--bs-font-monospace); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--t-muted); font-weight: 400; }
.traj-compo-tot dd { margin: 0; font-size: 20px; color: var(--t-ink-strong); white-space: nowrap; }

/* рамка фокуса у края iframe (T-022 круг 4): рамка выходит на 5 px (3 + offset 2) — у экранов формы, подтверждения, согласия
   и ошибки отступ 6 px; у полей и select у края рамка внутрь (offset −3 px); у заголовков разделов — тоже внутрь. */
.traj-form-page, .traj-done, .traj-policy, .traj-error { padding: 0 6px 6px; }
.traj-top .form-control:focus, .traj-tocsel .form-select:focus, .traj-form-page .form-control:focus { outline-offset: -3px; }
.traj-sec-h:focus-visible { outline-offset: -3px; border-radius: 4px; }

/* подтверждение */
.traj-alert-ok { background: var(--t-ok-bg); color: var(--t-ok-ink); border-color: var(--t-ok-border); }
.traj-alert-wait { background: var(--t-spark-soft); color: var(--t-spark-ink); border-color: var(--t-spark); }
.traj-table th { font-weight: 700; }
.traj-table .text-end { white-space: nowrap; }
.traj-contacts { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 17px; font-weight: 700; }
.traj-done-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.traj-print-only { display: none; }

@media print {
  .traj-banner, .traj-done-actions, .traj-skip, .traj-bar { display: none !important; }
  .traj-print-only { display: block; }
  body { font-size: 12pt; }
  * { box-shadow: none !important; }
  /* «Скачать PDF» после заявки: только программа и подтверждение */
  html.traj-print-done .traj-top, html.traj-print-done .traj-tocsel, html.traj-print-done .traj-toc, html.traj-print-done .traj-notice,
  html.traj-print-done .traj-list, html.traj-print-done .traj-program-recs, html.traj-print-done .traj-sum-links,
  html.traj-print-done .traj-sel-x { display: none !important; }
  html.traj-print-done .traj-block { margin-top: 0; break-inside: avoid; }
}
@media (prefers-reduced-motion: reduce) {
  .modal.fade .modal-dialog { transition: none !important; }
}