/* Concept page styles — Swiss typographic system */

/* ── shell ──────────────────────────────────────────────── */
.cp {
  --cp-pad: 48px;
  font-family: var(--font-ui);
  background: var(--paper);
  color: var(--ink);
  width: 100%;
  position: relative;
}

/* ── top chrome ─────────────────────────────────────────── */
.cp__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px var(--cp-pad);
  height: 56px;
}
.cp__top-l { display: flex; align-items: center; gap: 10px; }
.cp__bc-link { color: var(--ink-3); text-decoration: none; font-size: 13px; }
.cp__bc-link:hover { color: var(--ink); }
.cp__bc-cur { color: var(--ink); font-size: 13px; font-weight: 500; }
.cp__bc-sep { color: var(--ink-5); font-family: var(--font-mono); font-size: 11px; }
.cp__top-r { display: flex; align-items: center; gap: 14px; font-size: 13px; }
.cp__mastery-num { color: var(--ink); font-weight: 500; }
.cp__top-divider { width: 1px; height: 18px; background: var(--rule-2); margin: 0 4px; }
.cp__top-btn { font-size: 12px; padding: 6px 12px; }

/* ── title ─────────────────────────────────────────────── */
.cp__title { padding: 32px var(--cp-pad) 48px; }
.cp__title-grid {
  display: grid;
  grid-template-columns: 1.2fr 5fr 2fr;
  gap: var(--col-gap);
  align-items: start;
}
.cp__title-meta { display: flex; flex-direction: column; gap: 18px; padding-top: 6px; }
.cp__id-block .t-meta { margin-bottom: 4px; }
.cp__id { color: var(--ink); font-size: 12px; }
.cp__diff { display: flex; gap: 4px; }
.cp__diff > span { width: 16px; height: 4px; background: var(--rule-3); }
.cp__diff > span.cp__diff-on { background: var(--ink); }
.cp__title-h { margin: 0 0 16px; }
.cp__title-em { font-style: italic; color: var(--ink-3); }
.cp__title-sub { max-width: 60ch; }
.cp__title-aside { padding-top: 6px; border-left: 1px solid var(--rule-3); padding-left: 24px; }
.cp__aside-h { margin-bottom: 8px; }
.cp__aliases, .cp__notation { list-style: none; margin: 0; padding: 0; font-family: var(--font-text); font-size: 13px; }
.cp__aliases li { padding: 4px 0; color: var(--ink); }
.cp__notation li { padding: 6px 0; display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--rule-3); }
.cp__notation li:last-child { border-bottom: 0; }
.cp__notation-by { font-family: var(--font-ui); font-size: 11px; color: var(--ink-4); letter-spacing: 0.05em; text-transform: uppercase; }

/* ── section heads ─────────────────────────────────────── */
.cp__section { padding: 32px var(--cp-pad); }
.cp__section-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 12px; }
.cp__section-num { color: var(--ink); font-size: 13px; font-weight: 500; }
.cp__section-tag { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); letter-spacing: 0.04em; }

/* ── §1 definition + prerequisites ─────────────────────── */
.cp__defn-grid { display: grid; grid-template-columns: 5fr 3fr; gap: 48px; margin-top: 24px; }
.cp__defn-body p { margin: 0 0 14px; max-width: 64ch; }
.cp__defn-body p + p { margin-top: 14px; }
.cp__display-math { position: relative; padding: 12px 0 12px 16px; border-left: 2px solid var(--accent); margin: 16px 0; max-width: 64ch; }
.cp__eq-num { position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: var(--ink-4); }

.cp__prereq { padding: 18px 0 0; border-top: 1px solid var(--rule); }
.cp__prereq-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.cp__prereq-count { color: var(--ink); font-weight: 500; }
.cp__prereq-list { list-style: none; padding: 0; margin: 0; }
.cp__prereq-item { display: grid; grid-template-columns: 16px 1fr auto; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--rule-3); }
.cp__prereq-item:last-child { border-bottom: 0; }
.cp__prereq-link { color: var(--ink); text-decoration: none; font-family: var(--font-text); font-size: 14px; }
.cp__prereq-link:hover { color: var(--accent); }
.cp__prereq-pct { color: var(--ink-4); font-size: 11px; }
.cp__prereq-foot { display: inline-block; margin-top: 14px; color: var(--ink); border-bottom: 1px solid var(--rule); padding-bottom: 1px; }
.cp__prereq-foot:hover { color: var(--accent); border-color: var(--accent); }

