/* ==========================================================================
   Katalog flag, masztow i oznaczen - arkusz glowny
   System: "Sygnal" - miedzynarodowy kod sygnalowy jako identyfikacja wpisow
   ========================================================================== */

:root{
  /* Barwy przejete z flagi-producent.pl */
  --navy:      #0C1F3C;
  --navy-2:    #143257;
  --navy-3:    #1A3A67;
  --blue:      #0079B0;
  --blue-ink:  #046BD2;
  --cyan:      #3BB8EA;
  --cyan-2:    #00A0E0;

  --paper:     #FFFFFF;
  --band:      #EEF2F8;
  --band-2:    #E4EAF3;
  --rule:      #D9E1EC;

  --slate:     #334155;
  --muted:     #5A6B82;

  /* barwy kodu sygnalowego */
  --sig-red:   #C8102E;
  --sig-yel:   #F2B705;

  --display: "Barlow Condensed", "Archivo Narrow", "Arial Narrow", system-ui, sans-serif;
  --body:    "Spectral", Georgia, "Times New Roman", serif;
  --mono:    "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --col: 1180px;
  --read: 690px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--paper);
  color:var(--slate);
  font-family:var(--body);
  font-size:1.0625rem;
  line-height:1.72;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{ max-width:100%; }
img{ height:auto; display:block; }

a{ color:var(--blue-ink); text-decoration-thickness:1px; text-underline-offset:2px; }
a:hover{ color:var(--navy); }

:focus-visible{
  outline:2px solid var(--cyan-2);
  outline-offset:3px;
  border-radius:2px;
}

.wrap{ width:min(100% - 2.5rem, var(--col)); margin-inline:auto; }
.skip{
  position:absolute; left:-9999px; top:0;
  background:var(--navy); color:#fff; padding:.7rem 1.1rem; z-index:99;
  font-family:var(--mono); font-size:.8rem;
}
.skip:focus{ left:.5rem; top:.5rem; }

/* ---------- Chorągiewka kodu sygnalowego -------------------------------- */

.sig{
  display:block;
  border:1px solid rgba(12,31,60,.22);
  background:#fff;
  flex:none;
}
.sig--dark{ border-color:rgba(255,255,255,.28); }

/* ---------- Pasek nadrzedny -------------------------------------------- */

.topbar{
  background:var(--navy);
  color:rgba(255,255,255,.72);
  font-family:var(--mono);
  font-size:.6875rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:.55rem 0;
  border-bottom:1px solid rgba(255,255,255,.09);
}
.topbar .wrap{ display:flex; gap:1rem; align-items:center; justify-content:space-between; }
.topbar a{ color:rgba(255,255,255,.72); text-decoration:none; }
.topbar a:hover{ color:var(--cyan); }
.topbar__mark{ display:flex; align-items:center; gap:.55rem; }
.topbar__meta{ display:none; }

/* ---------- Naglowek serwisu ------------------------------------------- */

.masthead{
  background:var(--paper);
  border-bottom:1px solid var(--rule);
  position:relative;
  z-index:5;
}
.masthead .wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; padding:1.05rem 0;
}
.brand{ display:flex; align-items:center; gap:.85rem; text-decoration:none; color:inherit; }
.brand__flags{ display:flex; gap:3px; }
.brand__txt{ display:flex; flex-direction:column; line-height:1; }
.brand__name{
  font-family:var(--display); font-weight:700; font-size:1.4rem;
  letter-spacing:.02em; text-transform:uppercase; color:var(--navy);
}
.brand__sub{
  font-family:var(--mono); font-size:.625rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted); margin-top:.32rem;
}

.nav{ display:flex; gap:1.6rem; align-items:center; }
.nav a{
  font-family:var(--display); font-size:1.0625rem; font-weight:600;
  letter-spacing:.03em; text-transform:uppercase; color:var(--navy);
  text-decoration:none; padding-bottom:2px; border-bottom:2px solid transparent;
}
.nav a:hover,.nav a[aria-current="page"]{ border-bottom-color:var(--cyan-2); color:var(--blue); }

/* ---------- Pole banderowe (hero) --------------------------------------- */

