/* =============================================================================
   Faqja publike e Factcheck.al

   Ndërtuar mbi tokenat e sistemit Industry (tokens.css). Asnjë ngjyrë, hapësirë
   apo madhësi teksti nuk shkruhet këtu drejtpërdrejt — çdo gjë vjen nga tokenat,
   që faqja dhe prototipi të mos divergjojnë.

   Cepat janë katrorë. Kjo nuk është zgjedhje stili: objektet e këtij sistemi
   janë vizatime teknike, dhe një rreze do t'i bënte pllaka.
   ========================================================================== */

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t3);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .kryeradhe {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: .01em;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: var(--t6); line-height: 1.05; }
h2 { font-size: var(--t5); line-height: 1.15; }
h3 { font-size: var(--t4); line-height: 1.2; }

a { color: var(--red-ink); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--red-active); }
:focus-visible { outline: 2px solid var(--red-ink); outline-offset: 2px; }

code, .mono { font-family: var(--font-mono); font-size: .92em; }
.num { font-variant-numeric: tabular-nums; }

/* ── Struktura ─────────────────────────────────────────────────────────── */
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 var(--s5); }

.krye {
  border-bottom: 1px solid var(--line);
  background: var(--ground);
  position: sticky; top: 0; z-index: 20;
}
.krye .wrap {
  display: flex; align-items: center; gap: var(--s5);
  min-height: var(--top-h);
}
/* ── Marka: shenja me check + emri ─────────────────────────────────────── */
/* Shenja është katror i mbushur me theksin dhe një check të bardhë brenda —
   e njëjta figurë si te favicon-i, që skeda dhe faqja të njihen bashkë. */
.marka {
  display: inline-flex; align-items: center; gap: var(--s3);
  text-decoration: none; white-space: nowrap; color: var(--ink);
}
/* Shenja është KATROR ME KUFI me shenja regjistrimi në cepa dhe check-un me
   ngjyrë brenda — jo katror i mbushur. Kjo është gjuha «blueprint» e sistemit:
   objektet vizatohen, nuk lyhen. E mora gabim herën e parë. */
.marka__shenje {
  position: relative;
  width: 26px; height: 26px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--ink); color: var(--red-ink);
  background: transparent;
}
.marka__shenje::after {
  content: ""; position: absolute; inset: -5px; pointer-events: none;
  background-image:
    linear-gradient(var(--mark), var(--mark)), linear-gradient(var(--mark), var(--mark)),
    linear-gradient(var(--mark), var(--mark)), linear-gradient(var(--mark), var(--mark)),
    linear-gradient(var(--mark), var(--mark)), linear-gradient(var(--mark), var(--mark)),
    linear-gradient(var(--mark), var(--mark)), linear-gradient(var(--mark), var(--mark));
  background-size: 1px 9px, 9px 1px, 1px 9px, 9px 1px,
                   1px 9px, 9px 1px, 1px 9px, 9px 1px;
  background-position:
    left 4px top 0, left 0 top 4px, right 4px top 0, right 0 top 4px,
    left 4px bottom 0, left 0 bottom 4px, right 4px bottom 0, right 0 bottom 4px;
  background-repeat: no-repeat;
}
.marka__shenje svg { width: 14px; height: 14px; }
.marka__emer {
  font-family: var(--font-heading); font-size: var(--t4); font-weight: 800;
  letter-spacing: .01em; line-height: 1; text-transform: uppercase;
}
.marka__emer i { font-style: normal; color: var(--red-ink); }

/* ── Navigimi ──────────────────────────────────────────────────────────── */
.nav { display: flex; gap: var(--s1); flex-wrap: wrap; align-items: center; }
.nav a {
  font-family: var(--font-body); font-size: var(--t2); font-weight: 600;
  letter-spacing: .01em;
  color: var(--ink-3); text-decoration: none;
  padding: var(--s2) var(--s3);
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--ink); background: var(--hover); }
.nav a[aria-current] {
  color: var(--red-ink); border-bottom-color: var(--red-fill);
}

/* ── Butonat ikonë te koka ─────────────────────────────────────────────── */
/* Ndërruesi i temës dhe kërkimi. Katrorë, me kufi — që të duken të shtypshëm.
   Deri më 8 shtator ata ishin tekst i thjeshtë dhe nuk dalloheshin nga një
   fjalë e zakonshme. */
.ikone {
  width: var(--tap); height: var(--tap); flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--line-ctl);
  color: var(--ink-2); text-decoration: none;
  background: var(--ground);
}
.ikone svg { width: 17px; height: 17px; }
.ikone:hover { background: var(--hover); color: var(--ink); }
.ikone[aria-current] {
  border-color: var(--red-fill); color: var(--red-ink);
  background: var(--red-wash);
}

.krye__rresht {
  display: flex; align-items: center; gap: var(--s4);
  min-height: var(--top-h);
}
.krye__veprime {
  margin-left: auto;
  display: flex; align-items: center; gap: var(--s2);
}

/* Lidhja e kapërcimit: e dukshme vetëm me tastierë. Pa të, kush shfleton me
   Tab e kalon gjithë navigimin para se të arrijë te teksti. */
.kalo {
  position: absolute; left: -9999px;
  background: var(--red-fill); color: var(--on-red);
  padding: var(--s3) var(--s4); z-index: 100;
  font-weight: 600; text-decoration: none;
}
.kalo:focus { left: var(--s4); top: var(--s2); }


main { padding: var(--s6) 0 var(--s7); }

.fund {
  border-top: 1px solid var(--line);
  padding: var(--s5) 0; margin-top: var(--s7);
  color: var(--ink-3); font-size: var(--t2);
}

/* ── Etiketat e seksioneve ─────────────────────────────────────────────── */
.eyebrow {
  font-family: var(--font-heading); font-size: var(--t1);
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--ink-3); margin-bottom: var(--s2);
}

/* ── Kartat: vizatime me kornizë, jo pllaka ────────────────────────────── */
.karta {
  border: 1px solid var(--line);
  padding: var(--s4);
  background: var(--surface);
  position: relative;
}
/* Shenjat e regjistrimit «+» në katër qoshet, vetëm CSS. Katër `<i>` për
   qoshe do të ishin katërqind elemente në një faqe me njëqind karta. */
.karta--shenja::after {
  content: ""; position: absolute; inset: -3px; pointer-events: none;
  background:
    linear-gradient(var(--line-ctl),var(--line-ctl)) 0 0/7px 1px no-repeat,
    linear-gradient(var(--line-ctl),var(--line-ctl)) 0 0/1px 7px no-repeat,
    linear-gradient(var(--line-ctl),var(--line-ctl)) 100% 0/7px 1px no-repeat,
    linear-gradient(var(--line-ctl),var(--line-ctl)) 100% 0/1px 7px no-repeat,
    linear-gradient(var(--line-ctl),var(--line-ctl)) 0 100%/7px 1px no-repeat,
    linear-gradient(var(--line-ctl),var(--line-ctl)) 0 100%/1px 7px no-repeat,
    linear-gradient(var(--line-ctl),var(--line-ctl)) 100% 100%/7px 1px no-repeat,
    linear-gradient(var(--line-ctl),var(--line-ctl)) 100% 100%/1px 7px no-repeat;
}

.rrjet { display: grid; gap: var(--s4); }
.rrjet--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.rrjet--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.rrjet--4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* ── Numrat e mëdhenj ──────────────────────────────────────────────────── */
.shifra { font-family: var(--font-heading); font-size: var(--t6);
          line-height: 1; font-variant-numeric: tabular-nums; }
.shifra-etikete { font-size: var(--t2); color: var(--ink-3); margin-top: var(--s1); }

/* ── Shenjat e gjendjes ────────────────────────────────────────────────── */
.shenje {
  display: inline-flex; align-items: center; gap: var(--s1);
  font-family: var(--font-heading); font-size: var(--t1);
  text-transform: uppercase; letter-spacing: .07em;
  padding: 2px var(--s2); border: 1px solid currentColor;
  white-space: nowrap;
}
.shenje--online   { color: var(--fc-ok-fg);      background: var(--fc-ok-bg); }
.shenje--edited   { color: var(--fc-warn-fg);    background: var(--fc-warn-bg); }
.shenje--deleted  { color: var(--fc-danger-fg);  background: var(--fc-danger-bg); }
.shenje--redirected { color: var(--fc-mis-fg);   background: var(--fc-mis-bg); }
.shenje--unreachable { color: var(--fc-neutral-fg); background: var(--fc-neutral-bg); }
.shenje--high     { color: var(--fc-ok-fg);      background: var(--fc-ok-bg); }
.shenje--medium   { color: var(--fc-warn-fg);    background: var(--fc-warn-bg); }
.shenje--low      { color: var(--fc-mis-fg);     background: var(--fc-mis-bg); }
.shenje--unknown  { color: var(--fc-neutral-fg); background: var(--fc-neutral-bg); }

