/* Navigation belongs to the active design pack. Native links and aria-current
   remain the route contract; motion is limited to a short press response. */
:root[data-design] .mobile-nav{
  position:fixed;z-index:30;top:auto;bottom:calc(8px + var(--navigation-safe-bottom,env(safe-area-inset-bottom)));
  inset-inline:auto;left:max(12px,var(--navigation-safe-left,env(safe-area-inset-left)));right:max(12px,var(--navigation-safe-right,env(safe-area-inset-right)));
  width:auto;max-width:600px;margin:0 auto;min-height:78px;height:auto;
  grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch;gap:2px;
  padding:6px;border:1px solid var(--line);border-radius:18px;
  background:var(--surface);color:var(--text);box-shadow:0 4px 18px #00000014;
  backdrop-filter:none;-webkit-backdrop-filter:none;overflow:visible;
  isolation:isolate;
}
:root[data-design] .mobile-nav>a{
  display:flex;position:relative;flex-direction:column;align-items:center;justify-content:center;
  min-width:0;min-height:64px;width:auto;padding:3px 1px;gap:2px;
  border:0;border-radius:12px;background:transparent;box-shadow:none;
  color:var(--muted);font-family:var(--font-ui);font-size:11.5px;font-weight:600;
  line-height:1.5;text-decoration:none;white-space:nowrap;
  transition:transform 140ms var(--ease-out),opacity 140ms var(--ease-out);
  -webkit-tap-highlight-color:transparent;
}
:root[data-design] .mobile-nav>a::before,
:root[data-design] .mobile-nav>a::after{content:none}
:root[data-design] .mobile-nav>a[aria-current=page]{
  background:transparent;border:0;color:var(--accent);box-shadow:none;font-weight:700;
}
:root[data-design] .mobile-nav .nav-icon{
  position:relative;display:grid;place-items:center;flex:none;
  width:40px;height:34px;border:1px solid transparent;border-radius:12px;
  background:transparent;color:inherit;box-shadow:none;
}
:root[data-design] .mobile-nav .nav-icon>svg{display:block;width:22px;height:22px;flex:none}
:root[data-design] .mobile-nav .nav-label{display:block;max-width:100%;line-height:18px;white-space:nowrap}
:root[data-design] .mobile-nav>a:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
:root[data-design] .mobile-nav>a:active{transform:scale(.96);opacity:.78}

/* Lunar: an olive bookmark resting in the rounded cover of a notebook. */
:root[data-design=lunar] .mobile-nav{border-radius:18px;background:var(--surface)}
:root[data-design=lunar] .mobile-nav>a[aria-current=page] .nav-icon{
  background:var(--accent);color:var(--accent-ink);border-radius:12px;
}
:root[data-design=lunar] .mobile-nav>a[aria-current=page]::after{
  content:"";position:absolute;bottom:1px;width:16px;height:2px;border-radius:2px;background:var(--accent);
}

/* Folio: a flat index strip with quiet rules rather than individual tiles. */
:root[data-design=folio] .mobile-nav{border-radius:2px;padding:5px 4px;background:var(--surface);box-shadow:none}
:root[data-design=folio] .mobile-nav>a{border-radius:0}
:root[data-design=folio] .mobile-nav>a:not(:last-child){border-inline-end:1px solid var(--line)}
:root[data-design=folio] .mobile-nav>a[aria-current=page]{color:var(--text)}
:root[data-design=folio] .mobile-nav>a[aria-current=page] .nav-icon{color:var(--text)}
:root[data-design=folio] .mobile-nav>a[aria-current=page]::after{
  content:"";position:absolute;bottom:0;width:28px;height:2px;background:var(--text);
}

