/* Page-specific responsive overrides for public/index.html
   Linked AFTER inline <style>. Breakpoints: sm 480 / md 768 / lg 1024 */

/* Grids that used to be inline styles on the "Принятие решений" tab.
   Inline style beats any @media, so these must live in CSS to collapse on phones. */
.roi-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.roi-section { margin-top: 8px; }
.roi-intro,
.roi-escalation,
#card-journey { padding: 12px 16px; }
.roi-intro .concept-header,
.roi-escalation .concept-header { margin-bottom: 8px; }
.roi-intro .concept-header h2,
.roi-escalation .concept-header h2 { font-size: 20px; line-height: 28px; }
.roi-intro .concept-header p,
.roi-escalation .concept-header p { font-size: 14px; line-height: 20px; margin-top: 2px; }
.roi-intro .concept-body { line-height: 1.5; }
.roi-entry-grid { margin-top: 16px; }
.roi-entry-column,
.roi-column-card {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}
.roi-entry-column p,
.roi-column-card p { margin: 0; }
.roi-entry-title {
  margin-bottom: 8px;
  color: var(--primary);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.roi-escalation .roi-entry-grid { margin-top: 0; gap: 12px; }
.roi-escalation .roi-entry-column { padding: 10px; }
.roi-escalation .roi-entry-title { margin-bottom: 4px; }
.roi-escalation .roi-entry-column p { font-size: 13px; line-height: 1.45; }
.roi-entry-column a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  vertical-align: middle;
}

.journey-step { margin: 20px 0 0; }
.journey-step + .journey-step { margin-top: 16px; }
.journey-start {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 20px;
  align-items: start;
}
.journey-start .concept-header { margin-bottom: 0; }
.journey-start .journey-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin: 0;
}
.journey-start .journey-step-label { margin: 0; }
.journey-step-label,
.journey-secondary-title,
.journey-next-label {
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.journey-choice-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.journey-choice-btn {
  min-height: 44px;
  padding: 12px 20px;
  color: var(--text);
}
.journey-choice-btn.is-selected {
  border-color: var(--primary);
  background: var(--accent-soft);
  color: var(--primary);
}
.journey-content { margin-top: 16px; }
.journey-empty {
  padding: 24px 20px;
  color: var(--muted);
  text-align: center;
}
.journey-empty-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  margin: 0 auto 8px;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--primary);
  font-weight: 600;
}
.journey-selection {
  padding: 16px 0 0 20px;
  border-left: 3px solid var(--primary);
}
.journey-selection.is-student { border-left-color: var(--success); }
.journey-selection-title {
  margin-bottom: 16px;
  color: var(--primary);
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
}
.journey-selection.is-student .journey-selection-title { color: var(--success); }
.journey-signal {
  margin: -4px 0 16px;
  color: var(--primary);
  font-size: 13px;
  line-height: 1.5;
}
.journey-next {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}
.journey-next-action {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--primary);
  color: var(--on-primary);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.journey-next-action:hover { background: var(--primary-container); }
