/* ==========================================================================
   Arkona: artykul.css (tylko strony artykułów w Czytelni)
   ========================================================================== */
:root { --measure: 840px; }
/* ── artykuł ── */
.art{ max-width:var(--measure); margin:0 auto; padding:clamp(40px,8vw,68px) 0 0; font-size:17px; line-height:1.72; }
.art .wide{ max-width:1180px; margin-left:calc((var(--measure) - min(1180px, 92vw))/2); width:min(1180px,92vw); }
.art-kicker{ margin:0 0 var(--space-2); font-size:12px; letter-spacing:.26em; text-transform:uppercase; color:var(--color-accent-700); }
.art h1{ margin:0 0 var(--space-4); font-family:var(--font-heading); font-weight:400;
  font-size:clamp(30px,4.4vw,46px); line-height:1.12; }
.art-lead{ margin:0 0 var(--space-3); font-size:19px; line-height:1.6; color:var(--color-neutral-800); text-wrap:pretty; }
.art-meta{ margin:0; font-size:13.5px; color:var(--color-neutral-700); }
.art-head{ text-align:center; }
.art-head .art-kicker{ margin:0 0 var(--space-3); font-size:11.5px; letter-spacing:.22em; }
.art-head h1{ margin:0 0 var(--space-3); text-transform:uppercase; font-weight:600; letter-spacing:.012em;
  color:var(--color-accent-700); font-size:clamp(23px,3.1vw,34px); line-height:1.22; text-wrap:balance; }
.art-head .art-lead{ font-style:italic; font-size:17.5px; margin:0 0 var(--space-3); }
.art-head .art-meta{ font-size:12.5px; line-height:1.65; max-width:74ch; margin:0 auto; }
.art-rule{ border:0; height:3px; margin:var(--space-5) 0 var(--space-7);
  border-top:3px solid var(--color-accent); border-bottom:1px solid var(--color-accent); }
h2.section{ font-family:var(--font-heading); font-weight:var(--font-heading-weight); font-size:clamp(23px,2.8vw,30px);
  color:var(--color-text); border-bottom:1px solid var(--color-divider); padding-bottom:8px; margin:calc(var(--space-8)*1.4) 0 var(--space-3); }
h2.section .num{ color:var(--color-accent); margin-right:.45em; font-size:.72em; letter-spacing:.04em; }
h3.sub{ font-family:var(--font-heading); font-size:21px; color:var(--color-text); margin:var(--space-8) 0 var(--space-2); }
p{ margin:0 0 var(--space-3); }
.lead{ color:var(--color-neutral-800); font-size:16px; }
.nota{ font-size:13.5px; color:var(--color-neutral-700); font-style:italic; margin-top:5px; display:block; }

.callout{ background:var(--color-surface); border:1px solid var(--color-divider); border-left:4px solid var(--color-accent);
  border-radius:var(--radius-md); padding:var(--space-4) var(--space-6); margin:var(--space-6) 0; font-size:15.5px; line-height:1.65; }
.callout.warn{ border-left-color:var(--color-accent-700); }
.callout.good{ border-left-color:var(--color-accent-2-600); }
.callout.tecova{ border-left-width:5px; border-left-color:var(--color-accent); background:color-mix(in srgb, var(--color-accent-100) 60%, var(--color-surface)); }
.callout.tecova h4{ color:var(--color-accent-700); }
.callout h4{ margin:0 0 var(--space-2); font-size:17px; font-family:var(--font-heading); color:var(--color-text); }
.callout p{ margin:0 0 var(--space-2); } .callout p:last-child{ margin-bottom:0; }

details{ background:var(--color-surface); border:1px solid var(--color-divider); border-radius:var(--radius-md);
  padding:var(--space-3) var(--space-4); margin:var(--space-6) 0; font-size:15.5px; }
details summary{ cursor:pointer; font-family:var(--font-heading); font-weight:var(--font-heading-weight);
  font-size:17px; color:var(--color-text); }
details summary::marker{ color:var(--color-accent); }
details[open] summary{ margin-bottom:var(--space-3); }
details.ai{ border-left:4px solid var(--color-accent); }
details.tecova{ border-left:5px solid var(--color-accent);
  background:color-mix(in srgb, var(--color-accent-100) 60%, var(--color-surface)); }
details.tecova summary{ color:var(--color-accent-700); }

.table-scroll{ overflow-x:auto; margin:var(--space-4) 0; border:1px solid var(--color-divider);
  border-radius:var(--radius-md); background:var(--color-surface); }
table{ width:100%; border-collapse:collapse; font-size:14px; min-width:900px; }
thead th{ background:var(--color-neutral-800); color:var(--color-neutral-100); text-align:left;
  padding:10px 12px; font-family:var(--font-heading); font-weight:var(--font-heading-weight);
  font-size:14px; letter-spacing:.02em; vertical-align:bottom; }
