/* 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: depth; }
.overlay-slide-card > label:nth-of-type(8) { 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(100px, .8fr) minmax(110px, 1fr) 50px minmax(90px, .7fr) 70px 55px 60px 60px;
  grid-template-areas:
    "order enabled identity label label label label actions actions actions"
    "icon icon icon size font font style 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-global-settings .wide { grid-column: 1 / -1; }
.overlay-global-settings input[type="range"] { width: 100%; height: 20px; padding: 0; }

@media (max-width: 760px) {
  .overlay-slide-card {
    grid-template-columns: 34px 40px minmax(150px, 1fr) minmax(170px, 1fr) 68px minmax(130px, 1fr) 88px 68px 82px;
    grid-template-areas:
      "order enabled identity identity actions actions actions actions actions"
      "label label label icon icon icon icon icon icon"
      "size font font font style style depth duration duration";
  }
}

@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"
      "depth depth depth"
      "duration duration duration";
  }
  .overlay-slide-actions { justify-self: stretch; }
}