/* Gachi stylesheet: layout.css. App shell: .page, .card, .screen. */
/* Extracted verbatim from index.html. Load order is significant; see styles/README.md. */

/* ------------------------------ */
/* App Shell / Shared Layout */
/* ------------------------------ */
.page {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  min-height: var(--app-height);
  display: flex;
  align-items: center;
  justify-content: center;
  padding:
    calc(var(--shell-gutter) + var(--safe-top))
    calc(var(--shell-gutter) + var(--safe-right))
    calc(var(--shell-gutter) + var(--safe-bottom) + var(--viewport-bottom-offset))
    calc(var(--shell-gutter) + var(--safe-left));
}

.card {
  width: min(100%, var(--app-max-width));
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--surface-solid);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: var(--shadow);
}

.screen {
  position: relative;
  min-height: calc(100svh - (var(--shell-gutter) * 2));
  min-height: calc(100dvh - (var(--shell-gutter) * 2));
  min-height: calc(var(--app-height) - (var(--shell-gutter) * 2));
  display: flex;
  flex-direction: column;
  padding:
    var(--screen-padding-y)
    calc(var(--screen-padding-x) + var(--safe-right))
    calc(var(--screen-padding-y) + var(--safe-bottom) + var(--viewport-bottom-offset))
    calc(var(--screen-padding-x) + var(--safe-left));
}

.screen[hidden] {
  display: none !important;
}