/* Journey Dashboard — Direction A · Quiet Editorial
   Authenticated home page showing the career journey stage list.
*/

/* Reset the layout.css `main {}` FLEX defaults for this page — and only those.
   Deliberately NOT `overflow: visible`: this page scrolls inside `main` like
   every other page in the app.

   🔑 IT USED TO. `overflow: visible` came in with the Direction A migration
   (8cb605f8) as part of a bundled "reset the main defaults" and was never a
   decision about how this page should scroll. What it actually did was switch
   one page — the only one — to document scroll, and `html, body { height: 100% }`
   then could not contain the content: the footer, a grid child of `body`, was
   dragged off the TOP of the screen. #1092 reported that, and 27260b22 fixed it
   by letting the body grow instead. The footer then sat below the fold on any
   tall page — 350px under at 1280x813, measured — which was the leftover of that
   fix rather than anything anyone wanted, and it is why the customer-support PRD
   had to write a constraint about the shell having two layout modes.

   There is one mode now. `main` is the scroller, the footer is on the bottom
   edge of the viewport on every page, and the shell's own comment in layout.css
   is true again everywhere rather than nearly everywhere. Guarded by
   test/system/app_shell_footer_scroll_test.rb. */
main:has(.journey-main) {
  display: block;
  padding: 0;
}

.journey-main {
  padding: var(--bp-s-7) var(--bp-s-7) var(--bp-s-8);
  max-width: var(--bp-w-page);
  margin: 0 auto;
}

/* ── Hero ──────────────────────────────────────────────────────────────────── */

.journey-hero {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--bp-s-7);
  align-items: end;
  margin-bottom: var(--bp-s-6);
  padding-bottom: var(--bp-s-6);
  border-bottom: 1px solid var(--bp-rule-soft);
}

.welcome-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--bp-s-2);
  font-family: var(--bp-mono-family);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bp-ink-muted);
  margin-bottom: 10px;
}

.welcome-tag::before {
  content: '';
  width: 16px;
  height: 1px;
  background: var(--bp-ink-muted);
  flex-shrink: 0;
}

.journey-hero__title {
  font-family: var(--bp-display-family);
  font-weight: var(--bp-display-weight);
  letter-spacing: -0.015em;
  font-size: 48px;
  line-height: 1.05;
  margin: 0 0 var(--bp-s-3);
  color: var(--bp-ink);
}

.journey-hero__sub {
  font-family: var(--bp-serif-family);
  font-size: 19px;
  color: var(--bp-ink-2);
  max-width: 52ch;
  margin: 0;
  line-height: 1.55;
}

/* ── Body grid ─────────────────────────────────────────────────────────────── */

.journey-body-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--bp-s-7);
  align-items: start;
}

/* ── Stage list block ──────────────────────────────────────────────────────── */

.journey-block-title {
  font-family: var(--bp-display-family);
  font-weight: var(--bp-display-weight);
  letter-spacing: -0.015em;
  font-size: 22px;
  margin: 0 0 var(--bp-s-1);
  color: var(--bp-ink);
}

.journey-block-sub {
  margin: 0 0 var(--bp-s-4);
  color: var(--bp-ink-muted);
  font-size: 14.5px;
}

.journey-stages-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

/* ── Journey row ───────────────────────────────────────────────────────────── */

.journey-row {
  display: grid;
  grid-template-columns: 54px 1fr auto;
  gap: var(--bp-s-5);
  padding: var(--bp-s-5) var(--bp-s-1);
  border-top: 1px solid var(--bp-rule-soft);
  align-items: start;
}

.journey-row:first-child { border-top: 1px solid var(--bp-rule); }
.journey-row:last-child  { border-bottom: 1px solid var(--bp-rule); }

.journey-row--current {
  background: var(--bp-surface);
  padding-left: var(--bp-s-4);
  padding-right: var(--bp-s-4);
  margin: 0 calc(-1 * var(--bp-s-4));
  border-radius: var(--bp-r-md);
  border-color: transparent;
}

.journey-row--current + .journey-row { border-top-color: transparent; }

