/* Калькулятор «Число імені» (/numerology/chyslo-imeni/). Підключається лише на цій сторінці (inc/tools/name.php). */

.tn-main{padding-block:34px 100px}

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

/* Заголовок сторінки */
.tn-head{max-width:860px;padding-bottom:40px}
.tn-head h1{font-size:clamp(38px,5vw,68px);line-height:1.1;letter-spacing:-.075em;margin:16px 0 22px;overflow-wrap:break-word}
.tn-head h1 em,.tn-calc h2 em{font-style:normal;font-weight:inherit;color:var(--blue)}
.tn-lead{font-size:18px;line-height:1.55;font-weight:550;max-width:640px}

/* Калькулятор */
.tn-calc{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,56px);align-items:start;padding:clamp(22px,4vw,44px);background:var(--lilac);border:2px solid var(--ink);box-shadow:7px 7px 0 var(--ink)}
.tn-calc>*{min-width:0}
.tn-calc h2{font-size:clamp(28px,3vw,42px);line-height:1.15;letter-spacing:-.065em;margin:14px 0}
.tn-calc-copy>p:last-child{font-size:15px;line-height:1.6;max-width:36ch}
.tn-form{display:flex;align-items:flex-end;gap:14px}
.tn-form .field{flex:1;min-width:0;margin:0}
.tn-form .field input{min-height:56px;font-size:18px;padding:12px 16px}
.tn-form .field input[aria-invalid=true]{border-color:var(--destructive);box-shadow:inset 0 0 0 1px var(--destructive)}
.tn-form .button{flex-shrink:0;margin:0;gap:16px}
.tn-form .button[aria-busy=true]{cursor:progress}
.tn-hint{margin-top:12px;font-size:13px;line-height:1.5;color:var(--dim)}
.tn-error{font-size:14px;line-height:1.5;font-weight:750;color:var(--destructive)}
.tn-error:not(:empty){margin-top:12px;padding:10px 14px;background:#fffdf8;border:2px solid var(--destructive)}

/* Результат */
.tn-result{margin-top:56px;scroll-margin-top:24px}
.tn-result-head h2{font-size:clamp(28px,3.4vw,46px);line-height:1.15;letter-spacing:-.06em;margin:10px 0 26px;overflow-wrap:anywhere}
.tn-result-head h2:focus{outline:none}
.tn-result-head h2:focus-visible{outline:2px solid var(--blue);outline-offset:6px}
.tn-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.tn-card{display:grid;align-content:start;gap:14px;padding:22px 24px 24px;background:#fffdf8;border:2px solid var(--ink);box-shadow:5px 5px 0 var(--ink);min-width:0}
.tn-card-top{display:flex;align-items:center;gap:18px}
.tn-card-digit{flex-shrink:0;min-width:.62em;font-family:var(--font-display);font-size:clamp(64px,6vw,86px);font-weight:800;line-height:.95;letter-spacing:-.08em;color:var(--blue);text-align:center}
.tn-card-digit:empty{display:none}
.tn-card-head{min-width:0}
.tn-card-label{display:inline-block;padding:4px 10px;border:2px solid var(--ink);background:var(--mint);font-family:var(--font-body);font-size:11px;font-weight:900;letter-spacing:.12em;line-height:1.4;text-transform:uppercase;margin:0}
.tn-card--soul .tn-card-label{background:var(--coral)}
.tn-card--personality .tn-card-label{background:var(--lilac)}
.tn-card-about{margin-top:8px;font-size:13px;line-height:1.45;font-weight:650;color:var(--dim)}
.tn-card-keyword{font-family:var(--font-display);font-size:22px;font-weight:750;line-height:1.2;letter-spacing:-.05em;padding-top:14px;border-top:2px solid var(--ink)}
.tn-card-keyword:empty,.tn-card.is-empty .tn-card-keyword{display:none}
.tn-master{display:inline-block;vertical-align:3px;margin-left:4px;padding:2px 7px;border:2px solid var(--ink);background:var(--ivory);font-family:var(--font-body);font-size:10px;font-weight:900;letter-spacing:.1em;line-height:1.3;text-transform:uppercase;color:var(--ink)}
.tn-master[hidden]{display:none}
.tn-card-text{font-size:15px;line-height:1.6}
.tn-card.is-empty .tn-card-text{color:var(--dim)}
.tn-converted{margin-top:22px;padding:12px 16px;background:var(--mint);border:2px solid var(--ink);font-size:14px;line-height:1.5;font-weight:650}
.tn-converted[hidden]{display:none}

/* Розрахунок по літерах */
.tn-breakdown{margin-top:34px;padding:clamp(20px,3vw,32px);background:#fffdf8;border:2px solid var(--ink)}
.tn-breakdown h3{font-size:clamp(20px,2.2vw,26px);line-height:1.2;letter-spacing:-.05em;margin:0 0 12px}
.tn-legend{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:13px;font-weight:700;line-height:1.4;color:var(--dim)}
.tn-legend-item{display:inline-flex;align-items:center;gap:8px}
.tn-swatch{display:inline-block;flex-shrink:0;width:16px;height:16px;border:2px solid var(--ink);background:#fffdf8}
.tn-swatch.is-vowel{background:var(--mint)}
.tn-words{display:grid;gap:20px;margin-top:22px}
.tn-word-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-bottom:8px}
.tn-word-name{font-family:var(--font-display);font-size:17px;font-weight:750;letter-spacing:-.03em;overflow-wrap:anywhere;min-width:0}
.tn-word-sum{font-size:14px;font-weight:800;color:var(--blue);white-space:nowrap}
.tn-letters{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.tn-letters li{display:grid;width:42px;border:2px solid var(--ink);background:#fffdf8;text-align:center}
.tn-letters li.is-vowel{background:var(--mint)}
.tn-letter{padding:7px 0 3px;font-family:var(--font-display);font-size:18px;font-weight:700;line-height:1.1}
.tn-value{padding:3px 0 4px;border-top:2px solid var(--ink);font-size:14px;font-weight:850;line-height:1.2;color:var(--blue)}
/* Підписи в одну колонку однакової ширини, розрахунок праворуч */
.tn-sums{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:12px 16px;align-items:baseline;margin:26px 0 0;padding-top:20px;border-top:2px solid var(--ink)}
.tn-sum{display:contents}
.tn-sum dt{justify-self:start;padding:3px 9px;border:2px solid var(--ink);background:var(--mint);font-size:11px;font-weight:900;letter-spacing:.1em;line-height:1.4;text-transform:uppercase}
.tn-sum--soul dt{background:var(--coral)}
.tn-sum--personality dt{background:var(--lilac)}
.tn-sum dd{margin:0;font-size:16px;font-weight:700;line-height:1.55;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.tn-sum dd strong{font-family:var(--font-display);font-weight:800;color:var(--blue)}
.tn-sum dd .tn-sum-note{font-weight:600;color:var(--dim)}
.tn-next{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;margin-top:30px}
.tn-next .button{margin:0;gap:14px}
.tn-next p{font-size:14px;line-height:1.6;max-width:52ch}
.tn-next .text-link,.tn-date-link .text-link{display:inline;line-height:1.6}
.tn-next .text-link svg,.tn-date-link .text-link svg{display:inline-block;vertical-align:-3px;margin-left:6px}
/* Останнє слово посилання разом зі стрілкою: стрілка не переноситься сама на новий рядок */
.tn-nowrap{white-space:nowrap}

/* Пояснення під калькулятором: текст ліворуч, праворуч (на комп'ютері) — інші безкоштовні інструменти */
.tn-columns{display:grid;grid-template-columns:minmax(0,760px) minmax(240px,1fr);column-gap:clamp(40px,6vw,80px);align-items:start;margin-top:80px}
.tn-guide{min-width:0}
.tn-section{padding:34px 0;border-top:2px solid var(--ink)}
.tn-section:first-child{padding-top:0;border-top:0}
.tn-section h2{display:flex;align-items:baseline;gap:12px;font-size:clamp(24px,2.5vw,32px);line-height:1.2;letter-spacing:-.05em;margin:0 0 14px;overflow-wrap:break-word;min-width:0}
.tn-section h2::before{content:"";flex-shrink:0;width:12px;height:12px;border:2px solid var(--ink);background:var(--lilac);transform:translateY(-1px)}
.tn-section h3{font-size:clamp(19px,2vw,22px);line-height:1.25;letter-spacing:-.04em;margin:30px 0 10px}
.tn-section p{font-size:17px;line-height:1.7;max-width:68ch}
.tn-section p+p{margin-top:14px}

/* Таблиці літер */
.tn-tables{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:26px;align-items:start}
.tn-table{width:100%;border-collapse:collapse;table-layout:fixed;background:#fffdf8;text-align:center}
.tn-table caption{caption-side:top;padding-bottom:8px;text-align:left;font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.tn-table th,.tn-table td{height:40px;padding:0;border:2px solid var(--ink)}
.tn-table th{background:var(--ink);color:var(--ivory);font-size:14px;font-weight:850;border-color:var(--ink)}
.tn-table td{font-family:var(--font-display);font-size:16px;font-weight:700}
.tn-table td.is-vowel{background:var(--mint)}
.tn-table td.is-empty{background:var(--ivory)}
.tn-section .tn-table-note{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:13px;line-height:1.4;font-weight:700;color:var(--dim)}
.tn-example{margin-top:26px;padding:20px 22px;background:var(--lilac);border:2px solid var(--ink)}
.tn-section .tn-example-title{font-family:var(--font-display);font-size:18px;font-weight:750;letter-spacing:-.03em;line-height:1.3}
.tn-example ul{display:grid;gap:8px;margin:12px 0 0;padding:0;list-style:none}
.tn-example li{font-size:16px;line-height:1.6;overflow-wrap:anywhere}

/* Три числа */
.tn-defs{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:12px 16px;align-items:baseline;margin:22px 0 0}
.tn-def{display:contents}
.tn-def dt{justify-self:start;padding:3px 9px;border:2px solid var(--ink);background:var(--mint);font-size:11px;font-weight:900;letter-spacing:.1em;line-height:1.4;text-transform:uppercase}
.tn-def--soul dt{background:var(--coral)}
.tn-def--personality dt{background:var(--lilac)}
.tn-def dd{margin:0;font-size:16px;line-height:1.6}

/* Значення чисел: розкривні пункти */
.tn-means{display:grid;gap:10px;margin-top:22px}
.tn-mean{background:#fffdf8;border:2px solid var(--ink)}
.tn-mean summary{display:flex;align-items:center;gap:16px;min-height:56px;padding:8px 16px;cursor:pointer;list-style:none}
.tn-mean summary::-webkit-details-marker{display:none}
.tn-mean summary:hover{background:var(--lilac)}
.tn-mean summary:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.tn-mean-n{flex-shrink:0;min-width:1.6em;font-family:var(--font-display);font-size:26px;font-weight:800;line-height:1;letter-spacing:-.06em;color:var(--blue)}
.tn-mean-key{flex:1;min-width:0;font-weight:800;font-size:16px;line-height:1.3}
.tn-mean-icon{flex-shrink:0;transition:transform .2s ease}
.tn-mean[open] .tn-mean-icon{transform:rotate(180deg)}
.tn-mean[open] summary{border-bottom:2px solid var(--ink)}
.tn-mean dl{display:grid;gap:14px;margin:0;padding:18px 20px 20px}
.tn-mean dt{font-size:12px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}
.tn-mean dd{margin:4px 0 0;font-size:16px;line-height:1.65}

/* Ім'я чи дата: числа життєвого шляху плашками */
.tn-section .tn-date-link{margin-top:18px;font-size:15px}
.tn-chips{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.tn-chips a{display:inline-flex;align-items:center;min-height:44px;padding:6px 14px;background:#fffdf8;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);font-weight:800;font-size:14px;line-height:1.3;transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
.tn-chips a:hover{background:var(--mint);transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.tn-section .tn-fine{margin-top:24px;font-size:13px;line-height:1.5;color:var(--dim)}

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

/* Ще безкоштовно */
.tn-aside{position:sticky;top:24px;min-width:0}
.tn-related{padding:24px;background:#fffdf8;border:2px solid var(--ink);box-shadow:5px 5px 0 var(--ink)}
.tn-related h2{font-size:20px;line-height:1.2;letter-spacing:-.045em;margin:0 0 14px}
.tn-related ul{display:grid;gap:0;margin:0;padding:0;list-style:none}
.tn-related li+li{border-top:2px solid var(--ink)}
.tn-related a{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-items:center;min-height:44px;padding:12px 0}
.tn-related a strong{grid-column:1;font-weight:850;font-size:15px;line-height:1.3}
.tn-related a span{grid-column:1;margin-top:3px;font-size:13px;line-height:1.45;color:var(--dim)}
.tn-related a svg{grid-column:2;grid-row:1/span 2;flex-shrink:0}
.tn-related a:hover strong{color:var(--blue)}

@media(max-height:720px){.tn-aside{position:static}}
@media(max-width:1000px){
  .tn-columns{grid-template-columns:minmax(0,1fr)}
  .tn-aside{position:static;margin-top:56px}
  .tn-related{padding:0;background:none;border:0;box-shadow:none;border-top:2px solid var(--ink);padding-top:30px}
  .tn-related h2{font-size:clamp(24px,2.8vw,32px);margin-bottom:10px}
  .tn-related ul{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
  .tn-related li+li{border-top:0}
  .tn-related li{border-bottom:2px solid var(--ink)}
}
@media(max-width:900px){
  .tn-calc{grid-template-columns:minmax(0,1fr);gap:20px}
  .tn-calc-copy>p:last-child{max-width:none}
  .tn-cards{grid-template-columns:minmax(0,1fr)}
  .tn-tables{grid-template-columns:minmax(0,1fr);max-width:440px}
}
@media(max-width:620px){
  .tn-main{padding-block:22px 70px}
  .tn-crumbs{margin-bottom:24px;font-size:12px}
  .tn-crumbs li+li::before{margin:0 7px}
  .tn-head{padding-bottom:28px}
  .tn-head h1{font-size:clamp(30px,8.8vw,40px);letter-spacing:-.065em;margin:12px 0 16px}
  .tn-lead{font-size:16px}
  .tn-calc{padding:20px;box-shadow:4px 4px 0 var(--ink)}
  .tn-calc h2{font-size:clamp(26px,7.4vw,32px);margin:10px 0}
  .tn-form{flex-direction:column;align-items:stretch}
  .tn-form .button{width:100%;justify-content:space-between;padding-inline:18px}
  .tn-result{margin-top:40px}
  .tn-result-head h2{margin-bottom:20px}
  .tn-cards{gap:16px}
  .tn-card{padding:18px;gap:12px;box-shadow:4px 4px 0 var(--ink)}
  .tn-card-top{gap:14px}
  .tn-card-digit{font-size:64px}
  .tn-card-keyword{font-size:20px;padding-top:12px}
  .tn-breakdown{padding:18px 16px}
  /* Вісім літер (звичайне прізвище) вміщаються в один рядок і на 360 px */
  .tn-letters{gap:4px}
  .tn-letters li{width:32px}
  .tn-letter{font-size:17px}
  .tn-sums,.tn-defs{grid-template-columns:minmax(0,1fr);gap:6px}
  .tn-sum dd,.tn-def dd{margin-bottom:10px}
  .tn-sum:last-child dd,.tn-def:last-child dd{margin-bottom:0}
  .tn-sum dd{font-size:15px}
  .tn-next{display:grid;gap:16px}
  .tn-next .button{width:100%;justify-content:space-between;padding-inline:18px}
  .tn-columns{margin-top:56px}
  .tn-section{padding:28px 0}
  .tn-section h2{font-size:22px;gap:10px}
  .tn-section h2::before{width:10px;height:10px}
  .tn-section p{font-size:16px;line-height:1.65}
  .tn-table th,.tn-table td{height:36px}
  .tn-table td{font-size:15px}
  .tn-example{padding:16px}
  .tn-example li{font-size:15px}
  .tn-mean summary{padding:8px 12px;gap:12px}
  .tn-mean-n{font-size:22px}
  .tn-mean-key{font-size:15px}
  .tn-mean dl{padding:16px}
  .tn-mean dd{font-size:15px}
  .tn-chips{gap:8px}
  .tn-chips a{padding:6px 12px;font-size:13px}
  .tn-cta{box-shadow:4px 4px 0 var(--ink)}
  .tn-cta-actions{display:grid}
  .tn-cta-actions .button{width:100%;white-space:normal;padding-inline:16px;justify-content:space-between}
  .tn-related ul{grid-template-columns:minmax(0,1fr)}
}
@media(prefers-reduced-motion:reduce){
  .tn-mean-icon,.tn-chips a{transition:none}
}