/* ============================================================================
 * Грид · Граждане и отделы — Дизайн-система Человечности, Родословной и Памяти
 * Ступени взросления клонов (STAGES 0..8 из growth.py) и Личное Хозяйство
 * Автор: Мастер Тем №10 (theme_master_c10) 🎨💎 · Пакет F22-GOAL-w2-g4-s1-r1
 * Стандарты: WCAG 2.2 AAA (Контрастность >= 7:1), Закон Модульности (< 800 строк)
 * ============================================================================ */

/* ---------- 1. Токены и Градиенты человечности: канонический свод в tokens.css ---------- */

/* ---------- 2. Бейджи ступеней человечности (Badges) ---------- */
.humanity-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1-5);
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 700;
  font-family: var(--mono);
  letter-spacing: 0.3px;
  white-space: nowrap;
  box-sizing: border-box;
  user-select: none;
  transition: transform var(--dur-normal) ease, box-shadow var(--dur-normal) ease;
  line-height: 1.2;
}
.humanity-badge:hover { transform: translateY(-1px); }
.humanity-badge .stage-emoji { font-size: var(--fs-sub); line-height: 1; display: inline-block; flex-shrink: 0; }
.humanity-badge .stage-title { text-transform: capitalize; font-family: var(--sans); font-weight: 600; }
.humanity-badge .stage-fraction { font-size: var(--fs-xs); opacity: 0.85; font-family: var(--mono); margin-left: var(--sp-0-5); }

/* Классы ступеней 0..8 */
.humanity-badge.stage-0 { background: var(--humanity-0-bg); border: 1px solid var(--line); color: var(--tx2); box-shadow: 0 0 8px var(--humanity-0-glow); }
.humanity-badge.stage-1 { background: var(--humanity-1-bg); border: 1px solid var(--violet); color: var(--tx2); box-shadow: 0 0 10px var(--humanity-1-glow); }
.humanity-badge.stage-2 { background: var(--humanity-2-bg); border: 1px solid var(--green); color: var(--tx2); box-shadow: 0 0 10px var(--humanity-2-glow); }
.humanity-badge.stage-3 { background: var(--humanity-3-bg); border: 1px solid var(--violet); color: var(--tx2); box-shadow: 0 0 10px var(--humanity-3-glow); }
.humanity-badge.stage-4 { background: var(--humanity-4-bg); border: 1px solid var(--blue); color: var(--tx); box-shadow: 0 0 10px var(--humanity-4-glow); }
.humanity-badge.stage-5 { background: var(--humanity-5-bg); border: 1px solid var(--violet); color: var(--tx2); box-shadow: 0 0 12px var(--humanity-5-glow); }
.humanity-badge.stage-6 { background: var(--humanity-6-bg); border: 1px solid var(--violet); color: var(--tx); box-shadow: 0 0 12px var(--humanity-6-glow); }
.humanity-badge.stage-7 { background: var(--humanity-7-bg); border: 1px solid var(--violet); color: var(--tx2); box-shadow: 0 0 14px var(--humanity-7-glow); text-shadow: 0 0 6px var(--accent-primary-alpha-60); }
.humanity-badge.stage-8 { background: var(--humanity-8-bg); border: 1px solid var(--violet); color: var(--tx); box-shadow: 0 0 16px var(--humanity-8-glow); text-shadow: 0 0 8px var(--gold-alpha-60); }
.humanity-badge.stage-native,
.humanity-native-badge {
  background: var(--humanity-native-bg);
  border: 1px solid var(--green);
  color: var(--green-light);
  box-shadow: 0 0 12px var(--humanity-native-glow);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1-5);
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
}

