/* Спільні стилі статей бази знань. Підключаються з /baza/*.html */
:root{ --cream:#FAF5EC; --navy:#12233F; --amber:#F2A31E; --ink:#1C1A15; --mut:#57534b; --line:rgba(18,35,63,.12); }
*{box-sizing:border-box}
html{color-scheme:light;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:'Onest',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.6}
img{max-width:100%;display:block}
a{color:#1560F0}

.wrap{max-width:760px;margin:0 auto;padding:0 20px}

/* ── header ── */
.top{background:var(--navy);color:#EAF0F7}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-block:13px}
.top a{color:#EAF0F7;text-decoration:none;font-weight:700;font-size:15px}
.top .cta{background:var(--amber);color:#1C1A15;padding:8px 15px;border-radius:10px;font-size:13.5px;font-weight:800;white-space:nowrap}

/* ── article ── */
article{padding:clamp(26px,5vw,44px) 0 10px}
.crumbs{font-size:13px;color:#7a756a;margin-bottom:14px}
.crumbs a{color:#7a756a}
h1{font-family:'Unbounded',sans-serif;font-weight:800;color:var(--navy);font-size:clamp(25px,5.6vw,40px);line-height:1.12;letter-spacing:-.02em;margin:0;text-wrap:balance}
.meta{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:14px;font-size:13.5px;color:#7a756a}
.meta b{color:var(--mut);font-weight:600}

h2{font-family:'Unbounded',sans-serif;font-weight:700;color:var(--navy);font-size:clamp(20px,4.4vw,27px);line-height:1.2;letter-spacing:-.015em;margin:clamp(34px,6vw,48px) 0 0}
h3{font-weight:800;color:var(--navy);font-size:clamp(16px,3.6vw,19px);margin:26px 0 0}
p{margin:14px 0 0;font-size:clamp(15.5px,3.9vw,17.5px);color:var(--mut)}
p b,li b{color:var(--navy)}
ul,ol{margin:14px 0 0;padding-left:22px;font-size:clamp(15.5px,3.9vw,17.5px);color:var(--mut)}
li{margin-top:8px}

/* answer box — the 40-60 word summary AI and skimmers both take */
.answer{background:#fff;border:1px solid var(--line);border-left:4px solid var(--amber);border-radius:14px;padding:clamp(16px,3.4vw,22px);margin-top:22px;box-shadow:0 14px 30px -24px rgba(18,35,63,.5)}
.answer p{margin:0;font-size:clamp(16px,4vw,18px);color:var(--navy)}
.answer p+p{margin-top:10px}

.note{background:#FBF3F1;border:1px solid #eecfc7;border-radius:14px;padding:clamp(15px,3.2vw,20px);margin-top:22px}
.note p{margin:0;font-size:clamp(14.5px,3.6vw,16px);color:#7a4a3a}
.note strong{color:#A0341B}

.tip{background:#EDF6F0;border:1px solid #c6e3d3;border-radius:14px;padding:clamp(15px,3.2vw,20px);margin-top:22px}
.tip p{margin:0;font-size:clamp(14.5px,3.6vw,16px);color:#2b5a42}
.tip strong{color:#186B3E}

/* voivodeship cards — a 16-row two-column table is unreadable on a phone */
.voi{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-top:22px}
.v{background:#fff;border:1px solid var(--line);border-radius:14px;padding:15px 16px}
.v h4{margin:0;font-size:15.5px;font-weight:800;color:var(--navy)}
.v .row{margin-top:11px;padding-top:11px;border-top:1px solid rgba(18,35,63,.08)}
.v .row:first-of-type{border-top:0;padding-top:0}
.v .amt{font-weight:800;font-size:13px;color:var(--amber);letter-spacing:.3px}
.v .who{font-size:13px;color:var(--mut);margin-top:2px}
.v .acc{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;color:var(--navy);margin-top:4px;word-break:break-word;font-weight:600}
.v .src{font-size:12px;margin-top:5px}

table{width:100%;border-collapse:collapse;margin-top:18px;font-size:15px}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
th{background:#fff;font-weight:800;color:var(--navy);font-size:14px}
td{color:var(--mut)}
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

details{background:#fff;border:1px solid var(--line);border-radius:14px;margin-top:10px;overflow:hidden}
summary{cursor:pointer;padding:16px 18px;font-weight:700;color:var(--navy);font-size:clamp(15px,3.8vw,17px);list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";float:right;color:var(--amber);font-weight:800}
details[open] summary::after{content:"−"}
details p{padding:0 18px 16px;margin:0}

/* offer */
.offer{background:var(--navy);color:#EAF0F7;border-radius:20px;padding:clamp(22px,4.6vw,34px);margin:clamp(34px,6vw,48px) 0 0;text-align:center}
.offer h2{color:#fff;margin:0;font-size:clamp(19px,4.2vw,26px)}
.offer p{color:#b9c5d8;margin-top:12px}
.offer .buy{display:inline-flex;align-items:center;justify-content:center;gap:9px;margin-top:20px;background:var(--amber);color:#1C1A15;font-weight:800;font-size:clamp(15px,3.9vw,17px);padding:15px 30px;border-radius:14px;text-decoration:none;box-shadow:0 14px 30px -12px rgba(242,163,30,.75)}
.offer small{display:block;margin-top:12px;font-size:13px;color:#8fa0bb}

footer{margin-top:clamp(40px,7vw,64px);background:var(--navy);color:#c3cede;padding:26px 0}
footer .wrap{font-size:14px}
footer a{color:#c3cede}
footer nav{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:12px}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Related reading: three hand-picked next steps, then the whole shelf. */
.related{ margin:44px 0 8px; padding:22px 22px 18px; background:#F3F6FB; border:1px solid #DFE6EF; border-radius:16px }
.related h2{ font-size:19px; margin:0 0 12px }
.related ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px }
.related li a{ display:block; padding:12px 14px; background:#fff; border:1px solid #DFE6EF; border-radius:12px; color:#12233F; text-decoration:none; font-weight:600; line-height:1.35 }
.related li a:hover{ border-color:#12233F }
.related p{ margin:14px 0 0; font-size:14px }
.related p a{ color:#12233F; font-weight:700 }