/* MATRIX V1.1 — оформление в семье раздела PERSON/TARO: цветное поле снаружи,
   содержимое на белом холсте .wire, внутри холста свой контентный контейнер.
   Схема расчёта собственная: кольцо позиций вокруг центра, узлы — настоящие
   кнопки поверх декоративного SVG. */

.matrix{padding-block:0 clamp(36px,4.4vw,64px)}
.matrix .wire{background:#fff}
.matrix__in{max-width:1140px;margin:0 auto;padding:clamp(26px,3.2vw,44px) clamp(18px,3.4vw,48px) clamp(30px,3.6vw,50px)}

.matrix__crumbs{font-size:13px;color:#98a1b0;margin:0 0 28px;letter-spacing:.01em}
.matrix__crumbs a{color:inherit;text-decoration:none;border-bottom:1px solid #e8ebf0}
.matrix__crumbs a:hover{border-bottom-color:#9aa4b2}

.matrix__head{margin-bottom:22px}
.matrix__head h1{font-size:clamp(28px,3.4vw,46px);line-height:1.08;margin:0;letter-spacing:-.018em;max-width:20ch;
  hyphens:none;-webkit-hyphens:none;overflow-wrap:break-word}
.matrix__eyebrow{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:#98a1b0;margin:0 0 10px}
.matrix__lede{max-width:720px;color:#4b515c;font-size:clamp(15.5px,1.1vw,17.5px);line-height:1.65;margin:14px 0 0}

/* ── калькулятор: обязан помещаться в первый экран ── */
.mx-form{margin:26px 0 0;padding:clamp(18px,2.2vw,26px);border:1px solid #e8ebf0;border-radius:14px;background:#fafbfc;
  display:flex;flex-wrap:wrap;gap:14px 18px;align-items:flex-end}
.mx-form__field{flex:1 1 240px;min-width:0}
.mx-form label{display:block;font-size:13.5px;color:#4b515c;margin:0 0 7px;letter-spacing:.01em}
.mx-form input[type=date]{width:100%;box-sizing:border-box;font:inherit;font-size:16px;color:#1b1f27;
  padding:12px 14px;border:1px solid #d8dde5;border-radius:10px;background:#fff;line-height:1.2}
.mx-form input[type=date]:focus-visible{outline:2px solid #1b1f27;outline-offset:1px;border-color:#1b1f27}
.mx-form button{flex:0 0 auto;font:inherit;font-size:15.5px;cursor:pointer;padding:13px 30px;border:0;border-radius:10px;
  background:#1b1f27;color:#fff;letter-spacing:.01em}
.mx-form button:hover{background:#333a46}
.mx-form button:focus-visible{outline:2px solid #1b1f27;outline-offset:2px}
.mx-form__note{flex:1 1 100%;margin:0;font-size:13px;color:#98a1b0}
.mx-form__err{flex:1 1 100%;margin:0;font-size:14px;color:#a3282f}
.mx-form__err:empty{display:none}

/* ── результат ── */
.mx-res{margin-top:clamp(28px,3vw,40px)}
.mx-res[hidden]{display:none}
/* Короткий переход, чтобы появление результата не выглядело рывком.
   Никаких имитаций загрузки: расчёт мгновенный. */
.mx-res:not([hidden]){animation:mx-in .22s ease-out both}
@keyframes mx-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.mx-res:not([hidden]){animation:none}}

.mx-lead{margin:0 0 26px;font-size:clamp(15px,1.1vw,16.5px);color:#98a1b0;letter-spacing:.01em}
.mx-block{margin:0 0 clamp(34px,4vw,56px)}
.mx-block h2{font-size:clamp(21px,2.1vw,29px);line-height:1.18;margin:0 0 6px;letter-spacing:-.014em}
.mx-res__sub{margin:0 0 20px;color:#98a1b0;font-size:14.5px}

/* главные арканы: карточка выбирает позицию, ссылка ведёт в справочник */
.mx-main{display:grid;grid-template-columns:repeat(2,1fr);gap:26px 20px;margin:0;padding:0;list-style:none}
@media(min-width:560px){.mx-main{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.mx-main{grid-template-columns:repeat(5,1fr)}}
.mx-main li{margin:0;min-width:0}
.mx-main__btn{display:block;width:100%;text-align:left;background:none;border:0;padding:0;cursor:pointer;font:inherit;color:inherit}
.mx-main__btn img{display:block;width:100%;height:auto;border-radius:9px;border:1px solid #e8ebf0;background:#f3f5f8;
  transition:border-color .15s,box-shadow .15s}
.mx-main__btn:hover img{border-color:#c9d0da}
.mx-main__btn:focus-visible img{outline:2px solid #1b1f27;outline-offset:2px}
.mx-main__btn[aria-pressed=true] img{border-color:#1b1f27;box-shadow:0 0 0 3px rgba(27,31,39,.10)}
.mx-main__slot{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#98a1b0;margin:11px 0 5px}
.mx-main__btn[aria-pressed=true] .mx-main__slot{color:#1b1f27;font-weight:700}
.mx-main__name{display:block;font-size:17px;line-height:1.25;color:#1b1f27;margin:0 0 5px}
.mx-main__name b{font-weight:inherit;color:#98a1b0}
.mx-main__keys{display:block;font-size:13.5px;line-height:1.5;color:#6b7280;margin:0 0 8px}
.mx-more{font-size:13.5px;color:#1b1f27;text-decoration:none;border-bottom:1px solid #d8dde5}
.mx-more:hover{border-bottom-color:#1b1f27}

/* «Ваш результат» — главный editorial-блок, а не одна из серых карточек */
.mx-block--summary{padding:clamp(22px,2.6vw,32px) clamp(20px,2.4vw,34px);border:1px solid #e8ebf0;border-radius:16px;background:#fafbfc}
.mx-summary{margin:10px 0 0;font-size:clamp(16.5px,1.35vw,19.5px);line-height:1.62;color:#2b3038;max-width:74ch}
.mx-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:22px 0 0;padding:0;list-style:none}
.mx-chips__lbl{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#98a1b0;margin-right:4px}
.mx-chip{font-size:13.5px;color:#2b3038;background:#fff;border:1px solid #e2e6ec;border-radius:999px;padding:6px 13px}
.mx-chip b{font-weight:600}

/* персональный разбор */
.mx-report{display:grid;grid-template-columns:1fr;gap:clamp(22px,2.4vw,32px) 44px;margin-top:20px}
@media(min-width:900px){.mx-report{grid-template-columns:repeat(2,1fr)}}
.mx-report__sec{min-width:0}
.mx-report__sec h3{font-size:15px;letter-spacing:.02em;margin:0 0 10px;color:#1b1f27;
  padding-bottom:9px;border-bottom:1px solid #eceff3}
.mx-report__sec p{margin:0 0 11px;font-size:15.5px;line-height:1.68;color:#4b515c;max-width:62ch}
.mx-report__sec--adv{grid-column:1/-1}
.mx-advice{margin:4px 0 0;padding:0;list-style:none;display:grid;gap:9px}
@media(min-width:900px){.mx-advice{grid-template-columns:repeat(2,1fr);gap:9px 36px}}
.mx-advice li{position:relative;padding-left:20px;font-size:15.5px;line-height:1.62;color:#4b515c}
.mx-advice li::before{content:'';position:absolute;left:4px;top:.65em;width:6px;height:1px;background:#c9d0da}

/* ── интерактивная карта ── */
.mx-mapwrap{display:grid;grid-template-columns:1fr;gap:clamp(22px,2.6vw,36px);align-items:start;margin-top:6px}
@media(min-width:900px){.mx-mapwrap{grid-template-columns:minmax(300px,460px) minmax(250px,1fr)}}
.mx-map{position:relative;width:100%;max-width:460px;aspect-ratio:1;margin:0 auto}
.mx-map svg{position:absolute;inset:0;width:100%;height:100%}
.mx-map .mx-ring{fill:none;stroke:#e8ebf0;stroke-width:.35}
.mx-map .mx-spoke{stroke:#eff1f5;stroke-width:.35}

.mx-node{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:6px;
  width:92px;background:none;border:0;padding:0;cursor:pointer;font:inherit}
.mx-node__n{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-size:17px;
  border:1.5px solid #c9d0da;background:#fff;color:#1b1f27;transition:box-shadow .15s,transform .15s}
.mx-node--base .mx-node__n{background:#1b1f27;border-color:#1b1f27;color:#fff}
.mx-node--center .mx-node__n{width:62px;height:62px;font-size:19px;border-width:2.5px;border-color:#1b1f27}
.mx-node__t{font-size:11.5px;line-height:1.2;color:#98a1b0;text-align:center}
.mx-node:hover .mx-node__n{box-shadow:0 0 0 4px rgba(27,31,39,.07)}
.mx-node:focus-visible{outline:0}
.mx-node:focus-visible .mx-node__n{outline:2px solid #1b1f27;outline-offset:3px}
/* Выбранная позиция отличается не только цветом: кольцо, увеличение и жирная подпись. */
.mx-node[aria-pressed=true] .mx-node__n{box-shadow:0 0 0 4px rgba(27,31,39,.16);transform:scale(1.07)}
.mx-node[aria-pressed=true] .mx-node__t{color:#1b1f27;font-weight:700}
@media(prefers-reduced-motion:reduce){.mx-node__n{transition:none}}

.mx-panel{border:1px solid #e8ebf0;border-radius:14px;padding:clamp(18px,2vw,26px);background:#fafbfc}
.mx-panel__slot{margin:0 0 8px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#98a1b0}
.mx-panel__head{margin:0 0 8px;font-size:clamp(19px,1.7vw,23px);line-height:1.2;color:#1b1f27;letter-spacing:-.01em}
.mx-panel__head b{font-weight:inherit;color:#98a1b0}
.mx-panel__keys{margin:0 0 12px;font-size:13.5px;color:#6b7280}
.mx-panel__text{margin:0 0 14px;font-size:15.5px;line-height:1.66;color:#4b515c}

/* ── все позиции ── */
.mx-list{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid #eceff3;margin-top:14px}
@media(min-width:900px){.mx-list{grid-template-columns:repeat(2,1fr);column-gap:44px}}
.mx-list__it{border-bottom:1px solid #eceff3;padding:14px 0}
.mx-list__it>summary{display:flex;gap:13px;align-items:baseline;cursor:pointer;list-style:none;min-width:0}
.mx-list__it>summary::-webkit-details-marker{display:none}
.mx-list__it>summary:focus-visible{outline:2px solid #1b1f27;outline-offset:3px;border-radius:4px}
.mx-list__n{flex:0 0 34px;font-size:15px;color:#98a1b0;font-variant-numeric:tabular-nums}
.mx-list__b{min-width:0}
.mx-list__slot{display:block;font-size:12.5px;color:#98a1b0;margin:0 0 2px}
.mx-list__nm{display:block;font-size:16px;color:#1b1f27;line-height:1.3}
.mx-list__txt{margin:9px 0 8px 47px;font-size:14.5px;line-height:1.6;color:#4b515c;max-width:56ch}
.mx-list__it>.mx-more{margin-left:47px}

/* ── методика, оговорка, ссылки ── */
.matrix__method{margin-top:clamp(34px,3.8vw,52px);padding-top:clamp(22px,2.4vw,30px);border-top:1px solid #eceff3;
  max-width:760px;color:#4b515c;font-size:15.5px;line-height:1.68}
.matrix__method h2{font-size:clamp(19px,1.7vw,23px);color:#1b1f27;margin:0 0 12px;letter-spacing:-.01em}
.matrix__method ol{margin:0 0 14px;padding-left:20px}
.matrix__method li{margin:0 0 7px}
.matrix__method p{margin:0 0 12px}
.matrix__note{margin-top:22px;font-size:13.5px;line-height:1.6;color:#98a1b0;max-width:760px}
.matrix__links{margin-top:26px;font-size:14.5px;color:#4b515c}
.matrix__links a{color:#1b1f27;text-decoration:none;border-bottom:1px solid #d8dde5}
.matrix__links a:hover{border-bottom-color:#1b1f27}

@media(max-width:700px){
  .mx-form{gap:12px}
  .mx-form button{flex:1 1 100%;padding:14px 20px}
  .mx-main{gap:22px 14px}
  .mx-node{width:74px;gap:5px}
  .mx-node__n{width:44px;height:44px;font-size:15.5px}
  .mx-node--center .mx-node__n{width:52px;height:52px;font-size:17px}
  .mx-node__t{font-size:10.5px}
}