/* ============================================================
   САМОСТЬ · ПУТЬ ГЕРОЯ · СПИРАЛЬ — только уникальные контент-блоки.
   Каркас (.reading/.reading-sidebar), hero и типографика — общие
   из reading.css. Локальные переменные ниже маплены на систему,
   акцент идёт через --level. Поддерживает тёмную тему.
   ============================================================ */
:root{
  --ink:hsl(var(--foreground));
  --ink-soft:hsl(var(--foreground) / .82);
  --ink-mute:hsl(var(--muted-fg));
  --paper:hsl(var(--background));
  --paper-deep:hsl(var(--muted-bg));
  --paper-warm:hsl(var(--card));
  --rule:hsl(var(--border));
  --rule-soft:hsl(var(--border));
  --gold:var(--level);
  --gold-deep:var(--level);
  --crimson:var(--red);
  --indigo:var(--blue);
  --moss:var(--green);
}

/* кружок уровня в пунктах сайдбара */
.nav-level-dot{
  display:inline-block;width:9px;height:9px;border-radius:50%;
  margin-right:8px;vertical-align:middle;box-shadow:0 0 0 1px hsl(var(--border))}

/* номер раздела «— 01 —» над заголовком (h2 — из reading.css) */
.section-num{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.15em;
  color:var(--level);margin-bottom:.6rem;display:block}

/* Pull quote */
.pull{
  margin:36px 0;padding:24px 32px;border-left:3px solid var(--level);
  background:color-mix(in srgb,var(--level) 6%,transparent);
  font-style:italic;font-size:1.25rem;line-height:1.45;color:var(--ink-soft)}

/* Inline note */
/* .note — в архив (0 использований, коллизия имени с berne.css) → archive.css */

/* Таблицы — единый компонент из reading.css (.table-keycol/.table-striped при нужде) */

/* ===== TWO-COLUMN + SHADOW CARD ===== */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin:24px 0}
@media(max-width:800px){.two-col{grid-template-columns:1fr}}

.shadow-card{padding:24px;border:1px solid var(--rule-soft);
  background:var(--paper-warm);position:relative;border-radius:var(--radius)}
.shadow-card::before{content:attr(data-num);font-family:var(--font-mono);
  font-size:.62rem;letter-spacing:.15em;color:var(--level);display:block;margin-bottom:8px}
.shadow-card h5{font-family:var(--font-display);font-size:1.25rem;font-weight:600;
  margin-bottom:12px;color:var(--ink)}
.shadow-card p{font-size:.9rem;margin-bottom:0;line-height:1.55;color:var(--ink-soft)}

/* ===== PHASE INFOGRAPHIC ===== */
.phases-graphic{margin:40px 0;padding:32px 0;position:relative}
.phases-track{display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative}
.phases-track::before{content:'';position:absolute;left:10%;right:10%;top:38px;height:1px;
  background:linear-gradient(to right,var(--rule) 0%,var(--level) 50%,var(--rule) 100%);z-index:0}
.phase-cell{padding:0 14px;text-align:center;position:relative;z-index:1}
.phase-greek{font-family:var(--font-display);font-size:56px;font-weight:600;line-height:1;
  font-style:italic;width:76px;height:76px;border-radius:50%;background:var(--paper);
  border:1.5px solid hsl(var(--foreground));display:flex;align-items:center;justify-content:center;
  margin:0 auto 18px;color:var(--ink)}
.phase-cell:nth-child(3) .phase-greek{background:hsl(var(--foreground));color:var(--paper);
  box-shadow:0 0 0 4px var(--paper),0 0 0 5px var(--level)}
.phase-name{font-family:var(--font-mono);font-size:.68rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--level);margin-bottom:8px}
.phase-title{font-family:var(--font-display);font-size:1.25rem;font-weight:600;margin-bottom:12px;
  color:var(--ink);line-height:1.2}
.phase-desc{font-size:.75rem;color:var(--ink-mute);line-height:1.5}

/* ===== ISOMORPHISM CARDS ===== */
.iso-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:28px 0}
/* .iso-row — в архив (0 использований) → archive.css */
.iso-cell{padding:14px 12px;background:var(--paper-warm);border:1px solid var(--rule-soft);
  font-size:.78rem;line-height:1.4}
.iso-cell.head{background:hsl(var(--foreground));color:var(--paper);font-weight:600;
  font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;text-align:center}
.iso-cell.lead{font-family:var(--font-display);font-size:1.5rem;font-style:italic;font-weight:600;
  text-align:center;background:var(--paper-deep)}

/* ===== SPIRAL DIAGRAM ===== */
.spiral-section{margin:50px 0;padding:40px;background:var(--paper-warm);
  border:1px solid var(--rule-soft);border-radius:var(--radius-lg)}
.spiral-figure{display:grid;grid-template-columns:1fr 1.2fr;gap:40px;align-items:center}
@media(max-width:800px){.spiral-figure{grid-template-columns:1fr}}
.spiral-svg{width:100%;height:auto;max-width:360px;margin:0 auto;display:block}
.spiral-legend h4{margin-top:0}
.tier-label{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.15em;
  color:var(--ink-mute);margin:16px 0 8px}
.tier-label:first-child{margin-top:0}
.tier-list{list-style:none;margin:0;padding:0}
.tier-list li{font-size:.82rem;padding:6px 0;color:var(--ink-soft);display:flex;
  align-items:center;gap:12px;border-bottom:1px solid var(--rule-soft)}
