/* ============================================
   Geoskop site styles
   One plain stylesheet, no framework. Two themes from one set of tokens:
   dark (the default when the device does not ask for light) and light. The
   theme is the data-theme attribute on <html>, set before the first paint by
   the script at the top of templates/layout/base.html; script.js switches it.
   The header keeps the dark colours in both themes.
   ============================================ */

/* Self-hosted fonts (SIL OFL 1.1, fonts/OFL-*.txt), only the weights used
   below, each split into latin and latin-ext so a page fetches only the files
   its text needs (Croatian č ć đ š ž are in latin-ext). Served from this
   origin on purpose: loading fonts from Google sends every visitor's IP
   address to Google. Declared here rather than in a second stylesheet so
   pages wait for one CSS request, not two. Files come from Fontsource 5. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/static/fonts/inter-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: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/static/fonts/inter-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: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/static/fonts/inter-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: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/static/fonts/inter-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: 'Space Grotesk';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/static/fonts/space-grotesk-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: 'Space Grotesk';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/static/fonts/space-grotesk-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: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/static/fonts/ibm-plex-mono-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: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/static/fonts/ibm-plex-mono-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;
}

/* ============================================
   Tokens
   ============================================ */

:root {
  color-scheme: dark;

  /* Dark theme: deep slate, the brand yellow as the one bright colour. */
  --bg: #0b0f14;
  --surface: #121821;
  --surface-alt: #0f141b;
  --surface-sunken: #1a222d;
  --card-bg: linear-gradient(180deg, #141b25, #10161e);
  --input-bg: #0d1218;
  --text: #e7ecf2;
  --text-muted: #a6b0bd;
  --text-subtle: #8792a0;
  --border: #232c38;
  --border-strong: #3a4757;
  /* Form fields' outline: ≥ 3:1 against the card, the panel and the field
     itself (WCAG 1.4.11), unlike the decorative borders above. */
  --input-border: #647182;
  /* Fill colour behind dark text (buttons, the selection, step 3). */
  --accent: #f5d547;
  --accent-strong: #ffe066;
  --on-accent: #0b0f14;
  /* The yellow where it is text itself: readable on dark only, so the light
     theme replaces it (≈ 13:1 on --bg here). */
  --accent-text: #f5d547;
  --accent-glow: rgb(245 213 71 / 0.10);
  --link: #8ab4ff;
  --focus: #f5d547;
  --danger: #ff8a7a;
  /* Behind white text (the delete button): ≥ 4.5:1. */
  --danger-strong: #cc3a2b;
  --success: #6ee7a8;
  --success-bg: #0f2a1f;
  /* Steps 1 and 2 beside the report form: dark circles with an edge that
     stays visible on the panel (≥ 3:1). */
  --step-bg: #05080b;
  --step-edge: #6b7889;
  --step-text: #e7ecf2;
  --map-bg: #0e141b;
  --map-chip-bg: rgb(18 24 33 / 0.92);
  --shadow: 0 1px 0 rgb(255 255 255 / 0.04) inset, 0 8px 24px rgb(0 0 0 / 0.35);
  --shadow-lg: 0 20px 50px rgb(0 0 0 / 0.55);
  /* The edge of a panel that scrolls further (the home page's panel). */
  --scroll-hint: rgb(255 255 255 / 0.24);
  --backdrop: rgb(0 0 0 / 0.65);

  /* The header (and its menus) look the same in both themes. */
  --hdr-bg: #0b0f14;
  --hdr-surface: #121821;
  --hdr-text: #e7ecf2;
  --hdr-muted: #a6b0bd;
  --hdr-border: #232c38;
  /* Outlines of the header's buttons (theme switch, Prijava, Izbornik): ≥ 3:1. */
  --hdr-border-strong: #5b6778;
  --hdr-hover: rgb(255 255 255 / 0.06);
  --hdr-accent: #f5d547;

  --font-body: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-head: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --radius: 14px;
  --radius-sm: 9px;
  --radius-btn: 10px;
  --container: 1160px;
  --gutter: 24px;
  --section-pad: 64px;
  --header-h: 64px;
  --reading: 760px;
  /* Prijava + Registracija, the widest thing shown right of the theme switch. */
  --auth-slot: 13.5rem;
}

/* Light theme: the same layout and accents on white. The yellow is only a
   fill here (≈ 1.5:1 as text on white), so text accents turn dark. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f6f8;
  --surface: #ffffff;
  --surface-alt: #ffffff;
  --surface-sunken: #eef1f5;
  --card-bg: #ffffff;
  --input-bg: #ffffff;
  --text: #121821;
  --text-muted: #475467;
  --text-subtle: #5d6878;
  --border: #dde2e8;
  --border-strong: #b9c1cc;
  --input-border: #7b8594;
  --accent: #f4d03f;
  --accent-strong: #e6be1f;
  --on-accent: #0b0f14;
  --accent-text: #121821;
  --accent-glow: rgb(244 208 63 / 0.22);
  --link: #1d4ed8;
  --focus: #1d4ed8;
  --danger: #b42318;
  --danger-strong: #b42318;
  --success: #106c3b;
  --success-bg: #e7f6ee;
  --step-bg: #121821;
  --step-edge: #121821;
  --step-text: #ffffff;
  --map-bg: #e9eef2;
  --map-chip-bg: rgb(255 255 255 / 0.94);
  --shadow: 0 1px 2px rgb(16 24 40 / 0.06), 0 4px 16px rgb(16 24 40 / 0.06);
  --shadow-lg: 0 12px 40px rgb(16 24 40 / 0.16);
  --scroll-hint: rgb(16 24 40 / 0.24);
  --backdrop: rgb(10 12 16 / 0.55);
}

@media (max-width: 720px) {
  :root {
    --gutter: 16px;
    --section-pad: 44px;
    --header-h: 56px;
  }
}

/* ============================================
   Base
   ============================================ */

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

/* Elements laid out with display:flex/grid below would otherwise ignore the
   hidden attribute the scripts toggle. */
[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  /* In-page anchors land below the sticky header. */
  scroll-padding-top: calc(var(--header-h) + 16px);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

main {
  flex: 1 0 auto;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-wrap: balance;
}

p,
ul,
ol,
figure {
  margin: 0;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--link);
  text-underline-offset: 0.18em;
}

strong {
  font-weight: 600;
  color: var(--text);
}

code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  overflow-wrap: anywhere;
}

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

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: -48px;
  left: 12px;
  z-index: 100;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}

