/* ============================================================
   Journeys page

   The page wants to be a single screen — canvas on the left, panel on the
   right, nothing below the fold. But that only works if the window is
   actually big enough to hold it, so the DEFAULT here is an ordinary
   scrolling document and the pinned single-screen layout is opted into at the
   bottom of the file, behind a min-width AND min-height query. Written the
   other way round (pin by default, unpin when small) the failure mode is a
   clipped diagram inside a page that cannot scroll, which is worse than any
   amount of scrolling.

   The Canvas flow renderer is ported from the Braze study tool I built while
   certifying — same tree walker, same node spec, restyled against this site's
   design system. The variables below map the two palettes onto each other in
   one place instead of at every call site.
   ============================================================ */

:root {
  /* Connectors need more contrast than a hairline border — at --border-strong
     they read as absent. The grid behind them needs less. */
  --jr-line: #aebbcd;
  --jr-grid: #ecf0f6;
  --jr-soft: #f7f9fc;
  --jr-card: #ffffff;
  --jr-ink-2: #4a4a55;
  --jr-accent-soft: #eef3ff;
  --jr-accent-line: #c7d7fb;
  --jr-test: #bb2e5d;
  --jr-test-soft: #fdeff4;
  --jr-test-line: #f3cddb;
  --jr-live: #0f9f63;
}

/* ---- default: an ordinary scrolling page --------------------------- */
body.journeys-page { --brand-avatar-bg: #d9e6ff; }

.jr-page { padding: 14px 0; }

/* The intro stays in the reading column; the stage breaks out of it,
   because a flow diagram wants width and prose does not. */
.jr-intro { flex: none; }
.jr-intro h1 {
  margin: 0 0 5px;
  font-size: clamp(1.3rem, 2.1vw, 1.65rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.jr-lede {
  margin: 0;
  max-width: 96ch;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
}
.jr-lede strong { color: var(--text); font-weight: 600; }

.jr-break {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: min(1500px, calc(100vw - 56px));
}
/* ---- switcher ------------------------------------------------------ */
.jr-switch {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 10px;
}
.jr-tab {
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  padding: 7px 15px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: #fff;
  color: var(--muted);
  cursor: pointer;
  transition: border-color 0.14s, background 0.14s, color 0.14s;
}
.jr-tab:hover { border-color: var(--pg); color: var(--text); }
.jr-tab.is-active { background: var(--pg-solid); border-color: var(--pg-solid); color: var(--pg-btn-ink); }

/* ---- two-pane stage ------------------------------------------------ */
.jr-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  gap: 18px;
  /* Both columns fill the framed shell; the shell's fixed height is
     what keeps the canvas steady now, and each column scrolls its own
     overflow. (This used to be align-items: start with a canvas floor,
     back when content drove the height.) */
  align-items: stretch;
  flex: 1;
  min-height: 0;
}
.jr-panel { min-height: 0; }

.jr-flowwrap {
  position: relative;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--jr-soft);
  padding: 14px 12px;
  overflow: auto;
  /* One steady canvas height. The floor clears the tallest diagram on the
     page (win-back), so every journey renders at the same size and shorter
     trees centre in the space rather than shrinking the frame. On a window
     too short to hold that, the floor drops to what the window has and the
     canvas grows only for the diagram that genuinely needs it. */
  min-height: 0;
  display: flex;
  background-image:
    linear-gradient(var(--jr-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--jr-grid) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: -1px -1px;
}
/* margin:auto rather than justify/align-content — it centres the tree while
   still letting it scroll from the top edge when it does not fit.

   On a short viewport the tree is scaled down to fit rather than scrolled,
   because the whole point of this page is that you do not have to move to see
   it. `zoom` and not `transform: scale()` deliberately: zoom is accounted for
   in layout, so the pane measures the scaled tree and stops overflowing.
   A transform would shrink the pixels and leave the layout box behind. */
.cvinner { margin: auto; }

/* The nudge that tells people the diagram is not a picture. Fades out the
   moment they take the hint. */
.jr-tip {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--jr-ink-2);
  background: #fff;
  border: 1px solid var(--jr-accent-line);
  border-radius: 999px;
  padding: 5px 12px;
  box-shadow: var(--shadow);
  pointer-events: none;
  transition: opacity 0.2s;
}
.jr-flowwrap.has-selection .jr-tip { opacity: 0; }

/* A wide diagram in a narrow window scrolls sideways. Label the edge, because
   a clipped branch looks like a rendering fault rather than a scroll. */
.jr-flowwrap.is-scrollable::after {
  content: "scroll →";
  position: sticky;
  float: right;
  right: 0;
  bottom: 0;
  margin-right: -12px;
  padding: 4px 10px 4px 28px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted-soft);
  background: linear-gradient(90deg, rgba(247, 249, 252, 0), var(--jr-soft) 40%);
  pointer-events: none;
}



