@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/barlow-latin-ext-400-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/barlow-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/barlow-latin-ext-600-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/barlow-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/barlow-latin-ext-700-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/barlow-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/barlow-condensed-latin-ext-600-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/barlow-condensed-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/barlow-condensed-latin-ext-700-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/barlow-condensed-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/barlow-condensed-latin-ext-800-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/barlow-condensed-latin-800-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
  --font-body: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-cond: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --bg: #ffffff; --surface: #ffffff; --ink: #14181d; --body: #4a5058;
  /* The design's #8b929b is 3.14:1 on white — below the 4.5:1 floor, and
     this token carries EVERY source attribution and timestamp on the
     site. Darkened to clear 4.5:1 on both the page and --box. */
  --muted: #68707a;
  --line: #e2e5e9; --navy: #16407a; --navy-deep: #0f2c52;
  --link: #16407a; --link-hover: #0f2c52;
  --red: #d7282f; --red-badge: #d7282f; --box: #f4f6f8; --amber: #8a6210;
  /* Form-control borders are non-text contrast (1.4.11, 3:1 minimum). */
  --field-border: #767c85; --ok: #1f6f43;
  /* Hairline between the masthead and the navbar, on brand-navy bands. */
  --band-line: #24518f;
  /* §130.1 rubric palette (2026-08-27). Ten hues for fifteen rubrics —
     related rubrics share one (politics/world/region blue,
     culture/showbiz/lifestyle magenta), and croatia/society keep the
     brand red as the default, so the page never turns into a paint
     chart. Every value clears 4.5:1 on --bg AND on --box. */
  --cat-blue: #1a52a0; --cat-maroon: #96131c; --cat-teal: #0a6b60; --cat-green: #1c6f3a;
  --cat-violet: #6b34b0; --cat-cyan: #0a6a80; --cat-orange: #a44a06; --cat-magenta: #a5218a;
  --cat-sky: #1b6497;
  /* ONE vertical gap between the naslovnica's major modules. Four
     different values (26/36/40/48) were what made the page read as
     ragged (owner, 2026-08-27). */
  --mod-gap: 34px;
}
html.t-dark { 
  --bg: #12161c; --surface: #1b212a; --ink: #e9e8e4; --body: #b9bfc7; --muted: #8d949e;
  --line: #2b323c; --link: #93b8ea; --link-hover: #bad1f2;
  --navy: #17304e; --navy-deep: #101f33; --band-line: #24405f;
  --red: #f0666c; --red-badge: #b8323a; --box: #1c232c; --amber: #d8a75b;
  --field-border: #6a737f; --ok: #7fc9a0;
  --cat-blue: #7fb0f2; --cat-maroon: #f08f92; --cat-teal: #4fc4b1; --cat-green: #6ec98a;
  --cat-violet: #c3a2f5; --cat-cyan: #57c2dd; --cat-orange: #efa15c; --cat-magenta: #f091d5;
  --cat-sky: #7cbcea;
 }
@media (prefers-color-scheme: dark) {
  html:not(.t-light) { 
  --bg: #12161c; --surface: #1b212a; --ink: #e9e8e4; --body: #b9bfc7; --muted: #8d949e;
  --line: #2b323c; --link: #93b8ea; --link-hover: #bad1f2;
  --navy: #17304e; --navy-deep: #101f33; --band-line: #24405f;
  --red: #f0666c; --red-badge: #b8323a; --box: #1c232c; --amber: #d8a75b;
  --field-border: #6a737f; --ok: #7fc9a0;
  --cat-blue: #7fb0f2; --cat-maroon: #f08f92; --cat-teal: #4fc4b1; --cat-green: #6ec98a;
  --cat-violet: #c3a2f5; --cat-cyan: #57c2dd; --cat-orange: #efa15c; --cat-magenta: #f091d5;
  --cat-sky: #7cbcea;
 }
}
* { box-sizing: border-box; }
/* Keyboard focus must be visible on every surface, including the navy
   bands where the browser's default ring nearly disappears. Two rings
   (accent + white halo) survive both a white page and a navy slab. */
:focus-visible {
  outline: 2px solid var(--red-badge);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(255,255,255,0.85);
}
.masthead :focus-visible, .foot :focus-visible, .teme :focus-visible {
  outline-color: #ffffff;
  box-shadow: 0 0 0 4px rgba(0,0,0,0.45);
}
html { color-scheme: light dark; }
html.t-light { color-scheme: light; }
html.t-dark { color-scheme: dark; }
/**
 * Sticky footer. Short pages — sign-in, the account page, a 404 — used
 * to end their footer mid-screen with the page background below it,
 * because main only claimed a 60vh minimum and the footer sat wherever
 * the content stopped. A column flex body with a growing main puts the
 * footer on the bottom edge when the content is short and pushes it down
 * when it is long, with no magic viewport fractions.
 */
body { margin: 0; background: var(--bg); color: var(--ink); font: 1rem/1.5 var(--font-body);
  min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }
/* A link sitting INSIDE a sentence cannot be signalled by hue alone —
   --link against --ink is 1.74:1, so a colorblind reader sees no link at
   all (WCAG 1.4.1). Headlines and nav are their own block-level targets
   and do not need this; prose does. */
p a, .notice a, .kicker a, .foot-desc a { text-decoration: underline; }
h1, h2, h3 { margin: 0; }
.shell { max-width: 1200px; margin: 0 auto; padding-left: clamp(14px, 3vw, 24px); padding-right: clamp(14px, 3vw, 24px); }

/* Keyboard and screen-reader users get past the masthead in one tab. */
.skip { position: absolute; left: -9999px; top: 0; background: #ffffff; color: #16407a;
  padding: 10px 16px; font-weight: 700; z-index: 30; }
.skip:focus { left: 8px; top: 8px; }

/* ----- masthead (navy band) ----- */
.masthead { background: var(--navy); position: relative; }
.mast-inner { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; padding-top: 14px; padding-bottom: 14px; }
/**
 * Mark and wordmark are ONE typographic unit: the brand element owns the
 * size, the wordmark takes it at 1em, and the mark is 0.7em — Barlow's
 * cap height — so the glyph draws exactly as tall as the letters beside
 * it and both track the reader's text-size preference together.
 *
 * Sizing the mark independently (px, then rem) is what made it look
 * shrunken twice: the tile also carried invisible padding, so a "33px
 * logo" drew a 15px glyph. The tile is now cropped to its ink, and its
 * own aspect ratio decides the width.
 */
