/* Jarbou3i guided flow (ADR-0002): the setup phase as the UX-0 prototype's
   steps, one at a time, with the guide beside them. Classes are .j-flow-*,
   layout and look only; the kernel contracts apply to every control inside. */

.j-flow {
  display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--j-s-5);
  align-items: start; padding: var(--j-s-4) 0; margin-bottom: var(--j-s-5);
}

/* ---------- First visit: the trip as a route map ---------- */
/* Above the setup on a first visit: the trip's three stops on one ink line,
   the first marked "you are here", a terminus where the report waits. The line
   runs across with room and down on a phone. */
.j-ride {
  position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--j-s-6);
  align-items: start; margin: 0 0 var(--j-s-4); padding: var(--j-s-6) 0 var(--j-s-5);
}
.j-ride[hidden] { display: none; }
.j-ride-head { display: grid; gap: var(--j-s-3); align-content: start; }
.j-ride-head h2 { margin: 0; font: 700 var(--j-t-28)/1.15 var(--j-font-display); letter-spacing: -.01em; text-wrap: balance; }
.j-ride-head h2:focus { outline: none; }
.j-ride-head h2:focus-visible { outline: 3px solid var(--j-signal); outline-offset: 4px; }
.j-ride-head p { margin: 0; color: var(--j-fg-muted); font-size: var(--j-t-16); line-height: 1.5; max-width: 46ch; }
.j-ride-doors { display: flex; flex-wrap: wrap; gap: var(--j-s-2); margin-block-start: var(--j-s-2); }
.j-ride-skip {
  position: absolute; inset-block-start: var(--j-s-2); inset-inline-end: 0; min-height: var(--j-control); padding: 0 var(--j-s-3);
  border: 0; border-radius: var(--j-r-2); background: none; color: var(--j-fg-muted);
  font: 600 var(--j-t-14)/1 var(--j-font-ui); text-decoration: underline; text-underline-offset: .25em; cursor: pointer;
}
.j-ride-skip:hover { color: var(--j-fg); }
.j-ride-skip:focus-visible { outline: 3px solid var(--j-signal); outline-offset: 2px; }
.j-ride-line { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(7rem, auto); margin: var(--j-s-6) 0 0; padding: 0; list-style: none; }
.j-ride-stop { position: relative; display: grid; gap: var(--j-s-1); align-content: start; padding-block-start: 54px; padding-inline-end: var(--j-s-4); }
.j-ride-stop:not(:last-child)::before {
  content: ""; position: absolute; inset-block-start: 15px; inset-inline-start: 19px;
  inline-size: 100%; block-size: 8px; background: var(--j-ink);
}
.j-ride-ring {
  position: absolute; z-index: 1; inset-block-start: 0; inset-inline-start: 0; display: grid; place-items: center;
  inline-size: 38px; block-size: 38px; box-sizing: border-box; border-radius: 50%;
  border: var(--j-station) solid var(--j-ink); background: var(--j-bg); color: var(--j-fg); font: 700 var(--j-t-13)/1 var(--j-font-ui);
}
.j-ride-stop[aria-current] .j-ride-ring { box-shadow: 0 0 0 3px var(--j-bg), 0 0 0 7px var(--j-ink); }
.j-ride-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--j-s-1) var(--j-s-2); font-size: var(--j-t-18); font-weight: 700; }
.j-ride-here { padding: 4px 10px; border-radius: var(--j-r-1); background: var(--j-ink); color: var(--j-on-ink); font: 700 var(--j-t-12)/1.3 var(--j-font-ui); }
.j-ride-time { font: 600 var(--j-t-13)/1.3 var(--j-font-ui); font-variant-numeric: tabular-nums; }
.j-ride-text { margin: 0; color: var(--j-fg-muted); font-size: var(--j-t-14); line-height: 1.5; }
.j-ride-end .j-ride-ring { inset-block-start: 4px; inline-size: 30px; block-size: 30px; }
.j-ride-end .j-ride-name { font-size: var(--j-t-14); }
/* The one authored moment: the line draws itself from the first stop as the
   map appears, each station ringing as the ink reaches it. */