/* ---- the panel ----------------------------------------------------- */
.jr-panel {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.jr-panel-head {
  padding: 13px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
  flex: none;
}
.jr-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 700;
  color: var(--muted-soft);
  margin: 0 0 5px;
}
.jr-panel-flag { color: var(--jr-test); }
.jr-panel-head h2,
.jr-panel-head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.jr-panel-body {
  padding: 14px 16px 16px;
  font-size: 14.5px;
  line-height: 1.6;
  /* The framed shell fixes the panel's height now, so the body is the
     scroller — visible overflow would spill out of the card. */
  overflow-y: auto;
  min-height: 0;
  /* Reserve the scrollbar's width whether or not it is showing, so content
     does not reflow narrower the moment a panel starts to scroll. */
  scrollbar-gutter: stable;
  flex: 1;
}
.jr-panel-body p { margin: 0 0 12px; }
.jr-panel-body p:last-child { margin-bottom: 0; }

/* ---- the brief: four questions, one answer each -------------------- */
.jr-brief { margin: 0; }
.jr-brief div { margin-bottom: 12px; }
.jr-brief div:last-child { margin-bottom: 0; }
.jr-brief dt {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--c-num-ink);
  margin-bottom: 3px;
}
.jr-brief dd {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text);
}
.jr-brief dd strong { color: var(--text); font-weight: 600; }

.jr-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  background: var(--bg-alt);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 4px 12px;
}
.jr-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--jr-live); flex: none; }
.jr-status--read i { background: var(--muted-soft); }

/* ---- the full case file, behind a click ---------------------------- */
.jr-case h4 {
  margin: 20px 0 8px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--muted-soft);
}
.jr-case h4:first-child { margin-top: 0; }
.jr-case p { font-size: 13.5px; line-height: 1.6; }

.jr-code {
  margin: 10px 0 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: #fbfcfe;
  overflow: hidden;
}
.jr-code figcaption {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted-soft);
}
.jr-code pre { margin: 0; padding: 10px; overflow-x: auto; }
.jr-code code {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--jr-ink-2);
  white-space: pre;
}

.jr-found { margin: 0 0 14px; display: grid; gap: 9px; }
.jr-found div { border-left: 3px solid var(--jr-accent-line); padding-left: 11px; }
.jr-found dt { font-size: 12.5px; font-weight: 700; color: var(--text); }
.jr-found dt b { font-weight: 700; color: var(--accent-dark); }
.jr-found dd { margin: 2px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }

.jr-cells {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  border: 1px solid var(--jr-test-line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 14px;
}
.jr-cells th {
  text-align: left;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted-soft);
  font-weight: 700;
  padding: 6px 10px;
  border-bottom: 1px solid var(--jr-test-line);
  background: var(--jr-test-soft);
}
.jr-cells td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  line-height: 1.45;
  color: var(--muted);
}
.jr-cells tr:last-child td { border-bottom: none; }
.jr-cells td b { color: var(--text); white-space: nowrap; }
.jr-cells .jr-share { font-family: var(--font-mono); color: var(--jr-test); font-weight: 600; }

.jr-spec { margin: 0 0 6px; display: grid; gap: 10px; }
.jr-spec div { display: grid; grid-template-columns: 108px 1fr; gap: 10px; align-items: baseline; }
.jr-spec dt {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: var(--muted-soft);
}
.jr-spec dd { margin: 0; font-size: 13px; line-height: 1.55; color: var(--jr-ink-2); }

.jr-srclist { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.jr-srclist li { font-size: 12.5px; line-height: 1.45; }
.jr-srclist a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--border-strong); }
.jr-srclist a:hover { color: var(--accent); border-color: var(--accent); }

