/* The site's one stylesheet, copied through by eleventy and loaded by every page --
   the law pages included, which is why most of what it styles is the page anatomy of
   the plan and not a template's own classes.

   Three things are worth knowing before reading it. The type and the colours are the
   design's tokens, stated once at the top and used everywhere through custom
   properties, so a law page and the landing page cannot drift apart. The two-column
   law page is a grid on <main> over flat siblings: the page itself knows nothing about
   columns, which is what lets a narrow screen stack them, and a law with no table of
   contents falls to one column without a rule of its own, the sidebar's track being
   sized by what stands in it. And the one script the site loads only adds to what is
   here: the context line is hidden until it is filled, the sidebar is a drawer only
   where the script has marked the document, and a page with no script at all is a
   page with a table of contents at the top and no context line. */

/* Public Sans for everything read, IBM Plex Mono for figures and labels. Both are
   OFL, both self-hosted under assets/fonts/ as woff2, and each weight is one file
   holding the Latin block and Latin Extended together: a Croatian page has the
   diacritics on every line, so there is nothing for a second file to save. The
   licences sit beside the files. */

@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/public-sans-400.woff2) format("woff2");
}

@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/public-sans-500.woff2) format("woff2");
}

@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/public-sans-600.woff2) format("woff2");
}

@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/public-sans-700.woff2) format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/ibm-plex-mono-400.woff2) format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/ibm-plex-mono-500.woff2) format("woff2");
}

/* The tokens. Dark follows the reader's system until they say otherwise with the
   button in the top bar, and what they say there is kept for this browser. The scheme
   is declared as well as the colours, so that what the browser draws itself --
   scrollbars, the caret in the search field -- comes out dark too.

   The dark palette stands twice, once for each way of arriving at it, and the two are
   one palette: a colour changed in either has to change in the other. */

:root {
  color-scheme: light;

  --bg: #ffffff;
  --surface: #eef1f5;
  --text: #12171f;
  --muted: #58606d;
  --rule: #dde1e7;
  --accent: #1e4bb8;
  --accent-strong: #123072;
  --tint: #e6ecf8;
  --tint-edge: #bfcdf0;

  /* The ad box's fill. In the light scheme it is the surface; in the dark it is set
     lighter than the surface, so that a creative made for a light page still reads as
     a box of its own. */
  --ad-bg: var(--surface);

  /* Two more hues beside the accent. The warm one is where the reader goes and where
     they are: the rule under a link and the whole link under the pointer, the page
     marked in the menus, the law of the day, the second figure on the landing page. The
     green one is the article's: the landing page's third figure, which counts them, and
     the article named under a law the search found. The accent, for its part, is the
     controls': the ring of focus and the edge of a field or button being worked. Neither
     is a color for anything else; what else needs a color has its own below. */
  --warm: #bb5a15;
  --warm-strong: #8f4610;
  --warm-tint: #fcefe2;
  --warm-edge: #ecc7a1;
  --green: #0e8069;

  /* A highlighter's yellow, under the words a search matched. */
  --hit: #fbeea0;

  /* A quiet gray, down the edge of what a link into the law named. */
  --landed: #b4bbc6;

  /* An input the page cannot take: the frame of the field and the line that says why,
     in the redline's red. A note that goes with a result, set apart from it as a box.
     Both follow the palette they are drawn from, light or dark. */
  --error: var(--del-line);
  --note-bg: var(--warm-tint);
  --note-edge: var(--warm-edge);

  /* The band the landing page opens on. */

  /* What floats over the page -- a calendar, a list of suggestions, a card that
     explains -- and the shadow it casts, a stronger one for a card that stands alone.
     A dark page swallows a shadow, so there a floating thing is lifted by a fill a step
     lighter than the page and a deeper shadow. */
  --raised: var(--bg);
  --raised-shadow: 0 8px 22px rgb(0 0 0 / 14%);
  --raised-shadow-strong: 0 12px 40px rgb(0 0 0 / 25%);

  /* The fill of a solid button and the text on it: the accent the links carry. */
  --solid: var(--accent);
  --on-solid: #ffffff;

  /* The redline on a change page: what an act struck and what it put in, in two low
     tints that stay apart in either scheme. The edge is the bar down a block that is
     wholly the change; the line is the strike across struck words, which has to read
     at the body's own size and so is darker than the bar. */
  --del-bg: #fbe7e7;
  --del-edge: #d9a1a1;
  --del-line: #b04a4a;
  --ins-bg: #e3f3e7;
  --ins-edge: #93c7a3;

  /* A text that is not the law in force: the tint the context bar wears and the tone
     its mark is set in. Amber, and low enough not to be taken for the redline's red
     or for the accent the links carry. */
  --past-bg: #fdf4e3;
  --past-edge: #e0c795;
  --past-text: #85560f;

  --font: "Public Sans", system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  /* The measures of the layout, so that the sticky offsets and the mobile rules all
     answer to the same numbers. */
  --top-bar: 56px;
  --sidebar: 272px;
  --measure: 800px;
  --frame: 1200px;
  --strip: 1600px;
  --edge: 28px;

  /* What a strip running the whole width of the window pads its contents by. The law
     page's context line takes the frame's own edge, standing with the column it
     belongs to. The top bar and the footer take a frame of their own, a wider one:
     they keep the window's own edge while the window is no wider than that, and past
     it they stop drifting, 200 px out from the column and no further however wide the
     monitor. A percentage is of the strip's own width, so a scrollbar is already out
     of it. */
  --frame-edge: max(var(--edge), calc((100% - var(--frame)) / 2 + var(--edge)));
  --strip-edge: max(var(--edge), calc((100% - var(--strip)) / 2 + var(--edge)));
}

@media screen and (prefers-color-scheme: dark) {
  :root:not([data-tema="svijetlo"]) {
    color-scheme: dark;

    --bg: #0f131b;
    --surface: #171d28;
    --ad-bg: #252d3b;
    --text: #e7ebf2;
    --muted: #98a3b5;
    --rule: #2b3444;
    --accent: #7ea6ff;
    --accent-strong: #b1c7ff;
    --tint: #1a2540;
    --tint-edge: #2e4370;
    --warm: #f0a15a;
    --warm-strong: #f7c493;
    --warm-tint: #2c2118;
    --warm-edge: #5a3f26;
    --green: #4fc8b0;
    --hit: #51450f;
    --landed: #4f5a6b;
    --solid: #7ea6ff;
    --on-solid: #0f131b;
    --del-bg: #3a2124;
    --del-edge: #8a4a50;
    --del-line: #e08a90;
    --ins-bg: #1c3226;
    --ins-edge: #3f7a55;
    --past-bg: #2b2417;
    --past-edge: #6b5426;
    --past-text: #e3bd76;
    --raised: #1d2432;
    --raised-shadow: 0 8px 24px rgb(0 0 0 / 50%);
    --raised-shadow-strong: 0 12px 40px rgb(0 0 0 / 60%);
  }
}

/* Dark asked for on a light system. The guard above is the other half of the pair: it
   leaves a dark system light where the reader asked for light. */

@media screen {
  :root[data-tema="tamno"] {
    color-scheme: dark;

    --bg: #0f131b;
    --surface: #171d28;
    --ad-bg: #252d3b;
    --text: #e7ebf2;
    --muted: #98a3b5;
    --rule: #2b3444;
    --accent: #7ea6ff;
    --accent-strong: #b1c7ff;
    --tint: #1a2540;
    --tint-edge: #2e4370;
    --warm: #f0a15a;
    --warm-strong: #f7c493;
    --warm-tint: #2c2118;
    --warm-edge: #5a3f26;
    --green: #4fc8b0;
    --hit: #51450f;
    --landed: #4f5a6b;
    --solid: #7ea6ff;
    --on-solid: #0f131b;
    --del-bg: #3a2124;
    --del-edge: #8a4a50;
    --del-line: #e08a90;
    --ins-bg: #1c3226;
    --ins-edge: #3f7a55;
    --past-bg: #2b2417;
    --past-edge: #6b5426;
    --past-text: #e3bd76;
    --raised: #1d2432;
    --raised-shadow: 0 8px 24px rgb(0 0 0 / 50%);
    --raised-shadow-strong: 0 12px 40px rgb(0 0 0 / 60%);
  }
}

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

/* What the page marks hidden stays hidden whatever else it is styled as: the controls
   a script uncovers are laid out as flex rows, and a flex rule would otherwise win
   over the browser's own reading of the attribute. */
[hidden] { display: none !important; }

/* Room for the scrollbar whether or not the page has one, so that a listing the
   reader has narrowed to a few rows does not shift the page sideways as the bar goes. */
html {
  -webkit-text-size-adjust: 100%;
  scrollbar-gutter: stable;
}

/* The page is a column at least as tall as the window, so that a page with little on
   it -- the landing page on a tall screen, a short law -- ends with the footer along
   the bottom and not with a band of empty background under it. */

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
}

/* A link: the words in the text's own color, with a thin rule under them in the warm
   tone, so that a paragraph reads as a paragraph and a listing as a listing. Under the
   pointer or at the keyboard the whole link takes the warm tone. The accent stays with
   the site's controls. Components that carry a link as a heading, a menu row or a glyph
   take the rule off again below. */
a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--warm) 55%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover,
a:focus-visible {
  color: var(--warm);
  text-decoration-color: currentColor;
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
html[data-unos="mis"] :focus-visible { outline: none !important; }

h1, h2, h3, h4 { text-wrap: balance; }

/* Said for a screen reader and not shown: the labels on the search fields. */
.skriveno {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Straight to the text, for a reader who does not want to hear the chrome and the
   table of contents again on every law. Out of the way until it has focus. */
.preskoci {
  position: absolute;
  top: 0;
  left: -9999px;
  z-index: 40;
  background: var(--bg);
  border: 1px solid var(--accent);
  padding: 8px 14px;
  font-size: 14px;
}

.preskoci:focus { left: 8px; top: 8px; }

/* The top bar, on every page and sticky on every one of them: the sidebar and the
   context line are placed under it, so its height is a token and not a guess. */

.vrh {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 32px;
  height: var(--top-bar);
  padding: 0 var(--strip-edge);
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
}

/* The name and the links are set in two sizes, so they share a baseline rather than a
   center; together they are centered in the bar like everything else in it. The links
   take the room between the name and the field: the ones that take the reader
   somewhere on the site stay by the name, and the one about the site goes to the
   right, beside the field. */

.vrh-lijevo {
  display: flex;
  align-items: baseline;
  gap: 32px;
  flex: 1;
}


.vrh .ime {
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}

.vrh .ime { text-decoration: none; }

/* The site's mark before the name: the section sign of the icon in the page's own
   colors, centered against the name, which keeps the baseline it shares with the links.
   A narrow screen shows the mark alone, and the link says the whole name to a screen
   reader either way. */
.vrh .znak { align-self: center; flex: none; width: 11.2px; height: 20px; }
.vrh .znak .donje { fill: var(--text); }
.vrh .znak .gornje { fill: var(--warm); }

.vrh-nav {
  display: flex;
  flex: 1;
  gap: 22px;
  font-size: 14.5px;
  font-weight: 500;
}

.vrh-nav a[href="/o-projektu/"] { margin-left: auto; }

/* The way to the site's pages, in the text color, each on one line whatever the
   bar's width; the page the reader is on is marked in the warm tone with a rule under
   it, and the pointer brings both to the others. */
.vrh-nav a {
  color: var(--text);
  text-decoration: none;
  text-underline-offset: 5px;
  white-space: nowrap;
}
.vrh-nav a:hover { color: var(--warm-strong); text-decoration: underline; }

.vrh-nav [aria-current="page"] {
  color: var(--warm);
  text-decoration: underline;
}

/* The search in the bar: a field with a magnifier at its head. The magnifier is the
   button that sends the form, laid over the field's left end, where the field leaves
   room for it. */
.trazi-vrh {
  position: relative;
  margin-left: auto;
  display: flex;
  min-width: 0;
}

/* The field gives way first where the bar is short of room, down to a width a word
   still fits in. */
.trazi-vrh input {
  width: 260px;
  min-width: 100px;
  border: 1px solid var(--rule);
  background: var(--surface);
  padding: 7px 12px 7px 34px;
  font: 400 14px var(--font);
  color: var(--text);
}

.trazi-vrh button {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
}

.trazi-vrh input:focus-visible { outline: none; border-color: var(--accent); }

.trazi-vrh button:hover { color: var(--accent); }

.trazi-vrh svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

/* The theme button, at the end of the bar. It is `hidden` in the built page and the
   script after it uncovers it, so a reader with no script is not offered a control
   that cannot do anything; the theme is then the system's, as it was. The icon is what
   the press will bring, not what the page is wearing. */

.tema {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--rule);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}

.tema:hover { color: var(--accent); }

.tema svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tema .sunce { display: none; }
.tema[aria-pressed="true"] .sunce { display: block; }
.tema[aria-pressed="true"] .mjesec { display: none; }

/* The menu, for a narrow screen only, in the place of the link home: its button is the
   site's mark with a caret beside it that turns over while the menu is open. The panel
   is a card hung under the bar from the mark, over the page, which is dimmed behind
   it; the links are rows a finger can take, each with its icon. The page the reader is on is tinted, with the warm tone's
   bar at its edge. The bar is positioned, being sticky, so the card is placed against
   it. */
.izbornik { display: none; }

.izbornik summary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  margin: 0 -12px;
  color: var(--muted);
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.izbornik summary::-webkit-details-marker { display: none; }
.izbornik summary:hover { color: var(--text); }

.izbornik .strelica {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.15s ease;
}

.izbornik[open] .strelica { transform: rotate(180deg); }

.izbornik[open]::before {
  content: "";
  position: fixed;
  inset: var(--top-bar) 0 0;
  background: rgb(0 0 0 / 30%);
  animation: izbornik-zasjeni 0.15s ease-out;
}

.izbornik .ploha {
  position: absolute;
  top: calc(100% + 8px);
  left: calc(var(--edge) - 6px);
  width: min(320px, 100% - 2 * var(--edge) + 12px);
  padding: 10px;
  background: var(--raised);
  border: 1px solid var(--rule);
  border-radius: 12px;
  box-shadow: var(--raised-shadow-strong);
  animation: izbornik-otvori 0.15s ease-out;
}

@keyframes izbornik-otvori {
  from { opacity: 0; transform: translateY(-6px); }
}

@keyframes izbornik-zasjeni {
  from { opacity: 0; }
}

.izbornik svg:not(.znak) {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.izbornik nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
}

.izbornik nav a svg { flex: none; width: 20px; height: 20px; color: var(--muted); }
.izbornik nav a:hover { background: var(--surface); }

.izbornik nav a[aria-current="page"] {
  background: var(--warm-tint);
  box-shadow: inset 3px 0 var(--warm);
  color: var(--warm);
}

.izbornik nav a[aria-current="page"] svg { color: var(--warm); }

/* Every page's frame, and the law page's two columns.

   The children of <main> are flat siblings -- the banner, the context line, the table
   of contents, the law header, the law, the acts' own provisions, the provenance -- so
   the grid places them by column and lets the rows fall as they come. The table of
   contents takes the first track and spans far more rows than any law has parts, which
   is what gives a sticky sidebar the height of the whole page to stick within; the
   empty rows under it are nothing. Its track is sized by what stands in it, so a law
   with no table of contents, and every page that is not a law, comes out as one
   column with no rule for the case. It grows into whatever the window leaves above the
   footer, and its rows are packed to the start, so that the height it is handed stays
   empty under the page instead of being spread through it. */

main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: start;
  flex: 1;
  /* Where what stands under the bars begins: the top bar alone, and the context line
     as well on the pages that carry one. */
  --sticky-top: var(--top-bar);
  /* The frame's whole width, centered by the margins. Left to size itself, a flex item
     with margins on both sides comes out as wide as its contents, and the page would
     draw in around a list the reader has just narrowed. */
  width: 100%;
  max-width: var(--frame);
  margin: 0 auto;
  padding: 0 var(--edge) 40px;
}