.skip-link:focus {
  top: 8px;
}

/* ============================================
   Header
   ============================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--hdr-bg);
  border-bottom: 1px solid var(--hdr-border);
  color: var(--hdr-text);
  /* Focus rings in the header are yellow in both themes. */
  --focus: var(--hdr-accent);
}

.header-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--header-h);
  padding: 0 var(--gutter);
}

/* Logo + wordmark; "by Giskit" small and grey beneath it. On the home page
   it is the page's heading (.header-title), placed as on every page. */
.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  color: inherit;
  text-decoration: none;
}

.header-title {
  display: flex;
  flex-shrink: 0;
  font: inherit;
  letter-spacing: normal;
}

.nav-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

/* Shown in capitals; the text itself stays "Geoskop". */
.nav-brand-name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--hdr-accent);
}

.nav-brand-by {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--hdr-muted);
}

.nav-links {
  display: flex;
  gap: 4px;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  color: var(--hdr-muted);
  font-size: 0.95rem;
  text-decoration: none;
  transition: color 0.15s, background-color 0.15s;
}

.nav-link:hover {
  color: var(--hdr-text);
  background: var(--hdr-hover);
}

.nav-link.active {
  color: var(--hdr-accent);
  background: rgb(245 213 71 / 0.08);
  font-weight: 600;
}

.nav-auth-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Prijava and Registracija: the same outlined button. */
.nav-link-outline {
  border: 1px solid var(--hdr-border-strong);
  color: var(--hdr-text);
  font-weight: 600;
}

.nav-link-outline:hover {
  border-color: var(--hdr-muted);
}

.nav-account {
  position: relative;
}

.nav-user {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 4px 12px 4px 4px;
  border: 1px solid var(--hdr-border-strong);
  border-radius: 999px;
  background: var(--hdr-surface);
  color: var(--hdr-text);
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
}

.nav-user-avatar {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--hdr-accent);
  color: #0b0f14;
  font-weight: 600;
  font-size: 0.9rem;
}

.nav-user-name {
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-user-caret {
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: 0.6;
  transition: transform 0.15s;
}

.nav-user[aria-expanded="true"] .nav-user-caret {
  transform: translateY(2px) rotate(-135deg);
}

.nav-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  min-width: 220px;
  padding: 6px;
  border: 1px solid var(--hdr-border-strong);
  border-radius: var(--radius);
  background: var(--hdr-surface);
  box-shadow: 0 20px 50px rgb(0 0 0 / 0.55);
}

.nav-menu-item {
  display: block;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--hdr-text);
  font-size: 0.95rem;
  text-decoration: none;
}

.nav-menu-item:hover,
.nav-menu-item:focus-visible {
  background: var(--hdr-hover);
}

.nav-menu-danger {
  color: #ff8a7a;
}

.header-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Sun / moon switch. The icon shows the theme in use and morphs into the
   other one (the sun's rays shrink, a shadow circle slides over it). */
.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--hdr-border-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--hdr-text);
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}

.theme-toggle:hover {
  background: var(--hdr-hover);
  border-color: var(--hdr-muted);
}

.theme-icon {
  width: 20px;
  height: 20px;
  overflow: visible;
}

.theme-icon-sun,
.theme-icon-moon,
.theme-icon-rays {
  transform-origin: center;
  transform-box: view-box;
}

.theme-icon-sun {
  fill: currentColor;
}

.theme-icon-rays {
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

/* Light theme in use: the sun. */
:root[data-theme="light"] .theme-icon-moon {
  transform: translate(9px, -9px);
}

/* Dark theme in use: a moon (the sun grows, loses its rays and is cut). */
:root:not([data-theme="light"]) .theme-icon-sun {
  transform: scale(1.6);
}

:root:not([data-theme="light"]) .theme-icon-rays {
  opacity: 0;
  transform: rotate(-30deg) scale(0.6);
}

@media (prefers-reduced-motion: no-preference) {
  .theme-icon-sun {
    transition: transform 0.45s cubic-bezier(0.5, 1.25, 0.75, 1.25);
  }

  .theme-icon-rays {
    transition: transform 0.45s cubic-bezier(0.5, 1.5, 0.75, 1.25), opacity 0.3s;
  }

  .theme-icon-moon {
    transition: transform 0.35s cubic-bezier(0, 0, 0, 1);
  }
}

/* Theme switch: the new colours spread from the switch as a circle
   (script.js); the browser's default cross-fade is turned off for it. */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

.nav-toggle {
  display: none;
}

.nav-links-more {
  display: none;
}

/* Wide screens: one row. Links centred on the page, whether or not the logo
   is shown (on the home page it sits above the report form instead). The
   theme switch sits left of Prijava/Registracija or the account, which get a
   fixed width (held from the first paint while the session loads), so the
   switch stays in the same place whether someone is signed in or not. */
@media (min-width: 861px) {
  .header-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    /* One row: the switch comes after the account in the markup, so without
       this it would be placed on a second row. */
    grid-template-rows: 100%;
    column-gap: 8px;
  }

  .header-menu {
    display: contents;
  }

  .nav-brand,
  .header-title {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }

  .nav-links {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  .header-tools {
    grid-column: 2;
    grid-row: 1;
  }

  .nav-auth {
    grid-column: 3;
    grid-row: 1;
    width: var(--auth-slot);
  }

  /* The room is kept while the session loads (base.html). */
  :root[data-auth-slot] .nav-auth[hidden] {
    display: block !important;
    visibility: hidden;
  }

  .nav-auth-group {
    justify-content: flex-end;
  }

  /* A long name is shortened rather than widening the slot. */
  .nav-account .nav-user {
    max-width: 100%;
  }

  .nav-account .nav-user-name {
    min-width: 0;
    flex: 1;
  }
}

/* Narrow screens: the logo, the theme switch and "Izbornik"; the links and
   the account open under the header. */
@media (max-width: 860px) {
  .header-tools {
    margin-left: auto;
  }

  .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid var(--hdr-border-strong);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--hdr-text);
    font: inherit;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
  }

  .nav-toggle-bars,
  .nav-toggle-bars::before,
  .nav-toggle-bars::after {
    position: relative;
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 0.2s, background-color 0.2s;
  }

  .nav-toggle-bars::before,
  .nav-toggle-bars::after {
    content: "";
    position: absolute;
    left: 0;
  }

  .nav-toggle-bars::before {
    top: -6px;
  }

  .nav-toggle-bars::after {
    top: 6px;
  }

  .site-header.is-open .nav-toggle-bars {
    background: transparent;
  }

  .site-header.is-open .nav-toggle-bars::before {
    top: 0;
    transform: rotate(45deg);
  }

  .site-header.is-open .nav-toggle-bars::after {
    top: 0;
    transform: rotate(-45deg);
  }

  .header-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    gap: 12px;
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    padding: 12px var(--gutter) 20px;
    background: var(--hdr-bg);
    border-bottom: 1px solid var(--hdr-border);
    box-shadow: 0 20px 50px rgb(0 0 0 / 0.55);
  }

  .site-header.is-open .header-menu {
    display: flex;
  }

  .nav-links {
    flex-direction: column;
    gap: 2px;
  }

  .nav-links-more {
    display: flex;
    padding-top: 10px;
    border-top: 1px solid var(--hdr-border);
  }

  .nav-link {
    min-height: 48px;
    font-size: 1.05rem;
  }

  .nav-links-more .nav-link {
    min-height: 44px;
    font-size: 0.95rem;
  }

  .nav-auth-group {
    flex-direction: column;
    align-items: stretch;
  }

  .nav-auth-group .nav-link {
    justify-content: center;
  }

  .nav-account .nav-user {
    width: 100%;
    border-radius: var(--radius-sm);
  }

  .nav-user-name {
    max-width: none;
    flex: 1;
    text-align: left;
  }

  .nav-menu {
    position: static;
    margin-top: 8px;
    box-shadow: none;
  }
}

