/* Sequences tab — the plan editor needs a calm vertical timeline and a narrow
   review rail. Every rule is scoped to this tab so cards, waits and previews
   cannot alter the shared shell or another tab's controls.

   Two rules below reach for the shell's own ids, the way pipeline.css does for
   its board. They are the only way to speak to grid tracks the shell owns:
   a class on the tab's markup cannot place the tab's own pane children. */

/* The shell places the optional alert in the first column. Without this the
   body auto-places into the RAIL's column the moment that alert has text, and
   the whole plan renders inside a 360px gutter. */
.pane.active[data-view="sequences"] > #sequencesBody {
  grid-column: 1;
  min-width: 0;
}

/* The rail track stays reserved even while the rail is empty. Give the width
   back to the plan until there is a step to review. */
.pane.active[data-view="sequences"]:has(> #sequencesRail:empty) {
  grid-template-columns: minmax(0, 1fr);
}

.sequences-shell {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  min-width: 0;
}

.sequences-shell > .advisory {
  margin: 0;
}

/* ------------------------------------------------------------- sequence bar */

.sequences-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  min-width: 0;
}

.sequences-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  min-width: 0;
}

.sequences-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  min-height: 36px;
  padding: 0 var(--s3);
  color: var(--body);
  background: var(--surface);
  border: 1px solid var(--border-input);
  border-radius: var(--r-pill);
  cursor: pointer;
}

.sequences-pill:hover,
.sequences-pill.active {
  color: var(--primary);
  border-color: var(--primary);
  background: var(--blue-tint);
}

.sequences-pill-draft {
  color: var(--amber);
  background: var(--amber-tint);
  border-style: dashed;
  border-color: var(--amber);
  cursor: default;
}

.sequences-pill:focus-visible,
.sequences-step-card:focus-visible,
.sequences-wait-btn:focus-visible,
.sequences-variable:focus-visible,
.sequences-rail-tab:focus-visible,
.sequences-language-btn:focus-visible {
  outline: 3px solid var(--blue-tint);
  outline-offset: 2px;
}

.sequences-star {
  color: var(--amber);
}

/* ---------------------------------------------------------------- editor */

.sequences-editor {
  min-width: 0;
  padding: var(--s5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
}

.sequences-editor-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s5);
}

.sequences-identity {
  display: grid;
  gap: var(--s3);
  min-width: 0;
  flex: 1 1 auto;
  max-width: 520px;
}

.sequences-field,
.sequences-rail-field,
.sequences-exit {
  display: grid;
  gap: var(--s1);
}

.sequences-label {
  color: var(--heading);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
}

.sequences-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s2);
  flex-wrap: wrap;
}

.sequences-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  color: var(--heading);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  cursor: pointer;
}

.sequences-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.sequences-switch .switch-track {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 22px;
  background: var(--track);
  border-radius: var(--r-pill);
}

.sequences-switch .switch-track::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  background: var(--surface);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-card);
  content: '';
  transition: transform .12s ease;
}

.sequences-switch input:checked + .switch-track {
  background: var(--primary);
}

.sequences-switch input:checked + .switch-track::after {
  transform: translateX(16px);
}

.sequences-switch input:focus-visible + .switch-track {
  outline: 3px solid var(--blue-tint);
  outline-offset: 2px;
}

.sequences-status {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
  min-height: 28px;
  margin-top: var(--s4);
}

.sequences-summary {
  color: var(--muted);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
}

.sequences-unsaved {
  color: var(--amber);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
}

.sequences-unsaved:empty {
  display: none;
}

.sequences-confirm,
.sequences-delete-confirm {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
  margin-bottom: var(--s4);
  padding: var(--s3);
  color: var(--heading);
  background: var(--amber-tint);
  border: 1px solid var(--amber);
  border-radius: var(--r-control);
}

.sequences-delete-confirm {
  margin: 0;
  padding: var(--s1) var(--s2);
}

/* --------------------------------------------------------------- timeline */

/* The spine. ONE grid for the whole plan, not one per step: every card then
   shares the same left and right edge, and the dots line up on a single line
   behind them. Each row declares its own column, so a step with no Remove
   button cannot pull the next step's dot up beside it. */
.sequences-timeline {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: start;
  column-gap: var(--s3);
  row-gap: var(--s3);
  max-width: 780px;
  margin: var(--s4) 0 0;
  padding: 0;
  list-style: none;
}

.sequences-timeline::before {
  position: absolute;
  top: var(--s5);
  bottom: var(--s5);
  left: 7px;
  width: 2px;
  background: var(--border);
  content: '';
}

.sequences-track {
  display: contents;
}

.sequences-node {
  position: relative;
  grid-column: 1;
  width: 16px;
  height: 16px;
  margin-top: var(--s4);
  background: var(--surface);
  border: 2px solid var(--border-input);
  border-radius: var(--r-pill);
}

.sequences-track.selected > .sequences-node {
  background: var(--primary);
  border-color: var(--primary);
}

.sequences-node-gap {
  width: 8px;
  height: 8px;
  margin: var(--s2) 0 0 4px;
  background: var(--border);
  border: 0;
}

.sequences-step-card {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s2);
  width: 100%;
  min-width: 0;
  padding: var(--s4);
  color: var(--body);
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border-input);
  border-radius: var(--r-card);
  cursor: pointer;
  box-shadow: var(--shadow-card);
}

.sequences-step-card:hover {
  border-color: var(--primary);
}

