Un singur prag în DS: --bp-desktop: 1024px. Sub el, tot fluxul trăiește în .flow-chrome (bare-overlay peste conținut scrollabil). De la 1024px în sus, shell-ul se schimbă complet: pagina devine .app-shell + .layout-12, iar chrome-ul fluxului devine .app-top sus (stepper aliniat stânga + close + bandă de progres) și .app-footer jos (back + CTA la mărimea default). Consumatorul face swap între cele două — nu le suprapune niciodată.

Redimensionează fereastra peste / sub 1024px — indicatorul arată shell-ul pe care l-ar folosi acest viewport.

Corespondența semnalelor. Fiecare semnal al fluxului există pe ambele platforme — se mută, nu dispare. Eticheta e aceeași în ambele locuri (copy = single source of truth).

<div class="app-shell">
  <header class="app-top">
    <div class="app-top-in">
      <div class="app-top-center">
        <nav class="stepper">…</nav>                 <!-- omis pe ecrane fără pași -->
      </div>
      <div class="app-top-right">
        <button class="btn outline icon-only" aria-label="Închide">×</button>
      </div>
    </div>
    <div class="app-progress"><div class="app-progress-bar" style="--app-progress:40%"></div></div>
  </header>

  <!-- conținutul paginii -->

  <footer class="app-footer" id="appFooter">
    <div class="app-footer-in">
      <div class="app-foot-nav">
        <button class="btn outline">Înapoi</button>
        <button class="btn primary">Continuă</button>
      </div>
      <p class="app-foot-help">…</p>
    </div>
  </footer>
</div>

Single-page flow (emitere factură, editare setare, upload). Fără pași nu există nici context de pus în header: titlul trăiește ca h1 în pagină, iar banda de progres lipsește complet — nu o pui la 0% sau 100%. Headerul rămâne doar cu close-ul.

Pentru ecrane cu conținut mai lat decât form-stack-ul standard (ex: signer cu .signer-layout 1096px), consumatorul măsoară lățimea, setează --app-foot-w pe :root și aplică .matches-content pe ambele bare. Close-ul de sus și butoanele de jos cad flush cu marginile conținutului — pe una singură alinierea se rupe.

Trei hook-uri JS: toggle-ul .is-scrolled pe scroll (reveal text de help), măsurarea lățimii conținutului pentru aliniere flush pe ambele bare, și progresul derivat din indexul pasului.

// 1. Scroll reveal pentru .app-foot-help
function syncFooterScroll() {
  document.getElementById('appFooter')
    .classList.toggle('is-scrolled', window.scrollY > 4);
}
window.addEventListener('scroll', syncFooterScroll, { passive: true });
syncFooterScroll();

// 2. Match content width — pe ecranele cu conținut wider, footer-ul
//    citește lățimea reală a containerului și se aliniază cu el.
function syncFooterWidth() {
  const footer = document.getElementById('appFooter');
  const top    = document.getElementById('appTop');
  const wide   = document.querySelector('.screen.active .signer-layout');
  if (wide) {
    document.documentElement.style.setProperty(
      '--app-foot-w', wide.getBoundingClientRect().width + 'px');
    footer.classList.add('matches-content');
    if (top) top.classList.add('matches-content');
  } else {
    document.documentElement.style.removeProperty('--app-foot-w');
    footer.classList.remove('matches-content');
    if (top) top.classList.remove('matches-content');
  }
}
window.addEventListener('resize', syncFooterWidth);

// 3. Progres — derivat din indexul pasului, nu setat manual per ecran.
function syncProgress(step, total) {
  document.querySelector('.app-progress-bar')
    .style.setProperty('--app-progress', ((step + 1) / total * 100) + '%');
}