/* ═══════════════════════════════════════
   LAYOUT-CORE — App Shell Structure
   ═══════════════════════════════════════
   Single source of truth for:
   html, body, #app, .app-shell, .app-main,
   .app-tabbar, .screen, .screen-header, .screen-body

   NO colors. NO UI. NO components.
   ONLY structural positioning.
   ═══════════════════════════════════════ */


/* ── Root ── */
html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  max-width: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

body {
  height: 100%;
  width: 100%;
  margin: 0;
  max-width: 100%;
  overflow: hidden;
  overflow-x: hidden;
  overscroll-behavior: none;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}


/* ── App Container ── */
#app {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  height: 100%;
  overflow: hidden;
  padding-top: env(safe-area-inset-top, 0px);
}


/* ── App Shell ── */
.app-shell {
  display: flex;
  flex-direction: column;
  flex: 1 1 0%;
  min-height: 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  overflow-x: hidden;
}


/* ── App Main (sole scroll container — ARCH-UI-FIX-2) ── */
.app-main {
  flex: 1 1 0%;
  min-height: 0;
  max-width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  position: relative;
  padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
}


/* ── App Tabbar (pinned bottom — ARCH-UI-FIX-2) ── */
.app-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  box-sizing: content-box;
  height: 56px;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  z-index: var(--z-sticky);
}


/* ── Screen System ── */
.screen {
  display: none;
  flex-direction: column;
  min-height: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.screen.active {
  display: flex;
  animation: fadeIn .25s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ── Screen Header ── */
.screen-header {
  flex: 0 0 auto;
  position: sticky;
  top: 0;
  z-index: var(--z-header);
}


/* ── Screen Body (fills remaining space) ── */
.screen-body {
  flex: 1 1 auto;
  padding: 20px 16px;
  max-width: 100%;
  overflow-x: hidden;
}


/* ── Scroll Content (legacy compat — maps to screen-body) ── */
.scroll-content {
  flex: 1 1 auto;
  padding: 20px 16px;
  max-width: 100%;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* ── Step 10: Global Width Containment ── */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Container max-width */
.screen,
.screen-body,
.scroll-content,
.page,
.container,
.card,
.block,
.atma-card,
.report-section,
.cd-section,
.lookup-card {
  max-width: 100%;
  overflow-x: hidden;
}

/* Flex children: prevent content blow-out */
.app-main *,
.screen-body *,
.scroll-content * {
  min-width: 0;
}

/* Text containment */
h1, h2, h3, h4, h5, h6, p, span, div, li, td, th, label, a {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Progress / bar containment */
.progress,
.bar,
.compat-bar,
.p-compat-bar,
.cd-sync-bar,
.cd-sync-fill,
[class*="bar-fill"],
[style*="flex:1"] {
  max-width: 100%;
  overflow: hidden;
}

/* Screen-specific overflow lock */
#screen-compat,
#screen-compat-detail,
#screen-design,
#screen-numerology,
#screen-report,
#screen-lookup,
#screen-profile,
#screen-partner {
  overflow-x: hidden;
  max-width: 100%;
}

/* Force inline-style rows to respect container */
[style*="display:flex"],
[style*="display: flex"] {
  max-width: 100%;
  min-width: 0;
}
[style*="display:flex"] > *,
[style*="display: flex"] > * {
  min-width: 0;
}

/* Image containment */
img, svg, video, canvas, iframe {
  max-width: 100%;
}

/* ── Step 12: Threads-style Mobile Hardening ── */

/* Flex containers: prevent blow-out */
.flex,
.row,
.d-flex,
.compat-row {
  min-width: 0;
  max-width: 100%;
}
.flex > *,
.row > *,
.d-flex > *,
.compat-row > * {
  min-width: 0;
}

/* SVG / Canvas responsive */
svg, canvas {
  max-width: 100%;
  height: auto;
}

/* Table containment */
table {
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}
td, th {
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
}

/* Pre/code blocks */
pre, code {
  max-width: 100%;
  overflow-x: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* Mobile-first final catch */
@media (max-width: 480px) {
  #app,
  .app-shell,
  .app-main,
  .screen,
  .screen-body,
  .scroll-content,
  .card,
  .container,
  .atma-card,
  .report-section,
  .cd-section,
  .lookup-card {
    width: 100% !important;
    max-width: 100% !important;
  }
}