/* Wyniesione z HTML do pliku (2026-10-13), zeby przegladarka trzymala je w cache zamiast pobierac przy kazdej odslonie.
   Zrodlo: resources/views/layouts/public.blade.php: <style id="nav-menu-overrides"> + <style id="modern-upgrades"> (miedzy nimi byly tylko skrypty) */
/* === nav-menu-overrides === */
  :root{
    --nav-ink:#0f172a; --nav-muted:#64748b;
    --nav-p1: var(--tblr-primary, #3b82f6);
    --nav-p2: var(--tblr-info,    #06b6d4);
    --nav-br: color-mix(in oklab, var(--tblr-border-color,#e5e7eb) 75%, transparent);
  }

  /* pasek */
  body header.navbar.d-print-none{
    position:sticky; top:0;
    backdrop-filter: blur(10px);
    background: rgba(255,255,255,.78) !important;
    border-bottom: 1px solid var(--nav-br);
    transition: box-shadow .25s ease, background-color .25s ease, border-color .25s ease;
    z-index: 1030;
    isolation:isolate;
  }
  body header.navbar.d-print-none.is-scrolled{
    background: rgba(255,255,255,.92) !important;
    box-shadow: 0 10px 30px rgba(16,24,40,.10);
    border-color: color-mix(in oklab, var(--tblr-border-color,#e5e7eb) 85%, transparent);
  }
  /* pasek postępu przewijania */
  body header.navbar.d-print-none::after{
    content:""; position:absolute; left:0; bottom:0; height:2px; width: var(--scrollx, 0%);
    background: linear-gradient(90deg, var(--nav-p1), var(--nav-p2));
    box-shadow: 0 0 12px color-mix(in oklab, var(--nav-p1) 60%, transparent);
    transition: width .1s linear;
  }

  /* linki główne */
  body .navbar .nav-link{
    position:relative; padding:.6rem .8rem; color:var(--nav-ink) !important;
    border-radius:.6rem; transition: color .15s ease, background-color .15s ease, transform .15s ease;
  }
  body .navbar .nav-link:hover{ color:var(--nav-p1) !important; background:rgba(2,132,199,.06) !important; transform:translateY(-1px); }
  body .navbar .nav-link.active,
  body .navbar .dropdown.show > .nav-link{ color:#0b5ed7 !important; background:rgba(59,130,246,.10) !important; }
  body .navbar .nav-link::after{
    content:""; position:absolute; left:.8rem; right:.8rem; bottom:.35rem; height:2px;
    background: linear-gradient(90deg, var(--nav-p1), var(--nav-p2));
    transform: scaleX(0); transform-origin: left; transition: transform .2s ease; border-radius:2px;
  }
  body .navbar .nav-link:hover::after,
  body .navbar .nav-link.active::after,
  body .navbar .dropdown.show > .nav-link::after{ transform: scaleX(1); }

  /* PRZYCISKI W MENU – ujednolicone */
  body .navbar .btn,
  body .navbar .btn-default,
  body .navbar .btn-primary{
    --btn-bg: linear-gradient(92deg, var(--nav-p1), var(--nav-p2));
    background: var(--btn-bg) !important; color:#fff !important; border:0 !important;
    border-radius:.7rem; padding:.5rem .9rem; line-height:1.2;
    box-shadow:0 10px 22px rgba(59,130,246,.25);
    transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
  }
  body .navbar .btn:hover{ filter:saturate(1.05) brightness(.98); transform: translateY(-1px); }
  body .navbar .btn:active{ transform: translateY(0); box-shadow:0 6px 16px rgba(59,130,246,.25); }

  /* warianty outline w pasku – robią się „szklane” */
  body .navbar .btn-outline,
  body .navbar .btn-outline-primary,
  body .navbar .btn-default.border-0.shadow-none{
    background: color-mix(in oklab, #fff 70%, transparent) !important;
    color: var(--nav-p1) !important; border:1px solid color-mix(in oklab, var(--nav-p1) 40%, #c7d2fe) !important;
    box-shadow:0 6px 16px rgba(2,132,199,.12);
  }
  body .navbar .btn-outline:hover{ background: color-mix(in oklab, var(--nav-p1) 8%, #fff) !important; }

  /* dropdowny 1–2 poziom */
  body .dropdown-menu{
    background: rgba(255,255,255,.98) !important;
    border:1px solid color-mix(in oklab, var(--tblr-border-color,#e5e7eb) 80%, transparent) !important;
    box-shadow: 0 18px 42px rgba(16,24,40,.14) !important;
    border-radius:.9rem !important; padding:.5rem !important; min-width:14rem;
    transform-origin: top left; animation: dmFade .15s ease-out;
  }
  @keyframes dmFade{ from{opacity:0; transform: translateY(6px) scale(.98)} to{opacity:1; transform: translateY(0) scale(1)} }
  body .dropdown-menu::before{
    content:""; display:block; height:3px; margin:-.5rem -.5rem .35rem;
    background: linear-gradient(90deg, var(--nav-p1), var(--nav-p2)); border-top-left-radius:.9rem; border-top-right-radius:.9rem;
    opacity:.15;
  }
  body .dropdown-item{
    color:var(--nav-ink) !important; border-radius:.5rem !important; padding:.55rem .8rem !important;
    transition: background-color .12s ease, transform .12s ease;
  }
  body .dropdown-item:hover{ background: color-mix(in oklab, var(--tblr-primary-lt,#dbeafe) 42%, #fff) !important; transform: translateX(1px); }
  body .dropdown-item.active{ color:#0b5ed7 !important; background: color-mix(in oklab, var(--tblr-primary-lt,#dbeafe) 55%, #fff) !important; }
  body .dropdown-item i{ opacity:.9 }

  /* strzałka w pozycji submenu */
  body .dropdown-item.dropdown-toggle::after{
    content:"›"; border:0; margin-left:.5rem; float:right; transform:translateX(.15rem);
  }

  /* dropend (submenu na prawo) – desktop hover */
  @media (min-width: 992px){
    body .dropend:hover > .dropdown-menu{
      display:block; position:absolute; top:0; left:100%;
      margin-left:.35rem; margin-top:0;
    }
  }
  /* focus ring dla klawiatury */
  body .navbar a:focus, body .dropdown-item:focus{
    outline:0; box-shadow: 0 0 0 .2rem color-mix(in oklab, var(--nav-p1) 22%, transparent);
  }

  /* toggler */
  body .navbar-toggler{
    border:1px solid var(--nav-br) !important; border-radius:.6rem; padding:.35rem .5rem;
    background: rgba(255,255,255,.65);
  }
  body .navbar-toggler:focus{ box-shadow:0 0 0 .2rem color-mix(in oklab, var(--nav-p1) 18%, transparent) !important; }
  body .navbar-toggler-icon{
    background-image:none !important; width:1.25rem; height:1.25rem; position:relative; display:inline-block;
  }
  body .navbar-toggler-icon::before, body .navbar-toggler-icon::after{
    content:""; position:absolute; left:0; right:0; height:2px; background:#0f172a; border-radius:2px;
  }
  body .navbar-toggler-icon::before{ top:4px } body .navbar-toggler-icon::after{ bottom:4px }

  /* DARK MODE (oba warianty klas) */
  body.theme-dark header.navbar.d-print-none,
  body[data-bs-theme="dark"] header.navbar.d-print-none{
    background: rgba(15,23,42,.72) !important; border-color: rgba(148,163,184,.25);
  }
  body.theme-dark header.navbar.d-print-none.is-scrolled,
  body[data-bs-theme="dark"] header.navbar.d-print-none.is-scrolled{
    background: rgba(15,23,42,.88) !important; box-shadow: 0 10px 30px rgba(0,0,0,.35);
  }
  body.theme-dark .navbar .nav-link,
  body[data-bs-theme="dark"] .navbar .nav-link{ color:#e2e8f0 !important; }
  body.theme-dark .navbar .nav-link:hover,
  body[data-bs-theme="dark"] .navbar .nav-link:hover{ background: rgba(2,132,199,.12) !important; }
  body.theme-dark .dropdown-menu,
  body[data-bs-theme="dark"] .dropdown-menu{
    background: rgba(2,6,23,.98) !important; border-color: rgba(148,163,184,.22) !important;
  }
  body.theme-dark .dropdown-item,
  body[data-bs-theme="dark"] .dropdown-item{ color:#e2e8f0 !important; }
  body.theme-dark .dropdown-item:hover,
  body[data-bs-theme="dark"] .dropdown-item:hover{ background: rgba(59,130,246,.18) !important; }

  /* redukcja ruchu */
  @media (prefers-reduced-motion: reduce){
    body *{ transition:none !important; animation:none !important }
  }

/* === modern-upgrades === */
  /* 1) Płynna typografia i odstępy */
  :root{
    --fs-xxl: clamp(2rem, 1.1rem + 3vw, 3.25rem);
    --fs-xl:  clamp(1.5rem, 1rem + 2vw, 2.25rem);
    --fs-lg:  clamp(1.125rem, .95rem + .6vw, 1.25rem);
    --rad: 16px; --rad-lg: 22px; --rad-xl: 28px;
    --gap: clamp(.75rem, .5rem + .8vw, 1.25rem);
  }
  h1,h2{ letter-spacing:-.02em }

  /* 2) Karty narzędzi – gradient border + glow */
  #tools-box .card{
    border-radius: var(--rad-lg);
    border:1px solid color-mix(in oklab, var(--tblr-border-color) 75%, transparent);
    position:relative; overflow:hidden;
  }
  #tools-box .card::before{
    content:""; position:absolute; inset:-1px; border-radius:inherit;
    background:linear-gradient(120deg, color-mix(in oklab, var(--tblr-primary) 40%, transparent), color-mix(in oklab, var(--tblr-info) 40%, transparent));
    opacity:.18; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    padding:1px; -webkit-mask-composite: xor; mask-composite: exclude;
    pointer-events:none;
  }
  #tools-box .item-box{
    border-radius: var(--rad);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
    background: color-mix(in oklab, #fff 90%, transparent);
  }
  #tools-box .item-box:hover{
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(16,24,40,.10);
    background: color-mix(in oklab, var(--tblr-primary-lt) 18%, #fff);
  }

  /* 3) FAQ (details/summary) — style są w skórce treści (#content-skin, insert_body),
        żeby nie dublować znacznika rozwijania (był i ▸, i +). */

  /* 4) Płynne przewijanie i offset dla kotwic */
  html{ scroll-behavior:smooth }
  :target{ scroll-margin-top: 96px }

  /* 5) Przycisk „do góry” */
  .to-top{
    position:fixed; right:16px; bottom:16px; z-index:1040;
    width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
    background: linear-gradient(135deg, var(--tblr-primary), var(--tblr-info)); color:#fff;
    box-shadow:0 10px 24px rgba(59,130,246,.25);
    opacity:0; transform: translateY(10px); pointer-events:none;
    transition: opacity .2s ease, transform .2s ease, filter .15s ease;
  }
  .to-top.show{ opacity:1; transform: translateY(0); pointer-events:auto }
  .to-top:hover{ filter: brightness(.98) saturate(1.05) }

  /* 6) Skeleton loader – użyj .skeleton gdzie trzeba */
  .skeleton{
    position:relative; overflow:hidden; background: color-mix(in oklab, #e5e7eb 70%, #fff);
    border-radius:12px; min-height: 12px;
  }
  .skeleton::after{
    content:""; position:absolute; inset:0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
    transform: translateX(-100%); animation: sk 1.2s infinite;
  }
  @keyframes sk{ to{ transform: translateX(100%) } }

  /* 7) Lepsze „details” w #faq sekcji narzędzi */
  #tool-box #faq .card{ border-radius: var(--rad-lg); overflow:hidden }
  #tool-box #faq .card-header{ background: linear-gradient(90deg, var(--tblr-primary-lt), var(--tblr-info-lt)); }

  /* 8) „hash link” do nagłówków w content-skin i article-body */
  #content-skin-tex h2[id], #content-skin-tex h3[id],
  .article-typography-enhancement h2[id], .article-typography-enhancement h3[id],
  #article-body h2[id], #article-body h3[id]{ position:relative; scroll-margin-top:96px }
  #content-skin-tex h2[id] a.anchor, #content-skin-tex h3[id] a.anchor,
  .article-typography-enhancement h2[id] a.anchor, .article-typography-enhancement h3[id] a.anchor,
  #article-body h2[id] a.anchor, #article-body h3[id] a.anchor{
    position:absolute; left:-1.2ch; opacity:0; text-decoration:none;
  }
  #content-skin-tex h2[id]:hover a.anchor,
  #content-skin-tex h3[id]:hover a.anchor,
  .article-typography-enhancement h2[id]:hover a.anchor,
  .article-typography-enhancement h3[id]:hover a.anchor,
  #article-body h2[id]:hover a.anchor,
  #article-body h3[id]:hover a.anchor{ opacity:.6 }

  /* 8b) Sekcja „Zobacz też” — kafelki zamiast gołej listy (spójna ze skórką: karta, ramka, akcent) */
  body #content-skin-tex #zobacz-tez, body #content-skin-tex #see-also{
    background:var(--cs-soft,#f8fafc); border:1px solid var(--cs-border,#e5e9f2); border-radius:var(--cs-radius-lg,18px);
    padding:clamp(1rem,.6rem + 1.4vw,1.6rem); box-shadow:var(--cs-shadow,none); min-width:0; max-width:100%
  }
  body #content-skin-tex #zobacz-tez > h2, body #content-skin-tex #see-also > h2{
    margin:0 0 1rem; padding:0 0 0 2.5rem; font-size:1.2rem; position:relative; display:flex; align-items:center; min-height:2rem
  }
  body #content-skin-tex #zobacz-tez > h2::before, body #content-skin-tex #see-also > h2::before{
    content:"\2197"; position:absolute; left:0; top:50%; transform:translateY(-50%); width:2rem; height:2rem; border-radius:10px;
    display:flex; align-items:center; justify-content:center; font-size:1.05rem; font-weight:800; line-height:1;
    color:#fff; background:linear-gradient(135deg,var(--cs-primary,#4f46e5),var(--cs-primary-2,#9333ea))
  }
  body #content-skin-tex #zobacz-tez > h2::after, body #content-skin-tex #see-also > h2::after{ display:none }
  body #content-skin-tex #zobacz-tez ul, body #content-skin-tex #see-also ul{
    list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.6rem
  }
  body #content-skin-tex #zobacz-tez li, body #content-skin-tex #see-also li{ margin:0; padding:0; min-width:0 }
  body #content-skin-tex #zobacz-tez li::before, body #content-skin-tex #see-also li::before{ display:none }
  body #content-skin-tex #zobacz-tez li a, body #content-skin-tex #see-also li a{
    display:flex; align-items:center; justify-content:space-between; gap:.75rem; height:100%;
    padding:.8rem 1rem; background:var(--cs-card,#fff); border:1px solid var(--cs-border,#e5e9f2); border-radius:12px;
    color:var(--cs-text,#0f172a); font-weight:600; font-size:.95rem; line-height:1.35; text-decoration:none !important;
    overflow-wrap:anywhere; box-shadow:0 1px 2px rgba(15,23,42,.04);
    transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease
  }
  body #content-skin-tex #zobacz-tez li a::after, body #content-skin-tex #see-also li a::after{
    content:"\2192"; flex:none; color:var(--cs-primary,#4f46e5); font-weight:800; transition:transform .18s ease
  }
  body #content-skin-tex #zobacz-tez li a:hover, body #content-skin-tex #see-also li a:hover,
  body #content-skin-tex #zobacz-tez li a:focus-visible, body #content-skin-tex #see-also li a:focus-visible{
    transform:translateY(-2px); border-color:var(--cs-primary,#4f46e5); background:var(--cs-primary-soft,#eef2ff);
    color:var(--cs-primary,#4f46e5); box-shadow:var(--cs-shadow-hover,none); outline:none
  }
  body #content-skin-tex #zobacz-tez li a:hover::after, body #content-skin-tex #see-also li a:hover::after{ transform:translateX(3px) }
  @media (max-width:860px){ body #content-skin-tex #zobacz-tez ul, body #content-skin-tex #see-also ul{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
  @media (max-width:520px){ body #content-skin-tex #zobacz-tez ul, body #content-skin-tex #see-also ul{ grid-template-columns:minmax(0,1fr) } }
  @media (prefers-reduced-motion: reduce){
    body #content-skin-tex #zobacz-tez li a:hover, body #content-skin-tex #see-also li a:hover{ transform:none }
  }

  /* 8c) Telefon: wyniki i paski narzędzi nie wystają poza kartę (skan po wyniku 2026-10-03) */
  .metrics-bar{ min-width:0; max-width:100% }
  .metric-item{ min-width:0; max-width:100%; flex-wrap:wrap }
  .kt-mono{ overflow-wrap:anywhere }
  #tool-container [style*="grid-template-columns"] > *{ min-width:0; overflow-wrap:anywhere }
  .kt-verdict > *{ min-width:0 }
  .metric-item b{ min-width:0; overflow-wrap:anywhere; word-break:break-word }
  #tool-container img, .tool-card img{ max-width:100%; height:auto }
  @media (max-width:600px){
    #tool-container .d-flex, #tool-container .btn-group, #tool-container .toolbar-left{ flex-wrap:wrap; max-width:100% }
    #tool-container .btn-group > .btn{ flex:0 1 auto }
    #tool-container .btn{ max-width:100%; white-space:normal }
    #tool-container [style*="grid-template-columns: 1fr 1fr"], #tool-container [style*="grid-template-columns:1fr 1fr"], #tool-container [style*="repeat(2, 1fr)"], #tool-container [style*="repeat(2,1fr)"]{ grid-template-columns:minmax(0,1fr) !important }
    #tool-container table:not(.rc-table){ display:block; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch }
  }

  /* 9) Tryb ciemny – delikatne dopasowania */
  body.theme-dark #tools-box .item-box{ background: rgba(2,6,23,.6) }
  body.theme-dark #tools-box .item-box:hover{ background: rgba(30,58,138,.25) }

  /* 10) Redukcja ruchu */
  @media (prefers-reduced-motion: reduce){
    *{ animation:none !important; transition:none !important }
  }

  /* 11) Typografia i design pod SEO / UX (Faza 7) */
  .article-typography-enhancement {
      font-size: 1.05rem;
      line-height: 1.75;
      color: var(--text-main, #0f172a);
  }
  .article-typography-enhancement h2, .article-typography-enhancement h3 {
      font-weight: 800;
      line-height: 1.3;
      margin-top: 2.5rem;
      margin-bottom: 1rem;
      scroll-margin-top: 100px;
  }
  .article-typography-enhancement p {
      margin-bottom: 1.25rem;
  }
  .toc-box {
      background: #fff;
      border: 1px solid var(--border-color, #e5e9f2);
      border-radius: 14px;
      padding: 1.25rem 1.35rem;
      box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px -16px rgba(15,23,42,.22);
  }
  body.theme-dark .toc-box, [theme-mode="dark"] .toc-box { background: #111827; border-color: #24314d; }
  body.theme-dark .toc-link, [theme-mode="dark"] .toc-link { color: #e2e8f0; }
  body.theme-dark .toc-link.h3-link, [theme-mode="dark"] .toc-link.h3-link { color: #94a3b8; }
  .toc-title {
      font-size: 0.95rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: var(--primary, #2563eb);
      margin-bottom: 1.25rem;
      display: flex;
      align-items: center;
      gap: 8px;
  }
  /* kolumny zamiast gridu — pozycje idą w dół kolumny, więc h3 zostaje pod swoim h2 */
  .toc-list {
      list-style: none;
      padding: 0;
      margin: 0;
      columns: 1;
      column-gap: 2rem;
  }
  @media (min-width: 768px) { .toc-list { columns: 2; } }
  @media (min-width: 1200px) { .toc-list { columns: 3; } }
  .toc-list li { break-inside: avoid; margin-bottom: 2px; }
  .toc-link {
      font-size: 0.9rem;
      color: var(--text-main, #0f172a);
      font-weight: 600;
      text-decoration: none;
      display: block;
      padding: 5px 10px;
      border-radius: 8px;
      transition: background .18s ease, color .18s ease, border-color .18s ease;
      border-left: 2px solid transparent;
      line-height: 1.45;
  }
  .toc-link:hover, .toc-link.active {
      background: var(--primary-soft, #eff6ff);
      color: var(--primary, #2563eb);
      border-left-color: var(--primary, #2563eb);
  }
  .toc-link.h3-link {
      padding-left: 22px;
      font-size: 0.85rem;
      font-weight: 500;
      color: var(--text-muted, #64748b);
      position: relative;
  }
  .toc-link.h3-link::before {
      content: ""; position: absolute; left: 10px; top: 50%;
      width: 6px; height: 1px; background: currentColor; opacity: .5;
  }
  
  /* PWA Banner */
  .pwa-bottom-banner {
      position: fixed;
      bottom: -150px;
      left: 50%;
      transform: translateX(-50%);
      width: calc(100% - 32px);
      max-width: 400px;
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(12px);
      border: 1px solid var(--border-color, #e2e8f0);
      border-radius: 12px;
      box-shadow: 0 10px 25px -5px rgba(0,0,0,0.2);
      padding: 16px;
      display: flex;
      align-items: center;
      gap: 12px;
      z-index: 9999;
      transition: bottom 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }
  .pwa-bottom-banner.show {
      bottom: 24px;
  }
  .pwa-icon {
      width: 48px;
      height: 48px;
      background: var(--primary-soft, #eff6ff);
      color: var(--primary, #2563eb);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
  }
  .pwa-content-text {
      flex-grow: 1;
      font-size: 0.9rem;
      line-height: 1.3;
      color: #0f172a;
  }
  .pwa-content-text strong {
      display: block;
      font-weight: 700;
  }
  .btn-install-pwa {
      background: var(--primary, #2563eb);
      color: white;
      border: none;
      padding: 8px 16px;
      border-radius: 8px;
      font-weight: bold;
      font-size: 0.85rem;
      cursor: pointer;
  }
  .share-btn {
      transition: transform 0.2s;
  }
  .share-btn:hover {
      transform: translateY(-2px);
  }

  /* 12) Tabele w opisach bez własnego kontenera (audyt 2026-09-29: ~40% stron narzędzi rozjeżdżało się poziomo na telefonie):
         na wąskich ekranach przewijane w poziomie zamiast poszerzać całą stronę. Tabele w .table-wrap mają własne przewijanie. */
  @media (max-width: 768px){
    body #content-skin-tex table{ display:block; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch }
    body #content-skin-tex .table-wrap table{ display:table }
    body #content-skin-tex .card-soft, body #content-skin-tex .card-mini, body #content-skin-tex .sum-card, body #content-skin-tex .note{ min-width:0; max-width:100%; overflow-wrap:anywhere }
    body #content-skin-tex pre{ max-width:100%; overflow-x:auto }
    body #content-skin-tex .pill{ max-width:100%; white-space:normal; flex-wrap:wrap }
    body #content-skin-tex .grid-2{ grid-template-columns:minmax(0,1fr) }
    body #content-skin-tex .cta{ max-width:100%; flex-wrap:wrap }
    body #content-skin-tex .badge{ max-width:100%; white-space:normal }
    body #article-body table{ display:block; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch }
  }

/* === 2026-10-13: artykul SEO pod narzedziem bywa bardzo dlugi (Kalkulator wieku ~14 sekcji). Przegladarka
   uklada go dopiero, gdy uzytkownik do niego przewinie — pierwszy uklad strony ~340 ms -> mniej (pomiar w notatkach).
   Liczniki <ol> w tresci sa zerowane wewnatrz artykulu, wiec izolacja stylu ich nie psuje. === */
#article-body { content-visibility: auto; contain-intrinsic-size: auto 3000px; }