/* Place the overlay builder in the same primary dashboard slot as the other app pages. */
.overlay-builder-page {
  grid-area: dashboard;
  width: 100%;
  min-width: 0;
  align-self: start;
}

/* Keep every editor control inside its card at desktop and tablet widths. */
.overlay-slide-card {
  grid-template-columns: 40px 42px minmax(180px, 1fr) minmax(160px, 1fr) 90px 110px;
  grid-template-areas:
    "order enabled identity identity identity actions"
    "label label label icon icon size"
    "font font style style depth duration";
  align-items: end;
  overflow: hidden;
}
.overlay-slide-order { grid-area: order; }
.overlay-slide-enabled { grid-area: enabled; }
.overlay-slide-identity { grid-area: identity; }
.overlay-slide-card > label:nth-of-type(2) { grid-area: label; }
.overlay-slide-card > label:nth-of-type(3) { grid-area: icon; }
.overlay-slide-card > label:nth-of-type(4) { grid-area: size; }
.overlay-slide-card > label:nth-of-type(5) { grid-area: font; }
.overlay-slide-card > label:nth-of-type(6) { grid-area: style; }
.overlay-slide-card > label:nth-of-type(7) { grid-area: animation; }
.overlay-slide-card > label:nth-of-type(8) { grid-area: depth; }
.overlay-slide-card > label:nth-of-type(9) { grid-area: duration; }
.overlay-slide-actions { grid-area: actions; justify-self: end; }
.overlay-slide-card > * { min-width: 0; }

/* The configured slider is a visual row of tiles, mixing both source types. */
.overlay-slide-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.overlay-slide-card {
  grid-template-columns: 34px 40px minmax(90px, .8fr) minmax(90px, 1fr) 50px minmax(80px, .7fr) 65px 85px 50px 55px 55px;
  grid-template-areas:
    "order enabled identity label label label label label actions actions actions"
    "icon icon icon size font font style animation depth duration duration";
  gap: 8px;
  padding: 11px 12px;
  align-items: end;
}
.overlay-slide-actions {
  justify-self: stretch;
  align-self: end;
}
.overlay-slide-actions button {
  flex: 1;
}
.overlay-slide-actions .apply-all {
  color: #8ff5ff;
  border-color: #176d82;
  background: #072a3b;
}
.overlay-slide-subtext,
.overlay-slide-appearance,
.overlay-slide-text,
.overlay-slide-visibility,
.overlay-add-appearance,
.overlay-add-text,
.overlay-add-visibility {
  grid-column: 1 / -1;
  margin-top: 1px;
  border: 1px solid #1d426d;
  border-radius: 9px;
  background: #06142b;
}
.overlay-slide-subtext summary,
.overlay-slide-appearance summary,
.overlay-slide-text summary,
.overlay-slide-visibility summary,
.overlay-add-appearance summary,
.overlay-add-text summary,
.overlay-add-visibility summary {
  padding: 8px 11px;
  color: #59def6;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  user-select: none;
}
.overlay-slide-subtext[open] summary,
.overlay-slide-appearance[open] summary,
.overlay-slide-text[open] summary,
.overlay-slide-visibility[open] summary,
.overlay-add-appearance[open] summary,
.overlay-add-text[open] summary,
.overlay-add-visibility[open] summary { border-bottom: 1px solid #1d426d; }
.overlay-slide-subtext > div,
.overlay-slide-appearance > div,
.overlay-slide-text > div,
.overlay-slide-visibility > div,
.overlay-add-appearance > div,
.overlay-add-text > div,
.overlay-add-visibility > div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 9px;
  padding: 10px;
}
.overlay-slide-visibility > div label,
.overlay-add-visibility > div label {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  min-height: 36px;
}
.overlay-slide-visibility input[type="checkbox"],
.overlay-add-visibility input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: #21dff5; }
.overlay-global-settings .wide { grid-column: 1 / -1; }
.overlay-global-settings input[type="range"] { width: 100%; height: 20px; padding: 0; }

