/* Mobile layout under 860px: bottom bar, drawers, On this page disclosure. Desktop rules live in shell.css. */
@media (max-width: 859.98px) {
  :root { --ds-bar-h: calc(60px + env(safe-area-inset-bottom, 0px)); --ds-dock-h: var(--ds-bar-h); }
  .ds-frame { margin-left: 0; padding-bottom: var(--ds-bar-h); }
  body.ds-flyout-open::after { content: none; }   /* DS-85: no scrim where the flyout is full width */

  /* Rail becomes a fixed bottom bar */
  .ds-rail, body.is-collapsed .ds-rail { inset: auto 0 0 0; z-index: 60; width: auto; height: var(--ds-bar-h); padding: 0 0 env(safe-area-inset-bottom, 0px); gap: 0; flex-direction: row; align-items: stretch; border-right: 0; border-top: 1px solid var(--ds-border-divider); }
  .ds-side-head, .ds-side-label, .ds-rail-toggle, .ds-rail-more { display: none !important; }
  .ds-home-search { display: none; }
  .ds-drawer-more { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
  .ds-drawer-more :is(a, button) { padding: 6px 10px; border: 1px solid var(--ds-border-divider); border-radius: var(--ds-r-button); background: var(--ds-surface-raised); color: var(--ds-text-primary); font: 500 13px var(--ds-font); text-decoration: none; cursor: pointer; }
  .ds-rail-foot { padding-top: 0; border-top: 0; }
  .ds-rail-items, .ds-rail-foot, body.is-collapsed :is(.ds-rail-items, .ds-rail-foot) { flex-direction: row; align-items: stretch; gap: 0; min-width: 0; overflow: visible; }
  .ds-rail-items { flex: 6 1 auto; }
  .ds-rail-foot { flex: 2 1 auto; }
  .ds-rail-item, .ds-rail-foot .ds-rail-item, body.is-collapsed .ds-rail-item { flex: 1 1 auto; min-width: 0; width: auto; height: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 0 3px; border-radius: 0; }
  .ds-rail-item::after { display: none; }
  .ds-rail-label { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 12px/1.2 var(--ds-font); letter-spacing: -0.02em; }
  .ds-rail-item.is-active { background: none; }
  .ds-rail-item.is-active::before { content: ""; position: absolute; left: 20%; right: 20%; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--ds-brand); }

  /* Flyout mega-menu becomes a full-height drawer from the rail item */
  .ds-flyout-panel.is-on, .ds-flyout-panel.is-on:not(:has(.ds-flyout-main)) { grid-template-columns: minmax(0, 1fr); }
  .ds-flyout-main ul { grid-template-columns: minmax(0, 1fr); }
  .ds-flyout { left: 0; width: 100%; bottom: var(--ds-bar-h); border-right: 0; box-shadow: none; transform: translateY(12px); }
  .ds-flyout-panel { padding: 48px 0 0; }
  .ds-flyout-close { display: grid; place-items: center; position: sticky; top: 8px; float: right; width: 44px; height: 44px; margin: 8px 8px -52px 0; z-index: 1; border: 0; border-radius: var(--ds-r-button); background: var(--ds-surface-subtle); color: var(--ds-text-primary); cursor: pointer; }
  .ds-flyout-panel.is-on { grid-template-columns: minmax(0, 1fr); gap: 20px; }

  /* Top bar keeps the Menu button and search only */
  .ds-topbar { gap: 8px; padding: 0 12px; background: var(--ds-surface-raised); border-bottom: 1px solid var(--ds-border-divider); }
  .ds-crumbs-wrap, .ds-toplinks, .ds-search kbd { display: none; }
  .ds-search-wrap { display: block; flex: 1; min-width: 0; }
  .ds-body { padding: 0; gap: 0; }
  .ds-tree { margin-left: 0; max-height: none; }
  .ds-menu-btn { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border: 1px solid var(--ds-border-default); border-radius: var(--ds-r-input); background: var(--ds-surface-base); color: var(--ds-text-primary); font: 600 14px var(--ds-font); cursor: pointer; }
  body:not(:has(.ds-tree)) .ds-menu-btn { display: none; }

  /* Section tree becomes a left drawer */
  .ds-body { grid-template-columns: minmax(0, 1fr); }
  .ds-tree { display: block; position: fixed; z-index: 55; top: 0; bottom: var(--ds-bar-h); left: 0; width: min(320px, 86vw); height: auto; padding: 20px 12px 24px 16px; background: var(--ds-surface-raised); box-shadow: 16px 0 40px rgba(20, 28, 50, 0.16); transform: translateX(-100%); visibility: hidden; transition: transform 180ms var(--ds-ease), visibility 0s linear 180ms; }
  body.ds-tree-open .ds-tree { transform: none; visibility: visible; transition: transform 180ms var(--ds-ease); }
  .ds-drawer-scrim { position: fixed; z-index: 54; inset: 0 0 var(--ds-bar-h) 0; background: rgba(12, 15, 22, 0.45); }

  /* Content, and On this page as a disclosure above it */
  .ds-main, .ds-main.has-toc { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 12px; }
  .ds-card { padding: 20px 16px; }
  .ds-toc { display: block; order: -1; position: static; max-height: none; overflow: visible; border: 1px solid var(--ds-border-subtle); border-radius: var(--ds-r-card); background: var(--ds-surface-raised); }
  .ds-toc-title { display: flex; align-items: center; justify-content: space-between; width: 100%; margin: 0; padding: 12px 14px; cursor: pointer; }
  .ds-toc-title::after { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform 150ms var(--ds-ease); }
  .ds-toc.is-open .ds-toc-title::after { transform: rotate(-135deg); }
  .ds-toc ol { display: none; margin: 0 14px 12px; }
  .ds-toc.is-open ol { display: block; }
  .ds-settings { left: 8px; right: 8px; width: auto; bottom: calc(var(--ds-bar-h) + 8px); }
}