/* ============================================
   Buttons
   ============================================ */

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: var(--radius-btn);
  font: inherit;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, box-shadow 0.15s;
  border: 1px solid transparent;
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 0 0 1px rgb(245 213 71 / 0.3), 0 8px 30px -6px rgb(245 213 71 / 0.45);
}

.btn-primary:hover {
  background: var(--accent-strong);
}

/* Disabled while the report is being generated (script.js). */
.btn-primary:disabled {
  opacity: 0.75;
  cursor: progress;
}

.btn-full-width {
  width: 100%;
}

/* Second action beside a primary one (plan discovery): an outline button of
   the same size, like the site's other outline buttons. */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid var(--input-border);
  border-radius: var(--radius-btn);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}

.btn-secondary:hover:enabled {
  border-color: var(--text-muted);
  background: var(--surface-sunken);
}

/* Like the primary button while it works (plan discovery searching). */
.btn-secondary:disabled {
  opacity: 0.75;
  cursor: progress;
}

.btn-arrow {
  transition: transform 0.15s;
}

.btn-primary:hover .btn-arrow {
  transform: translateX(3px);
}

/* Arrow links ("Upute za korištenje →" and alike) */
.form-link {
  color: var(--link);
  font-weight: 600;
  text-decoration: none;
}

.form-link:hover {
  text-decoration: underline;
}

/* The report form's "Upute →": the smallest text in the card, at the right
   of its title. It takes a 24px line, at least 44px wide (the text stays at
   the right); its target reaches 10px above and below, 44px in all, without
   moving anything. */
.form-link-small {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 44px;
  min-height: 24px;
  /* As small as the footer's data credit. */
  font-size: 0.72rem;
}

.form-link-small::after {
  content: "";
  position: absolute;
  inset: -10px 0;
}

/* ============================================
   Forms
   ============================================ */

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-label {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--text);
}

.form-input,
.form-textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  background: var(--input-bg);
  color: var(--text);
  font: inherit;
  /* 16px or more keeps iOS from zooming into the field. */
  font-size: 1rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.form-textarea {
  min-height: 140px;
  resize: vertical;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--text-subtle);
}

.form-input:hover:not(:disabled) {
  border-color: var(--text-subtle);
}

.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 28%, transparent);
}

.form-input:disabled {
  background: var(--surface-sunken);
  color: var(--text-subtle);
  cursor: not-allowed;
}

.form-input[aria-invalid="true"] {
  border-color: var(--danger);
}

select.form-input {
  appearance: none;
  padding-right: 40px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}

.form-help {
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.form-help:empty {
  display: none;
}

/* While a field shows its error, the hint under it would only repeat it. */
.form-error:not([hidden]) + .form-help {
  display: none;
}

/* The report form keeps its fields still and its messages out of the way:
   no lines under the fields, and the caption always shows. A status ("PUK
   SLAVONSKI BROD", "Traženje…", muted) or an error (red, in place of the
   status, with the field outlined) sits in a gap of the field's top border
   at the right, with the field's whole width for itself. Either is one
   line: a long one gets a smaller font until it fits (script.js). */
.step .form-group {
  display: grid;
}

.step .form-label {
  grid-row: 1;
}

/* The message shares the field's row: centred on its border line, the
   card's colour above it and the field's below, so the line breaks around
   the text. */
.step .autocomplete,
.step .form-help,
.step .form-error {
  grid-row: 2;
  grid-column: 1;
}

.step .form-help,
.step .form-error {
  z-index: 1;
  align-self: start;
  justify-self: end;
  max-width: calc(100% - 16px);
  margin-right: 8px;
  padding: 0 4px;
  overflow: hidden;
  background: linear-gradient(var(--surface) 50%, var(--input-bg) 50%);
  font-size: 0.75rem;
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
  transform: translateY(-50%);
}

/* The office name alone ("PUK ZADAR") is clear to the eye beside the K.O.
   field; screen readers are told what it is. */
#koInfo:not(:empty)::before {
  content: "" / "Katastarski ured: ";
}