main > * {
  grid-column: 2;
  min-width: 0;
}

main > nav.sadrzaj {
  grid-column: 1;
  grid-row: 1 / span 50;
  align-self: start;
  position: sticky;
  top: var(--sticky-top);
  width: var(--sidebar);
  margin-right: 40px;
  max-height: calc(100vh - var(--sticky-top));
  overflow: auto;
  overscroll-behavior: contain;
  padding: 22px 20px 40px 0;
  border-right: 1px solid var(--rule);
  font-size: 13.5px;
}

main > h1,
main > div.zaglavlje > h1 {
  font-size: 28px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 28px 0 10px;
}

/* The law page's own parts, which stand in a column of their own measure however wide
   the window is: a line of law is read and not scanned. */
div.traka,
div.kontekst,
header.zakon-glava,
article.zakon,
section.dodaci,
footer.podrijetlo { max-width: var(--measure); }

/* A law with no divisions has no table of contents, so the first column stands empty
   and the text would be left against the frame's edge. Centred, it reads as a column
   that was placed rather than one that fell short. */
main:has(> article.zakon):not(:has(> nav.sadrzaj)) > * { margin-inline: auto; }

/* The table of contents. Every list under a division stands behind a hairline, so a
   law nested three deep is read by where its entries sit; a division keeps the text
   weight at any depth and the headings under one stand back from it, so what an entry
   names is read by how it is set. The one in view is on the tint -- which is
   `kontekst.js`'s doing and the only thing on the page that waits for a script. */

