/* Калькулятор «Матриця долі» (/numerology/matrytsia-doli/). Підключається лише на цій сторінці (inc/tools/matrix.php). */

.tm-main{padding-block:34px 100px}
/* Атрибут hidden сильніший за display:flex/grid окремих блоків */
.tm-main [hidden]{display:none!important}

/* «Хлібні крихти» (як у бібліотеці значень) */
.tm-crumbs{margin-bottom:34px;font-size:13px;font-weight:750;line-height:1.5}
.tm-crumbs ol{display:flex;flex-wrap:wrap;gap:4px 0;margin:0;padding:0;list-style:none}
.tm-crumbs li{display:inline-flex;align-items:center;min-width:0}
.tm-crumbs li+li::before{content:"›";margin:0 10px;color:var(--dim);font-weight:500}
.tm-crumbs a{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.tm-crumbs a:hover{color:var(--blue)}
.tm-crumbs [aria-current]{color:var(--dim)}

/* Заголовок */
.tm-head h1{font-size:clamp(36px,4.2vw,58px);line-height:1.08;letter-spacing:-.07em;margin:14px 0 18px;overflow-wrap:break-word}
.tm-lead{font-size:clamp(17px,1.7vw,20px);line-height:1.55;font-weight:550;max-width:62ch}

/* Форма й схема: дві панелі поруч, на телефоні одна під одною */
.tm-tool{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:32px;align-items:start;margin-top:34px}
.tm-tool>*{min-width:0}
.tm-tool-form{padding:clamp(24px,3.2vw,40px);background:var(--lilac);border:2px solid var(--ink);box-shadow:7px 7px 0 var(--ink)}
.tm-tool-form h2{font-size:clamp(26px,2.6vw,36px);line-height:1.15;letter-spacing:-.06em;margin:12px 0 22px}
.tm-form{display:grid;gap:16px}
.tm-form .field{margin:0;font-weight:750;color:var(--ink)}
.tm-form .field input{min-height:52px;font-size:17px;font-family:var(--font-body)}
.tm-form .field input:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.tm-form .button{justify-self:start;gap:14px}
.tm-form .button[disabled]{cursor:progress;opacity:.8}
.tm-form .button .lucide-loader-circle{animation:selena-spin 1s linear infinite}
.tm-note{margin-top:14px;font-size:13px;line-height:1.5;color:var(--dim)}
.tm-error{margin:18px 0 0;background:#fffdf8;border:2px solid var(--ink);align-items:center}
.tm-error svg{color:#aa2444;margin-top:0}
.tm-error p{font-size:14px;font-weight:700}

.tm-chart{margin:0;padding:clamp(16px,2.4vw,26px);background:#fffdf8;border:2px solid var(--ink);box-shadow:7px 7px 0 var(--ink)}
.tm-chart-title{font-size:clamp(19px,1.8vw,24px);line-height:1.2;letter-spacing:-.05em;outline:none}
.tm-chart-title:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
.tm-chart-note{margin-top:6px;font-size:14px;line-height:1.5;color:var(--dim)}
.tm-chart-box{max-width:470px;margin:18px auto 0}
.tm-chart figcaption{margin-top:18px;padding-top:14px;border-top:2px solid var(--ink)}

/* Сама схема (SVG) */
.tm-svg{display:block;width:100%;height:auto;overflow:visible}
.tm-sq{fill:none;stroke:var(--ink);stroke-width:2}
.tm-sq--kin{stroke-width:1.5}
.tm-axis{stroke:var(--ink);stroke-width:1.2;opacity:.4}
.tm-axis--thin{opacity:.25}
.tm-channel{stroke:var(--ink);stroke-width:1.5;stroke-dasharray:4 3}
.tm-pt circle{fill:#fffdf8;stroke:var(--ink);stroke-width:2}
.tm-pt text,.tm-mark{font-family:var(--font-display);font-weight:750;fill:var(--ink);text-anchor:middle;dominant-baseline:central;letter-spacing:-.04em}
.tm-pt--self circle{fill:var(--lilac)}
.tm-pt--center circle{fill:var(--blue)}
.tm-pt--center text{fill:var(--ivory)}
.tm-pt--money circle{fill:var(--mint)}
.tm-pt--love circle{fill:var(--coral)}
.tm-pt--tail circle{fill:var(--ink)}
.tm-pt--tail text{fill:var(--ivory)}
.tm-pt--kin circle{fill:var(--ivory);stroke-dasharray:4 3}
.tm-mark{font-size:17px}
.tm-chart--filled .tm-pt text{animation:tm-in .35s ease both}
@keyframes tm-in{from{opacity:0}to{opacity:1}}

/* Легенда кольорів */
.tm-legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0;padding:0;list-style:none;font-size:12px;font-weight:750;line-height:1.4}
.tm-legend li{display:inline-flex;align-items:center;gap:7px}
.tm-swatch{display:inline-block;flex-shrink:0;width:14px;height:14px;border:2px solid var(--ink);border-radius:50%;background:#fffdf8}
.tm-swatch--self{background:var(--lilac)}
.tm-swatch--center{background:var(--blue)}
.tm-swatch--money{background:var(--mint)}
.tm-swatch--love{background:var(--coral)}
.tm-swatch--tail{background:var(--ink)}
.tm-swatch--kin{background:var(--ivory);border-style:dashed}

/* Результат: картки позицій */
.tm-result{margin-top:64px;scroll-margin-top:16px}
.tm-result>h2{font-size:clamp(26px,3vw,40px);line-height:1.15;letter-spacing:-.06em}
.tm-result-intro{margin-top:12px;font-size:16px;line-height:1.6;max-width:66ch}
.tm-positions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:28px}
.tm-pos{min-width:0;padding:22px 24px 24px;background:#fffdf8;border:2px solid var(--ink)}
.tm-pos-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center}
.tm-pos-num{font-family:var(--font-display);font-size:54px;font-weight:800;line-height:1;letter-spacing:-.08em;color:var(--blue);min-width:1.25em;text-align:center}
.tm-pos h3{margin:0;font-size:inherit;font-weight:inherit}
.tm-pos-label{display:inline-block;padding:3px 9px;border:2px solid var(--ink);background:var(--lilac);font-family:var(--font-body);font-size:11px;font-weight:900;letter-spacing:.12em;line-height:1.4;text-transform:uppercase}
.tm-pos-arcana{display:block;margin-top:8px;font-family:var(--font-display);font-size:clamp(20px,2vw,26px);font-weight:750;line-height:1.15;letter-spacing:-.05em;overflow-wrap:break-word}
.tm-pos-where{margin-top:4px;font-size:12px;font-weight:700;line-height:1.4;color:var(--dim)}
.tm-pos-card{display:block;width:62px;height:auto;aspect-ratio:480/768;object-fit:cover;background:var(--lilac);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
.tm-pos-hint{margin-top:16px;font-size:15px;font-weight:700;line-height:1.55}
.tm-pos-extra{display:inline-block;margin-top:10px;padding:4px 10px;background:var(--ivory);border:2px solid var(--ink);font-size:14px;font-weight:800;line-height:1.4}
.tm-pos-texts{display:grid;gap:10px;margin-top:14px}
.tm-pos-texts p{padding-left:12px;font-size:15px;line-height:1.6;border-left:4px solid var(--mint)}
.tm-pos-texts .tm-pos-minus{border-left-color:var(--coral)}
.tm-pos--talents .tm-pos-label{background:var(--lilac)}
.tm-pos--center .tm-pos-label{background:var(--blue);color:var(--ivory)}
.tm-pos--money .tm-pos-label{background:var(--mint)}
.tm-pos--love .tm-pos-label{background:var(--coral)}
.tm-pos--tail .tm-pos-label{background:var(--ink);color:var(--ivory)}
.tm-pos--purpose .tm-pos-label{background:var(--ivory)}

/* Три призначення всередині картки */
.tm-pos-purpose{display:grid;gap:0;margin:14px 0 0;border:2px solid var(--ink)}
.tm-pos-purpose div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:center;padding:9px 12px}
.tm-pos-purpose div+div{border-top:2px solid var(--ink)}
.tm-pos-purpose dt{font-size:14px;font-weight:800;line-height:1.35}
.tm-pos-purpose dt small{display:block;margin-top:2px;font-size:12px;font-weight:650;color:var(--dim)}
.tm-pos-purpose dd{margin:0;font-size:14px;font-weight:750;text-align:right;line-height:1.35}
.tm-pos-purpose dd b{font-family:var(--font-display);font-size:20px;color:var(--blue);margin-right:6px}

/* Пропозиція під результатом */
.tm-result-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 28px;margin-top:28px;padding:22px 24px;background:var(--coral);border:2px solid var(--ink);box-shadow:6px 6px 0 var(--ink)}
.tm-result-cta p{flex:1 1 360px;font-size:15px;line-height:1.6;max-width:62ch}
.tm-result-cta .button{flex-shrink:0;gap:14px}

/* Пояснення під інструментом */
.tm-explain{max-width:800px;margin-top:80px}
.tm-section{padding:32px 0;border-top:2px solid var(--ink)}
.tm-section h2{display:flex;align-items:baseline;gap:12px;margin:0 0 14px;font-size:clamp(22px,2.3vw,30px);line-height:1.2;letter-spacing:-.05em;overflow-wrap:break-word;min-width:0}
.tm-section h2::before{content:"";flex-shrink:0;width:12px;height:12px;border:2px solid var(--ink);background:var(--lilac);transform:translateY(-1px)}
.tm-section:nth-child(2) h2::before{background:var(--mint)}
.tm-section:nth-child(3) h2::before{background:var(--coral)}
.tm-section:nth-child(4) h2::before{background:var(--blue)}
.tm-section p{font-size:17px;line-height:1.7;max-width:68ch}
.tm-section p+p,.tm-section ol+p,.tm-section ul+p{margin-top:14px}
.tm-section .tm-example-title{margin-top:18px;font-weight:800}
.tm-nw{white-space:nowrap} /* приклади розрахунку не рвемо посередині */
.tm-steps{display:grid;gap:8px;margin:12px 0 0;padding:0;list-style:none;counter-reset:tm-step}
.tm-steps li{position:relative;padding-left:40px;font-size:16px;line-height:1.55;counter-increment:tm-step}
.tm-steps li::before{content:counter(tm-step);position:absolute;left:0;top:-1px;display:grid;place-items:center;width:28px;height:28px;background:var(--ivory);border:2px solid var(--ink);font-family:var(--font-display);font-size:13px;font-weight:750}
.tm-read-list{display:grid;gap:10px;margin:14px 0 0;padding:0;list-style:none}
.tm-read-list li{position:relative;padding-left:22px;font-size:16px;line-height:1.6}
.tm-read-list li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;background:var(--ink)}

/* 22 аркани */
.tm-arcana{max-width:none}
.tm-arcana-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:22px}
.tm-arcanum{min-width:0;background:#fffdf8;border:2px solid var(--ink)}
.tm-arcanum summary{display:flex;align-items:center;gap:12px;min-height:52px;padding:8px 14px;cursor:pointer;list-style:none;font-weight:800;line-height:1.3}
.tm-arcanum summary::-webkit-details-marker{display:none}
.tm-arcanum summary:hover{background:var(--lilac)}
.tm-arcanum summary:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.tm-arcanum summary svg{flex-shrink:0;transition:transform .2s ease}
.tm-arcanum[open] summary{background:var(--lilac);border-bottom:2px solid var(--ink)}
.tm-arcanum[open] summary svg{transform:rotate(180deg)}
.tm-arcanum-num{min-width:2ch;font-family:var(--font-display);font-size:20px;font-weight:800;letter-spacing:-.06em;color:var(--blue)}
.tm-arcanum-name{flex:1;min-width:0;font-size:16px}
.tm-arcanum-body{padding:4px 16px 16px}
.tm-arcanum-body p{margin-top:10px;font-size:15px;line-height:1.6}
.tm-arcanum-link .text-link{display:inline;font-size:14px;line-height:1.6}
.tm-arcanum-link .text-link svg{display:inline-block;vertical-align:-3px;margin-left:6px}

/* Платний розбір */
.tm-cta{display:grid;gap:22px;margin-top:48px;padding:clamp(22px,3.4vw,36px);background:var(--mint);border:2px solid var(--ink);box-shadow:7px 7px 0 var(--ink)}
.tm-cta .eyebrow{color:var(--ink)}
.tm-cta h2{font-size:clamp(24px,2.8vw,34px);line-height:1.15;letter-spacing:-.055em;margin:8px 0 10px}
.tm-cta p:not(.eyebrow){font-size:15px;line-height:1.6;max-width:62ch}
.tm-cta .tm-cta-note{margin-top:10px;font-size:14px;font-weight:700}
.tm-cta-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 18px}
.tm-cta-actions .button{gap:14px;text-align:left}

/* Ще безкоштовно */
.tm-related{margin-top:64px;padding-top:34px;border-top:2px solid var(--ink)}
.tm-related h2{font-size:clamp(24px,2.8vw,34px);line-height:1.2;letter-spacing:-.055em;margin-bottom:24px}
.tm-related ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:0;padding:0;list-style:none}
.tm-related li{min-width:0}
.tm-related a{display:grid;gap:8px;align-content:start;height:100%;padding:18px 20px 20px;background:#fffdf8;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
.tm-related a:hover{background:var(--lilac);transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.tm-related strong{font-family:var(--font-display);font-size:18px;font-weight:750;line-height:1.2;letter-spacing:-.04em;overflow-wrap:break-word}
.tm-related span{font-size:13px;font-weight:650;line-height:1.45;color:var(--dim)}

@media(prefers-reduced-motion:reduce){
  .tm-chart--filled .tm-pt text{animation:none}
  .tm-form .button .lucide-loader-circle{animation:none}
}
@media(min-width:901px){
  /* Призначення на всю ширину: три рядки таблиці стають трьома колонками */
  .tm-pos--purpose{grid-column:1/-1}
  .tm-pos--purpose .tm-pos-purpose{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tm-pos--purpose .tm-pos-purpose div+div{border-top:0;border-left:2px solid var(--ink)}
  .tm-pos--purpose .tm-pos-texts{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 24px}
}
@media(max-width:1100px){
  .tm-related ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* У дві колонки довга назва аркана не влазить між числом і карткою */
  .tm-positions{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:900px){
  .tm-tool{grid-template-columns:minmax(0,1fr);gap:28px}
  .tm-positions{grid-template-columns:minmax(0,1fr)}
  .tm-explain{max-width:none}
}
@media(max-width:620px){
  .tm-main{padding-block:22px 70px}
  .tm-crumbs{margin-bottom:24px;font-size:12px}
  .tm-crumbs li+li::before{margin:0 7px}
  .tm-head h1{font-size:clamp(30px,9vw,40px);letter-spacing:-.06em;margin-bottom:14px}
  .tm-lead{font-size:16px}
  .tm-tool{margin-top:28px;gap:24px}
  .tm-tool-form{padding:20px;box-shadow:4px 4px 0 var(--ink)}
  .tm-form .button{justify-self:stretch;width:100%}
  .tm-chart{padding:14px 8px 14px;box-shadow:4px 4px 0 var(--ink)}
  .tm-chart-title,.tm-chart-note{padding-inline:8px}
  .tm-chart-box{margin-top:12px}
  .tm-chart figcaption{margin-top:12px;padding:12px 8px 0}
  .tm-legend{gap:8px 14px}
  .tm-result{margin-top:48px}
  .tm-positions{gap:14px;margin-top:22px}
  .tm-pos{padding:18px}
  /* Довгі назви («Справедливість», «Імператриця») не влазять між числом і карткою: число й карта рядком, назва під ними на всю ширину */
  .tm-pos-head{grid-template-columns:minmax(0,1fr) auto;gap:12px}
  .tm-pos-num{grid-column:1;grid-row:1;justify-self:start;align-self:end;font-size:48px;min-width:0;text-align:left}
  .tm-pos-card{grid-column:2;grid-row:1;width:48px;box-shadow:2px 2px 0 var(--ink)}
  .tm-pos-title{grid-column:1/-1;grid-row:2}
  .tm-pos-hint{font-size:14px}
  .tm-pos-texts p{font-size:14px}
  .tm-result-cta{padding:18px;box-shadow:4px 4px 0 var(--ink)}
  .tm-result-cta .button{width:100%;white-space:normal;justify-content:space-between}
  .tm-explain{margin-top:56px}
  .tm-section{padding:26px 0}
  .tm-section h2{font-size:22px;gap:10px}
  .tm-section h2::before{width:10px;height:10px}
  .tm-section p{font-size:16px;line-height:1.65}
  .tm-steps li,.tm-read-list li{font-size:15px}
  .tm-arcana-list{grid-template-columns:minmax(0,1fr)}
  .tm-cta{box-shadow:4px 4px 0 var(--ink)}
  .tm-cta-actions{display:grid}
  .tm-cta-actions .button{width:100%;white-space:normal;padding-inline:16px;justify-content:space-between}
  .tm-related{margin-top:48px;padding-top:28px}
  .tm-related ul{grid-template-columns:minmax(0,1fr);gap:12px}
  .tm-related a{padding:14px 16px 16px;box-shadow:3px 3px 0 var(--ink)}
}