/* Progression pathway pages: Views::ProgressionPathways::Show, Form, and
   the step list they share (InheritedSteps, Walk, StepsEditor). Held to
   the ui/ contract: one class per selector, tokens only. */

.pathway-steps {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}

/* The steps a pathway reads from the one it starts from: set back on a
   sunken ground so they read as someone else's, never as a stripe. */
.pathway-inherited {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
}

.pathway-inherited-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

.pathway-inherited-link {
  color: var(--accent-ink);
  font-weight: 600;
}

/* A muted line under a pathway block: the inherited steps, the suggestion,
   the pathways that start from this one. */
.pathway-note {
  font-size: var(--text-xs);
  color: var(--ink-muted);
}

.pathway-frame {
  display: contents;
}

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

.pathway-add-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-2);
}

.pathway-add-pick {
  flex: 1 1 16rem;
  min-width: 0;
}

/* The element picker (hotwire_combobox) draws its own box: it takes the
   kit's line, radius and focus colour so it sits with the fields. */
.pathway-combobox {
  --hw-border-color: var(--line);
  --hw-border-radius: var(--radius-md);
  --hw-focus-color: var(--focus);
  --hw-font-size: var(--text-md);
  --hw-component-bg-color: var(--surface);
}

.pathway-add-message {
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

.pathway-add-message[data-tone="danger"] {
  color: var(--danger-ink);
}

/* The form's own step list: room above it for the first row's insert
   point, which sits half above the list. */
.pathway-step-list {
  padding-top: var(--space-2);
}

/* An insert point: the plus on the line between two steps. It is out of
   the row's flow with no offsets, so it stays where the row begins and the
   margins lift it onto the row's top edge, between the two numbers. The
   button is the dense tap size; the ring it draws is smaller. */
.pathway-insert-point {
  position: absolute;
  display: grid;
  place-items: center;
  width: var(--tap-dense);
  height: var(--tap-dense);
  margin-top: calc(-1 * var(--space-1) - var(--tap-dense) / 2);
  margin-left: var(--space-3);
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  color: var(--ink-muted);
  cursor: pointer;
}

.pathway-insert-point:hover {
  color: var(--accent);
}

.pathway-insert-point:focus-visible {
  color: var(--accent);
  outline: 2px solid var(--focus);
  outline-offset: -4px;
}

.pathway-insert-icon {
  width: 1.125rem;
  height: 1.125rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
}

.pathway-insert-ring {
  fill: var(--surface);
}

/* The insert popover: placed under its insert point by
   pathway_steps_controller.js, and open at the sides so the picker's list
   of matches hangs below it instead of scrolling inside it. */
.pathway-insert {
  width: min(32rem, calc(100vw - 2 * var(--space-2)));
  margin: 0;
  padding: var(--space-3);
  overflow: visible;
}

/* The index's short cells (target, name, type chips) stay on one line so a
   progression takes one row; only the step chain is allowed to wrap. */
.pathway-cell-nowrap {
  white-space: nowrap;
}