/* ==========================================================================
   AI reliability: the "Who does what" table, the seven checks flow and the
   six-step loop. Loaded after styles.css and uses only its colour variables.
   The --rl-* properties below are layout sizes only, never colours.
   Orange marks only the path a sample task takes. Everything else is ink
   and grey.
   ========================================================================== */

/* ---------- Page sections ---------- */
.rel-part { padding: clamp(48px, 7vw, 88px) 0; border-top: 1px solid var(--line); }
.rel-part--first { padding-top: 0; border-top: 0; }
.rel-title { margin-bottom: clamp(20px, 3vw, 28px); }
.rel-head { max-width: 760px; margin-bottom: clamp(28px, 4vw, 40px); }
.rel-head .lede { margin-top: 16px; }

.rel-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.rel-pair__item { padding: 28px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg); }
.rel-pair__title { margin-bottom: 12px; font-size: clamp(1.375rem, 2.2vw, 1.75rem); line-height: 1.2; }
.rel-close { max-width: 68ch; margin-top: 28px; font-size: clamp(1.125rem, 1.8vw, 1.3125rem); line-height: 1.5; color: var(--ink); }

/* ---------- Shared component: "Who does what" table ----------
   Stands alone inside a normal .container (the landing page uses it too). */
.who {
  width: 100%;
  margin: -10px 0 0;
  border-collapse: separate;
  border-spacing: 0 10px;
  font-size: 1.0625rem;
  line-height: 1.4;
  text-align: left;
}
.who th {
  padding: 0 20px 0;
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--muted);
  text-align: left;
}
.who td {
  padding: 16px 20px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  color: var(--body);
  vertical-align: middle;
}
.who td:first-child { width: 55%; border-left: 1px solid var(--line); border-radius: var(--radius) 0 0 var(--radius); }
.who td:last-child {
  position: relative;
  padding-left: 52px;
  border-right: 1px solid var(--line);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--ink);
  font-weight: 600;
}
.who th:last-child { padding-left: 52px; }
/* The same short connector the seven checks flow uses, drawn not typed. */
.who td:last-child::before,
.who td:last-child::after { content: ""; position: absolute; top: 50%; }
.who td:last-child::before { left: 14px; width: 22px; height: 2px; margin-top: -1px; background: var(--line-strong); }
.who td:last-child::after {
  left: 29px; width: 8px; height: 8px; margin-top: -4px;
  border-top: 2px solid var(--line-strong); border-right: 2px solid var(--line-strong);
  transform: rotate(45deg);
}
.who__note { max-width: 68ch; margin-top: 14px; font-size: 1rem; line-height: 1.55; color: var(--muted); }

@media (max-width: 640px) {
  .who { font-size: 1rem; border-spacing: 0 8px; margin-top: -8px; }
  .who th { padding: 0 12px; }
  .who td { padding: 12px; }
  .who td:first-child { width: 52%; }
  .who td:last-child, .who th:last-child { padding-left: 34px; }
  .who td:last-child::before { left: 8px; width: 16px; }
  .who td:last-child::after { left: 17px; }
}

/* ---------- Shared parts: numbered stop on a spine ---------- */
.fc__n {
  position: relative;
  z-index: 1;
  justify-self: center;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1.5px solid var(--line-strong);
  border-radius: 50%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1;
  transition: background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}

/* ==========================================================================
   Seven checks flow
   Variant a: one rail on the right, a "no" connector from every row.
   Variant b: a "no, to a person" tag inside every row, outcomes side by side.
   Phones (both variants): stacked rows with a tag, outcomes once underneath.
   ========================================================================== */
.flow {
  --rl-spine: 44px;   /* badge column, the spine runs down its centre */
  --rl-gap: 12px;     /* badge column to row box */
  --rl-pad: 20px;     /* inner padding of a row box */
  --rl-conn: 56px;    /* connector length, row box to rail */
  --rl-rail: 240px;
  --rl-rh: 68px;      /* row height: fits two lines, so all seven rows match */
  --rl-qh: 48px;      /* question heading height */
  --rl-rowgap: 10px;
  --rl-groupgap: 14px;
  --rl-outgap: 28px;  /* last row to the outcomes */
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--rl-conn) var(--rl-rail);
  row-gap: var(--rl-outgap);
}
.flow__checks { position: relative; grid-column: 1; grid-row: 1; }

