/* ════════════════════════════════════════════════════════════════════
   styles/pathways.css — page components for /pathways
   ════════════════════════════════════════════════════════════════════

   Loaded AFTER /site.css, never alongside style.css.

   The Toastmasters Pathways guide has components no other page wants:
   six expandable path cards, a five-rung level stepper, the DTM
   requirement lanes, and the vintage-path grid. They previously lived
   in style.css against its dark-theme variables; this file restates
   them against the brand v1.0 tokens so the page sits on paper like
   the rest of the site.

   Class names are unchanged from the original page so the markup — a
   guide that shipped three days before the #96 rebuild — did not have
   to be rewritten. No JS: the collapsibles are native
   <details>/<summary>.

   Tokens only. Never redefine --rt-*.
   ════════════════════════════════════════════════════════════════════ */

/* ── Path chooser cards ───────────────────────────────────────────── */

.path-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 28px 0 36px;
}

@media (min-width: 720px) {
  .path-grid { grid-template-columns: 1fr 1fr; }
}

.path-card {
  background: #fff;
  border: 1px solid var(--rt-rule);
  border-radius: var(--rt-radius-lg);
  transition: border-color var(--rt-dur) var(--rt-ease);
}

.path-card[open],
.path-card:hover { border-color: var(--rt-red); }

.path-card summary {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px;
  cursor: pointer;
  list-style: none;
}

.path-card summary::-webkit-details-marker { display: none; }

/* Custom disclosure marker so the six cards read as expandable. */
.path-card summary::after {
  content: "+";
  margin-left: auto;
  font-size: 20px;
  line-height: 1;
  color: var(--rt-ink-3);
  flex-shrink: 0;
}

.path-card[open] summary::after { content: "\2212"; }

.path-card__code {
  font-family: var(--rt-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--rt-red);
  border: 1px solid var(--rt-red);
  border-radius: var(--rt-radius-sm);
  padding: 3px 6px;
  flex-shrink: 0;
}

.path-card__head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.path-card__name {
  font-family: var(--rt-font-display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: var(--rt-track-snug);
  color: var(--rt-ink);
}

.path-card__focus {
  font-size: var(--rt-text-sm);
  line-height: 1.55;
  color: var(--rt-ink-2);
}

.path-levels {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 16px;
  padding: 0 20px 20px;
  margin: 0;
  border-top: 1px solid var(--rt-rule);
  padding-top: 18px;
}

.path-levels dt {
  font-family: var(--rt-font-mono);
  font-size: var(--rt-text-xs);
  letter-spacing: var(--rt-track-loose);
  text-transform: uppercase;
  color: var(--rt-ink-3);
  white-space: nowrap;
  padding-top: 2px;
}

.path-levels dd {
  font-size: var(--rt-text-sm);
  line-height: 1.55;
  color: var(--rt-ink-2);
  margin: 0;
}

.path-levels dd strong { color: var(--rt-ink); }


/* ── Level stepper ────────────────────────────────────────────────── */

ol.level-steps {
  list-style: none;
  counter-reset: level;
  margin: 28px 0;
  padding: 0;
}

li.level-step {
  counter-increment: level;
  position: relative;
  padding: 0 0 30px 54px;
  margin: 0;
}

/* Connector line between step number bubbles. */
.level-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 17px;
  top: 38px;
  bottom: 0;
  width: 2px;
  background: var(--rt-rule);
}

.level-step::before {
  content: counter(level);
  position: absolute;
  left: 0;
  top: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--rt-font-display);
  font-weight: 700;
  color: var(--rt-red);
  background: #fff;
  border: 2px solid var(--rt-red);
  border-radius: 999px;
}