nav.sadrzaj > h2 {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

ol.sadrzaj-lista,
ol.sadrzaj-lista ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

ol.sadrzaj-lista > li,
ol.sadrzaj-lista li.dio { margin-bottom: 8px; }

/* The listing's own hand, which every entry keeps until something sets it apart: a law
   whose acts named no division has nothing to set apart, and reads in this one. */
ol.sadrzaj-lista a {
  display: block;
  padding: 3px 0;
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}

ol.sadrzaj-lista ol {
  padding-left: 12px;
  border-left: 1px solid var(--rule);
}

ol.sadrzaj-lista ol a {
  padding: 3px 8px;
  color: var(--muted);
  font-weight: 400;
}

ol.sadrzaj-lista li.dio > a {
  color: var(--text);
  font-weight: 600;
}

/* What follows the law on the page is no division of it, and its entries stand apart. */
ol.sadrzaj-lista > li.kraj {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
}

ol.sadrzaj-lista > li.kraj + li.kraj {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

ol.sadrzaj-lista li.aktivan > a {
  color: var(--accent);
  font-weight: 600;
  background: var(--tint);
}

span.dio-oznaka {
  display: block;
  color: var(--muted);
  font-weight: 500;
  font-size: 12.5px;
}

/* The context line: where in the law the reader is. Written whole into the page and
   shown from the first paint where the page's head has marked the document as a
   script's, so that the script's arrival moves nothing; without the script none of
   the line's parts does anything, so a page without one has no bar. A page whose text
   is not the law in force is written with the mark that says so, and that bar stands
   script or none. Either way it is a band under the top bar, its text held to the
   frame. */

div.kontekst { display: none; }

html.js div.kontekst,
div.kontekst.nije-na-snazi {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: var(--top-bar);
  left: 0;
  right: 0;
  z-index: 20;
  max-width: none;
  padding: 7px var(--frame-edge);
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
  font-size: 14px;
  color: var(--muted);
}

/* The mark of a text that is not in force. The banner over the law says it in a
   sentence and is gone as soon as anything is scrolled; this is the one thing on the
   page that never scrolls, so it is tinted rather than only worded -- the strip reads
   as different before a word of it is read. */
div.kontekst.nije-na-snazi {
  background: var(--past-bg);
  border-bottom-color: var(--past-edge);
}

/* The bar is fixed and takes no height in the flow, which is what lets the law scroll
   under it. The page reserves the height it takes, so that the banner over the law is
   not covered at the top of the page. What sticks under the bars is held below this
   one too, so that the table of contents stands where it is drawn and does not slide
   behind the bar at the first scroll. */
html.js main:has(> div.kontekst),
main:has(> div.kontekst.nije-na-snazi) {
  padding-top: 38px;
  --sticky-top: calc(var(--top-bar) + 38px);
}

div.kontekst .oznaka-verzije {
  flex: none;
  font: 600 11px/1.5 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--past-text);
}

div.kontekst .oznaka-verzije .objava {
  margin-left: 8px;
  font-weight: 400;
  letter-spacing: 0.06em;
}

div.kontekst a.trenutna { flex: none; font-weight: 600; }

div.kontekst .gdje {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

div.kontekst b { color: var(--text); font-weight: 600; }
/* The article's number, which is also the field a number is typed into to go to that
   article, with an arrow after it for the list of numbers that opens under it. At rest
   the field reads as the rest of the line; under the caret the box shows its edge, so
   that it can be seen to take typing. */
div.kontekst form.skok {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  margin: -3px 0;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
}

div.kontekst form.skok:focus-within { border-color: var(--accent); }

/* A number the law has no article under. */
div.kontekst form.skok.nema { border-color: #d0453c; }

div.kontekst form.skok::after {
  content: "";
  flex: none;
  width: 0;
  height: 0;
  margin: 0 8px 0 2px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: 0.7;
}

div.kontekst input.broj {
  width: 12ch;
  padding: 2px 0 2px 8px;
  border: 0;
  background: none;
  font: inherit;
  font-family: var(--font-mono);
  color: inherit;
  text-align: right;
  outline: none;
}

div.kontekst form.skok:focus-within input.broj {
  color: var(--text);
  text-align: left;
}

/* The cross at the end of a field that narrows a list by what is typed: it empties the
   field, and stands only while there is something to empty. The field's wrapper is the
   frame it is placed in, and the browser's own cross on a search field gives way to
   it. */
.birac > button.ocisti {
  position: absolute;
  top: 50%;
  right: 6px;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: none;
  font: 18px/24px var(--font);
  color: var(--muted);
  cursor: pointer;
}

.birac > button.ocisti:hover { background: var(--tint); color: var(--text); }
.birac > input:placeholder-shown + button.ocisti { display: none; }
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

/* A list under a field: a short column, scrolled, the marked entry on the tint. The
   article field on a law page and the law field on the landing page both open one. */
ul.ponuda {
  position: absolute;
  z-index: 25;
  top: calc(100% + 5px);
  max-height: 232px;
  margin: 0;
  padding: 4px 0;
  overflow-y: auto;
  list-style: none;
  background: var(--raised);
  border: 1px solid var(--rule);
  border-radius: 4px;
  box-shadow: var(--raised-shadow);
  color: var(--text);
}

ul.ponuda li {
  margin: 0;
  padding: 3px 12px;
  white-space: nowrap;
  cursor: pointer;
}

ul.ponuda li[hidden] { display: none; }
ul.ponuda li:hover { background: var(--tint); }
ul.ponuda li.odabrana { background: var(--tint); color: var(--accent); }

/* The list of articles hangs off the right of its field, in the same type as the
   number. */
div.kontekst ul.ponuda {
  right: -1px;
  min-width: calc(100% + 2px);
  font-family: var(--font-mono);
}

/* The two things `kontekst.js` adds for the drawer -- the way out of it and the veil
   over the page behind it -- which a screen wide enough to carry the sidebar itself
   has no use for. */
nav.sadrzaj > button.zatvori,
div.zastor { display: none; }

/* The button the sidebar becomes a drawer behind, which is a narrow screen's only way
   into the table of contents and is not shown where the sidebar itself is. */
div.kontekst .gumb {
  display: none;
  border: 1px solid var(--text);
  background: var(--bg);
  padding: 4px 10px;
  font: 600 12px var(--font);
  color: var(--text);
  cursor: pointer;
}

/* The law's own header. The issues are a sentence with links in it and not a row of
   codes, and every format the law can be taken away as is under one button. */

header.zakon-glava {
  margin: 26px 0 0;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rule);
}

header.zakon-glava h1 {
  margin: 0 0 8px;
  font-size: 28px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
}

p.status {
  margin: 0 0 6px;
  font-size: 14px;
  color: var(--muted);
}

p.objave {
  margin: 0 0 16px;
  font-size: 14px;
  color: var(--muted);
}

/* The ad slot. The box is labelled as an ad from the first day so that a paid
   creative can take it later without the page moving around it; until then it holds
   a link set in the site's own type. The label stands above the box and is not part
   of it, the way a paper sets "Oglas" in the margin of the ad and not on it, and while
   the space is given free the label says so, which a paid creative's label will not.

   The box has two shapes, both ones the market sells. On a desktop it is the band,
   `pojas`, the 728 by 90 leaderboard, the same on every page whatever the width of
   the column it stands in. On a phone, and bare of the class, it is the 300 by 250
   rectangle. */

aside.oglas { margin: 22px 0 8px; }

aside.oglas p.oznaka {
  margin: 0 0 6px;
  font: 600 11px/1.5 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

aside.oglas p.oznaka .ustupljeno { font-weight: 400; }

/* The rectangle: the three lines one stack, centred both ways in the box, so a short
   creative sits in the middle of it rather than leaving the bottom half bare. */
aside.oglas a.kreativa {
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  width: 300px;
  max-width: 100%;
  height: 250px;
  padding: 24px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--ad-bg);
  color: var(--text);
  text-align: center;
  text-decoration: none;
}

aside.oglas a.kreativa:hover { color: var(--text); }

/* The name breaks into lines of even length rather than filling the first and
   leaving a word on the second; the line under it keeps its last word company. Both
   are hints a browser without them ignores. */
aside.oglas a.kreativa strong {
  font-size: 22px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

aside.oglas a.kreativa .poruka {
  margin-top: 12px;
  font-size: 16px;
  line-height: 1.45;
  text-wrap: pretty;
}

aside.oglas a.kreativa .adresa {
  margin-top: 18px;
  font: 500 13px/1.5 var(--font-mono);
  color: var(--warm);
}

aside.oglas a.kreativa:hover .adresa { text-decoration: underline; }

/* The band: the name over the line on one left edge, each with the whole width to
   itself and so on one line, and the address alone at the right, centred on the
   two. Three columns wrapping each on their own would give the eye three ragged
   blocks and two uneven gaps. */
aside.oglas.pojas a.kreativa {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-content: center;
  column-gap: 28px;
  width: 728px;
  max-width: 100%;
  height: 90px;
  padding: 0 22px;
  text-align: left;
}

aside.oglas.pojas a.kreativa strong {
  grid-column: 1;
  font-size: 18px;
  line-height: 1.2;
}

aside.oglas.pojas a.kreativa .poruka {
  grid-column: 1;
  margin: 5px 0 0;
  font-size: 15px;
  line-height: 1.35;
}

aside.oglas.pojas a.kreativa .adresa {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  margin: 0;
}

/* Taking the law away: one button, and under it every format this text is published
   in. The menu is a <details>, so it opens and closes with no script; what
   `kontekst.js` adds is closing it again on a click somewhere else. */

div.preuzmi {
  display: flex;
  position: relative;
}

div.preuzmi summary {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 13px;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}

div.preuzmi summary::-webkit-details-marker { display: none; }

div.preuzmi summary::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: -3px;
  border-right: 1.5px solid currentcolor;
  border-bottom: 1.5px solid currentcolor;
  transform: rotate(45deg);
}

div.preuzmi summary:hover,
div.preuzmi details[open] summary { background: var(--tint); }

/* Under the button and out to the right of it, over the text: the button stands at the
   left edge of the law, and a menu that opened leftwards would hang over the table of
   contents beside it. It is wider than the button, so its width is its own and not the
   button's. */
div.preuzmi ul {
  position: absolute;
  z-index: 15;
  top: calc(100% + 5px);
  left: 0;
  min-width: 232px;
  margin: 0;
  padding: 5px 0;
  list-style: none;
  background: var(--raised);
  border: 1px solid var(--rule);
  box-shadow: var(--raised-shadow);
}

div.preuzmi ul li { margin: 0; }

div.preuzmi ul a {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 13px;
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
}

div.preuzmi ul a:hover {
  background: var(--tint);
  text-decoration: none;
}

div.preuzmi .uz {
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 400;
}

/* The law itself. */

article.zakon { margin-top: 6px; }

h2.dio {
  margin: 34px 0 14px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule);
  font: 600 12px/1.5 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

h3.naslov {
  margin: 24px 0 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
}

h4.clanak {
  position: relative;
  margin: 2px 0 8px;
  font-size: 17px;
  font-weight: 700;
}

/* The permanent link to an article, a "#" beside its number. It is there for a reader
   who wants to cite this article, and out of the way of one who is reading: shown on
   the heading under the pointer or at the keyboard, and always shown where there is no
   pointer to hover with. */
a.veza {
  margin-left: 6px;
  color: var(--muted);
  font-weight: 400;
  text-decoration: none;
  opacity: 0;
}

h4.clanak:hover a.veza,
a.veza:focus-visible { opacity: 1; }

@media (hover: none) {
  a.veza { opacity: 0.45; }
}

/* The history mark: a small glyph after the number of every article an act has
   touched. Faint but always there, since it says something the permalink does not;
   under the pointer it takes the accent and opens the article's history, a card
   naming each act and what it did, each a link to the page of that change. The card
   opens on hover and on focus within, so the keyboard reaches it too, and under the
   class `kontekst.js` puts on the mark a finger has tapped. */
/* The card hangs from the heading and not from the glyph, so that an article whose
   number sits near the right edge cannot push it off the page. */
span.povijest {
  position: static;
  display: inline-block;
  margin-left: 6px;
  vertical-align: 0.05em;
  line-height: 0;
}

span.povijest a.oznaka {
  display: inline-block;
  padding: 3px;
  margin: -3px;
  color: var(--muted);
  text-decoration: none;
  opacity: 0.45;
}

span.povijest a.oznaka svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

span.povijest:hover a.oznaka,
span.povijest:focus-within a.oznaka,
span.povijest.otvoren a.oznaka {
  color: var(--warm);
  opacity: 1;
}

@media (hover: none) {
  span.povijest a.oznaka { opacity: 0.45; }
}

/* Its width is capped against the viewport and its rows wrap, so that no history,
   however long, can widen the page it stands on. The second column is given a zero
   minimum because a track sized by its own content would hold the card open past the
   cap whatever the cap says. */
span.povijest .oblacic {
  position: absolute;
  z-index: 15;
  top: calc(100% + 4px);
  left: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 3px 12px;
  width: max-content;
  min-width: min(220px, 100%);
  max-width: min(340px, calc(100vw - 2 * var(--edge)));
  padding: 9px 12px 10px;
  overflow-wrap: anywhere;
  background: var(--raised);
  border: 1px solid var(--rule);
  box-shadow: var(--raised-shadow);
  font: 400 13px/1.45 var(--font);
  color: var(--text);
  text-align: left;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease-out 0.12s, visibility 0s linear 0.24s;
}

span.povijest:hover .oblacic,
span.povijest:focus-within .oblacic,
span.povijest.otvoren .oblacic {
  opacity: 1;
  visibility: visible;
  transition-delay: 0.12s, 0.12s;
}

span.povijest .oblacic b {
  grid-column: 1 / -1;
  margin-bottom: 3px;
  font: 600 11px/1.5 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

span.povijest .oblacic a {
  font-family: var(--font-mono);
  font-size: 12.5px;
  white-space: nowrap;
}

span.povijest .oblacic span { color: var(--muted); }

/* The card's last row, which opens the article's whole history: every text it has
   had, on the law's own page of them. */
span.povijest .oblacic a.sve {
  grid-column: 1 / -1;
  margin-top: 5px;
  font: 600 13px/1.45 var(--font);
  white-space: normal;
}

/* A citation in the law's text, linked to what it cites: an article or a paragraph
   of this law, or another law published here. The text is what the reader came for,
   so the link is set in the text's own colour with a faint rule under it, and takes
   the accent only under the pointer or at the keyboard. */
article.zakon a.poziv,
section.dodaci a.poziv {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

article.zakon a.poziv:hover,
section.dodaci a.poziv:hover,
article.zakon a.poziv:focus-visible,
section.dodaci a.poziv:focus-visible {
  color: var(--warm);
  text-decoration-color: currentColor;
}

/* Who cites an article: a line under its text in the register of the notes, naming
   each citing law and its articles, every number a link to the citing article. Under
   the versions table the same line names the laws that cite the law at all. */
p.pozivanja {
  margin: -2px 0 10px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}

footer.podrijetlo p.pozivanja {
  margin: 14px 0 0;
  font-size: 13.5px;
}

p.pozivanja a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 0.18em;
}

p.pozivanja a:hover,
p.pozivanja a:focus-visible {
  color: var(--warm);
  text-decoration-color: currentColor;
}

div.alati {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  align-items: center;
  justify-content: space-between;
}

/* A link into the law names a division, an article, a stavak or a točka, or what
   follows the law on the page, and what it names is marked by a rule down its left
   edge, standing in the gutter so the text does not move. The mark shows where the
   reader landed and how far it reaches, and is wanted only while they are with it: the
   script marks the block as left once it has been on the screen and scrolled off it,
   and the rule goes, while the address keeps its fragment. A page without the script
   keeps the rule until the reader follows another link. The rule is a quiet gray, a
   place and not a control. */
div.dio:target:not(.napusten),
section.dodaci:target:not(.napusten),
footer.podrijetlo:target:not(.napusten),
section.clanak:target:not(.napusten),
section.clanak:has(> h4.clanak:target):not(.napusten),
p.stavak:target:not(.napusten),
p.tocka:target:not(.napusten) {
  margin-left: -16px;
  padding-left: 13px;
  border-left: 3px solid var(--landed);
}

p.tocka:target:not(.napusten) { margin-left: calc(1.6em - 16px); }

/* A stavak's točke and podstavci are not inside its paragraph but follow it, up to
   the next stavak, and the rule runs on down them: each draws its stretch of it at the
   stavak's edge, whatever its own indent, reaching up over the gap above it. */
p.stavak:target:not(.napusten) ~ :not(p.stavak, p.stavak:target ~ p.stavak ~ *) {
  position: relative;
}

p.stavak:target:not(.napusten) ~ :not(p.stavak, p.stavak:target ~ p.stavak ~ *)::before {
  content: "";
  position: absolute;
  top: -8px;
  bottom: 0;
  left: calc(-16px - var(--uvlaka, 0px));
  width: 3px;
  background: var(--landed);
}

/* The words a search hit matched in the block it led to, under the same highlighter
   as in the results. */
mark.pogodak {
  padding: 0 2px;
  border-radius: 2px;
  background: var(--hit);
  color: inherit;
}

/* The block a table of contents entry names is handed the focus, so that the keys
   that scroll go on scrolling the law rather than the list. It is the rule down its
   left edge that says where the reader landed; a focus ring as well would box a whole
   article. */
main [tabindex="-1"]:focus-visible { outline: none; }

/* Both bars stand over the top of the page, so what is jumped to is placed under
   them and not behind them. The line kontekst.js reads the reader's place at stands a
   pixel under this offset, and moves with it. */
div.dio,
section.dodaci,
footer.podrijetlo,
section.clanak,
h2.dio,
h3.naslov,
h4.clanak,
p.stavak,
p.tocka { scroll-margin-top: calc(var(--top-bar) + 49px); }

p.proza,
p.stavak,
p.tocka,
p.podstavak { margin: 0 0 8px; }

p.tocka { --uvlaka: 1.6em; margin-left: var(--uvlaka); }
p.podstavak { --uvlaka: 3.2em; margin-left: var(--uvlaka); }

/* Apparatus, not law: the notes »Narodne novine« print in a reprint of their own, and
   the notes this project writes about what an act or a court did. They read as a
   remark on the text and not as the text. */
p.napomena,
p.note {
  font-size: 13.5px;
  color: var(--muted);
}

/* What stands where a provision was deleted or struck down: a block on the surface
   colour, the word in the text face and the note under it. No border and no icon --
   it is apparatus, and the law is what has the reader's attention. */
div.tombstone {
  margin: 4px 0 10px;
  padding: 10px 14px;
  background: var(--surface);
}

div.tombstone p { margin: 0; }
div.tombstone p.proza { font-weight: 600; }
div.tombstone p.note { margin-top: 4px; }

aside.deferred,
aside.reaching,
aside.misprint,
aside.struck,
aside.annotation {
  margin: 8px 0 10px;
  padding-left: 12px;
  border-left: 2px solid var(--rule);
}

aside.deferred p,
aside.reaching p,
aside.misprint p,
aside.struck p,
aside.annotation p { margin: 0; }

blockquote {
  margin: 6px 0 8px 1.6em;
  color: var(--muted);
}

blockquote.deferred,
blockquote.reaching,
blockquote.misprint {
  margin: 6px 0 0;
  font-size: 15px;
}

/* The provision as it stood before the act whose order was dated later. Muted like the
   instruments' own quotations beside it, but this one holds the law's own paragraphs and
   headings, so they keep the spacing and the weight they have in the text. */
blockquote.prijasnji,
blockquote.privremeni {
  margin: 6px 0 8px;
  font-size: 15px;
  color: var(--muted);
}

aside.deferred blockquote.prijasnji p,
aside.deferred blockquote.privremeni p { margin: 6px 0; }
aside.deferred blockquote.prijasnji p:first-child,
aside.deferred blockquote.privremeni p:first-child { margin-top: 0; }
aside.deferred blockquote.prijasnji h3,
aside.deferred blockquote.prijasnji h4,
aside.deferred blockquote.privremeni h3,
aside.deferred blockquote.privremeni h4 {
  margin: 6px 0;
  font-size: inherit;
  font-weight: 600;
}
aside.deferred blockquote.prijasnji h3:first-child,
aside.deferred blockquote.prijasnji h4:first-child,
aside.deferred blockquote.privremeni h3:first-child,
aside.deferred blockquote.privremeni h4:first-child { margin-top: 0; }

/* The second sentence of such a record, the one standing over the act's own clause, or
   over the clause ending a decree that reached a provision standing after the law: it
   opens a block of its own and needs the space the reset takes off. The old text stands
   between the two sentences where there is any, and the two follow one another where the
   act put the provision in and nothing stood there before. */
aside.deferred blockquote.prijasnji + p.note,
aside.deferred blockquote.privremeni + p.note,
aside.deferred p.note + p.note,
aside.reaching blockquote.reaching + p.note { margin-top: 8px; }

article.zakon i,
section.dodaci i { font-style: italic; }

/* Part of an act the gazette printed as an image and not as words: a score, a drawing,
   a diagram, a formula inside a sentence. The version carries the image itself, at
   whatever size NN set it, so it is held to the measure and never pushes the text
   sideways. A formula standing in a line of prose keeps its line. */
article.zakon img,
article.izmjene img,
section.dodaci img {
  max-width: 100%;
  height: auto;
}

/* A form printed with the law leaves its blanks as long runs of dots or underscores,
   one unbroken word wider than a phone. Such a word breaks where the line ends. */
article.zakon,
article.izmjene,
section.dodaci {
  overflow-wrap: break-word;
}

article.zakon table,
article.izmjene table,
section.dodaci table {
  width: 100%;
  border-collapse: collapse;
  margin: 6px 0 10px;
  font-size: 14.5px;
}

article.zakon td,
article.zakon th,
section.dodaci td,
section.dodaci th {
  border: 1px solid var(--rule);
  padding: 5px 8px;
  text-align: left;
  vertical-align: top;
}

/* An appendix printed with the law: a form, a table, a list of areas. It is part of
   the text and is deliberately not in the table of contents, which lists what a
   reader navigates by. */
h2.dodatak {
  margin: 36px 0 10px;
  font-size: 17px;
  font-weight: 700;
}

/* The provisions the amending acts kept for themselves, after the law under one
   heading of their own. */

section.dodaci { margin-top: 44px; }

/* Our own headings: the two below the law, and the label over an appendix the act
   headed with nothing, which without one read as part of the article above it. */
h2.prilog,
section.dodaci > h2,
footer.podrijetlo > h2 {
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule);
  font: 600 12px/1.5 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* The label stands inside the law and opens away from the article above it, where the
   other two open a block of their own. */
h2.prilog { margin-top: 44px; }

section.prijelazne { margin-top: 18px; }

h2.akt {
  margin: 18px 0 8px;
  font-size: 15px;
  font-weight: 600;
}

section.prijelazne div.clanak { margin-bottom: 12px; }

section.prijelazne h4.clanak {
  font-size: 15px;
  margin: 10px 0 6px;
}

/* Where the text came from: every version of the law, and what the text is not. */

footer.podrijetlo {
  margin-top: 44px;
  font-size: 14px;
}

table.verzije {
  width: 100%;
  border-collapse: collapse;
}

table.verzije th {
  padding: 6px 5px;
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

/* The first header row names what the columns are about, the act and then the text
   it produced, and a wider gutter before the text's first column keeps the two apart
   in every row. */
table.verzije tr.skupine th { padding-bottom: 0; border-bottom: 0; }
table.verzije th.tekst,
table.verzije td.tekst { padding-left: 22px; }

/* A row is a line: every cell holds to one; the widest row a law can have -- a marked
   day at both ends of the range, a three-figure count -- fits the measure so. The one
   cell let wrap is the kind of act, which the longest kind, a court's decision, can
   push past it. */
table.verzije td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  white-space: nowrap;
}

table.verzije td:first-child {
  font-family: var(--font-mono);
  font-size: 13px;
}

table.verzije td.vrsta { white-space: normal; }
table.verzije .br { text-align: right; }
table.verzije tr.trenutna td { background: var(--tint); font-weight: 500; }

/* What came before the law's first version: one line of prose across the table, in
   the muted type of the note under it rather than the issue column's. */
table.verzije tr.prije td {
  font-family: var(--font);
  font-size: 13px;
  color: var(--muted);
  white-space: normal;
}

/* Each day of the range is unbroken, so where a narrow screen lets the column wrap it
   breaks at the dash and nowhere else. */
table.verzije td.raz .dan { white-space: nowrap; }

/* The note under a table whose day of effect was counted rather than read. */
footer.podrijetlo p.biljeska,
article.izmjene p.biljeska {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--muted);
}

/* The field that opens the page of what changed since a day, at the head of the list
   of those pages. A label, the day in the site's field style, and a solid button;
   `dan.js` shows it and puts the picker on it. */
form.na-dan {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin-top: 16px;
}

form.na-dan label {
  font-size: 13px;
  color: var(--muted);
}

form.na-dan input {
  padding: 6px 10px;
  border: 1px solid var(--rule);
  background: var(--bg);
  font: inherit;
  font-size: 14px;
  color: var(--text);
}

form.na-dan input { width: 8.5em; }

form.na-dan input:focus-visible { outline: none; border-color: var(--accent); }

form.na-dan > button {
  border: 0;
  background: var(--solid);
  color: var(--on-solid);
  padding: 7px 14px;
  font: 600 13.5px var(--font);
  cursor: pointer;
}

/* The way to the law's history under the versions table: the page of every text each
   article has had, and the page of what changed since any day. */
footer.podrijetlo p.veze {
  margin: 14px 0 0;
  font-size: 14px;
}

footer.podrijetlo p.veze a { font-weight: 500; }

/* The note that closes the block, what the text is and what may be done with it. It
   is the last word before the site's footer, which carries only the links, and a
   hairline sets it off from what stands above: the versions on the law page, the last
   article on the pages that carry the note alone. */
footer.podrijetlo p.napomena {
  margin: 18px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
}

/* A day's calendar, the one `kalendar.js` puts on a field: the calculator's days and
   the field of what changed since a day. It is drawn into a wrapper beside the field,
   hung under the field or over it and over whatever stands there.

   The calendar is Vanilla Calendar Pro's, laid out by its own stylesheet, which the
   page loads beside this one, and colored here in the site's tokens: its colors are
   variables it reads, set on the wrapper for both of its themes, the script turning it
   to the theme the page is in so that its arrows, an image of their own, follow too.
   Its days the library marks as a weekend take the warm hue the site has beside its
   accent, and the accent where picked, as every other day does. It floats as the
   site's other floating things do, on their fill and with their shadow, and its
   buttons take the site's type. */
div.kalendar {
  position: absolute;
  z-index: 30;
  font-family: var(--font);
  --vc-bg: var(--raised);
  --vc-color: var(--text);
  --vc-focus-outline-color: var(--accent);
  --vc-header-color: var(--text);
  --vc-title-color: var(--text);
  --vc-title-color-hover: var(--muted);
  --vc-title-color-disabled: color-mix(in srgb, var(--muted) 40%, var(--raised));
  --vc-week-day-color: var(--muted);
  --vc-week-day-color-hover: var(--text);
  --vc-week-day-off-color: var(--warm);
  --vc-week-day-off-color-hover: var(--warm-strong);
  --vc-months-years-bg: var(--raised);
  --vc-months-years-bg-hover: var(--surface);
  --vc-months-years-bg-selected: var(--solid);
  --vc-months-years-color: var(--text);
  --vc-months-years-color-selected: var(--on-solid);
  --vc-months-years-color-disabled: color-mix(in srgb, var(--muted) 40%, var(--raised));
  --vc-date-bg: var(--raised);
  --vc-date-color: var(--text);
  --vc-date-color-hover: var(--text);
  --vc-date-bg-hover: var(--surface);
  --vc-date-hover-bg: var(--surface);
  --vc-date-hover-edge-bg: var(--rule);
  --vc-date-disabled-color: color-mix(in srgb, var(--muted) 40%, var(--raised));
  --vc-date-outside-color: var(--muted);
  --vc-date-today-bg: var(--tint);
  --vc-date-today-color: var(--accent);
  --vc-date-today-outside-color: var(--muted);
  --vc-date-selected-bg: var(--solid);
  --vc-date-selected-color: var(--on-solid);
  --vc-date-selected-outside-bg: var(--tint-edge);
  --vc-date-selected-outside-color: var(--text);
  --vc-date-weekend-color: var(--warm);
  --vc-date-weekend-bg-hover: var(--warm-tint);
  --vc-date-weekend-hover-bg: var(--warm-tint);
  --vc-date-weekend-hover-edge-bg: var(--warm-edge);
  --vc-date-weekend-today-color: var(--warm);
  --vc-date-weekend-selected-bg: var(--solid);
  --vc-date-weekend-selected-color: var(--on-solid);
  --vc-date-weekend-disabled-color: color-mix(in srgb, var(--muted) 40%, var(--raised));
  --vc-date-weekend-today-disabled-color: color-mix(in srgb, var(--muted) 40%, var(--raised));
  --vc-date-weekend-disabled-outside-color:
    color-mix(in srgb, var(--muted) 40%, var(--raised));
  --vc-date-weekend-outside-bg: var(--raised);
  --vc-date-weekend-outside-bg-hover: var(--surface);
  --vc-date-weekend-outside-hover-bg: var(--surface);
  --vc-date-weekend-outside-color: var(--muted);
  --vc-date-weekend-outside-color-hover: var(--text);
  --vc-date-weekend-today-outside-color: var(--muted);
}

div.kalendar[hidden] { display: none; }
div.kalendar .vc { box-shadow: var(--raised-shadow); }
div.kalendar button { font-family: inherit; }

/* A day a new text took effect on: a dot under the number, its title naming the issue
   that made it. */
div.kalendar [data-oznaka] [data-vc-date-btn] { position: relative; }

div.kalendar [data-oznaka] [data-vc-date-btn]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  transform: translateX(-50%);
}

div.kalendar [data-oznaka][data-vc-date-selected] [data-vc-date-btn]::after {
  background: var(--on-solid);
}

/* The field of what changed since a day hangs its calendar from its left edge: under
   it at the head of the list of those pages, and over it at the foot of the pages
   under the list, where there is no room below. */
form.na-dan div.polje { position: relative; }

form.na-dan div.kalendar {
  bottom: 100%;
  left: 0;
  margin-bottom: 4px;
}

header form.na-dan div.kalendar {
  top: 100%;
  bottom: auto;
  margin: 4px 0 0;
}

/* What a page says about itself where it has to say something: that this text has
   been superseded, or that the law no longer stands. */
div.traka {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  align-items: center;
  margin: 26px 0 0;
  padding: 10px 14px;
  border: 1px solid var(--accent);
  background: var(--bg);
  font-size: 14px;
}

div.traka a { font-weight: 600; }

/* The banner's links, kept together at its end: what changed since this text, and
   the text in force. */
div.traka span.veze {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}

/* A change page: what one act did to the law, article by article, the text before and
   after set as a redline in the law's own paragraphs. It stands in the law's measure
   and reads like the law, with the head of the law page over it. */

article.izmjene { max-width: var(--measure); }

header.izmjene-glava {
  margin: 26px 0 0;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rule);
}