/* LIVE builder preview mirrors the selected runtime item display. */
.overlay-builder-preview[class*="layout-preview-"] { width: 100%; height: 300px; }
.preview-layout-row,
.preview-layout-sequence,
.preview-layout-marquee { width: 100%; min-width: 0; }
.preview-layout-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }
.preview-layout-row .overlay-preview-slide { flex: 1 1 240px; min-width: min(240px,100%); max-width: 420px; }
.preview-layout-sequence { display: grid; place-items: center; }
.preview-layout-sequence .overlay-preview-slide { width: min(520px,100%); animation: overlay-preview-in .55s ease both; }
.preview-layout-marquee { overflow: hidden; padding: 24px 8px 35px; mask-image: linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.preview-marquee-track,
.preview-marquee-group { display: flex; width: max-content; }
.preview-marquee-group { flex: 0 0 auto; gap: 12px; padding-right: 12px; }
.preview-layout-marquee.horizontal .preview-marquee-track { animation: previewMarqueeHorizontal var(--preview-marquee-duration,18s) linear infinite; }
.preview-layout-marquee.vertical { width: min(520px,100%); height: 240px; margin: auto; padding: 18px 24px 28px; mask-image: linear-gradient(transparent,#000 7%,#000 93%,transparent); }
.preview-layout-marquee.vertical .preview-marquee-track,
.preview-layout-marquee.vertical .preview-marquee-group { flex-direction: column; width: 100%; height: max-content; }
.preview-layout-marquee.vertical .preview-marquee-group { padding: 0 0 12px; }
.preview-layout-marquee.vertical .preview-marquee-track { animation: previewMarqueeVertical var(--preview-marquee-duration,18s) linear infinite; }
.preview-layout-marquee .overlay-preview-slide { width: 320px; min-width: 320px; padding: 13px 17px; gap: 12px; }
.preview-layout-marquee.vertical .overlay-preview-slide { width: 100%; min-width: 0; }
.preview-layout-row .overlay-preview-slide > i,
.preview-layout-row .overlay-preview-slide > img,
.preview-layout-marquee .overlay-preview-slide > i,
.preview-layout-marquee .overlay-preview-slide > img { width: 52px; height: 52px; flex-basis: 52px; font-size: 31px; }
.preview-layout-row .overlay-preview-slide strong,
.preview-layout-marquee .overlay-preview-slide strong { font-size: clamp(18px,var(--overlay-font-size),32px); }
@keyframes previewMarqueeHorizontal { to { transform: translateX(calc(0px - var(--preview-marquee-distance,500px))); } }
@keyframes previewMarqueeVertical { to { transform: translateY(calc(0px - var(--preview-marquee-distance,500px))); } }

@media (max-width: 760px) {
  .overlay-builder-page {
    order: 3;
    align-self: stretch;
  }
  .overlay-slide-card {
    grid-template-columns: 40px 42px minmax(0, 1fr);
    grid-template-areas:
      "order enabled identity"
      "actions actions actions"
      "label label label"
      "icon icon icon"
      "size size size"
      "font font font"
      "style style style"
      "animation animation animation"
      "depth depth depth"
      "duration duration duration";
  }
  .overlay-slide-actions { justify-self: stretch; }
  .overlay-slide-subtext > div,
  .overlay-slide-appearance > div,
  .overlay-slide-text > div,
  .overlay-slide-visibility > div,
  .overlay-add-appearance > div,
  .overlay-add-text > div,
  .overlay-add-visibility > div { grid-template-columns: 1fr; }
  .preview-layout-row { flex-direction: column; }
  .preview-layout-row .overlay-preview-slide { width: 100%; flex-basis: auto; }
  .preview-layout-marquee .overlay-preview-slide { width: 250px; min-width: 250px; }
}