/*!
 * assets/css/connect-agent-timeline.css
 * ------------------------------------------------------------------
 * The four step "Connect your agent" timeline.
 *
 * TODAY IT HAS ONE PRODUCER: the public page at /connect-your-agent/, which
 * ships the tree as static markup. A second producer is planned, a shared
 * module the coach dashboard would render from so the two cannot drift, and
 * this header used to describe that module in the present tense along with an
 * assertion that does not exist yet. It said so while the file it named was
 * not on disk. Written in the future tense until it is real.
 *
 * TOKENS ONLY. Every colour here is a var() from css/styles.css, with no
 * literal and no retired name (--marrow-red, --marrow-red-glow and
 * --marrow-ember-text are RETIRED; the old lamella/connect/connect.css named
 * the first 22 times, which is one of the reasons this is a new file rather
 * than a rename of that one). Written in var() form on purpose: the dashboard
 * is stamped data-mz-theme="dark" and the theme layer remaps the bone tokens
 * underneath, so the same rules flip for free.
 *
 * The step NUMBER lives in the heading, never in the dot. The dot is
 * decorative and aria-hidden, so a screen reader hears "Step 2, Connect your
 * tool" from the heading and never hears a bullet trying to be a number.
 */

/* ---------------------------------------------------------------- the list */

.cat-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

/* The connector line runs from the first dot to the last, behind the dots.
   It is drawn on the list rather than per step so it cannot develop gaps
   between items, and it stops short at both ends so it never pokes out of
   the first or last dot. */
.cat-steps::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: var(--rule-strong);
}

.cat-step {
  position: relative;
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: var(--space-3);
  padding: 0 0 var(--space-5);
}

.cat-step:last-child { padding-bottom: 0; }

/* ---------------------------------------------------------------- the dot */

.cat-dot {
  position: relative;
  z-index: 1;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--rule-strong);
  background: var(--paper-canvas);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* Filled ONLY for a state that was measured. The public page fills nothing,
   because it cannot know who is reading it. */
.cat-step[data-step-state="done"] .cat-dot,
.cat-step[data-step-state="stale"] .cat-dot {
  background: var(--marrow-accent);
  border-color: var(--marrow-accent);
}

.cat-check {
  width: 12px;
  height: 12px;
  display: block;
}

.cat-check path {
  fill: none;
  stroke: var(--paper-card);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Blocked is not a failure state visually. It is a step the coach has not
   reached yet, so it gets a ring rather than a red mark: the page is telling
   them what to do next, not telling them off. */
.cat-step[data-step-state="blocked"] .cat-dot {
  box-shadow: inset 0 0 0 3px rgba(var(--marrow-accent-rgb), 0.4);
}

/* ---------------------------------------------------------------- the body */

.cat-body { min-width: 0; padding-top: 1px; }

.cat-h {
  margin: 0 0 var(--space-2);
  font-family: var(--serif);
  font-weight: var(--weight-serif);
  font-size: var(--type-title);
  line-height: 1.15;
  color: var(--ink-primary);
}

.cat-num {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
  margin-bottom: 6px;
}

.cat-what {
  margin: 0 0 var(--space-3);
  font-family: var(--sans);
  font-size: var(--type-body);
  line-height: 1.55;
  color: var(--ink-secondary);
  max-width: 62ch;
}

.cat-what a { color: var(--ink-primary); text-decoration: underline; }

.cat-note {
  margin: var(--space-2) 0 0;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-muted);
  max-width: 62ch;
}

.cat-status {
  margin: var(--space-2) 0 0;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-muted);
  max-width: 62ch;
}

/* ------------------------------------------------------------ the doorways */

.cat-door {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-control);
  background: var(--paper-card);
  color: var(--ink-primary);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 550;
  text-decoration: none;
  cursor: pointer;
}

.cat-door:hover { border-color: var(--marrow-accent); }
.cat-door:focus-visible { outline: 2px solid var(--marrow-accent); outline-offset: 2px; }

/* ---------------------------------------------------------------- the chips */

.cat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 var(--space-3);
}

.cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-control);
  background: var(--paper-card);
  color: var(--ink-secondary);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}

/* The selected chip is a raised pill in the ink colour, which is the one
   place on this page where ground and ink swap. It reads as pressed rather
   than as merely outlined, which is what makes the row legible at a glance. */
