/* ── Form controls ──────────────────────────────────────────── */
.form-group {
  margin-bottom: 1rem;
}
.form-group--inline {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.form-group--inline input[type="checkbox"] {
  margin-top: 0.2rem;
  flex-shrink: 0;
}
.form-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 0.35rem;
}
.form-label--inline {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.form-input {
  width: 100%;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text);
  font-size: 0.85rem;
  font-family: inherit;
}
.form-input { transition: border-color 0.12s ease; }
.form-input:focus {
  outline: 2px solid var(--focus);
  outline-offset: -1px;
  border-color: var(--accent);
}
.form-textarea {
  resize: vertical;
  min-height: 6rem;
  line-height: 1.5;
}
.form-textarea--code {
  font-family: var(--font-mono);
  font-size: 0.82rem;
}
.form-hint {
  font-size: 0.78rem;
  color: var(--text-faint);
  font-weight: 400;
}
.form-hint--standalone {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.78rem;
  color: var(--text-faint);
}
.form-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

/* ── Example toggle button ──────────────────────────────────── */
.example-toggle-btn {
  cursor: pointer;
  border: none;
  font-family: inherit;
}
.example-toggle-btn:hover { box-shadow: inset 0 0 0 1px currentColor; }
.example-toggle-btn:disabled { opacity: 0.5; cursor: wait; }

/* ── Tabs ───────────────────────────────────────────────────── */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1rem;
}
.tabs .tab {
  appearance: none;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 0.5rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.12s ease, border-color 0.12s ease;
}
.tabs .tab:hover {
  color: var(--text);
}
.tabs .tab[aria-selected="true"] {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.tabs .tab,
.tabs .tab:hover { text-decoration: none; }
/* Panels are all in the document, so a browser without JavaScript stacks them
   under their own headings instead of losing three quarters of the page. */
.tab-panel__heading { margin-top: 1.5rem; }
.js-tabs .tab-panel__heading { display: none; }
.js-tabs .tab-panel:not(.tab-panel--active) { display: none; }
.tab-panel:focus { outline: none; }

/* ── Panel furniture ────────────────────────────────────────── */
.panel-hint {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin: 0 0 1rem;
}
.panel-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.panel-actions a.btn { text-decoration: none; }

/* ── Form summary: identity and spend as one block ──────────── */
.form-summary {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.form-summary__identity {
  flex: 1 1 20rem;
  margin: 0;
}
.form-summary__metrics {
  flex: 0 1 22rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 0.75rem;
}
/* Folded into the summary card, the tiles are a column of it, not a band of
   their own floating above the page. */
.form-summary__metrics .stat-tile {
  background: var(--bg-hl);
  box-shadow: none;
  min-height: 0;
}

/* ── Chunked upload progress ────────────────────────────────── */
.chunk-progress {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
}
.chunk-progress__track {
  flex: 1;
  height: 0.5rem;
  background: var(--bg-hl);
  border-radius: 999px;
  overflow: hidden;
}
.chunk-progress__bar {
  width: 0;
  height: 100%;
  background: var(--accent);
  transition: width 0.15s ease;
}
.chunk-progress__text {
  font-size: 0.8rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.input-row {
  border-left: 2px solid var(--base2);
  padding-left: 0.75rem;
  margin-bottom: 1rem;
}
.input-row__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}
.input-row__head .form-label {
  margin-bottom: 0;
}
.input-row__label {
  margin-bottom: 0.4rem;
}

/* ── Toggle tree ────────────────────────────────────────────── */
.toggle-tree__children {
  border: none;
  border-left: 2px solid var(--border);
  margin: 0 0 0.75rem 0.45rem;
  padding: 0.25rem 0 0 1.25rem;
  min-width: 0;
}
.toggle-tree__children:disabled { opacity: 0.45; }
.toggle-tree__children .data-table { margin-top: 0.25rem; }

/* ── Model widget: one model of a form's pool ─────────────── */
.model-widget {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.9rem 1rem 0.2rem;
  margin-bottom: 0.75rem;
}
.model-widget__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.6rem;
}
.model-widget__actions { display: flex; gap: 0.4rem; }
.model-widget__name { display: flex; gap: 0.5rem; align-items: flex-start; }
.model-widget__name > .form-input { flex: 1; }
.model-widget__settings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0 1rem;
}

/* The mock builder opens over the page rather than pushing the form down. */
.mock-builder { position: relative; flex: none; margin: 0; }
.mock-builder > summary {
  list-style: none;
  white-space: nowrap;
  padding: 0.45rem 0.7rem;
}
.mock-builder > summary::before,
.mock-builder[open] > summary::before { content: none; }
.mock-builder__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 0.3rem);
  z-index: 20;
  width: min(34rem, 80vw);
  padding: 0.8rem 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.mock-builder__fields {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}
.mock-builder__field { display: flex; flex-direction: column; gap: 0.2rem; }

/* ── Tutorial and lessons tabs ─────────────────────────────── */
.guidance-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.guidance-toolbar__actions { margin-left: auto; display: flex; gap: 0.5rem; }
.btn--compact { font-size: 0.8rem; padding: 0.25rem 0.7rem; }
.guidance-editor > summary { list-style: none; cursor: pointer; }
.guidance-editor > summary::-webkit-details-marker { display: none; }
.guidance-editor[open] { flex-basis: 100%; order: 10; }
.guidance-editor[open] > summary { margin-bottom: 0.5rem; }

.guidance-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 0.85rem;
  color: var(--text-muted);
  cursor: pointer;
}
.guidance-switch__track {
  position: relative;
  width: 2.2rem;
  height: 1.2rem;
  border-radius: 999px;
  background: var(--bg-hl);
  box-shadow: inset 0 0 0 1px var(--text-faint);
  transition: background 0.15s;
}
.guidance-switch__thumb {
  position: absolute;
  top: 0.15rem;
  left: 0.15rem;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  background: var(--text-faint);
  transition: transform 0.15s, background 0.15s;
}
.guidance-switch--on { color: var(--green); }
.guidance-switch--on .guidance-switch__track { background: var(--green); box-shadow: none; }
.guidance-switch--on .guidance-switch__thumb { transform: translateX(1rem); background: #fff; }

.guidance-markdown { line-height: 1.55; max-width: 60rem; }
.guidance-markdown > :first-child { margin-top: 0; }
.guidance-markdown h1,
.guidance-markdown h2,
.guidance-markdown h3 { font-size: 1rem; margin: 1.25rem 0 0.5rem; }
.guidance-markdown ul,
.guidance-markdown ol { padding-left: 1.25rem; margin: 0.25rem 0 0.75rem; }
.guidance-markdown li { margin: 0.15rem 0; }
.guidance-markdown code { font-size: 0.85em; }
.guidance-markdown--off { opacity: 0.55; }

.guidance-write { display: flex; gap: 0.35rem; align-items: center; margin: 0; }
.form-input--compact { font-size: 0.8rem; padding: 0.2rem 0.4rem; width: auto; max-width: 14rem; }

/* ── Forms list in tiers ───────────────────────────────────── */
.form-tier__heading {
  font-size: 0.95rem;
  margin: 1.5rem 0 0.5rem;
  padding-left: 0.5rem;
  border-left: 3px solid var(--green);
}
.form-tier__heading span { color: var(--text-faint); font-weight: normal; }
.form-tier__heading--improvable { border-left-color: var(--orange); }
.form-tier__heading--neglected { border-left-color: var(--red); }
.form-tier__gaps { font-size: 0.75rem; color: var(--text-faint); margin-top: 0.15rem; }
.form-tier--neglected { opacity: 0.7; }