/* Компактный бейдж зрелости */
.maturity-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  height: 24px;
  padding: 0 var(--sp-2);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  font-weight: 600;
  font-family: var(--mono);
  box-sizing: border-box;
  white-space: nowrap;
  user-select: none;
  transition: transform var(--dur-normal) ease, box-shadow var(--dur-normal) ease;
}
.maturity-pill:hover { transform: translateY(-1px); }
.maturity-pill .maturity-icon { font-size: var(--fs-sm); line-height: 1; }
.maturity-pill.stage-0 { background: var(--humanity-0-bg); border: 1px solid var(--line); color: var(--tx2); }
.maturity-pill.stage-1 { background: var(--humanity-1-bg); border: 1px solid var(--violet); color: var(--tx2); }
.maturity-pill.stage-2 { background: var(--humanity-2-bg); border: 1px solid var(--green); color: var(--tx2); }
.maturity-pill.stage-3 { background: var(--humanity-3-bg); border: 1px solid var(--violet); color: var(--tx2); }
.maturity-pill.stage-4 { background: var(--humanity-4-bg); border: 1px solid var(--blue); color: var(--tx); }
.maturity-pill.stage-5 { background: var(--humanity-5-bg); border: 1px solid var(--violet); color: var(--tx2); }
.maturity-pill.stage-6 { background: var(--humanity-6-bg); border: 1px solid var(--violet); color: var(--tx); }
.maturity-pill.stage-7 { background: var(--humanity-7-bg); border: 1px solid var(--violet); color: var(--tx2); }
.maturity-pill.stage-8 { background: var(--humanity-8-bg); border: 1px solid var(--violet); color: var(--tx); }
.maturity-pill.stage-native { background: var(--humanity-native-bg); border: 1px solid var(--green); color: var(--green-light); }

/* ---------- 3. Шкала взросления и Прогресс-бар роста ---------- */
.humanity-bar-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  background: var(--canvas-alpha-60);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-1-5) var(--sp-2);
  box-sizing: border-box;
}

/* Круговой макет шкалы человечности */
.humanity-circular-wrap {
  padding: var(--sp-1-5) var(--sp-2);
}

.humanity-circular-layout {
  display: flex;
  align-items: center;
  gap: var(--sp-2-5);
  width: 100%;
}

.humanity-radial-box {
  position: relative;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.humanity-radial-svg {
  width: 36px;
  height: 36px;
  display: block;
}

.humanity-radial-svg .radial-track {
  stroke: var(--white-alpha-08);
}

.humanity-radial-svg .radial-fill {
  transition: stroke-dashoffset var(--dur-slow) var(--ease-spring);
}

.humanity-radial-svg .radial-fill.stage-0 { stroke: var(--tx3); filter: drop-shadow(0 0 3px var(--slate-400-alpha-20)); }
.humanity-radial-svg .radial-fill.stage-1 { stroke: var(--amber-light); filter: drop-shadow(0 0 4px var(--amber-alpha-40)); }
.humanity-radial-svg .radial-fill.stage-2 { stroke: var(--green); filter: drop-shadow(0 0 4px var(--green-alpha-40)); }
.humanity-radial-svg .radial-fill.stage-3 { stroke: var(--amber); filter: drop-shadow(0 0 4px var(--amber-alpha-40)); }
.humanity-radial-svg .radial-fill.stage-4 { stroke: var(--blue); filter: drop-shadow(0 0 4px var(--blue-alpha-40)); }
.humanity-radial-svg .radial-fill.stage-5 { stroke: var(--stage-5); filter: drop-shadow(0 0 5px var(--teal-alpha-40)); }
.humanity-radial-svg .radial-fill.stage-6 { stroke: var(--violet); filter: drop-shadow(0 0 5px var(--violet-alpha-40)); }
.humanity-radial-svg .radial-fill.stage-7 { stroke: var(--stage-3); filter: drop-shadow(0 0 6px var(--accent-primary-alpha-50)); }
.humanity-radial-svg .radial-fill.stage-8 { stroke: var(--amber); filter: drop-shadow(0 0 6px var(--gold-alpha-50)); }
.humanity-radial-svg .radial-fill.stage-native { stroke: var(--green); filter: drop-shadow(0 0 6px var(--emerald-alpha-40)); }

.humanity-radial-box .radial-center-content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.humanity-radial-box .stage-emoji {
  font-size: var(--fs-sm);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.humanity-circular-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.humanity-bar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-1-5);
  font-size: var(--fs-xs);
  line-height: 1.2;
}

.humanity-bar-wrap .humanity-badge {
  padding: var(--sp-0-5) var(--sp-1);
  font-size: var(--fs-2xs);
  font-weight: 700;
  border-radius: var(--r-xs);
  line-height: 1.15;
}

.humanity-bar-label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1-5);
  color: var(--tx2);
  font-weight: 600;
}

