/* Native-app-only styles. Inert on the website: everything here is scoped
   under html.mas-native-app, a class app-shell.js only adds inside the app. */

/* The site's own <header> (logo/credits/account/menu) is the very first
   thing in the page, sticky at the top — same status-bar-clearance issue
   as the account modal below, just for the whole page instead of one
   screen: without this it sits right against the status bar. */
html.mas-native-app header {
  padding-top: env(safe-area-inset-top, 0px) !important;
}

html.mas-native-app #masAppTabBar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 300;
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  height: calc(58px + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: #ffffff;
  border-top: 1px solid #e2e8f0;
  box-shadow: 0 -2px 12px rgba(15, 23, 42, 0.06);
}

html.mas-native-app .mas-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 10px;
  font-weight: 600;
  color: #64748b;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

html.mas-native-app .mas-tab i {
  width: 22px;
  height: 22px;
  stroke-width: 2px;
}

html.mas-native-app .mas-tab.active {
  color: #1d4ed8;
}

html.mas-native-app body.mas-has-tabbar {
  padding-bottom: calc(58px + env(safe-area-inset-bottom)) !important;
}

html.mas-native-app #masExitToast {
  position: fixed;
  left: 50%;
  bottom: calc(74px + env(safe-area-inset-bottom));
  transform: translateX(-50%) translateY(8px);
  z-index: 400;
  background: rgba(15, 23, 42, 0.92);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
}

html.mas-native-app #masExitToast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Marketing/landing-page sections that make sense to convince a web visitor
   to install the app — redundant once someone is already using the app.
   Web visitors never see this rule; only html.mas-native-app does. */
html.mas-native-app #how-it-works,
html.mas-native-app #pricing,
html.mas-native-app #testimonials,
html.mas-native-app #partner-promo,
html.mas-native-app #noise-types,
html.mas-native-app #amazon-tools,
html.mas-native-app #tutorials,
html.mas-native-app #ownership-guides,
html.mas-native-app #faq,
html.mas-native-app #hero,
html.mas-native-app #tipsSafetySection,
html.mas-native-app #closingCta,
html.mas-native-app footer,
html.mas-native-app #uploadSection {
  display: none !important;
}

/* "Credits" tab (replaces Forum in the tab bar): earn-a-credit is its own
   screen now, reached via /#uploadSection — shows only that section,
   hides the Diagnose tab's welcome banner + tool instead. */
html.mas-native-app.mas-showing-credits #uploadSection {
  display: block !important;
}

html.mas-native-app.mas-showing-credits #masAppWelcome,
html.mas-native-app.mas-showing-credits #diagnose {
  display: none !important;
}

/* The dark hero header was sized for a long marketing page (huge vertical
   padding, a toggle pill to reveal content below). As its own dedicated
   app screen the content is always expanded (see expandEarnCredits in
   app-shell.js), so the toggle pill is dead weight — hide it and reclaim
   the padding built for a much taller page. */
html.mas-native-app #earnCreditsSection {
  padding-top: 22px !important;
  padding-bottom: 20px !important;
}

html.mas-native-app #earnToggleBtn {
  pointer-events: none !important;
}

html.mas-native-app #earnToggleBtn > div:last-child {
  display: none !important;
}

html.mas-native-app #earnCollapsible {
  margin-top: 20px !important;
  padding-top: 20px !important;
}

/* Small app-only welcome banner, replacing the full marketing hero. */
html.mas-native-app #masAppWelcome {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 16px 16px 40px;
  padding: 16px;
  border-radius: 20px;
  background: linear-gradient(135deg, #1d4ed8 0%, #1e3a8a 100%);
  color: #fff;
}

html.mas-native-app #masAppWelcome img {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  flex-shrink: 0;
}

html.mas-native-app #masAppWelcome h2 {
  font-size: 15px;
  font-weight: 800;
  margin: 0 0 2px;
}

html.mas-native-app #masAppWelcome p {
  font-size: 12.5px;
  line-height: 1.4;
  margin: 0;
  color: rgba(219, 234, 254, 0.92);
}

/* Free-vs-Audio-AI comparison table, filling the gap the mode-selector
   cards leave below them instead of leaving dead space. */
html.mas-native-app #masCompareTable {
  margin: 40px 16px 32px;
  padding: 14px 16px 8px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

html.mas-native-app #masCompareTable h3 {
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #94a3b8;
  margin: 0 0 8px;
}

html.mas-native-app #masCompareTable table {
  width: 100%;
  border-collapse: collapse;
}

html.mas-native-app #masCompareTable th,
html.mas-native-app #masCompareTable td {
  padding: 7px 4px;
  font-size: 11.5px;
  text-align: center;
  border-top: 1px solid #f1f5f9;
}

html.mas-native-app #masCompareTable thead th {
  border-top: none;
  font-size: 10px;
  font-weight: 800;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding-bottom: 8px;
}

html.mas-native-app #masCompareTable th:first-child,
html.mas-native-app #masCompareTable td:first-child {
  text-align: left;
  font-weight: 700;
  color: #334155;
}

html.mas-native-app #masCompareTable thead th:last-child span {
  display: block;
  font-size: 9px;
  color: #2563eb;
  font-weight: 800;
}

html.mas-native-app #masCompareTable td i {
  width: 14px;
  height: 14px;
  stroke-width: 3px;
  color: #10b981;
}

html.mas-native-app #masCompareTable td.no {
  color: #cbd5e1;
  font-weight: 700;
}

/* Trim the diagnose tool's own vertical padding in-app so the welcome
   banner + the tool can both land on one screen. Website untouched — all
   of this is CSS-only, scoped under html.mas-native-app, no HTML/JS
   changed (the underlying elements and their IDs/classes are unchanged). */