@media (prefers-reduced-motion: no-preference) {
  .j-ride-ring { animation: j-ride-ring var(--j-dur-2) var(--j-ease-out) both; animation-delay: calc(var(--j-i, 0) * 160ms); }
  .j-ride-stop:not(:last-child)::before {
    transform-origin: left center; animation: j-ride-draw 360ms var(--j-ease-out) both; animation-delay: calc(var(--j-i, 0) * 160ms + 80ms);
  }
  [dir="rtl"] .j-ride-stop:not(:last-child)::before { transform-origin: right center; }
}
@keyframes j-ride-ring { from { opacity: 0; transform: scale(.6); } }
@keyframes j-ride-draw { from { transform: scaleX(0); } }
@keyframes j-ride-down { from { transform: scaleY(0); } }
@media (max-width: 900px) {
  .j-ride { grid-template-columns: minmax(0, 1fr); gap: var(--j-s-3); padding-block-start: var(--j-s-5); }
  .j-ride-head { padding-inline-end: 5rem; }
  .j-ride-line { margin-block-start: var(--j-s-3); }
}
@media (max-width: 620px) {
  .j-ride-line { grid-template-columns: minmax(0, 1fr); }
  .j-ride-stop { padding-block: 6px var(--j-s-5); padding-inline: 56px 0; }
  .j-ride-stop:not(:last-child)::before { inset-block-start: 19px; inset-inline-start: 15px; inline-size: 8px; block-size: 100%; transform-origin: center top; animation-name: j-ride-down; }
  [dir="rtl"] .j-ride-stop:not(:last-child)::before { transform-origin: center top; }
  .j-ride-end { padding-block-end: 0; }
}
@media (forced-colors: active) {
  .j-ride-stop:not(:last-child)::before { forced-color-adjust: none; background: CanvasText; }
  .j-ride-here { forced-color-adjust: none; background: CanvasText; color: Canvas; }
}

/* ---------- Guide: the mascot, the steps, a sample ---------- */
.j-flow-guide { position: sticky; top: var(--j-s-4); display: grid; gap: var(--j-s-4); align-content: start; }
.j-flow-mascot { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--j-s-3); align-items: start; }
.j-flow-mascot img {
  width: 72px; height: 72px; display: block; border-radius: 50%;
  border: 2px solid var(--j-line-strong); background: var(--j-panel);
  /* No idle bob: an endless animation here cut WebKit to 2–6 frames a second. */
}
/* A sample and how the tool works, the guide's two ways to learn by looking. */
.j-flow-more { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--j-s-1); }
.j-flow-say {
  padding: var(--j-s-3) var(--j-s-4); border: 2px solid var(--j-line-strong); border-radius: var(--j-r-3);
  border-start-start-radius: var(--j-r-1); background: var(--j-panel); font-size: var(--j-t-14);
}
/* Not colour alone: the bubble's edge changes and the mascot stops to react. */
.j-flow-guide:not([data-mood="idle"]) .j-flow-mascot img { animation: j-flow-pop var(--j-dur-3) var(--j-ease-out); }
.j-flow-guide:is([data-mood="ok"], [data-mood="done"]) .j-flow-say { border-color: var(--j-ok); }
.j-flow-guide:is([data-mood="warn"], [data-mood="trunc"], [data-mood="gaps"]) .j-flow-say { border-color: var(--j-warn); }
.j-flow-guide[data-mood="crit"] .j-flow-say { border-color: var(--j-crit); border-width: 2px; }

/* The steps are stations on one line: a ring per step, its number inside like
   a station code, the track ridden (ink) up to the current one, which wears a
   second ring in ink. The buttons stay transparent so the track shows under
   them. */
