/* ==========================================================================
   T-Forward Alpine — QR Studio
   The generator surface: content-type tabs, collapsible design sections,
   shape swatch grids, colour controls and the sticky live preview.
   ========================================================================== */

.studio {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 28px;
  align-items: start;
}
@media (max-width: 940px) { .studio { grid-template-columns: minmax(0, 1fr); } }

/* -------------------------------------------------- content type tabs ---- */

.type-tabs {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px;
  padding-bottom: 20px; border-bottom: 1px solid var(--card-border);
}
.type-tab {
  font-family: var(--font-ui); font-size: 13px; font-weight: 600;
  color: var(--text-muted); background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--card-border); border-radius: 10px;
  padding: 9px 15px; cursor: pointer; transition: all 0.18s;
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
}
.type-tab:hover { color: #fff; background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.18); }
.type-tab[aria-selected="true"] {
  background: rgba(13, 148, 136, 0.18); border-color: var(--spruce);
  color: var(--spruce-bright); box-shadow: 0 0 18px rgba(13, 148, 136, 0.18);
}
.type-tab svg { flex: none; }
.type-tab .tab-flag {
  font-size: 9px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase;
  background: rgba(245, 158, 11, 0.16); color: var(--aspen-gold);
  border: 1px solid rgba(245, 158, 11, 0.3); border-radius: 4px; padding: 1px 5px;
}

.type-panel { display: none; }
.type-panel.active { display: block; }

/* ------------------------------------------------ collapsible sections --- */

.studio-section {
  border: 1px solid var(--card-border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
  margin-bottom: 12px;
  overflow: hidden;
}
.studio-section.open { border-color: rgba(13, 148, 136, 0.28); background: rgba(13, 148, 136, 0.04); }

.section-toggle {
  width: 100%; display: flex; align-items: center; gap: 11px;
  padding: 15px 18px; cursor: pointer; background: transparent; border: 0;
  font-family: var(--font-ui); font-size: 14px; font-weight: 700;
  color: var(--text); text-align: left; transition: background 0.18s;
}
.section-toggle:hover { background: rgba(255, 255, 255, 0.03); }
.section-toggle .sec-icon { color: var(--spruce); flex: none; display: flex; }
.section-toggle .sec-summary {
  margin-left: auto; font-size: 11px; font-weight: 600; color: var(--text-dim);
  font-family: var(--font-mono); text-transform: none; letter-spacing: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 45%;
}
.section-toggle .chev { transition: transform 0.22s ease; color: var(--text-dim); flex: none; }
.studio-section.open .section-toggle .chev { transform: rotate(180deg); }
.studio-section.open .section-toggle .sec-summary { opacity: 0; }

.section-body { padding: 4px 18px 20px; display: none; }
.studio-section.open .section-body { display: block; }

.control { margin-bottom: 18px; }
.control:last-child { margin-bottom: 4px; }
.control-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 9px;
}
.control-head .field-label { margin-bottom: 0; }
.control-head .ico { color: var(--text-dim); display: flex; flex: none; }
.control-head .val {
  margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--spruce-bright);
}

/* ---------------------------------------------------------- swatch grid -- */

