/* sorich-web-check — the tool's own parts that sorich.hr has no counterpart for (assets/sken/MARKUP.md
 * §14): tables with text columns, filter groups, charts, the status of a check and the guarantee
 * mark. Each one is built from the nearest part of the site, and only from SKEN tokens, so the tool
 * reads as sorich.hr. Never restyles an s3- class; loaded after sken.css.
 *
 * COLOUR (MARKUP.md §13): the signal green is the only hue, so nothing here is red, amber or blue.
 * A state is a SIGN and a WORD on a module; the modules step through one achromatic ramp, darker
 * meaning "needs attention": a check that fails is the darkest module, a partial one the middle step,
 * a pass the pale one with the site's green check (the check mark is one of the signal's own jobs).
 * The heat map uses the same ramp the same way (dark = a low score), so one page never has two
 * meanings for dark. Bars are the ink: length is the value, colour says nothing. Light and dark are
 * their own steps (dark is dark: no white bar or slab at night; the top step is --plate-d, the site's
 * dimmed white).
 * Contrast of the words on each step, WCAG 2.x (scripts/kontrast.mjs): light 17.66 · 10.76 · 5.14 ·
 * 10.46 · 21.00; dark 14.29 · 8.39 · 5.36 · 10.18 · 16.87.
 *
 * Made by sorich.hr (https://sorich.hr/#top)
 */

:root {
  --pv-ink: #000000; /* = --k */
  --pv-0: #ebebef; /* = --inset-l, the light well */
  --pv-1: #b9b9c0;
  --pv-2: #7d7d85;
  --pv-3: #3f3f45;
  --pv-4: #000000;
  --pv-on-0: #000000;
  --pv-on-1: #000000;
  --pv-on-2: #000000;
  --pv-on-3: #ffffff;
  --pv-on-4: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --pv-ink: #c2c2c8;
    --pv-0: #2a2a2e; /* = --raise-d, the dark well */
    --pv-1: #4d4d53;
    --pv-2: #808087;
    --pv-3: #b4b4ba;
    --pv-4: #e6e6ea; /* = --plate-d */
    --pv-on-0: #ffffff;
    --pv-on-1: #ffffff;
    --pv-on-2: #000000;
    --pv-on-3: #000000;
    --pv-on-4: #000000;
  }
}

/* ── tables: the site's LEDGER (.s3-cost) with text columns; on a phone the rows fold, never scroll ── */
.pv-tw {
  border-radius: var(--r-2);
  overflow-x: auto;
  background-color: var(--bg-card);
  border: 1px solid var(--line);
  box-shadow: var(--drop);
}

.pv-t {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-ui);
  font-variant-numeric: tabular-nums;
}

.pv-t th,
.pv-t td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-2);
  vertical-align: top;
  text-align: left;
}

.pv-t th:first-child,
.pv-t td:first-child {
  padding-left: 20px;
}

.pv-t th:last-child,
.pv-t td:last-child {
  padding-right: 20px;
}

.pv-t thead th {
  font: 600 var(--fs-xs) / 1.3 var(--f-ui);
  color: var(--fg-3);
  border-bottom: 1px solid var(--line);
}

.pv-t tbody tr:nth-child(even) td {
  background-color: var(--wash);
}

.pv-t tbody tr:last-child td {
  border-bottom: 0;
}

.pv-t tfoot td {
  border-top: 1px solid var(--line);
  border-bottom: 0;
  font-weight: 700;
}

.pv-t .n {
  text-align: right;
}

.pv-t td.n {
  font-weight: 500;
  white-space: nowrap; /* a short figure ("(95) · A", "0,5/1") never breaks; the table scrolls in its card instead */
}

.pv-t td.pv-prov {
  min-width: 15rem;
}

.pv-t td.pv-jam {
  min-width: 11rem;
}

/* the score table: fifteen columns that fit the wrap at 1280px without scrolling */
.pv-t--ocjene th,
.pv-t--ocjene td {
  padding: 12px 9px;
}

.pv-t--ocjene td:first-child {
  min-width: 10rem;
}

.pv-t a {
  color: inherit;
}

.pv-sub {
  display: block;
  margin-top: 2px;
  color: var(--fg-3);
  font-size: var(--fs-xs);
  font-weight: 400;
}

.pv-id {
  font-weight: 600;
}

.pv-t td.pv-dokaz {
  min-width: 14rem;
  color: var(--fg-2);
}

/* a row that fails carries the note's rule of the ink on its left; a partial one the third ink */
.pv-r--fail > td:first-child {
  box-shadow: inset 2px 0 0 var(--fg);
}

.pv-r--warn > td:first-child {
  box-shadow: inset 2px 0 0 var(--fg-3);
}

@media (max-width: 640px) {
  .pv-tw {
    overflow: hidden;
  }

  .pv-t thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .pv-t,
  .pv-t tbody,
  .pv-t tfoot,
  .pv-t tr {
    display: block;
  }

  /* a row is a card: its first cell the title over the whole width, the others label-over-value pairs
     in two columns (one column of label-left rows made a card of 6 facts 400 px tall; redesign F1) */
  .pv-t tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px 16px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line-2);
  }

  .pv-t tbody tr:nth-child(even) {
    background-color: var(--wash);
  }

  .pv-t tbody tr:nth-child(even) td {
    background-color: transparent;
  }

  .pv-t tbody tr:last-child {
    border-bottom: 0;
  }

  .pv-t tfoot tr {
    border-top: 1px solid var(--line);
    border-bottom: 0;
  }

  .pv-t td,
  .pv-t td:first-child,
  .pv-t td:last-child {
    display: block;
    min-width: 0;
    padding: 0;
    border: 0;
    text-align: left;
  }

  .pv-t td > * {
    min-width: 0;
  }

  /* the title, the long texts and the actions take the card's whole width */
  .pv-t td:first-child,
  .pv-t td.pv-txt,
  .pv-t td.pv-siroko,
  .pv-t td[colspan] {
    grid-column: 1 / -1;
  }

  .pv-t td[data-l]::before {
    content: attr(data-l);
    display: block;
    margin-bottom: 2px;
    font-size: var(--fs-xs);
    font-weight: 500;
    line-height: 1.3;
    color: var(--fg-3);
  }

  .pv-t td.n .pv-vtraka {
    margin-left: 0;
  }

  /* a figure in a card reads under its label, like every other fact of the card, and what is
     written under it wraps instead of being cut at the card's edge (MARKUP.md rule 7) */
  .pv-t td.n {
    text-align: left;
    white-space: normal;
  }

  .pv-t td:empty {
    display: none;
  }

  .pv-r--fail > td:first-child,
  .pv-r--warn > td:first-child {
    box-shadow: none;
  }

  .pv-r--fail {
    box-shadow: inset 2px 0 0 var(--fg);
  }

  .pv-r--warn {
    box-shadow: inset 2px 0 0 var(--fg-3);
  }
}

/* ── the state of a check: a module with its sign, then its word (never a colour alone) ── */
.pv-s {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--fg-2);
  font-weight: 500;
}

.pv-s-m {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 1.5em;
  height: 1.5em;
  border: 1px solid transparent;
  border-radius: var(--r-m);
  font: 700 var(--fs-xs) / 1 var(--f-ui);
}

.pv-s--pass .pv-s-m {
  background-color: var(--bg-well);
  color: var(--accent-t);
}

.pv-s--warn .pv-s-m {
  background-color: var(--pv-2);
  color: var(--pv-on-2);
}

.pv-s--fail .pv-s-m {
  background-color: var(--pv-4);
  color: var(--pv-on-4);
}

.pv-s--unmeasured .pv-s-m {
  border: 1px dashed var(--fg-3);
  color: var(--fg-2);
}

.pv-s--na .pv-s-m {
  border-color: var(--line);
  color: var(--fg-3);
}

/* the guarantee: the signal module (I fix it and guarantee it), a half module (I do the work, the
 * outcome is not mine alone), a hollow one (nobody honest promises it); the words say which */
.pv-g {
  display: inline-block;
  flex: none;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border-radius: var(--r-m);
}

.pv-g--zeleno {
  background-color: var(--accent-t);
}

.pv-g--zuto {
  border: 1.5px solid var(--fg);
  background: linear-gradient(135deg, var(--fg) 50%, transparent 50%);
}

.pv-g--bijelo {
  border: 1.5px solid var(--fg-2);
}

