/* Build a Legend Bot · hub page. Loaded after build-a-game-engine.css (phases, module cards),
   ai-tutorial.css (widget frame, tables) and bot-tutorial.css (.bot-record). */

/* Phase tones: the same eight colors the dependency graph draws, so a phase pill, a ladder chip
   and a graph node of one phase match. */
[data-tone="arena"]    { --phase-tone: #a78bfa; --phase-glow: rgba(167, 139, 250, 0.16); }
[data-tone="rules"]    { --phase-tone: #4ed9b1; --phase-glow: rgba(78, 217, 177, 0.14); }
[data-tone="search"]   { --phase-tone: #f6bd60; --phase-glow: rgba(246, 189, 96, 0.14); }
[data-tone="measure"]  { --phase-tone: #70b7ff; --phase-glow: rgba(112, 183, 255, 0.14); }
[data-tone="ml"]       { --phase-tone: #ef7e99; --phase-glow: rgba(239, 126, 153, 0.14); }
[data-tone="lab"]      { --phase-tone: #f5f5fb; --phase-glow: rgba(245, 245, 251, 0.10); }
[data-tone="advanced"] { --phase-tone: #b8e986; --phase-glow: rgba(184, 233, 134, 0.14); }
[data-tone="cases"]    { --phase-tone: #9aa7c7; --phase-glow: rgba(154, 167, 199, 0.16); }

.phase[data-tone] .phase-num { color: var(--phase-tone); background: var(--phase-glow); }
.phase[data-tone] .module-card { border-top: 2px solid var(--phase-tone); }
.phase[data-tone] .module-card.is-built:hover,
.phase[data-tone] .module-card.is-built:focus-visible { border-color: var(--phase-tone); }
.phase[data-tone] .module-card.is-built::after { color: var(--phase-tone); }

/* The milestone band takes the graph's white instead of the engine hub's violet. */
.phase.is-milestone[data-tone] { border-color: rgba(245, 245, 251, 0.45); background: linear-gradient(180deg, rgba(245, 245, 251, 0.06), transparent 70%); }
.phase.is-milestone[data-tone] .phase-num { color: #0d1019; background: var(--phase-tone); }
/* The shared .tut-shell h3 margin leaves an empty strip inside the band; the band's own padding is enough. */
.tut-shell .phase.is-milestone .phase-title { margin-top: 0; }
.phase.is-milestone[data-tone] .module-card.is-capstone { border-color: rgba(245, 245, 251, 0.45); border-top: 2px solid var(--phase-tone); }

/* Page number, level and reading time, pinned to the bottom of each card. */
.module-meta {
  margin-top: auto;
  padding-top: 0.35rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--tut-soft);
}

/* ── League ladder: Legend at the top, Wood at the bottom ─────────────────── */
.tut-shell .league-ladder {
  list-style: none;
  margin: 1.5rem 0 1.25rem;
  padding: 0;
  display: grid;
  gap: 6px;
}
.tut-shell .league-ladder > li {
  display: grid;
  margin: 0;
  grid-template-columns: 8.5rem 1fr;
  gap: 0.45rem 1rem;
  align-items: start;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--tut-border);
  border-left: 3px solid var(--league-tone);
  border-radius: 10px;
  background: var(--tut-surface);
}
.tut-shell .league-ladder > li[data-league="legend"] { --league-tone: #f0abfc; background: linear-gradient(90deg, rgba(240, 171, 252, 0.08), var(--tut-surface) 60%); }
.tut-shell .league-ladder > li[data-league="gold"]   { --league-tone: #f2c14e; }
.tut-shell .league-ladder > li[data-league="silver"] { --league-tone: #c3cede; }
.tut-shell .league-ladder > li[data-league="wood"]   { --league-tone: #c08e62; }
.league-name {
  grid-row: 1 / span 2;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.3;
  color: var(--league-tone);
}
.league-ladder p {
  margin: 0;
  color: var(--tut-soft);
  font-size: 0.9rem;
  line-height: 1.55;
}
.league-phases { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.tut-shell a.phase-chip {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.3;
  padding: 0.22em 0.65em;
  border: 1px solid var(--phase-tone);
  border-radius: 999px;
  background: var(--phase-glow);
  color: var(--phase-tone);
  text-decoration: none;
}
.tut-shell a.phase-chip:hover, .tut-shell a.phase-chip:focus-visible { background: var(--phase-tone); border-color: var(--phase-tone); color: #0d1019; outline: none; }

/* ── Dependency graph widget ─────────────────────────────────────────────── */
#widget-hub-graph canvas { height: 480px; cursor: default; }
#widget-hub-graph .widget-readout { min-height: 5.6em; }
#widget-hub-graph .widget-readout a { color: #c4b5fd; }
#widget-hub-graph .widget-controls select { max-width: 100%; }

/* ── Results table ───────────────────────────────────────────────────────── */
.hub-results { min-width: 600px; }
.hub-results caption {
  caption-side: top;
  text-align: left;
  padding: 0 0 0.6rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tut-soft);
}
.hub-results tbody th { color: var(--tut-text); background: transparent; font-weight: 600; width: 22%; }
.hub-results td:nth-child(2) { width: 33%; }
.hub-tag {
  display: inline-block;
  margin: 0 0.45rem 0.15rem 0;
  padding: 0.08em 0.55em;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.5;
  text-transform: uppercase;
  color: #0d1019;
  vertical-align: 0.08em;
}
.hub-tag.is-net    { background: #ef7e99; }
.hub-tag.is-search { background: #f6bd60; }
.hub-tag.is-rules  { background: #a78bfa; }

/* ── Credits ─────────────────────────────────────────────────────────────── */
.tut-shell h4.hub-credits-group {
  margin: 1.6rem 0 0.6rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tut-soft);
}
.tut-shell .hub-credits {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}
.tut-shell .hub-credits li {
  margin: 0;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--tut-border-soft);
  border-radius: 8px;
  background: var(--tut-surface);
  color: var(--tut-soft);
  font-size: 0.92rem;
  line-height: 1.55;
}
.hub-credits .hub-handle { font-weight: 700; color: var(--tut-text); }
.hub-credits a.hub-handle { color: #c4b5fd; }
.hub-credit-place {
  display: inline-block;
  margin: 0 0.5rem 0 0.45rem;
  padding: 0.05em 0.5em;
  border: 1px solid var(--tut-border);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--tut-soft);
  vertical-align: 0.1em;
}

/* ── Footer: the copyright line and the affiliation note, stacked ───────── */
.hub-footer-text p { margin: 0; }
.hub-footer-text p + p { margin-top: 0.3rem; }

@media (max-width: 600px) {
  #widget-hub-graph canvas { height: 560px; }
  #widget-hub-graph .widget-readout { min-height: 12em; }
}
@media (max-width: 560px) {
  .tut-shell .league-ladder > li { grid-template-columns: 1fr; padding: 0.8rem 0.9rem; }
  .league-name { grid-row: auto; }
}