@media (max-width: 1280px) {
  .grid.five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid.two { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1024px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 60; width: 272px;
    transform: translateX(-105%); transition: transform var(--transition-base);
  }
  [dir="rtl"] .sidebar { transform: translateX(105%); }
  .app.nav-open .sidebar { transform: none; }
  .app.nav-open .scrim { display: block; position: fixed; inset: 0; z-index: 50; background: rgba(15, 23, 42, .45); }
  .btn.menu-btn { display: inline-flex; }
  .grid.three, .grid.two-even { grid-template-columns: minmax(0, 1fr); }
  .hero { grid-template-columns: minmax(0, 1fr); padding: 28px; }
  .tablet-body { grid-template-columns: minmax(0, 1fr); }
  .tab-side { flex-direction: row; flex-wrap: wrap; }
  .tab-side .chip { flex: 1 1 120px; }
}

@media (max-width: 720px) {
  body { font-size: 14px; }
  .topbar { padding: 10px 16px; gap: 10px; flex-wrap: wrap; min-height: 0; }
  .page-title { font-size: 18px; }
  .topbar-actions { width: 100%; justify-content: flex-start; margin-inline-start: 0; }
  .topbar-actions .btn { flex: 1 1 auto; }
  .persona-meta, .clock { display: none; }
  .content { padding: 16px 16px 140px; gap: 16px; }
  .grid.five, .grid.kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi { padding: 12px 14px; }
  .kpi .value { font-size: 24px; }
  .card-head { padding: 14px 16px; }
  .card-body { padding: 0 16px 16px; }
  .card-pad { padding: 16px; }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 10px; }
  .list > li { padding: 12px 16px; }
  .hero { padding: 22px; border-radius: 14px; }
  .hero h1 { font-size: 24px; }
  .tablet-bar, .tablet-body { padding-inline: 14px; }
  .po { padding: 14px 16px; }
  .po h3 { font-size: 18px; }
  .po .btn { width: 100%; }
  .guide { inset-inline: 12px; width: auto; bottom: 12px; }
  .dlg-foot .btn { flex: 1 1 auto; }
  /* Responsive tables: rows become cards when marked .stackable */
  .t.stackable thead { display: none; }
  .t.stackable, .t.stackable tbody, .t.stackable tr, .t.stackable td { display: block; width: 100%; }
  .t.stackable tr { border-bottom: 1px solid var(--color-border); padding: 8px 0; }
  .t.stackable td { border: 0; padding: 5px 16px; display: flex; justify-content: space-between; gap: 12px; text-align: end; }
  .t.stackable td::before { content: attr(data-l); color: var(--color-text-muted); font-size: 12px; font-weight: 600; text-align: start; }
  .t.stackable td.num { text-align: end; }
  .t.stackable tfoot { display: block; }
  .t.stackable tfoot tr { display: flex; flex-wrap: wrap; }
}

@media (max-width: 420px) {
  .grid.kpis, .grid.five { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 1800px) {
  .content { max-width: 1840px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media (max-width: 1024px) {
  .qa-grid { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ---------- Touch & small screens (UI/UX Pro Max: 44px targets, 8px gaps, 16px inputs) ---------- */
@media (pointer: coarse), (max-width: 720px) {
  .btn { min-height: var(--size-touch); }
  .btn.sm { min-height: 40px; padding: 0 14px; }
  .chip, .seg button { min-height: 40px; padding-block: 8px; }
  .chips, .row { gap: var(--space-2); }
  .input, .select, .textarea { font-size: 16px; min-height: var(--size-touch); }
  .nav-link { min-height: var(--size-touch); }
}
@media (max-width: 720px) {
  .search-trigger { min-width: 0; flex: 1 1 auto; }
  .search-trigger .kbd-hint { display: none; }
  .guide-layout { grid-template-columns: minmax(0, 1fr); }
  .guide-toc { position: static; flex-direction: row; overflow-x: auto; padding-bottom: 4px; }
  .guide-toc a { white-space: nowrap; }
  .topbar-actions .badge { white-space: normal; }
  .topbar-actions > .badge { display: none; }
  dialog.palette { margin-top: 0; width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .tour { grid-template-columns: minmax(0, 1fr); top: auto; bottom: 12px; }
  body.touring .content { padding-top: 16px; padding-bottom: 240px; }
  .split, .meter { min-width: 0; }
}
@media (max-width: 1024px) {
  .guide-layout { grid-template-columns: minmax(0, 1fr); }
  .guide-toc { position: static; flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 360px) {
  .content { padding-inline: 12px; }
  .topbar { padding-inline: 12px; }
  .card-head, .card-body, .card-pad { padding-inline: 12px; }
}

@media (max-width: 1280px) { .clock { display: none; } }
@media (max-width: 720px) {
  .topbar { padding: 8px 12px; gap: 8px; flex-wrap: nowrap; }
  .topbar-actions { width: auto; margin-inline-start: 0; gap: 6px; flex-wrap: nowrap; }
  .topbar-actions .btn { flex: 0 0 auto; padding: 0 10px; }
  .lang-label { display: none; }
  #hdr-help { display: none; }
  .page-head { align-items: stretch; flex-direction: column; }
  .page-actions { justify-content: flex-start; }
  .page-actions .btn { flex: 1 1 auto; }
  .page-head .page-title { font-size: var(--text-xl); }
}

/* App bar stays on one row on tablets */
@media (max-width: 1024px) {
  .topbar { flex-wrap: nowrap; }
  .topbar-actions { flex-wrap: nowrap; }
  .persona-meta, .lang-label { display: none; }
  .topbar .search-trigger { min-width: 0; flex: 1 1 auto; }
}
/* Guide panel becomes a compact bar on phones; the full panel is in its "All steps" */
@media (max-width: 720px) {
  .guide { inset-inline: 8px; bottom: 8px; }
  .guide-head { padding: 8px 12px; }
  .guide-body { padding: 8px 12px 10px; gap: 6px; }
  .guide-body > div > p, .guide-body .guide-progress, .guide-body details, .guide-body .xs.muted.b { display: none; }
  .guide-body .stack.tight > .small { display: none; }
  body.guide-open .content { padding-bottom: 190px; }
}