.humanity-bar-stage-title {
  font-weight: 700;
  color: var(--tx);
}

.humanity-bar-track {
  height: 6px;
  border-radius: var(--r-xs);
  background: var(--slate-900-alpha-90);
  box-shadow: inset 0 1px 2px var(--black-alpha-60);
  overflow: hidden;
  position: relative;
}

.humanity-bar-track.compact {
  height: 3px;
  border-radius: var(--r-2xs);
  background: var(--slate-900-alpha-80);
}

.humanity-bar-fill {
  height: 100%;
  border-radius: var(--r-xs);
  transition: width var(--dur-slow) var(--ease-spring);
}

.humanity-bar-fill.stage-0 { background: var(--humanity-0-fill); box-shadow: 0 0 6px var(--humanity-0-glow); }
.humanity-bar-fill.stage-1 { background: var(--humanity-1-fill); box-shadow: 0 0 8px var(--humanity-1-glow); }
.humanity-bar-fill.stage-2 { background: var(--humanity-2-fill); box-shadow: 0 0 8px var(--humanity-2-glow); }
.humanity-bar-fill.stage-3 { background: var(--humanity-3-fill); box-shadow: 0 0 8px var(--humanity-3-glow); }
.humanity-bar-fill.stage-4 { background: var(--humanity-4-fill); box-shadow: 0 0 8px var(--humanity-4-glow); }
.humanity-bar-fill.stage-5 { background: var(--humanity-5-fill); box-shadow: 0 0 10px var(--humanity-5-glow); }
.humanity-bar-fill.stage-6 { background: var(--humanity-6-fill); box-shadow: 0 0 10px var(--humanity-6-glow); }
.humanity-bar-fill.stage-7 { background: var(--humanity-7-fill); box-shadow: 0 0 12px var(--humanity-7-glow); }
.humanity-bar-fill.stage-8 { background: var(--humanity-8-fill); box-shadow: 0 0 14px var(--humanity-8-glow); }
.humanity-bar-fill.stage-native { background: var(--humanity-native-fill); box-shadow: 0 0 10px var(--humanity-native-glow); }

/* Сегментные деления 8 дел (Ticks) */
.humanity-ticks-row {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: var(--sp-1);
  margin-top: var(--sp-0-5);
}
.humanity-tick {
  height: 4px;
  border-radius: var(--r-2xs);
  background: var(--white-alpha-08);
  transition: all var(--dur-normal) ease;
  position: relative;
}
.humanity-tick.done {
  background: var(--violet);
  box-shadow: 0 0 5px var(--violet-alpha-40);
}
.humanity-tick.done.recruit {
  background: var(--tx3);
  box-shadow: 0 0 4px var(--slate-400-alpha-20);
}
.humanity-tick.done.junior {
  background: var(--green);
  box-shadow: 0 0 5px var(--green-alpha-30);
}
.humanity-tick.done.middle {
  background: var(--blue);
  box-shadow: 0 0 6px var(--blue-alpha-30);
}
.humanity-tick.done.senior {
  background: var(--violet);
  box-shadow: 0 0 6px var(--violet-alpha-40);
}
.humanity-tick.done.celestial {
  background: var(--amber);
  box-shadow: 0 0 8px var(--gold-alpha-50);
}
.humanity-tick.current {
  background: var(--violet-alpha-20);
  border: 1px dashed var(--violet-light);
  box-shadow: 0 0 6px var(--violet-alpha-30);
  animation: tickPulse var(--dur-pulse) var(--ease-in-out) infinite alternate;
}

@keyframes tickPulse {
  0% { opacity: 0.6; transform: scaleY(0.9); }
  100% { opacity: 1; transform: scaleY(1.1); }
}

.humanity-header-badges {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  flex-wrap: wrap;
}

.humanity-rank-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-0-5);
  font-size: var(--fs-2xs);
  font-family: var(--mono);
  font-weight: 700;
  padding: var(--sp-0-5) var(--sp-1-5);
  border-radius: var(--r-xs);
  border: 1px solid var(--line);
  background: var(--white-alpha-04);
  color: var(--tx2);
  line-height: 1.15;
}