/* ── Fazat e lajmit ────────────────────────────────────────────────────── */
.faze { font-family: var(--font-mono); font-size: var(--t1);
        color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }

/* ── Lista lajmesh ─────────────────────────────────────────────────────── */
.lista { list-style: none; margin: 0; padding: 0; }
.lista > li { border-bottom: 1px solid var(--line-soft); padding: var(--s4) 0; }
.lista > li:first-child { padding-top: 0; }
.rresht { display: flex; gap: var(--s4); align-items: baseline; flex-wrap: wrap; }
.rresht__kohe { font-family: var(--font-mono); font-size: var(--t2);
                color: var(--ink-3); white-space: nowrap; min-width: 4.6em; }
.rresht__titull { flex: 1 1 22ch; font-weight: 500; }
.rresht__titull a { color: var(--ink); text-decoration: none; }
.rresht__titull a:hover { color: var(--red-ink); text-decoration: underline; }
.rresht__burim { font-family: var(--font-mono); font-size: var(--t2);
                 color: var(--ink-3); }

/* ── Kronologjia e një lajmi ───────────────────────────────────────────── */
.kroniko { list-style: none; margin: 0; padding: 0 0 0 var(--s5);
           border-left: 1px solid var(--line); }
.kroniko > li { position: relative; padding: var(--s3) 0 var(--s3) var(--s4); }
.kroniko > li::before {
  content: ""; position: absolute; left: calc(var(--s5) * -1 - 1px); top: var(--s4);
  width: 9px; height: 1px; background: var(--line-ctl);
}
.kroniko > li[data-stage="origjine"]::before { width: 15px; height: 3px;
  background: var(--red-ink); top: calc(var(--s4) - 1px); }

/* ── Prova ─────────────────────────────────────────────────────────────── */
.prove {
  font-family: var(--font-mono); font-size: var(--t1);
  color: var(--ink-3); word-break: break-all;
  border-left: 2px solid var(--line); padding-left: var(--s3);
}

/* ── Tabelat ───────────────────────────────────────────────────────────── */
.tab-wrap { overflow-x: auto; }
/* ── Tabelat ───────────────────────────────────────────────────────────── */
/* Koka ngjitet kur tabela rrëshqet dhe ka truall të vetin: pa të, në një
   tabelë me tridhjetë rreshta nuk dihet më cila kolonë është cila. */
table { border-collapse: collapse; width: 100%; font-size: var(--t3); }
th, td { text-align: left; padding: var(--s3);
         border-bottom: 1px solid var(--line-soft); vertical-align: top; }
th {
  position: sticky; top: 0; z-index: 1;
  background: var(--sunk);
  font-family: var(--font-heading); font-size: var(--t1); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2);
  border-bottom: 2px solid var(--line-ctl);
  white-space: nowrap;
}
tbody tr:hover td { background: var(--hover); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ── Kontrollet ────────────────────────────────────────────────────────── */
/* ── Butonat ───────────────────────────────────────────────────────────── */
/* Tri nivele, dhe secili e thotë me pamje çfarë bën: `--kryesor` i mbushur
   (veprimi që faqja pret), i zakonshëm me kufi, `--i-heshtur` pa kufi.
   Deri më 8 shtator 2026 ishin të gjithë njësoj — dhe një «Boto verdiktin»
   dukej sa një «Kthehu». */
.butoni, .fusha {
  font-family: var(--font-body); font-size: var(--t3); font-weight: 600;
  min-height: var(--ctl-h); padding: 0 var(--s4);
  border: 1px solid var(--line-ctl);
  background: var(--ground); color: var(--ink);
  transition: background var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease);
}
.butoni {
  cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s2); white-space: nowrap;
}
.butoni:hover { background: var(--hover); border-color: var(--ink-3); }
.butoni:active { background: var(--press); }

.butoni--kryesor {
  background: var(--red-fill); color: var(--on-red);
  border-color: var(--red-fill); font-weight: 700;
}
.butoni--kryesor:hover { background: var(--red-hover);
                         border-color: var(--red-hover); }

.butoni--i-heshtur { border-color: transparent; color: var(--ink-2);
                     font-weight: 500; }
.butoni--i-heshtur:hover { border-color: var(--line-ctl); }

.butoni--vogel { min-height: var(--ctl-h-sm); font-size: var(--t2);
                 padding: 0 var(--s3); }

/* Rrezik: fshirje, heqje, pezullim. Nuk përdoret për asgjë tjetër — nëse çdo
   buton është i kuq, asnjëri nuk paralajmëron. */
.butoni--rrezik { border-color: var(--fc-danger); color: var(--fc-danger-fg); }
.butoni--rrezik:hover { background: var(--fc-danger-bg); }

.butoni:disabled, .butoni[disabled] {
  opacity: .45; cursor: not-allowed; pointer-events: none;
}

/* ── Shënimi i pasigurisë ──────────────────────────────────────────────── */
.pasiguri {
  font-size: var(--t2); color: var(--ink-3);
  border-left: 2px solid var(--fc-warn); padding-left: var(--s3);
  margin-top: var(--s3);
}

