/* The app shell. NEW_UI/KlearScreen.dc.html builds every screen the same
   way — `display:flex; flex-direction:column; height:100%` with a fixed
   header, a `flex:1; min-height:0; overflow-y:auto` middle, and a fixed
   footer — so that's reproduced here rather than approximated with sticky
   positioning.

   No position:fixed anywhere on purpose: fixed elements jump around as the
   iOS URL bar collapses, while a flex column on 100dvh doesn't.

   Safe areas: the prototype hard-codes iOS-simulator values (58px top,
   26px bottom). Those become env(safe-area-inset-*) + the real padding, so
   they're correct on a notched phone AND sane on desktop where env()
   resolves to 0. Requires viewport-fit=cover in base.html's viewport meta. */

.k-app {
  display: flex;
  flex-direction: column;
  /* dvh, not vh: vh includes the collapsible iOS URL bar, which would push
     the tab bar off-screen. */
  height: 100dvh;
  width: 100%;
  /* Mobile-first only (decided question A) — this cap is not a desktop
     layout, just what stops a phone UI stretching across a 1440px monitor. */
  max-width: 430px;
  margin-inline: auto;
  background: var(--k-bg);
  overflow: hidden;
}

/* Fallback for browsers without dvh. */
@supports not (height: 100dvh) {
  .k-app {
    height: 100vh;
  }
}

/* Desktop only: a hairline so the shell reads as a column rather than as a
   page that failed to fill the window. */
@media (min-width: 480px) {
  .k-app {
    border-inline: 1px solid var(--k-line);
  }
}

/* ---- App bar ------------------------------------------------------------
   58px top padding in the prototype ≈ iOS status bar (44px) + 14px. */

.k-appbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: calc(env(safe-area-inset-top, 0px) + 0.875rem) 1.375rem 0.75rem;
}

.k-appbar__back,
.k-appbar__action {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid var(--k-line);
  background: var(--k-surface);
  color: var(--k-ink);
  cursor: pointer;
  text-decoration: none;
}

.k-appbar__titles {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.k-appbar__title {
  font-size: 1.3125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: var(--k-lh-heading);
  margin: 0;
}

.k-appbar__sub {
  font-size: 0.75rem;
  color: var(--k-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Scrolling middle --------------------------------------------------- */

.k-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
}

/* Bottom breathing room only when there's no tab bar below to provide it. */
.k-app:not(:has(.k-tabbar)) .k-scroll {
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 1.5rem);
}

.k-messages {
  padding: 0 1.375rem;
  margin-bottom: 0.875rem;
}

/* The standard content column inside .k-scroll. */
.k-page {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 0 1.375rem 1.25rem;
}

/* Auth/marketing screens: no app bar, so the content needs the status-bar
   clearance itself, and the primary CTA sits at the bottom of the viewport. */
.k-page--full {
  min-height: 100%;
  padding-top: calc(env(safe-area-inset-top, 0px) + 1.25rem);
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 1.5rem);
}

.k-page__spacer {
  margin-top: auto;
}