.form-error {
  font-size: 0.87rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--danger);
}

/* Report progress and errors under the button (script.js). */
.form-status {
  font-size: 0.9rem;
  color: var(--text-muted);
}

.form-status:empty {
  display: none;
}

/* A message under the button; the spinner only while work is in progress
   (script.js: busy while the report is generated) and while plan discovery
   searches (its results are aria-busy meanwhile). */
.form-status.active,
.plan-results[aria-busy="true"] .plan-status {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
}

/* The spinner's place is kept for the report's later messages, so their
   text starts where the work-in-progress text did. */
.form-status.active::before,
.plan-results[aria-busy="true"] .plan-status::before {
  content: "";
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border: 2px solid transparent;
  border-radius: 50%;
}

.form-status.busy::before,
.plan-results[aria-busy="true"] .plan-status::before {
  border-color: var(--border-strong);
  /* Dark in the light theme, where the yellow would barely show on white. */
  border-top-color: var(--accent-text);
  animation: spin 0.8s linear infinite;
}

.form-status.error {
  color: var(--danger);
  font-weight: 600;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Autocomplete under the K.O. and parcel fields (index.html) */
.autocomplete {
  position: relative;
}

.autocomplete-suggestions {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 30;
  display: none;
  max-height: 300px;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}

.autocomplete-suggestion {
  padding: 10px 12px;
  border-radius: 6px;
  color: var(--text);
  font-size: 0.95rem;
  cursor: pointer;
}

.autocomplete-suggestion:hover,
.autocomplete-suggestion.is-active {
  background: var(--surface-sunken);
}

/* The keyboard choice also gets a bar, readable without the colour. */
.autocomplete-suggestion.is-active {
  box-shadow: inset 3px 0 0 var(--accent);
}

.autocomplete-suggestion-muted {
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* ============================================
   Home: the report form beside the map
   The page is exactly one screen: header, the form panel with the map, and
   the footer. Nothing scrolls; on a screen too small for that the panel
   scrolls on its own.
   ============================================ */

.home {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
}

.home main {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
}

.app {
  display: grid;
  grid-template-columns: minmax(360px, 420px) minmax(0, 1fr);
  flex: 1;
  min-height: 0;
}

/* The panel: a part that scrolls on its own (form, plan results). */
.app-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--border);
  background: var(--surface-alt);
}

.panel-scroll {
  --panel-gap: 20px;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--panel-gap);
  min-height: 0;
  overflow-y: auto;
  padding: var(--panel-gap) calc(28px - var(--panel-scrollbar, 0px)) 16px 28px;
  /* A soft shade at the top or bottom edge while the panel can scroll that
     way, e.g. to plan results under the form; the panel never scrolls by
     itself. The first two layers move with the content and cover the shade
     once its end is reached. */
  background:
    linear-gradient(var(--surface-alt) 40%, transparent) top / 100% 28px no-repeat local,
    linear-gradient(transparent, var(--surface-alt) 60%) bottom / 100% 28px no-repeat local,
    radial-gradient(farthest-side at 50% 0, var(--scroll-hint), transparent) top / 100% 20px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, var(--scroll-hint), transparent) bottom / 100% 20px no-repeat scroll,
    var(--surface-alt);
  /* A slim bar without arrows, shown only while the panel scrolls, is
     pointed at or worked in (script.js marks the scrolling); its place is
     kept, so nothing shifts when it shows or the panel starts to scroll. */
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  scrollbar-gutter: stable;
}

.panel-scroll.is-scrolling,
.panel-scroll:focus-within {
  scrollbar-color: var(--border-strong) transparent;
}

@media (hover: hover) {
  .panel-scroll:hover {
    scrollbar-color: var(--border-strong) transparent;
  }
}

/* A small quiet circle whose chevron points the way (down to the end, up to
   the top). The button itself stays a 44px target; the circle inside it is
   32px, 10px inside a corner of the plan card: the upper one while it points
   down, placed before the card; the lower one while it points up, after it.
   Pulled into the card, it takes no room of its own, and it sticks to the
   edges of the view while that corner is out of it: in the panel's padding,
   its circle 12px from the edge (the offsets count from inside the
   padding). */
.panel-more {
  position: sticky;
  top: -14px;
  bottom: -10px;
  z-index: 2;
  order: 3;
  flex: none;
  align-self: flex-end;
  margin: calc(-48px - var(--panel-gap)) 4px 4px 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s;
}

.panel-more[data-target="end"] {
  order: 1;
  margin: 4px 4px calc(-48px - var(--panel-gap)) 0;
}

.panel-more::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--shadow);
  transition: border-color 0.15s;
}

/* While the panel scrolls with plan results, their card ends with room for
   the button, so their last line can always be scrolled clear of it
   (script.js sets the attribute). */
.panel-scroll[data-more-room] .plan-results {
  padding-bottom: 52px;
}

.panel-more-arrow {
  position: relative;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

.panel-more[data-target="top"] .panel-more-arrow {
  transform: translateY(2px) rotate(-135deg);
}

@media (hover: hover) {
  .panel-more:hover {
    color: var(--text);
  }

  .panel-more:hover::before {
    border-color: var(--text-muted);
  }
}

/* As much space above the title's capitals (trimmed, below) as under the
   last button. */
.panel-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 15px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

/* The title with "Upute →" at its right, close to the top edge (its text
   5px from it); the subtitle under both. */
.panel-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  column-gap: 12px;
}

.panel-head .form-link-small {
  margin-top: -18px;
}

/* The cards' titles start at their capitals, so the space above them is
   the card's padding alone. */
.panel-title,
.plan-results h2 {
  text-box: trim-start cap alphabetic;
}

.panel-title {
  font-family: var(--font-head);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.25;
}

.panel-subtitle {
  grid-column: 1 / -1;
  margin-top: 4px;
  font-size: 0.92rem;
  color: var(--text-muted);
}