/* ── Telefoni ──────────────────────────────────────────────────────────── */
/*
   E MATUR, JO E PARË ME SY. `tools/mobil.py` hap çdo faqe në 360, 390 dhe 768
   px me Chromium dhe mat katër gjëra: rrjedhje anësore, cakë prekjeje nën
   44 px, tekst nën 12 px, dhe elemente jashtë ekranit. Çdo rregull këtu vjen
   nga një gjetje e saj.

   PSE 44 px. Nuk është preferencë: është gjerësia mesatare e majës së gishtit.
   Cakët e navigimit ishin 39 px te ÇDO faqe — mjaftueshëm sa të duken mirë,
   pak sa të gabohen.

   PSE 16 px TE FUSHAT. Nën 16 px, Safari-ja te iOS e zmadhon faqen vetë kur
   fusha merr fokusin, dhe përdoruesi mbetet i zmadhuar pas shtypjes. Kjo nuk
   ndreqet me `user-scalable=no` — dhe as nuk duhet: ai flamur ua heq
   zmadhimin atyre që u duhet vërtet.
*/
@media (max-width: 900px) {
  /* Koka ndjek faqen. Në një arkiv ku faqet janë të gjata, kthimi te
     navigimi nuk duhet të kërkojë rrëshqitje deri lart. */
  .krye {
    position: sticky; top: 0; z-index: 20;
    background: var(--ground);
    border-bottom: 1px solid var(--line);
  }
  .krye .wrap {
    flex-wrap: wrap; gap: var(--s2) var(--s3);
    padding-top: var(--s3); padding-bottom: var(--s3);
  }

  /* Navigimi rrëshqet horizontalisht në vend që të mbështillet në tri
     rreshta. Shiriti fshihet: në telefon ai zë hapësirë dhe nuk shtyp dot. */
  .nav {
    gap: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
    width: 100%;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a {
    flex: 0 0 auto;
    min-height: var(--tap);
    display: inline-flex; align-items: center;
    padding: 0 var(--s3);
    white-space: nowrap;
  }
  .marka { min-height: var(--tap); display: inline-flex; align-items: center; }
}

@media (max-width: 640px) {
  h1 { font-size: var(--t5); }
  h2 { font-size: var(--t4); }
  .rresht__kohe { min-width: 0; }

  /* Rreshti i listës kalon nga një rresht i vetëm te dy: ora dhe shenja lart,
     titulli poshtë. Në 360 px një rresht i vetëm i shtyp të gjitha. */
  .rresht {
    flex-wrap: wrap;
    row-gap: var(--s2);
    align-items: baseline;
  }
  .rresht__titull { flex: 1 1 100%; order: 3; }
  .rresht__burim  { order: 4; }

  /* Çdo gjë që shtypet arrin cakun e gishtit. */
  .lista a, .kroniko a, .prove a {
    min-height: var(--tap);
    display: inline-flex; align-items: center;
  }

  /* Fushat: 16 px që iOS të mos zmadhojë vetë. */
  .forma input, .forma select, .forma textarea { font-size: 16px; }
  .forma input, .forma select { height: var(--tap); }
  .butoni { min-height: var(--tap); }

  /* Kartat dhe rrjeti bëhen një kolonë. */
  .rrjet { grid-template-columns: 1fr; }
  .shifra { font-size: var(--t5); }

  /* Hash-et thyhen kudo; përndryshe ato vetëm e nxjerrin faqen jashtë. */
  .mono, .prove { overflow-wrap: anywhere; }
}

/* Cak-u i gishtit vlen për ÇDO pajisje me prekje, jo vetëm për telefonin.
   Tableti te 768 px i kishte fushat 36 px — mjaftueshëm për një mi, pak për
   një gisht. `hover: none` e ndan pajisjen që preket nga ajo që tregohet, dhe
   e bën ndarjen mbi aftësinë e vërtetë të pajisjes, jo mbi gjerësinë. */
@media (hover: none) {
  .butoni, button, input, select, textarea, summary, .filtra a {
    min-height: var(--tap);
  }
  input, select { height: var(--tap); }
  input, select, textarea { font-size: 16px; }
}

/* Cakët e prekjes dhe kursori — jo vetëm te telefoni.
   Çdo gjë që shtypet duhet ta thotë me pamje. `summary` nuk e ka nga
   parazgjedhja, dhe një panel që nuk duket i shtypshëm nuk shtypet. */
summary { cursor: pointer; }
summary::marker { color: var(--ink-3); }
button, [role="button"], label { cursor: pointer; }
a { touch-action: manipulation; }
button, .butoni, input[type="submit"] { touch-action: manipulation; }

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

/* ── Formularët ────────────────────────────────────────────────────────── */
/* Fusha e gjatë nuk e trashëgon lartësinë e kontrollit: një arsyetim votimi
   është dy fjali, jo një rresht. */
.forma { display: grid; gap: var(--s4); max-width: 62ch; }
.forma label { display: grid; gap: var(--s2); font-size: var(--t2);
               font-family: var(--font-heading); letter-spacing: .04em;
               text-transform: uppercase; color: var(--ink-3); }
.forma input, .forma textarea, .forma select {
  font-family: var(--font-body); font-size: var(--t3);
  padding: var(--s3); border: 1px solid var(--line-ctl);
  background: var(--ground); color: var(--ink); width: 100%;
}
.forma input, .forma select { height: var(--ctl-h); padding: 0 var(--s3); }
.forma textarea { min-height: 7rem; resize: vertical; line-height: 1.5; }
.forma :focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.forma .ndihme { font-size: var(--t2); color: var(--ink-3);
                 text-transform: none; letter-spacing: 0; font-family: var(--font-body); }

/* ── Votimi ────────────────────────────────────────────────────────────── */
/* Tri butonat kanë të njëjtën peshë vizuale me qëllim. Nëse «po» dukej më i
   fortë se «jo», forma vetë do të sugjeronte përgjigjen. */
.vota { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: center; }
.vota button { min-width: 7rem; justify-content: center; }
.vota .zgjedhur { border-color: var(--red-fill); box-shadow: inset 0 0 0 1px var(--red-fill); }

.shtylla { display: flex; height: var(--bar, 6px); background: var(--sunk);
           border: 1px solid var(--line-soft); }
.shtylla i { display: block; height: 100%; }
.shtylla .po { background: var(--fc-ok); }
.shtylla .jo { background: var(--fc-danger); }

.shenje--perjashtuar { background: var(--fc-warn-bg); color: var(--fc-warn-fg); }
.perjashtuar { opacity: .62; }

/* ── Lista e kontrollit ────────────────────────────────────────────────── */
/* Kutia e paplotësuar duket sa ajo e plotësuara: një rast gjysmë i bërë duhet
   të lexohet si gjysmë i bërë, jo si i bërë me disa hapa të munguar. */
.kontroll { list-style: none; display: grid; gap: var(--s2); }
.kontroll li { display: flex; gap: var(--s3); align-items: baseline;
               font-size: var(--t3); }
.kontroll .kuti { font-family: var(--font-mono); color: var(--ink-3); }
.kontroll .po .kuti { color: var(--fc-ok); }
.kontroll .jo { color: var(--ink-3); }

/* ── Filtrat si çipa ───────────────────────────────────────────────────── */
/*
   Rreshtat e filtrave ishin lidhje teksti 18 px të larta. Ato NUK janë tekst
   në rrjedhë — janë kontrolle, dhe një kontroll duhet të arrijë cakun e
   gishtit.

   Dallimi ka rëndësi dhe nuk duhet fshirë: një lidhje brenda një fjalie
   mbetet lidhje teksti. Detyrimi i 44 px mbi çdo `<a>` do ta prishte
   paragrafin dhe do ta bënte leximin më të keq për të gjithë.
*/
.filtra {
  display: flex; flex-wrap: wrap; gap: var(--s2);
  align-items: center; margin: var(--s4) 0;
  font-family: var(--font-mono); font-size: var(--t2);
}
.filtra > span { color: var(--ink-3); margin-right: var(--s2); }
.filtra a {
  display: inline-flex; align-items: center;
  min-height: var(--tap); padding: 0 var(--s3);
  border: 1px solid var(--line-ctl);
  color: var(--ink-2); text-decoration: none;
  white-space: nowrap;
}
.filtra a:hover { background: var(--hover); }
.filtra a[aria-current] {
  background: var(--sunk); color: var(--ink);
  border-color: var(--line); font-weight: 600;
}


/* ── Zona e sigurt dhe sjellja si app ─────────────────────────────────── */
/*
   PRERJA E EKRANIT. Me `viewport-fit=cover`, faqja shtrihet nën shiritin e
   statusit dhe nën shiritin e poshtëm të telefonit. `env(safe-area-inset-*)`
   e mban përmbajtjen larg tyre — pa të, koka ngjitëse hyn nën orën e telefonit.
*/
.wrap {
  padding-left: max(var(--s4), env(safe-area-inset-left));
  padding-right: max(var(--s4), env(safe-area-inset-right));
}
.fund { padding-bottom: max(var(--s5), env(safe-area-inset-bottom)); }

/* Rrëshqitje e butë kur një lidhje tregon brenda faqes. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Theksimi te prekja: pa të, telefoni vizaton një drejtkëndësh blu mbi çdo
   lidhje dhe faqja duket si dokument, jo si app. */
a, button, .butoni, summary { -webkit-tap-highlight-color: transparent; }
a:active, .butoni:active, .filtra a:active { background: var(--press); }

/* Fokusi mbetet i dukshëm — heqja e tij do ta bënte faqen të papërdorshme me
   tastierë, dhe kjo është shkëmbim që nuk e bëjmë për pamje. */
a:focus-visible, button:focus-visible, .butoni:focus-visible,
summary:focus-visible, .filtra a:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 2px;
}

/* Tabelat rrëshqitëse e thonë vetë se rrëshqasin: pa këtë hije, një kolonë e
   fshehur djathtas nuk gjendet kurrë. */
.tab-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background:
    linear-gradient(to right, var(--ground) 30%, transparent),
    linear-gradient(to left,  var(--ground) 30%, transparent) 100% 0,
    radial-gradient(farthest-side at 0 50%, var(--shadow), transparent),
    radial-gradient(farthest-side at 100% 50%, var(--shadow), transparent) 100% 0;
  background-repeat: no-repeat;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}
.tab-wrap table { min-width: max-content; }


/* ── Seksionet e ndara ─────────────────────────────────────────────────── */
/* Deri më 8 shtator 2026 faqja ishte një kolonë e vetme teksti me tituj: e
   lexueshme, por pa asnjë ndarje që të thoshte ku mbaron një temë dhe ku nis
   tjetra. Titulli i seksionit tani ka një vijë theksi majtas dhe hapësirë
   sipër — dy sinjale të lira që e ndajnë faqen pa shtuar as kuti as hije. */
main h2 {
  font-family: var(--font-heading); font-weight: 700;
  letter-spacing: -.01em;
  margin-top: var(--s7); margin-bottom: var(--s4);
  padding-left: var(--s3);
  border-left: 3px solid var(--red-fill);
  line-height: 1.15;
}
main h1 {
  font-family: var(--font-heading); font-weight: 800;
  letter-spacing: -.02em; line-height: 1.05;
  text-wrap: balance;
}
.eyebrow {
  color: var(--red-ink); font-weight: 700;
}