.field{
  position:relative;
  background:var(--navy);
  color:#fff;
  overflow:hidden;
  isolation:isolate;
}
.field::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(115% 85% at 8% -10%, rgba(0,160,224,.42), transparent 58%),
    radial-gradient(90% 70% at 100% 110%, rgba(0,121,176,.30), transparent 62%);
}
.field::after{
  content:""; position:absolute; inset:-14% -25%; z-index:-1;
  background:
    repeating-linear-gradient(100deg, rgba(255,255,255,.055) 0 2px, transparent 2px 27px),
    repeating-linear-gradient(76deg, rgba(59,184,234,.10) 0 1px, transparent 1px 56px);
  transform:skewY(-2.2deg);
  animation:luff 30s linear infinite;
}
@keyframes luff{
  from{ background-position:0 0, 0 0; }
  to  { background-position:540px 0, -430px 0; }
}

.field__inner{
  display:grid; grid-template-columns:auto 1fr; gap:2.6rem;
  padding:4.5rem 0 3.6rem;
}

/* fal kodu sygnalowego wzdluz fału */
.hoist{
  display:flex; flex-direction:column; gap:6px;
  padding-right:2.4rem; border-right:1px solid rgba(255,255,255,.16);
}
.hoist .sig{ animation:hoisted .7s cubic-bezier(.2,.8,.25,1) backwards; }
.hoist .sig:nth-child(1){ animation-delay:.05s }
.hoist .sig:nth-child(2){ animation-delay:.13s }
.hoist .sig:nth-child(3){ animation-delay:.21s }
.hoist .sig:nth-child(4){ animation-delay:.29s }
.hoist .sig:nth-child(5){ animation-delay:.37s }
.hoist .sig:nth-child(6){ animation-delay:.45s }
.hoist .sig:nth-child(7){ animation-delay:.53s }
@keyframes hoisted{ from{ opacity:0; transform:translateY(18px) } to{ opacity:1; transform:none } }

.eyebrow{
  font-family:var(--mono); font-size:.6875rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--cyan); margin:0 0 1.3rem;
}
.field h1{
  font-family:var(--display); font-weight:700;
  font-size:clamp(2.7rem, 7.2vw, 5.4rem);
  line-height:.92; letter-spacing:-.008em; text-transform:uppercase;
  margin:0 0 1.4rem; color:#fff; text-wrap:balance;
}
.field h1 em{ font-style:normal; color:var(--cyan); }
.field__lead{
  font-size:1.1875rem; line-height:1.68; color:rgba(255,255,255,.82);
  max-width:56ch; margin:0 0 2.2rem;
}

.plate{
  display:flex; flex-wrap:wrap; gap:0;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.05);
  font-family:var(--mono);
}
.plate > div{
  padding:.85rem 1.4rem;
  border-right:1px solid rgba(255,255,255,.14);
}
.plate > div:last-child{ border-right:0 }
.plate b{
  display:block; font-family:var(--display); font-weight:700;
  font-size:1.7rem; line-height:1; color:#fff; letter-spacing:.01em;
}
.plate span{
  display:block; font-size:.625rem; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.6); margin-top:.42rem;
}

/* ---------- Sekcje ------------------------------------------------------ */

.sec{ padding:4.4rem 0; }
.sec--band{ background:var(--band); border-block:1px solid var(--rule); }
.sec--tight{ padding:3rem 0; }

.sec__head{ margin-bottom:2.6rem; max-width:62ch; }
.sec__head h2{
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:clamp(1.85rem,3.5vw,2.7rem); line-height:1.02; letter-spacing:-.005em;
  color:var(--navy); margin:0 0 .85rem;
}
.sec__head p{ margin:0; color:var(--muted); font-size:1.05rem; }

/* ---------- Fał: lista wpisow katalogu ---------------------------------- */

.halyard{
  list-style:none; margin:0; padding:0;
  border-left:1px solid var(--rule);
}
.halyard li{ position:relative; }
.halyard li::before{
  content:""; position:absolute; left:0; top:2.05rem;
  width:20px; height:1px; background:var(--rule);
  transition:width .22s ease, background-color .22s ease;
}
.halyard li:hover::before{ width:34px; background:var(--cyan-2); }

