:root {
  --tile-w: 170px;
  --venue-col: 280px;
  --editor-poster-w: 200px;
  --venue-list-max: 320px;
  --city-col: 220px;
  --ok: #7fe0a8;
  --switch-w: 42px; --switch-h: 24px; --switch-knob: 18px; --switch-travel: 18px;
}

.studio { padding: var(--sp-24) var(--gutter) var(--sp-64); }
.studio-name { font: var(--fs-22)/1 var(--display); letter-spacing: .04em; color: var(--gold); }
.saved { color: var(--ok); font-size: var(--fs-14); font-weight: 700; }

.tabs, .toolbar, .chips, .add-row { display: flex; gap: var(--sp-8); flex-wrap: wrap; align-items: end; }
.tabs { margin-bottom: var(--sp-24); }
.toolbar { gap: var(--sp-16); align-items: center; }
.grow { flex: 1 1 var(--city-col); }
/* Filters and summary are filled by script: reserve their height to avoid layout shift. */
.summary { color: var(--muted); margin: var(--sp-14) 0; min-height: 3em; }
.chips { min-height: var(--control-sm); flex: 1 1 100%; }
.grid { min-height: 100vh; }

.grid { display: grid; gap: var(--sp-16); grid-template-columns: repeat(auto-fill, minmax(var(--tile-w), 1fr)); }
.tile {
  display: grid; gap: var(--sp-8); align-content: start;
  padding: var(--sp-8); text-align: left;
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface);
  transition: border-color .15s, transform .15s;
}
.tile:hover { border-color: var(--gold); transform: translateY(calc(var(--sp-2) * -1)); }
.tile strong { font-size: var(--fs-15); line-height: 1.2; }
.tile small { color: var(--muted); }
.tile .state { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.tile[data-status="draft"] .poster { opacity: .45; filter: grayscale(1); }
.badge.draft { background: transparent; color: var(--muted); border: 1px dashed var(--muted); }
.badge.live { background: transparent; color: var(--ok); border: 1px solid var(--ok); }

.row-list { list-style: none; padding: 0; margin: 0 0 var(--sp-24); display: grid; gap: var(--sp-8); }
.row-item {
  display: flex; gap: var(--sp-10); align-items: center; flex-wrap: wrap;
  padding: var(--sp-10) var(--sp-14);
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
}
.row-item[data-on="false"] { opacity: .6; }
.row-item .order { font: var(--fs-26)/1 var(--display); color: var(--gold); min-width: var(--sp-28); }
.row-item .kind { color: var(--muted); font-size: var(--fs-13); }
.add-row { padding: var(--sp-16); border: 1px dashed var(--line); border-radius: var(--radius); }

.venue-grid { display: grid; gap: var(--sp-16); grid-template-columns: repeat(auto-fill, minmax(var(--venue-col), 1fr)); }
.venue-card { padding: var(--sp-16); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.venue-card h3 { font: var(--fs-22)/1 var(--display); letter-spacing: .03em; color: var(--gold); margin-bottom: var(--sp-8); }
.venue-card ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-6); }
.venue-card li { display: flex; justify-content: space-between; gap: var(--sp-12); align-items: center; }
.venue-card small { color: var(--muted); display: block; }

.editor { display: grid; grid-template-columns: var(--editor-poster-w) minmax(0, 1fr); gap: var(--sp-24); }
.editor .fields { display: grid; gap: var(--sp-16); }
.checks { display: flex; gap: var(--sp-16); flex-wrap: wrap; }
.check { display: inline-flex; gap: var(--sp-8); align-items: center; min-height: var(--control); }
/* Options read as on/off switches, not form checkmarks. */
.check input {
  appearance: none; flex: none; position: relative; margin: 0; cursor: pointer;
  width: var(--switch-w); height: var(--switch-h); border-radius: var(--pill);
  background: var(--surface-2); border: 1px solid var(--muted);
  transition: background .15s, border-color .15s;
}
.check input::before {
  content: ""; position: absolute; top: var(--sp-2); left: var(--sp-2);
  width: var(--switch-knob); height: var(--switch-knob); border-radius: 50%;
  background: var(--muted); transition: translate .15s, background .15s;
}
.check input:checked { background: var(--gold); border-color: var(--gold); }
.check input:checked::before { translate: var(--switch-travel) 0; background: var(--on-gold); }
fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-12) var(--sp-14); margin: 0; min-width: 0; }
legend { font-weight: 700; font-size: var(--fs-14); padding: 0 var(--sp-6); }
.venue-pick { max-height: var(--venue-list-max); overflow-y: auto; display: grid; gap: var(--sp-4); }
.venue-pick details { border-top: 1px solid var(--line); padding: var(--sp-4) 0; }
.venue-pick summary { cursor: pointer; min-height: var(--control); display: flex; align-items: center; gap: var(--sp-8); font-weight: 700; }
.venue-pick summary span { color: var(--muted); font-weight: 400; font-size: var(--fs-13); }
.venue-pick .check { display: flex; padding-left: var(--sp-16); }
.dialog-foot {
  display: flex; justify-content: flex-end; gap: var(--sp-12);
  padding: var(--sp-14) var(--sp-20); border-top: 1px solid var(--line);
  position: sticky; bottom: 0; background: var(--surface);
}

@media (max-width: 720px) { /* ds-allow-hardcode: media queries cannot read custom properties */
  .editor { grid-template-columns: 1fr; }
  .editor > .poster { max-width: var(--tile-w); }
}