/* _learn.css — shared styling for the /learn-* explainer pages.
 * Layout primitives only (sections, steps, chips, diagrams); each explainer adds
 * its own page-specific tweaks inline. Uses the site design tokens. */

.lrn-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 2rem;
}
.lrn-toc a {
  font-size: 0.82rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-2);
  text-decoration: none;
}
.lrn-toc a:hover { color: var(--accent); border-color: var(--accent); }

.lrn-section {
  margin: 0 0 2.75rem;
  scroll-margin-top: 1rem;
}
.lrn-section > h2 {
  font-size: 1.35rem;
  margin: 0 0 0.25rem;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}
.lrn-step {
  font-family: var(--mono);
  color: var(--accent);
  font-size: 0.9rem;
}
.lrn-section > p { color: var(--text); line-height: 1.6; margin: 0.5rem 0; }
.lrn-section .lrn-aside { color: var(--text-2); font-size: 0.9rem; }

.lrn-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-2);
  padding: 1.1rem 1.2rem;
  margin: 1rem 0;
}
.lrn-card h3 { margin: 0 0 0.6rem; font-size: 1rem; }

.lrn-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  align-items: center;
  margin: 0.75rem 0;
}
.lrn-controls label { font-size: 0.85rem; color: var(--text-2); }
.lrn-controls .lrn-val { font-family: var(--mono); color: var(--accent); }

/* token / node chips */
.lrn-chip {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.85rem;
  padding: 0.15rem 0.45rem;
  margin: 0.12rem;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: var(--bg-3);
  white-space: pre;
}
.lrn-chips { line-height: 2; }

/* horizontal flow diagram (boxes + arrows) */
.lrn-flow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-family: var(--mono);
  font-size: 0.82rem;
}
.lrn-flow .lrn-box {
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 0.5rem 0.7rem;
  background: var(--bg-3);
  text-align: center;
}
.lrn-flow .lrn-box.hot { border-color: var(--accent); color: var(--accent); }
.lrn-flow .lrn-arrow { color: var(--text-3); }

/* bars (probabilities, vectors) */
.lrn-bar-row { display: flex; align-items: center; gap: 0.6rem; margin: 0.2rem 0; font-family: var(--mono); font-size: 0.82rem; }
.lrn-bar-label { width: 6.5rem; text-align: right; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lrn-bar-track { flex: 1; background: var(--bg-3); border-radius: 4px; overflow: hidden; height: 1.1rem; }
.lrn-bar-fill { height: 100%; background: var(--accent); transition: width 0.25s; }
.lrn-bar-val { width: 3.5rem; color: var(--text-2); }

.lrn-key { display:flex; flex-wrap:wrap; gap:0.5rem 1.25rem; font-size:0.8rem; color:var(--text-2); margin-top:0.5rem; }
.lrn-key span::before { content:"■ "; }

.lrn-svg { width: 100%; height: auto; display: block; }

table.lrn-table { width:100%; border-collapse:collapse; font-size:0.85rem; margin:0.75rem 0; }
table.lrn-table th, table.lrn-table td { border:1px solid var(--border); padding:0.4rem 0.6rem; text-align:left; }
table.lrn-table th { background:var(--bg-3); }
table.lrn-table code { font-size:0.8rem; }