/* Згенеровано web/packages/ui/scripts/sync-maket.mjs з design/maket/e. НЕ ПРАВИТИ руками — правки зникнуть при наступному запуску. */
/* ZRAZU · E — розділ «ssl»: SSL: хаб, сторінки сертифікатів із шаблону, автовстановлення, «який сертифікат потрібен», «чому 200 днів».
   Файл-власник розділу: пише лише автор розділу. Спільне (токени, компоненти, раскладки) тут не перевизначається —
   якщо бракує компонента, попросіть власника дизайн-системи (AUTHORING.md). Класи — з префіксом розділу. */

/* ---------- Сторінка сертифіката /ssl/<type>/ (образець; префікс sc-) ---------- */
.sc-hero{padding-bottom:40px}
.sc-hero .lead{max-width:60ch}
.sc-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:48px;align-items:start;padding-top:8px}
.sc-main{min-width:0;display:flex;flex-direction:column;gap:52px}
.sc-sec .h3{margin-bottom:14px}
.sc-sec .muted{margin:0 0 18px;max-width:60ch}
.wrap-narrow > .sc-sec + .sc-sec{margin-top:40px}   /* у статтях секції йшли без відступу: посилання в кінці секції липло до наступного H2 */
.sc-cmp th[scope=row]{font-size:15px;font-weight:560;text-transform:none;letter-spacing:0;color:var(--text-2);white-space:normal;border-bottom:1px solid var(--line);padding:16px 18px}
.sc-cmp tr:last-child th{border-bottom:0}
.sc-cmp td{font-size:15px}
.sc-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.sc-steps li{display:flex;flex-direction:column;gap:6px;padding:18px;border-radius:var(--r-md);background:var(--fill-1);border:1px solid var(--line);font-size:15px;color:var(--text-2);min-width:0}
.sc-steps b{color:var(--text);font-weight:650}
.sc-n{font-family:var(--mono);font-size:13px;color:var(--text-3)}
.sc-life{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:14px}
.sc-life li{display:grid;grid-template-columns:minmax(0,1fr) 110px minmax(150px,auto);align-items:center;gap:6px 16px;font-size:15px;color:var(--text-2)}
.sc-life b{color:var(--text);font-variant-numeric:tabular-nums}
.sc-bar{display:block;height:10px;border-radius:6px;background:var(--bar-track);overflow:hidden}
.sc-bar i{display:block;height:100%;width:calc(var(--w) * 100%);border-radius:6px;background:var(--beam)}
.sc-side{position:sticky;top:calc(var(--hdr) + 20px);display:flex;flex-direction:column;gap:12px}
.sc-plan{padding:26px 24px 24px}
.sc-plan .vat-seg{align-self:flex-start}
.sc-le a{color:var(--text);text-underline-offset:3px}
.sc-code{margin-top:14px;width:max-content;max-width:100%}

/* «Коли потрібен / коли не потрібен» + прев'ю OV + примітка EV */
.sc-need-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.sc-need-col{padding:16px 18px;border-radius:var(--r-md);background:var(--fill-1);border:1px solid var(--line);font-size:15px;color:var(--text-2)}
.sc-need-col p{margin:0}
.sc-need-l{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-weight:650;color:var(--text)}
.sc-need-yes .sc-need-l .ic{color:var(--free)}
.sc-need-no .sc-need-l .ic{color:var(--text-3)}
.sc-ov-prev{margin-top:16px;padding:16px 18px;border-radius:var(--r-md);background:var(--fill-1);border:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.sc-ov-l{margin:0;font-size:13px;color:var(--text-3);text-transform:uppercase;letter-spacing:.04em}
.sc-ev-note{margin-top:16px}

/* ---------- Хаб /ssl/ (префікс sh-) ---------- */
.sh-hero .lead{max-width:62ch}
.sh-check{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;padding:26px 28px;border-radius:var(--r-lg);background:var(--fill-1);border:1px solid var(--line);margin-bottom:52px}
.sh-check-t{flex:1;min-width:220px}
.answer + .sh-check{margin-top:20px}
/* Статті розділу (/ssl/lets-encrypt/, /lifetime/, /choose/, /auto-install/): шапка — у звичайній .wrap зліва,
   а вузька колонка тексту стояла по центру — лівий край тексту не збігався з H1 і хлібними крихтами. */
html[data-layout="site"] main > .wrap.wrap-narrow{margin-left:calc((100% - min(1120px, 100% - 2*var(--gut))) / 2);margin-right:auto}   /* «Коротка відповідь» і картка перевірки стояли впритул */
.sh-check-t p{margin:6px 0 0;color:var(--text-2);max-width:56ch}
.sh-check h2{margin:0}
.sh-states{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.sh-state{display:flex;flex-direction:column;gap:10px;padding:18px;border-radius:var(--r-md);background:var(--fill-1);border:1px solid var(--line);min-width:0}
.sh-state-h{display:flex;align-items:flex-start;gap:8px;margin:0;font-size:15px;font-weight:650;color:var(--text)}
.sh-state-h .ic{flex:none;margin-top:2px}
.sh-state-bad .ic{color:var(--taken)}
.sh-state-ok .ic{color:var(--free)}
.sh-state-info .ic{color:var(--info)}
.sh-state-warn .ic{color:var(--warn)}
.sh-state p{margin:0;font-size:14px;color:var(--text-2)}
.sh-teasers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.sh-teaser{display:flex;flex-direction:column;gap:10px;padding:22px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line);text-decoration:none;color:var(--text);transition:border-color .2s ease}
.sh-teaser:hover{border-color:var(--line-3)}
.sh-teaser .ic-wrap{color:var(--text-2)}
.sh-teaser h3{margin:0;font-size:17px}
.sh-teaser p{margin:0;font-size:14px;color:var(--text-2);flex:1}
.sh-teaser .btn-arrow{align-self:flex-start;margin-top:4px}
.sh-lineup-head{margin-bottom:20px}
.sh-lineup-head p{margin:6px 0 0;max-width:56ch;color:var(--text-2)}
.sh-lineup-foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:20px}