.cat-chip[aria-selected="true"] {
  background: var(--ink-primary);
  border-color: var(--ink-primary);
  color: var(--paper-canvas);
  box-shadow: var(--shadow-soft);
  font-weight: 550;
}

.cat-chip:focus-visible { outline: 2px solid var(--marrow-accent); outline-offset: 2px; }

.cat-chip-mark { display: flex; width: 16px; height: 16px; }
.cat-chip-mark svg { width: 16px; height: 16px; display: block; }
.cat-chip-mark path,
.cat-chip-mark circle,
.cat-chip-mark rect {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --------------------------------------------------------------- the panels */

.cat-panel {
  padding: var(--space-3);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-card);
  background: var(--paper-card);
}

.cat-panel:focus-visible { outline: 2px solid var(--marrow-accent); outline-offset: 2px; }

/* Every panel ships visible. The script narrows to one, so a reader with no
   JavaScript gets all four sets of instructions rather than none. */
.cat-panel + .cat-panel { margin-top: var(--space-2); }
.cat-panel[hidden] { display: none; }

.cat-lead {
  margin: 0 0 var(--space-3);
  font-family: var(--sans);
  font-size: var(--type-body);
  line-height: 1.55;
  color: var(--ink-secondary);
  max-width: 62ch;
}

/* ----------------------------------------------------------- code and copy */

.cat-codeblock {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: 12px 14px;
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-control);
  background: var(--paper-nested);
}

.cat-code {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-primary);
  white-space: pre;
}

.cat-copy {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-control);
  background: var(--paper-card);
  color: var(--ink-secondary);
  font-family: var(--sans);
  font-size: 12px;
  cursor: pointer;
}

.cat-copy:hover { border-color: var(--marrow-accent); color: var(--ink-primary); }
.cat-copy:focus-visible { outline: 2px solid var(--marrow-accent); outline-offset: 2px; }
.cat-copy-icon { width: 13px; height: 13px; display: block; fill: none; stroke: currentColor; stroke-width: 1.6; }

/* A copy control is useless without a clipboard, so it is hidden until a
   script that can actually copy has switched it on. */
.js-only { display: none; }
.cat-has-js .js-only { display: inline-flex; }

.cat-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--space-3);
  padding: 10px 18px;
  border: 1px solid var(--ink-primary);
  border-radius: var(--radius-control);
  background: var(--ink-primary);
  color: var(--paper-canvas);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 550;
  cursor: pointer;
}

.cat-primary:focus-visible { outline: 2px solid var(--marrow-accent); outline-offset: 3px; }

/* ------------------------------------------------------------- the manual */

.cat-manual { margin-top: var(--space-3); }

.cat-manual > summary {
  cursor: pointer;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-muted);
  padding: 4px 0;
}

.cat-manual > summary:focus-visible { outline: 2px solid var(--marrow-accent); outline-offset: 2px; }

.cat-fields {
  margin-top: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-control);
  background: var(--paper-nested);
  display: grid;
  gap: var(--space-3);
}

.cat-field { display: grid; gap: 6px; }

.cat-field-label {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 550;
  color: var(--ink-muted);
}

/* A field inside the nested well needs its own block to sit on, or the code
   ground and the well ground are the same colour and the box disappears. */
.cat-fields .cat-codeblock { background: var(--paper-card); }

/* --------------------------------------------------------------- step four */

.cat-try { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: grid; gap: var(--space-2); }

.cat-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }

.cat-live,
.cat-result {
  margin: var(--space-2) 0 0;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-muted);
  min-height: 1.5em;
}

.cat-live:empty,
.cat-result:empty { margin-top: 0; }

/* ------------------------------------------------------------------ phone */

@media (max-width: 520px) {
  .cat-step { grid-template-columns: 20px 1fr; gap: 12px; }
  .cat-steps::before { left: 9px; }
  .cat-dot { width: 20px; height: 20px; }
  .cat-check { width: 10px; height: 10px; }
  .cat-codeblock { flex-direction: column; }
  .cat-copy { align-self: flex-start; }
  .cat-chips { gap: 6px; }
  .cat-chip { font-size: 13px; padding: 8px 12px; }
}

/* --------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  .cat-dot,
  .cat-chip,
  .cat-panel,
  .cat-copy,
  .cat-primary { transition: none !important; animation: none !important; }
}