/* SPDX-License-Identifier: AGPL-3.0-only */
/* Clear native range controls across Chromium, Safari and Firefox. */
.controls .range-field { font-size: 12px; margin: 15px 0; }
.controls .range-field output { color: var(--ink); font-weight: 700; }
.controls .range-field input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 44px;
  margin: 3px 0 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  touch-action: pan-y;
}
.controls input[type="range"]::-webkit-slider-runnable-track {
  height: 9px;
  border: 1px solid var(--line-strong);
  border-radius: 99px;
  background: linear-gradient(to right, var(--accent) 0 var(--range-fill, 50%), color-mix(in srgb, var(--muted) 42%, var(--bg-elevated)) var(--range-fill, 50%) 100%);
}
.controls input[type="range"]::-moz-range-track {
  height: 9px;
  border: 1px solid var(--line-strong);
  border-radius: 99px;
  background: linear-gradient(to right, var(--accent) 0 var(--range-fill, 50%), color-mix(in srgb, var(--muted) 42%, var(--bg-elevated)) var(--range-fill, 50%) 100%);
}
.controls input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 28px;
  height: 28px;
  margin-top: -11px;
  border: 3px solid var(--bg-elevated);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 3px 9px #0005;
}
.controls input[type="range"]::-moz-range-thumb {
  width: 23px;
  height: 23px;
  border: 3px solid var(--bg-elevated);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 3px 9px #0005;
}
.controls .text-entry-button {
  min-height: 44px;
  border-color: var(--action-border);
  color: var(--accent);
  background: var(--action-primary-bg);
  font-size: 13px;
}
.controls .text-options {
  margin: 20px 0;
  padding: 15px 12px;
  border: 1px solid var(--action-border);
  border-radius: 12px;
  background: var(--action-primary-bg);
  scroll-margin-top: 20px;
}
.controls .text-options summary { color: var(--accent); font-size: 14px; font-weight: 750; }
.controls .text-options summary span { font-size: 20px; line-height: 1; }
.controls .text-options[open] summary span { transform: rotate(45deg); }
.controls .text-options textarea { min-height: 96px; font-size: 14px; }
.mobile-workflow, .mobile-export-link { display: none; }
.mobile-device-notice { display: none; }