/* ── Kartat ────────────────────────────────────────────────────────────── */
.karta {
  border: 1px solid var(--line);
  background: var(--surface);
  padding: var(--s5);
}
.karta--shenja {
  border-left: 3px solid var(--red-fill);
  background: var(--red-wash);
}
.rrjet { display: grid; gap: var(--s4);
         grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* ── Fundi ─────────────────────────────────────────────────────────────── */
/* Katër kolona me lidhje të vërteta, jo një rresht i vetëm i ndarë me pika.
   Fundi është vendi ku dikush kërkon API-në ose rrjedhat — dhe ato duhen
   gjetur, jo kërkuar. */
.fund {
  margin-top: var(--s7);
  border-top: 2px solid var(--line-ctl);
  background: var(--sunk);
  padding-top: var(--s6);
}
.fund__rrjet {
  display: grid; gap: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin-bottom: var(--s5);
}
.fund__rrjet > div { display: flex; flex-direction: column; gap: var(--s2); }
.fund__titull {
  font-family: var(--font-heading); font-size: var(--t1); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: var(--s1);
}
.fund__rrjet a {
  color: var(--ink-2); text-decoration: none; font-size: var(--t2);
  min-height: var(--tap); display: inline-flex; align-items: center;
}
.fund__rrjet a:hover { color: var(--red-ink); text-decoration: underline; }
.fund__shenim {
  max-width: 74ch; font-size: var(--t2); color: var(--ink-3);
  border-top: 1px solid var(--line-soft); padding-top: var(--s4);
}

/* ── Lidhjet te trupi ──────────────────────────────────────────────────── */
main a { color: var(--red-ink); text-underline-offset: 2px; }
main a:hover { text-decoration-thickness: 2px; }

/* ── Telefoni: koka e re ───────────────────────────────────────────────── */
@media (max-width: 900px) {
  .krye__rresht { flex-wrap: wrap; row-gap: var(--s2); }
  .nav { order: 3; width: 100%; }
  .krye__veprime { margin-left: auto; }
  .marka__emer { font-size: var(--t3); }
}
@media (max-width: 640px) {
  main h2 { margin-top: var(--s6); }
  .fund__rrjet { grid-template-columns: repeat(2, 1fr); }
}


/* ── Radari i skanimit ─────────────────────────────────────────────────── */
/* I marrë nga prototipi, i vizatuar me CSS të pastër: unaza, boshte, rrezja
   që rrotullohet dhe pikat e kapjeve të fundit.

   PIKAT VIJNË NGA TË DHËNA TË VËRTETA, JO NGA RASTËSIA. Këndi është burimi,
   rrezja është sa e freskët është kapja — sa më e re, aq më pranë qendrës.
   Një radar me pika të sajuara do të ishte zbukurim që pretendon matje. */
.radar {
  position: relative; overflow: hidden;
  padding: var(--s4); display: flex; flex-direction: column; gap: var(--s3);
  border: 1px solid var(--line); background: var(--surface);
}
.radar__krye { display: flex; justify-content: space-between; align-items: baseline; }
.radar__fytyre { position: relative; aspect-ratio: 1; margin: 0 auto;
                 width: min(250px, 100%); }
.radar__fytyre .unaze { position: absolute; border-radius: 50%;
                        border: 1px solid var(--line); }
.radar__fytyre .r1 { inset: 0; }
.radar__fytyre .r2 { inset: 18%; }
.radar__fytyre .r3 { inset: 36%; }
.radar__fytyre .bx { position: absolute; left: 50%; top: 0; bottom: 0;
                     width: 1px; background: var(--line); }
.radar__fytyre .by { position: absolute; top: 50%; left: 0; right: 0;
                     height: 1px; background: var(--line); }
.radar__rreze {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg,
    color-mix(in srgb, var(--red) 45%, transparent) 60deg, transparent 62deg);
  animation: fc-spin 4s linear infinite;
}
.radar__pike {
  position: absolute; width: 7px; height: 7px; margin: -3.5px;
  border-radius: 50%; background: var(--red);
  animation: fc-blink 4s linear infinite;
}
.radar__qender { position: absolute; left: 50%; top: 50%; width: 6px;
                 height: 6px; margin: -3px; background: var(--ink); }
.radar__fund { display: flex; justify-content: space-between; gap: var(--s2);
               font-family: var(--font-mono); font-size: var(--t1);
               color: var(--ink-3); }
.radar__skan {
  position: absolute; left: 0; right: 0; top: 0; height: 25%;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent,
    color-mix(in srgb, var(--red) 8%, transparent));
  animation: fc-scan 5s linear infinite;
}
@keyframes fc-spin { to { transform: rotate(360deg); } }
@keyframes fc-blink { 50% { opacity: .25; } }
@keyframes fc-scan { 0% { transform: translateY(-100%); }
                     100% { transform: translateY(400%); } }

/* Kush ka kërkuar lëvizje më të pakët nuk duhet ta ketë ekranin që rrotullohet. */
@media (prefers-reduced-motion: reduce) {
  .radar__rreze, .radar__pike, .radar__skan { animation: none; }
  .radar__skan { display: none; }
}

/* ── Hero-ja e ballinës ────────────────────────────────────────────────── */
/* Teksti majtas, radari djathtas. Radari nuk është dekor: është e vetmja gjë
   te faqja që tregon se sistemi po punon TANI, dhe pikat e tij janë kapje të
   vërteta të orës së fundit. */
.hero {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--s6); align-items: start;
  padding: var(--s6) 0 var(--s7);
}
.hero__tekst { display: grid; gap: var(--s4); }
.hero h1 { font-size: clamp(30px, 5vw, 52px); line-height: 1.02; margin: 0; }
.hero__lead { max-width: 56ch; font-size: var(--t4); color: var(--ink-2);
              line-height: 1.45; }
.hero__lead strong { color: var(--ink); }
.hero__veprime { display: flex; gap: var(--s3); flex-wrap: wrap;
                 margin-top: var(--s2); }
.hero__veprime .butoni { min-height: var(--tap); padding: 0 var(--s5); }

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; gap: var(--s5); }
  .radar { max-width: 340px; }
}


/* ── Diferenca e redaktimit ───────────────────────────────────────────
   Fjalitë para dhe pas, jo një numër. `diff_detail` i ruan që në çastin e
   zbulimit; deri më 8 shtator 2026 asnjë faqe nuk i lexonte, sepse shablloni
   kërkonte çelësa që prodhuesi nuk i shkruante kurrë. */
.diff {
  margin-top: var(--s3);
  border-left: 2px solid var(--line-ctl);
  padding-left: var(--s3);
  font-size: var(--t2);
  line-height: 1.55;
}
.diff__pjese { margin-bottom: var(--s3); }
.diff__pjese:last-child { margin-bottom: 0; }
.diff__kontekst { color: var(--ink-3); }
.diff del {
  background: color-mix(in oklab, var(--fc-danger) 14%, transparent);
  color: var(--ink);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  padding: 0 .15em;
}
.diff ins {
  background: color-mix(in oklab, var(--fc-ok) 16%, transparent);
  color: var(--ink);
  text-decoration: none;
  padding: 0 .15em;
}


/* ── Tabet e arkivit ──────────────────────────────────────────────────
   Tri pamje mbi të njëjtat të dhëna — çfarë u botua, çfarë ndryshoi, çfarë u
   hoq. Ishin tre zëra navigimi dhe e mbushnin kokën; janë një grup.

   Cak-u i prekjes mbetet 44 px, si te navigimi: te telefoni këta janë butona,
   jo tekst. */
.tabet {
  display: flex;
  gap: 0;
  margin-bottom: var(--s5);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabet::-webkit-scrollbar { display: none; }
.tabet a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 var(--s4);
  color: var(--ink-3);
  text-decoration: none;
  font-size: var(--t3);
  font-weight: 500;
  letter-spacing: .01em;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tabet a:hover { color: var(--ink); }
.tabet a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--color-accent);
  font-weight: 600;
}


/* ══════════════════════════════════════════════════════════════════════════
   TELEFONI SI APLIKACION
   ══════════════════════════════════════════════════════════════════════════
   Auditimi i matur (tools/mobil.py, 9 shtator 2026) nuk gjeti asnjë rrjedhje
   anësore te 47 faqe — por pamjet e ekranit te 390 px treguan tri gjëra që
   një matje nuk i kap:

     · koka merrte ~330 nga 844 px: logo, pastaj një rresht veprimesh, pastaj
       një rresht navigimi që rrëshqiste pa asnjë shenjë se rrëshqet;
     · tabelat e panelit e humbnin kolonën e VEPRIMIT jashtë ekranit djathtas
       — pikërisht kolonën për të cilën hapet ajo faqe;
     · kutizat e zgjedhjes ishin 13 px të gjera.

   Zgjidhja ndjek atë që bën çdo aplikacion: navigimi kryesor shkon POSHTË, nën
   gishtin e madh, dhe koka mbetet e hollë. Tabelat me veprime bëhen karta.
   ────────────────────────────────────────────────────────────────────────── */

/* Shiriti i poshtëm (`.shiriti`): ekziston vetëm në telefon.
   EMRI ËSHTË UNIK ME QËLLIM. Versioni i parë u quajt njësoj si nën-tab-et e
   arkivit te `_tabet_lajme.html`, dhe CSS-ja e re i ngjiti edhe ato te fundi
   i ekranit, mbi shiritin. U pa vetëm te pamja e errët e `/lajme`, jo te
   auditimi i matur: dy elemente `position: fixed` në të njëjtin vend nuk
   rrjedhin — vetëm mbivendosen. Në desktop `.nav` te koka
   mbetet, dhe ky shirit nuk vizatohet fare — dy navigime njëherësh do të
   ishin zhurmë. */
.shiriti { display: none; }

