/*!
 * assets/css/connect-agent-timeline.css
 * ------------------------------------------------------------------
 * The four step "Connect your agent" timeline.
 *
 * TWO PRODUCERS, ONE SKELETON. The public page at /connect-your-agent/
 * ships the tree as static markup so it reads with no script. The coach
 * dashboard renders the same tree from assets/js/connect-agent-timeline.js
 * in dashboard mode, inside the walkthrough dialog the chip opens.
 * tests/connect-agent-timeline.test.mjs renders the module in public mode
 * and compares its tag, class and data attribute skeleton with the page,
 * element for element, so the two cannot drift; the same file measures the
 * selected chip and the code ink against both grounds.
 *
 * 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: 9px;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: var(--rule-strong);
}

.cat-step {
  position: relative;
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: var(--space-3);
  /* The reference breathes between steps; on a phone the shorter gap keeps
     the four steps within reach. */
  padding: 0 0 var(--space-6);
}

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

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

.cat-dot {
  position: relative;
  z-index: 1;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px 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, and filled GREEN, the meaning
   colour for done. The public page fills nothing, because it cannot know
   who is reading it, and it never loads the dashboard theme, so the fallback
   is the accent. A stale step is waiting on the coach and stays hollow. */
.cat-step[data-step-state="done"] .cat-dot {
  background: var(--mz-status-good, var(--marrow-accent));
  border-color: var(--mz-status-good, var(--marrow-accent));
}

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

.cat-check path {
  fill: none;
  stroke: var(--paper-canvas);
  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 {
  border-color: var(--marrow-accent);
}

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

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

/* Bold sans title under a plain "Step N" eyebrow: the reference geometry
   Edwin asked for by name on 2026-09-15. */
.cat-h {
  margin: 0 0 var(--space-2);
  font-family: var(--sans);
  font-weight: 580;
  font-size: 20px;
  line-height: 1.2;
  color: var(--ink-primary);
}

.cat-num {
  display: block;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-muted);
  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; }

/* Step 1's status line. Green only when the plan is active AND the
   agreement is current, which setPlan writes as data-tone="good"; risk when
   an accept did not record. Any other state is the plain body colour. */
.cat-status-line[data-tone="good"] { color: var(--mz-status-good, var(--marrow-accent)); font-weight: 550; }
.cat-status-line[data-tone="risk"] { color: var(--mz-status-risk); }

/* The inline accept in Step 1: the tick sits beside the sentence the
   engine hands in, and the accept button below stays disabled until it is
   ticked. */
.cat-tick {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: var(--space-2) 0;
  font-family: var(--sans);
  font-size: var(--type-body);
  line-height: 1.55;
  color: var(--ink-secondary);
  max-width: 62ch;
  cursor: pointer;
}
.cat-tick input { margin: 3px 0 0; flex: none; width: 18px; height: 18px; accent-color: var(--marrow-accent); }
.cat-agree { margin-top: var(--space-2); }
.cat-agree .cat-num { margin: 0 0 var(--space-2); }

.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: 999px;
  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: 10px 14px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-primary);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}

/* The selected chip is a filled pill on a raised ground: the overlay
   surface on dark, the card on light, both from existing tokens. The
   unselected chips are bare text, so the row reads as one chosen tool. */
.cat-chip[aria-selected="true"] {
  background: var(--mz-bg-overlay, var(--paper-card));
  border-color: var(--rule-strong);
  color: var(--ink-primary);
  box-shadow: none;
  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: 12px 22px;
  border: 1px solid var(--ink-primary);
  border-radius: var(--radius-card); /* the reference step button is a rounded rectangle, not a pill; the hero CTA stays the pill */
  background: var(--ink-primary);
  color: var(--paper-canvas);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 550;
  cursor: pointer;
}

.cat-primary[disabled] { opacity: 0.45; cursor: not-allowed; }

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

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

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

/* The native marker IS the triangle; it is kept, sized and coloured, never
   replaced with a glyph. */
.cat-manual > summary {
  cursor: pointer;
  list-style: disclosure-closed;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink-muted);
  padding: 4px 0;
}
.cat-manual[open] > summary { list-style: disclosure-open; }
.cat-manual > summary::marker { color: var(--ink-muted); }

.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);
}

/* min-width: 0 on the field AND the block: a grid item defaults to
   min-width auto, so a long address in a <pre> widened its column past the
   panel edge at 390px (measured 2026-09-15 in the dashboard dialog). The
   pre already scrolls; it just needs a box that is allowed to be narrow. */
.cat-field { display: grid; gap: 6px; min-width: 0; }
.cat-fields { min-width: 0; }
.cat-codeblock { min-width: 0; max-width: 100%; }

.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); }
/* A grid item defaults to min-width: auto, so each row could not be drawn
   narrower than the sentence in its pre, and at 320 the whole document
   followed it out to 355. Measured 2026-09-15. min-width: 0 lets the row take
   the track and the pre scrolls inside its own box. */
.cat-try > li { min-width: 0; }

.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; }

/* --------------------------------------------------------- the dashboard */

/* Inside the walkthrough dialog the timeline is a dialog body, not a page
   section, so the marketing section rhythm css/styles.css gives every
   <section> (--space-8 above and below) is switched off. The dialog band
   above and the panel padding carry the spacing instead. Measured 2026-09-15:
   without this the list sat 128px below the band. */
.ccw-timeline .cat { padding: 0; }
/* Inside the door the steps sit on the bare canvas, as the reference draws them; the
   public page keeps its card. Review M2, 2026-09-15. */
.ccw-timeline .cat-panel { border: 0; border-radius: 0; background: transparent; padding: 0; }

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

@media (max-width: 520px) {
  .cat-step { gap: 12px; padding-bottom: var(--space-5); }
  .cat-check { width: 10px; height: 10px; }
  /* THE COLUMN BRANCH MUST ALSO STRETCH. Flipping to column moves width to
     the cross axis, where align-items: flex-start lets pre.cat-code size to
     its own content and the min-width: 0 above stops binding (it is a main
     axis rule). Measured 2026-09-15 at 390 before this: document 786 with the
     Claude Code chip selected and for every JS off reader, dialog 790. With
     stretch the pre takes the block's width and overflow-x: auto scrolls the
     long line inside its own box. max-width: 100% is the second wall, so a
     later align-items change cannot reopen it. Proof:
     scripts/measure-connect-agent-overflow.mjs. */
  .cat-codeblock { flex-direction: column; align-items: stretch; }
  .cat-code { max-width: 100%; }
  .cat-copy { align-self: flex-start; }
  .cat-chips { gap: 6px; }
  .cat-chip { font-size: 14px; 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; }
}