/* Main-site layouts and controls only. Website edition documents are isolated
   in iframes and retain their authored desktop canvas. */
.wg-example-viewport { height: 100%; min-height: 0; }
.wg-mobile-hint { display: none; }

@media (max-width: 1000px) {
  .motion-lab-app { --page-gutter: max(clamp(20px, 5vw, 72px), env(safe-area-inset-left), env(safe-area-inset-right)); }
  .motion-lab-app .site-header { left: max(clamp(12px, 2vw, 32px), env(safe-area-inset-left)); right: max(clamp(12px, 2vw, 32px), env(safe-area-inset-right)); top: max(var(--space-3), env(safe-area-inset-top)); }
  .motion-lab-app .site-header :is(.brand, .site-nav a) { display: inline-flex; align-items: center; min-height: 44px; }
  .motion-lab-app .site-header :is(.search-trigger, .motion-setting) { min-height: 44px; }
  .motion-lab-app :is(#site-shell, .study-sheet) :is(.ui-button, .ui-icon-button, .ui-chip, .ws-button, .preset-chip, .filter-chip, .related-chip, .lang-chip, .language-suggestion, .prompt-copy) {
    min-height: 44px;
    max-width: 100%;
    white-space: normal;
    touch-action: manipulation;
  }
  .motion-lab-app :is(#site-shell, .study-sheet) .ui-icon-button { min-width: 44px; flex-shrink: 0; }
  .motion-lab-app :is(#site-shell, .study-sheet) :is(.ui-field, .filter-search, .control-select, .control-input, .playback-speed, .ws-fields input, .ws-fields select, .ws-playback select) {
    min-height: 44px;
    min-width: 0;
    max-width: 100%;
    font-size: var(--type-body-size);
  }
  .motion-lab-app :is(#site-shell, .study-sheet) input[type="range"] { min-height: 44px; }
  .motion-lab-app .control-toggle-field { min-height: 44px; }
  .motion-lab-app .control-switch { height: 44px; padding-block: 11px; background: transparent; }
  .motion-lab-app .control-switch::before { content: ""; position: absolute; inset: 8px 0; border-radius: inherit; background: var(--surface-3); }
  .motion-lab-app .control-switch[aria-checked="true"] { background: transparent; }
  .motion-lab-app .control-switch[aria-checked="true"]::before { background: var(--accent); }
  .motion-lab-app .control-thumb { position: relative; }
  .motion-lab-app #site-shell :is(.wb-button, .sb-button, .ws-button):active { transition: none; }

  .motion-lab-app .wg-hero { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); padding-top: var(--space-7); }
  .motion-lab-app .wg-featured { width: min(100%, 620px); justify-self: center; }
  .motion-lab-app .wg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .motion-lab-app .wg-tools { position: static; }
  .motion-lab-app .wg-hero-meta { flex-wrap: wrap; }
  .motion-lab-app .adv-card.is-wide { display: flex; min-width: 0; }
  .motion-lab-app .adv-card.is-wide .adv-art { order: 1; }
  .motion-lab-app .adv-card.is-wide .adv-open { order: 2; }

  /* The toolbar adapts to the device; the examples keep a scrollable canvas. */
  .motion-lab-app .site-shell:has(.wg-example-page) { height: auto; min-height: 100dvh; overflow: visible; }
  .motion-lab-app .site-main:has(.wg-example-page) { overflow: visible; }
  .motion-lab-app .wg-example-page { min-width: 0; height: auto; padding: var(--space-4) var(--page-gutter); }
  .motion-lab-app .wg-example-page .wg-example-toolbar { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); padding-bottom: var(--space-3); background: transparent; backdrop-filter: none; }
  .motion-lab-app .wg-example-switcher { min-width: 0; width: 100%; }
  .motion-lab-app .wg-style-select { flex: 1; width: 0; max-width: none; }
  .motion-lab-app .wg-toolbar-actions { justify-self: stretch; justify-content: start; padding: 0; }
  .motion-lab-app .wg-frame-state { flex-basis: 100%; }
  .motion-lab-app .wg-example-info { align-items: start; flex-direction: column; gap: var(--space-2); padding-top: var(--space-3); }
  .motion-lab-app .wg-mobile-hint { display: block; padding-bottom: var(--space-3); }
  .motion-lab-app .wg-frame-wrap { flex: none; height: 70svh; min-height: 360px; }
  .motion-lab-app .wg-example-viewport { width: 100%; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-md); }
  .motion-lab-app .wg-example-frame { width: 1100px; max-width: none; border: 0; border-radius: 0; box-shadow: none; }
  .motion-lab-app .wg-inspector { inset: calc(var(--header-h) + var(--space-3)) var(--page-gutter) auto; width: auto; max-height: calc(100dvh - var(--header-h) - var(--space-5)); }
}