/* ── §2 explore ────────────────────────────────────────── */
.cp__section--accent {}
.cp__explore-grid { display: grid; grid-template-columns: 5fr 3fr; gap: 48px; margin-top: 24px; align-items: start; }
.cp__explore-plot { border: 1px solid var(--rule); }
.cp__explore-controls { display: flex; flex-direction: column; gap: 22px; padding-top: 4px; }
.cp__ctrl-block { display: flex; flex-direction: column; gap: 6px; }
.cp__ctrl-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.cp__ctrl-val { color: var(--accent); font-size: 14px; font-weight: 500; }
.cp__ctrl-axis { display: flex; justify-content: space-between; color: var(--ink-4); font-size: 10px; }
.cp__seg { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; border: 1px solid var(--rule); }
.cp__seg-btn { background: transparent; border: 0; border-right: 1px solid var(--rule); padding: 10px 8px; cursor: pointer; font-family: var(--font-mono); font-size: 13px; color: var(--ink-3); }
.cp__seg-btn:last-child { border-right: 0; }
.cp__seg-btn:hover { background: var(--paper-2); }
.cp__seg-btn.is-on { background: var(--ink); color: var(--paper); }
.cp__seg-btn.is-on .katex { color: var(--paper); }
.cp__readout { display: flex; flex-direction: column; gap: 6px; padding: 8px 0 4px; }
.cp__readout-row { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 0; }
.cp__readout-row--accent { background: var(--paper-2); padding: 6px 8px; margin: 0 -8px; }
.cp__readout-row--accent .t-meta { color: var(--ink); }
.cp__readout-val { color: var(--ink); font-size: 13px; }
.cp__explore-caption { color: var(--ink-3); font-style: italic; max-width: 36ch; margin: 0; }

/* tangent plot */
.tp { background: var(--paper); }
.tp__head { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 12px; border-bottom: 1px solid var(--rule); }
.tp__head-meta { color: var(--ink-4); }
.tp__svg { display: block; width: 100%; height: auto; }
.tp__legend { display: flex; flex-wrap: wrap; gap: 18px; padding: 10px 12px; border-top: 1px solid var(--rule); }
.tp__legend > span { display: inline-flex; align-items: center; gap: 8px; }
.tp__sw { display: inline-block; width: 16px; height: 2px; }
.tp__sw--ink { background: var(--ink); }
.tp__sw--secant { background: var(--accent); }
.tp__sw--tangent { background: var(--accent); border-top: 0; height: 0; border-top: 1px dashed var(--accent); }

/* ── §3 limit table ────────────────────────────────────── */
.cp__table-wrap { margin-top: 18px; }
.cp__table-lead { color: var(--ink); margin: 0 0 14px; max-width: 70ch; }
.lt { width: 100%; border-collapse: collapse; }
.lt__h { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--rule); border-top: 2px solid var(--rule); }
.lt__row { border-bottom: 1px solid var(--rule-3); }
.lt__row--limit { border-top: 1px solid var(--rule); border-bottom: 2px solid var(--rule); background: var(--paper-2); }
.lt__c { padding: 8px 12px; color: var(--ink); font-size: 12px; }
.lt__c--em { color: var(--ink); font-weight: 500; }
.lt__c--err { color: var(--ink-4); }
.lt__c--accent { color: var(--accent); font-weight: 500; }

/* ── §4 theorems ───────────────────────────────────────── */
.cp__thm-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; margin-top: 24px; border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.cp__thm { padding: 20px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); display: flex; flex-direction: column; gap: 10px; min-height: 220px; }
.cp__thm-head { display: flex; align-items: center; gap: 10px; }
.cp__thm-title { margin: 0; }
.cp__thm-body { margin: 0; max-width: 38ch; flex: 1; }
.cp__thm-foot { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--rule-3); }
.cp__thm-ref { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); padding-bottom: 1px; font-size: 11px; }
.cp__thm-ref:hover { color: var(--accent); border-color: var(--accent); }

/* ── §5 procedures ─────────────────────────────────────── */
.cp__proc-list { display: flex; flex-direction: column; margin-top: 18px; border-top: 1px solid var(--rule); }
.cp__proc { display: grid; grid-template-columns: 56px 16px minmax(220px, 2fr) 3fr 24px; align-items: baseline; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--rule-3); text-decoration: none; color: var(--ink); transition: background 0.12s; }
.cp__proc:hover { background: var(--paper-2); }
.cp__proc-n { color: var(--ink-4); }
.cp__proc-title { margin: 0; }
.cp__proc-sub { color: var(--ink-3); }
.cp__proc-arrow { color: var(--ink-4); font-size: 16px; text-align: right; }
.cp__proc:hover .cp__proc-arrow { color: var(--accent); }

/* ── §6 embedding neighborhood ─────────────────────────── */
.en { margin-top: 18px; border: 1px solid var(--rule); }
.en__svg { display: block; width: 100%; height: auto; }
.en__legend { display: flex; gap: 14px; align-items: center; padding: 10px 16px; border-top: 1px solid var(--rule); flex-wrap: wrap; font-size: 12px; }
.en__legend > span { display: inline-flex; align-items: center; gap: 6px; }
.en__legend-sep { color: var(--ink-5); padding: 0 4px; }
.en__dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.en__dot--def { background: var(--paper); border: 1px solid var(--ink); }
.en__dot--thm { background: var(--ink); width: 10px; height: 10px; }
.en__dot--proc { background: var(--ink); border-radius: 0; }
.en__dot--ex { background: var(--paper); border: 1px solid var(--ink-3); }

/* ── footer ────────────────────────────────────────────── */
.cp__foot { display: flex; justify-content: space-between; align-items: center; padding: 24px var(--cp-pad); border-top: 2px solid var(--rule); margin-top: 24px; }
.cp__foot-l { display: flex; gap: 14px; align-items: baseline; }