/* Responsive overrides for public/brief.html */

.topbar {
  padding-top: env(safe-area-inset-top, 0);
}

.main {
  padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px));
}

.footer-nav .btn {
  min-height: var(--touch-min);
}

.toast {
  bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  right: var(--gutter);
}

@media (max-width: 767px) {
  .roi-layout,
  .summary-grid,
  .field-row,
  .savings-grid,
  .step1-layout {
    grid-template-columns: 1fr;
  }

  .field-row { gap: 32px; }

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

  .step1-sidebar {
    position: static;
    top: auto;
  }

  .panel-intro h1 {
    font-size: 24px;
    line-height: 32px;
  }

  .decision-scale-seg,
  .roi-level-btn {
    min-height: 44px;
  }

  /* Скрепка вложений — основное действие шага, 32px мало для пальца */
  .attach-clip {
    width: var(--touch-min);
    height: var(--touch-min);
  }

  /* Шкала решений: 4 подписи в ряд не влезают и наезжают друг на друга (см. index.css).
     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); }

  .footer-nav {
    gap: 8px;
    padding: 12px var(--gutter);
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }

  .footer-nav .btn {
    padding: 12px 14px;
  }

  .draft-status {
    font-size: 11px;
  }
}

@media (max-width: 479px) {
  .progress-labels span {
    font-size: 0;
    line-height: 0;
    color: transparent !important;
  }
  .progress-labels span::before {
    content: attr(data-step);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: color-mix(in srgb, var(--muted) 55%, transparent);
  }
  .progress-labels span.is-done::before { color: var(--success); }
  .progress-labels span.is-current::before { color: var(--primary); }

  .topbar-back-text { display: none; }
  .topbar-back .material-symbols-outlined { font-size: 22px; }
}