/* ── the filter: chip groups (the site's /radovi/ filter) and the long lists as wells ── */
.pv-fs {
  display: grid;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.pv-fs > legend {
  margin: 0 0 10px;
  padding: 0;
  color: var(--fg);
  font: 500 var(--fs-ui) / 1.3 var(--f-ui);
}

/* ── charts: each a card (THE SURFACES' card), its title the small head ── */
.pv-fig {
  min-width: 0;
  margin: 0;
  padding: clamp(20px, 2.4vw, 28px);
  border-radius: var(--r-2);
  background-color: var(--bg-card);
  border: 1px solid var(--line);
  box-shadow: var(--drop);
}

.pv-cap {
  margin: 0 0 var(--sp-4);
  color: var(--fg);
  font: 600 var(--fs-h4) / 1.3 var(--f-ui);
  letter-spacing: -0.01em;
}

.pv-scroll {
  overflow-x: auto;
}

/* a row: the name, its track, the figure (the words are HTML, so they keep their size and wrap) */
.pv-rows {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pv-row {
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) 3.25rem;
  align-items: center;
  gap: 6px 12px;
  font-size: var(--fs-ui);
  line-height: 1.3;
}

.pv-row-l {
  min-width: 0;
  color: var(--fg-2);
}

.pv-row-l a {
  color: var(--fg);
}

.pv-row-v {
  text-align: right;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 480px) {
  .pv-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .pv-row .pv-track {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

/* the track: SKEN's speed race (a well across the whole scale, the value on it), as one small SVG */
.pv-track {
  width: 100%;
  height: 12px;
  overflow: visible;
}

.pv-track-bg {
  fill: var(--bg-well);
}

.pv-bar {
  fill: var(--pv-ink);
}

.pv-bar--prov {
  fill: transparent;
  stroke: var(--fg);
  stroke-width: 1.5px;
  stroke-dasharray: 4 3;
  vector-effect: non-scaling-stroke;
}

/* the heat map is a table: a module per category, its number in the step's own words */
.pv-heat {
  border-collapse: separate;
  border-spacing: 2px;
  font-size: var(--fs-ui);
  font-variant-numeric: tabular-nums;
}

.pv-heat th {
  padding: 4px 6px;
  color: var(--fg-3);
  font: 600 var(--fs-xs) / 1.3 var(--f-ui);
  text-align: center;
}

.pv-heat th[scope="row"] {
  min-width: 9rem;
  padding: 4px 12px 4px 0;
  color: var(--fg);
  font: 500 var(--fs-ui) / 1.3 var(--f-ui);
  text-align: left;
}

.pv-heat abbr {
  text-decoration: none;
}

.pv-heat td {
  min-width: 2.75rem;
  height: 2.25rem;
  padding: 4px 6px;
  border-radius: var(--r-m);
  font-weight: 600;
  text-align: center;
}

.pv-hc0 { background-color: var(--pv-0); color: var(--pv-on-0); }
.pv-hc1 { background-color: var(--pv-1); color: var(--pv-on-1); }
.pv-hc2 { background-color: var(--pv-2); color: var(--pv-on-2); }
.pv-hc3 { background-color: var(--pv-3); color: var(--pv-on-3); }
.pv-hc4 { background-color: var(--pv-4); color: var(--pv-on-4); }

.pv-heat td.pv-hc-prov {
  outline: 1.5px dashed var(--fg);
  outline-offset: -1.5px;
  color: var(--fg-2);
  font-weight: 500;
}

.pv-heat td.pv-hc-none {
  color: var(--fg-3);
  font-weight: 400;
}

.pv-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: 0 0 var(--sp-4);
  color: var(--fg-2);
  font-size: var(--fs-xs);
}

.pv-legend > span {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.pv-sw {
  display: inline-block;
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: var(--r-m);
}

.pv-sw--0 { background-color: var(--pv-0); }
.pv-sw--1 { background-color: var(--pv-1); }
.pv-sw--2 { background-color: var(--pv-2); }
.pv-sw--3 { background-color: var(--pv-3); }
.pv-sw--4 { background-color: var(--pv-4); }

.pv-sw--none {
  border: 1px dashed var(--fg-3);
}

.pv-sw--prov {
  border: 1.5px dashed var(--fg);
}

.pv-ramp {
  display: inline-flex;
  gap: 2px;
}

/* ── a block of one category's checks on the detail page ── */
.pv-cat + .pv-cat {
  margin-top: var(--sp-7);
}

.pv-cat-h {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  margin: 0 0 var(--sp-4);
}

.pv-cat-h .s3-price {
  font-size: var(--fs-h4);
}

/* ── text that is data: the job log, the protocol, the manual part (the site's AI reader well) ── */
.pv-pre {
  margin: 0;
  padding: 16px 18px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-1);
  background-color: var(--bg-well);
  color: var(--fg);
  font: 13px / 1.55 var(--f-mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

textarea.s3-input.pv-json {
  min-height: 60vh;
  font: 13px / 1.55 var(--f-mono);
}

/* a form inside a row of buttons is only a wrapper */
.s3-btns > form {
  display: contents;
}

/* the detail page's jump row and a category block's head line */
.pv-skok {
  margin: 0 0 var(--sp-7);
}

.pv-cat-h p {
  margin: 0;
}

/* ── open and share a checked site (src/izgled.mjs vezaNaStranicu, dijeli) ── */
.pv-van {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  overflow-wrap: anywhere;
}

.pv-van-g {
  flex: none;
  width: 0.95em;
  height: 0.95em;
}

/* a code is dark modules on a light plate in BOTH themes (SKEN --qr-*: dimmed, never inverted, at night) */
.pv-qr {
  display: inline-block;
  border: 1px solid var(--qr-line);
  border-radius: var(--r-1);
  background-color: var(--qr-plate);
  box-shadow: var(--qr-drop);
  overflow: hidden;
}

.pv-qr-svg {
  display: block;
  width: 148px;
  height: auto;
}

.pv-qr-polje {
  fill: var(--qr-plate);
}

.pv-qr-moduli {
  fill: var(--qr-module);
}

.pv-dijeli {
  display: grid;
  justify-items: start;
  gap: 12px;
}

.pv-dijeli-gumbi {
  gap: 4px 8px;
}

/* the code at the head's right, its buttons stacked under it in a narrow column; on a phone the
 * whole block wraps under the words */
.pv-phead-desno {
  flex: 0 1 300px;
  min-width: 0;
  max-width: 100%;
}

/* on a card: the code and the buttons behind one disclosure, so eleven cards stay calm */
.pv-otvori > summary {
  list-style: none;
  cursor: pointer;
}

.pv-otvori > summary::-webkit-details-marker {
  display: none;
}

.pv-otvori[open] > summary {
  margin-bottom: 12px;
}

.pv-otvori .pv-qr-svg {
  width: 132px;
}

/* ── the guided form of the manual part (/rucno/<slug>, src/obrazac.mjs): one disclosure per tool,
 * the steps, then the fields; built from the order form's own parts (s3-q, s3-opt, s3-field) ── */
.pv-obrazac {
  gap: 12px;
}

.pv-sek {
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background-color: var(--bg-card);
  box-shadow: var(--drop);
}

.pv-sek > summary {
  display: grid;
  gap: 2px;
  padding: 16px 20px;
  list-style: none;
  cursor: pointer;
}

.pv-sek > summary::-webkit-details-marker {
  display: none;
}

.pv-sek > summary:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-2);
}

.pv-sek-n {
  font: 600 var(--fs-body) / 1.35 var(--f-ui);
  letter-spacing: -0.01em;
}

.pv-sek-n::before {
  content: "+";
  display: inline-block;
  width: 1.2em;
  color: var(--accent-t);
  font-weight: 700;
}

.pv-sek[open] .pv-sek-n::before {
  content: "−";
}

.pv-sek-tijelo {
  display: grid;
  gap: 16px;
  padding: 0 20px 20px;
  min-width: 0;
}

.pv-koraci,
.pv-pitanja {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 1.4em;
  color: var(--fg-2);
  font-size: var(--fs-ui);
}

.pv-pitanja {
  list-style: none;
  padding: 12px 14px;
  border-radius: var(--r-1);
  background-color: var(--bg-well);
  color: var(--fg);
}

.pv-polja {
  display: grid;
  gap: 16px 20px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  min-width: 0;
}

.pv-polje {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

fieldset.pv-polje {
  grid-column: 1 / -1;
}

fieldset.pv-polje legend {
  float: left;
  width: 100%;
  margin-bottom: 8px;
  padding: 0;
  font-size: var(--fs-ui);
  font-weight: 500;
}

fieldset.pv-polje legend + * {
  clear: both;
}

.pv-polje .s3-q-hint {
  margin: 4px 0 0;
}

fieldset.pv-polje .s3-q-hint {
  margin: 0 0 8px;
}

.pv-polje--puno {
  grid-column: 1 / -1;
}

/* choices sized to their words and wrapped as whole tiles: on a phone "ne primjenjuje se" broke over
 * three lines in a fixed grid */
.s3-opts.pv-kratko {
  display: flex;
  flex-wrap: wrap;
}

.pv-kratko .s3-opt {
  flex: 1 1 auto;
  min-height: 44px;
  padding: 8px 14px;
}

.pv-kratko .s3-opt > span {
  white-space: nowrap;
}

textarea.s3-input.pv-dugi {
  min-height: 96px;
  resize: vertical;
  line-height: 1.5;
}

.pv-ai {
  margin: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  min-width: 0;
}

.pv-ai > legend {
  padding: 0 6px;
  font-weight: 600;
}

.pv-ai--puno {
  background-color: var(--wash);
}

/* the answer the field could not take: the sign and the word, never a colour alone */
.pv-greska {
  margin: 6px 0 0;
  font-size: var(--fs-xs);
  font-weight: 600;
}

.pv-greska::before {
  content: "✗ ";
}

.pv-polje--greska .s3-opt,
.pv-polje:has(.pv-greska) .s3-input {
  border-color: var(--fg);
}

.pv-greske {
  padding: 16px 20px;
  border: 2px solid var(--fg);
  border-radius: var(--r-2);
  background-color: var(--bg-card);
}

.pv-greske p {
  margin: 0 0 8px;
}

.pv-greske ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 1.2em;
  font-size: var(--fs-ui);
}

/* what the site said at the last check, beside the Google profile */
.pv-pise {
  display: grid;
  gap: 8px 20px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  margin: 0;
  padding: 14px 16px;
  border-radius: var(--r-1);
  background-color: var(--bg-well);
  font-size: var(--fs-ui);
}

.pv-pise dt {
  color: var(--fg-3);
  font-size: var(--fs-xs);
}

.pv-pise dd {
  margin: 0;
  overflow-wrap: anywhere;
}

/* ── a client's two tabs (Ocjena · Vrijednost i prodaja): chips, the chosen one turned like every
 * chosen state of the site (09 §8.10) ── */
.pv-kartice {
  margin: 0 0 var(--sp-5, 20px);
}

.pv-kartice .s3-chip[aria-current="page"] {
  background-color: var(--inv-bg);
  border-color: var(--inv-bg);
  color: var(--inv-fg);
}

/* the value tab: the figures, plain lists and the valuation's own words */
.pv-brojke .s3-price {
  display: block;
}

.pv-lista {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 1.2em;
  max-width: 76ch;
  color: var(--fg-2);
}

.pv-lista b {
  color: var(--fg);
}

.pv-tekst {
  margin: 0;
  max-width: 76ch;
  color: var(--fg-2);
  font-size: var(--fs-ui);
  line-height: 1.6;
}

/* ══════════ MODERNISED TABLES (10. 10. 2026., Ante: "malo moderniziraj sve ove tablice")
 * Calmer rows: no zebra, a hover wash instead; the head as small caps with air; figures in
 * tabular numbers; a group row as a quiet label; bars (SVG geometry, the CSP allows no inline
 * style) where a number is a share of something. Still one hue: the bars are ink. ══════════ */
.pv-t tbody tr:nth-child(even) td {
  background-color: transparent;
}

/* a pointer's wash only: on a touch screen a tapped row kept it (MARKUP.md rule 4, review F1) */
@media (hover: hover) {
  .pv-t tbody tr:hover td {
    background-color: var(--wash);
  }
}

.pv-t thead th {
  padding-top: 14px;
  padding-bottom: 10px;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pv-t th,
.pv-t td {
  padding-top: 14px;
  padding-bottom: 14px;
}

.pv-t tfoot td {
  border-top: 2px solid var(--line);
  background-color: var(--bg-alt);
}

/* on a phone a row is a card of label-over-value pairs in a grid with gaps: the cells carry no
   padding and no ground of their own, the row does (review F1: the padding above won over the card
   block's, and per-cell fills showed as separate tiles) */
@media (max-width: 640px) {
  .pv-t tr > td {
    padding: 0;
  }

  .pv-t tfoot td,
  .pv-t tbody tr:hover td {
    border-top: 0;
    background-color: transparent;
  }

  .pv-t tfoot tr {
    background-color: var(--bg-alt);
  }
}

.pv-t tr.pv-grupa td {
  padding-top: 18px;
  padding-bottom: 8px;
  background-color: transparent;
  color: var(--fg-3);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pv-inline {
  display: inline;
  margin-left: 6px;
}

/* a bar under a figure: the well and the value, 4px, rounded */
.pv-vtraka {
  display: block;
  width: 100%;
  max-width: 220px;
  height: 6px;
  margin-top: 8px;
}

.pv-vtraka--mala {
  max-width: 140px;
  height: 4px;
  margin-top: 6px;
}

td.n .pv-vtraka {
  margin-left: auto;
}

/* a provisional score (below the coverage threshold): an outline, not ink */
.pv-vtraka--prov .pv-bar {
  fill: transparent;
  stroke: var(--fg-2);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}

/* the category ledger: the letter as a small module, the figure above its bar */
.pv-kl {
  display: inline-grid;
  place-items: center;
  width: 1.9em;
  height: 1.9em;
  margin-right: 6px;
  border-radius: var(--r-m, 2px);
  background-color: var(--bg-well);
  font-weight: 700;
  font-size: var(--fs-xs);
}

.pv-ledger a {
  text-decoration: none;
}

.pv-ledger a:hover .pv-kl,
.pv-ledger a:focus-visible .pv-kl {
  background-color: var(--inv-bg);
  color: var(--inv-fg);
}

.pv-ledger-v {
  font-weight: 600;
}

.pv-kattabs .s3-chip[aria-current="page"] {
  background-color: var(--inv-bg);
  border-color: var(--inv-bg);
  color: var(--inv-fg);
  --fg-2: var(--inv-fg-2);
}

/* two figures to a line on a phone (the redesign F5: six visits figures were six screens' rows) */
.pv-katbrojke {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
  gap: 16px;
  margin: 0;
}

.pv-katbrojke dt {
  color: var(--fg-3);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pv-katbrojke dd {
  display: grid;
  margin: 4px 0 0;
}

.pv-katbroj {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pv-katbroj a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--r-1);
  background-color: var(--bg-well);
  color: var(--fg);
  text-decoration: none;
}

.pv-katbroj a:hover,
.pv-katbroj a:focus-visible {
  background-color: var(--wash-2);
}

.pv-katgrupa {
  display: grid;
  gap: 10px;
  scroll-margin-top: 88px;
}

.pv-katgrupa-n {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font: 600 var(--fs-ui) / 1.3 var(--f-ui);
}

/* "what to say": the sentences in the reading face, as a quotation */
.pv-reci {
  display: grid;
  gap: 10px;
  padding: 20px 22px;
  border-left: 4px solid var(--sig, var(--accent-t));
  border-radius: var(--r-1);
  background-color: var(--bg-card);
}

.pv-reci-n {
  color: var(--fg-3);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pv-reci p {
  margin: 0;
  font: 400 var(--fs-lead) / 1.45 var(--f-read);
}

/* ── the client card: the score with its bar, two doors, the rest as quiet links ── */
.pv-kkarta {
  gap: 14px;
}

.pv-kkarta p {
  margin: 4px 0 0;
}

.pv-kkarta-ocjena {
  display: grid;
  gap: 2px;
}

.pv-kkarta-ocjena .s3-price {
  font-size: var(--fs-fig);
}

.pv-kkarta-gumbi {
  margin: 0;
}

.pv-kkarta-veze {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  margin: 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--line-2);
  list-style: none;
  font-size: var(--fs-xs);
}

.pv-kkarta-veze a,
.pv-poveznica {
  padding: 0;
  border: 0;
  background: none;
  color: var(--fg-2);
  font: inherit;
  text-decoration: underline;
  text-decoration-color: var(--line-link);
  text-underline-offset: 3px;
  cursor: pointer;
}

.pv-kkarta-veze a:hover,
.pv-poveznica:hover {
  color: var(--fg);
}

.pv-kkarta-veze form {
  display: inline;
}

.pv-kkarta-veze details[open] {
  flex-basis: 100%;
}

/* ── amounts as bars (euros, visits): the figure needs a wider column than a score ── */
.pv-rows--iznosi .pv-row {
  grid-template-columns: minmax(0, 2fr) minmax(4rem, 1fr) minmax(4.5rem, auto);
}

@media (max-width: 480px) {
  .pv-rows--iznosi .pv-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

/* Ante's own site among the benchmark: the signal module beside its name; the legend or the
 * section says what it means, so the mark never speaks by its ink alone */
.pv-ist {
  display: inline-block;
  flex: none;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border-radius: var(--r-m);
  background-color: var(--sig);
}

.pv-r--ist td:first-child {
  font-weight: 600;
}

/* ── the value tab's features: the state's module, the name, the evidence under it ── */
.pv-znac {
  display: grid;
  gap: 8px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.pv-znac li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: var(--fs-ui);
  line-height: 1.35;
}

.pv-znac .pv-sub {
  display: block;
}

/* ── the first screens side by side (the comparison) ── */
.pv-galerija {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr));
  gap: 16px;
}

.pv-galerija--siroka {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}

.pv-snimka {
  display: grid;
  align-content: start;
  gap: 8px;
  margin: 0;
}

.pv-snimka img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background-color: var(--bg-well);
}

.pv-snimka--ist img {
  outline: 3px solid var(--sig);
  outline-offset: 2px;
}

.pv-snimka figcaption {
  color: var(--fg-2);
  font-size: var(--fs-xs);
}

/* a stack: the parts of a block (the visits, the units and their method) spaced as one column */
.pv-stog {
  display: grid;
  gap: 22px;
}

.pv-stog > p,
.pv-stog > h3 {
  margin: 0;
}

/* the comparison's two lists: the rows keep their height when the cards are of unequal length */
.pv-ukratko {
  align-content: start;
}

/* ── a site's tags: what it is, why it is a lead, its line, whose rival ── */
.pv-oznake {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}

.pv-oznaka {
  padding: 1px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--fg-2);
  font-size: var(--fs-xs);
  line-height: 1.6;
}

.pv-filtri-stranica {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
}

.pv-trazi {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 14px;
}

.pv-trazi .s3-field {
  flex: 1 1 200px;
  max-width: 340px;
  margin: 0;
}

/* ══════════ THE TOOL'S OWN DENSITY AND ITS FIVE PLACES (redesign F1, 11. 10. 2026) ══════════
 * sorich.hr's air is for reading a page once; this tool is read every day on a phone, so its sections
 * sit closer and its head is smaller. Its five places are a bar at the bottom of a phone: SKEN's
 * no-script phone sheet stood open, 442 px, above every page. */
:root {
  --y: clamp(36px, 5vh, 72px);
  --y-seam: clamp(28px, 4vh, 56px);
  --y-head: clamp(16px, 2.4vh, 28px);
}

.s3-p-hero {
  padding: clamp(20px, 3.5vh, 44px) 0 clamp(16px, 3vh, 32px);
}

@media (max-width: 699px) {
  .s3-h1 {
    font-size: clamp(1.75rem, 8vw, 2.25rem);
  }

  .s3-h2 {
    font-size: clamp(1.375rem, 6vw, 1.75rem);
  }

  .s3-lede {
    font-size: 1.0625rem;
  }
}

/* the bottom bar: the five places under the thumb. Sticky as the last thing in body, so it rides the
   bottom of the screen, never covers the footer at the end, and needs no script. */
.pv-dno {
  position: sticky;
  bottom: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: 2px 4px calc(2px + env(safe-area-inset-bottom));
  background-color: var(--bg);
  box-shadow: inset 0 1px 0 var(--line);
}

.pv-dno > a {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  min-height: 56px;
  color: var(--fg-2);
  font: 600 var(--fs-xs) / 1.1 var(--f-ui);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.pv-dno-g {
  width: 22px;
  height: 22px;
}

.pv-dno > a[aria-current] {
  color: var(--fg);
}

/* the place you are in: the signal's module above its sign, as the header's row marks its section */
.pv-dno > a[aria-current]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 28px;
  height: 3px;
  margin-left: -14px;
  border-radius: 0 0 3px 3px;
  background-color: var(--accent-fill);
}

@media (min-width: 1100px) {
  .pv-dno {
    display: none;
  }
}

/* sticky never pushes an element down: on a page shorter than the screen the bar stood under the
   footer, mid-screen (review F1). The page is a column whose main grows, so the bar ends the screen. */
@media (max-width: 1099px) {
  body {
    display: flex;
    flex-direction: column;
  }

  body > main {
    flex: 1 0 auto;
  }
}

/* a focused control is scrolled clear of the bar, as SKEN keeps it clear of the header */
@media (max-width: 1099px) and (min-height: 521px) {
  html {
    scroll-padding-bottom: calc(76px + env(safe-area-inset-bottom));
  }
}

/* a phone on its side: the bar stays at the end of the page instead of taking a fifth of the screen */
@media (max-width: 1099px) and (max-height: 520px) {
  .pv-dno {
    position: static;
  }
}

/* ── the record: the note and the drafted message as roomy text ── */
textarea.s3-input.pv-biljeska {
  min-height: 7rem;
  resize: vertical;
}

textarea.s3-input.pv-nacrt {
  min-height: 16rem;
  font: 400 var(--fs-ui) / 1.5 var(--f-ui);
  white-space: pre-wrap;
  resize: vertical;
}

.pv-odmah {
  margin: 4px 0 12px;
}

/* ── /usporedi: one card per site, the columns of the tables, the best mark, the rows that differ ── */
.pv-usp-karte {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 14px;
}

.pv-usporedi td:not(:first-child),
.pv-usporedi th:not(:first-child) {
  min-width: 8rem;
}

.pv-naj {
  color: var(--accent-t);
  font-weight: 700;
}

.pv-razlika td:first-child {
  box-shadow: inset 3px 0 0 var(--fg-2);
}

/* on a phone a compare table keeps its columns (redesign F5: every row was a card of the sites'
   names, 17,000 px for three sites): the row's name over the whole width, then a cell per site in
   as many equal columns as there are sites, the sites' names once, at the top, in the same order */
/* the total closes the categories under a rule of the ink, its figures in the figure weight */
.pv-t tr.pv-usp-ukupno {
  border-top: 2px solid var(--fg);
}

.pv-t tr.pv-usp-ukupno td {
  color: var(--fg);
  font-weight: 600;
}

.pv-usporedi--n2 { --n: 2; }
.pv-usporedi--n3 { --n: 3; }
.pv-usporedi--n4 { --n: 4; }

@media (max-width: 640px) {
  .pv-t.pv-usporedi thead {
    position: static;
    display: block;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }

  .pv-t.pv-usporedi tr {
    grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr));
    gap: 6px 10px;
    padding: 12px 14px;
  }

  .pv-t.pv-usporedi thead th {
    display: block;
    min-width: 0;
    padding: 0;
    border: 0;
    font-size: var(--fs-xs);
    line-height: 1.35;
    text-align: left;
    overflow-wrap: anywhere;
  }

  .pv-t.pv-usporedi thead th:first-child {
    display: none;
  }

  .pv-t.pv-usporedi td:not(:first-child),
  .pv-t.pv-usporedi th:not(:first-child) {
    min-width: 0;
  }

  .pv-t.pv-usporedi td[data-l]::before {
    content: none;
  }

  .pv-t.pv-usporedi td:first-child {
    color: var(--fg);
    font-weight: 500;
  }

  .pv-t.pv-usporedi .pv-s {
    flex-wrap: wrap;
    gap: 4px;
  }

  .pv-razlika td:first-child {
    box-shadow: none;
  }

  .pv-t.pv-usporedi tr.pv-razlika {
    box-shadow: inset 3px 0 0 var(--fg-2);
  }
}