header.izmjene-glava p.zakon-ime {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 600;
}

header.izmjene-glava h1 {
  margin: 0 0 8px;
  font-size: 28px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
}

header.izmjene-glava p.zbroj { margin: 0 0 6px; }

/* What the two numbers on every heading below are, which is the one thing the page
   has to say about how to read it. */
header.izmjene-glava p.uputa {
  margin: 0 0 12px;
  font-size: 13.5px;
  color: var(--muted);
}

header.izmjene-glava p.putovi {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}

header.izmjene-glava p.putovi a { font-weight: 500; }

section.promjena {
  margin-top: 28px;
  scroll-margin-top: calc(var(--top-bar) + 16px);
}

section.promjena h4.clanak {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 0 0 8px;
}

section.promjena h4.clanak a { color: var(--text); text-decoration: none; }

section.promjena .vrsta,
section.promjena .nalog {
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
}

section.promjena .vrsta {
  padding: 1px 7px;
  border: 1px solid var(--rule);
  border-radius: 3px;
}

section.promjena:target h4.clanak a { text-decoration: underline; }

/* What the act took out and what it put in. The tint carries the meaning and is never
   taken off: a block shown without it was the one thing a reader could not account for.
   The strike is drawn in its own darker tone and at two pixels, because at the body's
   15px a hairline across four words does not read as a strike at all. */
article.izmjene del,
article.izmjene ins {
  text-decoration: none;
  padding: 0 1px;
  border-radius: 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

article.izmjene del {
  background: var(--del-bg);
  text-decoration: line-through;
  text-decoration-color: var(--del-line);
  text-decoration-thickness: 2px;
}

article.izmjene ins { background: var(--ins-bg); }

/* A block that is wholly the change -- a paragraph the act struck or brought in --
   wears a bar down its side in the same hue as the words, so its extent is one glance
   and not a reading. The bar hangs in the margin, which is what keeps the law's own
   indentation. Apparatus never wears one: the marker left where a provision was
   deleted and the note on a ruling stand as the version prints them, being the
   pipeline's note on what happened and not law that came or went. */
article.izmjene .izbrisano,
article.izmjene .dodano {
  padding-left: 10px;
  margin-left: -13px;
}

article.izmjene .izbrisano { border-left: 3px solid var(--del-edge); }
article.izmjene .dodano { border-left: 3px solid var(--ins-edge); }

article.izmjene p.tocka.izbrisano,
article.izmjene p.tocka.dodano { margin-left: calc(1.6em - 13px); }

article.izmjene p.podstavak.izbrisano,
article.izmjene p.podstavak.dodano { margin-left: calc(3.2em - 13px); }

article.izmjene h3.naslov { margin-top: 0; }

/* The legend, which says what the two colours are in the colours themselves. It sets
   its own samples at the size of the sentence around it rather than the law's. */
header.izmjene-glava p.legenda {
  margin: 0 0 12px;
  font-size: 13.5px;
  color: var(--muted);
}

header.izmjene-glava p.legenda del,
header.izmjene-glava p.legenda ins { color: var(--text); }

article.izmjene footer.podrijetlo p.koraci {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 20px;
  margin: 0;
  font-weight: 500;
}

article.izmjene footer.podrijetlo p.koraci a:last-child:not(:first-child) {
  margin-left: auto;
}

/* The page of what changed since a version. Its blocks are the change page's, with the
   acts that touched the article in between where the change page has the act's own
   provision. */
section.promjena .akti {
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
}

section.promjena .akti a { font-family: var(--font-mono); font-size: 12.5px; }

article.izmjene header.izmjene-glava form.na-dan { margin-top: 14px; }

article.promjene-popis table.verzije { margin-top: 22px; }


article.izmjene footer.podrijetlo p.putovi {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}

article.izmjene footer.podrijetlo p.putovi a { font-weight: 500; }

/* The history of an article: its texts stacked oldest first, each under a line naming
   the act that made it, what the act did and the days the text stood. The first text
   is set as the law prints it and every later one as a redline against the one before,
   so the blocks read like the change page from the second on. */
section.promjena div.inacica {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px dashed var(--rule);
}

section.promjena h5.verzija {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
}

section.promjena h5.verzija a { text-decoration: none; }

section.promjena h5.verzija > a:first-child {
  font-family: var(--font-mono);
  font-size: 13.5px;
  color: var(--text);
}

section.promjena h5.verzija a.vrsta { color: var(--muted); }
section.promjena h5.verzija a.vrsta:hover { color: var(--warm); }

section.promjena .kada {
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
}

/* The landing page.

   It opens on a masthead: the title and a line under it at the left, and at the right
   the three figures for what the site holds with the day they are current to under
   them. The halves are aligned at the top, the title level with the figures, and
   no rule closes the masthead: the headings the two columns open with carry one each,
   and that is the line the content begins at. Nothing is centred and nothing is a band,
   so the page reads as an index that begins at the top, and the laws are in the first
   screen. */

header.uvod {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px 40px;
  padding: 40px 0 22px;
}

header.uvod h1 {
  margin: 0 0 6px;
  font-size: 30px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
}

header.uvod p.geslo {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--muted);
}

/* What the site holds, in three figures, each in a hue of its own, and under them the
   day those figures are current to, one short line at the figures' right edge. */
p.brojke {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin: 3px 0 0;
  font-size: 13.5px;
  color: var(--muted);
}

p.svjezina {
  margin: 6px 0 4px;
  font-size: 13px;
  line-height: 1.4;
  text-align: right;
  color: var(--muted);
}

p.svjezina time {
  margin-left: 6px;
  font: 500 13px/1.4 var(--font-mono);
  color: var(--text);
}

p.brojke b {
  margin-right: 6px;
  font: 600 20px/1 var(--font-mono);
  letter-spacing: -0.02em;
  color: var(--accent);
}

p.brojke span:nth-child(2) b { color: var(--warm); }
p.brojke span:nth-child(3) b { color: var(--green); }

/* Under the masthead, two columns: the laws on the left, and on the right the form
   that opens an older version and under it the law of the day, both of which need a
   script, and last the row that leads to the calculator, which does not. Where the
   column has nothing shown, the laws have the width. */
section.stupci {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 40px;
  margin-top: 32px;
}

div.desno > * + * { margin-top: 30px; }

div.desno:not(:has(> :not([hidden]))) { display: none; }

section.stupci h2 {
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule);
  font: 600 12px/1.5 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* An older version: the law's field with the list of laws under it, and under that the
   law's versions. Hidden in the built page and shown by `dan.js`. */
div.na-dan form {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px;
}

div.na-dan div.birac {
  position: relative;
  flex-basis: 100%;
}

div.na-dan input {
  width: 100%;
  padding: 9px 34px 9px 12px;
  border: 1px solid var(--rule);
  border-radius: 5px;
  background: var(--surface);
  font: inherit;
  font-size: 15px;
  color: var(--text);
}

div.na-dan input:focus-visible { outline: none; border-color: var(--accent); }