/* ---------- Let's Encrypt /ssl/lets-encrypt/ (префікс sl-) ---------- */
.sl-feat{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.sl-feat li{display:flex;gap:10px;padding:16px 18px;border-radius:var(--r-md);background:var(--fill-1);border:1px solid var(--line);font-size:15px;color:var(--text-2)}
.sl-feat .ic{color:var(--free);margin-top:2px;flex:none}

/* Підпис статті: спільний .byline дає --text-3 (6.6:1 у темній, 5.5:1 у світлій) — це AA, але не AAA,
   а це суцільний текст статті. Піднімаємо до --text-2, як уже зроблено в розділі content.
   Файл вантажать лише сторінки /ssl/*, тож спільний клас не зачеплений. */
.byline{color:var(--text-2)}

/* ---------- Автовстановлення /ssl/auto-install/ (префікс ai-) ---------- */
.ai-ladder{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.ai-rung{display:flex;gap:16px;padding:20px 22px;border-radius:var(--r-md);background:var(--fill-1);border:1px solid var(--line)}
.ai-rung .ai-n{font-family:var(--mono);font-size:13px;color:var(--text-3);flex:none;min-width:22px;padding-top:3px}
.ai-body{display:flex;flex-direction:column;gap:6px;min-width:0}
.ai-body h3{margin:0;font-size:16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ai-body p{margin:0;font-size:15px;color:var(--text-2)}
.ai-rung.ai-priority{background:var(--fill-2);border-color:var(--line-3)}
.ai-rung .auto-code{margin-top:4px}

/* ---------- «Який сертифікат» /ssl/choose/ (префікс sq-) ---------- */
.sq-quiz{display:flex;flex-direction:column;gap:32px;max-width:640px}
.sq-q{border:0;margin:0;padding:0}
.sq-q legend{padding:0;margin-bottom:4px;font-size:17px;font-weight:650;color:var(--text)}
.sq-opts{display:flex;flex-direction:column}
.sq-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.sq-hint{margin:0;font-size:14px;color:var(--text-2)}
.sq-result{margin-top:8px;padding:26px 28px;border-radius:var(--r-lg);background:var(--fill-1);border:1px solid var(--line);display:flex;flex-direction:column;gap:14px;max-width:640px}
.sq-result[data-kind="free"]{border-color:var(--free)}
.sq-result h2{margin:0;font-size:22px}
.sq-result p{margin:0;color:var(--text-2)}
.sq-result .sq-why{font-size:14px}
.sq-result .btn{align-self:flex-start;margin-top:4px}

@media (max-width:1000px){
  .sc-grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .sc-side{position:static;order:-1}
}
@media (max-width:900px){
  .sh-states{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sh-teasers{grid-template-columns:repeat(1,minmax(0,1fr))}
  .sl-feat{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .sc-steps{grid-template-columns:minmax(0,1fr)}
  .sc-life li{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"bar bar" "d t"}
  .sc-life .sc-bar{grid-area:bar}
  .sc-main{gap:40px}
  .sc-need-grid{grid-template-columns:minmax(0,1fr)}
  .sh-states{grid-template-columns:minmax(0,1fr)}
  .sh-check{padding:22px}
  .ai-rung{flex-direction:column;gap:6px}
  .sq-quiz,.sq-result{max-width:none}
}

/* ---- світла тема (власник дизайн-системи, 28.09.2026; темна не змінюється): SSL — фіалковий відтінок продукту ---- */
[data-theme="light"] .sh-check{background:var(--tint-warm);border-color:rgba(var(--tone-ink-b),.12)}
[data-theme="light"] .sh-teaser{box-shadow:var(--card-shadow)}
[data-theme="light"] .sh-teaser:hover{border-color:var(--accent-line)}
[data-theme] .sh-teaser .ic-wrap{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--hue-ssl-bg);color:var(--hue-ssl)}
[data-theme] .sc-n,[data-theme] .ai-n{color:var(--hue-ssl)}
[data-theme="light"] .sc-steps li,[data-theme="light"] .sl-feat li,[data-theme="light"] .ai-rung{background:var(--surface);box-shadow:var(--card-shadow)}
[data-theme="light"] .ai-rung.ai-priority{background:var(--surface);border-color:var(--accent-line)}
[data-theme="light"] .sh-state{background:var(--surface);box-shadow:var(--card-shadow)}