/* Steps 1-2-3: a circle beside each field and the button, joined by a line. */
.steps {
  display: flex;
  flex-direction: column;
  list-style: none;
  padding: 0;
  counter-reset: step;
}

.step {
  position: relative;
  padding: 0 0 18px 46px;
  counter-increment: step;
}

.step::before {
  content: counter(step);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--step-edge);
  border-radius: 50%;
  background: var(--step-bg);
  color: var(--step-text);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.9rem;
}

.step::after {
  content: "";
  position: absolute;
  top: 34px;
  bottom: 4px;
  left: 15px;
  width: 1px;
  background: var(--border-strong);
}

.step-submit {
  padding-bottom: 0;
}

.step-submit::before {
  top: 9px;
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

.step-submit::after {
  display: none;
}

.step .form-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.step .btn-primary {
  width: 100%;
}

/* The report and plan discovery (parcel-plans.js), one under the other: the
   panel is too narrow for two buttons side by side. */
.parcel-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.parcel-actions > button {
  width: 100%;
}

/* Plan discovery's results: a card like the form above it, with the site's
   expandable items (plus that turns into a cross) for plans and sheets. */
.plan-results {
  order: 2;
  padding: 15px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow-wrap: anywhere;
}

.plan-results h2 {
  margin-bottom: 8px;
  font-family: var(--font-head);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.25;
}

.plan-status,
.plan-parcel {
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.plan-status:empty {
  display: none;
}

.plan-status.error {
  color: var(--danger);
  font-weight: 600;
}

.plan-parcel {
  margin: 10px 0;
}

.plan-results summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 10px 2px;
  font-size: 0.9rem;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
  transition: color 0.15s;
}

.plan-results summary::-webkit-details-marker {
  display: none;
}

.plan-results summary::after {
  content: "+";
  flex-shrink: 0;
  margin-left: auto;
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1;
  color: var(--accent-text);
  transition: transform 0.2s;
}

.plan-results details[open] > summary::after {
  transform: rotate(45deg);
}

@media (hover: hover) {
  .plan-results summary:hover {
    color: var(--accent-text);
  }

  :root[data-theme="light"] .plan-results summary:hover {
    color: var(--link);
  }
}

.plan-entry,
.plan-diagnostics {
  border-top: 1px solid var(--border);
}

.plan-entry > summary {
  font-weight: 600;
}

.plan-family,
.plan-sheet {
  margin-left: 6px;
  padding-left: 12px;
  border-left: 1px solid var(--border);
}

.plan-artifact {
  padding: 10px 0;
  border-top: 1px solid var(--border);
}

.plan-artifact-title,
.plan-filename {
  display: block;
}

.plan-artifact-title {
  font-size: 0.9rem;
}

.plan-filename,
.plan-note {
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.plan-filename {
  font-family: var(--font-mono);
}

.plan-note {
  margin: 4px 0;
}

.app-map {
  position: relative;
  min-height: 0;
}

/* Two classes: MapLibre's own stylesheet, loaded later, sets
   .maplibregl-map { position: relative }. */
.app-map .parcel-map {
  position: absolute;
  inset: 0;
  background: var(--map-bg);
  /* Keeps MapLibre's overlays below the sticky header. */
  isolation: isolate;
}

/* The map's hints and the chosen parcel, over the map. */
/* Starts where the scale bar below it starts (MapLibre's 10px control margin). */
.map-status {
  position: absolute;
  left: 10px;
  bottom: 40px;
  z-index: 3;
  max-width: calc(100% - 20px);
  padding: 8px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--map-chip-bg);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  pointer-events: none;
}

.maplibregl-ctrl-group {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm) !important;
  background: var(--surface) !important;
  box-shadow: var(--shadow) !important;
}

.maplibregl-ctrl-group button {
  width: 36px !important;
  height: 36px !important;
}

.maplibregl-ctrl-group button + button {
  border-top-color: var(--border-strong) !important;
}

.maplibregl-ctrl-attrib {
  background: var(--map-chip-bg) !important;
  color: var(--text-muted) !important;
}

.maplibregl-ctrl-attrib a {
  color: var(--text-muted) !important;
}

.maplibregl-ctrl-scale {
  border-color: var(--text-muted) !important;
  background: var(--map-chip-bg) !important;
  color: var(--text) !important;
}

/* MapLibre's control icons are dark; light them on the dark theme. */
:root:not([data-theme="light"]) .maplibregl-ctrl-group button .maplibregl-ctrl-icon,
:root:not([data-theme="light"]) .maplibregl-ctrl-attrib-button {
  filter: invert(1) brightness(1.4);
}

/* Phones and narrow windows: the map on top, the form under it; the map's
   height comes from the screen, the panel takes the rest. */
@media (max-width: 860px) {
  .app {
    display: flex;
    flex-direction: column;
  }

  /* The map's height comes from the screen alone, never from what the panel
     shows (field errors, status lines, plan results): those scroll inside
     the panel. What is left for the panel fits the whole form on a common
     phone; plan discovery's button (testers) makes the form one row taller. */
  .app-map {
    order: -1;
    flex: none;
    height: max(150px, 100% - 395px);
  }

  .app:has(#findPlansBtn:not([hidden])) .app-map {
    height: max(150px, 100% - 455px);
  }

  .app-panel {
    flex: 1 1 0;
    border-right: 0;
    border-top: 1px solid var(--border);
  }

  .panel-scroll {
    --panel-gap: 12px;
    padding: 14px calc(var(--gutter) - var(--panel-scrollbar, 0px)) 12px var(--gutter);
  }

  .panel-more {
    top: -8px;
    bottom: -6px;
  }

  .panel-card {
    gap: 12px;
    padding: 15px 14px;
  }

  .panel-title {
    font-size: 1.05rem;
  }

  .step:not(.step-submit) {
    padding-bottom: 12px;
  }

  /* Under the form there is no room: the lists open upwards, over the map. */
  .app-panel .autocomplete-suggestions {
    top: auto;
    bottom: calc(100% + 4px);
    max-height: min(300px, 40dvh);
  }

  /* The map is short here: one compact line along the top edge, clear of
     the zoom buttons, instead of a block over the selected parcel. The form
     below repeats the K.O. and parcel in full. */
  .map-status {
    top: 10px;
    bottom: auto;
    left: 10px;
    max-width: calc(100% - 72px);
    padding: 4px 10px;
    font-size: 0.72rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ============================================
   Pages
   ============================================ */

.page-header {
  padding: 48px 0 32px;
  border-bottom: 1px solid var(--border);
  background: radial-gradient(900px 260px at 85% -40%, var(--accent-glow), transparent 70%), var(--surface-alt);
}

.page-title {
  font-size: clamp(1.9rem, 1.4rem + 2vw, 2.7rem);
}

.page-description {
  max-width: 720px;
  margin-top: 10px;
  font-size: 1.1rem;
  color: var(--text-muted);
}

.legal-meta {
  margin-top: 12px;
  font-size: 0.9rem;
  color: var(--text-subtle);
}

.section {
  padding: var(--section-pad) 0;
}

.section-alt {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface-alt);
}

.section + .section-alt,
.section-alt + .section {
  border-top: 0;
}

.section-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}