/* A title the site has no law under. */
div.na-dan input.nema { border-color: #d0453c; }


div.na-dan button {
  border: 0;
  border-radius: 5px;
  background: var(--solid);
  color: var(--on-solid);
  padding: 9px 18px;
  font: 600 14px var(--font);
  cursor: pointer;
}

div.na-dan button:hover { background: var(--accent-strong); }

div.na-dan ul.ponuda {
  left: 0;
  right: 0;
  max-height: 264px;
  font-size: 14px;
}

div.na-dan ul.ponuda li {
  padding: 5px 12px;
  white-space: normal;
}

/* A law the panel has no older version of: on the list, so that a reader who looks
   for it sees that the site has the law, but greyed and beyond the pointer, with the
   reason at the row's end. */
div.na-dan ul.ponuda li.bez-izmjena {
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: var(--muted);
  cursor: default;
  background: none;
}

div.na-dan ul.ponuda li.bez-izmjena[hidden] { display: none; }
div.na-dan ul.ponuda li.bez-izmjena:hover { background: none; }

div.na-dan ul.ponuda li.bez-izmjena small {
  margin-left: auto;
  font: 11.5px/1.6 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.8;
  white-space: nowrap;
}

/* The versions of the law named, under the fields: a row a version, newest first, the
   days it stood and the issue that made it as the way to that text, and after them, on
   every row but the newest, the way to what changed from it to today. The text in force
   is in the accent. A law of many texts is a long column, so the list scrolls past
   eight or so rows. Filled by `dan.js`. */
div.na-dan ul.razdoblja {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  max-height: 296px;
  overflow-y: auto;
  border: 1px solid var(--rule);
  border-radius: 5px;
  background: var(--surface);
  font-size: 13.5px;
}

div.na-dan ul.razdoblja li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

/* Where the days a version stood leave the link to its changes no room, the link takes
   a line of its own rather than the list a scrollbar. The newest row's last column
   stands empty, so it has nothing to put on a second line. */
div.na-dan ul.razdoblja li.trenutna { flex-wrap: nowrap; }

div.na-dan ul.razdoblja li + li { border-top: 1px solid var(--rule); }
div.na-dan ul.razdoblja li:hover { background: var(--tint); }

div.na-dan ul.razdoblja a.tekst {
  flex: 1;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 10px;
  color: var(--text);
  text-decoration: none;
}

div.na-dan ul.razdoblja li.trenutna a.tekst { color: var(--warm); font-weight: 500; }
div.na-dan ul.razdoblja span.raz { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* The issue is a column of its own: tabular digits and the width the widest issue
   takes, so the »NN« of every row stands over the one below it. */
div.na-dan ul.razdoblja span.nn {
  min-width: 7.2em;
  color: var(--muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

div.na-dan ul.razdoblja .promjene {
  flex: none;
  margin-left: auto;
  min-width: 7.5em;
  padding: 6px 10px 6px 0;
  text-align: right;
  white-space: nowrap;
  font-size: 12.5px;
  color: var(--muted);
  text-decoration: none;
}

div.na-dan ul.razdoblja a.promjene:hover { color: var(--warm); text-decoration: underline; }
div.na-dan ul.razdoblja span.promjene { visibility: hidden; }

/* One card in two places: the law of the day at the foot of the column beside the laws,
   which `zakon-dana.js` fills and which is hidden until it does, and the archive of every
   text in force at the head of the listing, which is a file and stands whatever the
   reader has. A frame, a title line, and sentences smaller than the page's under that;
   the law of the day has a label in the warm hue over its title, which is a link. What
   only the archive's card has stands with the listing, whose head it is part of. */
div.zakon-dana,
div.arhiva {
  padding: 16px 20px 18px;
  border: 1px solid var(--rule);
  border-radius: 5px;
  background: var(--surface);
}

/* The label is the small mono eyebrow the column beside the laws sets its headings in,
   in the warm hue and without the rule under it. */
div.zakon-dana h2 {
  margin: 0 0 10px;
  padding-bottom: 0;
  border-bottom: 0;
  font: 600 12px/1.5 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--warm);
}

div.zakon-dana p.naslov-dana,
div.arhiva h2.naslov-arhive {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}

div.zakon-dana p.naslov-dana a { color: var(--text); text-decoration: none; }
div.zakon-dana p.naslov-dana a:hover { color: var(--warm-strong); }

div.zakon-dana p.o-zakonu,
div.arhiva p.o-arhivi {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--muted);
}

/* The way to the calculator, last in the column beside the laws: one row in the frame
   of the older versions' field, the whole of it a link, with a chevron at its end. */
div.kalkulator a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 12px;
  border: 1px solid var(--rule);
  border-radius: 5px;
  background: var(--surface);
  font-size: 15px;
  color: var(--text);
  text-decoration: none;
}

div.kalkulator a::after { content: "\203A"; color: var(--muted); }
div.kalkulator a:hover { border-color: var(--warm); color: var(--warm-strong); }
div.kalkulator a:hover::after { color: var(--warm-strong); }

/* The calculator, on its page without a frame: a row of fields for each claim, and
   under them the three amounts and the pieces of the period in a table, every other
   row tinted and the total under a rule. The table's rules name its class, since the
   calendars in the box are tables too. Hidden until `kamate.js` uncovers it. */
div.okvir-kalkulatora { margin: 24px 0 8px; }

/* The rows share one grid of columns, each row laid on it, so that a field stands over
   the same field in every row, and the labels over the first row head them all; the
   other rows keep theirs for a screen reader alone. A row is the principal, the two
   days, the name, the box of the relationship and the button that takes the row out,
   the principal and the days as wide as what is typed into them and the name taking
   the rest, never less than its placeholder needs, for which the box goes a little
   past the page's measure. The grid is the same for one claim and for several, the
   button's column standing empty with one, so that a claim added moves nothing over
   it. */
div.okvir-kalkulatora div.redovi {
  display: grid;
  grid-template-columns: 140px 146px 146px minmax(168px, 1fr) auto 28px;
  gap: 8px 12px;
}

section.stranica.kamate { max-width: none; }
div.okvir-kalkulatora { max-width: calc(var(--measure) + 30px); }

/* The caveat under the page's intro: the calculation is informative. A line in the
   text's own color behind a thin rule in the amber the site gives what is not
   authoritative, so that it is read and not skipped as fine print, and not taken for a
   warning either. On paper the copy at the foot of the result stands in its place,
   next to the number it is about. */
section.kamate p.ograda {
  max-width: var(--measure);
  margin: 16px 0 0;
  padding: 1px 0 1px 14px;
  border-left: 2px solid var(--past-edge);
  font-size: 15.5px;
}

section.kamate p.ograda.tisak { display: none; }

div.okvir-kalkulatora div.redak {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: end;
  scroll-margin: calc(var(--top-bar) + 12px) 0 12px;
}

div.okvir-kalkulatora div.redovi:not(.vise) button.ukloni { display: none; }

div.okvir-kalkulatora div.redovi.vise div.redak:not(:first-child) .polje > :is(label, .oznaka) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

div.okvir-kalkulatora div.redovi.vise div.redak:not(:first-child) .oznaka button {
  display: none;
}

/* A field with its label over it, the name's saying that it may be left empty. A day's
   field has its calendar in a wrapper after it, hung under the field and over whatever
   follows in the box: from the field's left edge, and from its right edge for the day
   of payment, nearer the box's end. Hung from the box's outer edge of either field, it
   fits even the narrowest phone. */
div.okvir-kalkulatora div.polje {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

div.okvir-kalkulatora div.polje > :is(label, .oznaka) {
  margin-bottom: 4px;
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
}

div.okvir-kalkulatora span.oznaka button.objasni { margin-block: -2px; }


div.okvir-kalkulatora div.kalendar {
  top: 100%;
  left: 0;
  margin-top: 4px;
}

div.okvir-kalkulatora div.placanje div.kalendar { left: auto; right: 0; }

div.okvir-kalkulatora div.polje input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--rule);
  border-radius: 5px;
  background: var(--surface);
  font: inherit;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

div.okvir-kalkulatora div.polje input:focus-visible { outline: none; border-color: var(--accent); }
div.okvir-kalkulatora div.polje input[aria-invalid] { border-color: var(--error); }

/* The button that takes a row out, quiet until pointed at. */
div.okvir-kalkulatora button.ukloni {
  display: grid;
  place-items: center;
  width: 28px;
  height: 42px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 5px;
  background: none;
  color: var(--muted);
  cursor: pointer;
}

div.okvir-kalkulatora button.ukloni svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.7;
  stroke-linecap: round;
}

div.okvir-kalkulatora button.ukloni:hover { color: var(--del-line); }

div.okvir-kalkulatora button.ukloni:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* What keeps a row from being reckoned, in a short line under it. */
div.okvir-kalkulatora div.redak p.poruka {
  grid-column: 1 / -1;
  margin: 6px 0 2px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--error);
}

/* The kind of relationship: a box ticked for a commercial contract, drawn as the
   fields are and filled with a check mark when ticked. Its margins make it as tall as
   a field, 15px type at the body's 1.6 and 18px of padding and border, so that it
   stands level with the fields' middle and its label with theirs. The checkbox itself lies unseen over the box and takes the click and
   the keyboard. */
div.okvir-kalkulatora span.kvacica {
  position: relative;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin: 10px 0;
  border: 1px solid var(--rule);
  border-radius: 5px;
  background: var(--surface);
  color: var(--on-solid);
}

div.okvir-kalkulatora span.kvacica input {
  position: absolute;
  inset: -1px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

div.okvir-kalkulatora span.kvacica svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  visibility: hidden;
}

div.okvir-kalkulatora span.kvacica:hover { border-color: var(--accent); }

div.okvir-kalkulatora span.kvacica:has(input:checked) {
  border-color: var(--solid);
  background: var(--solid);
}

div.okvir-kalkulatora span.kvacica:has(input:checked) svg { visibility: visible; }

div.okvir-kalkulatora span.kvacica:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

div.okvir-kalkulatora div.polje.odnos label { cursor: pointer; }

/* The box's label stands over it in two lines, which keeps its column narrow: the
   second line level with the other fields' labels and the first above them. The lines
   are set closer than the body's, and the room that takes from under the second line
   is given back, so that it keeps the other labels' baseline. On a narrow screen the
   label is one line beside the box. */
div.okvir-kalkulatora div.polje.odnos > .oznaka {
  padding-bottom: 0.15em;
  line-height: 1.3;
}

@media (max-width: 900px) {
  div.okvir-kalkulatora div.polje.odnos > .oznaka { padding-bottom: 0; line-height: inherit; }
  div.okvir-kalkulatora div.polje.odnos label br { display: none; }
}

/* Under the rows, why the day of payment stops short where it does, the button that
   adds a claim with the line that puts back one taken out beside it, and while there
   is nothing to compute, the rates in force with a calculation to look at. */
div.okvir-kalkulatora p.nedostaje {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--warm-strong);
}

div.okvir-kalkulatora p.dodaj {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: 14px 0 0;
  font-size: 13.5px;
  color: var(--muted);
}

div.okvir-kalkulatora p[hidden],
div.okvir-kalkulatora p.dodaj [hidden] { display: none; }

div.okvir-kalkulatora p.dodaj button {
  padding: 7px 12px;
  border: 1px solid var(--rule);
  border-radius: 5px;
  background: var(--surface);
  font: 500 14px/1.4 var(--font);
  color: var(--text);
  cursor: pointer;
}

div.okvir-kalkulatora p.dodaj button:hover { border-color: var(--accent); color: var(--accent); }

div.okvir-kalkulatora span.uklonjena button {
  margin-left: 6px;
  padding: 4px 10px;
  font-size: 13.5px;
}

div.okvir-kalkulatora p.prazno {
  margin: 22px 0 0;
  font-size: 14.5px;
  line-height: 1.5;
}

div.okvir-kalkulatora div.rezultat { margin-top: 26px; }

/* A table too wide for a narrow screen scrolls sideways in a box of its own, and the
   rest of the box stays put. */
@media screen and (max-width: 900px) {
  div.okvir-kalkulatora div.svitak { overflow-x: auto; }
}

/* The result leads with three amounts in a row, each under its name: the principal
   in grey, being what the reader typed, then the interest and the two together. Under
   them a sentence says the days and the period; the table after it is the working. */
div.okvir-kalkulatora dl.iznosi {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 40px;
  margin: 0 0 6px;
}

div.okvir-kalkulatora dl.iznosi dt {
  font-size: 13px;
  color: var(--muted);
}

div.okvir-kalkulatora dl.iznosi dd {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

div.okvir-kalkulatora dl.iznosi div.glavnica dd { font-weight: 500; color: var(--muted); }

div.okvir-kalkulatora p.razdoblje {
  margin: 0 0 14px;
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--muted);
}