@media (max-width: 960px) {
  body:not(.mobile-editor-accepted) .mobile-device-notice {
    display: block;
    padding: 24px 20px;
    margin-bottom: 25px;
    border: 1px solid var(--action-border);
    border-radius: 16px;
    background: var(--action-primary-bg);
  }
  body:not(.mobile-editor-accepted) #upload-panel { display: none; }
  .mobile-device-notice h2 { font-size: 25px; line-height: 1.3; margin-bottom: 12px; }
  .mobile-device-notice > p:not(.eyebrow) { color: var(--ink); font-size: 14px; line-height: 1.8; }
  .mobile-device-notice .button-row { margin-top: 20px; display: grid; gap: 10px; }
  .mobile-device-notice .button { min-height: 48px; font-size: 14px; }
  .studio-shell { padding: 0 14px; }
  .studio-header { padding: 16px 0; }
  .studio-header-right > a { display: none; }
  .theme-field select { width: 112px; font-size: 16px; }
  .hero { padding: 30px 0 24px; }
  .hero h1 { font-size: clamp(42px, 9vw, 64px); }
  .hero-copy { font-size: 15px; overflow-wrap: anywhere; }
  .privacy-pill { display: none; }
  #workspace { padding-bottom: 20px; min-width: 0; }
  .project-bar { align-items: stretch; flex-direction: column; gap: 12px; padding: 18px 0; }
  .project-bar > div { min-width: 0; max-width: 100%; }
  .project-bar .button-row { display: grid; grid-template-columns: 1fr 1fr; }
  .project-bar .button { font-size: 12px; min-height: 44px; }
  .mobile-workflow {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    position: sticky;
    top: 0;
    z-index: 25;
    margin-bottom: 12px;
    padding: 7px 0;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
  }
  .mobile-workflow button {
    min-width: 0;
    min-height: 43px;
    padding: 8px 5px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--bg-elevated);
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
  }
  .mobile-workflow button[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); background: var(--action-primary-bg); }
  .mobile-workflow span { font-size: 10px; white-space: nowrap; }
  .editor-layout { display: block; min-width: 0; }
  #workspace[data-mobile-view="screens"] .canvas-panel,
  #workspace[data-mobile-view="screens"] .controls,
  #workspace[data-mobile-view="screens"] .export-panel,
  #workspace[data-mobile-view="edit"] .image-library,
  #workspace[data-mobile-view="edit"] .export-panel,
  #workspace[data-mobile-view="export"] .editor-layout { display: none; }
  .image-library .panel-heading { padding: 17px; }
  .image-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    max-height: none;
    overflow: visible;
    padding: 10px;
    scroll-snap-type: none;
  }
  .image-choice { min-width: 0; min-height: 68px; padding: 11px 9px; border-color: var(--line); }
  .image-choice .image-number { display: none; }
  .image-choice strong { font-size: 12px; line-height: 1.5; }
  .image-choice small { font-size: 10px; line-height: 1.5; }
  .image-choice > span { min-width: 0; }
  .canvas-panel {
    position: sticky;
    top: 65px;
    z-index: 15;
    margin-bottom: 16px;
    background: var(--bg-elevated);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
  }
  .canvas-toolbar { padding: 9px 12px; gap: 10px; }
  .canvas-toolbar > div { min-width: 0; }
  .canvas-toolbar h2 { font-size: 13px; line-height: 1.4; }
  .canvas-toolbar .eyebrow { display: none; }
  .canvas-toolbar .button { min-height: 34px; flex-shrink: 0; }
  .canvas-stage { min-height: 0; padding: 8px; }
  .preview-frame { border-radius: 7px; }
  .preview-frame canvas { max-height: clamp(100px, 24vh, 200px); max-height: clamp(100px, 24svh, 200px); width: auto; height: auto; }
  .screen-label { bottom: 4px; padding: 4px 7px; font-size: 7px; }
  .canvas-foot { padding: 7px 12px; flex-wrap: nowrap; font-size: 10px; }
  .canvas-foot .text-button { font-size: 10px; }
  .controls > #edit-controls { display: block; padding: 18px 16px; }
  .controls .panel-heading { padding: 16px; }
  .controls .panel-heading h2 { font-size: 16px; }
  .controls .panel-heading p { font-size: 12px; }
  .controls .button { min-height: 48px; font-size: 14px; }
  .controls .field { font-size: 13px; gap: 8px; margin: 18px 0 9px; }
  .controls .field select, .controls .field input, .controls .field textarea { font-size: 16px; min-height: 46px; }
  .controls .field-hint { font-size: 12px; margin: 8px 0 14px; }
  .controls .fit-field { margin: 22px 0; }
  .controls .fit-field legend { font-size: 13px; }
  .controls .fit-options { gap: 7px; }
  .controls .fit-options span { padding: 12px 4px; }
  .controls .fit-options b { font-size: 13px; }
  .controls .fit-options small { font-size: 11px; }
  .controls .range-field { font-size: 13px; margin: 17px 0; }
  .controls .two-fields:has(#pan-x) { grid-template-columns: 1fr; gap: 0; }
  .controls .color-field { font-size: 12px; }
  .controls .color-field input { width: 43px; height: 38px; }
  .controls .text-options { padding: 17px 14px; scroll-margin-top: calc(clamp(100px, 24svh, 200px) + 150px); }
  .controls .text-options summary { font-size: 16px; }
  .controls .text-options textarea { font-size: 16px; }
  .editor-layout:has(#overlay-text:focus) .preview-frame canvas { max-height: clamp(55px, 12svh, 95px); }
  .editor-layout:has(#overlay-text:focus) .canvas-foot { display: none; }
  .controls .text-options:focus-within { scroll-margin-top: calc(clamp(55px, 12svh, 95px) + 120px); }
  .controls .restore-row { gap: 14px; margin: 12px 0 20px; }
  .controls .restore-row .text-button { font-size: 12px; padding: 8px 0; min-height: 40px; }
  .mobile-export-link { display: flex; margin-top: 15px; }
  .export-panel { grid-template-columns: 1fr; margin-top: 0; padding: 20px 17px; }
  .export-button { grid-column: 1; grid-row: 3; width: 100%; min-width: 0; min-height: 50px; font-size: 15px; }
  .export-options { grid-row: 2; gap: 20px; }
  .export-options p { font-size: 13px; }
  .export-options details summary { padding: 10px 0; font-size: 13px; }
  .export-options .field input { font-size: 16px; min-height: 46px; }
  .export-options .field-hint { font-size: 12px; }
  .status-panel { position: static; }
  .status-panel:is(.is-processing, .is-error) {
    position: fixed;
    top: auto;
    bottom: max(10px, env(safe-area-inset-bottom));
    left: 12px;
    right: 12px;
    z-index: 60;
    margin: 0;
    padding: 12px;
  }
  .status-panel strong { font-size: 12px; }
  #dismiss-status { font-size: 24px; min-width: 32px; min-height: 32px; }
}
@media (max-width: 960px) and (max-height: 500px) {
  .preview-frame canvas { max-height: 16vh; max-height: 16svh; }
  .canvas-foot { display: none; }
  .canvas-toolbar { padding: 5px 10px; }
}