/* =====================================================================
   msg-articles.css — оформлення статей блогу «Світ Світла»
   Усі правила обмежені класом .msg-art і не впливають на решту сайту.
   Версія: 2026-10-06
   ===================================================================== */
.msg-art{
  --msg-accent:#EFA31C;--msg-accent-text:#9A5F00;--msg-on-accent:#00171F;
  --msg-ink:#003459;--msg-head:#00171F;--msg-muted:#5B6675;
  --msg-bg:#F8FBFD;--msg-card:#FFFFFF;--msg-line:#E5EBF0;--msg-soft:#FFF7E8;
  --msg-dark:#00171F;--msg-dark-2:#003459;--msg-on-dark:#F8FBFD;--msg-on-dark-muted:#B8C4CE;
  --msg-tip-bg:#EEF8EB;--msg-tip-line:#CDEBC4;--msg-warn-bg:#FFEEF0;--msg-warn-line:#F6C7CB;--msg-info-bg:#EAF7FD;--msg-info-line:#C2E9F8;
  --msg-red:#D5383D;--msg-green:#3E9A27;--msg-blue:#0089BF;--msg-lamp:#FFD27A;
  --msg-svg-mat:#E3E8EC;--msg-svg-line:#8C99A5;--msg-gyps:#F6F3EC;
  --msg-radius:8px;--msg-shadow:0 4px 20px rgba(37,38,39,.10);
  color:var(--msg-ink);font-size:16px;line-height:1.7;max-width:900px;margin:0 auto}
.msg-art *{box-sizing:border-box}
.msg-art h2,.msg-art h3{color:var(--msg-head)}
.msg-art h2{font-size:26px;line-height:1.3;margin:44px 0 16px;padding-bottom:10px;border-bottom:2px solid var(--msg-line);position:relative}
.msg-art h2::after{content:"";position:absolute;left:0;bottom:-2px;width:72px;height:2px;background:var(--msg-accent)}
.msg-art h3{font-size:20px;margin:28px 0 10px}
.msg-art p{margin:0 0 14px}
.msg-art b{color:var(--msg-head)}
.msg-art a{color:var(--msg-accent-text);text-decoration:underline;text-decoration-color:var(--msg-accent);text-underline-offset:3px;transition:color .2s}
.msg-art a:hover{color:var(--msg-head)}
.msg-art img{max-width:100%;height:auto;display:block;border-radius:var(--msg-radius)}
.msg-art svg{max-width:100%;height:auto;display:block}

/* Кольори схем */
.msg-art svg text{font-family:inherit}
.msg-art svg .t{fill:var(--msg-head)}
.msg-art svg .t-m{fill:var(--msg-muted)}
.msg-art svg .t-b{fill:var(--msg-blue)}
.msg-art svg .f-head{fill:var(--msg-head)}
.msg-art svg .f-bg{fill:var(--msg-bg)}
.msg-art svg .f-card{fill:var(--msg-card)}
.msg-art svg .f-gyps{fill:var(--msg-gyps)}
.msg-art svg .f-mat{fill:var(--msg-svg-mat)}
.msg-art svg .f-line{fill:var(--msg-svg-line)}
.msg-art svg .f-acc{fill:var(--msg-accent)}
.msg-art svg .f-lamp{fill:var(--msg-lamp)}
.msg-art svg .f-blue{fill:var(--msg-blue)}
.msg-art svg .f-green{fill:var(--msg-green)}
.msg-art svg .f-dark{fill:var(--msg-dark-2)}
.msg-art svg .s-head{stroke:var(--msg-head)}
.msg-art svg .s-line{stroke:var(--msg-svg-line)}
.msg-art svg .s-mat{stroke:var(--msg-svg-mat)}
.msg-art svg .s-mut{stroke:var(--msg-muted)}
.msg-art svg .s-acc{stroke:var(--msg-accent)}
.msg-art svg .s-lamp{stroke:var(--msg-lamp)}
.msg-art svg .s-blue{stroke:var(--msg-blue)}
.msg-art svg .s-red{stroke:var(--msg-red)}
.msg-art svg .s-green{stroke:var(--msg-green)}
.msg-art svg .st-lamp{stop-color:var(--msg-lamp)}
.msg-art svg .mk circle{fill:var(--msg-accent);stroke:var(--msg-card);stroke-width:2}
.msg-art svg .mk text{fill:var(--msg-on-accent);font-size:12px;font-weight:700;text-anchor:middle}

/* Лід */
.msg-lead{background:var(--msg-soft);border-left:4px solid var(--msg-accent);padding:22px 26px;border-radius:0 var(--msg-radius) var(--msg-radius) 0;font-size:17.5px;margin:0 0 26px}
.msg-lead p:last-child{margin:0}