/* ---- the step detail ----------------------------------------------- */
.jr-set { border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; margin-top: 13px; }
.jr-set-head {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 700;
  color: var(--muted-soft); padding: 7px 11px;
  border-bottom: 1px solid var(--border); background: var(--bg-alt);
}
.jr-set-row {
  display: grid; grid-template-columns: minmax(100px, 138px) 1fr; gap: 10px;
  padding: 6px 11px; border-bottom: 1px solid var(--border); font-size: 12.5px; align-items: baseline;
}
.jr-set-row:last-child { border-bottom: none; }
.jr-set-f { font-weight: 600; color: var(--jr-ink-2); }
/* The reason a setting is what it is, under the value it explains. */
.jr-set-why {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--muted);
}
.jr-set-v code { font-family: var(--font-mono); font-size: 11.5px; background: var(--card-bg); padding: 1px 5px; border-radius: 4px; }

.jr-hint {
  margin-top: 13px !important;
  border-left: 3px solid color-mix(in srgb, var(--pg) 42%, transparent);
  padding-left: 11px;
  font-size: 13px;
  color: var(--jr-ink-2);
}

/* ---- panel controls ------------------------------------------------ */
.jr-controls {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 11px 18px; border-top: 1px solid var(--border); background: var(--bg-alt);
  flex: none;
}
.jr-btn {
  font: inherit; font-size: 13px; font-weight: 600;
  padding: 7px 13px; border-radius: var(--radius-sm);
  border: 1px solid var(--pg-solid); background: var(--pg-solid); color: var(--pg-btn-ink); cursor: pointer;
}
.jr-btn.ghost { background: #fff; color: var(--pg-ink); }
.jr-btn:disabled { opacity: 0.45; cursor: default; }
.jr-count { font-size: 12px; color: var(--muted); margin-left: auto; }

/* ---- the phase board ----------------------------------------------
   Used by journeys whose shape is a programme rather than one automation.
   Built from the same node styling as the flow tree so it reads as part of
   the same set. */
.jr-board { display: flex; align-items: stretch; gap: 26px; }

.jr-phase {
  flex: 1 1 0;
  min-width: 168px;
  display: flex;
  flex-direction: column;
  position: relative;
}
/* The arrow between phases — they run in sequence, not in parallel. */
.jr-phase + .jr-phase::before {
  content: "";
  position: absolute;
  left: -18px;
  top: 74px;
  width: 9px;
  height: 9px;
  border-top: 2px solid var(--jr-line);
  border-right: 2px solid var(--jr-line);
  transform: rotate(45deg);
}

.jr-phase-head { padding-bottom: 10px; }
.jr-phase-n {
  margin: 0 0 3px;
  font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.1em;
  font-weight: 800; color: var(--jr-test);
}
.jr-phase-head h3 {
  margin: 0 0 4px;
  font-size: 12.5px; line-height: 1.25; letter-spacing: -0.01em;
}
.jr-phase-job { margin: 0; font-size: 10.5px; line-height: 1.4; color: var(--muted); }

.jr-phase-flow { display: flex; flex-direction: column; align-items: stretch; }
.jr-phase-flow .cvnode { max-width: none; width: 100%; }
.jr-phase-flow .cvconn { align-self: center; }

.jr-phase-metric {
  margin-top: auto;
  padding-top: 10px;
  font-size: 10.5px;
  line-height: 1.35;
  color: var(--jr-ink-2);
  border-top: 1px solid var(--border);
}
.jr-phase-metric span {
  display: block;
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 700; color: var(--muted-soft); margin-bottom: 2px;
}

/* ---- the flow tree ------------------------------------------------- */
.cvinner { display: flex; flex-direction: column; align-items: center; min-width: max-content; }
.cvwrap { display: flex; flex-direction: column; align-items: center; }

.cvnode {
  background: var(--jr-card); border: 1px solid var(--border-strong); border-radius: 9px;
  padding: 6px 9px; min-width: 132px; max-width: 154px; position: relative;
  text-align: left; font: inherit; cursor: default;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.07);
}
.cvnode.click { cursor: pointer; transition: border-color 0.12s, box-shadow 0.12s; }
.cvnode.click:hover { border-color: var(--pg); }
.cvnode.on { border-color: var(--pg); box-shadow: 0 0 0 3px var(--pg-soft); }
.cvhead { display: flex; align-items: center; gap: 6px; }
.cvico {
  width: 18px; height: 18px; border-radius: 6px; flex: none;
  display: grid; place-items: center; font-size: 9.5px; color: #fff;
  /* drawn gloss, same treatment as the traffic lights on the copy page */
  background-image: linear-gradient(140deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0) 55%);
  box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.28),
              inset 0 1px 0 rgba(255, 255, 255, 0.35),
              0 1px 2px rgba(15, 23, 42, 0.18);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}