.tier-list li:last-child{border-bottom:none}
.tier-list .dot{width:12px;height:12px;border-radius:50%;flex-shrink:0;box-shadow:0 0 0 1px hsl(var(--border))}
.tier-list b{font-weight:600;color:var(--ink);width:100px;font-size:.82rem}
.tier-list .desc{color:var(--ink-mute);font-size:.78rem;flex:1}

/* ===== LEVEL CARDS ===== */
.self-level-card{margin:32px 0;border:1px solid var(--rule);background:var(--paper-warm);
  position:relative;overflow:hidden;border-radius:var(--radius)}
.level-header{padding:28px 32px 22px;border-bottom:1px solid var(--rule-soft);position:relative}
.level-header::before{content:'';position:absolute;left:0;top:0;bottom:0;width:6px;
  background:var(--level-color,var(--level))}
.level-eyebrow{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.2em;
  color:var(--ink-mute);margin-bottom:6px}
.level-title{font-family:var(--font-display);font-size:1.875rem;font-weight:600;
  margin-bottom:4px;color:var(--ink)}
.level-subtitle{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--level-color,var(--level));font-weight:600}
.level-essence{font-family:var(--font-display);font-size:1.18rem;font-style:italic;line-height:1.5;
  color:var(--ink-soft);padding:22px 32px;background:var(--paper-deep);border-bottom:1px solid var(--rule-soft)}
.level-body{padding:24px 32px 28px}
.level-body h4{margin-top:24px}
.level-body h4:first-child{margin-top:0}
.level-body p{font-size:1.0625rem;line-height:1.6}
.level-body details{margin-top:20px;border-top:1px dashed var(--rule);padding-top:18px}
.level-body details summary{cursor:pointer;font-family:var(--font-mono);font-size:.72rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--level);list-style:none;
  display:flex;align-items:center;gap:8px;padding:6px 0}
.level-body details summary::-webkit-details-marker{display:none}
.level-body details summary::before{content:'+';font-family:var(--font-mono);font-size:1rem;
  color:var(--level);width:16px;display:inline-block}
.level-body details[open] summary::before{content:'−'}
.level-body details[open] summary{margin-bottom:12px}

.transitions{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:24px;border:1px solid var(--rule-soft)}
@media(max-width:700px){.transitions{grid-template-columns:1fr}}
.trans-cell{padding:18px 22px}
.trans-cell:first-child{border-right:1px solid var(--rule-soft)}
@media(max-width:700px){.trans-cell:first-child{border-right:none;border-bottom:1px solid var(--rule-soft)}}
.trans-cell h5{font-family:var(--font-mono);font-size:.68rem;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--level);margin-bottom:8px}
.trans-cell p{font-size:.95rem;line-height:1.55;margin:0}

.coach-list{list-style:none;margin:0;padding:0}
.coach-list li{padding:12px 0 12px 32px;border-bottom:1px solid var(--rule-soft);
  font-size:.9rem;line-height:1.55;position:relative}
.coach-list li:last-child{border-bottom:none}
.coach-list li::before{content:'⊙';position:absolute;left:0;top:12px;color:var(--level);font-size:1rem}
.coach-list li b{color:var(--ink);display:block;margin-bottom:2px}

/* ===== JOURNEY ARC (драм-блок) ===== */
.journey-arc{margin:40px 0;padding:36px 32px;background:hsl(var(--primary));
  color:hsl(var(--primary-fg));position:relative;border-radius:var(--radius)}
.journey-arc h3{color:hsl(var(--primary-fg));margin-top:0}
.journey-stages{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:24px}
@media(max-width:800px){.journey-stages{grid-template-columns:repeat(2,1fr)}}
.j-stage{border-top:2px solid var(--level);padding-top:14px}
.j-stage .num{font-family:var(--font-mono);font-size:.68rem;color:var(--level);
  letter-spacing:.15em;margin-bottom:6px}
.j-stage h5{font-family:var(--font-display);font-size:1.18rem;font-weight:600;font-style:italic;
  margin-bottom:8px;color:hsl(var(--primary-fg))}
.j-stage p{font-size:.78rem;line-height:1.5;color:hsl(var(--primary-fg) / .75);margin:0}

/* ===== CONIUNCTIO TABLE ===== */
.coniunctio-table{margin:32px 0}
.coniunctio-table table{background:var(--paper)}
.coniunctio-table .light-pole{color:var(--moss);font-style:italic}
.coniunctio-table .dark-pole{color:var(--crimson);font-style:italic}
.coniunctio-table .third{color:var(--level);font-weight:600}
.coniunctio-table .arrow{display:inline-block;color:var(--level);margin:0 6px}

/* ===== COLOPHON ===== */
.colophon{margin-top:100px;padding-top:32px;border-top:1px solid var(--rule);
  font-size:.75rem;color:var(--ink-mute);letter-spacing:.05em}
.colophon b{color:var(--ink);font-weight:600}

/* ===== GLOSSARY ===== */
.glossary{display:grid;grid-template-columns:1fr;gap:14px;margin-top:24px}
.gloss-item{padding:14px 0;border-bottom:1px solid var(--rule-soft)}
.gloss-item dt{font-family:var(--font-display);font-size:1.18rem;font-style:italic;font-weight:600;
  color:var(--ink);margin-bottom:4px}
.gloss-item dd{font-size:.9rem;line-height:1.55;color:var(--ink-soft)}