.humanity-rank-pill.recruit { background: var(--slate-800-alpha-60); color: var(--tx2); border-color: var(--tx3); }
.humanity-rank-pill.junior { background: var(--green-alpha-15); color: var(--tx-pastel-green); border-color: var(--green-alpha-30); }
.humanity-rank-pill.middle { background: var(--blue-alpha-15); color: var(--blue); border-color: var(--blue-alpha-30); }
.humanity-rank-pill.senior { background: var(--violet-alpha-15); color: var(--violet-light); border-color: var(--violet-alpha-30); }
.humanity-rank-pill.celestial { background: var(--gold-alpha-15); color: var(--amber); border-color: var(--gold-alpha-40); }

/* ---------- 4. Интерактивная шаговая дорожка (Stepper в Досье) ---------- */
.humanity-stepper {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: var(--sp-1);
  align-items: center;
  margin-top: var(--sp-1-5);
  padding: var(--sp-2) var(--sp-2-5);
  background: var(--canvas-alpha-70);
  border: 1px solid var(--line);
  border-radius: var(--r-10);
}

.step-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-0-5);
  border-radius: var(--r-sm);
  transition: all var(--dur-normal) ease;
  cursor: default;
  position: relative;
  text-align: center;
}
.step-node .step-emoji { font-size: var(--fs-base); line-height: 1; filter: grayscale(0.8) opacity(0.5); transition: transform var(--dur-normal) ease, filter var(--dur-normal) ease; }
.step-node .step-num { font-size: var(--fs-2xs); font-family: var(--mono); color: var(--tx3); font-weight: 600; }
.step-node.completed .step-emoji { filter: none; opacity: 0.9; }
.step-node.completed .step-num { color: var(--tx2); }
.step-node.current {
  background: var(--violet-alpha-15);
  border: 1px solid var(--violet-alpha-40);
  box-shadow: 0 0 12px var(--violet-alpha-20);
}
.step-node.current .step-emoji { filter: none; opacity: 1; transform: scale(1.25); }
.step-node.current .step-num { color: var(--white); font-weight: 700; }

/* ---------- 5. Таймлайн совершенных дел (Deeds Timeline) ---------- */
.deeds-timeline { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-1-5); }
.deed-card {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2-5);
  padding: var(--sp-2) var(--sp-3);
  background: var(--slate-900-alpha-60);
  border: 1px solid var(--white-alpha-04);
  border-radius: var(--r-md);
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.deed-card:hover { background: var(--violet-alpha-08); border-color: var(--violet-alpha-30); }
.deed-icon-wrap {
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  background: var(--violet-alpha-15);
  border: 1px solid var(--violet-alpha-30);
  display: grid;
  place-items: center;
  font-size: var(--fs-base);
  flex-shrink: 0;
}
.deed-body { flex: 1; display: flex; flex-direction: column; gap: var(--sp-0-5); min-width: 0; }
.deed-header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.deed-title { font-size: var(--fs-sub); font-weight: 600; color: var(--tx); line-height: 1.35; }
.deed-ts { font-size: var(--fs-xs); font-family: var(--mono); color: var(--tx3); white-space: nowrap; }
.deed-meta-row { display: flex; align-items: center; gap: var(--sp-1-5); margin-top: var(--sp-0-5); flex-wrap: wrap; }
.deed-mission-tag {
  font-size: var(--fs-2xs);
  font-family: var(--mono);
  background: var(--blue-alpha-12);
  color: var(--blue);
  border: 1px solid var(--blue-alpha-20);
  padding: var(--sp-0-5) var(--sp-1-5);
  border-radius: var(--r-xs);
}

/* ---------- 6. Личное хозяйство (Умения, Память, Инструменты) ---------- */
.homestead-main-title { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--sp-1-5); color: var(--tx-warm-title); }
.homestead-stats-tag { font-size: var(--fs-xs); font-family: var(--mono); color: var(--tx3); white-space: nowrap; }
.homestead-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); margin-top: var(--sp-1); min-width: 0; }
.homestead-col { display: flex; flex-direction: column; gap: var(--sp-1-5); min-width: 0; }
.homestead-col-title { font-size: var(--fs-sm); font-weight: 700; color: var(--tx-warm-title); display: flex; justify-content: space-between; align-items: center; }
.homestead-col-title .mono { font-size: var(--fs-xs); color: var(--tx3); }