.level-step__name {
  display: block;
  font-family: var(--rt-font-display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: var(--rt-track-snug);
  color: var(--rt-ink);
  padding-top: 5px;
  margin-bottom: 4px;
}

.level-step__detail {
  display: block;
  font-size: var(--rt-text-base);
  line-height: 1.6;
  color: var(--rt-ink-2);
}

.level-step__detail strong { color: var(--rt-ink); }


/* ── Generic collapsible (electives, legacy paths) ────────────────── */

.paths-collapse {
  background: #fff;
  border: 1px solid var(--rt-rule);
  border-radius: var(--rt-radius-lg);
  padding: 0 22px;
  margin: 28px 0;
}

.paths-collapse summary {
  cursor: pointer;
  padding: 16px 0;
  font-family: var(--rt-font-display);
  font-weight: 600;
  color: var(--rt-ink);
  list-style-position: inside;
}

.paths-collapse > :last-child { padding-bottom: 18px; }


/* ── Vintage paths / explorations ─────────────────────────────────── */

.vintage-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 28px 0 16px;
}

@media (min-width: 720px) {
  .vintage-grid { grid-template-columns: repeat(3, 1fr); }
}

.vintage-card {
  background: #fff;
  border: 1px solid var(--rt-rule);
  border-left: 3px solid var(--rt-stats);
  border-radius: var(--rt-radius-lg);
  padding: 20px 22px;
}

.vintage-card h3 {
  margin: 0 0 8px;
  font-family: var(--rt-font-display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: var(--rt-track-snug);
  color: var(--rt-ink);
}

.vintage-card p {
  font-size: var(--rt-text-sm);
  line-height: 1.55;
  color: var(--rt-ink-2);
  margin: 0;
}

.vintage-card__tag {
  display: inline-block;
  margin-left: 6px;
  vertical-align: middle;
  font-family: var(--rt-font-mono);
  font-size: var(--rt-text-xs);
  font-weight: 500;
  letter-spacing: var(--rt-track-loose);
  text-transform: uppercase;
  color: var(--rt-stats);
  background: var(--rt-paper-2);
  padding: 3px 6px;
  border-radius: var(--rt-radius-sm);
}

.vintage-rules {
  font-size: var(--rt-text-sm);
  line-height: 1.6;
  color: var(--rt-ink-3);
}


/* ── Award ladder strip ───────────────────────────────────────────── */

ol.dtm-ladder {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 16px 0 28px;
}

.dtm-ladder li {
  font-size: var(--rt-text-sm);
  color: var(--rt-ink-2);
  background: #fff;
  border: 1px solid var(--rt-rule);
  border-radius: 999px;
  padding: 5px 13px;
  margin: 0;
}

.dtm-ladder li:not(:last-child)::after {
  content: "\2192";
  margin-left: 9px;
  color: var(--rt-ink-3);
}

.dtm-ladder li strong { color: var(--rt-red); }


/* ── DTM requirement lanes ────────────────────────────────────────── */

.dtm-lanes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 28px 0;
}

@media (min-width: 860px) {
  .dtm-lanes { grid-template-columns: repeat(3, 1fr); }
}

.dtm-lane {
  background: #fff;
  border: 1px solid var(--rt-rule);
  border-top: 3px solid var(--rt-red);
  border-radius: var(--rt-radius-lg);
  padding: 20px 22px;
}

.dtm-lane h3 {
  margin: 0 0 14px;
  font-family: var(--rt-font-mono);
  font-size: var(--rt-text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--rt-track-loose);
  color: var(--rt-ink-3);
}

ul.dtm-check {
  list-style: none;
  padding: 0;
  margin: 0;
}

.dtm-check li {
  font-size: var(--rt-text-sm);
  line-height: 1.55;
  color: var(--rt-ink-2);
  padding-left: 22px;
  position: relative;
  margin-bottom: 14px;
}

.dtm-check li:last-child { margin-bottom: 0; }

.dtm-check li strong { color: var(--rt-ink); }

.dtm-check li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--rt-red);
  font-weight: 700;
}


/* ── Timeline + footer note ───────────────────────────────────────── */

.dtm-timeline li { margin-bottom: 8px; }

.paths-footer-note {
  margin-top: 48px;
  padding-top: 22px;
  border-top: 1px solid var(--rt-rule);
  font-size: var(--rt-text-sm);
  line-height: 1.6;
  color: var(--rt-ink-3);
}