.pv-galerija--usp {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
}

.pv-galerija--usp + .pv-sek {
  margin-top: 28px;
}

.pv-birac .s3-details-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

/* the order as a row of chips, always in view (the list's most used control) */
.pv-poredak {
  display: grid;
  gap: 6px;
}

/* ══════════ THE FIVE PLACES' OWN PIECES (redesign F1, 11. 10. 2026) ══════════ */

/* the header's one tool, Dodaj, at every width: chosen on its own page */
.s3-hdr-wa[aria-current="page"] {
  background-color: var(--inv-bg);
  border-color: var(--inv-bg);
  color: var(--inv-fg);
}

/* a row of Početna and Više: SKEN's contact row (a card line of 56 px, the name, a line under it, a
   figure at the right) as one link, with at most one action beside it (a call, a PDF) */
.pv-redovi {
  list-style: none;
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.pv-red {
  display: flex;
  align-items: stretch;
  gap: 8px;
  min-width: 0;
}

.pv-red-a {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  min-width: 0;
  min-height: 56px;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  background-color: var(--bg-card);
  box-shadow: var(--drop);
  color: var(--fg);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--t-1) var(--ease);
}

.pv-red-t {
  display: grid;
  flex: 1 1 14em;
  gap: 2px;
  min-width: 0;
}

.pv-red-k {
  font: 600 var(--fs-ui) / 1.3 var(--f-ui);
  overflow-wrap: anywhere;
}