tbody tr{ border-bottom:1px solid var(--color-divider); vertical-align:top; }
tbody tr:nth-child(even){ background:color-mix(in srgb, var(--color-text) 3.5%, transparent); }
td{ padding:11px 12px; line-height:1.55; }
td.kolor-col{ min-width:250px; } td.barwnik-col{ min-width:230px; }

.swatch-row{ display:flex; flex-wrap:wrap; gap:9px; }
.swatch{ width:84px; text-align:center; font-size:11.5px; line-height:1.35; }
.swatch .chip{ width:62px; height:46px; margin:0 auto 4px; border-radius:var(--radius-sm); border:1px solid color-mix(in srgb,#000 28%,transparent); }
.swatch .chip.measured{ box-shadow:0 0 0 2px var(--color-accent-2-600); }
.swatch .lbl{ font-weight:600; color:var(--color-neutral-800); display:block; }
.swatch .code{ font-family:ui-monospace,"SF Mono",Consolas,monospace; font-size:10.5px; color:var(--color-neutral-700); display:block; }

.tier{ display:inline-block; padding:1px 8px; border-radius:10px; font-size:11.5px; font-weight:700;
  letter-spacing:.02em; white-space:nowrap; margin-bottom:3px; font-family:var(--font-body); }
.tier.a{ background:#cfe0c2; color:#28421a } .tier.b{ background:#e3e7c4; color:#4d551a }
.tier.c{ background:var(--color-accent-200); color:var(--color-accent-800) }
.tier.d{ background:#ecd9c2; color:#7d4a16 } .tier.e{ background:#efd4d4; color:#7a2222 }
.tier.base{ background:var(--color-neutral-200); color:var(--color-neutral-800) }
.tier.r{ background:#ded2e6; color:#4a3358 }
.vtag{ display:inline-block; padding:1px 8px; border-radius:10px; font-size:12px; font-weight:600; margin-bottom:3px; }
.vtag.cheap{ background:#dde8d3; color:#3a5526 } .vtag.mid{ background:var(--color-accent-200); color:var(--color-accent-800) }
.vtag.exp{ background:#efd4d4; color:#7a2222 } .vtag.var{ background:#dbe2ea; color:#2f4258 }
.legend{ display:flex; gap:12px; flex-wrap:wrap; font-size:14px; margin:var(--space-2) 0 var(--space-4); color:var(--color-neutral-800); }

.igrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(275px,1fr)); gap:var(--space-4); margin:var(--space-4) 0; }
.ibox{ background:var(--color-surface); border:1px solid var(--color-divider); border-radius:var(--radius-md); padding:var(--space-3) var(--space-4); }
.ibox h4{ margin:0 0 7px; font-family:var(--font-heading); color:var(--color-accent-700); font-size:16px; }
.ibox p{ font-size:14.5px; margin:0; line-height:1.6; }
.statbar{ display:grid; grid-template-columns:repeat(auto-fit,minmax(185px,1fr)); gap:var(--space-3); margin:var(--space-4) 0; }
.stat{ background:var(--color-surface); border:1px solid var(--color-divider); border-left:3px solid var(--color-accent);
  border-radius:var(--radius-md); padding:var(--space-3) var(--space-4); }
.stat .big{ font-family:var(--font-heading); font-size:30px; color:var(--color-accent-700); font-weight:var(--font-heading-weight); line-height:1.05; }
.stat .desc{ font-size:12.5px; color:var(--color-neutral-700); margin-top:5px; line-height:1.5; }

ol.biblio,ul.biblio{ font-size:14.5px; padding-left:1.3em; } ol.biblio li,ul.biblio li{ margin-bottom:var(--space-3); line-height:1.6; }
ol.n{ font-size:15px; } ol.n li{ margin-bottom:var(--space-2); }
.cite{ font-size:10.5px; vertical-align:super; color:var(--color-accent-700); font-weight:700; text-decoration:none; }
code{ font-family:ui-monospace,"SF Mono",Consolas,monospace; font-size:.88em;
  background:color-mix(in srgb,var(--color-text) 7%,transparent); padding:1px 5px; border-radius:var(--radius-sm); }
footer.artfoot{ margin-top:var(--space-8); padding-top:var(--space-4); border-top:1px solid var(--color-divider);
  font-size:13.5px; color:var(--color-neutral-700); text-align:center; line-height:1.7; }

/* ── tęcze ── */
.rainbows{ display:flex; gap:var(--space-4); flex-wrap:wrap; align-items:flex-start; margin:var(--space-6) 0 var(--space-8); }
.rb{ flex:0 0 auto; max-width:100%; }
.rb-strip{ display:flex; flex-wrap:wrap; gap:0; border:1px solid var(--color-divider);
  border-radius:var(--radius-sm); overflow:hidden; max-width:100%; }
.rb-strip i{ flex:0 0 16px; width:16px; height:46px; display:block; }
.rb-cap{ margin-top:6px; font-family:var(--font-heading); font-size:13px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--color-neutral-700); }

/* ── powiększanie próbek ── */
.swatch .chip,.minichip{ cursor:zoom-in; transition:transform .12s ease, box-shadow .12s ease; }
.swatch .chip:hover{ transform:scale(1.18); box-shadow:var(--shadow-md); }
.minichip{ display:inline-block; width:16px; height:16px; vertical-align:-3px;
  border:1px solid color-mix(in srgb,#000 25%,transparent); border-radius:2px; }
.minichip:hover{ transform:scale(1.9); box-shadow:var(--shadow-sm); }
#chipzoom{ position:fixed; inset:0; background:color-mix(in srgb,#201f1d 74%,transparent);
  display:none; align-items:center; justify-content:center; z-index:999; padding:20px; }
#chipzoom.on{ display:flex; }
#chipzoom .box{ background:var(--color-bg); border:1px solid var(--color-divider); border-radius:var(--radius-lg);
  max-width:420px; width:100%; overflow:hidden; box-shadow:var(--shadow-lg); }
#chipzoom .big{ height:190px; width:100%; }
#chipzoom .meta2{ padding:var(--space-4) var(--space-6) var(--space-4); }
#chipzoom .meta2 .nm{ font-family:var(--font-heading); font-size:21px; color:var(--color-text); margin-bottom:2px; }
#chipzoom .meta2 .cd{ font-family:ui-monospace,"SF Mono",Consolas,monospace; font-size:14px; color:var(--color-neutral-700); }
#chipzoom .meta2 .st{ font-size:13px; margin-top:var(--space-3); padding-top:var(--space-3);
  border-top:1px solid var(--color-divider); color:var(--color-neutral-800); line-height:1.6; }
#chipzoom .cls{ margin-top:var(--space-2); font-size:12.5px; color:var(--color-neutral-600); font-style:italic; }

@media (max-width:860px){
  .art{ font-size:16px; } .art .wide{ margin-left:0; width:100%; }
}
@media (max-width:720px){
  :root{ --gutter: 18px; }
  .site-head nav{ font-size:13.5px; gap:var(--space-2) var(--space-3); }
}

/* --- pigulka --- */
table.simple{ min-width:900px; font-size:14.5px; }
table.simple td:nth-child(2){ min-width:210px; }
table.simple td:nth-child(3){ min-width:165px; }
table.simple td:nth-child(4){ min-width:140px; }
table.simple td:nth-child(5){ min-width:200px; }
table.simple .tier{ margin-right:3px; }
table.simple td{ vertical-align:top; }
table.simple td.kolor-col{ min-width:270px; }
.art ul.cols2{ columns:2; column-gap:var(--space-8); }
.art ul.cols2 li{ break-inside:avoid; margin-bottom:6px; }
.igrid.regions{ display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:var(--space-4); margin:var(--space-5) 0; }
.igrid.regions .ibox{ background:var(--color-surface); border:1px solid var(--color-divider);
  border-radius:var(--radius-md); padding:var(--space-4) var(--space-5); }
.igrid.regions .ibox h4{ font-family:var(--font-heading); margin:0 0 var(--space-2); font-size:19px; color:var(--color-accent-700); }
.igrid.regions .ibox p{ margin:var(--space-3) 0 4px; }
.tierlab{ font-size:13px; color:var(--color-neutral-700); font-weight:600; }
.swatch-row.tiny .swatch{ width:66px; font-size:11px; }
.swatch-row.tiny .swatch .chip{ width:52px; height:34px; }
@media (max-width:640px){ .art ul.cols2{ columns:1; } }

/* ── szablon artykułu (CZYTELNIA/_szablon-artykulu.html) ── */
.wrap { max-width: 720px; margin: 0 auto; padding: clamp(32px, 7vw, 64px) clamp(20px, 6vw, 40px) clamp(56px, 10vw, 88px); }
.wrap .back { display:inline-block; margin-bottom: var(--space-6); font-size: 14px; text-decoration: none; }
.wrap .kicker { letter-spacing: .2em; }
.wrap .h1 { margin:0 0 var(--space-3); font-family:var(--font-heading); font-weight:400; font-size:clamp(28px,5vw,42px); line-height:1.15; }
.wrap .dateline { margin:0 0 var(--space-8); font-size:13.5px; color:var(--color-neutral-700); }
.wrap article :is(h2,h3) { font-family: var(--font-heading); font-weight: 600; margin: var(--space-8) 0 var(--space-2); }
.wrap article p { line-height: 1.75; font-size: 17px; text-wrap: pretty; margin: 0 0 var(--space-4); }
.wrap article img { max-width:100%; border-radius: var(--radius-md); margin: var(--space-4) 0; }
.wrap article figcaption { font-size: 13px; color: var(--color-neutral-700); margin-top: -8px; }