div.okvir-kalkulatora table.obracun {
  border-collapse: collapse;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

div.okvir-kalkulatora table.obracun th {
  padding: 6px 14px 7px;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

/* The button in a heading that opens the rule behind the column, a ring with an "i",
   and the popover it opens: a card `kamate.js` hangs under the button, in the
   browser's top layer, which a click anywhere else or Esc closes, and which follows
   the button as the page scrolls: placed `absolute`, the top layer puts it against
   the document rather than the window. The button keeps the focus when the card
   closes, and it shows that the way it shows the pointer, not with the ring, which
   would stand there after every click. */
div.okvir-kalkulatora button.objasni {
  width: 16px;
  height: 16px;
  margin-left: 2px;
  padding: 0;
  border: 1px solid var(--muted);
  border-radius: 8px;
  background: none;
  font: 700 11px/1 var(--font);
  color: var(--muted);
  vertical-align: 1px;
  cursor: pointer;
}

div.okvir-kalkulatora button.objasni:hover,
div.okvir-kalkulatora button.objasni:focus-visible {
  outline: none;
  border-color: var(--accent);
  color: var(--accent);
}

div.objasnjenje {
  position: absolute;
  inset: auto;
  width: min(440px, calc(100% - 32px));
  margin: 0;
  padding: 14px 18px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--raised);
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.5;
  box-shadow: var(--raised-shadow-strong);
}

div.objasnjenje p { margin: 0; }
div.objasnjenje p + p { margin-top: 8px; }

div.okvir-kalkulatora table.obracun td {
  padding: 7px 14px;
  white-space: nowrap;
}

div.okvir-kalkulatora table.obracun tbody tr:nth-child(even) > * { background: var(--surface); }
div.okvir-kalkulatora table.obracun tr > :first-child { padding-left: 8px; }
div.okvir-kalkulatora table.obracun tr > :last-child { padding-right: 8px; }

div.okvir-kalkulatora .br { text-align: right; }

/* A piece reckoned at the last known rate carried past the table: the mark after the
   rate, and the line under the total that says why. */
div.okvir-kalkulatora tr.privremeno td { color: var(--past-text); }

div.okvir-kalkulatora tr.privremeno small {
  margin-left: 4px;
  font: 11.5px/1.6 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* What the period calls for, under the table: a provisional piece in the colors of
   a text not in force, and the rest in the colors of a note. */
div.okvir-kalkulatora ul.napomene {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

div.okvir-kalkulatora ul.napomene li {
  padding: 8px 12px;
  border: 1px solid var(--note-edge);
  border-radius: 5px;
  background: var(--note-bg);
  font-size: 13.5px;
  line-height: 1.5;
}

div.okvir-kalkulatora ul.napomene li + li { margin-top: 6px; }

/* Where the screen has the room the notes stand beside the table, as notes in a
   margin: small text, each pushed down by `kamate.js` to the first of the rows it is
   about, and those rows wear a thin, quiet rule a few pixels past their end, drawn as
   a page-colored shadow under a ruled one. The rule is the rows' alone: the note's
   place beside them already marks it as a note, and a rule on it as well would stand
   beside theirs as a second one. */
@media (min-width: 901px) {
  div.okvir-kalkulatora div.uz-tablicu {
    display: grid;
    grid-template-columns: auto minmax(0, 420px);
    gap: 0 36px;
    align-items: start;
  }

  div.okvir-kalkulatora div.uz-tablicu ul.napomene { margin: 0; }

  div.okvir-kalkulatora div.uz-tablicu ul.napomene li + li { margin-top: var(--pomak, 0); }

  div.okvir-kalkulatora div.uz-tablicu ul.napomene li,
  div.okvir-kalkulatora div.uz-tablicu ul.napomene li.privremeno {
    margin-top: var(--pomak, 0);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    font-size: 13px;
    color: var(--muted);
  }

  div.okvir-kalkulatora table.obracun tr.uz-napomenu > :last-child {
    box-shadow: 8px 0 var(--bg), 10px 0 var(--tint-edge);
  }

  div.okvir-kalkulatora table.obracun tr.uz-napomenu.privremeno > :last-child {
    box-shadow: 8px 0 var(--bg), 10px 0 var(--past-edge);
  }
}

div.okvir-kalkulatora ul.napomene li.privremeno {
  border-color: var(--past-edge);
  background: var(--past-bg);
  color: var(--past-text);
}

/* The site's mark and name under the result, which only paper shows. */
div.okvir-kalkulatora p.marka { display: none; }

/* The buttons under the result, drawn as the fields are. */
div.okvir-kalkulatora p.radnje {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 0;
}

div.okvir-kalkulatora p.radnje button {
  padding: 7px 12px;
  border: 1px solid var(--rule);
  border-radius: 5px;
  background: var(--surface);
  font: 500 14px/1.4 var(--font);
  color: var(--text);
  cursor: pointer;
}

div.okvir-kalkulatora p.radnje button:hover { border-color: var(--accent); color: var(--accent); }

/* The button that empties the form, quieter than the two before it: words alone. */
div.okvir-kalkulatora p.radnje button.novi {
  border-color: transparent;
  background: none;
  color: var(--muted);
}

div.okvir-kalkulatora p.radnje button.novi:hover { border-color: transparent; color: var(--accent); }

div.okvir-kalkulatora p.radnje button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* At the box's end under a rule, the rates now in force, and the whole table of rates
   folded: a line of text with a small arrowhead before it that turns down as the list
   opens. The table is drawn as the result's is, and the row today falls in is set in
   bold. */
div.okvir-kalkulatora p.vazece {
  margin: 28px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  font-size: 14.5px;
  line-height: 1.5;
}

div.okvir-kalkulatora details.stope { margin-top: 10px; }

div.okvir-kalkulatora details.stope summary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  list-style: none;
}

div.okvir-kalkulatora details.stope summary::-webkit-details-marker { display: none; }

div.okvir-kalkulatora details.stope summary::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-left: 2px;
  border-right: 1.5px solid currentcolor;
  border-bottom: 1.5px solid currentcolor;
  transform: rotate(-45deg);
  transition: transform 0.15s;
}

div.okvir-kalkulatora details.stope[open] summary::before { transform: rotate(45deg); }

div.okvir-kalkulatora details.stope summary:hover,
div.okvir-kalkulatora details.stope[open] summary { color: var(--text); }

div.okvir-kalkulatora details.stope summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

div.okvir-kalkulatora details.stope table { margin-top: 12px; }
div.okvir-kalkulatora details.stope tr.sada td { font-weight: 600; }

/* The rule over each stretch of the table, which wraps where the rows are narrower. */
div.okvir-kalkulatora details.stope tr.pravilo th {
  padding-top: 16px;
  font-weight: 500;
  white-space: normal;
  background: none;
}

div.okvir-kalkulatora table.obracun tfoot th,
div.okvir-kalkulatora table.obracun tfoot td {
  padding-top: 9px;
  border-top: 1px solid var(--rule);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

/* The line that says what the form held, for paper alone, and the table of several
   claims, which is paper's too: the rows of fields are that list on the screen. Each
   claim is called in its first column, which wraps. */
div.okvir-kalkulatora p.ulazi { display: none; }

@media screen {
  div.okvir-kalkulatora table.popis { display: none; }
}

div.okvir-kalkulatora table.popis .naziv {
  min-width: 7em;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Its headings stand at the foot of their row, one of them being two lines. */
div.okvir-kalkulatora table.popis th { vertical-align: bottom; }

/* Each claim's table under a line of its own, folded, the lines one under another
   between rules, with the arrowhead of the table of rates. */
div.okvir-kalkulatora div.trazbine { margin-top: 18px; }

div.okvir-kalkulatora details.trazbina { border-bottom: 1px solid var(--rule); }
div.okvir-kalkulatora details.trazbina:first-child { border-top: 1px solid var(--rule); }

div.okvir-kalkulatora details.trazbina summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 14px;
  padding: 9px 8px 9px 22px;
  position: relative;
  font-size: 14.5px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  list-style: none;
}

div.okvir-kalkulatora details.trazbina summary::-webkit-details-marker { display: none; }

div.okvir-kalkulatora details.trazbina summary::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 16px;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(-45deg);
  transition: transform 0.15s;
}

div.okvir-kalkulatora details.trazbina[open] summary::before { transform: rotate(45deg); }
div.okvir-kalkulatora details.trazbina summary:hover { background: var(--surface); }

div.okvir-kalkulatora details.trazbina summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* Every claim's name as wide as the widest, which the calculator measures, so that the
   descriptions start at the same place; a name wider than a third of the line wraps. */
div.okvir-kalkulatora details.trazbina summary span.koja {
  flex: none;
  width: var(--naziv);
  max-width: 33%;
  font-weight: 600;
}

div.okvir-kalkulatora details.trazbina summary span.opis { color: var(--muted); }
div.okvir-kalkulatora details.trazbina summary span.kamata { margin-left: auto; }

div.okvir-kalkulatora details.trazbina > p.razdoblje { margin: 6px 0 10px; }
div.okvir-kalkulatora details.trazbina > div.uz-tablicu { margin-bottom: 18px; }

/* A button clicked with a pointer is left without the focus ring, which it would
   otherwise keep: the one opening a rule shows it the way it shows the pointer. */
div.okvir-kalkulatora.misem :is(button, summary):focus-visible,
div.okvir-kalkulatora.misem span.kvacica:has(input:focus-visible) {
  outline: none !important;
}

div.okvir-kalkulatora.misem button.objasni:focus-visible:not(:hover) {
  border-color: var(--muted);
  color: var(--muted);
}

/* On a narrow screen each row is a small card of its own fields, every label over its
   field: the principal across the card, the two days side by side, the name across
   it, the box of the relationship with its label beside it rather than over it, and
   with several, the button that takes it out at the card's corner. */
@media screen and (max-width: 900px) {
  div.okvir-kalkulatora div.redovi,
  div.okvir-kalkulatora div.redovi.vise { display: block; }

  div.okvir-kalkulatora div.redak {
    position: relative;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px 12px;
    align-items: start;
  }

  div.okvir-kalkulatora div.redovi.vise div.redak {
    margin-bottom: 10px;
    padding: 12px;
    border: 1px solid var(--rule);
    border-radius: 6px;
  }

  div.okvir-kalkulatora div.redovi.vise div.redak:not(:first-child) .polje > :is(label, .oznaka):not(.skriveno) {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
  }

  div.okvir-kalkulatora div.redovi.vise div.redak:not(:first-child) .oznaka button {
    display: inline;
  }

  div.okvir-kalkulatora div.redak > :is(.glavnica, .naziv, .odnos) { grid-column: 1 / -1; }

  div.okvir-kalkulatora div.polje.odnos {
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }
  div.okvir-kalkulatora div.polje.odnos > .oznaka { margin: 0; font-size: 14px; }
  div.okvir-kalkulatora span.kvacica { order: -1; margin: 0; }

  div.okvir-kalkulatora div.redovi.vise button.ukloni {
    position: absolute;
    top: 6px;
    right: 6px;
    height: 30px;
  }

  div.okvir-kalkulatora div.redak p.poruka { margin: 0; }
  div.okvir-kalkulatora details.trazbina summary span.kamata { margin-left: 0; }
  div.okvir-kalkulatora details.trazbina summary span.koja {
    flex: initial;
    width: auto;
    max-width: none;
  }
}

/* Every published law, and the pages that are prose. */

p.uvodno {
  max-width: var(--measure);
  color: var(--muted);
}

/* The queue: the landing page's box of it and the whole of it under /zakoni/. One
   list serves both, each row carrying the law's place in the order the site takes
   them up -- written in the row and not counted by CSS, so a listing narrowed by the
   filter keeps the numbers the laws have. A law not yet consolidated is a row in grey
   with no link. */

/* The box takes what the window leaves under the masthead, so that a tall screen
   shows more laws rather than more background, and a short one keeps the thirteen or
   so rows it has room for. The cap is there because a box the height of a very tall
   monitor is a column and not a box. */
div.okvir {
  height: clamp(420px, calc(100dvh - 500px), 820px);
  overflow-y: auto;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--bg);
  overscroll-behavior: contain;
}

div.okvir:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Under a finger the box hands the drag on to the page once it is at either end, since
   the page has no other way to be dragged where the box fills the screen. */
@media (hover: none) {
  div.okvir { overscroll-behavior: auto; }
}

/* At the box's end on a touch screen, what fills it the first time; see `popis.js`. */
div.okvir button.jos {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  background: none;
  font: 500 14px/1.6 var(--font);
  color: var(--accent);
  cursor: pointer;
}

div.okvir button.jos[hidden] { display: none; }

ol.red-zakona {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* A row is a law's name and, at its end, the day it was last amended. The rows of the
   landing page's box are parted by a rule at half the strength of the site's, so that
   a box of fourteen rows does not read as ruled paper. */
ol.red-zakona li {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--rule) 50%, transparent);
  font-size: 14px;
}

ol.red-zakona li[hidden] { display: none; }

/* Every row is a link, so the name wears no rule under it; the warm tone under the
   pointer is what says it is one. */
ol.red-zakona a { font-weight: 500; text-decoration: none; }

ol.red-zakona li.u-pripremi { color: var(--muted); }
ol.red-zakona li.u-pripremi span { opacity: 0.7; }

ol.red-zakona li small {
  margin-left: auto;
  font: 11.5px/1.6 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.8;
  white-space: nowrap;
}

/* The day the law was last amended, in the same place on the row as the grey label
   the laws without one carry. */
ol.red-zakona li time {
  margin-left: auto;
  padding-left: 16px;
  font: 12px/1.6 var(--font-mono);
  color: var(--muted);
  white-space: nowrap;
}

/* The whole list is a page of its own, so its rows run to the page's own edges and
   have room to breathe. Here the name stands most of a page's width from its dates,
   and the eye keeps its row by the fill every second row carries rather than by a
   rule. The fill runs a little past the columns on either side, and the row's padding
   puts the text back where the columns are, so the headings over the list still stand
   over what they head. A row the filter hid takes no place in the count. */
ol.red-zakona.cijeli { margin-top: 22px; border-top: 1px solid var(--rule); }
ol.red-zakona.cijeli li {
  margin-inline: -10px;
  padding: 11px 10px;
  border-bottom: 0;
  font-size: 15px;
  gap: 6px;
}
ol.red-zakona.cijeli li:nth-child(even of :not([hidden])) { background: var(--surface); }

/* The listing's rows end in two columns, how many acts were applied to the law and
   the day of the last, each right-aligned under its heading in the row of orders. The
   headings are wider than what stands under them, so cell and heading take the same
   width, and the rows the same gap as the row of headings. */
ol.red-zakona.cijeli li data {
  margin-left: auto;
  font: 12px/1.6 var(--font-mono);
  color: var(--muted);
}
ol.red-zakona.cijeli li data + time { margin-left: 0; padding-left: 0; }
ol.red-zakona.cijeli li data, div.poredak span.stupac span.broj { flex: none; width: 92px; text-align: right; }
ol.red-zakona.cijeli li time, div.poredak span.stupac span.dan { flex: none; width: 108px; text-align: right; }

/* The orders a list can take, as a row of buttons over it, the one in force filled
   and carrying its direction. At the end of the row, what the day on every row is.
   Hidden in the built page and shown by `popis.js`, which makes the buttons. */
div.poredak {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
}

div.poredak + ol.red-zakona.cijeli { margin-top: 0; }
div.zaglavlje + div.poredak { margin-top: 22px; }
/* At the head of the row of orders over the box the field is one more pill, as tall
   as the buttons and as round, with the cross inside it. */