/* Spine: one line from check 1 down into the "All seven yes" bar. */
.flow__checks::before,
.flow__spinefill {
  position: absolute;
  left: calc(var(--rl-spine) / 2 - 1px);
  top: calc(var(--rl-qh) + 20px);
  width: 2px;
}
.flow__checks::before { content: ""; bottom: calc(-1 * var(--rl-outgap)); background: var(--line-strong); }
.flow__checks::after {
  content: "";
  position: absolute;
  left: calc(var(--rl-spine) / 2 - 5px);
  bottom: calc(-1 * var(--rl-outgap) + 4px);
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--line-strong);
  border-bottom: 2px solid var(--line-strong);
  transform: rotate(45deg);
}
.flow__spinefill { height: 0; background: var(--accent); transition: height .5s var(--ease); }

.flow__group + .flow__group { margin-top: var(--rl-groupgap); }
.flow__q,
.flow__railhead {
  display: flex;
  align-items: flex-end;
  height: var(--rl-qh);
  padding-bottom: 12px;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.flow__q { padding-left: calc(var(--rl-spine) + var(--rl-gap)); }

.flow__list { display: grid; row-gap: var(--rl-rowgap); list-style: none; }
.fc {
  position: relative;
  display: grid;
  grid-template-columns: var(--rl-spine) minmax(0, 1fr);
  column-gap: var(--rl-gap);
  align-items: center;
  min-height: var(--rl-rh);
}
.fc__box {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px var(--rl-pad);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--ink);
  font-size: 1.0625rem;
  line-height: 1.35;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.fc__t { flex: 1 1 auto; min-width: 0; }

/* The "no" mark. Default form is the tag (variant b and phones). */
.fc__no {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--bg);
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1;
  color: var(--muted);
  white-space: nowrap;
  transition: color .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease);
}

/* Rail (variant a only) */
.flow__rail { position: relative; grid-column: 3; grid-row: 1; }
.flow__rail::before,
.flow__railfill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: calc(-1 * var(--rl-outgap));
  width: 2px;
}
.flow__rail::before { content: ""; background: var(--ink); }
.flow__railhead { padding-left: 16px; }
.flow__railfill { display: block; background: var(--accent); transform: scaleY(0); transform-origin: top; transition: transform .6s var(--ease); }
.flow__railfill.is-on { transform: scaleY(1); }

/* Outcomes */
.flow__out {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 72px;
  padding: 14px var(--rl-pad);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-1);
  color: var(--body);
  font-size: 1.0625rem;
  line-height: 1.4;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.flow__out--yes { grid-column: 1; grid-row: 2; padding-left: calc(var(--rl-spine) + var(--rl-gap) + var(--rl-pad)); }
/* Variant a: the 2px ink left edge is the end of the rail itself, not a side tab. */
.flow__out--no { grid-column: 3; grid-row: 2; padding-left: 16px; border-left: 2px solid var(--ink); border-radius: 0 var(--radius) var(--radius) 0; }
/* Tick on the spine line, so the spine ends in the bar. */
.flow__tick {
  position: absolute;
  left: calc(var(--rl-spine) / 2 - 1px - 13px);
  top: 50%;
  width: 26px;
  height: 26px;
  margin-top: -13px;
  border: 1.5px solid var(--line-strong);
  border-radius: 50%;
  background: var(--bg);
  transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
.flow__tick::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 5px;
  width: 6px;
  height: 11px;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: rotate(45deg);
}

/* Variant a: connectors from the row box to the rail */
.flow[data-variant="a"] .fc__no {
  position: absolute;
  left: 100%;
  top: calc(50% - 21px);
  width: calc(var(--rl-conn) + 2px);
  height: 22px;
  padding: 0 2px 0 0;
  border: 0;
  border-bottom: 2px solid var(--line-strong);
  border-radius: 0;
  background: none;
  justify-content: center;
  align-items: flex-start;
}
.flow[data-variant="a"] .fc__to { display: none; }

/* Variant b: no rail, a tag in every row, outcomes side by side */
.flow[data-variant="b"] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; }
.flow[data-variant="b"] .flow__checks { grid-column: 1 / -1; }
.flow[data-variant="b"] .flow__rail { display: none; }
.flow[data-variant="b"] .flow__out--no { grid-column: 2; padding-left: var(--rl-pad); border-left: 1px solid var(--line); border-radius: var(--radius); }