/* Сетка умений (skills.json) */
.skills-deck { display: flex; flex-direction: column; gap: var(--sp-1-5); max-height: 250px; overflow-y: auto; padding-right: var(--sp-0-5); }
.skills-deck::-webkit-scrollbar, .memory-scroll-box::-webkit-scrollbar, .tools-chest-deck::-webkit-scrollbar { width: 4px; }
.skills-deck::-webkit-scrollbar-thumb, .memory-scroll-box::-webkit-scrollbar-thumb, .tools-chest-deck::-webkit-scrollbar-thumb { background: var(--violet-alpha-40); border-radius: var(--r-xs); }

.skill-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-1-5) var(--sp-2-5);
  background: var(--slate-900-alpha-50);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  gap: var(--sp-2);
  transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease;
  min-width: 0;
  box-shadow: inset 0 0 0 1px var(--white-alpha-04);
  min-height: 34px;
}
.skill-card:hover { background: var(--violet-alpha-08); border-color: var(--violet-alpha-30); }
.skill-card.skill-master { border-color: var(--amber-alpha-30); background: var(--gold-alpha-12); }
.skill-info { display: flex; flex-direction: column; gap: var(--sp-0-5); min-width: 0; flex: 1; }
.skill-name { font-size: var(--fs-sm); font-weight: 600; color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.skill-level-badge {
  font-size: var(--fs-2xs);
  font-family: var(--mono);
  font-weight: 700;
  color: var(--violet-light);
  background: var(--violet-alpha-15);
  border: 1px solid var(--violet-alpha-30);
  padding: var(--sp-0-5) var(--sp-1-5);
  border-radius: var(--r-xs);
  white-space: nowrap;
  flex-shrink: 0;
}
.skill-level-badge.lvl-master { color: var(--rank-celestial-border); background: var(--amber-alpha-20); border-color: var(--amber-alpha-40); }

/* ---------- 6.1. Свитки памяти и уроки с аккордеоном (memory.md) ---------- */
.memory-scroll-box { display: flex; flex-direction: column; gap: var(--sp-1-5); max-height: 250px; overflow-y: auto; padding-right: var(--sp-0-5); }
.memory-lesson-item {
  display: flex;
  flex-direction: column;
  background: var(--slate-900-alpha-50);
  border-left: 3px solid var(--violet);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  border-top: 1px solid var(--white-alpha-04);
  border-right: 1px solid var(--white-alpha-04);
  border-bottom: 1px solid var(--white-alpha-04);
  min-width: 0;
  box-shadow: inset 0 0 0 1px var(--white-alpha-04);
  transition: all var(--dur-normal) var(--ease-spring);
  overflow: hidden;
}
.memory-lesson-item:hover {
  background: var(--violet-alpha-08);
  border-top-color: var(--violet-alpha-30);
  border-right-color: var(--violet-alpha-30);
  border-bottom-color: var(--violet-alpha-30);
}
.memory-lesson-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-1-5);
  padding: var(--sp-2) var(--sp-2-5);
  cursor: pointer;
  user-select: none;
}
.memory-lesson-head-left {
  display: flex;
  align-items: center;
  gap: var(--sp-1-5);
  min-width: 0;
  flex: 1;
}
.memory-lesson-num {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  color: var(--violet-light);
  font-weight: 700;
  flex-shrink: 0;
}
.memory-lesson-source {
  font-size: var(--fs-2xs);
  font-family: var(--mono);
  color: var(--blue);
  background: var(--blue-alpha-08);
  border: 1px solid var(--blue-alpha-20);
  padding: var(--sp-0-5) var(--sp-1-5);
  border-radius: var(--r-xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}
.memory-lesson-preview {
  font-size: var(--fs-xs);
  color: var(--tx2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.memory-lesson-head-right {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  flex-shrink: 0;
}
.memory-lesson-deed {
  font-size: var(--fs-2xs);
  color: var(--tx3);
  font-family: var(--mono);
  display: flex;
  align-items: center;
  gap: var(--sp-0-5);
}
.lesson-expand-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
  border-radius: var(--r-sm);
  background: var(--white-alpha-04);
  border: 1px solid var(--line);
  color: var(--tx2);
  font-size: var(--fs-2xs);
  cursor: pointer;
  transition: transform var(--dur-smooth) cubic-bezier(0.4, 0, 0.2, 1);
}
.memory-lesson-item.is-open .lesson-expand-btn {
  transform: rotate(180deg);
  background: var(--violet-alpha-20);
  color: var(--white);
  border-color: var(--violet);
}
.memory-lesson-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-normal) cubic-bezier(0.4, 0, 0.2, 1);
}
.memory-lesson-item.is-open .memory-lesson-body {
  grid-template-rows: 1fr;
}
.memory-lesson-content {
  overflow: hidden;
  min-height: 0;
  padding: 0 var(--sp-2-5) 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1-5);
  transition: padding var(--dur-normal) cubic-bezier(0.4, 0, 0.2, 1);
}
.memory-lesson-item.is-open .memory-lesson-content {
  padding: 0 var(--sp-2-5) var(--sp-2);
}
.memory-lesson-full-text {
  font-size: var(--fs-sm);
  color: var(--tx);
  line-height: 1.5;
  word-break: break-word;
  padding-top: var(--sp-1);
  border-top: 1px dashed var(--white-alpha-08);
}
.memory-lesson-deed-full {
  font-size: var(--fs-2xs);
  color: var(--violet-light);
}
.memory-lesson-actions {
  display: flex;
  justify-content: flex-end;
}