.journey-next p { margin: 10px 0 0; color: var(--text-3); font-size: 13px; line-height: 1.5; }
.journey-secondary { margin-top: 18px; }
.journey-secondary-links { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.journey-secondary-links a { color: var(--primary); font-size: 13px; }

.express-criteria { margin-top: 16px; }
.express-criterion { margin-bottom: 16px; }
.express-criteria > :last-child { margin-bottom: 0; }

.roi-methodology-intro {
  margin: 12px 0 0;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.55;
}
.roi-methodology-box {
  margin-top: 16px;
  padding: 12px;
  border-radius: 8px;
  background: var(--surface-low);
}
.roi-methodology-box > p {
  margin: 0 0 8px;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.55;
}
.decision-scale { margin-top: 0; margin-bottom: 14px; }
.decision-boundary-note,
.decision-note {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}
.decision-boundary-note { margin: 0 0 8px; }
.decision-details { margin-top: 16px; color: var(--text-2); font-size: 13px; }
.decision-details-summary,
.buildvsbuy-summary,
.roi-reference-summary,
.good-request-summary {
  cursor: pointer;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
}
.decision-details-summary { padding: 12px; }
.decision-details-summary span,
.buildvsbuy-summary span,
.roi-reference-summary-note {
  display: block;
  margin-top: 6px;
  color: var(--text-3);
  font-size: 14px;
  font-weight: 400;
}
.decision-details-body { margin-top: 14px; padding: 0 4px; }
.decision-details-body > p:first-child { margin: 0 0 10px; line-height: 1.55; }
.criteria-table,
.change-table,
.comparison-table {
  width: 100%;
  border-collapse: collapse;
}
.criteria-table { margin-top: 4px; font-size: 12px; }
.criteria-table td { padding: 4px 8px; }
.criteria-table td:last-child { text-align: right; font-weight: 600; }
.criteria-table-total { border-top: 1px solid var(--border); font-weight: 600; }
.decision-note { margin: 10px 0 0; }

.roi-stop-table {
  width: 100%;
  margin-top: 16px;
  border-collapse: collapse;
  font-size: 13px;
}
.roi-stop-table th,
.roi-stop-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
  line-height: 1.45;
}
.roi-stop-table th {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.roi-stop-table td:first-child {
  width: 42%;
  color: var(--text);
  font-weight: 600;
}
.roi-stop-table td:last-child { color: var(--text-2); }
.roi-sla { margin: 16px 0 0; color: var(--text-2); }
.roi-sla strong { color: var(--primary); }
.roi-stages {
  margin: 16px 0 0;
  padding-left: 24px;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.55;
}
.roi-stages li + li { margin-top: 10px; }
.roi-stages a { color: var(--primary); }
.roi-disclaimer {
  margin: 16px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-low);
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.55;
}
.good-request-details { margin-top: 16px; }
.good-request-summary { padding: 12px; }
.good-request-grid { margin-top: 16px; }
.good-request-example {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 13px;
}
.good-request-example.is-weak { background: var(--surface-low); color: var(--text-2); }
.good-request-example.is-strong { background: var(--roi-sel-bg); border-color: var(--roi-sel-border); }
.good-request-example h3 { margin: 0 0 14px; font-size: 16px; line-height: 24px; }
.good-request-fields { margin: 0; }
.good-request-fields > div + div { margin-top: 12px; }
.good-request-fields dt { color: var(--text); font-weight: 600; }
.good-request-fields dd { margin: 3px 0 0; color: var(--text-2); line-height: 1.55; overflow-wrap: anywhere; }
.good-request-caption,
.good-request-closing { color: var(--text-3); font-size: 12px; line-height: 1.55; }
.good-request-caption { margin: 16px 0 0; }
.good-request-closing { margin: 16px 0 0; }
.change-table { min-width: 620px; margin-top: 16px; font-size: 13px; }
.change-table th,
.change-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.change-table th { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; }

.roi-reference {
  margin-top: 20px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-low);
  box-shadow: var(--shadow-sm);
}
.roi-reference-summary { display: block; padding: 16px 20px; list-style-position: inside; }
.roi-reference-summary-note { margin-left: 22px; }
.roi-reference-body { padding: 0 20px 20px; }
.roi-reference-card { margin: 20px 0 0; }
.roi-passport-grid { grid-template-columns: 1fr; margin-top: 16px; }
.roi-passport-note { margin: 12px 0 0; color: var(--text-2); font-size: 13px; line-height: 1.55; }
.roi-reference-intro { margin: 12px 0 0; color: var(--text-2); font-size: 13px; line-height: 1.55; }
.buildvsbuy-options { margin-top: 12px; }
.buildvsbuy-option { padding: 16px; border: 1px solid var(--border); border-radius: 10px; font-size: 14px; }
.buildvsbuy-option.is-own { background: var(--roi-sel-bg); border-color: var(--roi-sel-border); }
.buildvsbuy-option.is-provider { background: var(--surface-low); }
.buildvsbuy-option-title { margin-bottom: 8px; color: var(--text); font-weight: 600; }
.buildvsbuy-option.is-own .buildvsbuy-option-title { color: var(--roi-sel-color); }
.buildvsbuy-list { margin: 0; padding-left: 18px; color: var(--text-2); line-height: 1.7; }
.buildvsbuy-note { margin: 10px 0 0; color: var(--text-3); font-size: 12px; line-height: 1.55; }
.buildvsbuy-details { margin-top: 28px; color: var(--text-2); font-size: 13px; }
.buildvsbuy-summary { padding: 12px; }
.comparison-table { min-width: 720px; margin-top: 16px; font-size: 14px; }
.comparison-table th,
.comparison-table td { padding: 12px 16px; border-bottom: 1px solid var(--border); color: var(--text-2); text-align: left; vertical-align: top; }
.comparison-table th { border-bottom: 2px solid var(--border); color: var(--text); }
.comparison-table .comparison-criterion { width: 22%; font-weight: 600; }
.comparison-table th:not(.comparison-criterion) { width: 39%; }
.comparison-table thead th { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; }
.comparison-own-mark,
.comparison-positive { color: var(--success); }
.comparison-provider-mark { color: var(--primary); }
.comparison-negative { color: var(--danger); }
.comparison-neutral { color: var(--warning); }
.pricing-card-title { margin-bottom: 4px; color: var(--text); font-weight: 600; }
.pricing-card-subtitle { margin-bottom: 12px; color: var(--text-3); font-size: 12px; }
.pricing-card-list { margin: 0; padding-left: 18px; color: var(--text-2); font-size: 13px; line-height: 1.7; }
.pricing-note { margin-top: 12px; color: var(--text-3); font-size: 12px; }