div.poredak form.filter { margin: 0 6px 0 0; }
div.poredak form.filter div.birac { flex: none; width: 190px; max-width: none; }

div.poredak form.filter input {
  padding: 3px 30px 3px 12px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font: 500 12.5px/1.6 var(--font);
  color: var(--text);
}

div.poredak form.filter input:focus-visible { outline: none; border-color: var(--accent); }

div.poredak form.filter .birac > button.ocisti {
  right: 4px;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  font-size: 16px;
  line-height: 22px;
}

/* The orders themselves, each named by the key it sorts the list by -- which is what
   tells them from the cross that empties the field, the one other button in the row and
   no pill of this kind. */
div.poredak button[data-kljuc] {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 11px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--bg);
  font: 500 12.5px/1.6 var(--font);
  color: var(--muted);
  cursor: pointer;
}

div.poredak button[data-kljuc]:hover {
  color: var(--accent);
  border-color: var(--accent);
}

div.poredak button[data-kljuc][aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-solid);
}

/* Which way round the order in force runs: an arrow down for its own first end, up
   for the other. */
div.poredak button i { font-style: normal; }
div.poredak button i.redom::before { content: "\2193"; }
div.poredak button i.obrnuto::before { content: "\2191"; }

/* What the columns at the end of every row are, at the end of the row. */
div.poredak span.stupac {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-left: auto;
  font: 11.5px/1.6 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

p.broj-zakona {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 13px;
  text-align: right;
}

/* The head of the listing: the title with a sentence under it and the field at its foot,
   and in the half those leave empty the card that offers the archive, level with the
   title and against the right edge, where the columns of the list end. The card spans
   all three rows and the sentence's row is the one that stretches, so the field stands
   at the foot of the head, next to the list it narrows, whatever the card's height
   comes to. Too narrow for two columns, the four stack in the order they are written:
   title, sentence, card, field. */
div.zaglavlje {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr auto;
  align-items: start;
  column-gap: 32px;
}

div.zaglavlje > h1 { grid-area: 1 / 1; }
div.zaglavlje > p.uvodno { grid-area: 2 / 1; margin: 0; max-width: 34em; }
div.zaglavlje > form.filter { grid-area: 3 / 1; }

div.zaglavlje > div.arhiva {
  grid-area: 1 / 2 / 4 / 3;
  width: 420px;
  /* Level with the title's own box: a heading's margin is inside the row it stands in. */
  margin-top: 28px;
}

/* The file itself, on a button drawn like the one a law's formats open from, with no
   menu under it and so no arrow. Beside it, how far the archive has got: a pill in the
   colours a text that is not in force is marked in, a caution and not the label's own
   hue. Where every law in scope is in the archive the button stands alone. */
div.arhiva div.preuzimanje {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 12px;
}

div.arhiva div.preuzimanje a {
  padding: 7px 13px;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
}

div.arhiva div.preuzimanje a:hover {
  background: var(--tint);
  color: var(--accent);
}

div.arhiva span.manjak {
  padding: 2px 10px;
  border: 1px solid var(--past-edge);
  border-radius: 999px;
  background: var(--past-bg);
  font: 600 12.5px/1.6 var(--font);
  color: var(--past-text);
}

form.filter {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
}

form.filter div.birac {
  position: relative;
  flex: 1;
  max-width: 420px;
}

form.filter input {
  width: 100%;
  padding: 9px 34px 9px 12px;
  border: 1px solid var(--rule);
  background: var(--bg);
  font: inherit;
  font-size: 15px;
  color: var(--text);
}

/* Focused, the border alone takes the accent, as the search field in the top bar does.
   The ring the page draws around anything else focused would be a second frame around
   one the field already has. */
form.filter input:focus-visible { outline: none; border-color: var(--accent); }

form.filter output {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap;
}

section.stranica { max-width: var(--measure); }

section.stranica h2 {
  margin: 32px 0 8px;
  font-size: 18px;
  font-weight: 700;
}

section.stranica h1 {
  margin: 28px 0 12px;
  font-size: 28px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
}

section.stranica h3 {
  margin: 22px 0 6px;
  font-size: 16px;
  font-weight: 600;
}

/* A heading's own bottom margin sets the gap to its text: the paragraph under it gives
   up its top margin, which would otherwise win the collapse, and the tighter line height
   drops the leading the body's 1.6 would leave under the letters. A subheading right
   under a heading sits closer to it than to the paragraph above it, but not as close
   as text. */
section.stranica :is(h2, h3) { line-height: 1.3; }
section.stranica :is(h2, h3) + :not(h3) { margin-top: 0; }
section.stranica h2 + h3 { margin-top: 12px; }

section.stranica ul { padding-left: 1.2em; }
section.stranica li { margin-bottom: 6px; }

code {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

/* The search page. Pagefind's components reset every property they would otherwise
   inherit, so the `--pf-*` properties below are the whole of the way in. Each is set to
   a token of this design rather than to a colour, and the tokens are what dark moves,
   so the search comes out in the site's own colours and follows the reader's system
   with the rest of the page. */
div.pretraznik {
  max-width: var(--measure);
  margin-top: 20px;
  --pf-font: var(--font);
  --pf-text: var(--text);
  --pf-text-secondary: var(--muted);
  --pf-text-muted: var(--muted);
  --pf-background: var(--bg);
  --pf-border: var(--rule);
  --pf-border-focus: var(--accent);
  --pf-hover: var(--surface);
  --pf-mark: var(--accent-strong);
  --pf-skeleton: var(--surface);
  --pf-skeleton-shine: var(--tint);
  --pf-outline-focus: var(--accent);
  --pf-border-radius: 0;
  --pf-input-height: 52px;
  --pf-input-font-size: 17px;
  --pf-summary-font-size: 14px;
  --pf-result-title-font-size: 17px;
  --pf-result-excerpt-font-size: 14.5px;
}

/* The one thing about the search the properties cannot reach: Pagefind empties its
   field by a button that says the word for it, where every other field on the site has
   a cross at its end. The word stays in the button, at no size, so a reader who hears
   the page hears it, and the cross is drawn in its place. Pagefind's own rules for the
   button are written to carry an id's weight, which is why these declarations are
   marked important where the rest of this stylesheet has no need of it. */
div.pretraznik button.pf-input-clear {
  inset-inline-end: 6px !important;
  width: 24px !important;
  min-width: 0 !important;
  height: 24px !important;
  padding: 0 !important;
  border-radius: 12px !important;
  font-size: 0 !important;
}

div.pretraznik button.pf-input-clear::before {
  content: "×";
  font: 18px/24px var(--font);
}

/* Focused, Pagefind rings its field with a shadow on top of the accent border. The
   border alone marks it, as on the site's other fields. */
div.pretraznik input.pf-input:focus-visible { box-shadow: none !important; }

/* The field is the page's one large thing, so its glass is drawn to its size and the
   text starts clear of it. */
div.pretraznik .pf-input-wrapper::before {
  width: 18px !important;
  height: 18px !important;
  top: 17px !important;
  inset-inline-start: 16px !important;
}

div.pretraznik input.pf-input { padding-inline-start: 46px !important; }

/* Under an empty field: a few searches to try, as pills. They leave once the field
   holds anything -- which the placeholder tells, being shown only over an empty field
   -- and the count of results takes their place. */
div.pretraznik p.primjeri {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 18px 2px 0;
  font-size: 14px;
  color: var(--muted);
}

div.pretraznik p.primjeri a {
  padding: 4px 13px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
}

div.pretraznik p.primjeri a:hover { color: var(--accent); border-color: var(--accent); }

div.pretraznik:has(input.pf-input:not(:placeholder-shown)) p.primjeri { display: none; }

/* The results, as a list and not as a stack of cards: a law is its title, parted from
   the law before by the room over it, and the articles it matched hang from a line down
   their left. Pagefind draws every one of these as a bordered box, by rules that carry
   three ids' weight, hence the marks of importance all the way down. */
div.pretraznik .pf-summary:not(:empty) { margin: 16px 2px 12px !important; }

div.pretraznik li.pf-result {
  gap: 10px !important;
  padding: 14px 0 !important;
}

/* A box only when it is pointed at or walked to by the arrows, and then as a tint that
   reaches a little past the text on both sides. */
div.pretraznik .pf-result-card,
div.pretraznik li.pf-heading-chip {
  border: 0 !important;
  border-radius: 4px !important;
  background: none !important;
}

div.pretraznik .pf-result-card { margin: -6px -10px !important; padding: 6px 10px !important; }
div.pretraznik .pf-result-card:hover { box-shadow: none !important; }

div.pretraznik .pf-result-card:has([data-pf-selected]),
div.pretraznik li.pf-heading-chip:hover,
div.pretraznik li.pf-heading-chip:has([data-pf-selected]) {
  background: var(--surface) !important;
}

/* A law is named in the text's own color, heavy, and takes the warm hue under the
   pointer as every link does; the article under it is named in the green. */
div.pretraznik a.pf-result-link { font-weight: 700 !important; }
div.pretraznik a.pf-heading-link { color: var(--green) !important; }

div.pretraznik a.pf-result-link:hover,
div.pretraznik a.pf-heading-link:hover {
  color: var(--warm-strong) !important;
}

/* The law's own excerpt repeats one of its articles' when the articles are listed. */
div.pretraznik li.pf-result:has(.pf-heading-chips) .pf-result-excerpt { display: none !important; }

div.pretraznik .pf-heading-chips {
  gap: 2px !important;
  padding-inline-start: 6px !important;
  border-inline-start: 2px solid var(--rule) !important;
}

div.pretraznik li.pf-heading-chip {
  display: flex !important;
  gap: 1px !important;
  padding: 6px 10px !important;
  font-size: 14.5px !important;
}

div.pretraznik a.pf-heading-link::before { content: none !important; }

div.pretraznik .pf-heading-excerpt {
  font-size: 13.5px !important;
  line-height: 1.5 !important;
}

/* The words that matched, in the text's own color under a highlighter. */
div.pretraznik mark {
  padding: 0 2px;
  border-radius: 2px;
  background: var(--hit) !important;
  font-weight: 500 !important;
  color: var(--text) !important;
}

/* The site's footer, on every page: the way to each of its pages and nothing else, set
   at the right. What the texts are is said where they stand, at the close of a law's
   provenance. */

.podnozje {
  border-top: 1px solid var(--rule);
  padding: 18px var(--strip-edge) 40px;
  font-size: 13px;
  text-align: right;
  color: var(--muted);
}

.podnozje p { margin: 0; }
.podnozje a { color: var(--warm); text-decoration: none; }
.podnozje a:hover { color: var(--warm-strong); }

/* Under 900 px: one column, the sidebar out of the flow and behind the button in the
   context line, the text the full width of the screen.

   The drawer is only for a screen where the script runs -- `html.js` is the mark the
   page's head sets for it -- because a sidebar hidden off the side of a page with
   nothing to open it would be a table of contents no reader could reach. Without the
   script the contents are a list of links above the law, which is what they are. */

@media (max-width: 900px) {
  :root {
    --top-bar: 52px;
    --edge: 16px;
  }

  body { font-size: 16.5px; }

  .vrh { gap: 14px; }

  /* The links leave the bar for the menu, whose button takes the place of the link
     home. */
  .vrh-nav,
  .vrh .ime { display: none; }
  .izbornik { display: block; }
  .vrh-lijevo { flex: 1; }

  /* The mark alone, a size up, without the name. Having no baseline to share with the
     links, it is centered against them instead. It is narrower than a finger, and the
     button takes room around it without moving it. */
  .vrh-lijevo { align-items: center; }
  .vrh .znak { width: 13.4px; height: 24px; }

  /* The field stays, at the end of the bar beside the theme button and as tall as it,
     wide enough for what it says while empty. Its type is 16 px, under which a phone
     zooms in on the page when it is touched. */
  .trazi-vrh input {
    width: 180px;
    height: 32px;
    padding: 0 8px 0 32px;
    font-size: 16px;
  }
  .trazi-vrh button { width: 32px; }

  main {
    display: block;
    padding: 0 var(--edge) 40px;
  }

  aside.oglas.pojas a.kreativa {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 300px;
    height: 250px;
    margin: 0 auto;
    padding: 24px;
    text-align: center;
  }

  aside.oglas.pojas a.kreativa strong {
    font-size: 22px;
    line-height: 1.2;
  }

  aside.oglas.pojas a.kreativa .poruka {
    margin-top: 12px;
    font-size: 16px;
    line-height: 1.45;
  }

  aside.oglas.pojas a.kreativa .adresa { margin-top: 18px; }

  aside.oglas.pojas p.oznaka {
    width: 300px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  main > nav.sadrzaj {
    position: static;
    width: auto;
    max-width: none;
    max-height: none;
    overflow: visible;
    margin: 18px 0 0;
    padding: 0 0 18px;
    border-right: 0;
    border-bottom: 1px solid var(--rule);
  }

  /* The drawer stands between the top bar and the foot of the screen and scrolls
     within that, which is what gives a long table of contents anywhere to scroll. The
     alignment is reset along with the rest of what the sidebar wears in two columns:
     a box aligned to the start of its row is sized by its contents, and the drawer
     would come out as tall as the whole list and begin behind the top bar. */
  html.js main > nav.sadrzaj {
    position: fixed;
    top: var(--top-bar);
    bottom: 0;
    left: 0;
    z-index: 25;
    align-self: stretch;
    width: min(320px, 86vw);
    max-height: none;
    overflow: auto;
    margin: 0;
    padding: 0 16px 40px;
    background: var(--bg);
    border-right: 1px solid var(--rule);
    border-bottom: 0;
    transform: translateX(-100%);
    transition: transform 0.18s ease-out;
  }

  html.js main > nav.sadrzaj.otvoren { transform: none; }

  /* The drawer's head, heading and cross both, which holds the top of the scroll so
     that the way out is in reach however far down the list the reader has come. */
  html.js main > nav.sadrzaj > h2 {
    position: sticky;
    top: 0;
    z-index: 1;
    margin: 0 0 10px;
    padding: 22px 0 10px;
    background: var(--bg);
  }

  html.js main > nav.sadrzaj > button.zatvori {
    display: block;
    position: sticky;
    top: 14px;
    z-index: 2;
    float: right;
    width: 34px;
    height: 34px;
    margin: 14px 0 0 12px;
    padding: 0;
    border: 1px solid var(--rule);
    border-radius: 4px;
    background: var(--bg);
    font: 20px/1 var(--font);
    color: var(--text);
    cursor: pointer;
  }

  /* Over the page while the drawer is open: it dims the law and it takes the tap that
     closes the drawer, so that tap reaches nothing under it. The top bar stands above
     it, having a higher layer of its own. */
  body.ladica > div.zastor {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 24;
    background: rgb(0 0 0 / 38%);
  }

  body.ladica { overflow: hidden; }

  div.kontekst .gumb {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 4px 14px;
  }

  div.kontekst form.skok {
    min-height: 40px;
    margin: 0;
  }

  /* The article field is as wide as what it holds, so that the law's name gets the
     width the longest number would otherwise keep empty. A browser that cannot size a
     field to its text keeps the fixed width. The space before the number is there to
     keep typing off the field's edge, so it stands only while the edge is shown. */
  @supports (field-sizing: content) {
    div.kontekst input.broj {
      field-sizing: content;
      width: auto;
      padding-left: 0;
    }

    div.kontekst form.skok:focus-within input.broj { padding-left: 8px; }
  }

  /* In one column the context line can stand in the flow, where sticky reserves the
     height it takes: fixed took none, and the bar sat over the law's title. Standing
     in the flow, it needs no height reserved for it either. */
  html.js div.kontekst,
  div.kontekst.nije-na-snazi {
    position: sticky;
    left: auto;
    right: auto;
    margin: 0 calc(-1 * var(--edge));
    padding: 7px var(--edge);
  }

  html.js main:has(> div.kontekst),
  main:has(> div.kontekst.nije-na-snazi) { padding-top: 0; }

  /* What the narrow bar gives up for the mark. The issue goes, the banner over the law
     naming it anyway; and where the mark stands, so does the reader's place in the
     law, which in this width came to four letters and an ellipsis. What is left is
     what the bar is there for: that the text is not in force, the way to the text that
     is, and the way into the contents. */
  div.kontekst .oznaka-verzije .objava { display: none; }

  div.kontekst.nije-na-snazi .gdje,
  div.kontekst.nije-na-snazi form.skok { display: none; }

  header.zakon-glava h1 { font-size: 24px; }
  div.preuzmi summary,
  div.arhiva div.preuzimanje a { padding: 10px 14px; }
  div.preuzmi ul a { padding: 9px 13px; }
  div.traka { margin-top: 18px; }

  /* A narrow screen has no room for the table's columns, and a table that scrolls
     sideways hides its last ones, the days the text stood and the link to it, behind
     a scrollbar nobody sees. So the table stops being one: each version is a block of
     two lines. The first holds what the eye scans by, the issue, the kind of act and
     the link to the text at the right edge; the second, in the muted small type of a
     detail, the days it stood and what the act changed, each value labeled where the
     hidden header would have labeled it. The article count stays out, as before. */
  table.verzije,
  table.verzije tbody { display: block; }
  table.verzije thead { display: none; }

  table.verzije tr {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 10px;
    padding: 9px 8px;
    border-bottom: 1px solid var(--rule);
  }

  /* The break between the two lines: a full-width item ordered after the first line's
     cells and before the second's. */
  table.verzije tr::after {
    content: "";
    flex-basis: 100%;
    height: 0;
    order: 1;
  }

  table.verzije td {
    padding: 0;
    border: 0;
    white-space: normal;
    background: none;
  }

  table.verzije td.tekst { padding-left: 0; }
  table.verzije td.vrsta { flex: 1 1 auto; }
  table.verzije td:last-child { margin-left: auto; }
  table.verzije tr.prije td { flex: 1 1 100%; margin-left: 0; }
  table.verzije tr.trenutna { background: var(--tint); }

  table.verzije td.raz,
  table.verzije td.izmjene,
  table.verzije td.br {
    order: 2;
    font-size: 13px;
    color: var(--muted);
  }
  table.verzije tr.trenutna td.raz,
  table.verzije tr.trenutna td.izmjene,
  table.verzije tr.trenutna td.br { font-weight: 400; }
  table.verzije td.raz { flex: none; }
  table.verzije td.raz::before { content: "na snazi "; }

  /* What the act changed follows the days, with its own label since the header that
     gave it one is gone; the count's noun, dropped under that header, comes back. The
     empty cell of a base act has nothing to label and is left out. The dot between
     the two belongs to the days, so that a count wrapped onto a line of its own does
     not open with it. */
  table.verzije td.izmjene,
  table.verzije td.br { order: 3; }
  table.verzije td.izmjene::before { content: "promijenjeno: "; }
  table.verzije td.izmjene:not(:empty) + td.raz::after { content: " \00b7"; }
  table.verzije td.br { display: none; }
  table.verzije td.izmjene:empty { display: none; }

  /* On the page of what changed since a version the count column is that page's own
     figure, so there it stays, labeled as its header labeled it. */
  article.promjene-popis table.verzije td.br { display: block; }
  article.promjene-popis table.verzije td.br::before { content: "promijenjeno \010dlanaka: "; }
  article.promjene-popis table.verzije td.raz:has(+ td.br:not(:empty))::after { content: " \00b7"; }
  article.promjene-popis table.verzije td.br:empty { display: none; }

  /* Room for a finger on what a narrow screen is read by: the two controls in the
     context line, and the links of the versions tables, whose hit area reaches past
     their line without moving the row it stands in. */
  table.verzije td a {
    display: inline-block;
    padding: 9px 0;
    margin: -9px 0;
  }

  /* The calendar of the field of what changed since a day is hung from the form's left
     edge, which is the page's, rather than the field's: a calendar of its own width
     hung off a field that stands after its label falls off a phone screen. */
  form.na-dan { position: relative; }
  form.na-dan div.polje { position: static; }

  section.promjena { scroll-margin-top: calc(var(--top-bar) + 12px); }

  header.uvod { padding: 26px 0 6px; gap: 22px 24px; }
  header.uvod h1 { font-size: 25px; }
  header.uvod p.geslo { font-size: 15.5px; }
  p.brojke { gap: 6px 20px; }
  p.brojke b { font-size: 18px; }
  /* One column now, so the day stands under the figures at the left. */
  p.svjezina { text-align: left; margin-top: 12px; }

  section.stupci { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 20px; }
  /* The three amounts stand one under another, each beside its name. */
  div.okvir-kalkulatora dl.iznosi { display: block; }
  div.okvir-kalkulatora dl.iznosi div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
  }
  div.okvir-kalkulatora dl.iznosi dd { font-size: 21px; }
  div.okvir-kalkulatora p.razdoblje { margin-top: 6px; }
  /* The table keeps every column, in tighter cells, and is at least as wide as the
     fields over it; where it is wider still, the result scrolls sideways. */
  div.okvir-kalkulatora table.obracun { width: 100%; }
  div.okvir-kalkulatora table.obracun th,
  div.okvir-kalkulatora table.obracun td { padding-left: 6px; padding-right: 6px; }
  div.okvir { height: 360px; }
  /* The orders take the first row by themselves, flush with the column header and
     the days under it, and the field moves down to share the second row with the
     header, filling the width the header leaves it. */
  div.poredak { justify-content: flex-end; }
  div.poredak button[data-kljuc] { order: 1; }
  div.poredak form.filter { order: 2; flex: 1 1 140px; min-width: 0; margin-right: 0; }
  div.poredak form.filter div.birac { width: auto; }
  div.poredak span.stupac { order: 3; }

  p.broj-zakona { text-align: left; }

  /* The listing's head in one column, the card taking the width between the title and
     the field. */
  div.zaglavlje { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  div.zaglavlje > h1,
  div.zaglavlje > p.uvodno,
  div.zaglavlje > div.arhiva,
  div.zaglavlje > form.filter { grid-area: auto; }
  div.zaglavlje > div.arhiva { width: auto; margin-top: 16px; }
}

/* The narrowest phones have no room for the field beside the mark and the theme
   button, and the search page is in the menu. */
@media (max-width: 339px) {
  .trazi-vrh { display: none; }
}

/* Narrower than this the listing gives one thing up rather than push the page wider
   than the screen: it drops the count of acts and keeps the title with the day the
   law was last amended, which is what the rows are read for. */

@media (max-width: 400px) {
  /* The context line gives up spacing and nothing else, so that all three of the
     things it carries -- that the text is not in force, the way to the text that is,
     and the way into the contents -- still stand on the one line. */
  div.kontekst { gap: 8px; }

  div.kontekst .oznaka-verzije { letter-spacing: 0.04em; }
  div.kontekst .gumb { padding: 4px 9px; }

  ol.red-zakona.cijeli li data,
  div.poredak span.stupac span.broj { display: none; }

  ol.red-zakona.cijeli li data + time { margin-left: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html.js main > nav.sadrzaj { transition: none; }
  .izbornik .strelica { transition: none; }
  .izbornik[open]::before,
  .izbornik .ploha { animation: none; }
}

/* A browser printing a law page has only this stylesheet: `publish/print.css`, which
   the PDFs are rendered under, is not served. So the chrome is dropped here too, and
   the page is put on paper in the colours paper has. */

@media print {
  :root {
    color-scheme: light;

    --bg: #ffffff;
    --surface: #f3f5f7;
    --text: #14181d;
    --muted: #444a52;
    --rule: #c9ced4;
    --accent: #14181d;
    --tint: #ffffff;
  }

  .vrh,
  .podnozje,
  .preskoci,
  .trazi-vrh,
  .tema,
  nav.sadrzaj,
  div.kontekst,
  div.preuzmi,
  div.traka,
  a.veza,
  span.povijest,
  p.pozivanja,
  button.objasni,
  p.prazno,
  p.vazece,
  p.radnje,
  details.stope,
  div.kalendar { display: none !important; }

  a.poziv { text-decoration: none; }

  body {
    display: block;
    min-height: 0;
  }

  main {
    display: block;
    max-width: none;
    padding: 0;
  }

  div.traka,
  header.zakon-glava,
  article.zakon,
  section.dodaci,
  footer.podrijetlo { max-width: none; }

  aside.oglas { display: none; }

  h2.dio,
  h3.naslov,
  h4.clanak { break-after: avoid; }

  h4.clanak + p,
  h4.clanak + div.tombstone { break-before: avoid; }

  div.tombstone,
  section.dodaci,
  footer.podrijetlo { break-inside: auto; }

  p.proza,
  p.stavak,
  p.tocka,
  p.podstavak { orphans: 2; widows: 2; }

  /* The calculator keeps its result alone: the form gives way to the line that says
     what it held, or to the table of claims, the amounts stand in a row, every column
     is back, and each note stands under its table, every claim's table unfolded by
     `kamate.js`. */
  div.okvir-kalkulatora form,
  div.okvir-kalkulatora p.prazno { display: none !important; }

  div.okvir-kalkulatora { margin-top: 16px; }
  div.okvir-kalkulatora div.rezultat { margin-top: 0; overflow: visible; }
  div.okvir-kalkulatora p.ulazi { display: block; margin: 0 0 14px; font-size: 14.5px; }
  div.okvir-kalkulatora p.ulazi[hidden] { display: none; }

  div.okvir-kalkulatora dl.iznosi { display: flex; }
  div.okvir-kalkulatora dl.iznosi div { display: block; }
  div.okvir-kalkulatora dl.iznosi dd { font-size: 24px; }
  div.okvir-kalkulatora p.razdoblje { margin-top: 0; }

  div.okvir-kalkulatora table.obracun { width: auto; }
  div.okvir-kalkulatora table.obracun th,
  div.okvir-kalkulatora table.obracun td { padding: 4px 12px; }
  div.okvir-kalkulatora table.obracun tr > :first-child { padding-left: 0; }
  div.okvir-kalkulatora table.obracun tr { break-inside: avoid; }
  div.okvir-kalkulatora tr.uz-napomenu > :last-child { box-shadow: none !important; }

  div.okvir-kalkulatora div.uz-tablicu { display: block; }
  div.okvir-kalkulatora div.rezultat ul.napomene { margin: 8px 0 0; }
  div.okvir-kalkulatora div.rezultat ul.napomene li,
  div.okvir-kalkulatora div.rezultat ul.napomene li + li,
  div.okvir-kalkulatora div.rezultat ul.napomene li.privremeno {
    margin-top: 6px;
    padding: 0 0 0 10px;
    border: 0;
    border-left: 2px solid var(--rule);
    border-radius: 0;
    background: none;
    font-size: 12.5px;
    color: var(--text);
  }
  div.okvir-kalkulatora ul.napomene a { color: inherit; text-decoration: none; }

  div.okvir-kalkulatora div.trazbine { margin-top: 0; }
  div.okvir-kalkulatora details.trazbina,
  div.okvir-kalkulatora details.trazbina:first-child { border: 0; }
  div.okvir-kalkulatora details.trazbina summary {
    padding: 14px 0 0;
    break-after: avoid;
  }
  div.okvir-kalkulatora details.trazbina summary::before { display: none; }
  div.okvir-kalkulatora details.trazbina summary span.kamata { margin-left: 0; }
  div.okvir-kalkulatora details.trazbina > p.razdoblje { margin: 2px 0 6px; break-after: avoid; }

  section.kamate > p.ograda { display: none; }
  div.okvir-kalkulatora p.ograda.tisak {
    display: block;
    margin: 32px 0 0;
    padding: 0;
    border: 0;
    font-size: 12px;
    color: var(--muted);
    break-inside: avoid;
  }

  div.okvir-kalkulatora p.marka {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 8px 0 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--muted);
    break-inside: avoid;
  }
  div.okvir-kalkulatora p.marka img { width: 14px; height: 14px; }
}