html.mas-native-app #diagnose {
  padding-top: 1.75rem !important;
  padding-bottom: 5rem !important;
}

/* Redundant with the welcome banner above ("What does your car sound
   like?" + the engine-ready stat), so dropped entirely in-app. */
html.mas-native-app .mas-diag-intro {
  display: none !important;
}

/* Redundant with the "MAS · Sound Analyzer" topbar label right above it
   and "How do you want to start?" right below it — three headings in a
   row saying the same thing. */
html.mas-native-app .diag-heading {
  display: none !important;
}

html.mas-native-app .diag-topbar {
  padding: 8px 14px !important;
}

html.mas-native-app .diag-form-wrap {
  padding: 8px !important;
}

html.mas-native-app #diagnoseShell [class~="py-10"] {
  padding-top: 0.5rem !important;
  padding-bottom: 0.4rem !important;
}

html.mas-native-app #modeSelector .relative {
  padding: 10px !important;
}

html.mas-native-app #modeSelector .text-center.mb-4 {
  margin-bottom: 8px !important;
}

/* "Both include a mechanic-ready script" subtitle — nice to know, not
   worth a full line when the goal is fitting on one screen. */
html.mas-native-app #modeSelector .text-center.mb-4 p {
  display: none !important;
}

html.mas-native-app #selectFreeBtn,
html.mas-native-app #selectProBtn {
  padding: 10px !important;
}

html.mas-native-app #selectFreeBtn ul,
html.mas-native-app #selectProBtn ul {
  gap: 3px !important;
}

html.mas-native-app #selectFreeBtn ul li,
html.mas-native-app #selectProBtn ul li {
  font-size: 10px !important;
}

html.mas-native-app #selectFreeBtn > div:first-child,
html.mas-native-app #selectProBtn > div:first-child {
  margin-bottom: 6px !important;
}

html.mas-native-app #selectFreeBtn p:nth-of-type(2),
html.mas-native-app #selectProBtn p:nth-of-type(2) {
  display: none !important;
}

html.mas-native-app #selectFreeBtn > .mt-4,
html.mas-native-app #selectProBtn > .mt-4 {
  margin-top: 8px !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* Step 2 of the diagnose form ("Help the AI diagnose better") — same idea
   as the mode-selector compacting above, applied to its own header and
   mini-stepper chrome so more of it fits on one screen. The chip/card
   content itself is already fairly tight in the base CSS; this trims the
   surrounding padding and gaps, not the tap targets themselves. */
html.mas-native-app #step2Panel > .p-3 {
  padding: 8px 12px !important;
}

html.mas-native-app #step2Panel .inline-flex.items-center.justify-between.rounded-full,
html.mas-native-app #step2Panel span.bg-emerald-50 {
  padding: 4px 8px !important;
}

html.mas-native-app #step2Panel h3 {
  font-size: 1rem !important;
}

html.mas-native-app #step2Panel .mb-3 {
  margin-bottom: 8px !important;
}

html.mas-native-app #step2Panel .select-card {
  padding: 10px 10px 10px 40px !important;
}

html.mas-native-app #step2Panel .select-card-grid {
  gap: 8px !important;
}

html.mas-native-app #step2Panel .mt-5 {
  margin-top: 12px !important;
}

/* Section subtitles ("Tap all that match — the AI uses this to narrow the
   cause", "Pick the closest match", etc.) — helpful context on a first
   visit, but a whole extra line per section adds up across 5+ sections
   in this form. Drop them in-app; the icon + bold title alone still says
   what each section is for. */
html.mas-native-app #step2Panel .mini-step p.text-sm.font-bold + p.text-xs.text-slate-500 {
  display: none !important;
}

html.mas-native-app #step2Panel .mini-step .flex.items-center.gap-2 {
  gap: 8px !important;
  margin-bottom: 6px !important;
}

html.mas-native-app #step2Panel .mini-step .h-8.w-8 {
  height: 28px !important;
  width: 28px !important;
}

/* The website's draft-recovery banner ("Resume your diagnosis?") floats
   fixed near the bottom of the screen. Repositioning it above the tab bar
   still left it overlapping page content (the comparison table) whenever
   that content scrolled into the same lower portion of the screen, since
   it's fixed in place regardless of scroll position. In-app, users have
   the tab bar for navigation and don't need this nudge — hide it outright
   rather than fight its positioning. */
html.mas-native-app #abandonBanner {
  display: none !important;
}

/* Trust line ("Secure · Stripe · no subscription…") under the two cards —
   marketing reassurance, not needed to actually use the tool. */
html.mas-native-app #modeSelector .mt-3.flex.items-center.justify-center {
  display: none !important;
}

/* Account settings as its own full-screen page instead of a centered
   dialog — same open/close JS as the website (openAccountModal /
   closeAccountModal / the header's account button), purely a reskin so
   it reads as a native settings screen instead of a popup on top of the
   tool. Applies wherever it's opened: the header's account button, the
   auto-open on the Diagnose tab when already signed in, etc. */
html.mas-native-app #accountModal {
  padding: 0 !important;
  background: #fff !important;
}

html.mas-native-app #accountModal > div {
  max-width: none !important;
  max-height: none !important;
  width: 100%;
  height: 100%;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
}

/* The modal's own sticky header (name/email + close button) was sized for
   sitting inside a centered dialog with backdrop padding around it — full
   screen and edge-to-edge, its top row sits right against the status bar
   with barely any clearance. Give it real breathing room. */
html.mas-native-app #accountModal .sticky.top-0 {
  padding-top: calc(env(safe-area-inset-top, 24px) + 16px);
}

html.mas-native-app #accountModal .overflow-y-auto {
  padding-bottom: calc(24px + 58px + env(safe-area-inset-bottom)) !important;
}