/* These overrides apply only to compact viewports. Desktop keeps its existing shell. */
.mobile-menu-toggle, .mobile-footer-toggle, .mobile-footer-section-toggle { display: none; }

@media (max-width: 900px) {
  :root {
    --mobile-shell-bg: #081321;
    --mobile-shell-text: #f0f4f8;
    --mobile-shell-muted: #a7b5c5;
    --mobile-shell-line: rgba(148, 163, 184, .25);
    --mobile-shell-accent: #00d9ee;
  }
  :root[data-theme="light"] {
    --mobile-shell-bg: #f4f7fa;
    --mobile-shell-text: #0f172a;
    --mobile-shell-muted: #475569;
    --mobile-shell-line: rgba(15, 23, 42, .16);
    --mobile-shell-accent: #0077b6;
  }
  body.mobile-shell-active {
    padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px));
  }
  /* Fixed minimum card widths must not enlarge the mobile layout viewport. */
  main .compact-grid, main .grid2, main .grid3, main .value-strip,
  main .sales-plan-grid, main .access-steps, main .article-nav,
  main .status-lookup-layout { grid-template-columns: minmax(0, 1fr); }
  main .card, main article, main .sales-plan-card { min-width: 0; overflow-wrap: anywhere; }
  main img, main video { max-width: 100%; }
  main input, main select, main textarea { max-width: 100%; min-width: 0; }
  .nav.mobile-shell-nav {
    background: var(--mobile-shell-bg);
    max-height: 100vh;
    max-height: 100svh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .mobile-shell-nav .navin {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    height: auto;
    min-height: 68px;
    gap: 6px 12px;
    padding: 10px 16px;
    width: 100%;
    max-width: 100%;
  }
  .mobile-shell-nav .navin > .brand { min-width: 0; font-size: 1.1rem; }
  .mobile-shell-nav .brand .logo { flex-shrink: 0; }
  .mobile-shell-nav .navact {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    min-width: 0;
    gap: 8px;
    font-size: .85rem;
  }
  .mobile-shell-nav .navact > a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: 8px;
  }
  .mobile-shell-nav .theme-switch-wrapper { min-height: 44px; }
  .mobile-shell-nav .menu.minimal-menu {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    padding-block: 8px;
    border-top: 1px solid var(--mobile-shell-line);
  }
  .mobile-shell-nav .menu[hidden] { display: none; }
  .mobile-shell-nav .menu a {
    display: flex;
    align-items: center;
    min-height: 46px;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--mobile-shell-text);
    overflow-wrap: anywhere;
  }
  .mobile-shell-nav .menu a:hover,
  .mobile-shell-nav .menu a:focus-visible { background: var(--mobile-shell-line); }
  .mobile-menu-toggle, .mobile-footer-toggle, .mobile-footer-section-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font: inherit;
    color: var(--mobile-shell-text);
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-menu-toggle {
    grid-column: 2;
    grid-row: 1;
    min-height: 44px;
    min-width: 44px;
    padding: 8px 12px;
    border: 1px solid var(--mobile-shell-line);
    border-radius: 10px;
    background: transparent;
    font-size: .85rem;
  }
  .mobile-menu-toggle::before { content: '\2630'; font-size: 1.25rem; line-height: 1; }
  .mobile-menu-toggle[aria-expanded="true"]::before { content: '\00d7'; }
  .footer.mobile-shell-footer,
  .footer.mobile-shell-footer:hover,
  .footer.mobile-shell-footer:focus-within {
    position: fixed;
    inset: auto 0 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0 0 env(safe-area-inset-bottom, 0px);
    max-height: 75vh;
    max-height: min(75svh, 560px);
    background: var(--mobile-shell-bg);
    border-top: 1px solid var(--mobile-shell-accent);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 28px rgba(0, 0, 0, .16);
    transform: translateY(calc(100% - 52px - env(safe-area-inset-bottom, 0px)));
    opacity: 1;
    visibility: visible;
    overflow: hidden;
  }
  .footer.mobile-shell-footer.is-open { transform: translateY(0); }
  .mobile-footer-toggle {
    flex-shrink: 0;
    width: 100%;
    height: 52px;
    min-height: 52px;
    padding: 12px 20px;
    border: 0;
    background: transparent;
    font-size: .85rem;
    line-height: 1.25;
    font-weight: 600;
  }
  .mobile-footer-toggle::after,
  .mobile-footer-section-toggle::after { content: '+'; font-size: 1.25rem; }
  .mobile-footer-toggle[aria-expanded="true"]::after,
  .mobile-footer-section-toggle[aria-expanded="true"]::after { content: '\2212'; }
  .mobile-shell-footer .footgrid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 0 16px;
    gap: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .mobile-shell-footer .footgrid > div {
    min-width: 0;
    border-top: 1px solid var(--mobile-shell-line);
  }
  .mobile-footer-section-toggle {
    width: 100%;
    min-height: 48px;
    padding: 10px 4px;
    border: 0;
    background: transparent;
    text-align: start;
    font-weight: 600;
    font-size: .85rem;
  }
  .mobile-footer-section-panel { padding: 0 4px 12px; }
  .mobile-footer-section-panel[hidden] { display: none; }
  .mobile-shell-footer .footgrid a {
    display: flex;
    align-items: center;
    min-height: 44px;
    margin: 0;
    padding-block: 8px;
    color: var(--mobile-shell-muted);
    overflow-wrap: anywhere;
  }
  .mobile-shell-footer .footgrid .social-link { min-width: 44px; justify-content: center; }
  .mobile-shell-footer .footer-release {
    flex-shrink: 0;
    width: 100%;
    padding: 10px 20px;
    color: var(--mobile-shell-muted);
    text-align: start;
  }
  .mobile-menu-toggle:focus-visible,
  .mobile-footer-toggle:focus-visible,
  .mobile-footer-section-toggle:focus-visible {
    outline: 2px solid var(--mobile-shell-accent);
    outline-offset: -3px;
  }
  @media (prefers-reduced-motion: reduce) {
    .footer.mobile-shell-footer { transition: none; }
  }
}