/* Ключові цифри */
.msg-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0 0 30px}
.msg-fact{background:var(--msg-card);border:1px solid var(--msg-line);border-radius:var(--msg-radius);padding:16px 12px;text-align:center}
.msg-fact b{display:block;font-size:24px;color:var(--msg-accent-text);line-height:1.2}
.msg-fact span{font-size:13px;color:var(--msg-muted);line-height:1.35;display:block;margin-top:4px}

/* Зміст */
.msg-toc{background:var(--msg-bg);border:1px solid var(--msg-line);border-radius:var(--msg-radius);padding:20px 26px;margin:0 0 30px}
.msg-toc-title{font-weight:700;font-size:17px;margin:0 0 8px;color:var(--msg-head)}
.msg-toc ol{margin:0;padding-left:22px;columns:2;column-gap:30px}
.msg-toc li{margin:3px 0;break-inside:avoid}
.msg-toc li::marker{color:var(--msg-accent-text);font-weight:700}
.msg-toc a{text-decoration:none;color:var(--msg-ink)}
.msg-toc a:hover{color:var(--msg-accent-text)}

/* Фігури та легенда схеми */
.msg-fig{margin:26px 0;background:var(--msg-card);border:1px solid var(--msg-line);border-radius:var(--msg-radius);padding:18px}
.msg-fig figcaption{font-size:14px;color:var(--msg-muted);margin-top:10px;text-align:center;font-style:italic}
.msg-legend{list-style:none;margin:16px 0 0;padding:16px 0 0;border-top:1px solid var(--msg-line);display:grid;grid-template-columns:repeat(2,1fr);gap:8px 22px;font-size:14.5px;line-height:1.5}
.msg-legend li{position:relative;padding-left:34px}
.msg-legend li span{position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;background:var(--msg-accent);color:var(--msg-on-accent);font-size:12px;font-weight:700;line-height:24px;text-align:center}
.msg-legend li.msg-dim span{background:var(--msg-dark-2);color:var(--msg-on-dark);border-radius:4px}

/* Список матеріалів */
.msg-tools{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;list-style:none;padding:0;margin:0 0 20px}
.msg-tools li{background:var(--msg-card);border:1px solid var(--msg-line);border-radius:var(--msg-radius);padding:11px 14px 11px 44px;position:relative}
.msg-tools li::before{content:"✓";position:absolute;left:14px;top:12px;width:20px;height:20px;border-radius:50%;background:var(--msg-accent);color:var(--msg-on-accent);font-size:12px;line-height:20px;text-align:center;font-weight:700}

/* Кроки */
.msg-steps{list-style:none;padding:0;margin:0;counter-reset:msgstep}
.msg-step{counter-increment:msgstep;position:relative;padding:0 0 26px 70px}
.msg-step::before{content:counter(msgstep);position:absolute;left:0;top:0;width:48px;height:48px;border-radius:50%;background:var(--msg-accent);color:var(--msg-on-accent);font-weight:700;font-size:20px;line-height:48px;text-align:center;box-shadow:0 0 0 6px var(--msg-soft)}
.msg-step::after{content:"";position:absolute;left:23px;top:58px;bottom:6px;width:2px;background:var(--msg-line)}
.msg-step:last-child::after{display:none}
.msg-step h3{margin:8px 0 8px}
.msg-step-meta{display:inline-block;font-size:13px;background:var(--msg-bg);border:1px solid var(--msg-line);border-radius:20px;padding:2px 12px;color:var(--msg-muted);margin-bottom:8px}
.msg-step ul{margin:0 0 14px;padding-left:20px}

/* Блоки-підказки */
.msg-note{border-radius:var(--msg-radius);padding:16px 20px 16px 58px;margin:18px 0;position:relative}
.msg-note::before{position:absolute;left:18px;top:14px;font-size:24px;line-height:1}
.msg-note p:last-child{margin:0}
.msg-tip{background:var(--msg-tip-bg);border:1px solid var(--msg-tip-line)}
.msg-tip::before{content:"\1F4A1"}
.msg-warn{background:var(--msg-warn-bg);border:1px solid var(--msg-warn-line)}
.msg-warn::before{content:"\26A0\FE0F"}
.msg-info{background:var(--msg-info-bg);border:1px solid var(--msg-info-line)}
.msg-info::before{content:"\1F50C"}

/* Таблиця */
.msg-table-wrap{overflow-x:auto;margin:18px 0 24px;border-radius:var(--msg-radius);border:1px solid var(--msg-line)}
.msg-table{width:100%;border-collapse:collapse;font-size:15px;min-width:520px}
.msg-table th{background:var(--msg-dark);color:var(--msg-on-dark);text-align:left;padding:12px 14px;font-weight:600}
.msg-table td{padding:11px 14px;border-top:1px solid var(--msg-line);vertical-align:top;background:var(--msg-card)}
.msg-table tr:nth-child(even) td{background:var(--msg-bg)}
.msg-table td:first-child{font-weight:600;color:var(--msg-head)}

