/* Codeheim · styl „Kuźnia” (propozycja). Nakładka ładowana po styles.css: zmienia kształty, typografię i ornamenty,
   paleta zostaje bez zmian. Plik nie definiuje żadnej barwy, korzysta wyłącznie z tokenów Bifrost (var(--…) i ich
   trójek -rgb); jedyne literały to czerń w maskach, z której liczy się tylko kanał alfa. Usunięcie <link> do tego
   pliku przywraca dotychczasowy wygląd.
   Motyw przewodni: kute płyty z fazowanymi narożnikami zamiast zaokrąglonych kart, romb jako ornament runiczny
   (ikony sekcji, próbki, przerywnik pod logo) i cienka tęcza Bifrostu pod belką. Fazowanie robi corner-shape: bevel;
   przeglądarki bez tej właściwości dostają prawie ostre narożniki (zmienne --cut-*), a romby stają się kółkami. */

:root{
  --cut-s:2px; --cut-m:2px; --cut-l:2px;
  --rule:linear-gradient(90deg,transparent,var(--border-strong) 20% 80%,transparent);   /* pozioma linia gasnąca na końcach */
  --diamond:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0 10 5 5 10 0 5Z'/%3E%3C/svg%3E");
}
@supports (corner-shape:bevel){:root{--cut-s:5px;--cut-m:9px;--cut-l:16px}}

::selection{background:rgba(var(--accent-rgb),0.35)}

