/* ==========================================================================
   Shared shell: progress card, journey rail (mini-map), mode chip, picker.
   Identical on every page — nothing here is page-specific.
   ========================================================================== */

/* ---------- Progress card (top-right of every page header) ------------- */
.prog {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
  padding: 14px 20px 14px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  background-color: rgba(18, 41, 63, 0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  min-width: 272px;
}
.prog-ring { position: relative; width: 76px; height: 76px; flex-shrink: 0; }
.prog-ring svg { display: block; }
.prog-ring circle[data-ring] { transition: stroke-dashoffset 1.1s var(--ease-out); }
.prog-ring-val {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 21px; font-weight: 800; letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
}
.prog-body { min-width: 0; flex: 1; }
.prog-label {
  font-size: 11px; font-weight: 700; letter-spacing: 1.1px;
  color: var(--text-3); text-transform: uppercase;
}
.prog-step {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-top: 7px; font-size: 13px; color: var(--text-2);
}
.prog-step strong { color: var(--teal); font-weight: 800; font-variant-numeric: tabular-nums; }
.prog-bar { height: 5px; margin-top: 6px; border-radius: 999px; background: var(--card-2); overflow: hidden; }
.prog-bar i {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--teal-dark), var(--teal));
  transition: width 0.9s var(--ease-out);
}
.prog-sub { margin-top: 6px; font-size: 11.5px; color: var(--text-3); }

@media (max-width: 760px) {
  .prog { width: 100%; min-width: 0; }
}