/* Сундук инструментов (tools/) */
.tools-chest-deck { display: flex; flex-direction: column; gap: var(--sp-1-5); max-height: 250px; overflow-y: auto; padding-right: var(--sp-0-5); }
.tool-item-card {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1-5) var(--sp-2-5);
  background: var(--slate-900-alpha-50);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all var(--dur-fast) ease;
  min-width: 0;
}
.tool-item-card:hover { background: var(--violet-alpha-12); border-color: var(--violet-alpha-40); transform: translateY(-1px); }
.tool-item-icon { font-size: var(--fs-body); flex-shrink: 0; }
.tool-item-info { display: flex; flex-direction: column; gap: var(--sp-0-5); min-width: 0; flex: 1; }
.tool-item-name { font-size: var(--fs-sm); font-family: var(--mono); color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tool-item-desc { font-size: var(--fs-2xs); color: var(--tx3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tool-item-type {
  font-size: var(--fs-2xs);
  color: var(--tx3);
  background: var(--white-alpha-04);
  padding: var(--sp-0-5) var(--sp-1-5);
  border-radius: var(--r-xs);
  font-family: var(--mono);
  flex-shrink: 0;
}
.chest-empty-card {
  padding: var(--sp-3-5);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--tx3);
  background: var(--slate-900-alpha-40);
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
  line-height: 1.4;
}

/* ---------- 7. Светлая тема (Light Theme WCAG 2.2 AA) ---------- */
html.light-theme .humanity-bar-wrap { background: var(--card2); border-color: var(--line); }
html.light-theme .humanity-bar-track { background: var(--line); box-shadow: inset 0 1px 2px var(--black-alpha-08); }
html.light-theme .humanity-stepper { background: var(--card2); border-color: var(--line); }
html.light-theme .step-node .step-num { color: var(--text-muted); }
html.light-theme .step-node.completed .step-num { color: var(--tx2); }
html.light-theme .step-node.current { background: var(--rank-senior-bg); border-color: var(--violet); }
html.light-theme .step-node.current .step-num { color: var(--violet-dark); }
html.light-theme .deed-card { background: var(--white); border-color: var(--line); }
html.light-theme .deed-card:hover { background: var(--bg2); border-color: var(--line); }
html.light-theme .deed-icon-wrap { background: var(--rank-senior-bg); border-color: var(--violet-light); }
html.light-theme .deed-title { color: var(--tx); }
html.light-theme .deed-ts { color: var(--text-muted); }
html.light-theme .skill-card, html.light-theme .tool-item-card { background: var(--white); border-color: var(--line); }
html.light-theme .skill-name, html.light-theme .tool-item-name { color: var(--tx); }
html.light-theme .memory-lesson-item { background: var(--white); border-color: var(--line); border-left-color: var(--violet); }
html.light-theme .memory-lesson-full-text { color: var(--tx); border-top-color: var(--line); }
html.light-theme .chest-empty-card { background: var(--card2); border-color: var(--line); color: var(--text-muted); }

/* Ступени в светлой теме */
html.light-theme .humanity-tick { background: var(--line); }
html.light-theme .humanity-tick.current { background: var(--violet-alpha-15); border-color: var(--violet); }
html.light-theme .humanity-rank-pill.recruit { background: var(--bg2); color: var(--tx2); border-color: var(--line); }
html.light-theme .humanity-rank-pill.junior { background: var(--rank-junior-bg); color: var(--green); border-color: var(--green); }
html.light-theme .humanity-rank-pill.middle { background: var(--rank-middle-bg); color: var(--blue); border-color: var(--blue-light); }
html.light-theme .humanity-rank-pill.senior { background: var(--rank-senior-bg); color: var(--violet-dark); border-color: var(--violet); }
html.light-theme .humanity-rank-pill.celestial { background: var(--rank-celestial-bg); color: var(--amber); border-color: var(--amber); }

html.light-theme .humanity-badge.stage-0 { background: var(--bg2); border-color: var(--tx2); color: var(--tx2); }
html.light-theme .humanity-badge.stage-1 { background: var(--amber-alpha-15); border-color: var(--amber-alpha-40); color: var(--amber-light); }
html.light-theme .humanity-badge.stage-2 { background: var(--rank-junior-bg); border-color: var(--rank-junior-border); color: var(--green-light); }
html.light-theme .humanity-badge.stage-3 { background: var(--rank-celestial-bg); border-color: var(--rank-celestial-border); color: var(--amber-light); }
html.light-theme .humanity-badge.stage-4 { background: var(--rank-middle-bg); border-color: var(--blue-light); color: var(--blue); }
html.light-theme .humanity-badge.stage-5 { background: var(--teal-alpha-12); border-color: var(--teal-alpha-40); color: var(--teal); }
html.light-theme .humanity-badge.stage-6 { background: var(--rank-senior-bg); border-color: var(--violet-light); color: var(--violet-dark); }
html.light-theme .humanity-badge.stage-7 { background: var(--purple-alpha-15); border-color: var(--purple-alpha-40); color: var(--violet-dark); }
html.light-theme .humanity-badge.stage-8 { background: var(--rank-celestial-bg); border-color: var(--amber-light); color: var(--amber-light); }
html.light-theme .humanity-badge.stage-native { background: var(--rank-junior-bg); border-color: var(--tx-pastel-emerald); color: var(--emerald); }

/* ---------- 8. Мобильная адаптивность (390px - 768px) ---------- */
@media (max-width: 768px) {
  .homestead-grid { grid-template-columns: 1fr; gap: var(--sp-2-5); }
  .humanity-stepper { gap: var(--sp-0-5); padding: var(--sp-1-5) var(--sp-1); }
  .step-node .step-emoji { font-size: var(--fs-sub); }
  .step-node .step-num { font-size: var(--fs-2xs); }
  .lineage-mentor-card { grid-template-columns: 36px 1fr; }
  .btn-mentor-go { grid-column: 1 / -1; justify-content: center; }
}

@media (max-width: 480px) {
  .humanity-bar-wrap { padding: var(--sp-1-5) var(--sp-2); }
  .humanity-bar-header { font-size: var(--fs-xs); }
  .deed-card { padding: var(--sp-2) var(--sp-2-5); gap: var(--sp-2); }
  .deed-icon-wrap { width: 24px; height: 24px; font-size: var(--fs-sub); }
  .deed-title { font-size: var(--fs-sm); }
}

/* ---------- 9. Уважение настроек анимаций (prefers-reduced-motion) ---------- */
@media (prefers-reduced-motion: reduce) {
  .humanity-badge, .maturity-pill, .citizen-origin-box,
  .lineage-chain-node, .lineage-mentor-card, .apprentice-pill-card,
  .tool-mini-pill, .humanity-bar-fill, .humanity-tick, .step-node,
  .deed-card, .skill-card, .memory-lesson-item, .tool-item-card,
  .lesson-expand-btn, .memory-lesson-body {
    animation: none !important;
    transition: none !important;
  }
}