@media (max-width: 900px) {
  .shiriti {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    display: grid; grid-template-columns: repeat(5, 1fr);
    background: var(--surface);
    border-top: 1px solid var(--line);
    /* Nën shiritin e sistemit te iPhone: pa këtë, tab-i i fundit rri pas
       vijës së «home». */
    padding-bottom: env(safe-area-inset-bottom);
  }
  .shiriti a {
    display: grid; place-items: center; gap: 2px;
    min-height: 56px; padding: var(--s2) 0;
    color: var(--ink-3); text-decoration: none;
    font-family: var(--font-heading); font-size: 10.5px; font-weight: 600;
    letter-spacing: .04em; text-transform: uppercase;
    -webkit-tap-highlight-color: transparent;
  }
  .shiriti a svg { width: 22px; height: 22px; stroke-width: 1.8; }
  .shiriti a[aria-current] { color: var(--red-ink); }
  /* Shenja e regjistrimit «+» e dizajnit, e reduktuar te një vijë sipër
     tab-it aktiv — e njëjta gjuhë, në një hapësirë 56 px. */
  .shiriti a[aria-current]::before {
    content: ""; position: absolute; top: -1px; width: 28px; height: 2px;
    background: var(--red-fill);
  }
  .shiriti a { position: relative; }
  .shiriti a:active { background: var(--press); }

  /* Përmbajtja dhe fundi nuk duhen fshehur nën shirit. */
  main { padding-bottom: calc(var(--s7) + 64px + env(safe-area-inset-bottom)); }
  .fund { padding-bottom: calc(var(--s5) + 64px + env(safe-area-inset-bottom)); }

  /* Koka bëhet e hollë: navigimi kryesor është poshtë tani. */
  .krye .nav { display: none; }
  .krye__rresht { flex-wrap: nowrap; min-height: 52px; }
  .krye .wrap { padding-top: var(--s2); padding-bottom: var(--s2); }
  .marka__emer { font-size: var(--t3); }
  /* Kërkimi e ka tab-in e vet poshtë; te koka mbetet vetëm tema dhe llogaria. */
  .krye__veprime .ikone[href="/kerko"] { display: none; }
  /* Butonat e kokës mbeten te cak-u i gishtit (44 px). Një version i parë
     i uli te 40 «që koka të dukej më e hollë» — dhe auditimi i kapi te të
     47 faqet menjëherë. Hollësia fitohet nga rreshti, jo nga butoni. */
  .krye__veprime .butoni { min-height: var(--tap); }
}

/* INDEKSI i panelit — shtatëmbëdhjetë faqet e tij, si përmbajtje.
   EMRI NDRYSHOI më 13 shtator 2026: `.paneli-nav` i takon tani shiritit të
   fiksuar poshtë, atij që kanë të 19 faqet e panelit. Kjo listë nuk është
   shirit navigimi; është indeks, dhe ndryshimi i emrit është ai që i ndan —
   kurthi `.tabet` e mësoi njëherë se dy elemente me të njëjtën klasë marrin
   të njëjtin `position: fixed` dhe nuk rrjedhin, vetëm mbivendosen. */
.paneli-lidhjet { display: flex; gap: var(--s4); flex-wrap: wrap; }
@media (max-width: 900px) {
  /* Dy kolona, jo një shirit që rrëshqet. Si shirit, nëntë nga
     shtatëmbëdhjetë zërat rrinin jashtë ekranit te faqja që ekziston
     pikërisht për ta treguar të gjithë. */
  .paneli-lidhjet {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 0;
    border-top: 1px solid var(--line-soft);
  }
  .paneli-lidhjet a {
    min-height: var(--tap);
    display: inline-flex; align-items: center;
    padding: 0 var(--s3); white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
    text-decoration: none; color: var(--ink-2);
    border-bottom: 1px solid var(--line-soft);
    touch-action: manipulation;
  }
  .paneli-lidhjet a:active { background: var(--press); }
  .paneli-lidhjet a[aria-current] { color: var(--red-ink); background: var(--red-wash); }
}

/* Tabela që bëhet karta: për tabelat ku ka një kolonë VEPRIMI.
   Në desktop është tabelë e zakonshme. Nën 640 px çdo rresht bëhet një kartë
   dhe çdo qelizë shkruan vetë emrin e kolonës para vlerës — kështu kolona e
   fundit, ajo me butonat, nuk mbetet kurrë jashtë ekranit.
   Përdoret me `<td data-label="…">`. Pa `data-label` qeliza del pa emër. */
@media (max-width: 640px) {
  table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; }
  table.stack thead { display: none; }
  .tab-wrap table.stack { min-width: 0; }
  table.stack tr {
    border: 1px solid var(--line); background: var(--surface);
    padding: var(--s3) var(--s4); margin-bottom: var(--s3);
  }
  table.stack td {
    border: 0; padding: var(--s1) 0;
    display: flex; justify-content: space-between; align-items: baseline;
    gap: var(--s3); text-align: right;
  }
  table.stack td::before {
    content: attr(data-label);
    flex: 0 0 auto; text-align: left;
    font-family: var(--font-heading); font-size: var(--t1); font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
  }
  table.stack td:not([data-label])::before { content: none; }
  /* Qeliza e veprimit: formularët marrin gjithë gjerësinë. */
  table.stack td.veprimi { display: block; text-align: left; padding-top: var(--s3); }
  table.stack td.veprimi::before { display: block; margin-bottom: var(--s2); }
  table.stack td.veprimi form { display: flex; flex-wrap: wrap; gap: var(--s2); }
  table.stack td.veprimi input[type="text"] { flex: 1 1 10rem; width: auto; }
  table.stack tbody tr:hover td { background: transparent; }
}

/* Kutizat e zgjedhjes: 13 px është një cak për mi, jo për gisht. Vetë kutiza
   rritet, dhe qeliza që e mban bëhet e gjitha e shtypshme përmes `label`. */
input[type="checkbox"] { width: 24px; height: 24px; accent-color: var(--red-fill);
                         cursor: pointer; margin: 0; }
td.zgjedh { width: var(--tap); padding: 0; }
td.zgjedh label { display: grid; place-items: center; min-height: var(--tap);
                  min-width: var(--tap); cursor: pointer; }

/* Rrjeti kompakt: tri shifra në një rresht edhe në telefon. `.rrjet` bie te
   një kolonë nën 640 px, dhe tri karta njëra mbi tjetrën për tri numra
   shpenzojnë gjysmën e ekranit për asgjë. */
.rrjet--kompakt { grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
@media (max-width: 640px) {
  .rrjet--kompakt { grid-template-columns: repeat(3, 1fr); }
  .rrjet--kompakt .karta { padding: var(--s3); }
  /* Etiketa mbetet te madhësia e lexueshme dhe THYHET në dy rreshta nëse
     s'ka vend. Një version i parë e uli te 9,5 px — nën pragun 12 px që vetë
     auditimi ynë e mat — dhe u kap menjëherë. */
  .rrjet--kompakt .eyebrow { overflow-wrap: anywhere; line-height: 1.25; }
}

/* ── Rreshti i metadatave nën një titull ───────────────────────────────── */
/* Për listat ku çdo lajm ka gjashtë-shtatë fakte: data, sa media, sa artikuj,
   kush e pa i pari, siguria. Deri më 13 shtator 2026 ato ishin kolona tabele
   — dhe në telefon tabela rrëshqiste anash, pra gjysma e fakteve rrinte
   jashtë ekranit. Këtu janë një rresht i vogël nën titullin, që thyhet
   lirisht: asgjë nuk rrëshqet, asgjë nuk fshihet. */
.meta {
  display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3);
  font-family: var(--font-mono); font-size: var(--t1);
  color: var(--ink-3); line-height: 1.5; margin-top: var(--s1);
}
.meta > span { white-space: nowrap; }
.meta b { color: var(--ink-2); font-weight: 600; }
.meta time { color: var(--ink-2); }

/* ── Vija kohore e përhapjes (faqja e lajmit të grupuar) ────────────────── */
/* Pika e fundit pulson: është e vetmja gjë «e gjallë» te faqja dhe tregon ku
   ka arritur mbulimi tani. CSS, jo JS — faqja publike nuk ka `<script>`. */
.perhapja .pika { transition: r .15s; }
.perhapja a:hover .pika { r: 8; }
.perhapja .pika--e-fundit {
  animation: fc-puls 2.4s ease-out infinite;
  transform-box: fill-box; transform-origin: center;
}
@keyframes fc-puls {
  0%   { opacity: 1;   transform: scale(1); }
  70%  { opacity: .55; transform: scale(1.9); }
  100% { opacity: 1;   transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .perhapja .pika--e-fundit { animation: none; }
}
.legjenda {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4);
  margin-top: var(--s3); font-family: var(--font-mono); font-size: var(--t1);
  color: var(--ink-3);
}
.legjenda span { display: inline-flex; align-items: center; gap: 6px; }
.legjenda i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

/* ── Faqosja me kursor ─────────────────────────────────────────────────── */
.faqosja {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--s4); margin: var(--s4) 0 var(--s2);
  border-top: 1px solid var(--line-soft); padding-top: var(--s3);
  font-family: var(--font-mono); font-size: var(--t2);
}
.faqosja a { min-height: var(--tap); display: inline-flex; align-items: center;
             padding: 0 var(--s3); text-decoration: none; }