.entry{
  display:grid; grid-template-columns:auto 1fr auto; gap:1.4rem;
  align-items:start;
  padding:1.35rem 1.1rem 1.35rem 2.4rem;
  text-decoration:none; color:inherit;
  border-bottom:1px solid var(--rule);
  transition:background-color .22s ease;
}
.halyard li:first-child .entry{ border-top:1px solid var(--rule); }
.entry:hover{ background:var(--band); }
.entry__sig{ margin-top:.42rem; }
.entry__code{
  font-family:var(--mono); font-size:.6875rem; letter-spacing:.16em;
  color:var(--muted); text-transform:uppercase; display:block; margin-bottom:.3rem;
}
.entry__title{
  font-family:var(--display); font-weight:600; text-transform:uppercase;
  font-size:1.45rem; line-height:1.06; letter-spacing:.01em; color:var(--navy);
  margin:0 0 .45rem;
}
.entry:hover .entry__title{ color:var(--blue); }
.entry__desc{ margin:0; font-size:.9375rem; color:var(--muted); line-height:1.6; max-width:64ch; }
.entry__go{
  font-family:var(--mono); font-size:1.1rem; color:var(--rule);
  align-self:center; transition:color .2s ease, transform .2s ease;
}
.entry:hover .entry__go{ color:var(--cyan-2); transform:translateX(4px); }

/* ---------- Uklad artykulu ---------------------------------------------- */

.crumbs{
  font-family:var(--mono); font-size:.6875rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted);
  padding:1.15rem 0; border-bottom:1px solid var(--rule);
}
.crumbs a{ color:var(--muted); text-decoration:none; }
.crumbs a:hover{ color:var(--blue); text-decoration:underline; }
.crumbs span{ color:var(--rule); margin:0 .55rem; }

.head{ padding:3.2rem 0 2.4rem; }
.head__row{ display:flex; gap:1.5rem; align-items:flex-start; }
.head h1{
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:clamp(2.05rem,5.2vw,3.6rem); line-height:.98; letter-spacing:-.006em;
  color:var(--navy); margin:.1rem 0 0; max-width:20ch; text-wrap:balance;
}
.head__lead{
  font-size:1.1875rem; line-height:1.66; color:var(--slate);
  max-width:64ch; margin:1.5rem 0 0;
}

/* tabliczka znamionowa */
.nameplate{
  display:flex; flex-wrap:wrap; gap:0;
  margin-top:2rem; border:1px solid var(--rule); background:var(--band);
  font-family:var(--mono); font-size:.6875rem;
  letter-spacing:.13em; text-transform:uppercase;
}
.nameplate > div{ padding:.7rem 1.1rem; border-right:1px solid var(--rule); color:var(--muted); }
.nameplate > div:last-child{ border-right:0 }
.nameplate b{ color:var(--navy); font-weight:500; }

.layout{
  display:grid; grid-template-columns:minmax(0,1fr);
  gap:3.4rem; padding-bottom:4.5rem;
}

/* tresc z fałem po lewej */
.prose{
  max-width:var(--read);
  border-left:1px solid var(--rule);
  padding-left:2.2rem;
}
.prose > *{ position:relative; }
.prose h2{
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:clamp(1.5rem,3vw,2.05rem); line-height:1.05; letter-spacing:.005em;
  color:var(--navy); margin:2.9rem 0 1rem;
}
.prose h2::before{
  content:""; position:absolute; left:-2.2rem; top:.72em;
  width:22px; height:3px; background:var(--cyan-2);
}
.prose h2:first-child{ margin-top:0 }
.prose h3{
  font-family:var(--display); font-weight:600; text-transform:uppercase;
  font-size:1.25rem; letter-spacing:.02em; color:var(--navy-3);
  margin:2rem 0 .7rem;
}
.prose p{ margin:0 0 1.15rem; }
.prose ul,.prose ol{ margin:0 0 1.4rem; padding-left:1.25rem; }
.prose li{ margin-bottom:.55rem; }
.prose li::marker{ color:var(--cyan-2); }
.prose strong{ color:var(--navy); font-weight:600; }

blockquote{
  margin:1.9rem 0; padding:.2rem 0 .2rem 1.4rem;
  border-left:3px solid var(--cyan-2);
  font-size:1.0625rem; color:var(--navy-3);
}
blockquote p:last-child{ margin-bottom:0 }