/* Переваги */
.msg-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:16px 0 24px}
.msg-card{background:var(--msg-card);border:1px solid var(--msg-line);border-radius:var(--msg-radius);padding:18px 20px;transition:box-shadow .2s,transform .2s}
.msg-card:hover{box-shadow:var(--msg-shadow);transform:translateY(-2px)}
.msg-card-ico{font-size:28px;line-height:1;margin-bottom:8px}
/* Іконки через CSS-коди: CMS зберігає текст без підтримки 4-байтних emoji, тому в HTML їх не пишемо */
.msg-card-ico::before{display:inline-block}.msg-i-sparkle::before{content:"\2728"}.msg-i-eye::before{content:"\1F441\FE0F"}.msg-i-palette::before{content:"\1F3A8"}.msg-i-wrench::before{content:"\1F527"}.msg-i-plug::before{content:"\1F50C"}.msg-i-bolt::before{content:"\26A1"}.msg-i-candle::before{content:"\1F56F\FE0F"}.msg-i-sliders::before{content:"\1F39B\FE0F"}.msg-i-bulb::before{content:"\1F4A1"}.msg-i-brick::before{content:"\1F9F1"}
.msg-card h3{margin:0 0 6px;font-size:18px}
.msg-card p{margin:0;font-size:15px}

/* Помилки */
.msg-mistakes{list-style:none;padding:0;margin:0 0 20px}
.msg-mistakes li{padding:12px 16px 12px 46px;position:relative;border-bottom:1px dashed var(--msg-line)}
.msg-mistakes li::before{content:"✕";position:absolute;left:12px;top:14px;width:22px;height:22px;border-radius:50%;background:var(--msg-red);color:#fff;font-size:12px;line-height:22px;text-align:center;font-weight:700}

/* Категорії */
.msg-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:16px 0 26px}
.msg-cat{display:block;background:var(--msg-card);border:1px solid var(--msg-line);border-radius:var(--msg-radius);padding:16px 18px;text-decoration:none!important;color:var(--msg-ink)!important;transition:border-color .2s,box-shadow .2s}
.msg-cat:hover{border-color:var(--msg-accent);box-shadow:var(--msg-shadow)}
.msg-cat b{display:block;font-size:16px;margin-bottom:4px}
.msg-cat span{font-size:13.5px;color:var(--msg-muted);line-height:1.45;display:block}
.msg-cat b::after{content:" →";color:var(--msg-accent)}

/* FAQ */
.msg-faq details{background:var(--msg-card);border:1px solid var(--msg-line);border-radius:var(--msg-radius);margin:0 0 10px;overflow:hidden}
.msg-faq summary{cursor:pointer;padding:14px 48px 14px 18px;font-weight:600;list-style:none;position:relative;color:var(--msg-head)}
.msg-faq summary::-webkit-details-marker{display:none}
.msg-faq summary::after{content:"+";position:absolute;right:18px;top:10px;font-size:24px;color:var(--msg-accent);transition:transform .2s}
.msg-faq details[open] summary::after{transform:rotate(45deg)}
.msg-faq details[open] summary{border-bottom:1px solid var(--msg-line)}
.msg-faq .msg-faq-a{padding:14px 18px}
.msg-faq .msg-faq-a p:last-child{margin:0}

/* CTA */
.msg-cta{background:linear-gradient(135deg,var(--msg-dark-2) 0%,var(--msg-dark) 100%);color:var(--msg-on-dark);border-radius:12px;padding:30px 32px;margin:36px 0 10px;text-align:center}
.msg-art .msg-cta h2{color:var(--msg-on-dark);border:0;margin:0 0 10px;padding:0;font-size:24px}
.msg-cta h2::after{display:none}
.msg-art .msg-cta p{color:var(--msg-on-dark-muted)!important;margin:0 0 18px}
.msg-art .msg-btn{display:inline-block;background:var(--msg-accent);color:var(--msg-on-accent);text-decoration:none;font-weight:700;padding:13px 28px;border-radius:30px;margin:4px 6px;transition:filter .2s}
.msg-art .msg-btn:hover{filter:brightness(1.08);color:var(--msg-on-accent)}
.msg-art .msg-btn-o{background:transparent;border:2px solid var(--msg-accent);color:var(--msg-on-dark)}
.msg-art .msg-btn-o:hover{background:rgba(239,163,28,.15);color:var(--msg-on-dark)}