.section-header::before {
  content: "";
  flex-shrink: 0;
  width: 24px;
  height: 2px;
  background: var(--accent);
}

.section-title {
  font-size: clamp(1.45rem, 1.15rem + 1vw, 1.9rem);
}

.lead-text {
  max-width: var(--reading);
  font-size: 1.08rem;
  line-height: 1.65;
  color: var(--text-muted);
}

.lead-text + .lead-text {
  margin-top: 12px;
}

/* A section with its introduction on the left and the details on the right;
   one column on narrow screens. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 24px 56px;
  align-items: start;
}

.split > .section-header {
  margin-bottom: 0;
}

.split-intro {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.split-intro .section-header {
  margin-bottom: 0;
}

@media (max-width: 900px) {
  .split {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Cards */
.lead-text + .card-grid {
  margin-top: 24px;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 16px;
}

.card {
  display: flex;
  flex-direction: column;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-bg);
}

.card-number {
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--accent-text);
}

.card-title {
  margin-bottom: 8px;
  font-size: 1.1rem;
}

.card-text {
  font-size: 0.96rem;
  color: var(--text-muted);
}

/* The hints line up at the bottom of the cards. */
.card-hint {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
}

.card-text + .card-hint {
  margin-top: 16px;
}

.card-grid .card-text {
  flex: 1 0 auto;
}

/* Accordion: a list of titles, each opening its text. Items of one list
   share a name, so opening one closes the other (native <details name>). */
.accordion {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
}

.acc-item {
  border-bottom: 1px solid var(--border);
}

.acc-summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 4px;
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
  transition: color 0.15s;
}

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

/* Only with a real pointer: on touch screens a tapped title would stay
   coloured until the next tap. */
@media (hover: hover) {
  .acc-summary:hover {
    color: var(--accent-text);
  }

  :root[data-theme="light"] .acc-summary:hover {
    color: var(--link);
  }
}

/* Plus that turns into a cross while open. */
.acc-summary::after {
  content: "+";
  flex-shrink: 0;
  margin-left: auto;
  font-family: var(--font-body);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  color: var(--accent-text);
  transition: transform 0.2s;
}

.acc-item[open] > .acc-summary::after {
  transform: rotate(45deg);
}

.acc-number {
  flex-shrink: 0;
  min-width: 1.8em;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--text-subtle);
}

.acc-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 820px;
  padding: 0 4px 22px;
  color: var(--text-muted);
}

.acc-body:has(.legal-table-wrap) {
  max-width: none;
}

/* The opened text slides in, where the browser can animate <details>. */
@media (prefers-reduced-motion: no-preference) {
  .acc-item::details-content {
    block-size: 0;
    overflow-y: clip;
    transition: block-size 0.25s ease, content-visibility 0.25s allow-discrete;
  }

  .acc-item[open]::details-content {
    block-size: auto;
  }

  :root {
    interpolate-size: allow-keywords;
  }
}

.faq-more {
  margin-top: 20px;
  font-weight: 600;
}

.faq-more a {
  text-decoration: none;
}

/* CTA band at the end of a page */
.cta-section {
  border-top: 1px solid var(--border);
  background: radial-gradient(800px 300px at 80% 0%, var(--accent-glow), transparent 70%), var(--surface);
}

.cta-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 40px;
}

.cta-title {
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
}

.cta-description {
  margin-top: 8px;
  max-width: 640px;
  color: var(--text-muted);
}

/* ============================================
   Upute
   ============================================ */

.steps-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  list-style: none;
  padding: 0;
}

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

.step-card {
  display: flex;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-bg);
}

.step-number {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.9rem;
}

.step-title {
  margin-bottom: 4px;
  font-size: 1.05rem;
}

.step-desc {
  font-size: 0.94rem;
  color: var(--text-muted);
}

/* The parts of the report as tabs (script.js). Without the script every
   part is shown, one after the other. */
/* The tabs' row needs about 860px; narrower, they sit two by two (below). */
.guide {
  container-type: inline-size;
  margin-top: 24px;
}

.guide-tabs {
  display: none;
}

.has-tabs .guide-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 20px;
  padding: 4px;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 2px);
  background: var(--surface-sunken);
  scrollbar-width: thin;
}

.guide-tab {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

@media (hover: hover) {
  .guide-tab:hover {
    color: var(--text);
  }
}

.guide-tab[aria-selected="true"] {
  border-color: var(--border-strong);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
}

.guide-tab-page {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--text-subtle);
}

.guide-tab[aria-selected="true"] .guide-tab-page {
  color: var(--accent-text);
}