.cvt { font-size: 11px; font-weight: 700; line-height: 1.25; }
.cvnode.flagged .cvt { padding-right: 44px; }
.cvsub { display: block; font-size: 10px; color: var(--muted); margin-top: 1px; line-height: 1.35; }
.cvn {
  position: absolute; top: -8px; left: -8px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--pg-solid); color: var(--pg-btn-ink); display: grid; place-items: center;
  font-size: 10px; font-weight: 700; border: 2px solid #fff;
}
.cvflag {
  position: absolute; top: -8px; right: -5px;
  font-size: 8px; font-weight: 800; letter-spacing: 0.06em;
  background: var(--jr-test); color: #fff;
  border: 2px solid #fff; border-radius: 999px; padding: 1px 6px;
}
.cvflag--inline {
  position: static; display: inline-block; border: none; font-style: normal;
  vertical-align: middle; padding: 2px 6px;
}

/* Connectors. These carry the whole readability of the diagram — the study
   tool shipped for weeks with them invisible because the CSS referenced a
   variable that was never defined. */
.cvconn { width: 2px; height: 11px; background: var(--jr-line); flex: none; }
.cvrow { --cvgap: 14px; display: flex; align-items: flex-start; gap: var(--cvgap); position: relative; justify-content: center; }
.cvcol { display: flex; flex-direction: column; align-items: center; position: relative; }
/* Each spine segment overhangs by half a gap so the horizontal rule joining a
   branch reads as one line rather than a row of stubs. */
.cvspine {
  height: 2px; background: var(--jr-line); position: absolute; top: 0;
  left: calc(var(--cvgap) / -2); right: calc(var(--cvgap) / -2);
}
.cvcol::before {
  content: ""; position: absolute; top: 0; left: calc(50% - 1px);
  width: 2px; height: 9px; background: var(--jr-line);
}
/* CHILD combinator, not descendant. With a space these also matched every
   spine in any row *nested inside* the first or last column, which trimmed
   interior segments down to 2px and broke the bottom row of the deeper
   journeys. */
.cvrow > .cvcol:first-child > .cvspine { left: calc(50% - 1px); }
.cvrow > .cvcol:last-child  > .cvspine { right: calc(50% - 1px); }

.cvbr {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--card-bg); border: 1px solid var(--border-strong);
  border-radius: 12px; padding: 1px 8px; font-size: 10px; font-weight: 600;
  white-space: nowrap; margin-top: 9px; color: var(--jr-ink-2);
}
.cvbr.last { background: #fdf1e7; color: #8a4b16; border-color: #f0cfae; }
.cvrk {
  width: 14px; height: 14px; border-radius: 50%; background: #fff;
  display: grid; place-items: center; font-size: 8.5px; font-weight: 700; flex: none;
}

@media (max-width: 600px) {
  .cvnode { min-width: 128px; max-width: 150px; }
  .cvrow { --cvgap: 10px; }
}

/* ============================================================
   Responsive overrides live at the end on purpose. These rules have the same
   specificity as the ones they replace, so ordering is the only thing that
   decides the winner — sitting mid-file they matched and silently lost.
   ============================================================ */

/* Below this the two panes stop fitting side by side, so they stack. */
@media (max-width: 1080px) {
  .jr-stage { grid-template-columns: 1fr; }
  .jr-flowwrap { min-height: min(712px, calc(100vh - 235px)); }
}
@media (max-width: 1180px) {
  .jr-break { left: auto; transform: none; width: calc(100% - 40px); margin: 0 auto; }
}

/* ------------------------------------------------------------------
   There used to be a single-screen mode here: above 1200 x 760 the page
   locked to the viewport height and the diagram was fitted to the pane in
   both directions. It is gone. Holding everything above the fold meant the
   header could never grow, which is why it had nothing behind it, and it
   made every size below the gate a second layout to maintain. The page is
   a document now and scrolls like one; the diagram is still fitted to the
   pane's width, which is the dimension that can actually clip it.
   ------------------------------------------------------------------ */