/* FirstBench device-adaptive + responsive theme.
   Pairs with theme.js (sets html[data-platform]). Loaded AFTER Tailwind CDN so the
   attribute-scoped rules win over single-class utilities by specificity.
   Targets the shared card hook `.shadow-card` so cards adapt WITHOUT per-component edits. */

:root {
  --fb-safe-t: env(safe-area-inset-top, 0px);
  --fb-safe-b: env(safe-area-inset-bottom, 0px);
  --fb-safe-l: env(safe-area-inset-left, 0px);
  --fb-safe-r: env(safe-area-inset-right, 0px);
  --fb-tap: 44px;                 /* min touch target */
}

* { -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overscroll-behavior-y: none; }

/* Safe-area helpers */
.fb-safe-top { padding-top: calc(env(safe-area-inset-top, 0px)); }
.fb-safe-bottom { padding-bottom: calc(env(safe-area-inset-bottom, 0px)); }
.fb-safe-x { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }

/* App scaffolding the panels opt into */
.fb-app { min-height: 100svh; }
.fb-sticky { position: sticky; top: 0; z-index: 30; padding-top: var(--fb-safe-t); }
.fb-scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.fb-bottomnav { position: sticky; bottom: 0; z-index: 30; padding-bottom: var(--fb-safe-b); }

/* Touch ergonomics on touch devices */
html[data-touch] button, html[data-touch] a[role="button"], html[data-touch] .tap {
  min-height: var(--fb-tap);
}

/* Desktop keeps the one-viewport no-scroll discipline; mobile/tablet scroll naturally. */
@media (min-width: 1024px) {
  .fb-noscroll-desktop { height: 100vh; overflow: hidden; }
}
@media (max-width: 1023px) {
  .fb-noscroll-desktop { min-height: 100svh; overflow: visible; }
  /* hide desktop-only sidebars the panels mark, show mobile chrome */
  .fb-desktop-only { display: none !important; }
}
@media (min-width: 1024px) { .fb-mobile-only { display: none !important; } }

/* Fluid type */
.fb-h1 { font-size: clamp(20px, 4.5vw, 30px); }
.fb-h2 { font-size: clamp(16px, 3.5vw, 22px); }

/* ---------------- Apple: glassmorphism ---------------- */
html[data-platform="apple"] .shadow-card,
html[data-platform="apple"] .fb-glass {
  background-color: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 8px 30px rgba(17, 12, 0, 0.10);
}
html[data-platform="apple"] .fb-sticky,
html[data-platform="apple"] .fb-bottomnav {
  background-color: rgba(250, 247, 239, 0.72);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
}
html[data-platform="apple"] .rounded-xl2 { border-radius: 20px; }

/* ---------------- Android: Material elevation + ripple ---------------- */
html[data-platform="android"] .shadow-card {
  box-shadow: 0 1px 2px rgba(0,0,0,.10), 0 4px 12px rgba(0,0,0,.10);
  border: none;
}
html[data-platform="android"] button, html[data-platform="android"] .tap {
  position: relative; overflow: hidden;
}
html[data-platform="android"] button:active::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle, rgba(0,0,0,.12) 10%, transparent 60%);
}

/* ---------------- VR / Vision Pro: roomier, dimensional ---------------- */
html[data-xr] { font-size: 17px; }
html[data-xr] .shadow-card { box-shadow: 0 12px 40px rgba(0,0,0,.18); }
html[data-xr] .fb-pad { padding: 1.25rem; }

/* Accessibility: respect user preferences */
@media (prefers-reduced-transparency: reduce) {
  html[data-platform="apple"] .shadow-card,
  html[data-platform="apple"] .fb-sticky,
  html[data-platform="apple"] .fb-bottomnav,
  html[data-platform="apple"] .fb-glass {
    background-color: #ffffff; -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
@media (prefers-color-scheme: dark) {
  /* keep the brand light theme; just soften pure-white glass a touch on Apple */
  html[data-platform="apple"] .shadow-card { background-color: rgba(255,255,255,0.7); }
}