.runner-editor { max-width: 1440px; margin: 0 auto; padding: 2rem clamp(1rem, 3vw, 3rem) 4rem; color: var(--ink); }
.runner-editor [hidden] { display: none !important; }
.runner-editor__header { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; }
.runner-editor__header h1 { margin: .4rem 0; font-size: clamp(1.6rem, 3vw, 2.3rem); overflow-wrap: anywhere; }
.runner-editor__header p { max-width: 48rem; }
.runner-editor__actions { display: flex; gap: .65rem; flex-wrap: wrap; padding-top: 1.5rem; }
.runner-editor__tabs { display: flex; gap: .5rem; margin-top: 1.8rem; border-bottom: 1px solid var(--line); padding-bottom: .75rem; }
.runner-editor__tabs button { border: 0; background: transparent; color: var(--ink-muted); padding: .75rem 1rem; font: inherit; font-weight: 650; border-radius: .6rem; cursor: pointer; }
.runner-editor__tabs button[aria-current] { background: var(--accent); color: white; }
.runner-editor__workspace { display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); gap: 2rem; margin-top: 1.5rem; align-items: start; }
.runner-editor__outline { position: sticky; top: 1rem; max-height: calc(100dvh - 2rem); overflow-y: auto; padding-right: .5rem; }
.runner-editor__outline-heading { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.runner-editor__outline-heading h2 { font-size: 1.1rem; margin: 0; }
.runner-editor__outline-heading span { color: var(--ink-muted); font-size: .8rem; }
.runner-editor__outline ol { list-style: none; padding: 0; display: grid; gap: .5rem; }
.runner-editor__question-link { width: 100%; display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: .4rem .6rem; padding: .8rem; text-align: left; border: 1px solid var(--line); border-radius: .65rem; background: var(--surface); color: var(--ink); cursor: pointer; font: inherit; font-size: .9rem; }
.runner-editor__question-link:hover { border-color: var(--accent); }
.runner-editor__question-link[aria-current="true"] { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.runner-editor__question-link small { grid-column: 2; color: var(--ink-muted); font-size: .73rem; }
.runner-editor__number { background: var(--surface-raised); border-radius: 50%; height: 1.6rem; display: grid; place-items: center; font-size: .8rem; }
.runner-editor__detail, .runner-editor__settings { background: var(--surface); border: 1px solid var(--line); border-radius: 1rem; padding: clamp(1rem, 2.5vw, 2rem); min-width: 0; }
.runner-editor__settings { max-width: 860px; margin: 1.5rem auto; }
.runner-editor__question-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.runner-editor__question-actions .button { font-size: .8rem; padding: .45rem .7rem; }
.runner-editor__field { display: flex; flex-direction: column; gap: .45rem; margin: 1.2rem 0; min-width: 0; }
.runner-editor__field label { font-weight: 650; font-size: .9rem; }
.runner-editor__field input:not([type="checkbox"]), .runner-editor__field select, .runner-editor__field textarea { width: 100%; min-width: 0; box-sizing: border-box; padding: .75rem; border: 1px solid var(--line); border-radius: .5rem; background: var(--surface); color: var(--ink); font: inherit; }
.runner-editor__field textarea { resize: vertical; line-height: 1.6; }
.runner-editor__field p { margin: 0; font-size: .82rem; line-height: 1.5; }
.runner-editor__check { display: grid; grid-template-columns: 1.2rem minmax(0, 1fr); align-items: center; column-gap: .6rem; }
.runner-editor__check input { width: 1.1rem; height: 1.1rem; accent-color: var(--accent); }
.runner-editor__check p { grid-column: 2; }
.runner-editor__section { border-top: 1px solid var(--line); margin-top: 2rem; padding-top: 1.4rem; }
.runner-editor__section h2 { font-size: 1.05rem; margin-top: 0; }
.runner-editor__option { display: grid; grid-template-columns: minmax(0, 1fr) 7rem auto auto; gap: .6rem; align-items: center; }
.runner-editor__option .button { margin-top: .8rem; padding: .5rem .7rem; }
.runner-editor__option .runner-editor__field { margin: .4rem 0; }
.runner-editor__placeholders { display: flex; flex-wrap: wrap; align-items: end; gap: .6rem; margin-bottom: 1rem; }
.runner-editor__placeholders .runner-editor__field { margin: 0; flex: 1 1 16rem; }
.runner-editor__placeholders button { margin: 0; }
.runner-editor__errors, .runner-editor__recovery { margin-top: 1rem; border-left: 3px solid var(--accent); padding: 1rem 1.25rem; background: var(--surface); border-radius: .3rem; }
.runner-editor__errors li { margin: .35rem 0; }
.runner-editor__errors button { text-align: left; }
.runner-editor__preview-toolbar { display: flex; gap: 1.5rem; align-items: center; justify-content: space-between; margin-top: 1.4rem; }
.runner-editor__preview-toolbar p { color: var(--ink-muted); max-width: 48rem; font-size: .9rem; }
.runner-editor__preview-toolbar h2 { font-size: 1.1rem; }
.runner-editor__frame { display: block; width: 390px; max-width: 100%; height: 760px; margin: 1.5rem auto; border: 1px solid var(--line); border-radius: 1.5rem; background: var(--surface); box-shadow: 0 12px 36px #00000012; }
.runner-editor__frame--wide { width: 100%; border-radius: .75rem; }
.runner-preview-body { margin: 0; padding: 1rem; background: var(--surface); }
.runner-preview-body .interview-runner { padding-bottom: 1rem; }
.runner-formats__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 1.5rem; margin-bottom: 2rem; }
.runner-formats__card { padding: 1.5rem; }
.runner-formats__card h2 { margin: .5rem 0 1rem; }
.runner-formats__card h2 a { color: var(--ink); text-decoration: none; }
.runner-editor button:focus-visible, .runner-editor input:focus-visible, .runner-editor textarea:focus-visible, .runner-editor select:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.runner-editor button:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 850px) {
  .runner-editor__header, .runner-editor__preview-toolbar { flex-direction: column; gap: .5rem; }
  .runner-editor__actions { padding-top: 0; }
  .runner-editor__workspace { grid-template-columns: 1fr; }
  .runner-editor__outline { position: static; max-height: none; }
  .runner-editor__outline ol { display: flex; overflow-x: auto; padding-bottom: .5rem; }
  .runner-editor__outline li { flex: 0 0 220px; }
  .runner-editor__tabs { overflow-x: auto; }
  .runner-editor__tabs button { white-space: nowrap; font-size: .9rem; }
  .runner-editor__option { grid-template-columns: minmax(0, 1fr) 4rem auto auto; }
}