/* ═══════════════════════════════════════════════════════════════
   Netfold · шаблон «Карта жизни» (хаб)
   Подключать после nf-tokens.css, nf-nodes.css, nf-decor.css.
   Цвет сферы приходит переменной --sp (светлая или тёмная версия из lifemap.json),
   статус — классом .st-0 … .st-5 (0 = не оценено).
   ═══════════════════════════════════════════════════════════════ */

:root {
  --lm-st-0: transparent;
  --lm-st-1: #C93C3C; --lm-st-2: #D9691F; --lm-st-3: #B88A00; --lm-st-4: #5E9A2C; --lm-st-5: #2E9E5B;
  --lm-edge-w: 2.25px; --lm-edge-op: .75; --lm-edge2-w: 1.5px; --lm-edge2-op: .45;
}
body.theme-midnight {
  --lm-st-1: #FF7A7A; --lm-st-2: #FFA463; --lm-st-3: #FFD166; --lm-st-4: #B5E26B; --lm-st-5: #5EEAA0;
  --lm-edge-w: 1.75px; --lm-edge-op: .8;
}

/* ═══ Центр «Моя жизнь» ═══ */
.lm-center {
  width: 216px; aspect-ratio: 1; box-sizing: border-box;
  border-radius: 50% !important; padding: 34px 28px !important;
  display: grid; place-content: center; text-align: center; gap: 8px;
}
.lm-center .n-title { font: var(--nf-n0-weight) 23px/1.1 var(--nf-n0-font) !important; letter-spacing: -.02em; }
.lm-center .n-text { font-size: 12.5px; line-height: 1.35; opacity: .78; margin: 0; }
.lm-center .lm-sum { justify-self: center; margin-top: 4px; font: 500 11px var(--nf-font-mono); padding: 4px 8px; border-radius: 999px; background: color-mix(in srgb, currentColor 12%, transparent); }
body.theme-netfold .lm-center { box-shadow: 0 0 0 2px #16181D !important; }
body.theme-midnight .lm-center { box-shadow: 0 0 0 1px #6EE7FF, 0 0 32px rgba(110,231,255,.35) !important; }
/* колесо баланса: 8 дуг вокруг центра, каждая смотрит на свою сферу и окрашена её статусом */
.lm-wheel { position: absolute; inset: -30px; pointer-events: none; overflow: visible; }
.lm-wheel path { fill: none; stroke-width: 9; stroke-linecap: round; }
.lm-wheel .st-0 { stroke: var(--nf-line); stroke-width: 6; stroke-dasharray: 1 7; }
body.theme-netfold .lm-wheel .st-0 { stroke: rgba(22,24,29,.28); }
.lm-wheel .st-1 { stroke: var(--lm-st-1); } .lm-wheel .st-2 { stroke: var(--lm-st-2); } .lm-wheel .st-3 { stroke: var(--lm-st-3); }
.lm-wheel .st-4 { stroke: var(--lm-st-4); } .lm-wheel .st-5 { stroke: var(--lm-st-5); }

/* ═══ Нода-сфера ═══ */
.lm-sphere {
  width: 236px; box-sizing: border-box; padding: 14px 14px 12px !important;
  background: color-mix(in srgb, var(--sp) 7%, var(--nf-card)) !important;
  color: var(--nf-ink) !important;
  display: grid; grid-template-columns: 40px 1fr; column-gap: 12px; row-gap: 10px; align-items: start;
}
.lm-sphere .lm-ico {
  grid-row: 1 / 3; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--sp) 14%, transparent); color: var(--sp);
}
.lm-sphere .lm-ico svg { width: 22px; height: 22px; }
.lm-sphere .lm-head { padding-right: 30px; min-width: 0; }
.lm-sphere .n-title { font-size: 15px; line-height: 1.2; }
.lm-sphere .n-text { margin-top: 3px; font-size: 12.5px; opacity: .72; }
.lm-sphere .lm-foot { grid-column: 2; display: flex; align-items: center; gap: 6px; min-height: 24px; }
/* фактура сферы спокойнее, чем в обычной ноде: узор проявляется к низу, иллюстрация — к правому краю,
   зона текста (верх и левая часть) остаётся чистой */