@media (max-width: 1000px) {
  .motion-lab-app .search-root {
    top: var(--search-viewport-top, 0px);
    bottom: auto;
    height: var(--search-viewport-height, 100dvh);
    padding: max(var(--space-3), env(safe-area-inset-top)) var(--space-3) max(var(--space-3), env(safe-area-inset-bottom));
  }
  .motion-lab-app .search-dialog { max-height: 100%; }
  .motion-lab-app .search-head { padding: var(--space-3); gap: var(--space-2); }
  .motion-lab-app .search-input { font-size: var(--type-body-size); min-height: 44px; }
  .motion-lab-app .search-close { min-width: 44px; min-height: 44px; }
  .motion-lab-app .search-key, .motion-lab-app .search-foot { display: none; }
  .motion-lab-app .search-results { min-height: 0; overscroll-behavior: contain; }
  .motion-lab-app .search-item { min-height: 56px; gap: var(--space-2); }
  .motion-lab-app .search-item-sub { white-space: normal; overflow-wrap: anywhere; }
  .motion-lab-app .search-item-kind { flex-shrink: 0; }

}

@media (max-width: 760px) {
  html.home-snap { scroll-snap-type: none; }
  .motion-lab-app { --page-gutter: max(20px, env(safe-area-inset-left), env(safe-area-inset-right)); }
  .motion-lab-app .site-header {
    inset: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) auto max(8px, env(safe-area-inset-left));
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-1) var(--space-2);
    padding: var(--space-2);
    border-radius: var(--r-md);
  }
  .motion-lab-app .brand { min-height: 44px; gap: var(--space-2); }
  .motion-lab-app .brand-name { font-size: var(--type-meta-size); }
  .motion-lab-app .header-actions { gap: var(--space-1); }
  .motion-lab-app .site-header .search-trigger { min-width: 44px; height: 44px; justify-content: center; padding-inline: var(--space-1); }
  .motion-lab-app .site-header .motion-setting { height: 44px; width: 124px; max-width: 124px; font-size: var(--type-meta-size); }
  .motion-lab-app .site-nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: 100%; min-width: 0; gap: 0; padding: var(--space-1); }
  .motion-lab-app .site-nav a { display: flex; justify-content: center; align-items: center; min-width: 0; min-height: 44px; padding: var(--space-1) 0; font-size: var(--type-meta-size); white-space: nowrap; }
  .motion-lab-app .site-footer { padding-bottom: max(var(--space-6), env(safe-area-inset-bottom)); }
  .motion-lab-app .back-to-top { right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); }

  .motion-lab-app .home-hero { padding-top: var(--space-6); gap: var(--space-6); min-height: 0; }
  .motion-lab-app .hero-title { white-space: normal; }
  .motion-lab-app .hero-stage { min-height: 0; padding: var(--space-3); }
  .motion-lab-app .sc-stage { padding: var(--space-2); }
  .motion-lab-app .sc-foot { flex-wrap: wrap; gap: var(--space-3); }
  .motion-lab-app .sc-thumb { width: 44px; min-width: 44px; min-height: 44px; }
  .motion-lab-app .home-mini-preview .study-preview-unique svg { width: min(100%, 150px); }
  .motion-lab-app :is(.home-cta, .home-learn-links a, .ws-header-links a, .ws-next a, .ws-back, .sb-toc a) { display: inline-flex; align-items: center; min-height: 44px; }

  .motion-lab-app .il-intro { margin-bottom: var(--space-5); }
  .motion-lab-app .il-section-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .motion-lab-app .il-section-nav a { justify-content: start; }
  .motion-lab-app .il-lesson-link { min-height: 44px; }
  .motion-lab-app .il-step { min-height: 48px; }
  .motion-lab-app .il-case-actions { gap: var(--space-4); }
  .motion-lab-app .il-case-actions .ui-text-link { display: inline-flex; align-items: center; min-height: 44px; }
  .motion-lab-app .ws-tabs { flex-wrap: wrap; gap: var(--space-1); }
  .motion-lab-app .ws-tabs .ws-button { flex: 1 0 auto; }
  .motion-lab-app .ws-analysis-options label { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; }
  .motion-lab-app .ws-analysis-options input { width: 20px; height: 20px; }
  .motion-lab-app .ws-track-name { overflow-wrap: anywhere; }
  .motion-lab-app .adv-card { padding: var(--space-5); }

  .motion-lab-app .wg-hero { padding-bottom: var(--space-6); }
  .motion-lab-app .wg-featured { transform: none; gap: var(--space-3); }
  .motion-lab-app .wg-feature { min-width: 0; padding: var(--space-4); transform: none; }
  .motion-lab-app .wg-feature > strong { font-size: 64px; }
  .motion-lab-app .wg-feature > span { font-size: var(--type-eyebrow-size); overflow-wrap: anywhere; }
  .motion-lab-app .wg-feature-neo-brutalist { min-height: 96px; }
  .motion-lab-app .wg-feature-bauhaus > strong { transform: none; }
  .motion-lab-app .wg-search-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .motion-lab-app .wg-result-heading, .motion-lab-app .wg-search { grid-column: 1 / -1; width: 100%; }
  .motion-lab-app .wg-purpose { width: 100%; min-width: 0; }
  .motion-lab-app .wg-saved-toggle { grid-column: 1 / -1; justify-self: start; }
  .motion-lab-app .wg-groups { flex-wrap: nowrap; overflow-x: auto; padding-bottom: var(--space-2); scrollbar-width: thin; }
  .motion-lab-app .wg-group { flex-shrink: 0; }
  .motion-lab-app .wg-footnote { flex-direction: column; gap: var(--space-4); }
  .motion-lab-app .wg-footnote a { white-space: normal; }

  .motion-lab-app .sheet-bar { height: auto; min-height: 64px; padding-top: env(safe-area-inset-top); grid-template-columns: 1fr auto; gap: var(--space-2); }
  .motion-lab-app .sheet-crumb { display: none; }
  .motion-lab-app :is(.sheet-close, .sheet-step) { min-width: 44px; min-height: 44px; }
  .motion-lab-app .sheet-stage-wrap { min-height: 330px; height: 52svh; }
  .motion-lab-app .sheet-inspector { padding-bottom: max(var(--space-6), env(safe-area-inset-bottom)); }
}

@media (max-width: 480px) {
  .motion-lab-app .il-course-nav, .motion-lab-app .wg-grid { grid-template-columns: minmax(0, 1fr); }
  .motion-lab-app .il-course { padding: var(--space-5); }
  .motion-lab-app .il-course-main .ui-card-title { font-size: var(--type-card-size); }
  .motion-lab-app .il-course-main p { font-size: var(--type-small-size); }
  .motion-lab-app .il-course-top svg { display: block; }
  .motion-lab-app .wg-feature > p { font-size: var(--type-meta-size); }
  .motion-lab-app .wg-routes > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .motion-lab-app .wg-routes a { padding-inline: var(--space-3); }
  .motion-lab-app .wg-hero-meta { gap: var(--space-2) var(--space-4); }
}

@media (max-width: 1000px) and (max-height: 500px) {
  .motion-lab-app .site-header { position: absolute; }
  .motion-lab-app .sheet-bar { min-height: 52px; }
}