/* ---------- Path of a sample task (orange) ---------- */
.fc.is-cur .fc__box { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.fc.is-yes .fc__n { border-color: var(--accent); background: var(--accent); color: var(--ink); }
.fc.is-no .fc__n { border-color: var(--accent-strong); color: var(--accent-strong); }
.fc.is-no .fc__box { border-color: var(--accent-strong); box-shadow: 0 0 0 3px var(--accent-tint); }
.fc.is-no .fc__no { border-color: var(--accent-strong); background: var(--accent-tint); color: var(--accent-strong); }
.flow[data-variant="a"] .fc.is-no .fc__no { border-bottom-color: var(--accent); background: none; }
.flow__out.is-on { border-color: var(--accent); background: var(--accent-tint); }
.flow .flow__out--no.is-on { border-color: var(--accent); }
.flow__out--yes.is-on .flow__tick { border-color: var(--accent); background: var(--accent); }

.flow__ring {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 42px;
  height: 42px;
  margin: -21px 0 0 -21px;
  border: 2px solid var(--accent-strong);
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--accent-tint);
  opacity: 0;
  pointer-events: none;
  transition: transform .5s var(--ease), opacity .3s var(--ease);
}
.flow__ring.is-on { opacity: 1; }
.flow__ring.is-jump { transition: opacity .3s var(--ease); }

