/* Shared mobile finish: safe areas, touch targets and compact single-column flows. */
@media (max-width: 720px) {
  html {
    max-width: 100%;
    overflow-x: clip;
    scroll-padding-top: calc(70px + env(safe-area-inset-top));
  }

  body {
    min-width: 0;
    max-width: 100%;
    overflow-x: clip;
  }

  main,
  header,
  footer,
  section,
  article,
  aside,
  form,
  fieldset,
  .workspace,
  .studio-grid,
  .composer-grid,
  .radar-layout,
  .layout,
  .workbench {
    min-width: 0;
    max-width: 100%;
  }

  img,
  video,
  canvas {
    max-width: 100%;
  }

  button,
  a,
  input,
  select,
  textarea {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  select,
  textarea {
    min-width: 0;
    max-width: 100%;
    font-size: 16px !important;
  }

  textarea,
  p,
  h1,
  h2,
  h3 {
    overflow-wrap: anywhere;
  }

  :where(button, .btn, .primary, .secondary, .quiet, .generate, .generate-button, .primary-button, .ghost-button, .search-button, .upload-button) {
    min-height: 44px;
  }

  :focus-visible {
    outline: 3px solid rgba(110, 92, 246, .3);
    outline-offset: 2px;
  }

  .topbar,
  .studio-header,
  .moments-header,
  .radar-header,
  .site-admin .top,
  .top {
    padding-left: max(13px, env(safe-area-inset-left));
    padding-right: max(13px, env(safe-area-inset-right));
  }

  .brand,
  .studio-brand,
  .radar-brand,
  .site-home .brand,
  .site-center .brand,
  .site-simulator .brand,
  .site-admin .brand {
    min-width: 0;
    flex: 0 1 auto;
    white-space: nowrap;
  }

  .topbar nav,
  .studio-header nav,
  .moments-header nav,
  .radar-header nav,
  .top-actions,
  .head-actions {
    min-width: 0;
    white-space: nowrap;
  }

  .home-shortcut {
    width: 46px;
    min-height: 46px;
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    justify-content: center;
    padding: 0;
  }

  .home-shortcut span { display: none; }
  .home-shortcut svg { width: 19px; height: 19px; }

  /* Homepage and bottom navigation. */
  .site-home .home-hero h1 {
    font-size: clamp(33px, 9.2vw, 36px);
    line-height: 1.03;
    letter-spacing: -.06em;
  }

  .site-home .home-hero h1 br { display: none; }
  .site-home .home-hero h1 span { display: block; white-space: nowrap; }
  .site-home .hero-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .site-home .hero-actions > * { min-height: 46px; justify-content: center; text-align: center; }
  .site-home .quick-tools { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .site-home .mobile-nav {
    height: calc(72px + env(safe-area-inset-bottom));
    padding-bottom: max(6px, env(safe-area-inset-bottom));
  }

  .site-home .drawer {
    padding: max(8px, env(safe-area-inset-top)) 8px 0;
    overscroll-behavior: contain;
  }

  .site-home .sheet {
    width: 100%;
    max-height: calc(100dvh - max(8px, env(safe-area-inset-top)));
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .site-home .close { width: 42px; height: 42px; }

  /* Text workflow pages. */
  .radar-shell,
  .studio-shell,
  .moments-header + main,
  .topbar + main {
    padding-bottom: calc(74px + env(safe-area-inset-bottom));
  }

  .search-card,
  .results-panel,
  .side-card,
  .brief-panel,
  .canvas-panel,
  .history-panel,
  .brief-card,
  .draft-card,
  .utility-card,
  .card {
    min-width: 0;
    max-width: 100%;
  }

  .platform-choice { flex-wrap: wrap; align-items: center; }
  .platform-choice legend { flex-basis: 100%; }
  .result-actions > *,
  .draft-actions > *,
  .actions > *,
  .asset-actions > * { min-height: 44px; }

  .draft-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .draft-actions > * { width: 100%; }

  .moments-header + main .variant-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .moments-header + main .variant-tabs button {
    min-width: 0;
    min-height: 58px;
    padding: 9px 8px;
  }

  .moments-header + main .variant-tabs small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Transformation timeline and image review. */
  .stage-line {
    scroll-snap-type: x proximity;
    scroll-padding-inline: 14px;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  .stage-line button { scroll-snap-align: start; }

  /* User center and administrator navigation stay reachable with one-thumb scrolling. */
  .site-center .sidebar,
  .site-admin aside {
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .site-center .sidebar a,
  .site-admin .nav { scroll-snap-align: start; }

  .site-admin .table-wrap {
    max-width: 100%;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  .site-admin .modal { padding: max(8px, env(safe-area-inset-top)) 8px 0; align-items: flex-end; }
  .site-admin .modal-card {
    width: 100%;
    max-height: calc(100dvh - max(8px, env(safe-area-inset-top)));
    border-radius: 22px 22px 0 0;
    overscroll-behavior: contain;
  }
}

@media (max-width: 480px) {
  .site-home .home-hero { padding: 30px 20px 28px; }
  .site-home .hero-copy > p:not(.eyebrow) { font-size: 15px; }
  .site-home .tool-feed { padding: 24px 16px; }

  .radar-intro h1,
  .studio-title h1,
  .moments-header + main .intro h1,
  .topbar + main .intro h1 {
    text-wrap: balance;
  }

  .moments-header + main .intro h1 { font-size: 2.25rem; }
  .moments-header + main fieldset { gap: 8px; }

  .transformation-page .compare { grid-template-columns: 1fr; }
  .transformation-page .compare img { height: auto; aspect-ratio: 1 / 1; }
  .transformation-page .result-actions { grid-template-columns: 1fr; }

  .site-admin .section-head { align-items: stretch; flex-direction: column; }
  .site-admin .toolbar > * { flex: 1 1 100%; }
  .site-admin .search { width: 100%; min-width: 0; }
}

@media (max-width: 374px) {
  .site-simulator .topbar nav a:nth-child(2),
  .site-viral-video .topbar nav a:nth-child(2) { display: none; }

  .site-home .home-hero h1 { font-size: 32px; }
  .site-home .home-hero { padding-inline: 18px; }
  .site-home .hero-actions { grid-template-columns: 1fr; }
  .site-home .hero-actions > * { width: 100%; }
  .site-home .quick-item b { font-size: 11px; }

  .draft-actions { grid-template-columns: 1fr; }
  .site-admin .brand-title { max-width: 98px; }
}

@media (max-height: 700px) and (max-width: 720px) {
  .site-home .sheet { padding-top: 20px; }
  .site-home .sheet h2 { margin-block: 8px 4px; font-size: 30px; }
  .site-home .field { margin-bottom: 12px; }
}