/* ==========================================================================
   LAYOUT SYSTEM — Mobile-first
   ========================================================================== */

/* --------------------------------------------------------------------------
   BASE RESET / BOX MODEL
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
  /* Prevent font size inflation on mobile */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  height: 100%;
  min-height: 100dvh;
  background: var(--surface);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: var(--text-base);
  line-height: var(--leading-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* App root */
#app {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* --------------------------------------------------------------------------
   VIEW CONTAINERS
   Each view fills the screen; only one is visible at a time.
   -------------------------------------------------------------------------- */
.view {
  display: none;
  min-height: 100dvh;
  flex-direction: column;
  width: 100%;
  padding-bottom: var(--tab-nav-height); /* clear bottom nav on mobile */
}

.view.is-active {
  display: flex;
}

/* --------------------------------------------------------------------------
   TOP APP HEADER — desktop only
   -------------------------------------------------------------------------- */
.app-header {
  display: none; /* hidden on mobile */
  position: sticky;
  top: 0;
  z-index: var(--z-raised);
  height: var(--header-height);
  padding: 0 var(--sp-8);
  align-items: center;
  justify-content: space-between;
  background: var(--surface-glass);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.app-header__logo {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--accent);
}

.app-header__nav {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.app-header__nav-link {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: var(--radius-base);
  transition: color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}

.app-header__nav-link:hover,
.app-header__nav-link.is-active {
  color: var(--text-primary);
  background: var(--surface-3);
}

.app-header__nav-link.is-active {
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   BOTTOM TAB NAV — mobile only
   -------------------------------------------------------------------------- */
.tab-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-overlay);
  height: var(--tab-nav-height);
  padding-bottom: var(--safe-bottom);
  display: flex;
  align-items: stretch;
  background: var(--surface-glass);
  border-top: 1px solid var(--border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.tab-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-1);
  color: var(--text-muted);
  text-decoration: none;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  transition: color var(--dur-fast) var(--ease-out);
  cursor: pointer;
  border: none;
  background: none;
  -webkit-tap-highlight-color: transparent;
}

.tab-nav-item__icon {
  width: 20px;
  height: 20px;
  transition: transform var(--dur-fast) var(--ease-spring);
}

.tab-nav-item:hover .tab-nav-item__icon,
.tab-nav-item.is-active .tab-nav-item__icon {
  transform: translateY(-1px);
}

.tab-nav-item.is-active {
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   INTAKE VIEW — Full-screen wizard
   -------------------------------------------------------------------------- */
.intake-view {
  position: relative;
  overflow: hidden;
}

.intake-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sp-6) var(--sp-4);
  padding-top: calc(var(--sp-12) + var(--safe-top));
  min-height: calc(100dvh - var(--tab-nav-height));
  max-width: 100%;
}

/* --------------------------------------------------------------------------
   STUDIO VIEW
   -------------------------------------------------------------------------- */
.studio-view {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.studio-layout {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100%;
  padding: var(--sp-4);
  padding-bottom: calc(var(--sp-4) + var(--tab-nav-height));
  gap: var(--sp-4);
}

.studio-panel {
  width: 100%;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--card-padding);
}

/* --------------------------------------------------------------------------
   HISTORY VIEW
   -------------------------------------------------------------------------- */
.history-view {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.history-layout {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--sp-4);
  padding-bottom: calc(var(--sp-4) + var(--tab-nav-height));
}

/* --------------------------------------------------------------------------
   REVIEW VIEW
   -------------------------------------------------------------------------- */
.review-layout {
  width: 100%;
  padding: var(--sp-4);
  padding-bottom: calc(var(--sp-4) + var(--tab-nav-height));
}

/* --------------------------------------------------------------------------
   SECTION CHROME — shared
   -------------------------------------------------------------------------- */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-4);
}

.section-label {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   UTILITY LAYOUT CLASSES
   -------------------------------------------------------------------------- */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.flex-1 { flex: 1; }
.gap-1 { gap: var(--sp-1); }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
.gap-6 { gap: var(--sp-6); }
.gap-8 { gap: var(--sp-8); }

.w-full { width: 100%; }
.max-w-panel { max-width: var(--panel-width); }
.max-w-layout { max-width: var(--max-width); }
.mx-auto { margin-left: auto; margin-right: auto; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   DESKTOP BREAKPOINT (≥ 1024px)
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {

  /* Show top nav, hide bottom tabs */
  .app-header { display: flex; }
  .tab-nav { display: none; }

  /* Views no longer need to clear bottom nav */
  .view { padding-bottom: 0; }

  /* Intake: centered card layout */
  .intake-wrap {
    padding: var(--sp-16) var(--sp-8);
    min-height: calc(100dvh - var(--header-height));
  }

  /* Studio: two-column split on desktop */
  .studio-layout {
    flex-direction: row;
    align-items: flex-start;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--sp-8);
    gap: var(--sp-6);
  }

  .studio-panel--primary {
    flex: 3;
  }

  .studio-panel--sidebar {
    flex: 1;
    min-width: 280px;
    max-width: 320px;
    position: sticky;
    top: calc(var(--header-height) + var(--sp-4));
  }

  /* History: constrained width */
  .history-layout {
    padding: var(--sp-8);
  }

  .review-layout {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--sp-8);
  }
}