.brand { display: flex; align-items: center; gap: 0.3em; font: 800 2.2667rem/1 var(--font-cond); }
.brand:hover { text-decoration: none; }
.brand img { height: 0.7em; width: auto; display: block; flex: none; }
.wordmark { font: inherit; color: #ffffff; letter-spacing: 0.01em; }
/* White at 0.55 alpha composites to 4.28:1 on the light navy — under the
   floor. 0.62 clears 5:1 on both --navy and --navy-deep, in both themes;
   the same value is used for every dimmed label on a navy band. */
.tagline { color: rgba(255,255,255,0.62); font-size: 0.7667rem; letter-spacing: 0.14em; text-transform: uppercase; padding-top: 6px; }
.mast-tools { margin-left: auto; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.mast-search { margin: 0; }
/* The generic input[type=…] block later in this sheet has the same
   specificity (an attribute selector weighs as much as a class), so it
   would win on source order and undo the design. Naming the type here
   adds a second attribute and puts the component back in charge. */
.mast-search input[type=search] { font: 0.8667rem var(--font-body); background: #ffffff; color: #14181d; border: 0; border-radius: 2px; padding: 7px 14px; width: min(220px, 44vw); }
.mast-search input::placeholder { color: #6b7280; }
.mast-user { color: #ffffff; font-weight: 600; font-size: 0.9rem; }
.mast-user:hover { color: #ffffff; }
.mast-signout { font: 0.8667rem var(--font-body); background: none; border: 0; padding: 0; color: rgba(255,255,255,0.65); cursor: pointer; }
.mast-signout:hover { color: #ffffff; text-decoration: underline; }
.mast-cta { border: 2px solid rgba(255,255,255,0.85); color: #ffffff; padding: 6px 14px; font: 700 0.8667rem/1 var(--font-cond); letter-spacing: 0.08em; text-transform: uppercase; }
.mast-cta:hover { background: #ffffff; color: var(--navy); text-decoration: none; }
/* Search collapses to a link on phones — /sve carries the same field at
   full width, and a second one here cost a whole row of a 812px screen. */
.mast-search-link { display: none; }

/* ----- phone menu (native <details> disclosure, zero JS) ----- */
.menu { display: none; position: relative; }
.menu-btn { list-style: none; display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; cursor: pointer; border: 1px solid rgba(255,255,255,0.55);
  border-radius: 2px; }
.menu-btn::-webkit-details-marker { display: none; }
/* Three bars drawn from one box: the middle is the element, the other
   two are its pseudo-elements. Becomes an X when the panel is open. */
.burger, .burger::before, .burger::after {
  display: block; width: 20px; height: 2px; background: #ffffff; border-radius: 2px;
}
.burger { position: relative; }
.burger::before, .burger::after { content: ''; position: absolute; left: 0; }
.burger::before { top: -6px; }
.burger::after { top: 6px; }
.menu[open] .burger { background: transparent; }
.menu[open] .burger::before { top: 0; transform: rotate(45deg); }
.menu[open] .burger::after { top: 0; transform: rotate(-45deg); }
.menu-panel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 20;
  width: min(300px, calc(100vw - 28px));
  background: var(--surface); border: 1px solid var(--line); border-radius: 2px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.28);
  max-height: calc(100vh - 96px); overflow-y: auto;
}
/**
 * While the panel is open the rubric strip is hidden. It sits directly
 * under the panel, and without JavaScript there is no focus trap — so
 * tabbing past the last control used to land on strip links the panel
 * was covering, with no visible focus anywhere (review, 2026-08-09).
 * Hiding it removes the hidden tab stops instead of fighting them.
 * Browsers without :has() simply keep the old overlay behaviour.
 */
.masthead:has(.menu[open]) + .navbar { display: none; }
.menu-section { padding: 8px; border-bottom: 1px solid var(--line); }
.menu-section:last-child { border-bottom: 0; }
.menu-title { font: 800 0.8rem/1 var(--font-cond); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); padding: 6px 8px 8px; }
.menu-link { display: block; padding: 12px 10px; color: var(--ink);
  font: 700 1.1333rem/1 var(--font-cond); letter-spacing: 0.05em; text-transform: uppercase; }
.menu-link:hover { background: var(--box); color: var(--link); text-decoration: none; }
.menu-link.on { color: var(--link); box-shadow: inset 3px 0 0 var(--red-badge); }
.menu-link.as-button { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; }
.menu-section form { margin: 0; }

/**
 * Phone masthead. At 375px the desktop arrangement wrapped into three
 * ragged rows and ate 160px — 20% of the screen — before a single
 * headline. Here it is two deliberate rows: a smaller mark, then a
 * full-width tool strip, with the second search field collapsed to a
 * link. Measured result: 160px → 92px at 375px.
 *
 * NB: overrides for rules declared LATER in this sheet (.pref-btn,
 * .nav-link) cannot live here — a media query adds no specificity, so
 * source order would silently win. They sit in the phone block at the
 * very end of the sheet.
 */
@media (max-width: 700px) {
  .tagline { display: none; }
  /* ONE row: brand on the left, search and the menu button on the right.
     Everything else moves into the menu, which is what the owner asked
     for and what gets the masthead from 160px to ~54px. */
  .mast-inner { gap: 10px; padding-top: 7px; padding-bottom: 7px; flex-wrap: nowrap; }
  /* One size sets both the mark and the wordmark. */
  .brand { font-size: 2rem; min-width: 0; }
  .mast-tools { display: none; }
  .mast-search-link { display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin-left: auto; color: #ffffff; font-size: 1.7333rem; flex: none; }
  .mast-search-link:hover { text-decoration: none; }
  /* With Izvori in the menu, four views fit without a scroll. */
  .nav-sources { display: none; }
  .menu { display: block; flex: none; }
}

/* ----- rubric navbar (sticky) ----- */
.navbar { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; }
.nav-inner { display: flex; align-items: center; gap: 4px; overflow-x: auto; }
.nav-link { font: 700 1.0333rem/1 var(--font-cond); letter-spacing: 0.05em; text-transform: uppercase; color: var(--body); padding: 13px 12px 10px; white-space: nowrap; }
.nav-link:hover { color: var(--link); text-decoration: none; }
.nav-link.active { color: var(--ink); box-shadow: inset 0 -3px 0 var(--red-badge); }
.nav-date { margin-left: auto; color: var(--muted); font-size: 0.8rem; white-space: nowrap; padding-left: 12px; }
@media (max-width: 760px) { .nav-date { display: none; } }
/* The rubric strip scrolls horizontally when it does not fit — at the
   large text size nothing could make five uppercase words fit 375px.
   Without a cue the last item just looks cut off, so the trailing edge
   fades: the standard "there is more this way" signal.
   NB: no position declaration below — the navbar is already sticky,
   which makes it the containing block for this ::after, and re-declaring
   it relative would silently un-stick the whole strip. */
@media (max-width: 700px) {
  .navbar::after {
    content: ''; position: absolute; top: 0; right: 0; bottom: 1px; width: 28px;
    background: linear-gradient(to right, rgba(0,0,0,0), var(--surface));
    pointer-events: none;
  }
  .nav-inner { scrollbar-width: none; }
  .nav-inner::-webkit-scrollbar { display: none; }
}

/* ----- breaking ticker ----- */
.ticker { border-bottom: 1px solid var(--line); background: var(--surface); }
.ticker-inner { display: flex; align-items: center; gap: 12px; padding-top: 8px; padding-bottom: 8px; }
.badge { background: var(--red-badge); color: #ffffff; font: 800 0.7333rem/1 var(--font-cond); letter-spacing: 0.12em; padding: 4px 9px; white-space: nowrap; }
.ticker-hl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 0.9rem; color: var(--ink); }
.ticker-hl:hover { color: var(--link); text-decoration: none; }
.ticker-time { color: var(--red); font-size: 0.8rem; font-weight: 700; white-space: nowrap; }

/* Grows to fill whatever the header and footer leave. The bottom
   padding is the breathing room the footer's old margin used to give;
   as a margin it would have been added ON TOP of a filled viewport and
   produced 36px of pointless scrolling. */
main.shell { flex: 1 0 auto; padding-bottom: 36px; }

/* ----- back affordance on deep pages ----- */
.backlink {
  display: inline-flex; align-items: center; gap: 7px;
  font: 700 0.8667rem/1 var(--font-cond); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--link); padding: 14px 10px 14px 0; margin-left: -2px;
}
.backlink:hover { text-decoration: none; color: var(--link-hover); }
.backlink span { font-size: 1rem; line-height: 1; }

/* ----- shared text furniture ----- */
.cat { color: var(--cat-color, var(--red)); font: 800 0.8667rem/1 var(--font-cond); letter-spacing: 0.12em; text-transform: uppercase; }
/**
 * Rubric accents. ONE bare attribute selector per rubric sets a single
 * custom property; every consumer (the kicker's text colour, the block
 * header's accent bar) reads --cat-color with the brand red as fallback,
 * so a rubric with no accent — and any element with no data-cat at all —
 * still renders. Setting a custom property here rather than the color
 * itself keeps this list out of every consumer's specificity fight.
 *
 * data-cat is written by categoryBadge()/categoryBlock() and can only be
 * one of the CATEGORY_LABEL keys, so these selectors are exhaustive.
 */
[data-cat=politics], [data-cat=world], [data-cat=region] { --cat-color: var(--cat-blue); }
[data-cat=crime] { --cat-color: var(--cat-maroon); }
[data-cat=economy] { --cat-color: var(--cat-teal); }
[data-cat=health] { --cat-color: var(--cat-green); }
[data-cat=technology] { --cat-color: var(--cat-violet); }
[data-cat=science] { --cat-color: var(--cat-cyan); }
[data-cat=sport] { --cat-color: var(--cat-orange); }
[data-cat=culture], [data-cat=showbiz], [data-cat=lifestyle] { --cat-color: var(--cat-magenta); }
[data-cat=weather] { --cat-color: var(--cat-sky); }
/* croatia + society deliberately have no rule: the home rubric and the
   catch-all keep the brand red, which is the fallback above. */
.kicker-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.meta-dim { color: var(--muted); font-size: 0.8rem; }
.chip { display: inline-block; background: var(--box); color: var(--body); border-radius: 2px; padding: 2px 8px; font-size: 0.7333rem; font-weight: 600; white-space: nowrap; }
.chip.ai { color: var(--muted); background: transparent; border: 1px solid var(--line); font-size: 0.6667rem; letter-spacing: 0.06em; text-transform: uppercase; vertical-align: 1px; }
.chip.warn { background: var(--red-badge); color: #ffffff; }
.chip.follow { background: var(--ok); color: #ffffff; }
.sources-line { font-size: 0.8333rem; color: var(--muted); }
.sources-line strong { color: var(--link); font-weight: 600; }

/* ----- naslovnica ----- */
.home-grid { display: flex; flex-wrap: wrap; gap: 32px; padding-top: 24px; }
.home-main { flex: 10 1 560px; min-width: 0; }
/* The clamp's middle term must be font-relative too. A bare vw value
   sits inside the clamp window at ordinary widths, which pins the
   headline to the viewport and makes A− / A / A+ do nothing to the
   biggest type on the page — exactly the text a reader reaching for
   "veća slova" wants bigger. */
.hero-hl { font: 700 clamp(2rem, 1.4rem + 2.5vw, 2.9333rem)/1.04 var(--font-cond); letter-spacing: -0.005em; margin-top: 8px; }
.hero-hl a { color: var(--ink); }
.hero-hl a:hover { color: var(--link); text-decoration: none; }
.hero-dek { margin: 10px 0 8px; font-size: 1.1rem; line-height: 1.55; color: var(--body); max-width: 640px; }
/**
 * Secondaries. An auto-fit track count is what left the last card
 * dangling on its own row (owner, 2026-08-27): .home-main is a flex
 * child, so its width does not track the viewport, and a 210px minimum
 * resolved to THREE columns for FOUR cards at every desktop width.
 * The count is pinned instead — 4 across once the column is wide enough
 * for it, 2 below that, 1 on a phone — so the row is always full.
 *
 * align-items: stretch (grid's default, declared because it is load
 * bearing here) plus a column flex inside each card and an auto top
 * margin on the meta line gives the four cards one height and one
 * baseline for their meta, whatever the headlines do.
 */
.secondaries { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch;
  gap: 22px 24px; border-top: 1px solid var(--line); margin-top: 22px; padding-top: 22px; }
@media (min-width: 1100px) { .secondaries { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* IZDVOJENO — the third tier balancing the rail's height (2026-08-27).
   Compact rows, two columns; hairlines BETWEEN rows via the sibling
   selector so nothing dangles under the last one. */
.izdvojeno { margin-top: 22px; border-top: 2px solid var(--ink); padding-top: 10px; }
.izd-title { font: 800 0.8667rem/1 var(--font-cond); letter-spacing: 0.14em; color: var(--muted); margin-bottom: 8px; }
.izd-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 30px; }
.izd-item { padding: 9px 0; }
.izd-item:nth-child(n+3) { border-top: 1px solid var(--line); }
.izd-hl { font: 600 1.0667rem/1.3 var(--font-cond); margin-top: 3px; }
.izd-hl a { color: var(--ink); }
.izd-hl a:hover { color: var(--link); text-decoration: none; }
.izd-meta { font-size: 0.7667rem; color: var(--muted); margin-top: 2px; }
.sec-item { display: flex; flex-direction: column; min-width: 0; }
.sec-item .cat { font-size: 0.7333rem; }
.sec-hl { font: 700 1.2667rem/1.14 var(--font-cond); margin: 5px 0 6px; }
.sec-hl a { color: var(--ink); }
.sec-hl a:hover { color: var(--link); text-decoration: none; }
.sec-meta { font-size: 0.7667rem; color: var(--muted); margin-top: auto; }

.rail { flex: 4 1 300px; min-width: 0; border-left: 1px solid var(--line); padding-left: 26px; }
@media (max-width: 949px) { .rail { flex: 1 1 100%; border-left: 0; padding-left: 0; margin-top: 4px; } }
.rail-head { display: flex; align-items: center; gap: 9px; padding-bottom: 10px; border-bottom: 2px solid var(--ink); }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--red-badge); flex: none; }
.rail-title { font: 800 1.2rem/1 var(--font-cond); letter-spacing: 0.06em; }
.rail-more { margin-left: auto; font-size: 0.8rem; font-weight: 600; }
.rail-item { padding: 11px 0; border-bottom: 1px solid var(--line); }
.rail-time { color: var(--red); font-size: 0.8rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.rail-hl { margin: 2px 0; }
.rail-hl a { font: 600 1.0667rem/1.28 var(--font-cond); color: var(--ink); }
.rail-hl a:hover { color: var(--link); text-decoration: none; }
.rail-src { color: var(--muted); font-size: 0.7667rem; }

/* The band and the footer are brand-navy slabs sitting directly on the
   page. In dark mode navy and page background are close in value, so a
   hairline is what keeps them from bleeding into each other. */
.teme { background: var(--navy); border: 1px solid var(--band-line); margin-top: var(--mod-gap); padding: 20px 26px; }
.teme-title { color: rgba(255,255,255,0.6); font: 800 0.8rem/1 var(--font-cond); letter-spacing: 0.16em; margin-bottom: 14px; }
.teme-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 26px; }
.tema { border-left: 3px solid var(--red-badge); padding-left: 14px; }
.tema-name { font: 700 1.4rem/1.15 var(--font-cond); }
.tema-name a { color: #ffffff; }
.tema-meta { color: rgba(255,255,255,0.62); font-size: 0.8rem; margin-top: 4px; }
/* The two publishers lead the meta line, so they get the readable white
   the counts behind them do not need. */
.tema-meta strong { color: rgba(255,255,255,0.86); font-weight: 600; }

/* ----- BROJKE DANA (§130.1, 2026-08-27) -----
   Three figures lifted out of today's summaries by a deterministic
   scanner (brojke.ts — no model, no cost). Renders only from two
   entries up; below that the module is absent, not empty. */

.block { margin-top: var(--mod-gap); }
/**
 * Block header. Baseline alignment is what puts "Više iz rubrike →" on
 * the same line as the rubric name instead of floating a few pixels off
 * it; the bar and the hairline have no text baseline of their own, so
 * they are centred explicitly rather than being aligned by their bottom
 * margin edge (which is what a flex item without a baseline uses).
 */
.block-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px;
  /* Varijanta C: tinted band in the rubric's color behind the header.
     color-mix keeps ONE definition per rubric — the tint tracks the
     theme-correct --cat-color automatically in light and dark. */
  background: linear-gradient(90deg, color-mix(in srgb, var(--cat-color, var(--red-badge)) 16%, transparent), transparent 72%);
  border-left: 6px solid var(--cat-color, var(--red-badge)); padding: 9px 14px 9px 12px; }
.block-bar { display: none; }
.block-name { font: 800 1.8rem/1 var(--font-cond); letter-spacing: 0.04em; text-transform: uppercase; }
.block-rule { flex: 1; height: 1px; background: transparent; align-self: center; }
.block-more { font: 700 0.8667rem/1 var(--font-cond); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.block-grid { display: flex; flex-wrap: wrap; gap: 26px; }
.block-feat { flex: 5 1 300px; min-width: 0; }
.feat-hl { font: 700 1.6rem/1.12 var(--font-cond); }
.feat-hl a { color: var(--ink); }
.feat-hl a:hover { color: var(--link); text-decoration: none; }
.feat-dek { margin: 8px 0 6px; font-size: 0.9333rem; line-height: 1.5; color: var(--body); }
.feat-meta { font-size: 0.7667rem; color: var(--muted); }
/**
 * Middle column vs right column. Both used to be a headline over a grey
 * meta line at nearly the same size, so a reader could not tell the two
 * apart (owner, 2026-08-27). The subs now carry a one-line dek and a
 * larger headline; the list drops a point of size and a little leading
 * and separates its rows with a hairline BETWEEN them — a border-bottom
 * on every row left a rule hanging under the last one.
 */
.block-subs { flex: 4 1 270px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.sub-item + .sub-item { border-top: 1px solid var(--line); padding-top: 14px; }
.sub-hl { margin-bottom: 4px; }
.sub-hl a { font: 600 1.1667rem/1.2 var(--font-cond); color: var(--ink); }
.sub-hl a:hover { color: var(--link); text-decoration: none; }
.sub-dek { margin: 3px 0 5px; font-size: 0.8667rem; line-height: 1.45; color: var(--body); }
.block-list { flex: 3 1 230px; min-width: 0; }
.list-item { padding: 8px 0; }
.list-item + .list-item { border-top: 1px solid var(--line); }
.list-item a { font: 600 0.9667rem/1.2 var(--font-cond); color: var(--ink); }
.list-item a:hover { color: var(--link); text-decoration: none; }
.list-meta { color: var(--muted); font-size: 0.7333rem; }
/* main.shell already pays 36px of bottom padding; this used to add 48
   more and scrolled the footer off an otherwise full page. */
.home-end { height: 10px; }

/* ----- list pages (Najnovije / Više / Sve / Izvori) ----- */
.page { max-width: 860px; padding-top: 26px; padding-bottom: 24px; }
.page-head { display: flex; align-items: baseline; gap: 12px; border-bottom: 2px solid var(--ink); padding-bottom: 10px; flex-wrap: wrap; }
.page-head .dot { align-self: center; width: 10px; height: 10px; }
.page-title { font: 800 2rem/1 var(--font-cond); letter-spacing: 0.03em; text-transform: uppercase; }
.page-sub { color: var(--muted); font-size: 0.8333rem; }

.river-row { display: grid; grid-template-columns: 60px 1fr; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.river-time { color: var(--red); font-size: 0.8667rem; font-weight: 700; font-variant-numeric: tabular-nums; padding-top: 2px; }
.river-src { font-size: 0.7333rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.river-src .river-status { color: var(--amber); }
.river-src a { font-weight: 600; letter-spacing: 0; text-transform: none; }
.river-hl { margin: 3px 0; }
.river-hl a { font: 700 1.2667rem/1.2 var(--font-cond); color: var(--ink); }
.river-hl a:hover { color: var(--link); text-decoration: none; }
.river-sum { margin: 2px 0 0; font-size: 0.9rem; line-height: 1.5; color: var(--body); max-width: 560px; }

.cat-row { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--line); }
.cat-cell { flex: none; width: 104px; color: var(--red); font: 800 0.8rem/1.3 var(--font-cond); letter-spacing: 0.1em; text-transform: uppercase; }
.cat-row > a { flex: 1 1 260px; min-width: 0; font: 700 1.2rem/1.25 var(--font-cond); color: var(--ink); }
.cat-row > a:hover { color: var(--link); text-decoration: none; }
.cat-meta { color: var(--muted); font-size: 0.7667rem; white-space: nowrap; }

.search-row { display: flex; gap: 10px; margin: 18px 0 6px; }
.search-row input[type=search] { flex: 1; min-width: 0; font: 0.9333rem var(--font-body); padding: 11px 14px; border: 1px solid var(--field-border); background: var(--surface); color: var(--ink); border-radius: 2px; }
.search-row button { font: 700 1rem/1 var(--font-cond); letter-spacing: 0.1em; background: var(--navy); color: #ffffff; border: 0; padding: 0 26px; cursor: pointer; border-radius: 2px; }
.all-row { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--line); }
.all-time { flex: none; width: 44px; color: var(--muted); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.all-src { flex: none; width: 118px; color: var(--link); font-size: 0.8333rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.all-row > a { flex: 1 1 240px; min-width: 0; font: 600 1.1333rem/1.3 var(--font-cond); color: var(--ink); }
.all-row > a:hover { color: var(--link); text-decoration: none; }
.pager { display: flex; gap: 22px; justify-content: center; padding: 22px 0 24px; font-weight: 600; font-size: 0.9rem; }

.src-row { display: grid; grid-template-columns: 46px 1fr auto; gap: 16px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--line); }
.src-avatar { width: 46px; height: 46px; background: var(--navy); display: grid; place-items: center; }
.src-avatar span { font: 800 1.4rem/1 var(--font-cond); color: #ffffff; }
.src-name { font: 700 1.2rem/1.2 var(--font-cond); }
.src-name a { color: var(--ink); }
.src-meta { color: var(--muted); font-size: 0.8rem; }
.btn-follow { font: 700 0.8667rem/1 var(--font-cond); letter-spacing: 0.08em; border: 2px solid var(--navy); background: var(--navy); color: #ffffff; padding: 8px 18px; cursor: pointer; white-space: nowrap; }
.btn-follow.following { background: var(--surface); color: var(--link); }

/* ----- story detail ----- */
.detail { max-width: 760px; padding-top: 26px; padding-bottom: 24px; }
.detail-hl { font: 700 clamp(1.8667rem, 1.3rem + 3vw, 2.6667rem)/1.06 var(--font-cond); margin-top: 10px; }
.ukratko { background: var(--box); border-top: 3px solid var(--navy); padding: 16px 22px 18px; margin: 18px 0; }
.ukratko-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; flex-wrap: wrap; }
.ukratko-title { font: 800 1rem/1 var(--font-cond); letter-spacing: 0.1em; }
.ukratko-note { color: var(--muted); font-size: 0.7333rem; }
.ukratko p { margin: 8px 0 0; font-size: 0.9667rem; line-height: 1.6; }
.prenose-head { border-bottom: 2px solid var(--ink); padding-bottom: 8px; margin-top: 28px; }
.prenose-title { font: 800 1.2rem/1 var(--font-cond); letter-spacing: 0.06em; }
.prenose-note { color: var(--muted); font-size: 0.8rem; margin-left: 8px; }
.prenose-row { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.prenose-src { font-size: 0.8rem; margin-bottom: 3px; }
.prenose-src strong { color: var(--link); font-weight: 700; }
.prenose-src span { color: var(--muted); }
.prenose-hl a { font: 600 1.2rem/1.25 var(--font-cond); color: var(--ink); }
.prenose-hl a:hover { color: var(--link); text-decoration: none; }
.original { font: 700 0.8667rem/1 var(--font-cond); letter-spacing: 0.06em; white-space: nowrap; }
/* External-link marker: every anchor that exits Diretur carries it
   (originalLink in routes/ui.ts), internal navigation never does. */
.ext { font: 400 0.72em/1 var(--font-sans); margin-left: 0.3em; opacity: 0.55; vertical-align: 0.08em; }

/* ----- generic cards & forms (auth, account, admin, 404) ----- */
h1.section { font: 800 1.3333rem/1.2 var(--font-cond); letter-spacing: 0.05em; text-transform: uppercase; margin: 1.5rem 0 0.7rem; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 2px; padding: 1rem 1.15rem; margin-bottom: 0.75rem; }
.card h1 { font: 700 1.7333rem/1.15 var(--font-cond); margin-bottom: 0.4rem; }
.card h2 { font: 700 1.5333rem/1.15 var(--font-cond); margin: 0.1rem 0 0.5rem; }
.card.compact { padding: 0.65rem 1rem; }
.meta { color: var(--muted); font-size: 0.82rem; display: flex; flex-wrap: wrap; gap: 0.55rem; align-items: center; }
.summary { margin: 0.4rem 0; }
.kicker { color: var(--muted); font-size: 0.86rem; margin: 0.25rem 0; }
.kicker strong { color: var(--ink); }
table.breakdown { border-collapse: collapse; font-size: 0.83rem; margin-top: 0.4rem; }
table.breakdown td { border: 1px solid var(--line); padding: 0.14rem 0.5rem; }

form.inline { display: inline; }
button, .btn {
  font: 600 0.9333rem/1.3 var(--font-body); border: 1px solid var(--field-border); background: var(--surface); color: var(--ink);
  border-radius: 2px; padding: 0.4rem 0.9rem; cursor: pointer; display: inline-block;
}
button.primary, .btn.primary { background: var(--navy); color: #ffffff; border-color: var(--navy); }
button.danger { border-color: var(--red-badge); color: var(--red); font-weight: 600; }
.danger-zone { border-color: var(--red-badge); }
.danger-zone h1 { font-size: 1.2rem; margin: 0 0 0.5rem; }
button.small { padding: 0.15rem 0.6rem; font-size: 0.82rem; }
input[type=text], input[type=email], input[type=search], input[type=password] {
  font: inherit; padding: 0.45rem 0.6rem; border: 1px solid var(--field-border); border-radius: 2px;
  background: var(--surface); color: var(--ink); width: 100%;
}
label { display: block; margin: 0.7rem 0 0.25rem; font-size: 0.88rem; color: var(--muted); }
.auth-box { max-width: 430px; margin: 2.5rem auto; }
.auth-box .card { padding: 1.4rem; }
/* Height only — the mark is no longer square, and a fixed width stretched
   it 16% wider than the same mark in the masthead. */
.auth-logo { display: block; height: 64px; width: auto; margin: 0 auto 0.8rem; }
/* Which colourway shows follows the resolved theme, exactly like the
   palette: an explicit choice wins, otherwise the OS decides. */
.auth-logo.on-dark { display: none; }
html.t-dark .auth-logo.on-dark { display: block; }
html.t-dark .auth-logo.on-light { display: none; }
@media (prefers-color-scheme: dark) {
  html:not(.t-light) .auth-logo.on-dark { display: block; }
  html:not(.t-light) .auth-logo.on-light { display: none; }
}
.notice { border-left: 4px solid var(--navy); padding: 0.6rem 0.9rem; background: var(--box); margin: 0.8rem 0; }
.notice.error { border-color: var(--red-badge); color: var(--red); }
.key-box {
  font: 0.95rem/1.4 ui-monospace, monospace; background: var(--box); color: var(--ink);
  padding: 0.7rem 0.9rem; border-radius: 2px; word-break: break-all; user-select: all;
}
.google-btn {
  width: 100%; font-weight: 600; padding: 0.5rem 0.8rem;
  border: 1px solid var(--field-border); background: var(--surface); color: var(--ink);
}
.or-sep { text-align: center; color: var(--muted); font-size: 0.82rem; margin: 0.6rem 0; }
.verify-banner {
  background: var(--box); border: 1px solid var(--line); border-left: 4px solid var(--amber);
  padding: 0.75rem 1rem; margin: 1.2rem 0 0.4rem; font-size: 0.92rem;
}
.verify-banner form { display: inline; }
.story-title { margin: 0.4rem 0; font-size: 1.45rem; line-height: 1.3; }
table.admin { border-collapse: collapse; width: 100%; font-size: 0.84rem; background: var(--surface); }
table.admin th, table.admin td { border: 1px solid var(--line); padding: 0.3rem 0.55rem; text-align: left; }
/* An unbreakable value — an e-mail address, a URL — otherwise widens the
   table past a 320px screen and takes the page with it. */
table.admin td { overflow-wrap: anywhere; }
table.admin th { background: var(--box); }
/* Counts and money read as columns of digits, not as words. */
table.admin td.n, table.admin th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ----- /admin dashboard (readability pass, 2026-08-27) -----
 * The owner's complaint was not density, it was that a number said
 * nothing about itself: "Ukupno 5948 — ukupno šta? U svijetu? U izvorima?
 * kojim? dokle u povijest seže ta brojka?" Eleven bare <h1>s over eleven
 * bare tables, with the h1/h2/h3 margin reset above removing even the
 * whitespace that would have grouped them, gave him no way in.
 *
 * The fix is structural, not decorative: four <h2> sections in reading
 * order, a panel per question, and — the load-bearing part — every figure
 * carrying its own one-line definition INSIDE the card rather than in a
 * paragraph somewhere below the table. Nothing here changes a number.
 */
.adm { padding-top: 12px; padding-bottom: 36px; }
.adm-title { font: 800 2rem/1 var(--font-cond); letter-spacing: 0.03em; text-transform: uppercase; }
/* Prose measure. The tables want the full 1200px shell; sentences do not
   — a 180-character line is its own readability bug. */
.adm-lede, .adm-what, .adm-note, .adm-read { max-width: 86ch; }
.adm-lede { color: var(--body); font-size: 0.95rem; line-height: 1.6; margin: 8px 0 0; }
.adm-toc { background: var(--box); border: 1px solid var(--line); border-radius: 2px;
  padding: 12px 16px 14px; margin: 18px 0 6px; font-size: 0.88rem; }
.adm-toc-title { font: 800 0.8rem/1 var(--font-cond); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 8px; }
.adm-toc ol { margin: 0; padding-left: 20px; }
.adm-toc li { margin: 5px 0; line-height: 1.5; }
.adm-toc li > a { font-weight: 700; }
.adm-toc .adm-toc-sub { color: var(--muted); }
.adm-toc .adm-toc-sub a { text-decoration: underline; }

h2.adm-sec { font: 800 1.6667rem/1.1 var(--font-cond); letter-spacing: 0.05em; text-transform: uppercase;
  margin-top: 44px; padding: 12px 0 9px; border-top: 3px solid var(--ink); border-bottom: 1px solid var(--line); }
.adm-sec-note { color: var(--muted); font-size: 0.85rem; margin: 7px 0 0; }

.adm-panel { margin-top: 28px; }
.adm-panel h3 { font: 700 1.4rem/1.2 var(--font-cond); letter-spacing: 0.02em; }
/* The sentence that answers WHAT / OVER WHAT / SINCE WHEN. It is body
   ink, not muted grey: it is the panel, not a footnote to it. */
.adm-what { color: var(--body); font-size: 0.92rem; line-height: 1.6; margin: 5px 0 0; }
.adm-what strong { color: var(--ink); font-weight: 600; }
.adm-note { color: var(--muted); font-size: 0.84rem; line-height: 1.55; margin: 8px 0 0; }
/* "What a healthy reading looks like" — the answer to "je li ovo dobro?" */
.adm-read { border-left: 3px solid var(--ok); background: var(--box); border-radius: 0 2px 2px 0;
  padding: 8px 12px; margin: 12px 0 0; font-size: 0.85rem; line-height: 1.55; color: var(--body); }
.adm-read strong { color: var(--ink); }
.adm-panel .table-scroll { margin-top: 12px; }
/* An inline state marker inside a table cell — "obrada pauzirana", and
   whatever follows it. Muted and small on purpose: it qualifies the row it
   sits in, it does not compete with the name it follows. */
.adm-flag { display: inline-block; font: 600 0.7333rem/1.3 var(--font-cond); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted); border: 1px solid var(--line);
  border-radius: 2px; padding: 1px 5px; margin-left: 6px; white-space: nowrap; }

/* Figure cards. A stat row in a 7-column table forces the reader to
   carry a header across the screen and gives a term like "obrađeno"
   nowhere to be defined; a card puts the label, the value and the
   definition in one block. */
.adm-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 12px; margin: 14px 0 0; }
.adm-fig { border: 1px solid var(--line); background: var(--surface); border-radius: 2px; padding: 11px 13px; }
.adm-fig dt { font: 700 0.8667rem/1.25 var(--font-cond); letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); }
.adm-fig dd { margin: 0; }
.adm-fig dd.v { font: 700 1.8rem/1.15 var(--font-cond); color: var(--ink); font-variant-numeric: tabular-nums; padding: 3px 0 4px; }
.adm-fig dd.d { font-size: 0.82rem; line-height: 1.5; color: var(--body); }

/* A sub-heading inside a panel: the Korisnici panel carries figures AND a
   table of individual accounts, and the second half needs its own entry
   point without becoming a panel of its own. */
h4.adm-sub { font: 700 1.0667rem/1.25 var(--font-cond); letter-spacing: 0.03em;
  margin: 22px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }

/* Per-row account deletion. The DSA form's .check spacing is built for a
   full-width form; inside a table cell the two boxes and the button have
   to read as ONE control, or the confirmation looks unrelated to the
   button it guards. */
.adm-del { max-width: 34ch; }
.adm-del .check { margin: 0 0 6px; gap: 0.45rem; }
.adm-del .check label { font-size: 0.78rem; line-height: 1.4; }
.adm-del button { padding: 0.28rem 0.7rem; font-size: 0.82rem; }

/* Per-row paket change. Select and button on one line, directly under the
   value they change — the cell then reads "this is the paket, this is how
   you change it" instead of as a second, unrelated control. */
.adm-plan { display: flex; gap: 0.35rem; align-items: center; margin-top: 6px; }
.adm-plan select { width: auto; flex: 0 1 auto; padding: 0.2rem 0.35rem; font-size: 0.82rem; }
.adm-plan button { padding: 0.28rem 0.7rem; font-size: 0.82rem; white-space: nowrap; }

/* „Novi račun". Inputs are width:100% by default, and a 1200px-wide e-mail
   field reads as a banner rather than a form; the measure matches the
   panel's prose. */
.adm-new-user { max-width: 46ch; margin-top: 10px; }
.adm-new-user .check label { font-size: 0.83rem; line-height: 1.45; }
/* The paket select must not stretch to the form's full measure like the
   text inputs do — three short words in a 46ch box read as a mistake. */
.adm-new-user select { width: auto; min-width: 14ch; }

/* Vocabulary legend, placed WHERE the word appears. */
.adm-legend { border: 1px solid var(--line); background: var(--box); border-radius: 2px;
  padding: 11px 15px 13px; margin: 12px 0 0; font-size: 0.86rem; }
.adm-legend-title { font: 800 0.8rem/1 var(--font-cond); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 9px; }
.adm-legend dl { margin: 0; }
.adm-legend dt { font-weight: 700; color: var(--ink); margin-top: 9px; }
.adm-legend dl > dt:first-child { margin-top: 0; }
.adm-legend dd { margin: 2px 0 0; color: var(--body); line-height: 1.5; }

/* ----- footer (deep navy) ----- */
/**
 * Footer. Two earlier versions put site navigation down here — first a
 * three-column link grid, then rows of chips — and both were wrong for
 * the same reason: every one of those links already sits in the header
 * or the rubric strip, so the footer was a second, bulkier copy of the
 * navigation (owner, 2026-08-09). What belongs in a footer is what
 * belongs nowhere else: the AI disclosure the product is legally
 * required to carry (§56 / AI Act Art. 50), how to reach us, and the
 * copyright line. It is now three short lines tall.
 *
 * Terms of service and a privacy notice belong here too and are NOT
 * linked yet: those documents do not exist until the §118 legal package
 * lands, and a footer link to a 404 is worse than no link.
 */
.foot { background: var(--navy-deep); border-top: 1px solid var(--band-line); flex: none; }
.foot-inner { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 28px;
  padding-top: 18px; padding-bottom: 14px; }
.foot-desc { color: rgba(255,255,255,0.62); font-size: 0.8333rem; line-height: 1.55;
  margin: 0; flex: 1 1 320px; max-width: 62ch; }
.foot-meta { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.foot-meta a { color: rgba(255,255,255,0.85); font-size: 0.8333rem; padding: 6px 0; }
.foot-meta a:hover { color: #ffffff; }

/* ----- legal documents ----- */
.legal { max-width: 68ch; padding-top: 6px; padding-bottom: 40px; }
.legal h1 { font: 700 clamp(1.7333rem, 1.3rem + 2vw, 2.4rem)/1.1 var(--font-cond); margin: 8px 0 4px; }
.legal h2 { font: 800 1.3333rem/1.2 var(--font-cond); letter-spacing: 0.03em; text-transform: uppercase;
  margin: 30px 0 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.legal h3 { font: 700 1.1333rem/1.25 var(--font-cond); margin: 20px 0 4px; }
.legal h4 { font: 700 1rem/1.3 var(--font-body); margin: 16px 0 2px; color: var(--body); }
.legal p { margin: 8px 0; line-height: 1.65; color: var(--body); }
.legal li { margin: 5px 0; line-height: 1.6; color: var(--body); }
.legal ul, .legal ol { padding-left: 22px; margin: 8px 0; }
.legal a { text-decoration: underline; }
.legal code { font: 0.92em ui-monospace, monospace; background: var(--box); padding: 1px 5px; border-radius: 2px; }
.legal hr { border: 0; border-top: 1px solid var(--line); margin: 24px 0; }
.legal-table { border-collapse: collapse; width: 100%; font-size: 0.9333rem; margin: 12px 0; }
.legal-table th, .legal-table td { border: 1px solid var(--line); padding: 8px 10px;
  text-align: left; vertical-align: top; }
.legal-table th { background: var(--box); color: var(--ink); font-weight: 700; }
.legal-table td { color: var(--body); }
.legal .table-scroll { overflow-x: auto; }
/* The document's own lead paragraph, before the first section. */
.legal h1 + p { font-size: 1.0667rem; color: var(--ink); }
.foot-copy { flex: 1 1 100%; margin: 2px 0 0; color: rgba(255,255,255,0.5); font-size: 0.7667rem; }

/* ----- display preference controls ----- */
.prefs { display: flex; gap: 8px; }
/* No overflow:hidden — it clipped the focus ring (drawn outside the
   button box by outline-offset) off the first and last buttons, leaving
   the menu's theme and size controls with no visible focus state. */
.pref-group { display: flex; margin: 0; border-radius: 2px; }
.pref-btn { font: 0.8rem/1 var(--font-body); border: 0; border-radius: 0; cursor: pointer; padding: 8px 10px; }
/* Compact pair on the navy masthead: white-on-navy, inverted when on. */
.pref-group.compact { border: 1px solid rgba(255,255,255,0.55); }
.pref-group.compact .pref-btn { background: transparent; color: rgba(255,255,255,0.9); }
.pref-group.compact .pref-btn + .pref-btn { border-left: 1px solid rgba(255,255,255,0.55); }
.pref-group.compact .pref-btn:hover { background: rgba(255,255,255,0.12); color: #ffffff; }
.pref-group.compact .pref-btn.on { background: #ffffff; color: #16407a; font-weight: 700; }
/* Labelled trio inside the menu panel, which sits on the page surface. */
.pref-group.labelled { border: 1px solid var(--field-border); margin: 0 8px 8px; }
.pref-group.labelled .pref-btn { flex: 1; background: var(--surface); color: var(--ink);
  font-size: 0.8667rem; padding: 12px 6px; }
.pref-group.labelled .pref-btn + .pref-btn { border-left: 1px solid var(--field-border); }
.pref-group.labelled .pref-btn:hover { background: var(--box); }
.pref-group.labelled .pref-btn.on { background: var(--navy); color: #ffffff; font-weight: 700; }

/* ----- DSA notice form (§127) ----- */
/* The only long-form input in the product. It reuses the field border,
   surface and radius of the auth inputs so a public form still reads as
   the same product; only the height and the resize handle are new. */
textarea, select {
  font: inherit; padding: 0.45rem 0.6rem; border: 1px solid var(--field-border); border-radius: 2px;
  background: var(--surface); color: var(--ink); width: 100%;
}
textarea { min-height: 8.5rem; line-height: 1.55; resize: vertical; }
/* A checkbox must not inherit the 100% width of the text fields, and the
   label has to stay clickable next to it (Art. 16(1)(d) statement). */
.check { display: flex; gap: 0.6rem; align-items: flex-start; margin: 0.9rem 0 0.2rem; }
.check input[type=checkbox] { width: auto; flex: none; margin-top: 0.25rem; }
.check label { margin: 0; font-size: 0.9rem; color: var(--body); }
.form-page { max-width: 62ch; }
.ref-code { font: 700 1.15rem/1.3 ui-monospace, monospace; letter-spacing: 0.08em; }

/* ----- phone overrides that must beat rules declared above ----------
   A media query contributes NO specificity, so every rule here wins only
   because it comes last. This block MUST stay at the very bottom of the
   sheet; a test asserts it. */
@media (max-width: 700px) {
  /* Touch targets. A finger needs ~40px; the desktop boxes are ~28px. */
  .pref-btn { padding: 13px 11px; }
  .nav-link { padding: 14px 12px 11px; }
  .btn-follow { padding: 12px 18px; }
  .pager { gap: 28px; }
  .pager a { padding: 10px 6px; }
  .backlink { padding-top: 16px; padding-bottom: 16px; }
  /* A 240px minimum track cannot fit a 320px screen once the band's own
     padding is taken out, so the grid overflowed its navy box. */
  .teme-grid { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
  .teme { padding: 18px 16px; }
  /* Two 160px cards side by side would chop a condensed headline into
     three lines; on a phone the secondaries are a list. */
  .secondaries { grid-template-columns: 1fr; gap: 18px; }
  .izd-grid { grid-template-columns: 1fr; }
  .izd-item:nth-child(n+2) { border-top: 1px solid var(--line); }
  .sec-meta { margin-top: 4px; }
  /* The 220px track already collapses the figures to one column here
     (min() keeps them inside a 375px screen); only the gap is too airy
     once they stack. */
  /* Dense tables scroll inside their own box instead of widening the
     page. The min-width is scoped to that box on purpose: applied to
     every .admin table it would push the two-column account table off a
     375px screen, which is the bug this rule was meant to prevent. */
  .table-scroll { overflow-x: auto; }
  .table-scroll table.admin { min-width: 520px; }
  /* Eight columns, one of them a form with two checkbox labels: 520px
     would stack every label into a column of single words. */
  .table-scroll table.adm-users { min-width: 1000px; }
  /* Legal tables are two or three columns of prose — let them reflow
     rather than scroll, which reads far better on a phone. */
  .legal-table { font-size: 0.9rem; }
  .legal-table th, .legal-table td { padding: 7px 8px; }
}

html { font-size: 15px; }
html.f-small { font-size: 13.5px; }
html.f-large { font-size: 17.5px; }