.j-flow-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.j-flow-steps > li { position: relative; }
.j-flow-steps > li:not(:last-child)::after {
  content: ""; position: absolute; z-index: 0; inset-inline-start: 19px; inset-block-start: 22px;
  inline-size: var(--j-track); block-size: calc(100% + 2px);
  background: color-mix(in srgb, var(--j-line-strong) 45%, var(--j-bg));
}
.j-flow-steps > li:has(> .j-flow-step[data-state="done"]):not(:last-child)::after { background: var(--j-ink); }
.j-flow-step {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: var(--j-s-3); width: 100%;
  min-height: var(--j-control); padding: 0 var(--j-s-2); border: 0; border-radius: var(--j-r-2);
  background: transparent; color: var(--j-fg-muted); font-size: var(--j-t-16); font-weight: 600; text-align: start;
}
.j-flow-step:hover { color: var(--j-fg); }
.j-flow-step:hover > span:last-child { text-decoration: underline; text-underline-offset: .25em; }
.j-flow-step-n {
  width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%;
  border: var(--j-station) solid var(--j-line-strong); background: var(--j-panel);
  color: var(--j-fg-muted); font: 700 var(--j-t-12)/1 var(--j-font-ui);
}
.j-flow-step[data-state="done"] { color: var(--j-fg); }
.j-flow-step[data-state="done"] .j-flow-step-n { background: var(--j-ink); border-color: var(--j-ink); color: var(--j-on-ink); }
.j-flow-step[aria-current="step"] { color: var(--j-fg); font-weight: 700; }
.j-flow-step[aria-current="step"] .j-flow-step-n {
  border-color: var(--j-ink); color: var(--j-fg); background: var(--j-panel);
  box-shadow: 0 0 0 3px var(--j-bg), 0 0 0 7px var(--j-ink);
}

/* ---------- The step ---------- */
/* The step sits on the platform itself, no box: its heading at the scale of a
   station name, its fields on enamel. */
.j-flow-card { display: grid; gap: var(--j-s-5); min-width: 0; padding: var(--j-s-2) 0 0; }
.j-flow-head { display: grid; gap: var(--j-s-2); }
.j-flow-head h2 { font-size: var(--j-t-36); line-height: 1.1; font-weight: 700; letter-spacing: -.02em; }
.j-flow-head p { color: var(--j-fg-muted); font-size: var(--j-t-18); max-width: 60ch; }
.j-flow-panel { display: grid; gap: var(--j-s-4); min-width: 0; animation: j-flow-in var(--j-dur-2) var(--j-ease-out); }
.j-flow-topic { min-height: 96px; font-size: var(--j-t-16); }
.j-flow-answer { min-height: 220px; font-family: var(--j-font-code); font-size: var(--j-t-13); }
/* An answer is JSON, laid out left to right in every language; its hint reads
   in the page's direction while the box is empty. */
[dir="rtl"] .j-flow-answer:placeholder-shown { direction: rtl; }

.j-flow-examples { display: flex; flex-wrap: wrap; align-items: center; gap: var(--j-s-2); color: var(--j-fg-muted); font-size: var(--j-t-13); }
.j-flow-example-list { display: contents; }
.j-flow-example {
  min-height: var(--j-control); padding: 0 var(--j-s-4); border: 2px solid var(--j-line); border-radius: var(--j-r-pill);
  background: var(--j-panel); color: var(--j-fg); font-size: var(--j-t-14); font-weight: 600;
}
.j-flow-example:hover { border-color: var(--j-ink); }