/* ---------- Pause and play control (matches the operations window) ---------- */
.flow-ctl { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 14px; }
.flow-ctl[hidden] { display: none; }
.flow-ctl__status {
  min-height: 1.4em;
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--muted);
}
.flow-pb {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 44px;
  margin: 0;
  padding: 0 14px 0 12px;
  border: 0;
  background: none;
  color: var(--ink);
  font: 600 0.875rem/1 var(--font);
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.flow-pb::before {
  content: "";
  position: absolute;
  inset: 6px 0;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--bg);
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.flow-pb > span { position: relative; }
.flow-pb:focus { outline: none; }
.flow-pb:focus-visible::before { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
.flow-pb:hover::before { border-color: var(--ink); }
.flow-pb__i, .flow-pb__i svg { display: block; width: 12px; height: 12px; }
.flow-pb__i svg { fill: currentColor; }
.flow-pb__i .flow-pb__r, .flow-pb[data-state="paused"] .flow-pb__i .flow-pb__p, .flow-pb[data-state="done"] .flow-pb__i .flow-pb__p { display: none; }
.flow-pb[data-state="paused"] .flow-pb__i .flow-pb__r, .flow-pb[data-state="done"] .flow-pb__i .flow-pb__r { display: block; }
/* All three labels share one cell, so the button keeps one width. */
.flow-pb__t { display: inline-grid; justify-items: center; }
.flow-pb__t > span { grid-area: 1 / 1; visibility: hidden; }
.flow-pb[data-state="play"] [data-w="play"],
.flow-pb[data-state="paused"] [data-w="paused"],
.flow-pb[data-state="done"] [data-w="done"] { visibility: visible; }
.flow-pb[data-state="paused"] { color: var(--accent-strong); }
.flow-pb[data-state="paused"]::before { border-color: var(--accent-strong); background: var(--accent-tint); }

/* ==========================================================================
   Six-step loop: the same spine and row boxes as the flow. Steps 3 to 6
   are closed by a return line on the right that runs from step 6 back up
   into step 3, so the eye reads a loop. Still a plain ordered list.
   ========================================================================== */
.loop {
  --rl-spine: 44px;
  --rl-gap: 12px;
  --rl-pad: 20px;
  --rl-ret: 48px;     /* room on the right for the return line */
  --rl-retx: 16px;    /* return line distance from the right edge */
  --rl-rowgap: 10px;
  --rl-y: 50%;        /* where the spine and return meet a row */
  display: grid;
  grid-auto-rows: 1fr; /* equal rows on wide screens: a strict grid */
  row-gap: var(--rl-rowgap);
  list-style: none;
}
.loop__step {
  position: relative;
  display: grid;
  grid-template-columns: var(--rl-spine) minmax(0, 1fr);
  column-gap: var(--rl-gap);
  align-items: center;
  min-height: 60px;
  padding-right: var(--rl-ret);
}
.loop__box {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
  padding: 12px var(--rl-pad);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--body);
  font-size: 1.0625rem;
  line-height: 1.4;
}
.loop__box strong { font-weight: 600; color: var(--ink); }
/* Spine: a segment from each badge to the next one. */
.loop__step::before {
  content: "";
  position: absolute;
  left: calc(var(--rl-spine) / 2 - 1px);
  top: var(--rl-y);
  height: calc(100% + var(--rl-rowgap));
  width: 2px;
  background: var(--line-strong);
}
.loop__step:last-child::before { display: none; }
/* Steps 3 to 6 sit inside the loop: their spine and the return are ink. */
.loop__step:nth-child(n+3)::before { background: var(--ink); }
.loop__step:nth-child(n+3) .fc__n { border-color: var(--ink); }
/* Return line, built from one piece per row so it meets each row exactly. */
.loop__step:nth-child(n+3)::after {
  content: "";
  position: absolute;
  right: var(--rl-retx);
  border-right: 2px solid var(--ink);
}
.loop__step:nth-child(3)::after {
  left: calc(100% - var(--rl-ret));
  top: calc(var(--rl-y) - 1px);
  bottom: calc(-1 * var(--rl-rowgap));
  border-top: 2px solid var(--ink);
  border-top-right-radius: 12px;
}
.loop__step:nth-child(4)::after,
.loop__step:nth-child(5)::after { top: 0; bottom: calc(-1 * var(--rl-rowgap)); }
.loop__step:nth-child(6)::after {
  left: calc(100% - var(--rl-ret));
  top: 0;
  height: calc(var(--rl-y) + 1px);
  border-bottom: 2px solid var(--ink);
  border-bottom-right-radius: 12px;
}
/* Arrowhead: the return enters step 3. */
.loop__step:nth-child(3) .loop__box::after {
  content: "";
  position: absolute;
  left: 100%;
  top: var(--rl-y);
  width: 9px;
  height: 9px;
  margin: -5.5px 0 0 2px;
  border-left: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: rotate(45deg);
}

/* ---------- Tablet ---------- */
@media (max-width: 1080px) {
  .flow { --rl-conn: 48px; --rl-rail: 200px; }
}

/* ---------- Phones: rows stack, a tag on each row, one person outcome ---------- */
@media (max-width: 720px) {
  .flow {
    --rl-spine: 36px;
    --rl-gap: 10px;
    --rl-pad: 14px;
    --rl-qh: 40px;
    --rl-outgap: 24px;
    display: block;
  }
  .flow__q, .flow__railhead { font-size: 1.0625rem; padding-bottom: 10px; }
  .flow .fc { align-items: start; min-height: 0; }
  .flow .fc__n { width: 28px; height: 28px; margin-top: 10px; font-size: 0.8125rem; }
  .flow .fc__box { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px var(--rl-pad); font-size: 1rem; }
  .flow .flow__rail { display: none; }
  /* Variant a uses the tag form on phones too. */
  .flow[data-variant="a"] .fc__no {
    position: static;
    width: auto;
    height: 28px;
    padding: 0 12px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--bg);
    align-items: center;
  }
  .flow[data-variant="a"] .fc__to { display: inline; }
  .flow[data-variant="a"] .fc.is-no .fc__no { border-color: var(--accent-strong); background: var(--accent-tint); }
  .flow .flow__out { min-height: 0; font-size: 1rem; }
  .flow .flow__out--yes { margin-top: var(--rl-outgap); }
  .flow .flow__out--no { margin-top: 12px; padding-left: var(--rl-pad); border-left: 1px solid var(--line); border-radius: var(--radius); }
  .flow .flow__tick { width: 24px; height: 24px; margin-top: -12px; left: calc(var(--rl-spine) / 2 - 1px - 12px); }
  .flow .flow__tick::after { left: 7px; top: 4px; }
  .flow__ring { width: 38px; height: 38px; margin: -19px 0 0 -19px; }

  .flow-ctl { flex-wrap: wrap; }

  .loop {
    --rl-spine: 36px;
    --rl-gap: 10px;
    --rl-pad: 14px;
    --rl-ret: 32px;
    --rl-retx: 10px;
    --rl-y: 24px;     /* rows grow with their text, so meet them at the badge */
    grid-auto-rows: auto;
  }
  .loop__step { align-items: start; min-height: 0; }
  .loop__step .fc__n { width: 28px; height: 28px; margin-top: 10px; font-size: 0.8125rem; }
  .loop__box { display: block; padding: 12px var(--rl-pad); font-size: 1rem; }

  .rel-pair { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .rel-pair__item { padding: 22px 20px; }
}

/* Pause control removed at owner request (14 Nov 2026). */
.flow-pb { display: none; }

/* ---------- Reduced motion: the static diagram only ---------- */
@media (prefers-reduced-motion: reduce) {
  .flow__ring, .flow__spinefill, .flow__railfill, .flow-ctl { display: none; }
}