/* Экспресс-оценка: 3 уровня Н/С/В (базовый .roi-levels — 4 колонки) */
.roi-levels-3 {
  grid-template-columns: repeat(3, 1fr);
}

/* Широкие таблицы: горизонтальный скролл вместо распирания страницы */
.table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Edit mode: desktop only (≥1024px) */
@media (max-width: 1023px) {
  .edit-toolbar,
  .tool-btn {
    display: none !important;
  }
  [contenteditable="true"] {
    pointer-events: none;
  }
  [contenteditable="true"]:hover,
  [contenteditable="true"]:focus {
    background: transparent;
    box-shadow: none;
  }
}

/* Phone / small tablet */
@media (max-width: 767px) {
  body {
    padding: 0 0 calc(80px + env(safe-area-inset-bottom, 0px));
  }

  .theme-toggle {
    position: static;
    margin: 0 auto 16px;
  }

  .header h1 {
    font-size: 32px;
    line-height: 40px;
  }

  .tabs {
    flex-direction: column;
  }

  .tab-btn {
    min-height: 44px;
    justify-content: center;
  }

  .grid-2,
  .grid-4,
  .role-body,
  .struct-row,
  .ecosystem-row,
  .pricing-grid,
  .news-grid,
  .portfolio-grid,
  .portfolio-counters,
  .express-savings-grid {
    grid-template-columns: 1fr !important;
  }

  .role-col:first-child {
    border-right: none !important;
    border-bottom: 1px solid var(--border);
  }

  /* Радар: узкие поля колонки, чтобы подписи осей не ужимались до нечитаемого */
  .role-col {
    padding: 18px 14px;
  }

  .radar {
    max-width: none;
  }

  /* svg сжимается вместе с колонкой — компенсируем размер подписей в единицах viewBox */
  .radar text {
    font-size: 13px;
  }

  .role-selector {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .roi-levels {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* 3 коротких уровня влезают в ряд и на 360px — не ломаем на 2+1 */
  .roi-levels-3 {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .roi-grid-2 {
    grid-template-columns: 1fr;
  }

  .roi-reference-body { padding: 0 8px 8px; }
  .roi-reference-summary { padding: 14px 16px; }
  .journey-selection { padding-left: 12px; }

  /* Сравнительная таблица не ужимается до нечитаемого — скроллится */
  .table-scroll--wide > table {
    min-width: 520px;
  }

  /* Вложенные карточки съедали 152px из 360 (body 16 + card 28 + врезка 12 + scale 20, ×2).
     Ужимаем паддинги на телефоне — контент внутри перестаёт задыхаться. */
  .card { padding: 16px; }
  .card-sm { padding: 14px; }
  .decision-scale { padding: 14px; }

  .journey-start {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .journey-start .journey-step {
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 12px;
  }
  .journey-start .journey-step-label { margin-bottom: 8px; }

  /* Шкала решений: 4 подписи в ряд не влезают (боксы ~40–58px при тексте ~90px)
     и наезжают друг на друга. Уводим легенду в сетку 2×2.
     Grid игнорирует inline flex:30/25/20/25 на .decision-scale-item — обнулять не нужно. */
  .decision-scale-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 8px;
  }

  .decision-scale-item {
    padding-left: 8px;
    border-left: 3px solid transparent;
  }
  .decision-scale-item.is-danger { border-left-color: var(--danger); }
  .decision-scale-item.is-warning { border-left-color: var(--warning); }
  .decision-scale-item.is-primary { border-left-color: var(--primary); }
  .decision-scale-item.is-success { border-left-color: var(--success); }

  .decision-scale-seg,
  .roi-level-btn,
  .role-btn,
  .theme-toggle,
  .portfolio-search {
    min-height: 44px;
  }

  /* Текстовые ссылки-действия: строчный <a> даёт ~24px по высоте — мимо тач-минимума.
     inline-flex + min-height поднимают зону нажатия, не меняя вид на десктопе. */
  .journey-secondary-links a,
  .express-link {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch-min, 44px);
  }

  #scroll-top-btn {
    left: auto;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }

  .save-toast {
    right: 16px;
    left: 16px;
    max-width: none;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }

  .portfolio-toolbar,
  .portfolio-filters {
    flex-wrap: wrap;
  }

  .portfolio-search,
  .portfolio-toolbar input[type="search"],
  .portfolio-toolbar input[type="text"] {
    width: 100%;
    min-width: 0;
  }
}

/* Narrow phone */
@media (max-width: 479px) {
  .role-selector {
    grid-template-columns: 1fr !important;
  }
}

/* Tablet: news 2+1 */
@media (min-width: 768px) and (max-width: 1023px) {
  .news-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .news-grid .news-col:last-child {
    grid-column: 1 / -1;
  }
}

/* Scroll-top position on mid widths */
@media (max-width: 1023px) {
  #scroll-top-btn {
    left: auto;
    right: 20px;
  }
}