/*
 * Shared mobile layer for every generated tool page.
 *
 * This file is loaded after the optional tool-pack styles so the mobile
 * contract stays consistent even when a tool owns a more specific desktop
 * workbench layout. Keep tool-specific behavior in the pack stylesheet; use
 * this layer for shared ergonomics, safe areas and viewport constraints.
 */

@media (max-width: 900px) {
  :root {
    --mobile-page-gutter: max(10px, env(safe-area-inset-left));
    --mobile-page-gutter-end: max(10px, env(safe-area-inset-right));
  }

  .app-shell:not(.is-home) {
    width: min(
      calc(100% - var(--mobile-page-gutter) - var(--mobile-page-gutter-end)),
      1600px
    );
    padding-block: 18px 36px;
  }

  .app-shell:not(.is-home) .layout {
    gap: 10px;
  }

  .app-shell:not(.is-home) .tool-header {
    margin-block-end: 10px;
  }

  .app-shell:not(.is-home) .tool-workbench {
    padding: 16px;
  }

  .app-shell:not(.is-home) .tool-workbench,
  .app-shell:not(.is-home) .tool-guide,
  .app-shell:not(.is-home) .panel,
  .app-shell:not(.is-home) .side-panel {
    min-width: 0;
  }

  .app-shell:not(.is-home) input[type="range"] {
    min-height: 44px;
  }

  .tool-toolbar {
    gap: 8px;
  }

  .tool-toolbar > * {
    min-width: 0;
    max-width: 100%;
  }

  .tool-toolbar :where(button, a, label) {
    max-width: 100%;
  }

  .tool-guide {
    gap: 18px;
  }

  .table-wrap {
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  .textarea-field.is-expanded {
    inset-block-start: max(8px, env(safe-area-inset-top));
    inset-inline-end: max(8px, env(safe-area-inset-right));
    inset-block-end: max(8px, env(safe-area-inset-bottom));
    inset-inline-start: max(8px, env(safe-area-inset-left));
  }

  .learning-fullscreen-shell:fullscreen,
  .learning-fullscreen-shell[data-fullscreen-mode="fallback"] {
    padding-block-start: max(8px, env(safe-area-inset-top));
    padding-inline-end: max(8px, env(safe-area-inset-right));
    padding-block-end: max(8px, env(safe-area-inset-bottom));
    padding-inline-start: max(8px, env(safe-area-inset-left));
  }

  .html-run-shell {
    min-height: 0;
  }

  .html-run-pane {
    min-height: 420px;
  }

  .html-run-preview-pane {
    min-height: 360px;
  }

  .html-run-shell[data-panel-mode="4"] {
    grid-template-rows: repeat(4, minmax(340px, auto));
  }

  .html-run-toolbar,
  .html-run-preview-toolbar,
  .html-run-source-toolbar {
    padding: 7px 8px;
  }

  .page-feedback-dialog {
    max-height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }

  .page-feedback-dialog-frame {
    max-height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
}

@media (max-width: 600px) {
  .app-shell:not(.is-home) {
    padding-block: 14px 30px;
  }

  .app-shell:not(.is-home) .tool-workbench {
    padding: 14px;
  }

  .app-shell:not(.is-home) .tool-header h1 {
    font-size: clamp(29px, 9vw, 38px);
    line-height: 1.14;
  }

  .app-shell:not(.is-home) .breadcrumb {
    gap: 6px;
    margin-block-end: 9px;
    font-size: 13px;
  }

  .app-shell:not(.is-home) :where(input, select, textarea) {
    font-size: 16px;
  }

  .app-shell:not(.is-home) :where(button, .btn, .primary-btn, .secondary-btn, .danger-btn) {
    min-height: 46px;
  }

  .app-shell:not(.is-home) .icon-btn,
  .app-shell:not(.is-home) .textarea-copy-btn,
  .app-shell:not(.is-home) .textarea-expand-btn {
    min-width: 46px;
    width: 46px;
    min-height: 46px;
  }

  .app-shell:not(.is-home) .tool-toolbar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }

  .app-shell:not(.is-home) .tool-toolbar > * {
    width: 100%;
  }

  .app-shell:not(.is-home) .tool-toolbar > .full,
  .app-shell:not(.is-home) .tool-toolbar > .tool-toolbar-wide {
    grid-column: 1 / -1;
  }

  .app-shell:not(.is-home) .tool-guide {
    padding: 14px;
  }

  .app-shell:not(.is-home) .tool-guide-steps {
    gap: 9px;
  }

  .app-shell:not(.is-home) .tool-guide-steps > li {
    padding: 12px;
  }

  .side-panel {
    border-radius: var(--radius-sm);
  }

  .app-shell:not(.is-home) .layout.is-side-collapsed .side-expand-toggle {
    width: auto;
    min-width: 104px;
    justify-content: flex-start;
  }

  .side-link {
    flex-basis: clamp(126px, 34vw, 164px);
  }

  .output-box,
  .preview-box,
  .preview-frame {
    max-width: 100%;
  }

  .html-run-shell[data-panel-mode="4"] {
    grid-template-rows: repeat(4, minmax(300px, auto));
  }

  .html-run-pane {
    min-height: 380px;
  }

  .html-run-preview-pane {
    min-height: 320px;
  }

  .html-run-library-modal {
    padding-block-start: max(8px, env(safe-area-inset-top));
    padding-inline-end: max(8px, env(safe-area-inset-right));
    padding-block-end: max(8px, env(safe-area-inset-bottom));
    padding-inline-start: max(8px, env(safe-area-inset-left));
  }

  .html-run-library-dialog {
    max-height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }

  .page-feedback-dialog {
    width: calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right));
  }

  .toast {
    bottom: max(18px, calc(12px + env(safe-area-inset-bottom)));
  }
}

@media (max-width: 380px) {
  .app-shell:not(.is-home) .tool-toolbar {
    grid-template-columns: minmax(0, 1fr);
  }

  .app-shell:not(.is-home) .tool-toolbar > .full,
  .app-shell:not(.is-home) .tool-toolbar > .tool-toolbar-wide {
    grid-column: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .side-panel,
  .table-wrap,
  .html-run-preview-viewport {
    scroll-behavior: auto;
  }
}