/* Темна тема сайту */
.dark-theme .msg-art,[data-bs-theme="dark"] .msg-art{
  --msg-accent-text:#F2B547;--msg-ink:#C9D2DA;--msg-head:#F8FCFF;--msg-muted:#9AA3AB;
  --msg-bg:#1B1B1B;--msg-card:#141414;--msg-line:#2C2C2C;--msg-soft:#22201B;
  --msg-dark:#0B1A22;--msg-dark-2:#12303F;
  --msg-tip-bg:#16241A;--msg-tip-line:#24402B;--msg-warn-bg:#2A1719;--msg-warn-line:#4A2427;--msg-info-bg:#122630;--msg-info-line:#1D4152;
  --msg-red:#F06A6E;--msg-green:#62C84F;--msg-blue:#3DB9EC;
  --msg-svg-mat:#3A3F44;--msg-svg-line:#6E7781;--msg-gyps:#2A2824}

@media (max-width:760px){
  .msg-art{font-size:15.5px}
  .msg-art h2{font-size:22px;margin-top:34px}
  .msg-facts{grid-template-columns:repeat(2,1fr)}
  .msg-toc ol{columns:1}
  .msg-tools,.msg-grid,.msg-legend{grid-template-columns:1fr}
  .msg-cats{grid-template-columns:1fr}
  .msg-step{padding-left:58px}
  .msg-step::before{width:40px;height:40px;line-height:40px;font-size:17px}
  .msg-step::after{left:19px;top:50px}
  .msg-fig{padding:10px}
  .msg-cta{padding:24px 18px}
}
/* Діаграми-смуги та формула */
.msg-bars{margin:4px 0 0}
.msg-bar{display:grid;grid-template-columns:210px 1fr;gap:4px 16px;align-items:center;margin:0 0 14px}
.msg-bar-l b{display:block;color:var(--msg-head);font-size:15px;line-height:1.3}
.msg-bar-l span{display:block;font-size:13px;color:var(--msg-muted);line-height:1.35}
.msg-bar-t{position:relative;height:28px;background:var(--msg-bg);border:1px solid var(--msg-line);border-radius:4px}
.msg-bar-t i{position:absolute;top:3px;bottom:3px;border-radius:3px;background:var(--msg-accent)}
.msg-bar-t i.msg-b-soft{background:var(--msg-lamp)}
.msg-bar-t i.msg-b-dark{background:var(--msg-dark-2)}
.msg-axis{display:grid;grid-template-columns:210px 1fr;gap:16px;font-size:12px;color:var(--msg-muted);margin-top:-4px}
.msg-axis div{display:flex;justify-content:space-between}
.msg-formula{background:var(--msg-bg);border:1px dashed var(--msg-accent);border-radius:var(--msg-radius);padding:14px 18px;text-align:center;font-size:17px;line-height:1.6;color:var(--msg-head);margin:14px 0}
@media (max-width:760px){
  .msg-bar,.msg-axis{grid-template-columns:1fr}
  .msg-axis>span{display:none}
}
/* Шкала колірної температури, розшифровка маркування, вузьке фото */
.msg-scale{margin:6px 0 0}
/* кольори градієнта — наближення реального кольору світла, тому задані напряму */
.msg-scale-bar{height:46px;border-radius:var(--msg-radius);border:1px solid var(--msg-line);background:linear-gradient(90deg,#FF8912 0%,#FFA757 17%,#FFB46B 23%,#FFD1A3 42%,#FFE4CE 62%,#FFF6F2 84%,#E8EEFF 100%)}
.msg-scale-ticks{position:relative;height:64px;margin-top:4px}
.msg-scale-ticks span{position:absolute;top:0;transform:translateX(-50%);text-align:center;font-size:12.5px;line-height:1.3;color:var(--msg-muted);white-space:nowrap}
.msg-scale-ticks span:first-child{transform:none;text-align:left}
.msg-scale-ticks span::before{content:"";display:block;width:2px;height:8px;background:var(--msg-head);margin:0 auto 4px}
.msg-scale-ticks span:first-child::before{margin-left:0}
.msg-scale-ticks b{display:block;color:var(--msg-head);font-size:14px}
.msg-scale-ticks i{font-style:normal}
.msg-code{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:6px 0 4px}
.msg-code div{background:var(--msg-card);border:2px solid var(--msg-accent);border-radius:var(--msg-radius);padding:10px 20px;text-align:center;min-width:150px}
.msg-code b{display:block;font-size:36px;line-height:1.1;color:var(--msg-head);letter-spacing:2px}
.msg-code span{font-size:13.5px;color:var(--msg-muted)}
.msg-fig-narrow img{max-width:520px;width:100%;margin:0 auto}
@media (max-width:760px){
  .msg-scale-ticks i{display:none}
  .msg-scale-ticks{height:44px}
}