.pv-red-s {
  color: var(--fg-2);
  font-size: var(--fs-xs);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.pv-red-v {
  margin-left: auto;
  color: var(--fg-2);
  font-size: var(--fs-ui);
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.pv-red-broj {
  color: var(--fg);
  font: 600 1.25rem / 1 var(--f-ui);
  letter-spacing: -0.01em;
}

.pv-red-akcija {
  flex: none;
  align-self: center;
}

/* a call beside a lead: a tile as tall as its row, on the row's own ground, so the thumb finds it */
.pv-red > .s3-icon-btn.pv-red-akcija {
  align-self: stretch;
  width: 56px;
  height: auto;
  min-height: 56px;
  border-color: var(--line);
  background-color: var(--bg-card);
  box-shadow: var(--drop);
}

.pv-red > .s3-icon-btn.pv-red-akcija svg {
  width: 22px;
  height: 22px;
}

/* the tile answers a touch and a pointer as its row does */
.pv-red > .s3-icon-btn.pv-red-akcija:active {
  background-color: var(--wash-2);
}

@media (hover: hover) {
  .pv-red > .s3-icon-btn.pv-red-akcija:hover {
    background-color: var(--wash-2);
  }
}

/* from a tablet up the rows keep one right edge; on a phone the words need the room more */
@media (min-width: 641px) {
  .pv-redovi--akcija > .pv-red:not(:has(> .pv-red-akcija))::after {
    content: "";
    flex: none;
    width: 56px;
  }
}

@media (hover: hover) {
  .pv-red-a:hover {
    background-color: var(--wash-2);
  }
}

.pv-red-a:active {
  background-color: var(--wash-2);
}

.pv-red-status {
  color: var(--fg);
  font-weight: 600;
}

/* a chosen link chip (a view, a status, an order) is the turned module, as SKEN's pressed chip */
.s3-chips-row .s3-chip[aria-current="page"] {
  background-color: var(--inv-bg);
  border-color: var(--inv-bg);
  color: var(--inv-fg);
  --fg-2: var(--inv-fg-2);
}

/* the third ink on a phone card's zebra wash is 4.3:1 at night: the second ink there */
@media (max-width: 640px) and (prefers-color-scheme: dark) {
  .pv-t tbody tr:nth-child(even) {
    --fg-3: var(--fg-2);
  }
}

.pv-tiho {
  margin-top: 14px;
}

.pv-listanje {
  margin-top: 20px;
}

.pv-lijevak {
  margin-top: 14px;
}

/* the analyses' strip: SKEN's segmented tabs as links; the chosen one is the inverse module */
.pv-tabovi {
  margin: 0 0 16px;
}

a.s3-tab {
  text-decoration: none;
}

.pv-tabovi > .s3-tab[aria-current="page"] {
  background-color: var(--inv-bg);
  border-color: var(--inv-bg);
  color: var(--inv-fg);
  --fg: var(--inv-fg);
  --fg-2: var(--inv-fg-2);
}

/* a long job behind a fold that says how long it takes */
.pv-potvrda {
  max-width: 560px;
  margin-top: 16px;
}

/* ══════════ A SITE'S OWN PAGES (redesign F2, 11. 10. 2026) ══════════
 * The dashboard (/klijent/<slug>), a page per category (/k/<slovo>) and the problems: tiles, rows and
 * the category switch. Four tabs fit a 360 px screen: the words a little smaller there. */
@media (max-width: 479px) {
  /* a larger text setting (Android "Large") scrolls the strip inside its well instead of breaking a
     word in two (review of F4: "Vrijednos / t" from 110 % text at 360 px) */
  .pv-tabovi {
    grid-auto-columns: minmax(max-content, 1fr);
    overflow-x: auto;
  }

  .pv-tabovi .s3-tab {
    overflow-wrap: normal;
    padding: 8px 6px;
    font-size: 0.8125rem;
  }
}

/* back to the dashboard: a glyph, never an arrow in the words */
.pv-natrag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin-bottom: 4px;
  color: var(--fg-2);
  font: 600 var(--fs-ui) / 1.2 var(--f-ui);
  text-decoration: none;
}

.pv-natrag svg {
  flex: none;
  width: 18px;
  height: 18px;
}

@media (hover: hover) {
  .pv-natrag:hover {
    color: var(--fg);
  }
}

/* the actions a dashboard folds: PDF, the manual part, a re-score, a new check */
.pv-radnje {
  max-width: 560px;
  margin-top: 16px;
}

.pv-dolje {
  margin-top: 12px;
}

/* a tile: a name, one figure, a bar, a line under it (the three questions; value and visits) */
.pv-plocice {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.pv-plocice--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pv-plocica {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  background-color: var(--bg-card);
  box-shadow: var(--drop);
  color: var(--fg);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--t-1) var(--ease);
}

.pv-plocica-n {
  color: var(--fg-2);
  font: 600 var(--fs-xs) / 1.3 var(--f-ui);
}

.pv-plocica-b {
  font: 600 1.5rem / 1.1 var(--f-ui);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.pv-plocica .pv-vtraka--mala {
  max-width: none;
}

@media (max-width: 400px) {
  .pv-plocica {
    padding: 10px;
  }

  .pv-plocica-b {
    font-size: 1.25rem;
  }
}

/* the ten categories as tiles: the letter's module, the name, the score, a bar, what fails */
.pv-katmreza {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
}

@media (min-width: 700px) {
  .pv-katmreza {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.pv-katmreza > li {
  min-width: 0;
  scroll-margin-top: 88px;
}

/* the letter and the score on one line, the name under them over the whole tile: in two columns of a
   phone a name beside both broke in the middle of a word ("Pristupačnos-t") */
.pv-katpl {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "s b" "i i" "t t" "p p";
  align-items: center;
  gap: 6px 8px;
  height: 100%;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  background-color: var(--bg-card);
  box-shadow: var(--drop);
  color: var(--fg);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--t-1) var(--ease);
}

.pv-katpl .pv-kl {
  grid-area: s;
  margin: 0;
}

.pv-katpl-ime {
  grid-area: i;
  min-width: 0;
  font: 600 var(--fs-xs) / 1.25 var(--f-ui);
  overflow-wrap: anywhere;
}

.pv-katpl-b {
  grid-area: b;
  justify-self: end;
  font: 600 1.125rem / 1 var(--f-ui);
  font-variant-numeric: tabular-nums;
}

.pv-katpl .pv-vtraka {
  grid-area: t;
  max-width: none;
  margin: 0;
}

.pv-katpl .pv-sub {
  grid-area: p;
  margin: 0;
}

/* an old link to #kat-R lands on the R tile, marked */
.pv-katmreza > li:target .pv-katpl {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

@media (hover: hover) {
  a.pv-plocica:hover,
  .pv-katpl:hover {
    background-color: var(--wash-2);
  }
}

a.pv-plocica:active,
.pv-katpl:active {
  background-color: var(--wash-2);
}

/* short facts one under another (the renewals, the profiles) */
.pv-crte {
  list-style: none;
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.pv-biljeska-tekst {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* the category switch: the ten letters with their scores, this one turned; five and five on a phone */
.pv-katprekidac ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
  padding: 0;
}

@media (min-width: 700px) {
  .pv-katprekidac ul {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
}

.pv-katprekidac a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 52px;
  padding: 6px 2px;
  border-radius: var(--r-1);
  background-color: var(--bg-well);
  color: var(--fg);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  -webkit-tap-highlight-color: transparent;
}

.pv-katprekidac b {
  font: 700 var(--fs-ui) / 1 var(--f-ui);
}

.pv-katprekidac span {
  color: var(--fg-2);
  font-size: var(--fs-xs);
}

.pv-katprekidac a[aria-current="page"] {
  background-color: var(--inv-bg);
  color: var(--inv-fg);
}

.pv-katprekidac a[aria-current="page"] span {
  color: var(--inv-fg-2);
}

@media (hover: hover) {
  .pv-katprekidac a:not([aria-current]):hover {
    background-color: var(--wash-2);
  }
}

/* a check as a row: its state, ID and points; its title; what was judged and how; its guarantee */
.pv-provjere {
  list-style: none;
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.pv-prov {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  background-color: var(--bg-card);
  box-shadow: var(--drop);
  scroll-margin-top: 88px;
}

.pv-prov:target {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.pv-prov-glava {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
}

.pv-prov-id {
  color: var(--fg-2);
  font: 700 var(--fs-xs) / 1 var(--f-ui);
  letter-spacing: 0.04em;
}

.pv-prov-bod {
  margin-left: auto;
  color: var(--fg-2);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}

.pv-prov-n {
  margin: 0;
  font: 600 var(--fs-ui) / 1.4 var(--f-ui);
}

.pv-prov-d {
  margin: 0;
  color: var(--fg-2);
  font-size: var(--fs-ui);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.pv-prov-j {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin: 0;
  color: var(--fg-3);
  font-size: var(--fs-xs);
}

/* the neighbouring categories at the foot of one */
.pv-katdalje {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
}

.pv-katdalje a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 4px;
  color: var(--fg);
  font: 600 var(--fs-ui) / 1.2 var(--f-ui);
  text-decoration: none;
}

.pv-katdalje svg {
  flex: none;
  width: 18px;
  height: 18px;
}

/* ══════════ THE LIST AS CARDS (redesign F3, 11. 10. 2026) ══════════
 * A site is a card: its name with its score, where it lives, one line of facts, at most three tags and
 * two actions; the whole card opens the site. One column on a phone, two from 641 px, three from 1100. */
.pv-kartice-popis {
  list-style: none;
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
}

@media (min-width: 641px) {
  .pv-kartice-popis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .pv-kartice-popis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.pv-k {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background-color: var(--bg-card);
  box-shadow: var(--drop);
  transition: background-color var(--t-1) var(--ease);
}

.pv-k-glava {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.pv-k-ime {
  min-width: 0;
  color: var(--fg);
  font: 600 var(--fs-body) / 1.3 var(--f-ui);
  text-decoration: none;
  overflow-wrap: anywhere;
  -webkit-tap-highlight-color: transparent;
}

/* the whole card opens the site; its other links, its tick and its actions sit above that */
.pv-k-ime::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.pv-k-adr a,
.pv-k-cin a,
.pv-k-radnje,
.pv-k-kv {
  position: relative;
  z-index: 1;
}

@media (hover: hover) {
  .pv-k:has(.pv-k-ime:hover) {
    background-color: var(--wash-2);
  }
}

.pv-k:has(.pv-k-ime:active) {
  background-color: var(--wash-2);
}

.pv-k:has(.pv-k-ime:focus-visible) {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.pv-k-ime:focus-visible {
  outline: none;
}

/* the score as a module: ink on the well; a provisional one hollow and dashed (never a colour alone) */
.pv-k-ocjena {
  display: inline-grid;
  flex: none;
  place-items: center;
  min-width: 44px;
  height: 32px;
  padding: 0 8px;
  border: 1.5px solid transparent;
  border-radius: var(--r-1);
  background-color: var(--bg-well);
  color: var(--fg);
  font: 700 var(--fs-ui) / 1 var(--f-ui);
  font-variant-numeric: tabular-nums;
}

.pv-k-ocjena--prov {
  border-color: var(--fg-3);
  border-style: dashed;
  background-color: transparent;
  color: var(--fg-2);
}

.pv-k-adr,
.pv-k-cin {
  margin: 0;
  color: var(--fg-2);
  font-size: var(--fs-xs);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.pv-k .pv-oznake {
  margin: 0;
}

.pv-k-radnje {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 4px;
}

/* the tick of the compare mode: a 44 px target with its word */
.pv-k-kv {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin: -8px 0 -4px;
  color: var(--fg-2);
  font: 600 var(--fs-xs) / 1 var(--f-ui);
}

.pv-k-kv input {
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--accent-fill);
}

.pv-k:has(.pv-k-kv input:checked) {
  border-color: var(--fg);
}

/* the compare mode's bar: in view above the bottom bar while the list scrolls */
.pv-usporedi-traka {
  position: sticky;
  bottom: calc(68px + env(safe-area-inset-bottom));
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 16px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background-color: var(--bg-card);
  box-shadow: var(--drop-pop);
}

@media (min-width: 1100px), (max-height: 520px) {
  .pv-usporedi-traka {
    bottom: 16px;
  }
}

.pv-filtri {
  max-width: 560px;
}

.pv-legenda {
  max-width: 720px;
  margin-top: 16px;
}

/* a lead's status in one tap: the turned chip is where it stands */
.pv-status {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.pv-status .s3-chips-row {
  margin: 0;
}

/* ══════════ A SITE'S SUB-PAGES (redesign F4, 11. 10. 2026) ══════════ */

/* the share page's code, big enough to scan across a table (148 px was for the head's corner) */
.pv-dijeli--velik .pv-qr-svg {
  width: min(240px, 70vw);
}

/* the manual part's save stays in reach while the long form scrolls, above the bottom bar on a phone */
.pv-obrazac > .s3-btns:last-child {
  position: sticky;
  bottom: calc(68px + env(safe-area-inset-bottom));
  z-index: 20;
  margin: 0 -8px;
  padding: 10px 8px;
  border-radius: var(--r-1);
  background-color: var(--bg);
  box-shadow: 0 -1px 0 var(--line);
}

@media (min-width: 1100px), (max-height: 520px) {
  .pv-obrazac > .s3-btns:last-child {
    bottom: 0;
  }
}

/* a page with a sticky bar of its own (the compare mode, the form's save) keeps a focused control
   clear of that bar too, not only of the bottom bar (review of F4: Tab left it under the bar) */
@media (max-width: 1099px) and (min-height: 521px) {
  html:has(.pv-obrazac, .pv-usporedi-traka) {
    scroll-padding-bottom: calc(210px + env(safe-area-inset-bottom));
  }
}

@media (min-width: 1100px), (max-height: 520px) {
  html:has(.pv-obrazac, .pv-usporedi-traka) {
    scroll-padding-bottom: 96px;
  }
}

/* review of F2–F4: a near miss still hits a small link of a check's line; a state chip is 44 px; the
   card's action strip is no dead zone beside its buttons; the next category stays at the right */
.pv-prov-j a {
  position: relative;
}

.pv-prov-j a::after {
  content: "";
  position: absolute;
  inset: -12px -6px;
}

.pv-katbroj a {
  padding: 10px 12px;
}

.pv-k-radnje {
  pointer-events: none;
}

.pv-k-radnje > * {
  pointer-events: auto;
}

.pv-katdalje-sli {
  margin-left: auto;
}

/* the count of a list with the way into the compare mode beside it, a button on its own */
.pv-broj-red {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}

.pv-broj-red > p {
  margin: 0;
}

/* ══════════ ANALIZA › OCJENE (redesign F5, 11. 10. 2026) ══════════ */

/* a heat map cell opens that client's category: the whole cell, in the cell's own ink */
.pv-heat td a {
  display: block;
  color: inherit;
  text-decoration: none;
}

@media (hover: hover) {
  .pv-heat td a:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
  }
}

/* on a phone a client is two lines: its name over the whole width, its cells under it in as many equal
   columns as there are categories, so the map never scrolls sideways (one hidden scroll was the page's
   only one); a provisional cell loses its brackets there, its dashed outline already says it */
@media (max-width: 640px) {
  .pv-heat,
  .pv-heat thead,
  .pv-heat tbody {
    display: block;
  }

  .pv-heat tr {
    display: grid;
    gap: 2px;
    margin-bottom: 6px;
  }

  .pv-heat--n1 tr { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .pv-heat--n2 tr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pv-heat--n3 tr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pv-heat--n4 tr { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pv-heat--n5 tr { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .pv-heat--n6 tr { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .pv-heat--n7 tr { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .pv-heat--n8 tr { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .pv-heat--n9 tr { grid-template-columns: repeat(9, minmax(0, 1fr)); }
  .pv-heat--n10 tr { grid-template-columns: repeat(10, minmax(0, 1fr)); }

  .pv-heat thead th:first-child {
    display: none;
  }

  .pv-heat th[scope="row"] {
    grid-column: 1 / -1;
    min-width: 0;
    padding: 6px 0 2px;
  }

  .pv-heat td {
    min-width: 0;
    height: 2.5rem;
    padding: 0;
    font-size: var(--fs-xs);
    line-height: 2.5rem;
  }

  .pv-heat td a {
    line-height: 2.5rem;
  }

  .pv-hc-z {
    display: none;
  }
}

.pv-nalaz .pv-sek-n {
  overflow-wrap: anywhere;
}

/* ══════════ ANALIZA › UZORI (redesign F5, 11. 10. 2026) ══════════ */

/* the ranking's place before the name: a figure of its own ink */
.pv-rang {
  color: var(--fg-3);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* a figure with its unit ("vrijednost 3.070 €") breaks before or after, never inside */
.pv-nw {
  white-space: nowrap;
}

/* a comparison: the name and the difference on one line, then the group's bar over Ante's, each
   with its word and its figure, so the order says which is which and not the ink */
.pv-usp-popis,
.pv-zn-popis {
  list-style: none;
  display: grid;
  margin: 0;
  padding: 0;
}

.pv-usp {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) 3.5rem;
  align-items: center;
  gap: 4px 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.pv-usp-ime {
  grid-column: 1 / 3;
  min-width: 0;
  color: var(--fg);
  font: 500 var(--fs-ui) / 1.35 var(--f-ui);
  overflow-wrap: anywhere;
}

.pv-usp-d {
  color: var(--fg);
  font: 600 var(--fs-ui) / 1.35 var(--f-ui);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.pv-usp-l {
  display: inline-flex;
  align-items: center;
  color: var(--fg-3);
  font-size: var(--fs-xs);
}

.pv-usp .pv-vtraka {
  max-width: none;
  margin: 0;
}

.pv-usp-v {
  color: var(--fg-2);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* the rest of a long list, one tap away: a plain line, not another card inside the card */
.pv-jos {
  margin-top: 8px;
}

.pv-jos > summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--fg);
  font: 500 var(--fs-ui) / 1.3 var(--f-ui);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  list-style: none;
}

.pv-jos > summary::-webkit-details-marker {
  display: none;
}

.pv-jos[open] > summary {
  display: none;
}

/* the sentence of the largest gaps stands over the folded groups */
.pv-tekst + .pv-redovi {
  margin-top: 16px;
}

/* a site's feature: its sign, the name with who in the group has it, the group's share at the right */
.pv-zn {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) 4.5rem;
  align-items: start;
  gap: 4px 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-ui);
}

.pv-zn-ime {
  min-width: 0;
  color: var(--fg);
  overflow-wrap: anywhere;
}

.pv-zn-g {
  color: var(--fg-2);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.pv-zn-g .pv-vtraka {
  margin-left: auto;
}

/* from a tablet up two columns of comparisons, a reading width each */
@media (min-width: 900px) {
  .pv-usp-popis,
  .pv-zn-popis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 48px;
  }
}

/* ══════════ ANALIZA › VRIJEDNOST (redesign F5, 11. 10. 2026) ══════════ */

/* an item as a line: the name and its figure, how it was reached and the range under them; a total
   closes the list under a rule of the ink */
.pv-stavke {
  list-style: none;
  display: grid;
  max-width: 760px;
  margin: 0;
  padding: 0;
}

.pv-stavka {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 2px 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.pv-stavka-k {
  min-width: 0;
  color: var(--fg);
  font: 500 var(--fs-ui) / 1.35 var(--f-ui);
  overflow-wrap: anywhere;
}

.pv-stavka-v {
  color: var(--fg);
  font: 600 var(--fs-ui) / 1.35 var(--f-ui);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.pv-stavka-s {
  grid-column: 1 / -1;
  min-width: 0;
  color: var(--fg-2);
  font-size: var(--fs-xs);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.pv-stavka--uk {
  margin-top: -1px;
  border-top: 2px solid var(--fg);
  border-bottom: 0;
}

.pv-stavka--uk .pv-stavka-k,
.pv-stavka--uk .pv-stavka-v {
  font-weight: 700;
}

/* a list's total under it */
.pv-ukupno {
  margin-top: 14px;
  color: var(--fg-2);
  font-size: var(--fs-ui);
}

.pv-ukupno b {
  color: var(--fg);
}

/* ══════════ PROTOKOL (redesign F5, 11. 10. 2026) ══════════ */

/* the file's words at a reading width; each step a numbered card: what, then where and what is written */
.pv-protokol {
  display: grid;
  gap: 16px;
  max-width: 760px;
}

.pv-protokol code {
  padding: 1px 5px;
  border-radius: var(--r-m);
  background-color: var(--bg-well);
  color: var(--fg);
  font: 500 0.9em / 1.4 var(--f-mono);
  overflow-wrap: anywhere;
}

.pv-koraci {
  list-style: none;
  display: grid;
  gap: 10px;
  margin: 8px 0;
  padding: 0;
}

.pv-korak {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  background-color: var(--bg-card);
  box-shadow: var(--drop);
}

.pv-korak-n {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background-color: var(--inv-bg);
  color: var(--inv-fg);
  font: 600 var(--fs-ui) / 1 var(--f-ui);
  font-variant-numeric: tabular-nums;
}

.pv-korak-t {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.pv-korak-sto {
  margin: 0;
  color: var(--fg-2);
  font-size: var(--fs-ui);
  line-height: 1.55;
}

.pv-korak-sto b {
  color: var(--fg);
}

.pv-korak-d {
  margin: 0;
  color: var(--fg-2);
  font-size: var(--fs-xs);
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.pv-korak-d > span:first-child {
  display: block;
  color: var(--fg-3);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ══════════ ZAPIS › POSLOVANJE (redesign F6, 11. 10. 2026) ══════════ */

/* a group's head under the facts: the room of a new part, close to its own lines */
.pv-podnaslov {
  margin: 28px 0 4px;
}

/* ══════════ THE REVIEW OF F5+F6 (11. 10. 2026) ══════════ */

/* a gallery in a fold keeps two columns on a phone (the fold's padding left room for one) */
.pv-sek-tijelo > .pv-galerija {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 128px), 1fr));
}

/* a list's button stands off its last line */
.pv-stavke + .s3-btns {
  margin-top: 16px;
}

/* key figures two to a line: their figures and bars level whatever their labels' length, and the
   item lines under them apart */
.pv-katbrojke {
  align-items: start;
}

.pv-katbrojke dt {
  min-height: 2.6em;
  line-height: 1.3;
}

.pv-katbrojke + .pv-stavke {
  margin-top: 20px;
}

/* a difference stands level with its name, not between the name and the line under it */
.pv-usp-d {
  align-self: start;
}

/* a row's figure stays beside its words on a phone instead of dropping under them */
.pv-red-t {
  flex-basis: 10em;
}

/* the heat map's key, on a phone only: the letters alone say nothing to a touch screen */
.pv-legend--kljuc {
  display: none;
}

@media (max-width: 640px) {
  .pv-legend--kljuc {
    display: flex;
  }

  /* a score never breaks in its cell (a "100" read as "10" at 320 px or with larger text): the figure
     shrinks with the screen and stays on its line */
  .pv-heat td {
    font-size: min(var(--fs-xs), 3.1vw);
    white-space: nowrap;
  }

  /* a compare table keeps the sites' names in view under the app's bar while its rows scroll (clip,
     not hidden, so the head can stick) */
  .pv-tw:has(.pv-usporedi) {
    overflow: clip;
  }

  .pv-t.pv-usporedi thead {
    position: sticky;
    top: var(--hdr-h);
    z-index: 2;
    background-color: var(--bg-card);
  }

  /* inside a fold a compare table runs edge to edge, so four sites get their columns */
  .pv-sek-tijelo > .pv-tw:has(.pv-usporedi) {
    margin-inline: -20px;
    border-inline-width: 0;
    border-radius: 0;
    box-shadow: none;
  }
}

/* ══════════ THE PUBLIC CHECK (src/javno/, 23. 10. 2026) ══════════ */

/* the public pages have three places, not five */
.pv-dno.pv-dno--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* the wait's bar, under the head's words */
.pv-javno-traka {
  max-width: 420px;
  margin-top: 18px;
}

/* the phone's first screen beside the report's head: a phone's width, never the page's */
.pv-javno-snimka {
  width: min(100%, 220px);
}

/* a check in the report: its state and its words on one line, the evidence and the fix under them */
.pv-javno-stavke {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pv-javno-stavka {
  display: grid;
  gap: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.pv-javno-stavka:first-child {
  padding-top: 0;
  border-top: 0;
}

.pv-javno-stavka-glava {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}

.pv-javno-stavka p {
  margin: 0;
  color: var(--fg-2);
  font-size: var(--fs-ui);
}

/* a category's card: its name and its figure on one row, wrapping on a narrow phone */
.pv-javno-kat-glava {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
}

.pv-javno-dobro > summary {
  min-height: 44px;
  padding-block: 10px;
  color: var(--fg-2);
  font-size: var(--fs-ui);
  cursor: pointer;
}

.pv-javno-dobro[open] > summary {
  margin-bottom: 10px;
}

/* how others see the site: Google's result and a shared link's card, as text */
.pv-pregled-url {
  color: var(--fg-3);
  font-size: var(--fs-xs);
}

.s3-card .pv-pregled-naslov {
  color: var(--fg);
  font-weight: 600;
}

/* the table: the business's name and town under its domain */
.pv-javno-tablica td:first-child .pv-sub {
  margin-top: 4px;
}

/* a block of the report's brand section: its head, its words and what it shows, evenly spaced */
.pv-javno-blok {
  display: grid;
  gap: 12px;
}

.pv-javno-blok > .s3-h3 {
  margin: 0;
}

/* ══════════ /javno: what visitors left on the public check (src/javnoAlat.mjs) ══════════ */

/* a visitor's message as they wrote it: its lines kept, a long word or address broken anywhere */
.pv-poruka,
.pv-javno-stavka .pv-poruka {
  color: var(--fg);
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* an item's buttons stand off its words */
.pv-javno-stavka > .s3-btns {
  margin-top: 8px;
}

/* a row's own link (a domain on the Provjere tab, a dated check on a domain's page): a thumb's height */
.pv-javno-stavka-glava > a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* a deletion: its box and its button together, the box a thumb's size */
.pv-brisi {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
}

.pv-kvacica {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--fg-2);
  font-size: var(--fs-ui);
  cursor: pointer;
}

.pv-kvacica input {
  width: 20px;
  height: 20px;
  margin: 0;
}

/* the tool's Odjava: a form only for its POST, its button one of the header's (27. 10. 2026) */
.pv-odjava {
  display: contents;
}

/* /javno's new check: the address, whether it stays out of the table, the button, in one row that wraps */
.pv-nova {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px 12px;
}

.pv-nova .s3-field {
  flex: 1 1 240px;
  display: grid;
  gap: 4px;
}

/* ══════════ THE STUDIO'S CLIENTS IN THE PUBLIC TABLE (25. 10. 2026) ══════════ */

/* "Izradio: …" beside a row and on its report: SKEN's topic tag, one ink, no colour of its own; in a cell
   it takes a line under the name. Its own class: .pv-oznaka is the private tool's chip, which wraps */
.pv-izradio {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--fg-2);
  font: 500 var(--fs-xs) / 1.35 var(--f-ui);
  max-width: 100%;
  overflow-wrap: anywhere;
}

.pv-javno-tablica .pv-izradio {
  margin-top: 4px;
}

/* ══════════ THE PUBLIC REPORT AND TABLE: SIX BANDS (j2, 25. 10. 2026) ══════════ */

/* the six bands in one list a phone shows whole (Ante: "sadržaj, design, pristupačnost, pretraživanja"
   with speed and security): the name and the number with its word on one line, a thin bar under them,
   the one reason under the bar; each a link to its band further down */
.pv-trake {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
  max-width: 640px;
}

.pv-tr {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 2px 12px;
  min-height: 44px;
  padding: 6px 12px;
  border-radius: var(--r-1);
  color: var(--fg);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.pv-tr-ime {
  font: 600 var(--fs-ui) / 1.3 var(--f-ui);
}

.pv-tr-broj {
  color: var(--fg-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pv-tr-broj b {
  color: var(--fg);
}

.pv-tr .pv-tr-mjera {
  grid-column: 1 / -1;
  max-width: none;
  height: 4px;
  margin-top: 4px;
}

.pv-tr-zasto {
  grid-column: 1 / -1;
  color: var(--fg-3);
  font-size: var(--fs-xs);
}

/* a band's number in the table, in the heat map's one tone and its contrast (src/grafovi.mjs) */
.pv-ocj {
  display: inline-block;
  min-width: 2.6em;
  padding: 2px 8px;
  border-radius: var(--r-1);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-align: center;
}

/* how urgent a finding is: a word in a tag, never a colour */
.pv-razina {
  display: inline-block;
  margin-bottom: 6px;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--fg-2);
  font: 500 var(--fs-xs) / 1.35 var(--f-ui);
}

.s3-steps .pv-razina + b {
  display: block;
}

/* the proof of a finding, folded under it */
.pv-dokaz summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--fg-2);
  font-size: var(--fs-xs);
  cursor: pointer;
}

@media (hover: hover) {
  a.pv-tr:hover {
    background-color: var(--bg-well);
  }
}

/* the bands in the report's head, under its buttons */
.pv-javno-trake {
  margin-top: 24px;
}

/* a result with no total: the sentence that says these bands were measured to the end stands close over their list */
.pv-javno-trake > .pv-javno-trake-natpis {
  margin: 0 0 8px;
}

/* a row of the table keeps its date and the number's word on one line */
.pv-javno-tablica td[data-l="Provjereno"],
.pv-javno-tablica td[data-l="Snaga"] .pv-sub {
  white-space: nowrap;
}

/* what slows the page: the heaviest kinds of file, one line each (F3) */
.pv-usporava {
  display: grid;
  gap: 6px;
  margin: 8px 0 16px;
  padding-left: 1.2em;
  color: var(--fg-2);
}

/* ══════════ THE STUDIO'S OWN WORK, IN ITS PREMIUM LOOK (j3, 25. 10. 2026) ══════════ */

/* "Izradio: sorich.hr" in ink with the wordmark's green module (Ante: "premium cards i izražen izgled");
   the ink is the words' own, so the label is black on white and white on black, never a colour alone */
.pv-izradio--sorich {
  border-color: var(--fg);
  background-color: var(--fg);
  color: var(--bg);
}

.pv-izradio--sorich::before {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  margin-right: 0.45em;
  border-radius: var(--r-m);
  background-color: var(--sig);
  vertical-align: 0.05em;
}

/* its row in the table, a card on a phone: a rule of the signal at its left edge, its name in full weight */
.pv-javno-tablica tr.pv-sorich > td:first-child {
  box-shadow: inset 3px 0 0 var(--accent-t);
}

.pv-javno-tablica tr.pv-sorich > td:first-child > a {
  font-weight: 600;
}

/* review of F2: nine columns do not fit between a phone's cards and 1100 px, so the table scrolls inside
   its frame instead of losing its last columns; on a phone the strength's word stays beside its number;
   a band's reason keeps its contrast on the row's hover */
.s3-cost-wrap:has(> .pv-javno-tablica) {
  overflow-x: auto;
}

@media (max-width: 640px) {
  .pv-javno-tablica td[data-l="Snaga"] .pv-sub {
    display: inline;
    margin: 0 0 0 6px;
  }
}

@media (hover: hover) {
  a.pv-tr:hover .pv-tr-zasto {
    color: var(--fg-2);
  }
}

/* ══════════ THE INDEXABLE PAGES: LANDING PAGES, MAKERS, THE BADGE (src/javno/odredista.mjs, 27. 10. 2026) ══════════
 * Only SKEN tokens, no hue but the signal, nothing inline, nothing sideways on a phone. A card that is a
 * link is the kit's own `a.s3-card` (its lift, its focus shadow and its press come from sken.css §28),
 * so none of them is restated here. Appended to assets/pv.css. */

/* the four public places (the nav gained "Stranice"); the bar keeps its equal columns */
.pv-dno.pv-dno--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* where a landing page stands: links in the second ink, a module between them (no arrow: MARKUP.md
   rule 2), the page itself last in the ink. These words are also the page's BreadcrumbList, so nothing is
   marked up that is not shown. Each link is a thumb's height. */
.pv-put {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 0 var(--sp-3);
  padding: 0;
  list-style: none;
  font-size: var(--fs-ui);
}

.pv-put li {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  color: var(--fg-2);
}

.pv-put li + li::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  margin-inline: 12px;
  border-radius: var(--r-m);
  background-color: var(--fg-3);
}

.pv-put a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: inherit;
  text-decoration: none;
}

.pv-put [aria-current="page"] {
  color: var(--fg);
  font-weight: 600;
  overflow-wrap: anywhere;
}

@media (hover: hover) {
  .pv-put a:hover {
    color: var(--fg);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
  }
}

/* the numbers of a page: cards, the figure in the signal and its words under it (the figure is sized to
   the card, like the product card's) */
.pv-brojke {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: var(--gap-card);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pv-brojke > li {
  display: grid;
  align-content: start;
  gap: 6px;
}

.pv-brojke .s3-price {
  font-size: clamp(1.875rem, 14cqi, 2.75rem);
  line-height: 1.1;
}

.pv-brojka-l {
  color: var(--fg-2);
  font-size: var(--fs-ui);
  line-height: 1.4;
}

/* the gallery: a card per site, its first screen on top (16:10, cropped from the top, never stretched),
   its domain, its name and town, its strength. The card is `a.s3-card`; `.s3-card.pv-web` outranks the
   kit's `a.s3-card` (display) and `.s3-card` (padding) */
.pv-vitrina {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: var(--gap-card);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pv-vitrina > li {
  display: flex;
  min-width: 0;
}

.s3-card.pv-web {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  overflow: hidden;
  color: var(--fg);
}

.pv-web-slika {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background-color: var(--bg-well);
}

.pv-web-slika img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
}

.pv-web-tijelo {
  display: grid;
  gap: 4px;
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
}

.pv-web-ime {
  font: 600 var(--fs-h4) / 1.3 var(--f-ui);
  overflow-wrap: anywhere;
}

.pv-web-sub {
  color: var(--fg-3);
  font-size: var(--fs-xs);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.pv-web-mjera {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  margin-top: 6px;
}

.pv-web-mjera .s3-price {
  font-size: 1.375rem;
  line-height: 1.2;
}

.pv-web-mjera > span:last-child {
  color: var(--fg-2);
  font-size: var(--fs-ui);
}

.pv-web .pv-izradio {
  justify-self: start;
  margin-top: 6px;
}

/* the studio's own work: the table's rule of the signal at the text's left edge */
.pv-web--sorich .pv-web-tijelo {
  box-shadow: inset 3px 0 0 var(--accent-t);
}

/* "Izradio: …" as a link (a table row, a report's head: never inside a card, which is a link itself); a
   thumb's height from its hit area, the chip's own size unchanged */
a.pv-izradio {
  position: relative;
  color: var(--fg-2);
  text-decoration: none;
}

a.pv-izradio::after {
  content: "";
  position: absolute;
  inset: -12px -4px;
}

a.pv-izradio.pv-izradio--sorich {
  color: var(--bg);
}

@media (hover: hover) {
  a.pv-izradio:not(.pv-izradio--sorich):hover {
    border-color: var(--fg);
    color: var(--fg);
  }
}

/* the badge on a report: its pictures on a well, the snippet in a code well (a well inside a card) that
   grows with its text and selects whole with one click */
.pv-znacka {
  display: grid;
  gap: 12px;
}

.pv-znacka-pregled {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  padding: var(--sp-4);
  border-radius: var(--r-1);
  background-color: var(--bg-well);
}

.pv-znacka-pregled img {
  display: block;
  max-width: 100%;
  height: auto;
}

.pv-kod {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-1);
  background-color: var(--bg-well);
  color: var(--fg);
  font: 400 var(--fs-xs) / 1.55 var(--f-mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  user-select: all;
}

/* ══════════ THE PUBLIC TABLE: FILTERS, GALLERY, LOOK, HISTORY, COMPARISON (f8, 27. 10. 2026) ══════════
 * Replaces the block "THE PUBLIC TABLE: THE FILTER IN ONE ROW" (the sticky bar's rules, .pv-tf*) and adds the
 * rest after it. Only SKEN tokens, one hue, no filter, blend or opacity on an image, no inline style.
 * The card of a checked site (.pv-vitrina, .pv-web*) is the one of the indexable pages (pv-dodatak.css); the
 * rules marked [extends] below only add to it. */

/* ── the bar: one sticky row. From 75em (1200 px at the default font) the search and six lists stand in it (.pv-tf); below that the search
 * and a "Filtri" button do, and the lists open in a panel under it (.pv-fp). Each is its own form and only one is
 * drawn, so nothing needs a script and a list that is not drawn is not in a screen reader's way. ── */
.pv-traka-filtra {
  position: sticky;
  top: var(--hdr-h);
  z-index: 15;
  margin: 0 0 12px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background-color: var(--bg-card);
  box-shadow: var(--drop);
}

.pv-tf {
  display: none;
}

.pv-fp {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.pv-tf-trazi,
.pv-fp-trazi {
  display: block;
  min-width: 0;
}

.pv-tf .s3-input,
.pv-fp-trazi .s3-input {
  min-height: 44px;
  padding-block: 8px;
}

/* in em, so a larger default font (a reader's own setting) keeps the search and its panel until the row has room for
   it: 75em is 1200 px at 16 px. The wrap is 1104 px wide from there: the lists have their own widths (800 px of them
   at the default font) and give way when room is short, the search takes what is left, so the bar is always one row
   of 62 px (scroll-padding-top below counts on it) */
@media (min-width: 75em) {
  .pv-fp {
    display: none;
  }

  .pv-tf {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .pv-tf-trazi {
    flex: 1 1 10rem;
    min-width: 8rem;
  }

  .pv-tf-izbor {
    position: relative;
    display: block;
    flex: 0 1 auto;
    min-width: 0;
  }

  .pv-tf-izbor--djelatnost {
    flex-basis: 9.5rem;
  }

  .pv-tf-izbor--red {
    flex-basis: 10rem;
  }

  .pv-tf-izbor--mjesto,
  .pv-tf-izbor--izradio {
    flex-basis: 8rem;
  }

  .pv-tf-izbor--platforma {
    flex-basis: 8.5rem;
  }

  .pv-tf-izbor--snaga {
    flex-basis: 7rem;
  }

  .pv-tf-izbor select.s3-input {
    width: 100%;
  }

  .pv-tf select.s3-input {
    padding-inline: 10px 26px;
    text-overflow: ellipsis;
  }

  /* a list with a choice in it is drawn with a rule of the ink, not with a word only; the same weight, so the
     chosen value needs no more room than the list has */
  .pv-tf-izbor--on select.s3-input {
    border-color: var(--fg);
    box-shadow: inset 0 0 0 1px var(--fg);
  }

  .pv-tf .s3-btn {
    flex: none;
  }
}

/* the button of the panel: the number beside it says how many lists have a choice */
.pv-fp-d > summary {
  gap: 8px;
  list-style: none;
  cursor: pointer;
}

.pv-fp-d > summary::-webkit-details-marker {
  display: none;
}

.pv-fp-d > summary svg {
  flex: none;
  width: 18px;
  height: 18px;
}

.pv-fp-d[open] > summary {
  background-color: var(--inv-bg);
  border-color: var(--inv-bg);
  color: var(--inv-fg);
}

.pv-fp-n {
  min-width: 1.6em;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background-color: var(--inv-bg);
  color: var(--inv-fg);
  font: 700 var(--fs-xs) / 1.7 var(--f-ui);
  text-align: center;
}

.pv-fp-d[open] .pv-fp-n {
  background-color: var(--inv-fg);
  color: var(--inv-bg);
}

/* the panel hangs under the bar and never pushes the list down; on a short phone it scrolls inside itself */
.pv-fp-tijelo {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: calc(100vh - var(--hdr-h) - 220px);
  max-height: calc(100dvh - var(--hdr-h) - 220px);
  overflow-y: auto;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background-color: var(--bg-card);
  box-shadow: var(--drop-pop);
}

/* two lists to a line on a phone (Platforma and Snaga share one), three from a tablet up */
.pv-fp-polja {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.pv-fp-sir {
  grid-column: 1 / -1;
}

@media (min-width: 700px) {
  .pv-fp-polja {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .pv-fp-sir {
    grid-column: auto;
  }
}

.pv-fp-tijelo .s3-btns {
  margin-top: 16px;
}

.pv-fp .s3-field > span {
  color: var(--fg-2);
  font-size: var(--fs-xs);
  font-weight: 600;
}

/* the bar is sticky, so a focus moved by Tab or a #link lands below the header and the bar, never under them
   (WCAG 2.2 SC 2.4.11). 62 px is the bar: 8 + 44 + 8 and its two borders. */
html:has(.pv-traka-filtra) {
  scroll-padding-top: calc(var(--hdr-h) + 62px + 16px);
}

/* a phone on its side has no room for a bar that stays: it scrolls with the page, its panel still hangs under it
   (relative, not static: the panel is placed against the bar) and fits the short screen */
@media (max-height: 520px) {
  /* its sticky offset would push a relative bar down over what follows it */
  .pv-traka-filtra {
    position: relative;
    top: auto;
  }

  .pv-fp-tijelo {
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
  }

  html:has(.pv-traka-filtra) {
    scroll-padding-top: calc(var(--hdr-h) + 16px);
  }
}

/* ── the count, the view's switch and the chosen filters ── */
.pv-rez {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin: 0 0 12px;
}

.pv-rez > p {
  margin: 0;
}

.pv-rez .pv-pogled {
  width: auto;
  margin: 0;
  grid-auto-columns: minmax(6.5rem, auto);
}

.pv-pogled .s3-tab {
  padding: 8px 16px;
  font-size: var(--fs-ui);
}

.pv-aktivni {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  align-items: center;
}

/* a chosen filter is the module turned, one tap from gone */
.s3-chips-row .s3-chip.pv-aktivan {
  gap: 8px;
  background-color: var(--inv-bg);
  border-color: var(--inv-bg);
  color: var(--inv-fg);
}

.pv-aktivan svg {
  flex: none;
  width: 14px;
  height: 14px;
}

/* nothing fits: each chosen filter taken off, with what it would give */
.pv-bez {
  display: grid;
  gap: 4px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.pv-bez a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--fg);
}

.pv-listanje {
  margin-top: 20px;
}

/* ── the card of a site in the gallery [extends the card of the indexable pages]: the computer's first screen
 * (16:10) with the phone's in a corner, the tags, and the tick of the comparison over the picture's other corner ── */
.pv-vitrina > li {
  position: relative;
}

.pv-web-slika {
  position: relative;
}

/* the phone: a sticker on the corner; a ring of the card's own ground tells it from any picture. It outranks
   `.pv-web-slika img` (the card's picture rule) by one class. */
.pv-web-slika .pv-web-m {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 17%;
  height: auto;
  aspect-ratio: 390 / 844;
  border: 2px solid var(--bg-card);
  border-radius: 8px;
  background-color: var(--bg-well);
  box-shadow: var(--drop-pop);
  object-fit: cover;
  object-position: top center;
}

/* only the phone's picture: it stands in the middle of the well, as tall as the well */
.pv-web-slika--mob .pv-web-m {
  top: 10px;
  right: auto;
  bottom: auto;
  left: 50%;
  width: auto;
  height: calc(100% - 20px);
  transform: translateX(-50%);
}

.pv-web-nema {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px;
  color: var(--fg-2);
  font-size: var(--fs-xs);
  text-align: center;
}

.pv-web-nema svg {
  flex: none;
  width: 28px;
  height: 28px;
}

/* what the site is and who made it, under its name (the table's first cell has the same row) */
.pv-web-oznake {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  margin-top: 2px;
}

.pv-web-oznake:empty {
  display: none;
}

.pv-web-oznake .pv-izradio,
.pv-javno-tablica .pv-web-oznake .pv-izradio {
  margin-top: 0;
}

.pv-javno-tablica .pv-web-oznake {
  margin-top: 4px;
}

.pv-web-tag {
  display: inline-block;
  max-width: 100%;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--fg-2);
  font: 500 var(--fs-xs) / 1.35 var(--f-ui);
  overflow-wrap: anywhere;
}

/* the tick is the card's sibling, never inside its link; chosen it is the module turned */
.pv-web-kv {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background-color: var(--bg-card);
  box-shadow: var(--drop);
  color: var(--fg);
  font: 600 var(--fs-xs) / 1 var(--f-ui);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.pv-web-kv input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--accent-fill);
}

.pv-web-kv:has(input:checked) {
  border-color: var(--inv-bg);
  background-color: var(--inv-bg);
  color: var(--inv-fg);
}

.pv-vitrina > li:has(input:checked) .pv-web {
  border-color: var(--fg);
}

/* ── the report: the same picture in its head, and "Kako izgleda" with the pictures large ── */
.pv-glava-slika {
  display: block;
  width: min(100%, 300px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  box-shadow: var(--drop);
}

.pv-glava-slika:focus-visible {
  outline-offset: 3px;
}

/* the head's picture stands beside the words, in the middle of their height (the old phone picture filled it) */
.pv-phead-desno:has(> .pv-glava-slika) {
  align-self: center;
}

.pv-glava-slika .pv-web-slika {
  display: block;
  aspect-ratio: 16 / 10;
  background-color: var(--bg-well);
  overflow: hidden;
}

.pv-glava-slika .pv-web-slika > img:not(.pv-web-m) {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
}

.pv-izgled {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px 24px;
  align-items: start;
}

@media (min-width: 900px) {
  .pv-izgled {
    grid-template-columns: minmax(0, 1fr) 240px;
  }
}

.pv-izgled-m {
  width: min(100%, 240px);
}

.pv-izgled-a {
  display: block;
  border-radius: var(--r-2);
}

.pv-izgled-a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

/* the whole page of the phone: folded, and when open a frame that scrolls inside itself */
.pv-cijela {
  margin-top: 20px;
}

.pv-cijela > summary {
  gap: 8px;
  list-style: none;
  cursor: pointer;
}

.pv-cijela > summary::-webkit-details-marker {
  display: none;
}

.pv-cijela > summary svg {
  flex: none;
  width: 18px;
  height: 18px;
}

.pv-cijela[open] > summary {
  margin-bottom: 16px;
}

.pv-cijela-okvir {
  width: min(100%, 390px);
  max-height: min(70vh, 680px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background-color: var(--bg-well);
}

.pv-cijela-okvir img {
  display: block;
  width: 100%;
  height: auto;
}

/* ── the history: a line of the ink, the latest one as the signal's module, and its numbers as a list ── */
.pv-povijest {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px var(--gap-card);
  align-items: start;
}

@media (min-width: 900px) {
  .pv-povijest {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }
}

.pv-pov {
  display: grid;
  gap: 10px;
  margin: 0;
}

.pv-pov-br .s3-label {
  margin-bottom: 8px;
}

.pv-pov-t {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-ui);
  font-variant-numeric: tabular-nums;
}

.pv-pov-t th,
.pv-pov-t td {
  padding: 10px 0;
  border-bottom: 1px solid var(--line-2);
  font-weight: 400;
  text-align: left;
  vertical-align: baseline;
}

.pv-pov-t tr:last-child > * {
  border-bottom: 0;
}

.pv-pov-t th {
  color: var(--fg-2);
}

.pv-pov-t td {
  text-align: right;
}

.pv-pov-t td .pv-sub {
  display: block;
  margin-top: 0;
}

.pv-pov-svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.pv-pov-os {
  stroke: var(--line);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.pv-pov-vod {
  stroke: var(--line);
  stroke-width: 1;
  stroke-dasharray: 3 5;
  vector-effect: non-scaling-stroke;
}

.pv-pov-linija {
  fill: none;
  stroke: var(--pv-ink);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.pv-pov-tocka {
  fill: var(--pv-ink);
}

.pv-pov-tocka--stara {
  fill: var(--bg-card);
  stroke: var(--pv-ink);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.pv-pov-tocka--sad {
  fill: var(--accent-t);
  stroke: var(--bg-card);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.pv-pov-opis {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--fg-2);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}

.pv-pov .s3-terms {
  margin: 0;
}

/* ── the comparison of two or three sites: a table with a column per site; on a phone the row's name stands
 * over the whole width and the sites keep their columns ── */
.pv-uz-okvir {
  overflow: visible;
}

.pv-uz {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: var(--fs-ui);
  font-variant-numeric: tabular-nums;
}

.pv-uz th,
.pv-uz td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-2);
  vertical-align: top;
  text-align: left;
}

.pv-uz tbody tr:last-child > * {
  border-bottom: 0;
}

.pv-uz thead th {
  border-bottom: 1px solid var(--line);
  font-weight: 600;
}

.pv-uz tbody th[scope="row"] {
  width: 9rem;
  color: var(--fg-3);
  font: 600 var(--fs-xs) / 1.4 var(--f-ui);
}

.pv-uz-kut {
  width: 9rem;
}

.pv-uz-ime {
  display: block;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.pv-uz-ime a {
  color: var(--fg);
}

.pv-uz-makni {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 4px;
  margin-left: -4px;
  color: var(--fg-2);
  font-size: var(--fs-xs);
  font-weight: 500;
}

.pv-uz-r {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  background-color: var(--bg-well);
}

.pv-uz-m {
  display: block;
  width: min(100%, 130px);
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  background-color: var(--bg-well);
}

.pv-uz-fig b {
  font: 700 1.75rem / 1 var(--f-ui);
  letter-spacing: -0.01em;
}

.pv-uz .pv-vtraka {
  max-width: 100%;
}

.pv-uz-lista {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pv-uz-lista li {
  display: grid;
  justify-items: start;
  gap: 2px;
}

.pv-uz-lista .pv-razina {
  margin-bottom: 0;
}

/* the highest number of a row, when the sites differ: a ring of the signal round its chip, and the words for a
   screen reader */
.pv-ocj.pv-naj {
  outline: 2px solid var(--accent-t);
  outline-offset: 1px;
}

/* the chip keeps the ink of its own step: the signal's colour of .pv-naj is for a number on the card, not on a
   step's ground (scripts/kontrast.mjs checks these five are here) */
.pv-ocj.pv-naj.pv-hc0 { color: var(--pv-on-0); }
.pv-ocj.pv-naj.pv-hc1 { color: var(--pv-on-1); }
.pv-ocj.pv-naj.pv-hc2 { color: var(--pv-on-2); }
.pv-ocj.pv-naj.pv-hc3 { color: var(--pv-on-3); }
.pv-ocj.pv-naj.pv-hc4 { color: var(--pv-on-4); }

.pv-uz-dodaj {
  margin-top: 20px;
}

.pv-uz--n2 { --n: 2; }
.pv-uz--n3 { --n: 3; }

@media (max-width: 640px) {
  .pv-uz thead,
  .pv-uz tbody,
  .pv-uz tr {
    display: block;
  }

  .pv-uz-kut {
    display: none;
  }

  .pv-uz tr {
    display: grid;
    grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr));
    gap: 6px 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line-2);
  }

  .pv-uz tbody tr:last-child {
    border-bottom: 0;
  }

  .pv-uz th,
  .pv-uz td {
    min-width: 0;
    padding: 0;
    border: 0;
  }

  .pv-uz tbody th[scope="row"] {
    grid-column: 1 / -1;
    width: auto;
  }

  .pv-uz thead {
    position: sticky;
    top: var(--hdr-h);
    z-index: 2;
    background-color: var(--bg-card);
  }

  .pv-uz-m {
    width: min(100%, 90px);
  }

  .pv-uz-fig b {
    font-size: 1.5rem;
  }
}

/* ── the tick of the comparison in the table, and the bar it opens (shown once a site is ticked: CSS only) ── */
main {
  counter-reset: oznaceno;
}

input[name="s"][form="usporedi"]:checked {
  counter-increment: oznaceno;
}

.pv-uz-oznaceno::after {
  content: counter(oznaceno);
}

.pv-uz-pomoc {
  margin: 0;
  color: var(--fg-2);
  font-size: var(--fs-ui);
}

@supports selector(:has(a)) {
  main:not(:has(input[name="s"][form="usporedi"]:checked)) .pv-usporedi-traka {
    display: none;
  }
}

/* the tick stands at the start of a table row, a thumb's size round a box of 22 px */
.pv-prva {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.pv-prva-t {
  flex: 1 1 auto;
  min-width: 0;
}

.pv-tkv {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: -10px 0 -10px -14px;
  cursor: pointer;
}

.pv-tkv input {
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--accent-fill);
}

.pv-javno-tablica tr:has(.pv-tkv input:checked) > td:first-child {
  box-shadow: inset 3px 0 0 var(--fg);
}

/* on a phone a row is a card and the name is its first line: a thumb's height */
@media (max-width: 640px) {
  .pv-prva-t > a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .pv-tkv {
    margin: 0 0 0 -12px;
  }
}

/* the third ink on the zebra's wash is 4.3:1 at night (axe, 27. 10. 2026): the second ink there, as on the phone cards of the tool's own tables */
@media (prefers-color-scheme: dark) {
  .pv-javno-tablica tbody tr:nth-child(even) {
    --fg-3: var(--fg-2);
  }
}

/* ══════════ THE PUBLIC REPORT SHOWS THE SCORE, NOT WHAT IS BEHIND IT (4. 11. 2026) ══════════
 * The site's place in a ranking and the teaser where the findings were. Only SKEN tokens: the inks and the line,
 * no hue of its own, no red and no amber; a number is told by its weight, never by a colour. */

/* "3. od 14 · Trgovine i webshopovi · Splitsko-dalmatinska županija", one line under the big figure: the place in ink,
   the group in the third ink; on a narrow phone the group wraps under the place */
.pv-mjesto {
  margin: 10px 0 0;
  color: var(--fg-2);
  font-size: var(--fs-ui);
  font-variant-numeric: tabular-nums;
}

.pv-mjesto b {
  color: var(--fg);
  font-weight: 600;
}

.pv-mjesto-gdje {
  color: var(--fg-3);
}

/* how many things there are to fix, band by band, as quiet tags under the teaser's sentence (the bands' own names) */
.pv-zasto-trake {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

.pv-zasto-trake li {
  padding: 4px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--fg-2);
  font-size: var(--fs-ui);
}

.pv-zasto-trake b {
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}

/* ══════════ ANTE'S FULL REPORT OF A PUBLIC CHECK (/javno/izvjestaj/<token>, src/javnoIzvjestaj.mjs, 4. 11. 2026) ══════════
 * The offer made of a check: a card a package with its one price, the findings under it, the guarantee's three
 * modules (.pv-g). Only SKEN tokens: no hue but the signal, no red and no amber; an urgency, a state and a mark are
 * told by a word and a shape, never by a colour. The findings themselves are the report's own rows (.pv-javno-stavka,
 * .pv-razina, .pv-dokaz), the message the record's drafted one (textarea.pv-nacrt). Nothing sideways on a phone. */

/* the packages of the offer, one under the other */
.pv-ponuda {
  display: grid;
  gap: var(--gap-card);
  margin-top: 20px;
}

/* a package's name and its one price on one row; on a narrow phone the price wraps under the name */
.pv-paket-glava {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
}

.pv-paket-glava .s3-h3 {
  margin: 0;
}

.pv-paket-cijena {
  color: var(--fg);
  font: 600 var(--fs-ui) / 1.35 var(--f-ui);
  font-variant-numeric: tabular-nums;
}

/* a finding of the offer: its urgency tag stands with the title on one line, the title takes the rest */
.pv-nalaz .pv-razina {
  margin-bottom: 0;
}

.pv-nalaz .pv-javno-stavka-glava > b {
  flex: 1 1 14ch;
  min-width: 0;
}

/* a finding's guarantee: the module and its name, in the third ink, small (its words on hover) */
.pv-nalaz .pv-jamstvo {
  color: var(--fg-3);
  font-size: var(--fs-xs);
}

.pv-jamstvo > span {
  display: inline-flex;
  align-items: center;
}

/* the guarantee's marks the offer uses, said once above it: each a module and its words */
.pv-jamstva {
  display: grid;
  gap: 6px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  color: var(--fg-2);
  font-size: var(--fs-ui);
}

.pv-jamstva .pv-g {
  vertical-align: 0.05em;
}

.pv-jamstva b {
  color: var(--fg);
  font-weight: 600;
}

/* the bands' ceilings and their reasons, under the bands' list */
.pv-ograde {
  display: grid;
  gap: 6px;
  max-width: 640px;
  margin: 14px 0 0;
  padding-left: 1.2em;
  color: var(--fg-2);
  font-size: var(--fs-ui);
}

/* ══════════ THE LIVE WAIT (src/javno/uzivo.mjs, assets/provjera.js, 4. 11. 2026) ══════════
 * The wait page shows each band the moment it is final: a row waits as a name with an empty bar and arrives with
 * the report's own words (.pv-trake, above). Only SKEN tokens and no colour of its own; the motion is the row rising
 * into place, and SKEN's reduced-motion rule (sken.css) cuts every animation to nothing besides the script's own
 * check, so a visitor who asks for less motion gets the numbers at once. */

/* its section is hidden until the script runs and the check is no longer waiting in the queue: a browser without scripts sees
   the page as it was */
.pv-uzivo[hidden] {
  display: none;
}

/* a band that is not final yet: its name in full, the rest quiet */
.pv-tr-red--ceka .pv-tr-broj,
.pv-tr-red--ceka .pv-tr-zasto {
  color: var(--fg-3);
}

/* a band arriving: it rises into place from the well's tone */
.pv-tr-red--tu .pv-tr {
  animation: pv-tr-ulaz var(--t-3) var(--ease-settle) both;
}

@keyframes pv-tr-ulaz {
  from {
    background-color: var(--bg-well);
    opacity: 0.4;
    transform: translateY(8px);
  }

  to {
    background-color: transparent;
    opacity: 1;
    transform: none;
  }
}

/* the total comes above the list, at the end: on a phone the list is longer than the screen */
.pv-uzivo-ukupno {
  position: relative;
  margin-bottom: 20px;
}

/* …and its place is kept from the start (invisible, not absent): when it appears the list under it does not move down */
.pv-uzivo-ukupno--skriven {
  visibility: hidden;
}

/* …with a quiet line in that same place until the count-up takes it ("Ukupna snaga stiže na kraju."): laid over the invisible
   figure and out of the flow, so the place has the figure's height in both states and nothing moves when the script removes
   the class. It shows only while the class is there (the figure is hidden by it, this one is let through) */
.pv-uzivo-ukupno-kasnije {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  color: var(--fg-3);
  font-size: var(--fs-ui);
  visibility: hidden;
}

.pv-uzivo-ukupno--skriven .pv-uzivo-ukupno-kasnije {
  visibility: visible;
}

/* a band shown again at once by a page that loaded anew (assets/provjera.js remembers what it showed): in its place, no rising */
.pv-tr-red--odmah .pv-tr {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .pv-tr-red--tu .pv-tr {
    animation: none;
  }
}