/* ---------- Journey rail ---------------------------------------------- */
.rail {
  --rail-gap: 34px;
  z-index: 40;
}
.rail-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center;
}
.rail-node { position: relative; display: block; flex: none; }
.rail-node a {
  position: relative;
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  color: var(--text-3);
  transition: transform 220ms var(--ease-out);
}
.rail-node a:hover, .rail-node a:focus-visible { transform: scale(1.18); color: var(--text); }
.rail-node svg.rail-ring { display: block; }
.rail-node .rn-track { stroke: var(--border-strong); fill: none; }
.rail-node .rn-fill { stroke: var(--teal); fill: none; stroke-linecap: round; transition: stroke-dashoffset 0.9s var(--ease-out); }
.rail-node .rn-core { fill: var(--card-2); }
.rail-node.is-done .rn-core { fill: var(--teal); }
.rail-node .rn-check { stroke: #06251C; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.rail-node.is-done .rn-check { opacity: 1; }
.rail-node.is-here a { color: var(--text); }
.rail-node.is-here .rn-core { fill: var(--teal-wash); }
.rail-node.is-here.is-done .rn-core { fill: var(--teal); }
.rail-node.is-here a::before {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  border: 1.5px solid var(--teal);
  animation: rail-pulse 2.4s var(--ease-out) infinite;
}
@keyframes rail-pulse {
  0% { opacity: 0.8; transform: scale(0.82); }
  70%, 100% { opacity: 0; transform: scale(1.35); }
}
.rail-map a { color: var(--text-2); }
.rail-map svg { stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* connecting segment to the next node */
.rail-node:not(:last-child)::after {
  content: ""; position: absolute; background: var(--border-strong);
  transition: background-color 0.6s var(--ease-out);
}
.rail-node.is-done:not(:last-child)::after { background: var(--teal); }

/* tooltip */
.rail-tip {
  position: absolute; pointer-events: none; white-space: nowrap;
  padding: 7px 11px; border-radius: 10px;
  background: var(--card-2); border: 1px solid var(--border-strong);
  font-size: 12px; color: var(--text-2);
  opacity: 0; transform: translateX(6px);
  transition: opacity 160ms ease, transform 220ms var(--ease-out);
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.6);
}
.rail-tip b { color: var(--text); font-weight: 700; margin-right: 8px; }
.rail-tip em { font-style: normal; color: var(--teal); font-weight: 700; font-variant-numeric: tabular-nums; }
.rail-node a:hover .rail-tip, .rail-node a:focus-visible .rail-tip,
.rail-node.is-here .rail-tip { opacity: 1; transform: none; }

/* ---- Placement: a compact horizontal map at the top-left of every page,
   level with the page title; the "you are here" readout sits just below.
   Phones: spans the container edge to edge. ---- */
.rail {
  position: relative;
  width: 440px;           /* fixed, so it lands in the same spot on every page */
  max-width: 100%;
  margin: 0 0 18px;
}
.rail-list { width: 100%; }
.rail-node { flex: 1 1 0; min-width: 0; }
.rail-node:last-child { flex: 0 0 auto; }
.rail-node:not(:last-child)::after { top: 18px; left: 30px; right: 0; height: 2px; margin-top: -1px; }
.rail-node a { width: 30px; height: 36px; }
.rail-label { margin-top: 2px; font-size: 12.5px; color: var(--text-3); }
.rail-label b { color: var(--text); font-weight: 700; }
.rail-label em { font-style: normal; color: var(--teal); font-weight: 700; margin-left: 6px; font-variant-numeric: tabular-nums; }

/* hover names (mouse only; a phone has the label line instead) */
.rail-tip { display: none; }
@media (hover: hover) and (pointer: fine) {
  .rail-tip {
    display: block; top: calc(100% - 2px); left: 50%; z-index: 5;
    transform: translate(-50%, -4px);
  }
  .rail-node a:hover .rail-tip, .rail-node a:focus-visible .rail-tip { opacity: 1; transform: translate(-50%, 0); }
  .rail-node.is-here .rail-tip { opacity: 0; }  /* the label line already says where you are */
  .rail-node.is-here a:hover .rail-tip { opacity: 1; }
  .rail-node:nth-last-child(-n+2) .rail-tip { left: auto; right: 0; transform: translate(0, -4px); }
  .rail-node:nth-last-child(-n+2) a:hover .rail-tip,
  .rail-node:nth-last-child(-n+2) a:focus-visible .rail-tip { transform: translate(0, 0); }
}

@media (pointer: coarse), (max-width: 760px) {
  .rail-node a { height: 44px; }
  .rail-node:not(:last-child)::after { top: 22px; }
}
@media (max-width: 640px) { .rail { width: 100%; max-width: none; } }

/* ---- Map -> page hand-off ----
   Clicking a stage on the Map pops a real-size copy of the mini-map up in
   the middle of the screen (scaled up), then flies it to the exact spot it
   lives on the next page while the map behind it shrinks away. Because it
   lands at the same position and size, the next page's real strip takes
   over invisibly, and the rest of that page then fades up. All of it is
   driven by shell.js (Web Animations); nothing relies on the browser's
   cross-page transition support. */
.rail--morph {
  position: fixed; z-index: 300; margin: 0; max-width: none;
  transform-origin: 0 0; opacity: 0; pointer-events: none;
  view-transition-name: none;
}
.rail--morph .rail-card {
  position: absolute; inset: -22px -28px -20px; z-index: -1; border-radius: 24px;
  background-color: rgba(10, 30, 51, 0.94); border: 1px solid var(--border-strong);
  box-shadow: 0 30px 80px -24px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(34, 226, 160, 0.12);
}
.rail--morph .rail-node.is-target a { color: var(--text); }
.rail--morph .rail-node.is-target .rn-core { fill: var(--teal); }
.rail--morph .rail-node.is-target a::before {
  content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1.5px solid var(--teal);
  animation: rail-pulse 1.4s var(--ease-out) infinite;
}

.is-leaving .hero, .is-leaving main.map, .is-leaving .map-footer {
  opacity: 0; transform: scale(0.94); transform-origin: 50% 30%;
  transition: opacity 320ms ease, transform 520ms var(--ease-out);
}

/* The page you land on: its strip is already in place (it took over from the
   flying copy), then everything else rises in around it. */
@keyframes arrive-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
html.is-arriving :is(.eyebrow, .rm-tags, h1, .disc-step, .ln-sub, .cmp-sub, .dash-target, .dash-revisit, .rm-header-copy > p, .rm-download) {
  animation: arrive-up 620ms var(--ease-out) 80ms both;
}
html.is-arriving :is(.prog, .disc-progress) { animation: arrive-up 620ms var(--ease-out) 200ms both; }
html.is-arriving main { animation: arrive-up 760ms var(--ease-out) 280ms both; }
/* ---------- Mode chip + menu (top-right of the nav) ------------------- */
.nav-cta { position: relative; display: flex; align-items: center; gap: 12px; }
.mode-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 11px 6px 10px; border-radius: 999px;
  border: 1px solid var(--border-strong); background: transparent;
  color: var(--text-2); font: inherit; font-size: 11px; font-weight: 700; letter-spacing: 0.8px;
  cursor: pointer; text-transform: uppercase;
  transition: border-color 160ms, color 160ms, background-color 160ms;
}
.mode-chip:hover { border-color: var(--teal); color: var(--text); }
.mode-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.mode-chip[data-mode="demo"] i { background: var(--teal); box-shadow: 0 0 0 3px var(--teal-wash); }
.mode-chip svg { opacity: 0.7; }

.mode-menu {
  position: absolute; right: 0; top: calc(100% + 12px); width: 300px; z-index: 90;
  padding: 16px; border-radius: 16px;
  background: var(--card-2); border: 1px solid var(--border-strong);
  box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.7);
}
.mode-menu[hidden] { display: none; }
.mode-menu h3 { margin: 0 0 4px; font-size: 14px; }
.mode-menu p { margin: 0 0 12px; font-size: 12.5px; line-height: 1.5; color: var(--text-2); }
.mode-menu button {
  display: block; width: 100%; margin-top: 8px; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--border-strong); background: transparent; color: var(--text);
  font: inherit; font-size: 13px; font-weight: 600; text-align: left; cursor: pointer;
  transition: border-color 160ms, background-color 160ms;
}
.mode-menu button:hover { border-color: var(--teal); background: var(--teal-wash); }
.mode-menu button small { display: block; margin-top: 2px; font-weight: 500; font-size: 11.5px; color: var(--text-3); }
.mode-menu .is-danger.is-armed { border-color: var(--gold); background: var(--gold-wash); }