/* ---------- belka: zakładki pismem nagłówków, wskaźnik aktywnej u dołu, tęcza Bifrostu zamiast obramowania ---------- */
.topbar{padding-block:0;border-bottom:0}
.topbar::before{   /* ::before, nie ::after: wskaźnik zakładki ma leżeć nad tęczą */
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;pointer-events:none;opacity:.75;
  background:linear-gradient(90deg,transparent,var(--violet-light) 10%,var(--indigo-light),var(--steel-light),var(--teal-light),var(--olive-light),var(--gold-light),var(--orange-light),var(--red-light) 90%,transparent);
}
.topbar-link{
  position:relative;min-height:3.25rem;padding:0 .875rem;border-radius:0;
  font-family:var(--font-head);font-size:.8125rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
.topbar-link:hover,.topbar-link[aria-current="page"]{background:none;color:var(--text-primary)}
.topbar-link::after{
  content:"";position:absolute;left:.875rem;right:.875rem;bottom:0;height:2px;z-index:1;
  background:var(--accent);box-shadow:0 0 10px rgba(var(--accent-rgb),0.8);scale:0 1;transition:scale .2s cubic-bezier(.2,.7,.3,1);
}
.topbar-link:hover::after{scale:.35 1}
.topbar-link[aria-current="page"]::after{scale:1 1}
@media (max-width:479px){   /* jak w styles.css: cztery zakładki i przełącznik muszą zmieścić się na telefonie, „Strona główna” łamie się na dwie linie */
  .topbar{gap:.25rem;padding-inline:.625rem}
  .topbar-nav{gap:0}
  .topbar-link{padding:0 .375rem;font-size:.6875rem;letter-spacing:.02em}
  .topbar-link::after{left:.375rem;right:.375rem}
}
@media (prefers-reduced-motion:reduce){.topbar-link::after{transition:none}}
.icon-btn{border-radius:var(--cut-s);corner-shape:bevel}

/* ---------- logo: przerywnik pod spodem, linia z rombem pośrodku w barwie akcentu ---------- */
.hero::after{
  content:"";display:block;width:min(20rem,80%);height:10px;margin:2.25rem auto 0;
  background:linear-gradient(90deg,transparent,rgba(var(--accent-rgb),0.8) 35% 65%,transparent);
  -webkit-mask:linear-gradient(#000 0 0) left center/calc(50% - 14px) 1px no-repeat,linear-gradient(#000 0 0) right center/calc(50% - 14px) 1px no-repeat,var(--diamond) center/10px 10px no-repeat;
          mask:linear-gradient(#000 0 0) left center/calc(50% - 14px) 1px no-repeat,linear-gradient(#000 0 0) right center/calc(50% - 14px) 1px no-repeat,var(--diamond) center/10px 10px no-repeat;
}

/* ---------- sekcja: kuta płyta zamiast przerywanej strefy. Mocniejsza górna krawędź w barwie sekcji,
   tło ściemnia się ku dołowi, więc tło strony prześwituje jak dotąd.
   Wyróżnione krawędzie (tu, w oknie dialogowym i w komunikatach) to cień wewnętrzny, nie border-top/left:
   Chromium przy corner-shape rysuje krawędź w innym kolorze dodatkowo kawałkiem na dole ramki. ---------- */
.section{
  margin-bottom:2.5rem;
  border:1px solid rgba(var(--section-rgb),0.24);box-shadow:inset 0 2px 0 rgba(var(--section-rgb),0.75);
  border-radius:var(--cut-l);corner-shape:bevel;
  background:linear-gradient(180deg,rgba(var(--section-rgb),0.12),rgba(var(--section-rgb),0.03) 10rem);
}
.section:last-child{margin-bottom:0}

/* nagłówek sekcji: bez ramki, kapitaliki pismem nagłówków i linia w barwie sekcji gasnąca w prawo; ikona w rombie */
.cell--head{
  padding:0 0 .875rem;margin-bottom:.25rem;border:0;border-radius:0;
  background:linear-gradient(90deg,rgba(var(--section-rgb),0.6),transparent 85%) left bottom/100% 1px no-repeat;
}
.cell--head .cell-name{font-size:1.0625rem;letter-spacing:.14em;text-transform:uppercase}
.section-icon{width:2.375rem;height:2.375rem;border-radius:50%;corner-shape:bevel}
.section-icon .icon{width:1.125rem;height:1.125rem}
.section-icon .swatch{width:1rem;height:1rem}
.section-icon .ramp .swatch{width:.25rem;height:.75rem}

/* komórki: fazowane płytki; odnośnik na hover dostaje belkę z lewej, tło w barwie sekcji i wysunięty szewron */
.cell{border-radius:var(--cut-m);corner-shape:bevel;transition:border-color .15s,background-color .15s,box-shadow .15s}
a.cell:hover{
  transform:none;border-color:rgba(var(--section-rgb),0.55);
  background:linear-gradient(rgba(var(--section-rgb),0.10),rgba(var(--section-rgb),0.10)),var(--surface-inset);
  box-shadow:inset 3px 0 0 rgba(var(--section-rgb),0.9);
}
a.cell::after{
  content:"";flex-shrink:0;width:.4375rem;height:.4375rem;margin:0 .375rem 0 auto;
  border:solid currentColor;border-width:2px 2px 0 0;rotate:45deg;
  color:var(--text-secondary);opacity:.4;transition:opacity .15s,translate .15s,color .15s;
}
a.cell:hover::after{opacity:1;color:var(--section-ink);translate:3px 0}
@media (prefers-reduced-motion:reduce){.cell,a.cell::after{transition:none}a.cell:hover::after{translate:none}}

/* akapity: zamiast pełnej ramki pionowa kreska w barwie sekcji, jak napis wyryty obok płyty */
.cell--text{border:0;border-left:2px solid rgba(var(--section-rgb),0.5);border-radius:0;padding:.5rem .875rem .5rem 1rem}

/* ---------- próbki: romby zamiast kółek; rampy, gradienty i pary dostają drobne fazowanie ---------- */
.swatch{corner-shape:bevel}

/* ---------- makiety w zakładce Bifrost ---------- */
.demo-title{display:flex;align-items:center;gap:.5rem;font-family:var(--font-head);font-weight:700;letter-spacing:.14em;color:var(--section-ink)}
.demo-title::before{content:"";width:.375rem;height:.375rem;flex-shrink:0;background:currentColor;rotate:45deg}

.btn{border-radius:var(--cut-s);corner-shape:bevel;font-family:var(--font-head);font-size:.8125rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.btn--primary{box-shadow:inset 0 1px 0 rgba(var(--shine-rgb),0.3)}
.badge{border-radius:var(--cut-s);corner-shape:bevel;font-size:.6875rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.alert{border-radius:var(--cut-s);corner-shape:bevel;box-shadow:inset 3px 0 0 var(--tone)}
.input{border-radius:var(--cut-s);corner-shape:bevel}

.demo-stage{border-radius:var(--cut-m);corner-shape:bevel}
.modal{border-radius:var(--cut-l);corner-shape:bevel;box-shadow:inset 0 2px 0 var(--accent),var(--shadow-card)}
.modal-title{font-size:1rem;letter-spacing:.1em;text-transform:uppercase}
.code,.table-wrap,.gl-term--plain{border-radius:var(--cut-s);corner-shape:bevel}
.table thead th{letter-spacing:.1em}

/* wykres: słupki zakończone grotem, pasek postępu dzielony na segmenty jak wskaźnik na zbroi */
.bar{border-radius:0 var(--cut-m) var(--cut-m) 0;corner-shape:bevel}
.progress{height:.625rem;border-radius:0;
  -webkit-mask:repeating-linear-gradient(90deg,#000 0 calc(5% - 2px),transparent calc(5% - 2px) 5%);
          mask:repeating-linear-gradient(90deg,#000 0 calc(5% - 2px),transparent calc(5% - 2px) 5%)}
.progress-bar{border-radius:0}

/* ---------- stopka: linia gasnąca na końcach z rombem pośrodku zamiast pełnego obramowania ---------- */
.footer{border-top:0;background:var(--rule) center top/100% 1px no-repeat}
.footer::before{content:"";position:absolute;top:-3px;left:50%;width:7px;height:7px;margin-left:-3.5px;rotate:45deg;background:rgba(var(--accent-rgb),0.7)}