.tablewrap{ overflow-x:auto; margin:1.6rem 0 1.9rem; border:1px solid var(--rule); }
table{ border-collapse:collapse; width:100%; min-width:460px; font-size:.9375rem; }
caption{
  caption-side:top; text-align:left; padding:.85rem 1rem;
  font-family:var(--mono); font-size:.6875rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
  background:var(--band); border-bottom:1px solid var(--rule);
}
th{
  text-align:left; padding:.75rem 1rem; background:var(--navy); color:#fff;
  font-family:var(--display); font-weight:600; font-size:1rem;
  letter-spacing:.04em; text-transform:uppercase;
}
td{ padding:.7rem 1rem; border-bottom:1px solid var(--rule); vertical-align:top; }
tbody tr:nth-child(even){ background:var(--band); }
tbody tr:last-child td{ border-bottom:0 }

/* ---------- Odsylacz do dostawcy ---------------------------------------- */

.source{
  position:relative;
  margin:2.6rem 0;
  background:var(--navy);
  color:rgba(255,255,255,.84);
  padding:1.9rem 2rem 1.8rem 2.3rem;
  overflow:hidden;
}
.source::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:6px;
  background:linear-gradient(var(--cyan-2), var(--blue));
}
.source__label{
  font-family:var(--mono); font-size:.625rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--cyan); margin:0 0 .85rem;
}
.source p{ margin:0 0 1rem; font-size:1.0625rem; line-height:1.66; }
.source p:last-child{ margin-bottom:0 }
.source a{
  color:#fff; text-decoration:none;
  border-bottom:1px solid rgba(59,184,234,.55);
  padding-bottom:1px;
}
.source a:hover{ color:var(--cyan); border-bottom-color:var(--cyan); }
.source ul{ list-style:none; margin:0; padding:0; }
.source li{
  padding:.6rem 0 .6rem 1.5rem; position:relative;
  border-top:1px solid rgba(255,255,255,.12); font-size:1rem;
}
.source li::before{
  content:"\2192"; position:absolute; left:0; top:.62rem;
  color:var(--cyan); font-family:var(--mono);
}

/* ---------- Na skroty (spis tresci) ------------------------------------- */

.toc{ align-self:start; }
.toc__box{ border-top:2px solid var(--navy); padding-top:1rem; }
.toc h2{
  font-family:var(--mono); font-size:.625rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted); margin:0 0 .9rem; font-weight:400;
}
.toc ol{ list-style:none; margin:0; padding:0; counter-reset:t; }
.toc li{ counter-increment:t; border-bottom:1px solid var(--rule); }
.toc a{
  display:grid; grid-template-columns:1.9rem 1fr; gap:.3rem;
  padding:.62rem 0; text-decoration:none;
  font-family:var(--display); font-size:1.0625rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.02em; color:var(--navy-3); line-height:1.18;
}
.toc a::before{
  content:counter(t,decimal-leading-zero);
  font-family:var(--mono); font-size:.6875rem; font-weight:400;
  color:var(--cyan-2); padding-top:.16rem;
}
.toc a:hover{ color:var(--blue); }

/* ---------- FAQ --------------------------------------------------------- */

.faq{ margin-top:1rem; }
.faq details{
  border-bottom:1px solid var(--rule);
}
.faq summary{
  cursor:pointer; list-style:none; padding:1.05rem 2rem 1.05rem 0;
  position:relative;
  font-family:var(--display); font-weight:600; text-transform:uppercase;
  font-size:1.1875rem; letter-spacing:.015em; color:var(--navy); line-height:1.2;
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{
  content:"+"; position:absolute; right:.2rem; top:.92rem;
  font-family:var(--mono); font-size:1.25rem; color:var(--cyan-2);
  transition:transform .2s ease;
}
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq summary:hover{ color:var(--blue); }
.faq__a{ padding:0 0 1.2rem; color:var(--slate); }
.faq__a p{ margin:0 0 .8rem }
.faq__a p:last-child{ margin-bottom:0 }

/* ---------- Powiazane wpisy --------------------------------------------- */

.related{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--rule); }
.related a{
  padding:1.6rem 1.5rem; text-decoration:none; color:inherit;
  border-right:1px solid var(--rule);
  display:flex; flex-direction:column; gap:.8rem;
  transition:background-color .2s ease;
}
.related a:last-child{ border-right:0 }
.related a:hover{ background:var(--band); }
.related__code{
  font-family:var(--mono); font-size:.625rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted);
}
.related__title{
  font-family:var(--display); font-weight:600; text-transform:uppercase;
  font-size:1.2rem; line-height:1.1; color:var(--navy);
}
.related a:hover .related__title{ color:var(--blue); }

