/* ==========================================================================
   IKARUS SYSTEMS — "App Mode" (phone experience)
   Activated by html.app-mode (device.js sets this based on device / user
   choice). Everything here is scoped under that class so the desktop
   site is completely untouched when app-mode is off.
   ========================================================================== */

html.app-mode{ --tabbar-h: 68px; }

/* kill the desktop top nav + hamburger entirely — the tab bar replaces it */
html.app-mode .ticker-bar{ display:none; }
html.app-mode header.site-header{
  padding:0; height:54px; display:flex; align-items:center;
  background:var(--ink); backdrop-filter:none;
  border-bottom:none;
  box-shadow:0 1px 0 var(--line-dark), 0 0 16px rgba(244,78,47,0.12);
}
html.app-mode .nav{ padding:0 16px; height:54px; }
html.app-mode .nav-links{ display:none !important; }
html.app-mode .nav-toggle{ display:none !important; }
html.app-mode .brand img{ width:22px; height:22px; }
html.app-mode .brand-word{ font-size:15px; }

/* live status chip that replaces the old ticker strip — a quick native-app
   "here's the headline number" instead of a scrolling marquee */
html.app-mode header.site-header .nav::after{
  content: attr(data-live-chip);
  margin-left:auto;
  display:flex; align-items:center; gap:6px;
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:0.04em; text-transform:uppercase;
  color:var(--signal);
  border:1px solid var(--line-dark); border-radius:100px;
  padding:6px 11px;
}

/* give content room for the fixed header + bottom tab bar */
html.app-mode body{ padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
html.app-mode main{ display:block; }

/* force a single, stacked, card-feed layout regardless of viewport width —
   this is what makes it read as "an app" rather than "a squeezed website" */
html.app-mode .grid-2,
html.app-mode .grid-3,
html.app-mode .footer-grid{ grid-template-columns:1fr !important; gap:16px !important; }
html.app-mode section{ padding:28px 0 !important; }
html.app-mode .wrap{ padding:0 16px !important; }
html.app-mode h1{ font-size:clamp(26px,7vw,34px) !important; }
html.app-mode h2{ font-size:clamp(21px,5.6vw,26px) !important; }

/* soften the sharp instrument-panel bracket corners into elevated app cards */
html.app-mode .panel{
  border-radius:16px;
  padding:20px;
  border-color:transparent;
  box-shadow:0 1px 2px rgba(0,0,0,0.2), 0 8px 20px -6px rgba(0,0,0,0.45);
}
html.app-mode .panel.on-paper{ box-shadow:0 1px 2px rgba(0,0,0,0.06), 0 8px 20px -8px rgba(0,0,0,0.18); }
html.app-mode .panel::before, html.app-mode .panel::after{ display:none; }
html.app-mode a.panel:active,
html.app-mode .btn:active{ transform:scale(0.98); }

/* full-width, thumb-friendly buttons + inputs */
html.app-mode .btn{
  width:100%; justify-content:center;
  padding:15px 20px; border-radius:12px; font-size:13.5px;
}
html.app-mode div > .btn + .btn{ margin-top:10px; }
html.app-mode .field input,
html.app-mode .field textarea,
html.app-mode .field select{
  padding:14px; border-radius:10px; font-size:16px; /* 16px prevents iOS zoom-on-focus */
}

/* skip the scanline choreography on phones — just show content */
html.app-mode .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
html.app-mode .reveal::after{ display:none; }

/* trim the footer to essentials; the tab bar is the real nav now */
html.app-mode .footer-grid > div:not(:first-child){ display:none; }
html.app-mode footer.site-footer{ padding:32px 0 20px; }
html.app-mode .footer-bottom{ flex-direction:column; align-items:flex-start; gap:6px; }

/* inline grid-template-columns that aren't using .grid-2/.grid-3 (the map
   layout, the 4-up "how it works" strips) also need to collapse in app-mode */
html.app-mode [style*="grid-template-columns"]{ grid-template-columns:1fr !important; }
html.app-mode #map{ height:320px !important; }
html.app-mode [style*="grid-template-columns:1fr 1fr"]{ grid-template-columns:1fr 1fr !important; } /* keep small stat pairs side-by-side */

/* tables scroll horizontally as compact strips */
html.app-mode table.data-table{ font-size:12.5px; }
html.app-mode table.data-table th, html.app-mode table.data-table td{ padding:10px; }

/* admin in-page tabs get bigger touch targets */
html.app-mode .admin-tab{ padding:12px 16px; font-size:12px; }

/* ==========================================================================
   BOTTOM TAB BAR — the core "this is an app" signal
   ========================================================================== */
.app-tabbar{ display:none; }
html.app-mode .app-tabbar{
  display:flex;
  position:fixed; left:0; right:0; bottom:0; z-index:80;
  height:var(--tabbar-h);
  padding:6px 6px calc(6px + env(safe-area-inset-bottom));
  background:rgba(20,17,14,0.97);
  backdrop-filter:blur(14px);
  border-top:1px solid var(--line-dark);
  box-shadow:0 -4px 16px rgba(0,0,0,0.3);
}
html.app-mode .app-tabbar a{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; margin:0 2px; border-radius:12px;
  color:var(--smoke); font-family:var(--f-mono); font-size:9.5px; letter-spacing:0.02em;
  transition:color .15s var(--ease), background .15s var(--ease);
}
html.app-mode .app-tabbar a svg{ width:20px; height:20px; transition:transform .15s var(--ease); }
html.app-mode .app-tabbar a.active{ color:var(--ember); background:rgba(244,78,47,0.12); }
html.app-mode .app-tabbar a.active svg{ transform:translateY(-1px); }

/* ==========================================================================
   VIEW TOGGLE — the manual override button
   ========================================================================== */
.view-toggle{
  position:fixed; right:16px; z-index:90;
  bottom:20px;
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:0.03em;
  background:var(--ink); color:var(--paper);
  border:1px solid var(--line-dark);
  padding:10px 14px; border-radius:100px;
  cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,0.35);
}
.view-toggle .vt-desktop{ display:none; }
html.app-mode .view-toggle{ bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 14px); }
html.app-mode .view-toggle .vt-app{ display:none; }
html.app-mode .view-toggle .vt-desktop{ display:inline; }

/* on genuinely small screens, don't let the toggle pill collide with content */
@media (max-width:380px){
  .view-toggle span{ display:none !important; }
  .view-toggle::after{ content:'⇄'; font-size:15px; }
}