/* ── Stage indicator ───────────────────────────────────────────────────────── */

.journey-indicator {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bp-surface-2);
  color: var(--bp-ink-muted);
  font-family: var(--bp-mono-family);
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
}

.journey-row--done    .journey-indicator { background: var(--bp-success); color: var(--bp-accent-ink); }
.journey-row--current .journey-indicator { background: var(--bp-accent);  color: var(--bp-accent-ink); }

/* ── Stage content ─────────────────────────────────────────────────────────── */

.journey-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--bp-ink);
  margin-bottom: var(--bp-s-1);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.journey-name a { color: inherit; text-decoration: none; }
.journey-name a:hover { color: var(--bp-accent); text-decoration: underline; }

.journey-desc {
  margin: 0;
  color: var(--bp-ink-muted);
  font-size: 14px;
  line-height: 1.55;
  max-width: 54ch;
}

.journey-action { align-self: center; }

/* ── The destination: Search Execution (#2089) ─────────────────────────────
   NOT a stage row, and the CSS is where that has to be legible. The six stages
   are rows in a list; this is a card — `.bp-card` + `.bp-card--soft` come from
   the library and supply every bit of its chrome. What is added here is only
   the internal layout, which deliberately mirrors the row grid so the two align
   down the page while reading as different objects.

   🚩 The marker is SQUARE where `.journey-indicator` is a circle, and carries
   an arrow rather than a number. That contrast is the whole requirement of
   #2089 — a tester read the six-row map as the entire program — so it is not a
   decorative choice to normalise away. */
.journey-destination {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: var(--bp-s-5);
  align-items: start;
  margin-top: var(--bp-s-5);
}

.journey-destination__marker {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  /* `--bp-r-sm`, not the row indicator's 50%. Square vs circle is the signal. */
  border-radius: var(--bp-r-sm);
  border: 1px dashed var(--bp-rule);
  background: transparent;
  color: var(--bp-ink-muted);
  font-size: 18px;
  line-height: 1;
}

/* ── Sidebar ───────────────────────────────────────────────────────────────── */

/* Card chrome comes from the library: `.bp-card` sets the radius + padding +
   border; `.bp-card--soft` overrides only the background and border color.
   These rules carry only the screen-scoped typography and stacking. */
.journey-sidebar-card + .journey-sidebar-card { margin-top: var(--bp-s-5); }

.journey-sidebar-card h3 {
  font-family: var(--bp-display-family);
  font-weight: var(--bp-display-weight);
  font-size: 17px;
  margin: 0 0 var(--bp-s-2);
  color: var(--bp-ink);
  letter-spacing: -0.015em;
}

.journey-sidebar-card p {
  margin: 0 0 10px;
  font-size: 13.5px;
  color: var(--bp-ink-2);
  line-height: 1.6;
}

.journey-sidebar-card p:last-child { margin-bottom: 0; }

.journey-progress-num {
  font-family: var(--bp-display-family);
  font-weight: var(--bp-display-weight);
  font-size: 32px;
  color: var(--bp-ink);
  display: block;
  line-height: 1;
  margin-bottom: var(--bp-s-1);
}

.journey-progress-meta {
  font-family: var(--bp-mono-family);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bp-ink-muted);
  display: block;
  margin-bottom: var(--bp-s-3);
}

/* ── Responsive ────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .journey-main {
    padding: var(--bp-s-5) var(--bp-s-5) var(--bp-s-7);
  }

  .journey-hero {
    grid-template-columns: 1fr;
    gap: var(--bp-s-5);
  }

  .journey-body-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .journey-main {
    padding: var(--bp-s-4) var(--bp-s-4) var(--bp-s-7);
  }

  .journey-hero__title { font-size: 36px; }

  .journey-row {
    grid-template-columns: 40px 1fr;
  }

  /* The destination tracks the rows so the two stay aligned on narrow. */
  .journey-destination {
    grid-template-columns: 40px 1fr;
  }

  /* row action buttons collapse on mobile; the hero CTA stays */
  .journey-action { display: none; }
}