.sequences-track.selected > .sequences-step-card {
  border-color: var(--primary);
  background: var(--selected-fill);
  box-shadow: none;
}

.sequences-step-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  width: 100%;
  color: var(--muted);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
}

.sequences-step-arrow {
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
}

.sequences-subject {
  color: var(--heading);
  font-size: var(--fs-body);
  line-height: 1.4;
}

.sequences-muted {
  color: var(--muted);
  font-size: var(--fs-caption);
}

.sequences-missing {
  color: var(--muted);
  font-style: italic;
  font-weight: var(--fw-regular);
}

.sequences-step-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
}

.sequences-preview {
  display: -webkit-box;
  width: 100%;
  overflow: hidden;
  color: var(--muted);
  font-size: var(--fs-body);
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.sequences-last-note {
  color: var(--purple);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
}

.sequences-remove-step {
  grid-column: 3;
  margin-top: var(--s4);
  white-space: nowrap;
}

.sequences-wait {
  grid-column: 2;
  display: inline-flex;
  justify-self: start;
  align-items: center;
  gap: var(--s2);
  min-height: 32px;
  padding: 0 var(--s3);
  color: var(--muted);
  background: var(--slate-tint);
  border-radius: var(--r-pill);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
}

.sequences-wait-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: var(--primary);
  background: var(--surface);
  border: 1px solid var(--border-input);
  border-radius: var(--r-pill);
  cursor: pointer;
  line-height: 1;
}

.sequences-wait-btn:disabled {
  color: var(--muted);
  cursor: default;
  opacity: .5;
}

.sequences-add-step {
  margin-top: var(--s4);
  margin-left: 36px;
}

.sequences-ceiling {
  margin: var(--s4) 0 0 36px;
  color: var(--muted);
  font-size: var(--fs-caption);
}

/* --------------------------------------------------- template highlighting */

/* A variable and a blank are both "not filled in yet", and both are shown as
   text the eye can find rather than as a colour the eye has to decode. */
.sequences-token {
  padding: 0 var(--s1);
  border-radius: var(--r-control);
  font-size: inherit;
  font-weight: var(--fw-semibold);
}

.sequences-token-variable {
  color: var(--primary);
  background: var(--blue-tint);
}

.sequences-token-blank {
  color: var(--amber);
  background: var(--amber-tint);
}

/* ----------------------------------------------------------------- footer */

.sequences-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s5);
  max-width: 780px;
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--border);
}

.sequences-footer p {
  max-width: 520px;
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-caption);
}

.sequences-exit {
  min-width: 200px;
}

.sequences-savebar {
  display: flex;
  gap: var(--s2);
  margin-top: var(--s5);
}

/* ------------------------------------------------------------------- rail */

.sequences-rail-inner {
  min-width: 0;
}

.sequences-rail-head {
  padding: var(--s4);
  border-bottom: 1px solid var(--border);
}

.sequences-rail-title {
  margin: 0;
  color: var(--heading);
  font-size: var(--fs-section);
}

.sequences-rail-sub {
  margin: var(--s1) 0 var(--s3);
  color: var(--muted);
  font-size: var(--fs-caption);
}

.sequences-rail-tabs,
.sequences-language {
  display: flex;
  gap: var(--s1);
}

.sequences-rail-tab,
.sequences-language-btn {
  padding: var(--s2) var(--s3);
  color: var(--muted);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}

.sequences-rail-tab.active,
.sequences-language-btn.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.sequences-rail-content {
  display: grid;
  gap: var(--s4);
  padding: var(--s4);
}

.sequences-body {
  min-height: 190px;
  resize: vertical;
}

.sequences-variables {
  display: flex;
  align-items: center;
  gap: var(--s1);
  flex-wrap: wrap;
}

.sequences-variable {
  padding: var(--s1) var(--s2);
  color: var(--primary);
  background: var(--blue-tint);
  border: 1px solid var(--border-input);
  border-radius: var(--r-pill);
  cursor: pointer;
  font-size: var(--fs-caption);
}

.sequences-word-count {
  color: var(--heading);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
}

.sequences-word-count span {
  display: block;
  margin-top: var(--s1);
  color: var(--muted);
  font-weight: var(--fw-regular);
}

.sequences-check {
  display: flex;
  align-items: center;
  gap: var(--s2);
  color: var(--body);
  font-size: var(--fs-body);
}

.sequences-preview-view .advisory {
  margin: 0;
}

.sequences-preview-message {
  padding: var(--s4);
  background: var(--canvas);
  border: 1px solid var(--border);
  border-radius: var(--r-control);
}

.sequences-preview-message h3 {
  margin: 0 0 var(--s3);
  color: var(--heading);
  font-size: var(--fs-body);
  line-height: 1.4;
}

.sequences-preview-message p {
  margin: 0;
  color: var(--body);
  font-size: var(--fs-body);
  line-height: 1.5;
}

.sequences-preview-language {
  color: var(--muted);
  font-size: var(--fs-caption);
}

@media (max-width: 1100px) {
  .sequences-editor-head,
  .sequences-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .sequences-actions {
    justify-content: flex-start;
  }

  .sequences-identity {
    max-width: none;
  }
}

@media (max-width: 720px) {
  .sequences-timeline {
    grid-template-columns: 24px minmax(0, 1fr);
  }

  .sequences-remove-step {
    grid-column: 2;
    margin-top: 0;
    justify-self: start;
  }
}