/* ── Methodology page ── */
.meth .meth-back { font-size:11px; color:var(--text-3); text-decoration:none; display:inline-block; margin-bottom:8px; }
.meth .meth-back:hover { color:var(--accent); }

/* ── Level strip ── */
.meth-levels { display:flex; gap:4px; margin:12px 0; }
.meth-level { flex:1; padding:6px 10px; border-radius:8px; font-size:10px; font-weight:700; text-align:center; }
.meth-level span { display:block; font-size:14px; font-weight:800; margin-bottom:1px; }
.meth-green  { background:#2e8b57; color:#fff; }
.meth-yellow { background:#d4a017; color:#fff; }
.meth-orange { background:#d2691e; color:#fff; }
.meth-red    { background:#b33040; color:#fff; }

/* ── Component bar ── */
.meth-components { display:flex; gap:3px; margin:10px 0 0; }
.meth-comp { display:flex; flex-direction:column; align-items:center; min-width:0; }
.meth-comp-bar { width:100%; height:4px; border-radius:4px; margin-bottom:4px; }
.meth-comp strong { font-size:10px; color:var(--text-0); white-space:nowrap; }
.meth-comp span { font-size:9px; color:var(--text-3); }

/* ── Changelog section ── */
.meth-changelog { border-left:3px solid var(--accent); }

.meth-change { margin-bottom:20px; padding-bottom:18px; border-bottom:1px solid var(--bg-2); }
.meth-change:last-child { border-bottom:none; margin-bottom:0; padding-bottom:0; }

.meth-change-header { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.meth-change-header strong { font-size:12px; color:var(--text-0); }

.meth-badge { font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; padding:2px 8px; border-radius:6px; white-space:nowrap; }
.meth-badge-done { background:var(--green); color:#fff; }
.meth-badge-progress { background:var(--orange); color:#fff; }
.meth-badge-planned { background:var(--bg-2); color:var(--text-2); }

/* ── Before / After ── */
.meth-before-after { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.meth-before, .meth-after { padding:12px 14px; border-radius:10px; font-size:11px; line-height:1.65; }
.meth-before { background:var(--bg-2); }
.meth-after  { background:color-mix(in srgb, var(--accent) 6%, var(--bg-1)); border:1px solid color-mix(in srgb, var(--accent) 15%, transparent); }
.meth-before p, .meth-after p { font-size:11px; color:var(--text-1); margin:0 0 8px; line-height:1.65; }
.meth-ba-label { font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.6px; margin-bottom:6px; }
.meth-before .meth-ba-label { color:var(--text-3); }
.meth-after .meth-ba-label { color:var(--accent); }

.meth-formula { margin:8px 0; font-size:13px; overflow-x:auto; }
.meth-detail { font-size:10px !important; color:var(--text-2) !important; margin-top:6px !important; }

/* ── Section toggles (formulas) ── */
.meth-section-toggle { font-size:12px; font-weight:700; color:var(--text-0); cursor:pointer; padding:8px 0; list-style:none; }
.meth-section-toggle::-webkit-details-marker { display:none; }
.meth-section-toggle::before { content:"▸ "; color:var(--text-3); }
details[open] > .meth-section-toggle::before { content:"▾ "; }
.meth-section-body { padding:8px 0 12px 0; font-size:12px; line-height:1.8; color:var(--text-1); }
.meth-section-body p { font-size:12px; margin:6px 0; }

/* ── Principles ── */
.meth-principles { display:grid; gap:10px; margin-top:8px; }
.meth-principle { display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border-radius:8px; background:var(--bg-2); }
.meth-principle-icon { font-size:16px; flex-shrink:0; margin-top:1px; }
.meth-principle strong { font-size:11px; color:var(--text-0); display:block; margin-bottom:2px; }
.meth-principle p { font-size:10px; color:var(--text-2); margin:0; line-height:1.5; }

/* ── Concepts (plain-language explainers) ── */
.meth-concepts { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px; }
.meth-concept { padding:16px 18px; border-radius:10px; background:var(--bg-2); border:1px solid var(--border-subtle, rgba(128,128,128,.15)); position:relative; }
.meth-concept-icon { font-size:22px; margin-bottom:6px; }
.meth-concept strong { font-size:14px; color:var(--text-0); display:block; margin-bottom:6px; letter-spacing:-.01em; }
.meth-concept p { font-size:13px; color:var(--text-1); margin:0 0 10px; line-height:1.65; }
.meth-concept a { display:inline-flex; align-items:center; gap:4px; font-size:12px; color:var(--accent); text-decoration:none; font-weight:600; padding:4px 10px; border-radius:6px; background:color-mix(in srgb, var(--accent) 8%, transparent); transition:background .15s; }
.meth-concept a:hover { background:color-mix(in srgb, var(--accent) 16%, transparent); text-decoration:none; }

@media (max-width:768px) { .meth-concepts { grid-template-columns:1fr; } }

/* ── References ── */
.meth-refs { font-size:11px; line-height:1.7; color:var(--text-1); padding-left:20px; }
.meth-refs li { margin-bottom:6px; }
.meth-refs em { color:var(--text-2); }
.meth-ref-use { font-size:10px; color:var(--accent); }

/* ── Tables ── */
.meth-table { width:100%; border-collapse:collapse; margin:8px 0; font-size:13px; }
.meth-table th { text-align:left; padding:6px 10px; border-bottom:2px solid var(--border); color:var(--text-1); font-weight:600; }
.meth-table td { padding:5px 10px; border-bottom:1px solid var(--border); color:var(--text-2); }
.meth-table tr:last-child td { border-bottom:none; }

/* ── KaTeX overrides ── */
.meth .katex-display { margin:8px 0; }
.meth .katex { font-size:1.05em; }

/* ── Mobile ── */
@media (max-width:768px) {
  .meth-before-after { grid-template-columns:1fr; }
  .meth-levels { flex-wrap:wrap; }
  .meth-level { min-width:70px; }
  .meth-components { flex-wrap:wrap; }
  .meth-comp { min-width:60px; }
}

@media (max-width:480px) {
  .meth-change-header { flex-wrap:wrap; }
  .meth-formula { font-size:11px; }
}