/* Responsive nest — gallery cards and overlay stay as they are. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: clip;
}
body {
  overflow-x: clip;
  max-width: 100%;
}
img,
video,
svg {
  max-width: 100%;
}
.card-shell.is-portrait,
.card-shell.is-portrait img,
.card-shell.is-portrait video,
.thumb.is-portrait,
.thumb.is-portrait img {
  max-width: 202px;
}
input,
select,
textarea,
button {
  font-size: max(1em, 16px);
}
.wrap,
.nav-inner,
.site-main,
.page-wrap,
.admin-stage {
  padding-left: max(var(--gutter, 12px), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter, 12px), env(safe-area-inset-right, 0px));
}
.nav-links {
  display: flex;
  flex-wrap: wrap;
  row-gap: 0.35rem;
}
.hero img,
.header img {
  width: min(100%, var(--header-img-width, var(--page-width)));
}
.form label,
.form input,
.form textarea,
.form select {
  max-width: 100%;
}

/* Admin: layout follows the sheet, not only the viewport. */
.admin-sheet {
  container-type: inline-size;
  container-name: admin;
  min-width: 0;
}
.admin-role-grid,
.admin-people-table,
.form-card {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@container admin (max-width: 52rem) {
  .admin-media-row,
  body.admin-app .admin-list li.admin-media-row {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .admin-media-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
  .admin-pages-work,
  .admin-settings {
    grid-template-columns: 1fr;
  }
  .admin-color-row {
    flex-wrap: wrap;
  }
  .admin-toolbar,
  .admin-toolbar form {
    flex-direction: column;
    align-items: stretch;
  }
  .admin-page-head .muted {
    display: block;
    margin-left: 0;
  }
}

@media (max-width: 40rem) {
  .admin-media-row,
  body.admin-app .admin-list li.admin-media-row {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .admin-media-actions {
    grid-column: 1 / -1;
  }
  .admin-pages-work {
    display: grid;
    grid-template-columns: 1fr;
  }
  .theme-live {
    max-width: 100%;
  }
  .admin-people-add,
  .admin-narrow {
    width: 100%;
    max-width: 100%;
  }
  body.admin-app .admin-sheet-pad {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}

@media (pointer: coarse) {
  .btn,
  .admin-chip,
  .admin-rail-link,
  .nav-links a,
  .password-toggle {
    min-height: 44px;
  }
}

.admin-sticky-save {
  padding-bottom: max(0.85rem, env(safe-area-inset-bottom, 0px));
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}