.faqosja a:hover { text-decoration: underline; }

/* ── Njoftimi Alpha ─────────────────────────────────────────────────────
   `<dialog open>` + `<form method="dialog">`: hapet dhe mbyllet pa asnjë
   JavaScript — mbyllja është sjellje e vetë elementit. Shfaqet në çdo
   vizitë me qëllim (vendim i pronarit, 13 shtator 2026): nuk ruhet asgjë.
   Jo modal: nuk bllokon leximin, rri si fletë e ngjitur poshtë, mbi
   shiritin e telefonit. */
dialog.alpha {
  position: fixed; inset: auto var(--s4) calc(var(--s4) + env(safe-area-inset-bottom)) auto;
  left: var(--s4); margin: 0; max-width: 34rem; z-index: 60;
  background: var(--raised); color: var(--ink);
  border: 1px solid var(--line); border-left: 3px solid var(--fc-warn);
  border-radius: 0; padding: var(--s4) var(--s5); box-shadow: 0 8px 32px rgba(0,0,0,.18);
}
dialog.alpha .eyebrow { color: var(--fc-warn-fg); }
dialog.alpha p { margin: var(--s2) 0 var(--s3); max-width: 58ch; }
dialog.alpha form { margin: 0; display: flex; gap: var(--s3); align-items: center; }
@media (max-width: 900px) {
  dialog.alpha { left: var(--s3); right: var(--s3); bottom: calc(64px + var(--s3) + env(safe-area-inset-bottom)); max-width: none; }
}


/* ══════════════════════════════════════════════════════════════════════════
   APLIKACIONI — kromë, kalimi, rreshti
   ══════════════════════════════════════════════════════════════════════════
   Kërkesa e pronarit (13 shtator 2026): «versioni mobile të jetë si një app i
   vërtetë — faqja publike DHE paneli». Pa një rresht JavaScript: i vetmi
   `<script>` i lejuar te faqja publike është JSON-LD, dhe dy prova e matin.

   Ajo që e ndan një aplikacion nga një faqe nuk është animacioni. Janë tri
   gjëra, dhe të tria bëhen me CSS:

     · KROMA QËNDRON. Koka dhe shiriti nuk rrëshqasin bashkë me tekstin — ata
       rrinë, dhe përmbajtja shkon nën ta. Prandaj të tejdukshëm me
       `backdrop-filter`; prandaj `view-transition-name`, që të mos pulsojnë
       kur kalon faqja.
     · KALIMI LEXOHET SI NAVIGIM, JO SI RINGARKIM. `@view-transition` ndër-
       dokument: e vjetra shuhet, e reja hyn nga poshtë, 180 ms.
     · RRESHTI DUKET I SHTYPSHËM. Lista është rresht aplikacioni: ndarës i
       hollë, titull, meta poshtë, shenjë «më tutje» djathtas.

   Çdo rregull këtu vjen nga një numër i matur me `tools/aplikacioni.py`, jo
   nga një pamje ekrani. Numrat para punës: 141 faqe×gjerësi, 139 me probleme
   — kokë 88, shirit 54, cakë nën 44 px 135, fusha nën 16 px 51.
   ────────────────────────────────────────────────────────────────────────── */

/* ── 1. Koka: kromë e tejdukshme, e hollë ───────────────────────────────── */
/*
   MATJA RRËZOI NJË PRETENDIM TË SHKRUAR. CLAUDE.md thoshte «kokë e hollë
   52 px». E matura te Chromium, 360 dhe 390 px: **109 px me sesion**, 59 px
   pa sesion. Kontrata kërkon ≤ 56 — pra gabim te të dyja gjendjet, te çdo
   faqe.

   Shkaku është specifikitet. `.krye .wrap` (0,2,0) mban `flex-wrap: wrap` nga
   blloku i 900 px; `.krye__rresht` (0,1,0) provonte `nowrap` shtatëdhjetë
   rreshta më poshtë dhe humbte pa zë. Me sesion, koka mbështillej në dy
   rreshta 44 px, sepse «Paneli» dhe emri i llogarisë nuk hynin bashkë me
   markën.

   PSE ASNJË MATJE NUK E KAPI: `tools/mobil.py` mat rrjedhje anësore, cakë
   prekjeje, tekst të vogël. Një kokë dy herë më e lartë se ç'thotë
   dokumentacioni nuk shkel asnjë prej tyre — dhe nuk duket te një pamje
   ekrani, sepse pamja nuk mban vizore.

   Ndreqja ka dy gjysma, dhe pa të dytën e para prodhon rrjedhje anësore:
     1) `.krye .wrap.krye__rresht` (0,3,0) — `nowrap` që fiton vërtet;
     2) koka heq atë që shiriti i poshtëm mban tashmë (Paneli, Redaksia) dhe
        e pret emrin e llogarisë.
*/
.krye {
  background: var(--krome-fort);
  /* Kroma nuk pulson kur kalon faqja: ka emrin e vet te tranzicioni. */
  view-transition-name: fc-krye;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .krye {
    background: var(--krome);
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
  }
}

/* Një lidhje brenda faqes nuk duhet të përfundojë nën kokën ngjitëse. */
html { scroll-padding-top: calc(var(--top-h) + var(--s3)); }

@media (max-width: 900px) {
  html { scroll-padding-top: calc(var(--krye-h-mob) + var(--s3)); }

  /* Një rresht, 52 px, me cak-un e gishtit të paprekur.
     Hollësia fitohet nga hapësira e rreshtit (--s1), JO nga butoni — mësimi i
     9 shtatorit, kur ulja e butonave te 40 px u kap te të 47 faqet. */
  .krye .wrap.krye__rresht {
    flex-wrap: nowrap;
    min-height: var(--krye-h-mob);
    padding-top: var(--s1); padding-bottom: var(--s1);
    gap: var(--s2);
  }
  /* Marka nuk shtyp veprimet jashtë ekranit: emri pritet, shenja nuk. */
  .krye .marka { min-width: 0; overflow: hidden; }
  .krye .marka__emer { overflow: hidden; text-overflow: ellipsis; }
  .krye__veprime { flex: none; }

  /* Paneli dhe Redaksia rrinë te shiriti i poshtëm — e njëjta lidhje dy herë
     te i njëjti ekran është zhurmë, dhe këtu ishte edhe shkaku i rreshtit të
     dytë. Lidhjet mbeten te HTML-ja: fshehja është e pamjes, jo e strukturës,
     pra çdo provë që lexon tekstin e faqes vazhdon t'i gjejë. */
  .krye__veprime .butoni[href="/admin"],
  .krye__veprime .butoni[href="/redaksia"] { display: none; }

  /* Emri i llogarisë pritet me tri pika. `inline-block` sepse `text-overflow`
     nuk vlen mbi një kontejner flex, dhe `line-height` e qendërzon pa flex. */
  .krye__veprime .butoni[href="/une"] {
    display: inline-block; max-width: 9ch;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    line-height: var(--tap); padding: 0 var(--s3);
  }
}

/* ── Brenda «standalone»: faqja është vetë aplikacioni ─────────────────── */
/*
   `display-mode: standalone` është i vërtetë vetëm kur faqja hapet nga ekrani
   bazë, pa shirit adrese. Atëherë koka është maja e ekranit dhe merr prerjen
   e statusit mbi vete — jashtë standalone ky padding do të ishte i dyfishtë,
   sepse shfletuesi e ka bërë tashmë. (Dhe iOS-i e ka
   `apple-mobile-web-app-status-bar-style: black-translucent`, pra pa këtë
   rresht koka do të rrinte nën orën e telefonit.)
*/
@media (display-mode: standalone) {
  .krye { padding-top: env(safe-area-inset-top); }
  /* Pa kërcimin elastik në fund të rrëshqitjes: te një aplikacion ajo lëvizje
     thotë «ringarko», dhe këtu nuk ka çfarë të ringarkohet. */
  body { overscroll-behavior-y: none; }
}

/* ── 2. Shiriti i poshtëm: publik dhe i panelit ────────────────────────── */
@media (max-width: 900px) {
  .shiriti {
    background: var(--krome-fort);
    view-transition-name: fc-shiriti;
  }
  .shiriti a {
    min-width: var(--tap);
    touch-action: manipulation;
    /* Etiketa e një tab-i nuk zgjidhet me shtypje të gjatë: te një aplikacion
       ajo lëvizje hap menu sistemi mbi navigimin. */
    -webkit-user-select: none; user-select: none;
  }
  /* Gjendja aktive thotë TRI gjëra: ngjyra e theksit, vija 2 px sipër (shenja
     e regjistrimit e sistemit, e reduktuar te një hapësirë 56 px) dhe trualli
     i lehtë. Vetëm ngjyra nuk mjafton — një tab aktiv duhet të dallohet edhe
     nga sytë që nuk e ndajnë çelikun nga hiri. */
  .shiriti a[aria-current] { background: var(--red-wash); }
  .shiriti a[aria-current] svg { stroke-width: 2.1; }
}

