/* =========================================================================
   native-shell.css — THE NATIVE SHELL RULES THAT ARE NOT DASHBOARD RULES
   =========================================================================

   THIS FILE DOES NOTHING IN A BROWSER.

   Every selector is either scoped to `html[data-native]` — an attribute only
   mobile-shell.js sets, and only when Capacitor reports a native platform — or
   targets `.tc-offline`, an element that only mobile-shell.js creates. Loading
   it on the website costs one small request and changes nothing.

   WHY IT EXISTS.

   Five pages load mobile-shell.js: index.html, home.html, login.html,
   reset-password.html and verify-email.html. Only index.html carried the
   native CSS, so on a phone the other four rendered with no safe-area padding
   at all — content under the notch and under the home indicator on the sign-in
   screen, the marketing page, and both of the landing pages the verification
   and password-reset emails open. The offline banner mobile-shell.js creates
   was unstyled everywhere except the dashboard.

   WHAT IS AND IS NOT HERE.

   Only the rules that are true of any page: the safe-area insets, the page
   padding that respects them, and the offline notice. The dashboard's own
   native chrome — the top bar, the sidebar, the bottom navigation, the
   keyboard-aware composer — stays in index.html, because those elements exist
   on no other page and moving them here would file dashboard layout under a
   shared name.
   ========================================================================= */

/* SAFE AREAS. The notch, the Dynamic Island, the Android status bar and the
   home indicator are all real estate the app does not own. Insets are read
   from the platform rather than guessed at with fixed pixel values, so a
   device shape nobody has tested still gets the right padding. */
html[data-native] {
  --tc-safe-top: env(safe-area-inset-top, 0px);
  --tc-safe-bottom: env(safe-area-inset-bottom, 0px);
  --tc-safe-left: env(safe-area-inset-left, 0px);
  --tc-safe-right: env(safe-area-inset-right, 0px);
  --tc-keyboard-h: 0px;
  --tc-bottomnav-h: 56px;
}

/* THE PAGE ITSELF, for the four pages with no app shell to do it for them.
   `body` rather than a component, because a sign-in card, a verification
   result and the marketing page share no container — what they share is being
   the whole page. The dashboard overrides this with its own rules, which are
   more specific and come later in its own sheet. */
html[data-native] body {
  padding-block-start: var(--tc-safe-top);
  padding-block-end: var(--tc-safe-bottom);
  padding-inline-start: var(--tc-safe-left);
  padding-inline-end: var(--tc-safe-right);
}

/* Momentum scrolling, and no grey flash on tap. Both are native expectations
   that a WebView does not adopt on its own. */
html[data-native] body {
  -webkit-overflow-scrolling: touch;
  -webkit-tap-highlight-color: transparent;
}

/* OFFLINE. Stating the condition in words, docked to the foot of the screen
   clear of the home indicator. Not a toast: the condition persists, so the
   notice does. Colour is not the only signal — it carries its own text. */
.tc-offline {
  position: fixed;
  inset-inline: 0;
  bottom: var(--tc-safe-bottom, 0px);
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3, 12px);
  padding: var(--sp-3, 12px) var(--sp-4, 16px);
  background: var(--surface-2, #1A1D24);
  border-block-start: 1px solid var(--warning-border, var(--border-strong, #383E4C));
  color: var(--text-primary, #F0F2F5);
  font-size: var(--fs-small, 13px);
}

.tc-offline[hidden] { display: none; }
.tc-offline-text { color: var(--warning, #F59E0B); font-weight: 600; }