/* ─── Design tokens ─── */
:root {
  --c-primary: #0366d6;
  --c-primary-dark: #0255b3;
  --c-green: #2ea44f;
  --c-green-dark: #22863a;
  --c-red: #d73a49;
  --c-orange: #e36209;
  --c-yellow: #dbab09;
  --c-bg: #f6f8fa;
  --c-card: #ffffff;
  --c-border: #d1d5da;
  --c-header: #24292e;
  --c-text: #24292e;
  --c-muted: #586069;
  --c-light-bg: #f1f3f5;
  --c-step-done: #2ea44f;
  --c-step-active: #0366d6;
  --c-step-todo: #d1d5da;
  --radius: 6px;
  --shadow: 0 1px 3px rgba(0,0,0,.08);
  --shadow-lg: 0 4px 12px rgba(0,0,0,.12);
}
*, *::before, *::after { box-sizing: border-box }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  line-height: 1.55; color: var(--c-text); background: var(--c-bg);
  margin: 0; display: flex; flex-direction: column; height: 100vh;
}
header {
  background: var(--c-header); color: #fff; padding: .7rem 2rem;
  display: flex; justify-content: space-between; align-items: center;
  box-shadow: 0 2px 4px rgba(0,0,0,.15); z-index: 10;
}
header h1 { margin: 0; font-size: 1.25rem; font-weight: 600; }
header .links { display: flex; gap: 1rem; align-items: center; }
header a { color: #c9d1d9; text-decoration: none; font-size: .85rem; transition: color .15s; }
header a:hover { color: #fff; }

/* ─── Main layout ─── */
.main { display: flex; flex: 1; overflow: hidden; }

/* ─── Left: stepper + form ─── */
.left-panel {
  flex: 1; display: flex; flex-direction: column; overflow: hidden;
  background: var(--c-card); border-right: 1px solid var(--c-border);
  min-width: 0;
}

/* ─── Stepper bar ─── */
.stepper {
  display: flex; gap: 0; padding: .6rem 1.2rem;
  background: var(--c-light-bg); border-bottom: 1px solid var(--c-border);
  overflow-x: auto; flex-shrink: 0;
}
.step-pill {
  display: flex; align-items: center; gap: .35rem;
  padding: .3rem .65rem; border-radius: 999px;
  font-size: .78rem; font-weight: 600; white-space: nowrap;
  cursor: pointer; transition: all .15s; user-select: none;
  border: 2px solid transparent; position: relative;
}
.step-pill::after {
  content: ''; position: absolute; right: -8px; top: 50%;
  transform: translateY(-50%);
  width: 0; height: 0;
  border-left: 5px solid var(--c-step-todo);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}
.step-pill:last-child::after { display: none; }
.step-pill .num {
  width: 1.4rem; height: 1.4rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; color: #fff; flex-shrink: 0;
}
.step-pill.todo .num { background: var(--c-step-todo); }
.step-pill.todo { color: var(--c-muted); }
.step-pill.active .num { background: var(--c-step-active); }
.step-pill.active { color: var(--c-step-active); border-color: var(--c-step-active); background: #e8f0fe; }
.step-pill.active::after { border-left-color: var(--c-step-active); }
.step-pill.done .num { background: var(--c-step-done); }
.step-pill.done { color: var(--c-step-done); }
.step-pill.done::after { border-left-color: var(--c-step-done); }
.step-pill.done .num::after { content: '\2713'; }
.step-pill:hover { background: #e8eaed; }
.step-pill.active:hover { background: #d4e4fc; }

/* ─── Form area ─── */
.form-scroll { flex: 1; overflow-y: auto; padding: 1.5rem 2rem 2rem; }
.step-section { display: none; animation: fadeIn .25s ease; }
.step-section.visible { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ─── Section intro ─── */
.section-intro {
  background: linear-gradient(135deg, #e8f4fd, #f0f7ff);
  border: 1px solid #b6d4fe; border-radius: var(--radius);
  padding: 1rem 1.2rem; margin-bottom: 1.2rem;
}
.section-intro h2 { margin: 0 0 .3rem; font-size: 1.15rem; color: var(--c-primary); }
.section-intro p { margin: 0; font-size: .88rem; color: var(--c-muted); line-height: 1.5; }
.section-intro .req-note { color: var(--c-red); font-weight: 600; }
.section-intro .opt-note { color: var(--c-green); font-weight: 600; }

/* ─── Subsection headers ─── */
h3.subsec {
  font-size: 1rem; margin: 1.4rem 0 .5rem;
  padding-bottom: .3rem; border-bottom: 1px dashed var(--c-border);
  color: #444;
}

/* ─── Form controls ─── */
.fg { margin-bottom: .75rem; }
label { display: block; font-weight: 600; margin-bottom: .15rem; font-size: .9rem; }
label .key-name { font-family: "SFMono-Regular", Consolas, monospace; background: #f0f3f6; padding: .1rem .35rem; border-radius: 3px; }
input[type="text"], input[type="number"], select, textarea {
  width: 100%; padding: .42rem .6rem; border: 1px solid var(--c-border);
  border-radius: var(--radius); font-size: .9rem; transition: border-color .15s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(3,102,214,.15); }
.help {
  font-size: .82rem; color: var(--c-muted); margin-top: .15rem; line-height: 1.4;
}
.help code {
  background: #f0f3f6; padding: .1rem .3rem; border-radius: 3px;
  font-family: "SFMono-Regular", Consolas, monospace; font-size: .8rem;
}

/* ─── Badges ─── */
.badge {
  display: inline-block; padding: .12rem .45rem; border-radius: 999px;
  font-size: .72rem; font-weight: 700; color: #fff; vertical-align: middle; margin-left: .2rem;
}
.b-req { background: var(--c-red); }
.b-opt { background: var(--c-green); }
.b-g { background: var(--c-primary); }
.b-pv { background: var(--c-orange); }
.b-pi { background: var(--c-yellow); color: #24292e; }

/* ─── Prior row ─── */
.prior-row { display: flex; gap: .4rem; align-items: center; }
.prior-row select { width: 38%; }
.prior-row input { flex: 1; }

/* ─── Scope selector ─── */
.scope-sel { display: flex; gap: .7rem; align-items: center; margin-bottom: .2rem; }
.scope-sel label { margin: 0; font-weight: 400; font-size: .86rem; cursor: pointer; display: flex; align-items: center; gap: .2rem; }
.scope-sel input[type="radio"] { width: auto; margin: 0; }

/* ─── Checkbox row ─── */
.chk { display: flex; align-items: center; gap: .4rem; }
.chk input[type="checkbox"] { width: auto; }
.chk label { margin: 0; font-weight: 400; }

/* ─── Collapsible optional ─── */
.opt-toggle {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .8rem; margin: .8rem 0;
  background: #f0fdf4; border: 1px solid #bbf7d0;
  border-radius: var(--radius); cursor: pointer; user-select: none;
}
.opt-toggle:hover { background: #dcfce7; }
.opt-toggle .arrow { transition: transform .2s; font-size: .8rem; }
.opt-toggle.open .arrow { transform: rotate(90deg); }
.opt-toggle h4 { margin: 0; font-size: .92rem; color: var(--c-green-dark); }
.opt-toggle .skip-hint { font-size: .8rem; color: var(--c-muted); margin-left: auto; }
.opt-content { display: none; padding: .5rem 0 0; }
.opt-content.open { display: block; animation: fadeIn .2s ease; }

/* ─── Dynamic sections (poly/fourier/GP/planet) ─── */
.dyn-block {
  border: 1px solid var(--c-border); border-radius: var(--radius);
  padding: 1rem; margin-bottom: .8rem; background: #fafbfc; position: relative;
}
.dyn-block .rm-btn {
  position: absolute; top: .4rem; right: .5rem;
  background: var(--c-red); color: #fff; border: none;
  border-radius: var(--radius); padding: .18rem .5rem; cursor: pointer; font-size: .76rem;
}
.dyn-block .rm-btn:hover { background: #c22d3a; }
.add-btn {
  background: var(--c-green); color: #fff; border: none;
  border-radius: var(--radius); padding: .38rem .8rem; cursor: pointer;
  font-size: .86rem; font-weight: 600; transition: background .15s;
}
.add-btn:hover { background: var(--c-green-dark); }

/* ─── Navigation bar ─── */
.nav-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: .8rem 2rem; border-top: 1px solid var(--c-border);
  background: var(--c-light-bg); flex-shrink: 0;
}
.nav-btn {
  padding: .5rem 1.2rem; border: 1px solid var(--c-border);
  border-radius: var(--radius); background: #fff; cursor: pointer;
  font-weight: 600; font-size: .88rem; transition: all .15s;
}
.nav-btn:hover { background: #f3f4f6; }
.nav-btn.primary { background: var(--c-primary); color: #fff; border: none; }
.nav-btn.primary:hover { background: var(--c-primary-dark); }
.nav-btn:disabled { opacity: .4; cursor: not-allowed; }
.nav-progress { font-size: .82rem; color: var(--c-muted); }

/* ─── Right: YAML preview ─── */
.right-panel {
  flex: 1; padding: 1.2rem 1.5rem; display: flex; flex-direction: column;
  background: var(--c-bg); min-width: 0;
}
.right-panel h2 { margin: 0 0 .4rem; font-size: 1.05rem; color: var(--c-header); }
#yaml-warn {
  color: var(--c-red); font-weight: 700; display: none;
  margin-bottom: .3rem; font-size: .85rem;
}
#yaml-lint {
  display: none; margin: 0 0 .4rem; padding: .4rem .6rem .4rem 1.6rem;
  background: #fff8e1; border: 1px solid #ffe082; border-radius: var(--radius);
  color: #8a5300; font-size: .82rem; max-height: 22vh; overflow-y: auto;
}
#yaml-lint li { margin: .1rem 0; }
#yaml-kept {
  display: none; margin: 0 0 .4rem; padding: .4rem .6rem;
  background: #eef4fb; border: 1px solid #b6d4f5; border-radius: var(--radius);
  color: #0b3d75; font-size: .82rem; max-height: 22vh; overflow-y: auto;
}
#yaml-kept p { margin: .1rem 0; }
#yaml-kept ul { margin: .2rem 0; padding-left: 1.2rem; }
#yaml-kept .kept-note { color: var(--c-muted); }
#yaml-kept .kept-drop {
  font-size: .72rem; padding: 0 .4rem; border: 1px solid #b6d4f5; border-radius: 4px;
  background: #fff; cursor: pointer;
}
.sp-row { margin: .25rem 0 .35rem; }
.sp-row > .key-name { display: inline-block; margin-bottom: .15rem; }
#yaml-out {
  flex: 1; width: 100%;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
  font-size: .84rem; padding: .8rem; border: 1px solid var(--c-border);
  border-radius: var(--radius); background: #fff; resize: none;
  line-height: 1.5; tab-size: 2;
}
.yaml-actions { margin-top: .6rem; display: flex; gap: .5rem; flex-wrap: wrap; }
.yaml-actions .btn {
  padding: .4rem .8rem; border: 1px solid var(--c-border);
  border-radius: var(--radius); background: #fff; cursor: pointer;
  font-weight: 600; font-size: .84rem; transition: all .15s;
}
.yaml-actions .btn:hover { background: #f3f4f6; }
.yaml-actions .btn-p { background: var(--c-primary); color: #fff; border: none; }
.yaml-actions .btn-p:hover { background: var(--c-primary-dark); }
.yaml-actions .btn-g { background: var(--c-green); color: #fff; border: none; }
.yaml-actions .btn-g:hover { background: var(--c-green-dark); }
.yaml-stats { font-size: .8rem; color: var(--c-muted); margin-top: .3rem; }

/* ─── Responsive ─── */
@media (max-width: 900px) {
  .main { flex-direction: column; }
  .right-panel { max-height: 35vh; }
  .left-panel { border-right: none; border-bottom: 1px solid var(--c-border); }
}