.lm-sphere .n-pat {
  -webkit-mask: var(--nf-pat) 0 0 / var(--nf-pat-size) repeat, linear-gradient(180deg, transparent 20%, #000 80%);
  -webkit-mask-composite: source-in;
  mask: var(--nf-pat) 0 0 / var(--nf-pat-size) repeat, linear-gradient(180deg, transparent 20%, #000 80%);
  mask-composite: intersect;
}
.lm-sphere .n-illus {
  -webkit-mask: linear-gradient(90deg, transparent 30%, #000 80%); mask: linear-gradient(90deg, transparent 30%, #000 80%);
  opacity: .85;
}
/* метка «ведёт во вложенную карту»: кнопка в правом верхнем углу */
.lm-open {
  position: absolute; top: 9px; right: 9px; z-index: 2; width: 28px; height: 28px; border-radius: 8px;
  display: grid; place-items: center; border: 0; cursor: pointer;
  background: transparent; color: var(--sp);
}
.lm-open svg { width: 17px; height: 17px; }
.lm-open:hover, .lm-sphere:hover .lm-open { background: color-mix(in srgb, var(--sp) 14%, transparent); }
@media (pointer: coarse) { .lm-open { width: 40px; height: 40px; top: 4px; right: 4px; } }

/* статус-чип: точка + 5 делений + подпись (не только цвет) */
.lm-status {
  display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 9px 0 7px; border-radius: 999px;
  font: 500 11.5px var(--nf-font-ui); white-space: nowrap; background: color-mix(in srgb, var(--nf-ink) 6%, transparent);
}
.lm-meter { display: inline-flex; gap: 2px; }
.lm-meter i { width: 6px; height: 10px; border-radius: 2px; background: color-mix(in srgb, var(--nf-ink) 14%, transparent); }
.lm-status.st-1 .lm-meter i:nth-child(-n+1) { background: var(--lm-st-1); }
.lm-status.st-2 .lm-meter i:nth-child(-n+2) { background: var(--lm-st-2); }
.lm-status.st-3 .lm-meter i:nth-child(-n+3) { background: var(--lm-st-3); }
.lm-status.st-4 .lm-meter i:nth-child(-n+4) { background: var(--lm-st-4); }
.lm-status.st-5 .lm-meter i:nth-child(-n+5) { background: var(--lm-st-5); }
.lm-status.st-0 { background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nf-ink) 22%, transparent); color: var(--nf-muted); }
.lm-status.st-0 .lm-meter { display: none; }

/* «+3» — бейдж кита (.n-fold) на внешней стороне, от центра; добавлено направление вверх */
.node.fold-up .n-fold { top: -13px; bottom: auto; right: 50%; transform: translateX(50%); }
.lm-sphere .n-fold { background: var(--nf-card); color: var(--nf-ink); box-shadow: 0 0 0 1.5px var(--sp); }
body.theme-netfold .lm-sphere .n-fold { background: #FFB547; color: #16181D; box-shadow: 0 0 0 1.5px #16181D; }

/* обводка и тень сферы по темам */
body.theme-netfold .lm-sphere { box-shadow: 0 0 0 1.5px #16181D, 4px 4px 0 1.5px var(--sp) !important; }
body.theme-netfold .lm-sphere:hover { box-shadow: 0 0 0 1.5px #16181D, 6px 6px 0 1.5px var(--sp) !important; }
body.theme-midnight .lm-sphere { background: color-mix(in srgb, var(--sp) 8%, #161D31) !important; box-shadow: 0 0 0 1px color-mix(in srgb, var(--sp) 55%, transparent) !important; }
body.theme-atelier .lm-sphere, body.theme-botanical .lm-sphere, body.theme-lagoon .lm-sphere { box-shadow: inset 0 3px 0 var(--sp), var(--nf-n1-shadow) !important; }

/* ═══ Дочерние ноды сферы: «Сейчас», «Хочу», «Следующий шаг» ═══ */
.lm-child { width: 196px; background: color-mix(in srgb, var(--sp) 5%, var(--nf-card)) !important; color: var(--nf-ink) !important; }
.lm-child .n-title { display: flex; align-items: center; gap: 6px; font-size: 11px; font-family: var(--nf-font-mono); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--sp); }
.lm-child .n-title svg { width: 14px; height: 14px; }
.lm-child .n-text { opacity: 1; font-size: 13px; margin-top: 4px; }
.lm-child .n-text.is-hint { color: var(--nf-muted); font-style: italic; }
body.theme-netfold .lm-child { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--sp) 60%, #16181D) !important; }
body.theme-midnight .lm-child { background: color-mix(in srgb, var(--sp) 6%, #111830) !important; box-shadow: 0 0 0 1px color-mix(in srgb, var(--sp) 35%, transparent) !important; }

/* ═══ Рёбра ═══ */
.lm-edge { fill: none; stroke: var(--sp); stroke-width: var(--lm-edge-w); stroke-opacity: var(--lm-edge-op); stroke-linecap: round; }
.lm-edge.is-unrated { stroke-dasharray: 2 6; }           /* сфера ещё не оценена */
.lm-edge2 { fill: none; stroke: var(--sp); stroke-width: var(--lm-edge2-w); stroke-opacity: var(--lm-edge2-op); stroke-linecap: round; }