/*
 * Native page frame. The one place that decides how a bundled page sits on an
 * iPhone or iPad. Every bundled page links this file last in its <head>.
 *
 * Contract, for every page under html.nie-native-shell:
 *   1. The page fills the viewport edge to edge. No card, border, radius or
 *      shadow frames the main content.
 *   2. One element is the scroll port. It owns the safe-area padding.
 *   3. The document itself never scrolls.
 *   4. A modal is a compact, centred card on a dimmed backdrop.
 * test/native-layout-inventory.test.mjs measures all four for every page in
 * test/native-page-inventory.mjs. Do not add a per-page native layout rule
 * elsewhere. Add the page to the inventory and fix it here.
 */
html.nie-native-shell,
html.nie-native-shell body {
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  overscroll-behavior: none;
}
html.nie-native-shell body {
  position: fixed;
  inset: var(--native-viewport-top, 0px) 0 auto;
  width: 100%;
  height: var(--native-viewport-height, 100dvh);
  background: var(--native-bg, var(--cream, var(--paper)));
}

/* Standalone pages (sign-in, delete account, feedback): body > main is the port. */
html.nie-native-shell body > main {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: max(24px, env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px)) max(24px, env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
html.nie-native-shell body > main > .brand {
  flex: 0 0 auto;
  min-height: 44px;
}

/* Page wrappers: the page is the surface, so the wrapper keeps width and loses its chrome. */
html.nie-native-shell body > main > .card,
html.nie-native-shell .onboarding-card,
html.nie-native-shell .study-boundary-card,
html.nie-native-shell .workspace-purpose-card,
html.nie-native-shell body.legal .content-card {
  width: 100%;
  max-width: var(--native-content-max, 640px);
  margin: 0 auto auto;
  padding: 0;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
html.nie-native-shell body > main > .brand + .card {
  margin-top: 18px;
}
/* A page with a brand row keeps it fixed: the card below it is the scroll port. */
html.nie-native-shell body > main:has(> .brand) {
  overflow-y: hidden;
}
html.nie-native-shell body > main > .brand + .card {
  flex: 1 1 auto;
  margin-bottom: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

/* Full-page panels of the exams shell: they are the port, so they lose chrome only. */
html.nie-native-shell #multiExamRoot > .locked-panel,
html.nie-native-shell #multiExamRoot > .shell-error,
html.nie-native-shell #multiExamRoot > .shell-loading {
  box-sizing: border-box;
  flex: 1 1 auto;
  width: 100%;
  max-width: none;
  min-height: 0;
  margin: 0;
  padding: max(28px, env(safe-area-inset-top, 0px)) max(18px, env(safe-area-inset-right, 0px)) max(36px, env(safe-area-inset-bottom, 0px)) max(18px, env(safe-area-inset-left, 0px));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  animation: none;
}
html.nie-native-shell #multiExamRoot > .locked-panel {
  padding-top: 28px;
}
html.nie-native-shell #multiExamRoot > .locked-panel > *,
html.nie-native-shell #multiExamRoot > .shell-error > *,
html.nie-native-shell #multiExamRoot > .shell-loading > * {
  max-width: 656px;
  margin-right: auto;
  margin-left: auto;
}

/* Modals: compact, centred, on a dimmed backdrop. */
html.nie-native-shell .intro-overlay,
html.nie-native-shell .free-upsell-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.55);
  padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
}
html.nie-native-shell .intro-overlay[hidden],
html.nie-native-shell .free-upsell-overlay[hidden] {
  display: none;
}
html.nie-native-shell .intro-card,
html.nie-native-shell .free-upsell-card {
  box-sizing: border-box;
  width: 100%;
  max-width: 520px;
  height: auto;
  min-height: 0;
  max-height: min(78%, 600px);
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}
/* The intro card does not scroll: its body does, and the footer actions stay in view. */
html.nie-native-shell .intro-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 1.5rem 1.3rem 1.3rem;
  gap: 1rem;
}
html.nie-native-shell .intro-card .intro-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}
html.nie-native-shell .intro-card .intro-footer {
  flex: 0 0 auto;
  gap: 0.7rem;
}
@media (max-height: 500px) {
  html.nie-native-shell .intro-card { max-height: 100%; padding: 0.9rem 1.1rem; gap: 0.6rem; }
  html.nie-native-shell .intro-card .intro-nav { flex-direction: row; align-items: center; }
}

/* Legal pages: .page is the one scroll port, the header stays pinned, and the notice and the footer scroll together,
   so the footer never sits over text. marketing.css sizes .page to 100dvh and makes main the port; native undoes that. */
html.nie-native-shell body.legal .page {
  display: block;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}
html.nie-native-shell body.legal header.site {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--page);
}
html.nie-native-shell body.legal main {
  overflow: visible;
  min-height: 0;
}

/* Dark appearance for the legal page, native shell only: marketing.css stays light on the web. */
@media (prefers-color-scheme: dark) {
  html.nie-native-shell body.legal {
    color-scheme: dark;
    --page: #1D1B18;
    --outer: #141311;
    --ink: #EDE8DE;
    --ink-soft: #B9B2A5;
    --teal: #5BC0B6;
    --teal-dark: #86D4CC;
    --teal-tint: #1F3836;
    --line: #3B3731;
    --white: #272420;
    --native-bg: #1D1B18;
  }
  html.nie-native-shell body.legal footer {
    background: #100F0D;
    color: #B9B2A5;
  }
  html.nie-native-shell body.legal footer a {
    color: #EDE8DE;
  }
}

/* Sign-in message box: links take the message colour, and the box clears the tabs below it. */
html.nie-native-shell p.msg a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
}
html.nie-native-shell p.msg.show {
  margin-bottom: 18px;
}