/* ── How the page recomposes per viewport. Loaded last so these win. ─────── */

/* Short viewports: compress the hero so the whole tool fits. */
@media (max-height: 800px) {
  .gs-hero {
    gap: var(--space-sm);
    padding-top: calc(var(--space-sm) + 3.25rem);
  }


  .gs-editor { padding: var(--space-sm); gap: var(--space-xs); }
}

/* Touch has no hover: the stop bar stays open so its handles can be seen and
   grabbed (they were draggable before, but invisible). */
@media (hover: none) {
  .gs-hero:not(.is-mesh) .gs-stripe {
    height: 2.2rem;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  }
  .gs-hero:not(.is-mesh) .gs-stripe .gs-stop-handle {
    opacity: 1;
    pointer-events: auto;
  }
}

/* ── Phone ───────────────────────────────────────────────────────────────────
   Recomposed, not shrunk. The stage is the top of the screen and the dock sits
   below it on the page floor, so no control covers a color point and no point
   hides under a control. The color list is a sheet opened from the dock, every
   control is a 44px target, and fields use 16px text so iOS does not zoom. */
@media (max-width: 40rem) {
  /* The viewport fade otherwise paints over the Code row below the stage.
     The stage keeps its own bottom fade; the controls need no overlay. */
  body.gs-page .page-scroll-edge { display: none; }

  .gs-hero {
    --gs-stage-h: min(60svh, 34rem);
    min-height: 0;
    padding: calc(var(--gs-stage-h) + 0.75rem) 0.75rem 1.25rem;
    gap: 0.75rem;
  }
  .gs-hero__backdrop,
  .gs-stage-light,
  .gs-stage-gl,
  .gs-hero__scrim,
  .gs-stage-nodes {
    bottom: auto;
    height: var(--gs-stage-h);
  }
  /* No parallax under a finger; the overscale would bleed below the stage fade. */
  .gs-hero__backdrop,
  .gs-stage-light,
  .gs-stage-gl { transform: none; }
  .gs-hero__copy {
    position: absolute;
    top: calc(var(--gs-header-clear) + 0.25rem);
    left: var(--gs-edge);
    right: var(--gs-edge);
    width: auto;
    margin: 0;
  }
  .gs-title { font-size: 1.35rem; }
  /* Under the headline on a phone, with 44px targets */
  .gs-doc { top: calc(var(--gs-header-clear) + 4.25rem); height: 2.875rem; }
  .gs-doc__name, .gs-doc__btn { height: 2.75rem; }
  .gs-trash {
    top: calc(var(--gs-stage-h) - 4.4rem);
    bottom: auto;
    right: 1rem;
  }

  /* Unset edge chips would ring a small stage with twelve targets; set edges
     stay, and new edge colors are a wider-screen task. */
  .gs-mesh-edge:not(.is-set) { display: none; }

  /* The dock: full width under the stage, no drag grip, laid out as one grid:
     the stripe, the five types, then layers · angle · space, then tools and
     Colors, then Code as the full-width primary action in the thumb zone. */
  .gs-editor {
    width: 100%;
    max-width: none;
    padding: 0.75rem 0.75rem 0.85rem;
    gap: 0.6rem;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
      "stripe stripe stripe"
      "type type type"
      "layers angle space"
      "tools colors colors"
      "code code code";
    align-items: center;
  }
  .gs-editor__grip { display: none; }
  .gs-controls,
  .gs-editor-foot,
  .gs-editor-actions { display: contents; }
  .gs-stripe { grid-area: stripe; }
  .gs-control--angle { grid-area: angle; }
  .gs-control--space { grid-area: space; justify-self: end; }
  .gs-layers { grid-area: layers; }
  .gs-tools { grid-area: tools; justify-self: start; }
  .gradient-studio .gs-editor .gs-colors-toggle { grid-area: colors; justify-self: end; }
  .gs-editor-actions .gs-code-open { grid-area: code; width: 100%; }
  /* Grid items now, not direct children: keep them above the glass sheen. */
  .gs-control--type,
  .gs-control--angle,
  .gs-control--space,
  .gs-layers,
  .gs-tools,
  .gradient-studio .gs-editor .gs-colors-toggle,
  .gs-editor-actions .gs-code-open { position: relative; z-index: 1; }
  .gs-control--type {
    grid-area: type;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    width: 100%;
  }
  .gradient-studio .gs-editor .gs-seg {
    min-height: 2.75rem;
    padding-inline: 0.35rem;
  }
  .gradient-studio .gs-editor .gs-seg--icon { min-width: 2.75rem; }
  .gradient-studio .gs-editor .gs-colors-toggle { display: inline-flex; }
  .gs-editor-actions .gs-code-open { min-height: 2.75rem; }
  .gradient-studio .gs-layers .gs-layer { width: 2.75rem; height: 2.25rem; }
  .gradient-studio .gs-layer-add,
  .gradient-studio .gs-layer-del,
  .gs-layer-blend { height: 2.25rem; }
  .gs-starters { gap: 0.6rem; }
  .gradient-studio .gs-starter { width: 2.75rem; height: 2.75rem; }
  .gs-starters__label { width: 100%; text-align: center; margin: 0; }

  /* The color panel: a bottom sheet over the dock, opened by Colors. */
  .gs-layer-panel {
    position: fixed;
    top: auto;
    left: 0.5rem;
    right: 0.5rem;
    bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
    width: auto;
    max-height: min(75svh, 34rem);
    transform: none;
    z-index: 10010; /* on <body> while a sheet: above the page and the site's floating dock (10000) */
    padding: 0.75rem;
    border-radius: 1.1rem;
    background: rgba(10, 14, 22, 0.95);
  }
  .gs-layer-panel:not(.is-sheet-open) { display: none; }
  .gs-layer-panel__grip { display: none; }
  .gs-layer-panel__head { cursor: default; font-size: 0.78rem; padding-bottom: 0.35rem; }
  .gs-layer-panel .gs-layer-panel__toggle { width: 2.75rem; height: 2.75rem; font-size: 1.2rem; }
  .gs-layer-row { min-height: 2.75rem; gap: 0.6rem; }
  .gs-layer-row__swatch { width: 2rem; height: 2rem; }
  .gs-layer-panel .gs-layer-row__hex { font-size: 1rem; min-height: 2.5rem; }
  .gs-layer-panel .gs-layer-row__del { width: 2.75rem; height: 2.75rem; font-size: 1.2rem; }
  .gs-layer-panel .gs-layer-panel__add { min-height: 2.75rem; font-size: 0.85rem; }
  .gs-layer-panel__hint,
  .gs-layer-panel__subhead { font-size: 0.72rem; }
  .gs-hsv .gs-hsv__hex { font-size: 1rem; }

  /* Code: the shared sheet; the code box and buttons sized for a thumb. */
  .gs-code-window__code { font-size: 1rem; }
  .gs-code-menu .gs-btn,
  .gs-code-menu .gs-codetab { min-height: 2.75rem; }
  .gs-actions__spacer { display: none; }

  /* Sections: one rhythm, and the curated grid opens with a preview. */
  .gs-curated,
  .gs-faq { padding: var(--space-xl) var(--space-md); }
  .gs-curated__grid { gap: 0.6rem; }
  .gs-card__swatch { min-height: 5.5rem; }
  .gs-curated__grid:not(.is-expanded) > .is-extra { display: none; }
  .gs-curated__more:not([hidden]) {
    display: flex;
    width: 100%;
    min-height: 2.75rem;
    margin-top: 1rem;
  }
  .gs-filter__chip { min-height: 2.75rem; }
  .gs-ramp__save,
  .gs-ramp__del { height: 2.25rem; }
  .gs-ramp__del { width: 2.25rem; }

  /* Toasts (the design system's, components/toastNotification) sit under the header, not over
     the controls and their Code button; a deck's cards peek upward into the gap. */
  body.gs-page .ds-toast {
    top: calc(5.5rem + env(safe-area-inset-top, 0px));
    bottom: auto;
  }
}

/* Touch tablets keep the docked panel; its small controls get finger targets. */
@media (pointer: coarse) and (min-width: 40.01rem) {
  .gs-layer-panel .gs-layer-panel__toggle,
  .gs-layer-panel .gs-layer-row__del { width: 2.75rem; height: 2.75rem; }
  .gs-layer-panel .gs-layer-row__hex { min-height: 2.25rem; }
  .gs-layer-panel .gs-layer-panel__add { min-height: 2.75rem; }
}