/* 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 */
main:has(.journey-main) {
  display: block;
  padding: 0;
  overflow: visible;
}

/* The global layout pins `html, body { height: 100% }` (fixed to the viewport)
   and keeps the footer in place by scrolling content *inside* `main`
   (`main { overflow: auto }`). This page opts into natural page scroll via
   `overflow: visible` above, so the fixed-height body can no longer contain
   tall content — it overflows the body box and drags the footer (a grid child
   of `body`) up with it. Let the body grow with its content so the layout
   grid's `1fr` row still pins the footer to the viewport bottom on short pages,
   and the footer sits below the content on tall ones. Scoped to this page so
   the internal-scroll pages (chat, job-search planning) are untouched. */
html:has(.journey-main),
body:has(.journey-main) {
  height: auto;
  min-height: 100vh;
}

.journey-main {
  padding: var(--bp-s-7) var(--bp-s-7) var(--bp-s-8);
  max-width: 1200px;
  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; }

/* ── 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;
  }

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