/*
   SHIRITI I PANELIT — `.paneli-nav`.

   Te `/admin*` shiriti publik fshihet dhe ky e zë vendin: pesë tab-e që i
   duhen atij që hap panelin nga telefoni te 23:00 — Paneli, Tani, Radha,
   Burimet, dhe dalja te faqja. Të njëjtat rregulla si shiriti publik: i
   fiksuar poshtë, qeliza ≥ 44×44, ikonë me etiketë, zonë e sigurt.

   PSE JO SIPËR, SI MË PARË. Deri më 13 shtator `.paneli-nav` ishte një shirit
   që rrëshqiste nën kokën e `/admin` — dhe ekzistonte VETËM atje: te 18 faqet
   e brendshme të panelit nuk kishte asnjë navigim, pra kthimi bëhej me
   butonin «prapa» të shfletuesit. Tani e kanë të 19-ta, sepse vjen nga
   `baza.html`.
*/
.paneli-nav { display: none; }

@media (max-width: 900px) {
  .paneli-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    background: var(--krome-fort);
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom);
    view-transition-name: fc-shiriti;
  }
  .paneli-nav a {
    position: relative;
    display: grid; place-items: center; gap: 2px;
    min-height: var(--shirit-h); min-width: var(--tap);
    padding: var(--s2) 0;
    color: var(--ink-3); text-decoration: none;
    font-family: var(--font-heading); font-size: 10.5px; font-weight: 600;
    letter-spacing: .04em; text-transform: uppercase;
    white-space: nowrap;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none; user-select: none;
  }
  .paneli-nav a svg { width: 22px; height: 22px; stroke-width: 1.8; }
  .paneli-nav a:active { background: var(--press); }
  .paneli-nav a[aria-current] { color: var(--red-ink); background: var(--red-wash); }
  .paneli-nav a[aria-current] svg { stroke-width: 2.1; }
  .paneli-nav a[aria-current]::before {
    content: ""; position: absolute; top: -1px; width: 28px; height: 2px;
    background: var(--red-fill);
  }
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  @media (max-width: 900px) {
    .shiriti, .paneli-nav {
      background: var(--krome);
      -webkit-backdrop-filter: var(--blur);
      backdrop-filter: var(--blur);
    }
  }
}

/* ── 3. Rrëshqitja horizontale ndalet e plotë ──────────────────────────── */
/*
   Tabet e arkivit rrëshqisnin pa asnjë ndalesë: gishti e lëshonte listën te
   një pozicion i rastit dhe një etiketë rrinte gjysmë e prerë në buzë.
   `scroll-snap` e ndalon segmentin te fillimi — sjellje e vetë shfletuesit,
   zero JavaScript.

   PSE JO TE `.filtra`. Ata çipa MBËSHTILLEN: nuk rrëshqasin, pra nuk kanë ku
   të ndalen, dhe asgjë nuk fshihet djathtas. Mbështjellja është më e mirë se
   rrëshqitja kur gjithçka hyn te ekrani — një karusel do ta fshihte gjysmën e
   filtrave për një pamje më «app», dhe kjo është zbukurim që kushton.
*/
.tabet { scroll-snap-type: x proximity; overscroll-behavior-x: contain; }
.tabet a { scroll-snap-align: start; touch-action: manipulation; }
.filtra a { touch-action: manipulation; }

/* Kartat e numrave si fletë që rrëshqasin, VETËM te telefoni.
   Gjashtë numra njëri mbi tjetrin zënë tre ekrane; si fletë 78% të gjera ata
   janë një lëvizje gishti, dhe fleta tjetër shihet gjysmë — pra afordanca
   është e dukshme, jo e fshehur. Klasa është e vetja sepse `.rrjet--3`
   përdoret edhe te `/admin/tani`, ku një karusel do të ishte i gabuar:
   aty numrat lexohen bashkë, si një gjendje e vetme. */
@media (max-width: 640px) {
  .rrjet--rreshqit {
    display: flex; gap: var(--s3);
    overflow-x: auto; scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Fletët nuk ngjiten te buza: hapësira e `.wrap` vazhdon brenda kutisë
       që rrëshqet, përndryshe e para nis ngjitur me kufirin e ekranit. */
    margin-inline: calc(-1 * var(--s4)); padding-inline: var(--s4);
  }
  .rrjet--rreshqit::-webkit-scrollbar { display: none; }
  .rrjet--rreshqit > * { flex: 0 0 78%; scroll-snap-align: start; }
}

/* ── 4. Cakët e prekjes dhe fushat ─────────────────────────────────────── */
/*
   MATJA: 135 nga 141 faqe×gjerësi kishin cakë nën 44 px, dhe 51 fusha nën
   16 px. Tri shkaktarë, të tre të njëjtë në thelb — një rregull i veçantë ose
   një stil inline që e mund atë të përgjithshëm:

     · `.kalo` (lidhja e kapërcimit) matej 43,6 px — nën cak me 0,4 px;
     · lidhjet te `.eyebrow` (breadcrumb-i i 19 faqeve të panelit) 14 px;
     · fushat e panelit me `style="height:var(--ctl-h-sm);font-size:var(--t2)"`
       — 30 px dhe 13 px, dhe ASNJË rregull CSS nuk e mund një stil inline.
       Ky i treti u ndreq te shabllonet: 24 fusha dhe 19 butona kaluan te
       `.fusha` dhe `.butoni--vogel`, klasat që ekzistojnë pikërisht për këtë
       dhe që i njohin mediat. Një `!important` do ta kishte fshehur shkakun.
*/
@media (max-width: 900px) {
  /*
     DY RREGULLA E MUNDNIN ATË TË PËRGJITHSHËM, DHE BLLOKU QË I NDREQTE ISHTE
     KOD I VDEKUR. `@media (max-width: 640px) { .forma input { font-size: 16px } }`
     ekziston prej 9 shtatorit — dhe rri PARA `.forma input { font-size: var(--t3) }`
     te seksioni i formularëve. Specifikitet i njëjtë (0,1,1), pra fiton i
     fundit: 15 px. Media-query-ja nuk shton peshë, dhe kjo është arsyeja që
     «e ndreqa dhe prova kaloi» nuk provon asgjë për rendin.
     Pra 51 fusha rrinin 15 px dhe Safari-ja e zmadhonte faqen te secila.
     Këtu të tria rrugët janë të mbuluara, dhe kjo është e FUNDIT te skedari.
  */
  .fusha, input, select, textarea,
  .forma input, .forma select, .forma textarea { font-size: 16px; }
  .fusha { min-height: var(--tap); }
  .forma input, .forma select { min-height: var(--tap); }

  /* Një `<a>` fëmijë i drejtpërdrejtë i `.rresht` është kontroll, jo fjalë
     brenda fjalie: rreshtat e metadatave e mbajnë ashtu lidhjen «burimi
     origjinal ↗». Spanët me tekst nuk preken. */
  .rresht > a {
    min-height: var(--tap);
    display: inline-flex; align-items: center;
  }

  /* Rregulli `.lista a, .kroniko a, .prove a { min-height }` ekzistonte te
     640 px. Tableti te 768 rri jashtë tij — dhe pikërisht aty matja e kapi
     lidhjen «çfarë po bën tani →» te 35 px. E njëjta formë si `hover: none`
     kundrejt gjerësisë: kufiri i gabuar e lë një pajisje me prekje jashtë. */
  .lista a, .kroniko a, .prove a {
    min-height: var(--tap);
    display: inline-flex; align-items: center;
  }

  /* Lidhja e kapërcimit: 43,6 px është nën cak. Ajo rri jashtë ekranit derisa
     të marrë fokus, pra 44 px nuk i kushtojnë asgjë asnjë faqeje. */
  .kalo { min-height: var(--tap); display: inline-flex; align-items: center; }

  /* Breadcrumb-i i panelit. `.eyebrow` është etiketë seksioni 12 px; kur mban
     lidhje, ato lidhje janë navigim, pra kontrolle. Vetëm `a` e merr cak-un —
     etiketa vetë mbetet 12 px, si kudo tjetër. */
  .eyebrow a {
    min-height: var(--tap);
    display: inline-flex; align-items: center;
    padding: 0 var(--s2); margin-left: calc(-1 * var(--s2));
    touch-action: manipulation;
  }
  /* Lidhja brenda njoftimit Alpha rri te një `<form>`, pra jashtë tekstit
     rrjedhës: matej 23 px. */
  dialog.alpha form a {
    min-height: var(--tap);
    display: inline-flex; align-items: center;
  }
}