@container (max-width: 880px) {
  .has-tabs .guide-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
  }

  .guide-tab {
    padding: 10px 12px;
    line-height: 1.3;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

.guide-panels {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.guide-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.guide-panel-tall {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
}

@media (max-width: 900px) {
  .guide-panel,
  .guide-panel-tall {
    grid-template-columns: minmax(0, 1fr);
    padding: 16px;
  }
}

/* The report image; a click opens it full size (script.js). */
.guide-image {
  display: block;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  cursor: zoom-in;
}

.guide-image img {
  width: 100%;
}

.guide-panel-tall .guide-image img {
  max-height: 620px;
  object-fit: contain;
}

.guide-image-hint {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgb(11 15 20 / 0.8);
  color: #e7ecf2;
  font-size: 0.78rem;
  font-weight: 600;
}

.guide-explanation {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.guide-page-title {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--accent-text);
}

.guide-subtitle {
  font-size: 1.15rem;
}

.guide-text {
  color: var(--text-muted);
}

.guide-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-left: 1.2em;
  color: var(--text-muted);
}

.guide-list li::marker {
  color: var(--accent-text);
}

/* Full-size report image */
.lightbox {
  width: min(1400px, calc(100% - 24px));
  max-height: calc(100dvh - 24px);
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-lg);
}

.lightbox::backdrop {
  background: var(--backdrop);
}

.lightbox img {
  width: 100%;
  height: auto;
}

.lightbox-close {
  position: sticky;
  top: 8px;
  float: right;
  z-index: 1;
  width: 40px;
  height: 40px;
  margin: 8px 8px -48px 0;
  border: 0;
  border-radius: 50%;
  background: rgb(11 15 20 / 0.85);
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

/* ============================================
   Kontakt
   ============================================ */

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 40px;
  align-items: start;
}

@media (max-width: 900px) {
  .contact-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
}

.contact-info-section {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.contact-section-title {
  margin-bottom: 10px;
  font-size: 1.4rem;
}

.contact-intro-text {
  color: var(--text-muted);
}

.topics-heading {
  margin-bottom: 10px;
  font-size: 1rem;
}

.topics-compact-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  list-style: none;
}

.topics-compact-list li {
  display: flex;
  gap: 10px;
  color: var(--text-muted);
}

.topics-compact-list li::before {
  content: "";
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  margin-top: 0.6em;
  border-radius: 2px;
  background: var(--accent);
}

.contact-direct {
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-sunken);
}

.contact-email-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
}

.contact-email-value {
  margin-top: 4px;
  font-family: var(--font-mono);
}

.contact-form-section {
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

@media (max-width: 720px) {
  .contact-form-section {
    padding: 20px;
  }
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hp-field {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Contact form: information at the point of collection (GDPR Art. 13). */
.form-privacy-note {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Result of the last submission, shown after the redirect (script.js). */
.contact-status:empty {
  display: none;
}

.contact-status {
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--success-bg);
  color: var(--success);
  font-weight: 600;
}

/* ============================================
   Politika privatnosti
   ============================================ */

.legal-body {
  max-width: 900px;
}

/* A chapter's title is its h2, set like the other accordion titles. */
.acc-title {
  font: inherit;
  letter-spacing: inherit;
}

.legal-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 1.2em;
}

.legal-summary {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 900px;
  padding-left: 1.2em;
  color: var(--text-muted);
}

.legal-summary li::marker {
  color: var(--accent-text);
}

.legal-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.legal-table th,
.legal-table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.legal-table th {
  background: var(--surface-sunken);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 600;
}

.legal-table tr:last-child td {
  border-bottom: 0;
}

.legal-address {
  max-width: 520px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  font-style: normal;
}

.legal-optout {
  padding: 20px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
}

.legal-optout-title {
  margin-bottom: 8px;
  font-size: 1.05rem;
  color: var(--text);
}

.legal-toggle {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}

.legal-toggle input {
  width: 20px;
  height: 20px;
  accent-color: var(--accent);
}

.legal-toggle-status {
  margin-top: 8px;
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* Four data columns do not fit a phone; each row becomes a stacked card,
   labelled from the column headings (data-label on every cell). */
@media (max-width: 768px) {
  .legal-table thead {
    display: none;
  }

  .legal-table tr {
    display: block;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
  }

  .legal-table tr:last-child {
    border-bottom: 0;
  }

  .legal-table td {
    display: block;
    padding: 4px 0;
    border-bottom: 0;
  }

  .legal-table td::before {
    content: attr(data-label);
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-subtle);
  }
}

/* ============================================
   Page not found (templates/errors/404.html)
   ============================================ */

.error-page {
  display: flex;
  align-items: center;
  flex: 1;
  background: radial-gradient(900px 360px at 80% 0%, var(--accent-glow), transparent 70%);
}

.error-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.error-code {
  font-family: var(--font-mono);
  font-size: clamp(3.5rem, 2.5rem + 5vw, 6rem);
  line-height: 1;
  color: var(--accent-text);
}

.error-content .page-description {
  margin-top: 0;
}

.error-actions {
  margin-top: 10px;
}

.error-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 6px;
}

/* The section fills the space between header and footer. */
main:has(> .error-page) {
  display: flex;
}

/* ============================================
   Notices and dialogs (script.js)
   ============================================ */

.page-notice {
  position: fixed;
  top: calc(var(--header-h) + 16px);
  left: 50%;
  z-index: 80;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: min(560px, calc(100% - 32px));
  padding: 14px 16px 14px 18px;
  border: 1px solid var(--border-strong);
  border-left: 4px solid var(--text-muted);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  transform: translateX(-50%);
}

.page-notice-success {
  border-left-color: var(--success);
}

.page-notice-error {
  border-left-color: var(--danger);
}

.page-notice-text {
  flex: 1;
  font-weight: 600;
}

.page-notice-close {
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--text-muted);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.confirm-dialog {
  width: min(440px, calc(100% - 32px));
  padding: 28px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-lg);
}

.confirm-dialog::backdrop {
  background: var(--backdrop);
}

.confirm-dialog-title {
  margin-bottom: 8px;
  font-size: 1.35rem;
}

.confirm-dialog-text {
  color: var(--text-muted);
}

.confirm-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
}

.confirm-dialog-actions button {
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--radius-btn);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.confirm-dialog-cancel {
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
}

