/* ═══════════════════════════════════════════
   vialprep — Mobile Navigation CSS
   Extracted from wiki.css for pages that
   don't load the full wiki stylesheet.
   ═══════════════════════════════════════════ */

/* ── Variables (duplicated for standalone use) ── */
:root {
  --mn-ink:#0D0D0D;--mn-yellow:#FFDF01;--mn-paper:#FDFCF6;--mn-muted:#7A7350;
  --mn-olive:#3A3400;--mn-tint:#F3E9A8;--mn-tint-3:#FFF7C2;--mn-rule:#E8E6DE;
  --mn-display:Manrope,system-ui,sans-serif;
  --mn-mono:'JetBrains Mono',ui-monospace,monospace;
  --mn-ease:cubic-bezier(.2,.8,.2,1);
}

/* ── 14c: Brand row ── */
.topbar-brand{background:var(--mn-yellow);border-bottom:2px solid var(--mn-ink)}
.topbar-brand__in{display:flex;align-items:center;justify-content:space-between;height:48px;padding:0 10px 0 16px;max-width:1160px;margin:0 auto}
.topbar-brand__logo{display:flex;align-items:center;height:44px;flex-shrink:0}
.topbar-brand__logo img{height:18px;width:auto;display:block}
.topbar-brand__cta{flex:none;font:700 12px/1 var(--mn-display);text-transform:uppercase;letter-spacing:.04em;height:36px;padding:0 11px;display:inline-flex;align-items:center;background:var(--mn-ink);color:var(--mn-yellow);border:2px solid var(--mn-ink);text-decoration:none;white-space:nowrap}
.topbar-brand__cta:hover{background:var(--mn-paper);color:var(--mn-ink)}
@media(min-width:1024px){.topbar-brand{display:none}}

/* ── 14c: Context strip ── */
.topbar-ctx{position:sticky;top:0;z-index:20;background:var(--mn-paper);border-bottom:2px solid var(--mn-ink);box-shadow:0 3px 0 var(--mn-yellow)}
.topbar-ctx__in{display:grid;grid-template-columns:36px minmax(0,1fr) 44px;align-items:center;height:44px;padding:0 8px;max-width:1160px;margin:0 auto}
.topbar-ctx__in--explore{grid-template-columns:36px minmax(0,1fr) 40px 44px}
.topbar-ctx__back{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;font:500 15px/1 var(--mn-mono);color:var(--mn-ink);cursor:pointer;padding:0}
.topbar-ctx__back:empty{visibility:hidden}
.topbar-ctx__title{min-width:0;display:flex;flex-direction:column;gap:1px;text-align:center}
.topbar-ctx__crumb{font:600 9.5px/1 var(--mn-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mn-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-ctx__name{font:800 15px/1.1 var(--mn-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-ctx__search{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;color:var(--mn-ink);cursor:pointer;padding:0}
.topbar-ctx__search svg{width:21px;height:21px}
.topbar-ctx__explore{width:40px;height:44px;display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;color:var(--mn-ink);cursor:pointer;padding:0}
.topbar-ctx__explore svg{width:20px;height:20px}
/* 14b variant: search IS the bar (home + browse) */
.topbar-ctx__in--search{display:flex;align-items:center;gap:8px;height:44px;padding:0 8px}
.topbar-ctx__mark{width:36px;height:36px;flex:none;background:var(--mn-ink);display:inline-flex;align-items:center;justify-content:center}
.topbar-ctx__mark img{height:22px;width:auto;display:block}
.topbar-ctx__field{flex:1;min-width:0;display:flex;align-items:center;gap:8px;height:38px;padding:0 10px;background:var(--mn-paper);border:2px solid var(--mn-ink);color:var(--mn-muted);font:400 14px/1 Inter,system-ui,sans-serif;text-decoration:none;overflow:hidden}
.topbar-ctx__field span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(min-width:1024px){.topbar-ctx{display:none}}

/* ── 16a: Four-tab bar ── */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--mn-paper);border-top:2px solid var(--mn-ink);padding-bottom:max(0px,env(safe-area-inset-bottom))}
.tabbar__grid{display:grid;grid-template-columns:repeat(4,1fr);height:64px}
.tabbar__item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:0;border:0;background:transparent;color:var(--mn-ink);text-decoration:none;-webkit-tap-highlight-color:transparent;transition:background .18s var(--mn-ease)}
.tabbar__item svg{width:23px;height:23px}
.tabbar__item span:last-child{font:500 10.5px/1 var(--mn-mono);letter-spacing:.12em;text-transform:uppercase}
.tabbar__item[aria-current]{background:var(--mn-yellow);box-shadow:0 3px 0 var(--mn-ink) inset}
.tabbar__item[aria-current] span:last-child{font-weight:600}
@media(hover:hover){.tabbar__item:hover:not([aria-current]){background:var(--mn-tint-3)}}
.has-mobile-nav{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
@media(min-width:1024px){.tabbar{display:none}.has-mobile-nav{padding-bottom:0}}

/* ── Hide old uhead on mobile when new nav present ── */
.has-mobile-nav .uhead{display:none}
@media(min-width:1024px){.has-mobile-nav .uhead{display:block}}
.mobile-only{display:block}
@media(min-width:1024px){.mobile-only{display:none!important}}