/* The workout template form, Views::WorkoutTemplates::Form, and its guide,
   Components::TemplateSyntaxGuide. Held to the ui/ contract: one class per
   selector, tokens only. */

/* A form reads at a measure, not the page's full width: with the split's
   two to one columns this gives the editor about 46rem and the guide
   about 23rem. */
.template-form {
  display: grid;
  gap: var(--space-4);
  max-width: 72rem;
}

.template-guide-intro {
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

.template-guide-section {
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: var(--line-width) solid var(--line);
}

.template-guide-heading {
  font-size: var(--text-md);
  font-weight: 600;
  line-height: var(--leading-tight);
}

.template-guide-note {
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

.template-guide-rows {
  display: grid;
}

.template-guide-syntax {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--accent-ink);
  overflow-wrap: anywhere;
}

/* An example is a button: a click puts it in the template at the cursor
   (template_guide_controller.js). */
.template-guide-insert {
  display: block;
  width: calc(100% + 2 * var(--space-2));
  min-height: var(--tap-dense);
  padding: var(--space-1) var(--space-2);
  margin-inline: calc(-1 * var(--space-2));
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  text-align: start;
  cursor: pointer;
}

.template-guide-insert:hover {
  background: var(--surface-sunken);
}

.template-guide-insert:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

/* The template editor's blanks (template_highlight_decorations.js): a tint
   behind the characters, never a change of weight or spacing, so the text
   keeps its width. A refused value inside one takes the editor's hl-error. */
.hl-placeholder {
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.template-guide-meaning {
  display: grid;
  gap: var(--space-1);
  padding-bottom: var(--space-2);
  font-size: var(--text-sm);
}

/* Code inside the guide's sentences and examples, a step under the text
   around it rather than the browser's larger monospace default. */
.template-guide-code {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.template-guide-values {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  list-style: none;
}

.template-guide-value {
  padding: 0 var(--space-1);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}