/* Gallery: a sculpted circular selection sitting inside a rounded display tray. */
:root[data-design=gallery] .mobile-nav{border-radius:24px;padding:6px;background:var(--surface);box-shadow:0 5px 18px #00000018}
:root[data-design=gallery] .mobile-nav .nav-icon{width:36px;height:36px;border-radius:50%}
:root[data-design=gallery] .mobile-nav>a[aria-current=page] .nav-icon{
  background:var(--accent);color:var(--accent-ink);box-shadow:inset 0 -2px 0 #00000020;
}

/* Aether: a luminous, solid-backed glass edge and one static petal. No blur,
   particle timeline, or decorative layer can intercept a navigation target. */
:root[data-design=aether] .mobile-nav{
  border:1px solid var(--aether-edge);border-radius:24px;
  background:linear-gradient(135deg,var(--surface),var(--aether-panel-deep));
  box-shadow:inset 0 1px 0 #ffffff30,0 5px 18px #00000018;
}
:root[data-design=aether] .mobile-nav .nav-icon{width:40px;height:34px;border-radius:15px}
:root[data-design=aether] .mobile-nav>a[aria-current=page] .nav-icon{
  background:var(--aether-button);color:var(--aether-button-ink);border-color:var(--aether-edge);
}
:root[data-design=aether] .mobile-nav>a[aria-current=page] .nav-icon::after{
  content:"";position:absolute;pointer-events:none;top:-3px;inset-inline-end:-3px;
  width:8px;height:12px;border:1px solid var(--aether-edge);border-radius:80% 15% 80% 15%;
  background:var(--surface);transform:rotate(25deg);
}

/* Faris: steel plating, inset brass corners, and a compact blue standard.
   The selected banner belongs to the icon, avoiding the old oversized box. */
:root[data-design=faris] .mobile-nav{
  border:1px solid var(--faris-edge);border-radius:6px;
  background:var(--surface);box-shadow:inset 0 0 0 3px var(--surface),inset 0 0 0 4px var(--line),0 5px 18px #00000020;
}
:root[data-design=faris] .mobile-nav::before,
:root[data-design=faris] .mobile-nav::after{
  content:"";position:absolute;pointer-events:none;width:12px;height:12px;
  border-color:var(--faris-metal);border-style:solid;
}
:root[data-design=faris] .mobile-nav::before{top:3px;inset-inline-start:3px;border-width:1px 0 0 1px;border-radius:2px 0 0 0}
:root[data-design=faris] .mobile-nav::after{bottom:3px;inset-inline-end:3px;border-width:0 1px 1px 0;border-radius:0 0 2px 0}
:root[data-design=faris] .mobile-nav .nav-icon{border-radius:3px;width:38px;height:34px}
:root[data-design=faris] .mobile-nav>a[aria-current=page] .nav-icon{
  background:var(--faris-button);color:#f6f9ff;border:1px solid var(--faris-metal);
  box-shadow:inset 0 0 0 2px #ffffff10;border-radius:3px 3px 8px 8px;
}

/* Compact landscape keeps the same four destinations clear of the safe area. */
@media (max-width:1099px) and (max-height:540px) and (orientation:landscape){
  :root[data-design] .mobile-nav{top:auto;bottom:calc(6px + var(--navigation-safe-bottom,env(safe-area-inset-bottom)));min-height:58px;padding:4px;max-width:600px}
  :root[data-design] .mobile-nav>a{flex-direction:row;gap:5px;min-height:48px;padding:2px;font-size:11.5px}
  :root[data-design] .mobile-nav .nav-icon{width:32px;height:32px}
  :root[data-design] .mobile-nav .nav-icon>svg{width:21px;height:21px}
  :root[data-design=lunar] .mobile-nav>a[aria-current=page]::after,
  :root[data-design=folio] .mobile-nav>a[aria-current=page]::after{bottom:0}
}

/* Desktop has room for one centered instrument panel inside the header. */
@media (min-width:1100px){
  :root[data-design] .mobile-nav{
    top:10px;bottom:auto;inset-inline:0;width:520px;max-width:520px;
    min-height:54px;padding:4px;gap:2px;z-index:25;
  }
  :root[data-design] .mobile-nav>a{flex-direction:row;min-height:44px;gap:7px;padding:2px 4px;font-size:12px}
  :root[data-design] .mobile-nav .nav-icon{width:32px;height:32px}
  :root[data-design] .mobile-nav .nav-icon>svg{width:21px;height:21px}
  :root[data-design] .mobile-nav .nav-label{line-height:18px}
  :root[data-design=lunar] .mobile-nav>a[aria-current=page]::after,
  :root[data-design=folio] .mobile-nav>a[aria-current=page]::after{bottom:0}
}
@media (hover:hover) and (pointer:fine){
  :root[data-design] .mobile-nav>a:hover{background:transparent;color:var(--accent);opacity:.82}
  :root[data-design] .mobile-nav>a[aria-current=page]:hover{color:var(--accent)}
}
@media (prefers-reduced-motion:reduce){
  :root[data-design] .mobile-nav>a{transition:none}
  :root[data-design] .mobile-nav>a:active{transform:none}
}
:root[data-design].input-keyboard .mobile-nav>a{transition:none}
:root[data-design].input-keyboard .mobile-nav>a:active{transform:none}

:root[data-design][data-motion=reduced] .mobile-nav>a{transition:none}
:root[data-design][data-motion=reduced] .mobile-nav>a:active{transform:none}