/* ---------- Stopka ------------------------------------------------------ */

.foot{ background:var(--navy); color:rgba(255,255,255,.66); padding:3.6rem 0 2rem; font-size:.9375rem; }
.foot__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.6rem; }
.foot h2{
  font-family:var(--mono); font-size:.625rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--cyan); margin:0 0 1.1rem; font-weight:400;
}
.foot ul{ list-style:none; margin:0; padding:0; }
.foot li{ margin-bottom:.5rem; line-height:1.45; }
.foot a{ color:rgba(255,255,255,.78); text-decoration:none; }
.foot a:hover{ color:var(--cyan); text-decoration:underline; }
.foot__brand .brand__name{ color:#fff }
.foot__brand p{ margin:1.1rem 0 0; max-width:42ch; line-height:1.62; }
.foot__note{
  margin-top:3rem; padding-top:1.4rem; border-top:1px solid rgba(255,255,255,.13);
  font-family:var(--mono); font-size:.6875rem; letter-spacing:.06em;
  color:rgba(255,255,255,.44); line-height:1.85;
}

/* ---------- 404 --------------------------------------------------------- */

.lost{ padding:6rem 0; text-align:center; }
.lost h1{
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:clamp(2.4rem,8vw,5rem); line-height:.94; color:var(--navy); margin:1.8rem 0 1rem;
}
.lost p{ max-width:46ch; margin:0 auto 2rem; color:var(--muted); }
.lost .hoist{ flex-direction:row; justify-content:center; border:0; padding:0; gap:8px; }

.btn{
  display:inline-block; font-family:var(--display); font-weight:600;
  text-transform:uppercase; letter-spacing:.05em; font-size:1.125rem;
  background:var(--navy); color:#fff; text-decoration:none;
  padding:.8rem 1.8rem; border:0;
  transition:background-color .2s ease;
}
.btn:hover{ background:var(--blue); color:#fff; }

/* ---------- Responsywnosc ----------------------------------------------- */

@media (min-width:1040px){
  .layout{ grid-template-columns:minmax(0,1fr) 250px; }
  .toc{ position:sticky; top:2rem; }
  .topbar__meta{ display:block; }
}

@media (max-width:900px){
  .field__inner{ grid-template-columns:1fr; gap:2rem; padding:3.2rem 0 2.8rem; }
  .hoist{
    flex-direction:row; padding-right:0; padding-bottom:1.6rem;
    border-right:0; border-bottom:1px solid rgba(255,255,255,.16);
  }
  .related{ grid-template-columns:1fr; }
  .related a{ border-right:0; border-bottom:1px solid var(--rule); }
  .foot__grid{ grid-template-columns:1fr 1fr; }
  .foot__brand{ grid-column:1 / -1; }
}

@media (max-width:640px){
  body{ font-size:1rem; }
  .nav{ display:none; }
  .sec{ padding:3rem 0; }
  .entry{ grid-template-columns:auto 1fr; gap:1rem; padding:1.15rem .2rem 1.15rem 1.6rem; }
  .entry__go{ display:none }
  .halyard li::before{ top:1.75rem; width:14px }
  .prose{ padding-left:1.3rem; }
  .prose h2::before{ left:-1.3rem; width:14px; }
  .head__row{ gap:1rem }
  .source{ padding:1.5rem 1.3rem 1.4rem 1.6rem; }
  .foot__grid{ grid-template-columns:1fr; gap:2rem; }
  .plate > div{ padding:.7rem 1rem }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}

@media print{
  .topbar,.nav,.toc,.related,.field::after{ display:none }
  body{ font-size:11pt } .source{ background:#fff; color:#000; border:1px solid #000 }
}