/* ───────────────────────────────────────────────────────────────────────────
   demo-responsive.css — tablet + phone polish for the demo library
   ───────────────────────────────────────────────────────────────────────────
   Loaded AFTER master.css. Deliberately a separate, demo-only file so the
   shared @navipoint/ui package (consumed by SawaOS / Atlas / DomusOS) is not
   mutated by the sales-demo's responsive needs — this is overwrite-safe across
   `npm run sync:demo-lib` and carries zero product-regression risk.

   Strategy: the mt-* scaffolding is mostly fluid already; this file (1) tightens
   container padding + headline type as the viewport narrows, (2) makes the
   dense template-grade controls (tabs, period pickers, buttons) finger-friendly
   on touch, and (3) gives wide tables/grids a horizontal-scroll escape hatch so
   nothing clips off a tablet held in portrait or a phone. Per-file bespoke grids
   (e.g. the P&L pl-grid) still collapse in their own <style> block; this handles
   everything that flows through the shared classes + raw Tailwind utilities.
   ─────────────────────────────────────────────────────────────────────────── */

/* ═══ TABLET (portrait iPad ~768–1024) ═══════════════════════════════════ */
@media (max-width: 1024px) {
  .mt-container { padding: 1.5rem 1.75rem; }
  .mt-title { font-size: 2.5rem; }
  .mt-title.is-huge { font-size: 3rem; }
  .mt-hero-headline { font-size: 2.5rem; }
}

/* ═══ SMALL TABLET / LARGE PHONE (~640–768) ══════════════════════════════ */
@media (max-width: 768px) {
  .mt-container { padding: 1.25rem 1.25rem; }
  .mt-title { font-size: 2.125rem; }
  .mt-title.is-huge { font-size: 2.5rem; }
  .mt-subtitle { font-size: 0.9375rem; }

  /* title + KPIs stack instead of crowding */
  .mt-title-row { flex-direction: column; gap: 1rem; }

  /* hero verdict number stays bold but fits */
  .mt-hero-headline { font-size: 2.25rem; }
  .mt-kpi-value { font-size: 1.875rem; }
  .mt-kpi-value.size-lg { font-size: 2.125rem; }

  /* alert briefing collapses its two columns */
  .mt-alert-cols { grid-template-columns: 1fr; gap: 1rem; }
  .mt-alert-why { border-left: none; border-top: 1px solid var(--mt-ink-800); padding-left: 0; padding-top: 1rem; }

  .mt-quick-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* tab bars + segmented pickers scroll horizontally rather than wrap/clip */
  .mt-tabs { display: flex; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .mt-tabs::-webkit-scrollbar { display: none; }
  .mt-tab { white-space: nowrap; flex: 0 0 auto; }
}

/* ═══ PHONE (≤640) ════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .mt-container { padding: 1rem 1rem; }
  .mt-title { font-size: 1.875rem; }
  .mt-title.is-huge { font-size: 2.125rem; }

  /* KPI strip drops to a single readable column */
  .mt-kpi-strip { grid-template-columns: 1fr; }
  .mt-quick-actions { grid-template-columns: 1fr; }

  .mt-hero-headline { font-size: 2rem; }
  .mt-section-h { font-size: 1.25rem; }

  /* full-width drawers + modals so they don't peek off-screen */
  .mt-drawer-panel { max-width: 100%; }
  .mt-modal-panel { margin: 0 0.75rem; }
}

/* ═══ TOUCH ERGONOMICS (any coarse pointer — tablet/phone) ════════════════ */
@media (pointer: coarse) {
  /* dense template controls get real finger targets without changing desktop */
  .mt-tab { padding: 0.625rem 1.125rem; }
  .mt-btn { padding: 0.5rem 1rem; }
  .mt-tabs { gap: 0.375rem; }

  /* raw-Tailwind period pickers in the templates: bump the tap area */
  button.px-3.py-1\.5 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
  button.px-4.py-2 { padding-top: 0.625rem; padding-bottom: 0.625rem; }

  /* kill sticky :hover states that linger after a tap on touch devices */
  .mt-alert:hover { transform: none; }
}

/* ═══ HORIZONTAL-SCROLL ESCAPE HATCH ══════════════════════════════════════
   Opt-in wrapper for any wide table/grid a template can't otherwise shrink:
   <div class="mt-scroll-x"><table class="mt-table">…</table></div>            */
.mt-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mt-scroll-x::-webkit-scrollbar { height: 6px; }
.mt-scroll-x::-webkit-scrollbar-thumb { background: var(--mt-ink-700); border-radius: 3px; }

/* When inside the Presenter iframe, trim the module's own outer padding a touch
   so the framed content uses the full stage. Toggled via ?embed=1 → <html data-embed>. */
html[data-embed] .mt-container { padding-top: 1rem; padding-bottom: 1.5rem; }