.confirm-dialog-confirm {
  border: 1px solid var(--danger-strong);
  background: var(--danger-strong);
  color: #fff;
}

/* ============================================
   Footer
   Short on purpose: on the home page it shares the one screen with the map.
   ============================================ */

.footer {
  flex-shrink: 0;
  padding: 14px 0 6px;
  border-top: 1px solid var(--border);
  background: var(--surface-alt);
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

/* Two rows on narrow screens: the page links; then the copyright, centred
   on the page, with the data credit behind an info button at the far right.
   Wider, one row (below), where the icon stands on the text's baseline;
   here it is centred in its row. */
.footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas:
    "links links links"
    ". copyright info";
  gap: 4px 32px;
  align-items: baseline;
  max-width: none;
}

.footer-links {
  grid-area: links;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 2px 18px;
}

.footer-link {
  color: var(--text);
  text-decoration: none;
}

.footer-link:hover {
  text-decoration: underline;
}

/* The current page: semibold in both themes (not colour alone), and yellow
   in the dark one. */
.footer-link[aria-current="page"] {
  color: var(--accent-text);
  font-weight: 600;
}

.footer-copyright {
  grid-area: copyright;
  text-align: center;
}

/* A small muted icon, no taller than the text's line; its target reaches
   around it without making the row taller, but not below the footer (the
   page would scroll) nor into the links above: about 44 × 24px for a mouse,
   44px square on touch screens, where the footer keeps more room. */
.footer-info {
  grid-area: info;
  position: relative;
  justify-self: end;
  display: inline-flex;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}

.footer-info::after {
  content: "";
  position: absolute;
  inset: -4px -15px -6px;
}

/* Wide screens: one low row, close to the page above and to the bottom.
   The copyright is centred on the page, moved left only where the links
   would reach it (and then kept the column gap away from them); the links
   end where the info button, at the far right, begins. */
@media (min-width: 861px) {
  .footer {
    padding: 6px 0 0;
  }

  .footer-inner {
    grid-template-columns: minmax(0, 1fr) auto minmax(max-content, 1fr);
    grid-template-areas: ". copyright links";
  }

  .footer-links {
    padding-right: 34px;
  }

  /* Just under the links' baseline, as the round icon reads a little high
     on it, and as far from the screen's right edge as from its bottom (the
     3.69px this line height leaves); the target stops at the edge and
     reaches further left instead, so a scrollbar floating over a scrolling
     page (macOS) covers at most part of it. */
  .footer-info {
    grid-area: links;
    top: 2px;
    margin-right: calc(3.69px - var(--gutter));
  }

  .footer-info::after {
    inset: -8px -3px -3px -27px;
  }
}

/* Touch screens at desktop widths: the one-row footer keeps more room,
   below the icon rather than above it. */
@media (min-width: 861px) and (pointer: coarse) {
  .footer {
    padding-top: 14px;
    padding-bottom: 13px;
  }

  .footer-info {
    margin-right: calc(16.69px - var(--gutter));
  }

  .footer-info::after {
    inset: -13px -15px -17px;
  }
}

.footer-info svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

@media (hover: hover) {
  .footer-info:hover {
    color: var(--text);
  }
}

/* The credit: fine print (about 11.5px) in a small card just above the
   button, at the right edge; where anchoring is not supported, at the
   window's lower right corner, above the footer. */
.footer-sources {
  position: fixed;
  inset: auto var(--gutter) 52px auto;
  width: max-content;
  max-width: min(340px, 100vw - 2 * var(--gutter));
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  color: var(--text-muted);
  font-size: 0.72rem;
  line-height: 1.5;
}

@supports (anchor-name: --footer-info) {
  .footer-info {
    anchor-name: --footer-info;
  }

  .footer-sources {
    position-anchor: --footer-info;
    inset: auto;
    right: max(var(--gutter), anchor(right));
    bottom: calc(anchor(top) + 10px);
  }
}

.footer-sources a {
  color: inherit;
}

/* Narrow screens: a compact footer close to the page. The links stay in one
   row spread across it, equally apart, their size following the footer's
   width (the row needs about 30.2em, gaps of at least 1em included, and a
   little more with the current page's link in semibold); they
   leave the right edge free, so the info button's 44px target can reach up
   over it. */
@media (max-width: 860px) {
  .footer {
    padding: 2px 0 0;
    line-height: 1.2;
  }

  .footer-inner {
    container-type: inline-size;
    row-gap: 4px;
  }

  .footer-links {
    justify-content: space-between;
    column-gap: 1em;
    padding-right: 30px;
    font-size: min(0.82rem, (100cqi - 30px) / 31.2);
  }

  /* Half the gutter from the screen's edge; its target stops at the edge
     and reaches further left instead, still 44px wide. */
  .footer-info {
    align-self: center;
    margin-right: calc(var(--gutter) / -2);
  }

  .footer-info::after {
    inset: -30px calc(var(--gutter) / -2) 0 calc(var(--gutter) / 2 - 30px);
  }

  /* The page's last section ends close to the footer (the 404 page keeps
     its message centred on the screen). */
  main > .section:last-child:not(.error-page) {
    padding-bottom: var(--gutter);
  }

  /* The home page keeps only the copyright row, low and close to the
     bottom: its links are under "Izbornik" there, and the map needs the
     room. The info button's 44px target reaches up over the panel's empty
     lower edge, not below the page (which would make it scroll). */
  .home .footer {
    padding: 2px 0;
  }

  .home .footer-links {
    display: none;
  }

  .home .footer-inner {
    gap: 0;
  }
}

/* ============================================
   Motion
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }

  /* The spinner says work goes on, so it turns slowly instead of whirling at
     the near-zero duration above or standing still as if stuck. */
  .form-status.busy::before,
  .plan-results[aria-busy="true"] .plan-status::before {
    animation-duration: 2.4s !important;
  }
}

.plan-select-group { display: block; margin: .5rem 0; font-size: .85rem; font-weight: 600; }
.plan-artifact-title input, .plan-select-group input { accent-color: var(--accent, #167c68); margin-right: .4rem; }
#planDownloadActions { margin-top: 1rem; }