/* ═══════════════════════════════════════════════════════════
   MigrationProvision — Mobile responsive layer
   Slim header → hamburger + mobile drawer on small screens.
   Portal sidebar → off-canvas drawer + bottom tab-bar on mobile.
   Defense-in-depth: every inline SVG without explicit size gets clamped.
═══════════════════════════════════════════════════════════ */

/* ── SVG safety net ─────────────────────────────────────
   Some inline SVGs in the HTML templates have no width/height attribute. Without
   explicit sizing they expand to fill their container. Clamp every SVG inside a
   button, link or icon container to a reasonable default. */
.btn svg,
.feature__link svg,
.tap-link svg,
.side-link svg,
.cluster__more svg,
.cluster-new__more svg,
.article-card__cta svg,
.case-row svg:not(.icon),
.head-slim svg,
.foot-slim svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.btn--lg svg, .btn--xl svg {
  width: 18px;
  height: 18px;
}
.card__icon svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.audit-strip__icon svg,
.quick__icon svg,
.quick-new__icon svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* ── Slim-header mobile: hamburger + drawer ────────────── */
.head-slim__burger {
  display: none;
  align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
}
.head-slim__burger svg { width: 20px; height: 20px; stroke: var(--c-ink); stroke-width: 2; fill: none; }
.head-slim__burger:focus-visible { outline: none; box-shadow: var(--sh-focus); }

@media (max-width: 760px) {
  .head-slim__nav { display: none; }
  .head-slim__burger { display: inline-flex; }
  .head-slim__cta-desktop { display: none; }
}

/* ── Mobile drawer (replaces .drawer for slim-header) ── */
.m-drawer {
  position: fixed; inset: 0;
  background: rgba(14, 42, 71, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9000;
  display: none;
  opacity: 0;
  transition: opacity .22s ease;
}
.m-drawer.is-open { display: block; opacity: 1; }
.m-drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 86%; max-width: 360px;
  background: var(--c-paper);
  padding: 24px;
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.2,.7,.3,1);
  display: flex; flex-direction: column;
  box-shadow: -16px 0 40px rgba(14,42,71,.18);
}
.m-drawer.is-open .m-drawer__panel { transform: translateX(0); }
.m-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 32px;
}
.m-drawer__close {
  width: 40px; height: 40px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border);
  background: transparent;
  cursor: pointer;
}
.m-drawer__close svg { width: 20px; height: 20px; stroke: var(--c-ink); stroke-width: 2; fill: none; }

.m-drawer__nav {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column;
}
.m-drawer__nav a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 4px;
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--c-ink);
  border-bottom: 1px solid rgba(14,42,71,.08);
  letter-spacing: -.01em;
}
.m-drawer__nav a::after {
  content: "›";
  font-family: var(--font-serif);
  font-size: 28px;
  color: var(--c-authority);
  line-height: 1;
}
.m-drawer__cta {
  margin-top: auto;
  padding-top: 24px;
}
.m-drawer__cta .btn { width: 100%; padding: 16px; font-size: 16px; border-radius: 12px; }

/* ── Portal sidebar: mobile off-canvas + topbar trigger ── */
@media (max-width: 980px) {
  .app { grid-template-columns: 1fr; }

  /* Portal mobile topbar — slim, persistent */
  .portal-topbar {
    display: flex;
    align-items: center; justify-content: space-between;
    padding: 14px 16px;
    background: var(--c-paper);
    border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 200;
  }
  .portal-topbar__burger {
    width: 40px; height: 40px;
    border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--border);
    background: transparent;
  }
  .portal-topbar__burger svg { width: 20px; height: 20px; stroke: var(--c-ink); stroke-width: 2; fill: none; }

  .sidebar {
    position: fixed !important;
    top: 0; left: 0; bottom: 0;
    width: 280px; max-width: 86vw;
    z-index: 9100;
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(.2,.7,.3,1);
    box-shadow: 16px 0 40px rgba(14,42,71,.18);
  }
  .sidebar.is-open { transform: translateX(0); }

  .canvas {
    padding-bottom: 96px; /* leave room for bottom tab bar */
  }
}
@media (min-width: 981px) {
  .portal-topbar { display: none; }
}

.portal-topbar__brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--c-ink);
  font-size: 17px;
  letter-spacing: -.01em;
}
.portal-topbar__brand .brand__mark {
  width: 32px; height: 32px;
  border-radius: 6px;
  background: var(--c-ink);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}

/* ── Bottom tab bar (portal · mobile only) ─────────────── */
.tabbar {
  display: none;
}
@media (max-width: 980px) {
  .tabbar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0;
    background: var(--c-paper);
    border-top: 1px solid var(--border);
    z-index: 200;
    padding-bottom: env(safe-area-inset-bottom, 0);
    box-shadow: 0 -10px 24px rgba(14,42,71,.06);
  }
  .tabbar__btn {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 4px;
    padding: 10px 4px 12px;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 500;
    color: var(--c-slate-500);
    text-decoration: none;
    border: 0; background: transparent;
    transition: color .15s;
  }
  .tabbar__btn svg {
    width: 22px; height: 22px;
    stroke: currentColor; stroke-width: 1.6; fill: none;
  }
  .tabbar__btn.is-active {
    color: var(--c-ink);
    font-weight: 600;
  }
  .tabbar__btn.is-active svg { stroke-width: 2; }
  .tabbar__dot {
    position: absolute;
    top: 8px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--c-authority);
    transform: translateX(12px);
  }
}

/* ── Hero responsive — single column with smaller illustration on mobile ── */
@media (max-width: 760px) {
  .stage-hero { grid-template-columns: 1fr !important; gap: 32px !important; }
  .stage-hero__visual img,
  .stage-hero__visual svg { max-width: 320px !important; margin: 0 auto; }
  .stage--hero { padding-top: 64px !important; padding-bottom: 56px !important; }
  .display-headline { font-size: clamp(2.25rem, 8vw, 3rem) !important; }
}

/* ── Mobile-only utility classes ──────────────────────── */
@media (min-width: 761px) {
  .show-mobile-only { display: none !important; }
}
@media (max-width: 760px) {
  .hide-mobile-only { display: none !important; }
}

/* ── Anchor scroll padding so #hash anchors don't hide under sticky header ── */
html { scroll-padding-top: 80px; }

/* ── Foot-slim mobile stacking ─────────────────────────── */
@media (max-width: 640px) {
  .foot-slim .container { flex-direction: column; align-items: flex-start; gap: 16px; }
  .foot-slim__nav { flex-direction: column; gap: 8px; width: 100%; }
  .foot-slim__legal { flex-direction: column; gap: 8px; }
}