.swatch-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px;
}
/* Frame previews carry more detail than a single dot shape, so they get room. */
.frame-grid { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
.frame-grid .swatch svg { width: 84%; height: 84%; }
.swatch {
  aspect-ratio: 1 / 1; border-radius: 10px; cursor: pointer;
  background: rgba(255, 255, 255, 0.04); border: 1px solid transparent;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s; padding: 0; position: relative;
}
.swatch:hover { background: rgba(255, 255, 255, 0.09); transform: translateY(-1px); }
.swatch svg { width: 74%; height: 74%; display: block; }
.swatch svg path, .swatch svg circle, .swatch svg rect { fill: var(--text-muted); transition: fill 0.15s; }
/* Frame icons paint their own cut-out colour; only unfilled parts follow the
   swatch's state colour. */
.swatch svg [fill="#0a1219"] { fill: #0a1219 !important; }
.swatch:hover svg path, .swatch:hover svg circle, .swatch:hover svg rect { fill: var(--text); }
.swatch[aria-pressed="true"] {
  background: rgba(13, 148, 136, 0.2); border-color: var(--spruce);
  box-shadow: 0 0 0 1px rgba(13, 148, 136, 0.4), 0 4px 14px rgba(13, 148, 136, 0.2);
}
.swatch[aria-pressed="true"] svg path,
.swatch[aria-pressed="true"] svg circle,
.swatch[aria-pressed="true"] svg rect { fill: var(--spruce-bright); }
.swatch .swatch-name {
  position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%);
  font-size: 10px; color: var(--text); background: var(--card-solid);
  border: 1px solid var(--card-border); border-radius: 5px; padding: 2px 7px;
  white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.15s; z-index: 5;
}
.swatch:hover .swatch-name { opacity: 1; }

/* ------------------------------------------------------- segmented ctrl -- */

.segmented {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px;
  background: rgba(7, 13, 18, 0.6); border: 1px solid var(--card-border);
  border-radius: 11px; padding: 5px;
}
.segmented button {
  font-family: var(--font-ui); font-size: 13px; font-weight: 600;
  color: var(--text-muted); background: transparent; border: 0; cursor: pointer;
  padding: 8px 10px; border-radius: 8px; transition: all 0.16s;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.segmented button:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }
.segmented button[aria-pressed="true"] {
  background: rgba(13, 148, 136, 0.22); color: var(--spruce-bright);
  box-shadow: inset 0 0 0 1px rgba(13, 148, 136, 0.4);
}

/* ------------------------------------------------------------- colours --- */

.color-field {
  display: flex; align-items: center; gap: 10px;
  background: var(--field-bg); border: 1px solid var(--card-border);
  border-radius: var(--r-md); padding: 7px 10px; transition: all 0.18s;
}
.color-field:focus-within { border-color: var(--spruce); box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.25); }
.color-field input[type="color"] {
  width: 42px; height: 34px; padding: 0; border: 1px solid var(--card-border);
  border-radius: 8px; background: transparent; cursor: pointer; flex: none;
}
.color-field input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
.color-field input[type="color"]::-webkit-color-swatch { border: none; border-radius: 6px; }
.color-field input[type="color"]::-moz-color-swatch { border: none; border-radius: 6px; }
.color-field input[type="text"] {
  border: 0; background: transparent; padding: 0; font-family: var(--font-mono);
  font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px;
}
.color-field input[type="text"]:focus { box-shadow: none; background: transparent; }

.color-presets { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.color-chip {
  width: 24px; height: 24px; border-radius: 7px; cursor: pointer; padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.18); transition: transform 0.14s;
}
.color-chip:hover { transform: scale(1.12); }

/* -------------------------------------------------------------- slider --- */

input[type="range"] {
  width: 100%; height: 6px; border-radius: 3px; appearance: none; -webkit-appearance: none;
  background: rgba(255, 255, 255, 0.1); cursor: pointer; outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--spruce); border: 2px solid #0b141c; cursor: pointer;
  box-shadow: 0 0 10px rgba(13, 148, 136, 0.55);
}
input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%; background: var(--spruce);
  border: 2px solid #0b141c; cursor: pointer; box-shadow: 0 0 10px rgba(13, 148, 136, 0.55);
}

/* -------------------------------------------------------------- switch --- */

.switch-row { display: flex; align-items: center; gap: 11px; }
.switch {
  position: relative; width: 42px; height: 24px; border-radius: 12px; flex: none;
  background: rgba(255, 255, 255, 0.12); border: 1px solid var(--card-border);
  cursor: pointer; transition: background 0.2s; padding: 0;
}
.switch::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 50%; background: var(--text-dim);
  transition: transform 0.2s, background 0.2s;
}
.switch[aria-checked="true"] { background: rgba(13, 148, 136, 0.4); border-color: var(--spruce); }
.switch[aria-checked="true"]::after { transform: translateX(18px); background: var(--spruce-bright); }
.switch-row label { font-size: 13px; color: var(--text); cursor: pointer; font-weight: 500; }

/* ------------------------------------------------------------- presets --- */