/* ── 5. Lista si rreshta aplikacioni ──────────────────────────────────── */
/*
   Ndarësi kalon nga `--line-soft` (8%) te `--line` (16%) VETËM te telefoni:
   te ekrani i vogël, në dritë dielli, 8% nuk është vijë e hollë — është
   mungesë vije, dhe rreshtat rrjedhin njëri te tjetri.

   Hapësira bëhet e njëtrajtshme: te desktopi rreshti i parë e humb hapësirën
   sipër që titulli t'i ngjitet tekstit mbi të. Te një listë rreshtash ritmi
   duhet i njëjti nga i pari te i fundit — përndryshe i pari lexohet si titull.
*/
@media (max-width: 900px) {
  .lista > li {
    position: relative;
    padding: var(--s4) var(--s5) var(--s4) 0;
    border-bottom: 1px solid var(--line);
  }
  .lista > li:first-child { padding-top: var(--s4); }

  /* Shenja «më tutje», djathtas — vetëm te rreshtat që vërtet çojnë diku.
     `:has()` e mat atë: pa të, rreshtat «Asnjë lajm në këtë dritare» do të
     mbanin një shigjetë që nuk hapet, dhe një afordancë e rreme është më e
     keqe se asnjë. Dy kufij të rrotulluar, jo një `<svg>`: tridhjetë rreshta
     për faqe do të ishin tridhjetë elemente për asgjë. */
  .lista > li:has(.rresht__titull a)::after {
    content: ""; position: absolute;
    right: var(--s2); top: var(--s5);
    width: 7px; height: 7px; pointer-events: none;
    border-right: 1.5px solid var(--ink-3);
    border-top: 1.5px solid var(--ink-3);
    transform: rotate(45deg);
  }
  /* Rreshti i metadatave: `.lista a` u jep 44 px edhe lidhjeve të tij (rregull
     i vjetër, i drejtë — domeni shtypet), dhe një kuti 44 px përkrah teksti
     13 px e zbriste atë lidhje nën vijën e fjalëve. Qendërzimi i rreshtit e
     zgjidh pa i hequr asgjë cak-ut. */
  .meta { align-items: center; }

  /* Titulli është cak-u i vërtetë i rreshtit, pra arrin gishtin. */
  .rresht__titull a {
    min-height: var(--tap);
    display: inline-flex; align-items: center;
    touch-action: manipulation;
  }
  .rresht__titull a:active { background: var(--press); }
}

/* ── 6. Kalimi mes faqeve ─────────────────────────────────────────────── */
/*
   NDËR-DOKUMENT, PA SKRIPT. `@view-transition { navigation: auto }` e bën
   shfletuesin ta fotografojë faqen e vjetër dhe të re dhe t'i kalojë vetë —
   pikërisht sjellja që deri dje kërkonte një «SPA» me mijëra rreshta
   JavaScript. Shfletuesi që nuk e njeh e injoron rreshtin dhe kalimi mbetet i
   menjëhershëm: degradim i pastër, asgjë nuk prishet.

   180 ms, jo 400: nën 200 ms kalimi lexohet si vazhdimësi, mbi të si pritje —
   dhe një arkiv ku çdo klikim kushton gjysmë sekonde më shumë është më i
   ngadalshëm, jo më i butë.
*/
@view-transition { navigation: auto; }

::view-transition-old(root) { animation: fc-dal 120ms var(--ease) both; }
::view-transition-new(root) { animation: fc-hyj 180ms var(--ease) both; }
@keyframes fc-dal { to { opacity: 0; } }
@keyframes fc-hyj { from { opacity: 0; transform: translateY(8px); } }

/* Kroma qëndron. Pa këta emra koka dhe shiriti do të pulsonin bashkë me
   tekstin — dhe ai pulsim është pikërisht ajo që e bën një aplikacion të
   dukej si faqe që ringarkohet. `mix-blend-mode: normal` sepse pa animacion
   blendimi i parazgjedhur `plus-lighter` i zbardh dy fotografitë njëra mbi
   tjetrën. */
::view-transition-old(fc-krye), ::view-transition-new(fc-krye),
::view-transition-old(fc-shiriti), ::view-transition-new(fc-shiriti) {
  animation: none; mix-blend-mode: normal;
}

/* Kush ka kërkuar lëvizje më të pakët nuk e ka.
   RREGULLI `* { animation: none !important }` MË LART NUK I KAP: `*` nuk
   përputhet me pemën `::view-transition`, sepse ata pseudo-elemente nuk janë
   elemente. Prandaj shprehimisht, dhe prandaj ky koment — përndryshe rregulli
   i mësipërm duket se e mbulon. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) {
    animation: none; mix-blend-mode: normal;
  }
}

/* ── 7. Prekja: theksimi hiqet një herë, jo element për element ────────── */
/* `-webkit-tap-highlight-color` TRASHËGOHET. Deri më 13 shtator hiqej vetëm
   te `a, button, .butoni, summary` — pra çdo `<label>`, `<summary>` i ri ose
   `<tr>` i shtypshëm e rifitonte drejtkëndëshin blu, dhe matja e gjeti te të
   141 faqe×gjerësitë. Një herë te `body`, dhe vlen për gjithçka nën të. */
body { -webkit-tap-highlight-color: transparent; }

/* ── 8. Njoftimi Alpha: hija nga tokeni ───────────────────────────────── */
/* Ishte `rgba(0,0,0,.18)` — e vetmja ngjyrë e shkruar me dorë te ky skedar,
   dhe mbi truall të errët një hije e zezë nuk ekziston. Dhe rri mbi shiritin
   e panelit njësoj si mbi atë publik: të dy 56 px plus zona e sigurt. */
dialog.alpha { box-shadow: var(--shadow-2); }

/* ── Prova e versionit (artikulli) ──────────────────────────────────────
   Hash-e 64 karaktere: monospace, thyhen kudo, etiketa e ngushtë majtas.
   Në telefon etiketa rri sipër vlerës. */
.prova-versioni { display: grid; grid-template-columns: max-content 1fr; gap: 2px var(--s3);
  margin-top: var(--s2); font-size: var(--t1); }
.prova-versioni dt { color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; font-size: var(--t0, .72rem); }
.prova-versioni dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .prova-versioni { grid-template-columns: 1fr; gap: 0; }
  .prova-versioni dd { margin-bottom: var(--s2); }
}

/* ── Arkivi: shfletimi me data ──────────────────────────────────────────
   Shiriti ynë sipër, faqja e kapur poshtë. Lartësia e kornizës ndjek
   ekranin; në telefon chips-at e versioneve rrëshqasin horizontalisht me
   scroll-snap, shigjetat mbeten 44 px. Ngjyrat e ndryshimit nga tokenat. */
.arkivi { margin-top: calc(-1 * var(--s4)); }
.arkivi__koka { padding: var(--s3) 0 var(--s2); }
.arkivi__titull { font-size: var(--t4); margin: var(--s1) 0; text-wrap: balance; }
.arkivi__url { font-size: var(--t1); color: var(--ink-3); overflow-wrap: anywhere; }
.arkivi__koha { display: grid; grid-template-columns: 44px 1fr 44px; align-items: stretch;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.arkivi__shigjete { display: grid; place-items: center; min-height: 44px; font-size: var(--t4);
  color: var(--ink-2); text-decoration: none; }
.arkivi__shigjete--bosh { color: var(--line); }
.arkivi__chips { display: flex; gap: var(--s2); overflow-x: auto; scroll-snap-type: x mandatory;
  padding: var(--s2) var(--s1); scrollbar-width: thin; }
.arkivi__chip { flex: 0 0 auto; scroll-snap-align: center; display: grid; gap: 1px;
  padding: var(--s1) var(--s3); min-height: 44px; border: 1px solid var(--line);
  border-left: 3px solid var(--ink-3); text-decoration: none; color: var(--ink); }
.arkivi__chip--material { border-left-color: var(--red); }
.arkivi__chip--deleted, .arkivi__chip--redirect { border-left-color: var(--fc-danger); }
.arkivi__chip--initial { border-left-color: var(--fc-ok); }
.arkivi__chip--tani { background: var(--surface); border-color: var(--ink); font-weight: 600; }
.arkivi__chip-data { font-size: var(--t1); font-variant-numeric: tabular-nums; }
.arkivi__chip-v { font-size: var(--t0, .72rem); color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.arkivi__prova { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); align-items: end;
  padding: var(--s3) 0; }
.arkivi__fakt { display: grid; gap: 2px; font-size: var(--t1); }
.arkivi__hash { cursor: help; }
.arkivi__shkarko { display: flex; gap: var(--s2); margin-left: auto; }
.arkivi__faqja { display: block; width: 100%; height: calc(100vh - 320px); min-height: 480px;
  border: 1px solid var(--line); background: #fff; }
.arkivi__shenim { margin-top: var(--s2); }
@media (max-width: 640px) {
  .arkivi__shkarko { margin-left: 0; width: 100%; }
  .arkivi__shkarko .butoni { flex: 1; text-align: center; }
  .arkivi__faqja { height: calc(100vh - 220px); }
}