/* ---------- Start screen ------------------------------------------------ */
.picker {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center; padding: 20px;
  background: rgba(4, 12, 22, 0.78);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.picker-box { width: min(760px, 100%); }
.picker-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 1.6px; color: var(--teal); }
.picker h2 { margin: 10px 0 8px; font-size: clamp(26px, 4vw, 38px); letter-spacing: -0.8px; line-height: 1.1; }
.picker-lead { margin: 0 0 24px; font-size: 15px; color: var(--text-2); max-width: 560px; line-height: 1.55; }
.picker-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .picker-grid { grid-template-columns: 1fr; } }
.picker-card {
  position: relative; text-align: left; cursor: pointer; font: inherit; color: var(--text);
  padding: 22px; border-radius: 18px;
  border: 1px solid var(--border-strong); background-color: var(--card);
  transition: transform 260ms var(--ease-out), border-color 200ms, box-shadow 260ms;
}
.picker-card:hover, .picker-card:focus-visible {
  transform: translateY(-3px); border-color: var(--teal);
  box-shadow: 0 18px 40px -18px rgba(34, 226, 160, 0.35);
}
.picker-card--primary { background-color: var(--card-2); }
.picker-tag {
  display: inline-block; margin-bottom: 14px; padding: 4px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: 1px;
  background: var(--teal-wash); color: var(--teal);
}
.picker-card--example .picker-tag { background: var(--gold-wash); color: var(--gold); }
.picker-title { display: block; font-size: 19px; font-weight: 800; letter-spacing: -0.3px; }
.picker-desc { display: block; margin-top: 8px; font-size: 13.5px; line-height: 1.55; color: var(--text-2); }
.picker-meta { display: block; margin-top: 14px; font-size: 12px; color: var(--text-3); }
.picker-foot { margin-top: 18px; font-size: 12px; color: var(--text-3); }

@media (prefers-reduced-motion: reduce) {
  .prog-ring circle[data-ring], .prog-bar i, .rail-node .rn-fill { transition: none; }
  .rail-node.is-here a::before { animation: none; opacity: 0.5; }
  .picker-card, .rail-node a { transition: none; }
}

/* ---------- Small additions used by the stateful pages ---------------- */
.rail-list { position: relative; }

.ph { color: var(--text-3); font-style: italic; opacity: 0.85; }

.link-btn {
  margin-left: 14px; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--text-3); font: inherit; font-size: 12.5px; text-decoration: underline; text-underline-offset: 3px;
}
.link-btn:hover { color: var(--text); }

.role-hint { font-size: 11.5px; color: var(--text-3); align-self: center; }

.rm-item-next {
  display: inline-block; padding: 2px 7px; border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.9px;
  background: var(--teal-wash); color: var(--teal);
}

/* Fork leaves the hub: dim until the path actually reaches it */
.fork-wrap.is-ahead .fork-bar path { stroke: rgba(255, 255, 255, 0.2); }
.fork-wrap.is-ahead .path-dot { display: none; }

/* Prepare: details form */
.details-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }

/* Prepare: LinkedIn how-to */
.li-howto {
  margin-bottom: 18px; padding: 16px 18px; border-radius: 14px;
  border: 1px solid var(--border-strong); background: rgba(34, 226, 160, 0.06);
}
.li-howto-title { font-size: 11px; font-weight: 800; letter-spacing: 1.1px; color: var(--teal); text-transform: uppercase; margin-bottom: 10px; }
.li-howto ol { margin: 0; padding-left: 20px; display: grid; gap: 7px; font-size: 13px; line-height: 1.55; color: var(--text-2); }
.li-howto li::marker { color: var(--teal); font-weight: 700; }
.li-howto b { color: var(--text); }
.li-howto a { color: var(--teal); font-weight: 600; }
.li-howto a:hover { text-decoration: underline; }
.ln-btn.is-copied { border-color: var(--teal); color: var(--teal); }

/* Apply: link to where an unmet criterion gets done */
.criterion-link { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--teal); white-space: nowrap; }
.criterion-link:hover { text-decoration: underline; }

/* Learn / Build / Connect read as "still ahead" until the path reaches them */
.fork-wrap.is-ahead .fork-card { border-color: var(--border-strong); }
.fork-wrap.is-ahead .fork-card-icon { background: var(--card-2); color: var(--text-3); }
.fork-wrap.is-ahead .fork-card:hover { border-color: var(--teal); }

.dash-footer { text-align: center; padding: 22px 20px; font-size: 12px; color: var(--text-3); border-top: 1px solid var(--border); margin-top: 40px; }