.preset-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.preset-btn {
  font-family: var(--font-ui); font-size: 12px; font-weight: 600; cursor: pointer;
  color: var(--text-muted); background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--card-border); border-radius: 9px; padding: 7px 12px;
  display: inline-flex; align-items: center; gap: 7px; transition: all 0.16s;
}
.preset-btn:hover { color: #fff; border-color: rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.07); }
.preset-dot { width: 14px; height: 14px; border-radius: 4px; flex: none; }

/* ------------------------------------------------------- preview column -- */

.preview-col { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 940px) { .preview-col { position: static; } }

.preview-pod {
  background: rgba(7, 13, 18, 0.85); border: 1px solid var(--card-border);
  border-radius: 16px; padding: 20px; text-align: center;
  display: flex; flex-direction: column; align-items: center;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}
.preview-pod-title {
  font-family: var(--font-ui); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px; color: var(--spruce); margin-bottom: 14px;
}
.preview-pod-box {
  width: 100%; max-width: 260px; aspect-ratio: 1 / 1;
  border-radius: 14px; padding: 10px; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  /* Checkerboard so a transparent background reads as transparent, not white. */
  background-color: #ffffff;
  background-image:
    linear-gradient(45deg, #e9eef3 25%, transparent 25%, transparent 75%, #e9eef3 75%),
    linear-gradient(45deg, #e9eef3 25%, transparent 25%, transparent 75%, #e9eef3 75%);
  background-size: 18px 18px;
  background-position: 0 0, 9px 9px;
}
.preview-pod-box svg, .preview-pod-box img { width: 100%; height: 100%; display: block; }
.preview-pod-status {
  font-size: 11px; color: var(--text-dim); margin-top: 12px;
  font-family: var(--font-mono); min-height: 16px;
}

/* --------------------------------------------------- scannability meter -- */

.scan-meter {
  background: rgba(7, 13, 18, 0.85); border: 1px solid var(--card-border);
  border-radius: 14px; padding: 16px 18px;
}
.scan-meter-head { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.scan-meter-head .field-label { margin-bottom: 0; }
.scan-meter-verdict {
  margin-left: auto; font-family: var(--font-ui); font-size: 12px; font-weight: 700;
}
.scan-bar { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.09); overflow: hidden; }
.scan-bar span { display: block; height: 100%; border-radius: 3px; transition: width 0.3s ease, background 0.3s; }
.scan-level-good .scan-meter-verdict { color: var(--success); }
.scan-level-good .scan-bar span { background: linear-gradient(90deg, #0d9488, #34d399); }
.scan-level-fair .scan-meter-verdict { color: var(--aspen-gold); }
.scan-level-fair .scan-bar span { background: linear-gradient(90deg, #d97706, #f59e0b); }
.scan-level-risk .scan-meter-verdict { color: var(--danger); }
.scan-level-risk .scan-bar span { background: linear-gradient(90deg, #dc2626, #f87171); }

.scan-issues { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.scan-issues li {
  font-size: 11.5px; line-height: 1.5; color: var(--text-muted);
  padding-left: 18px; position: relative;
}
.scan-issues li::before {
  content: ''; position: absolute; left: 0; top: 6px;
  width: 8px; height: 8px; border-radius: 50%;
}
.scan-issues li.error::before { background: var(--danger); }
.scan-issues li.warn::before { background: var(--aspen-gold); }
.scan-issues li.info::before { background: var(--sky-blue); }

/* ------------------------------------------------------- download panel -- */

.download-panel {
  background: rgba(7, 13, 18, 0.85); border: 1px solid var(--card-border);
  border-radius: 14px; padding: 16px 18px;
}
.download-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 11px; }
.download-row .action-btn { justify-content: center; padding: 9px; font-size: 13px; }
.size-row { display: flex; align-items: center; gap: 9px; margin-top: 11px; }
.size-row select { padding: 7px 10px; font-size: 12px; }

.studio-actions {
  display: flex; gap: 10px; margin-top: 22px; padding-top: 22px;
  border-top: 1px solid var(--card-border); flex-wrap: wrap; align-items: center;
}
.studio-actions .grow { flex: 1 1 auto; }

.save-gate {
  font-size: 12.5px; color: var(--text-muted); line-height: 1.6;
  background: rgba(245, 158, 11, 0.07); border: 1px solid rgba(245, 158, 11, 0.22);
  border-radius: var(--r-md); padding: 13px 15px;
}
.save-gate a { color: var(--aspen-gold); font-weight: 600; text-decoration: none; }
.save-gate a:hover { text-decoration: underline; }

.field-error { color: var(--danger); font-size: 12px; margin-top: 6px; display: none; }
.field-error.show { display: block; }

/* ==========================================================================
   Mobile studio
   --------------------------------------------------------------------------
   On a phone the two-column grid collapses, which put the live preview about
   1,600px below the shape picker — you were choosing a design blind and
   scrolling two screens to see the result.

   The fix is `display: contents` on the preview column, which dissolves it as
   a box and promotes its three children to grid items in their own right.
   They can then be ordered independently: the preview pod jumps above the
   controls and sticks to the top of the viewport, while the readability meter
   and download panel stay below, where they are only wanted at the end.

   No JavaScript and no second copy of the preview — the same element is simply
   somewhere more useful.
   ========================================================================== */

@media (max-width: 940px) {
  /*
   * Flex, not grid. `position: sticky` on a grid item is confined to its own
   * grid area — which for the pod is exactly the pod's own height, so it has
   * nowhere to travel and never sticks. In a flex column the containing block
   * is the whole studio, which is tall, so it behaves as intended.
   */
  .studio { display: flex; flex-direction: column; }
  .preview-col { display: contents; }
  /*
   * min-width: 0 is essential. Flex items default to `min-width: auto`, which
   * refuses to shrink below their content — the grid layout got this for free
   * from `minmax(0, 1fr)`. Without it the controls column stays as wide as its
   * widest child and the whole page scrolls sideways.
   */
  .studio > * { min-width: 0; max-width: 100%; }
  .studio-main { order: 0; }

  .preview-pod {
    order: -1;
    position: sticky;
    top: 0;
    z-index: 60;
    /* Bleed sideways to the card edges so the sticky strip reads as a bar.
       No negative top margin — sticky constrains the MARGIN box, so a negative
       one lifts the visible bar above the top of the screen. */
    margin: 0 -18px 16px;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    /* Fully opaque: at 97% the fields underneath ghosted through the bar. */
    background: #0a1219;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
    /* Compact horizontal layout: code on the left, status on the right. */
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 14px 18px 16px;
    text-align: left;
  }
  .preview-pod-title { display: none; }
  .preview-pod-box {
    width: 148px;
    max-width: 148px;
    flex: none;
    padding: 6px;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  }
  .preview-pod-status {
    margin-top: 0;
    text-align: left;
    font-size: 11px;
    line-height: 1.5;
  }

  .scan-meter { order: 1; }
  .download-panel { order: 2; }
  .studio-shell, .hero-studio { padding-top: 14px; }
}

/*
 * Content types stay wrapped onto rows rather than becoming a scrolling strip.
 * A strip is tidier, but nothing on screen tells you there is more off to the
 * right — every option has to be visible to be discovered. They are compacted
 * instead so the wrap costs less height.
 */
@media (max-width: 700px) {
  .type-tabs {
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 18px;
    padding-bottom: 16px;
  }
  .type-tab { padding: 8px 11px; font-size: 12.5px; gap: 5px; }
  .type-tab .tab-flag { font-size: 8px; padding: 1px 4px; }

  .preset-row { gap: 6px; }
  .preset-btn { padding: 6px 10px; font-size: 11.5px; }

  /*
   * Smaller shape swatches. They were sized for comfortable tapping, but that
   * pushed everything else down the page; this is still well above the ~44px
   * touch-target floor while fitting more per row.
   */
  .swatch-grid { grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); gap: 6px; }
  .frame-grid { grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); }
  .section-toggle { padding: 15px 16px; }
  .section-body { padding: 4px 16px 20px; }
  .download-row .action-btn { padding: 12px; }
}

/* iOS zooms the page in when a focused input's text is under 16px. */
@media (max-width: 700px) {
  input[type="text"], input[type="url"], input[type="email"],
  input[type="password"], input[type="tel"], input[type="number"],
  select, textarea { font-size: 16px; }
}


/* ------------------------------------------------- account gate (dynamic) - */

/*
 * Shown in place of the Dynamic form when nobody is signed in. It has to read
 * as an explanation rather than a wall, because this is the feature the site
 * is actually selling.
 */
.type-gate {
  text-align: center;
  padding: 34px 26px 30px;
  border: 1px dashed rgba(148, 163, 184, 0.28);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(13, 148, 136, 0.06), rgba(2, 132, 199, 0.04));
}
.type-gate-icon {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 14px;
  border-radius: 12px;
  color: #5eead4;
  background: rgba(13, 148, 136, 0.16);
}
.type-gate h3 {
  margin: 0 0 10px;
  font-size: 17px;
  color: var(--text);
}
.type-gate p {
  margin: 0 auto 18px;
  max-width: 46ch;
  font-size: 13px;
  line-height: 1.65;
  color: var(--muted);
}
.type-gate-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: center;
}
.type-gate-actions .btn-create {
  display: inline-flex;
  align-items: center;
  height: auto;
  padding: 11px 22px;
  text-decoration: none;
}
.gate-secondary {
  font-size: 13px;
  color: var(--muted);
}
.type-gate-foot {
  margin: 18px auto 0;
  font-size: 12px;
  color: var(--muted);
  opacity: 0.85;
}