/* FOREVER:NEON — Compact handset frame.
   Adaptive Shell Proposal v3, Section 6 (locked, corrected mapping).
   Five destinations, fixed count and order: Signals, Operations, Archive,
   Network, Operator. Renders as a bottom nav in compact mode and a top tab
   bar in medium/expanded mode — same markup, same data, presentation only
   changes with width (v3 Section 4). This is Layer 1 chrome: it is only
   mounted on handset-native hub pages (dashboard, signals, operations hub,
   archive hub, network, operator), never on Layer 2 mission/instrument
   skins, which keep only the mandatory exit affordance. */

.fn-handset-shell{
  position: fixed;
  left: 0; right: 0;
  z-index: 2147483000;
  display: flex;
  background: rgba(5,5,13,.96);
  border-top: 1px solid rgba(0,245,212,.22);
  backdrop-filter: blur(6px);
  font-family: 'Share Tech Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
/* Compact: bottom tab bar, safe-area aware. */
.fn-handset-shell{
  bottom: 0;
  padding-bottom: var(--fn-safe-bottom, env(safe-area-inset-bottom, 0px));
  padding-left: var(--fn-safe-left, env(safe-area-inset-left, 0px));
  padding-right: var(--fn-safe-right, env(safe-area-inset-right, 0px));
  border-top: 1px solid rgba(0,245,212,.22);
}
.fn-handset-shell__tabs{
  display: flex;
  width: 100%;
}
.fn-handset-shell__tab{
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: var(--fn-touch-min, 44px);
  padding: 8px 4px;
  color: #9992a0;
  text-decoration: none;
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 0;
  background: transparent;
}
.fn-handset-shell__tab-icon{
  font-size: 15px;
  line-height: 1;
}
.fn-handset-shell__tab[aria-current="page"]{
  color: #00f5d4;
}
.fn-handset-shell__tab:focus-visible{
  outline: 2px solid #00f5d4;
  outline-offset: -2px;
}

/* Medium/expanded: top tab bar, no bottom safe-area padding needed. */
:root[data-fn-mode="medium"] .fn-handset-shell,
:root[data-fn-mode="expanded"] .fn-handset-shell{
  top: 0; bottom: auto;
  padding-top: var(--fn-safe-top, env(safe-area-inset-top, 0px));
  padding-bottom: 0;
  border-top: 0;
  border-bottom: 1px solid rgba(0,245,212,.22);
}
:root[data-fn-mode="medium"] .fn-handset-shell__tabs,
:root[data-fn-mode="expanded"] .fn-handset-shell__tabs{
  max-width: 960px;
  margin: 0 auto;
  justify-content: center;
  gap: 4px;
}
:root[data-fn-mode="medium"] .fn-handset-shell__tab,
:root[data-fn-mode="expanded"] .fn-handset-shell__tab{
  flex: 0 0 auto;
  flex-direction: row;
  padding: 12px 18px;
  font-size: 11px;
}

/* Body padding so page content never sits under the bar. Applied by the
   mount script via a class, not globally, so pages without the shell are
   unaffected. */
.fn-handset-shell-padded{
  padding-bottom: calc(var(--fn-handset-nav-height, 64px) + var(--fn-safe-bottom, env(safe-area-inset-bottom, 0px)));
}
:root[data-fn-mode="medium"] .fn-handset-shell-padded,
:root[data-fn-mode="expanded"] .fn-handset-shell-padded{
  padding-bottom: 0;
  padding-top: calc(var(--fn-handset-nav-height, 64px) + var(--fn-safe-top, env(safe-area-inset-top, 0px)));
}

/* Secondary utility drawer: books, ARG guide, store, account, accessibility,
   safety/support. Off-canvas, opened by the drawer toggle tab. */
.fn-handset-drawer{
  position: fixed;
  inset: 0;
  z-index: 2147483100;
  display: none;
  background: rgba(2,2,6,.72);
}
.fn-handset-drawer.is-open{ display: block; }
.fn-handset-drawer__panel{
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: min(320px, 86vw);
  background: #0c0c18;
  border-left: 1px solid rgba(0,245,212,.22);
  padding: calc(var(--fn-space-5) + var(--fn-safe-top, env(safe-area-inset-top,0px))) var(--fn-space-4) var(--fn-space-5);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--fn-space-2);
}
.fn-handset-drawer__close{
  align-self: flex-end;
  min-height: var(--fn-touch-min, 44px);
  min-width: var(--fn-touch-min, 44px);
  background: transparent;
  border: 1px solid rgba(0,245,212,.35);
  border-radius: var(--fn-radius-sm);
  color: #00f5d4;
  font-size: 18px;
}
.fn-handset-drawer__link{
  display: flex;
  align-items: center;
  min-height: var(--fn-touch-min, 44px);
  padding: 10px 12px;
  border-radius: var(--fn-radius-sm);
  color: #e8e4d8;
  text-decoration: none;
  border: 1px solid #1e1e32;
}
.fn-handset-drawer__link:focus-visible{
  outline: 2px solid #00f5d4;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce){
  .fn-handset-shell, .fn-handset-drawer{ transition: none !important; }
}