.j-flow-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--j-s-3); }
.j-flow-choice {
  position: relative; display: grid; gap: var(--j-s-2); align-content: start; text-align: start;
  padding: var(--j-s-5); border: 2px solid var(--j-line); border-radius: var(--j-r-3); background: var(--j-panel);
  transition: border-color var(--j-dur-1) var(--j-ease-out), background-color var(--j-dur-1) var(--j-ease-out);
}
.j-flow-choice:hover { border-color: var(--j-line-strong); }
.j-flow-choice b { font-size: var(--j-t-18); }
.j-flow-choice span { color: var(--j-fg-muted); font-size: var(--j-t-13); }
/* The chosen one: an ink edge and a station ring in its corner. */
.j-flow-choice[aria-checked="true"] { border-color: var(--j-ink); }
.j-flow-choice[aria-checked="true"]::after {
  content: ""; position: absolute; inset-inline-end: 16px; top: 16px; width: 18px; height: 18px;
  border-radius: 50%; border: var(--j-station) solid var(--j-ink); background: var(--j-panel);
  box-shadow: 0 0 0 3px var(--j-panel), 0 0 0 6px var(--j-ink);
}
.j-flow-note { color: var(--j-fg-muted); font-size: var(--j-t-13); }
.j-flow-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--j-s-4); }
/* The prompt mode takes its own row, with what each mode asks for under it. */
.j-mode-field { grid-column: 1 / -1; }
.j-mode-field > .j-input { max-width: 22rem; }
.j-mode-help {
  display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--j-s-1) var(--j-s-3);
  margin: 0; color: var(--j-fg-muted); font-size: var(--j-t-13);
}
.j-mode-help dt { color: var(--j-fg); font-weight: 600; }
.j-mode-help dd { margin: 0; }

.j-flow-howto { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--j-s-3); counter-reset: how; }
.j-flow-howto li {
  counter-increment: how; display: grid; gap: var(--j-s-2); padding: var(--j-s-4);
  border: 2px solid var(--j-line); border-radius: var(--j-r-3); background: var(--j-panel);
  color: var(--j-fg-muted); font-size: var(--j-t-14);
}
/* Its order as a station code: the number in an ink ring. */
.j-flow-howto li::before {
  content: counter(how); display: grid; place-items: center; inline-size: 28px; block-size: 28px; border-radius: 50%;
  border: var(--j-station) solid var(--j-ink); color: var(--j-fg); font: 700 var(--j-t-12)/1 var(--j-font-ui);
}

.j-flow-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--j-s-3); }
.j-flow-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--j-s-3);
  padding-top: var(--j-s-3); border-top: 1px solid var(--j-line);
}
.j-flow-actions #flowNext { margin-inline-start: auto; }

[data-density="compact"] .j-flow-card { gap: var(--j-s-3); }

@keyframes j-flow-pop { 40% { transform: scale(1.08); } }
@keyframes j-flow-in { from { opacity: 0; transform: translateY(6px); } }

@media (max-width: 900px) {
  .j-flow { grid-template-columns: minmax(0, 1fr); }
  .j-flow-guide { position: static; }
  /* The line runs across: each segment from a station to the next one. */
  .j-flow-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .j-flow-steps > li:not(:last-child)::after { inset-inline-start: 50%; inset-block-start: 15px; inline-size: calc(100% + 2px); block-size: var(--j-track); }
  .j-flow-step { flex-direction: column; justify-content: flex-start; gap: var(--j-s-1); padding: var(--j-s-1); font-size: var(--j-t-13); text-align: center; }
}
@media (max-width: 720px) {
  .j-flow { padding: var(--j-s-2) 0; }
  .j-flow-head h2 { font-size: var(--j-t-28); }
  .j-flow-head p { font-size: var(--j-t-16); }
  .j-flow-howto { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .j-flow { gap: var(--j-s-4); }
  .j-flow .j-flow-card { gap: var(--j-s-4); }
}
@media (forced-colors: active) {
  .j-flow-step[aria-current="step"], .j-flow-choice[aria-checked="true"] { outline: 2px solid Highlight; }
  /* A checked choice is painted in system colours; its description follows them. */
  .j-flow-choice span { color: inherit; }
}