/* Záhradný zápisník
   Papier s linajkami, modré pero, zelená ceruzka, prečiarknutie červenou. */

@font-face {
  font-family: "Kalam";
  src: url("fonts/kalam-regular.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Kalam";
  src: url("fonts/kalam-bold.woff") format("woff");
  font-weight: 700;
  font-display: swap;
}

:root {
  --paper: #fdfdfb;
  --paper-2: #f3f6f9;
  --rule: #d9e2ec;
  --ink: #24369a;          /* guľôčkové pero */
  --ink-soft: #5a68b5;
  --pencil: #3f7d32;       /* zelená pastelka */
  --pencil-dark: #2f6125;
  --pencil-wash: #e6f0e1;
  --graphite: #33363b;
  --graphite-soft: #6a6f78;
  --cross: #b23a3a;        /* prečiarknuté */
  --cross-wash: #f8e7e6;
  --hand: "Kalam", "Comic Neue", "Segoe Print", cursive;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --line: 28px;
  --radius: 6px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #171b24;
    --paper-2: #1f2430;
    --rule: #2c3343;
    --ink: #9fb0ff;
    --ink-soft: #7f8fd6;
    --pencil: #7dbf6c;
    --pencil-dark: #93d182;
    --pencil-wash: #213020;
    --graphite: #e3e6ea;
    --graphite-soft: #a3a9b3;
    --cross: #f08a84;
    --cross-wash: #3a2224;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--graphite);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  min-height: 100vh;
}

/* ---------- Hlavička: pruh linajkového papiera ---------- */

.topbar {
  border-bottom: 2px solid var(--ink);
}
.topbar-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 10px 16px 6px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.brand {
  font-family: var(--hand);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.2;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.brand-sprig { color: var(--pencil); margin-right: 4px; }
.topnav { display: flex; gap: 2px; align-items: baseline; justify-content: flex-end; white-space: nowrap; }
.topnav a, .topnav button {
  font: inherit;
  font-size: .95rem;
  color: var(--ink);
  background: none;
  border: 0;
  padding: 6px 8px;
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
}
.topnav a:hover, .topnav button:hover { text-decoration: underline; }

/* ---------- Obsah ---------- */

main {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 16px 64px;
}

h1, h2, h3 {
  font-family: var(--hand);
  color: var(--ink);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 12px;
}
h1 { font-size: 2.1rem; }
h2 { font-size: 1.55rem; margin-top: 32px; }
h3 { font-size: 1.25rem; }

p { margin: 0 0 14px; max-width: 64ch; }
.muted { color: var(--graphite-soft); }
.small { font-size: .9rem; }

a { color: var(--ink); }
a:hover { color: var(--ink-soft); }

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

/* ---------- Prihlasovacia stránka ---------- */

.auth {
  max-width: 420px;
  margin: 8px auto 0;
}
.auth-lead {
  font-family: var(--hand);
  font-size: 1.15rem;
  color: var(--ink-soft);
  margin-bottom: 22px;
}
.auth-switch { margin-top: 18px; font-size: .95rem; }

.welcome {
  display: grid;
  gap: 28px;
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 720px) {
  .welcome { grid-template-columns: 1.1fr 1fr; gap: 40px; }
}
.welcome h1 { font-size: 2.6rem; }
.welcome-note {
  background:
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--line) - 1px), var(--rule) calc(var(--line) - 1px) var(--line));
  padding: 0 4px;
  font-family: var(--hand);
  font-size: 1.12rem;
  line-height: var(--line);
  color: var(--ink);
  list-style: none;
  margin: 0 0 20px;
}
.welcome-note li { padding-left: 1.2em; text-indent: -1.2em; }
.welcome-note li::before { content: "– "; color: var(--pencil); }
.welcome-note s { color: var(--cross); text-decoration-thickness: 2px; }

/* ---------- Formuláre ---------- */

.field { margin-bottom: 16px; }
.field label {
  display: block;
  font-weight: 600;
  font-size: .95rem;
  margin-bottom: 5px;
}
.field .hint { font-size: .85rem; color: var(--graphite-soft); margin-top: 4px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

input[type=text], input[type=email], input[type=password], input[type=number], input[type=search], input[type=url], textarea, select {
  width: 100%;
  font: inherit;
  font-size: 16px;            /* zabráni priblíženiu na iPhone */
  color: var(--graphite);
  background: var(--paper);
  border: 1.5px solid var(--rule);
  border-bottom: 2px solid var(--ink-soft);
  border-radius: var(--radius) var(--radius) 2px 2px;
  padding: 10px 12px;
}
textarea { min-height: 96px; resize: vertical; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--ink); background: var(--paper-2); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font: inherit;
  font-weight: 600;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: var(--radius);
  border: 2px solid var(--pencil);
  background: var(--pencil);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { background: var(--pencil-dark); border-color: var(--pencil-dark); color: #fff; }
.btn:disabled { opacity: .6; cursor: progress; }
.btn.secondary { background: transparent; color: var(--pencil-dark); }
.btn.secondary:hover { background: var(--pencil-wash); color: var(--pencil-dark); }
.btn.danger { background: transparent; border-color: var(--cross); color: var(--cross); }
.btn.danger:hover { background: var(--cross-wash); }
.btn.block { width: 100%; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }

.link-btn {
  font: inherit;
  background: none;
  border: 0;
  padding: 0;
  color: var(--ink);
  text-decoration: underline;
  cursor: pointer;
}
.link-btn.danger { color: var(--cross); }

.form-error {
  color: var(--cross);
  background: var(--cross-wash);
  border-left: 3px solid var(--cross);
  padding: 10px 12px;
  margin: 0 0 16px;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.form-ok {
  color: var(--pencil-dark);
  background: var(--pencil-wash);
  border-left: 3px solid var(--pencil);
  padding: 10px 12px;
  margin: 0 0 16px;
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* ---------- Zoznam záhrad: riadky v zápisníku ---------- */

.page-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.page-head h1 { margin: 0; }

.ledger {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.ledger li { border-bottom: 1px solid var(--rule); }
.ledger a.entry {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 16px;
  padding: 14px 4px;
  text-decoration: none;
  color: inherit;
}
.ledger a.entry:hover { background: var(--paper-2); }
.entry-name {
  font-family: var(--hand);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--ink);
  line-height: 1.25;
}
.entry-meta { color: var(--graphite-soft); font-size: .9rem; grid-column: 1; }
.entry-side {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  text-align: right;
  font-size: .9rem;
  color: var(--graphite-soft);
}

.role {
  display: inline-block;
  font-size: .8rem;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1.5px solid currentColor;
  white-space: nowrap;
}
.role.owner { color: var(--ink); }
.role.editor { color: var(--pencil-dark); }
.role.viewer { color: var(--graphite-soft); }

.empty {
  border: 2px dashed var(--rule);
  border-radius: var(--radius);
  padding: 28px 20px;
  text-align: center;
  margin-top: 16px;
}
.empty p { margin-left: auto; margin-right: auto; }

/* Pozvánky na nástenke */
.invite-box {
  border-left: 4px solid var(--pencil);
  background: var(--pencil-wash);
  padding: 14px 16px;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: 16px 0;
}
.invite-box p { margin-bottom: 10px; }

/* ---------- Detail záhrady ---------- */

.crumbs { font-size: .9rem; margin-bottom: 6px; }
.garden-title { font-size: 2.3rem; margin-bottom: 4px; }
.garden-sub { color: var(--graphite-soft); margin-bottom: 18px; }

.tabs {
  display: flex;
  gap: 2px;
  border-bottom: 2px solid var(--ink);
  margin: 0 0 22px;
  overflow-x: auto;
}
.tabs a {
  font-family: var(--hand);
  font-size: 1.1rem;
  padding: 8px 14px 4px;
  text-decoration: none;
  color: var(--ink-soft);
  border: 1.5px solid transparent;
  border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  white-space: nowrap;
}
.tabs a[aria-current=page] {
  color: var(--ink);
  font-weight: 700;
  background: var(--paper-2);
  border-color: var(--rule);
}

.plan-note {
  background:
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--line) - 1px), var(--rule) calc(var(--line) - 1px) var(--line));
  font-family: var(--hand);
  color: var(--ink);
  font-size: 1.1rem;
  line-height: var(--line);
  padding: 0 4px;
  margin: 8px 0 24px;
  list-style: none;
}
.plan-note li { padding-left: 1.2em; text-indent: -1.2em; }
.plan-note li::before { content: "– "; color: var(--pencil); }

dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0 0 20px; }
dl.facts dt { color: var(--graphite-soft); }
dl.facts dd { margin: 0; }

.people { list-style: none; padding: 0; margin: 0 0 8px; border-top: 1px solid var(--rule); }
.people li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 2px;
  border-bottom: 1px solid var(--rule);
  flex-wrap: wrap;
}
.person-name { font-weight: 600; }
.person-mail { color: var(--graphite-soft); font-size: .9rem; word-break: break-all; }
.person-actions { display: flex; gap: 10px; align-items: center; }
.person-actions select { width: auto; padding: 6px 8px; }

.danger-zone {
  margin-top: 40px;
  padding-top: 16px;
  border-top: 2px dashed var(--cross);
}
.danger-zone h2 { color: var(--cross); margin-top: 0; }

/* ---------- Oznámenie ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  background: var(--ink);
  color: #fff;
  padding: 10px 18px;
  border-radius: var(--radius);
  box-shadow: 0 6px 24px rgba(20, 30, 80, .25);
  max-width: calc(100% - 32px);
  z-index: 10;
  animation: toast-in .2s ease-out;
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } }

.loading { color: var(--graphite-soft); font-family: var(--hand); font-size: 1.2rem; padding: 24px 0; }

footer.site {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 16px 32px;
  font-size: .85rem;
  color: var(--graphite-soft);
}
footer.site a { color: var(--graphite-soft); }

.prose h2 { font-size: 1.35rem; }
.prose ul { padding-left: 1.2em; max-width: 64ch; }

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

@media (max-width: 480px) {
  h1 { font-size: 1.85rem; }
  .welcome h1 { font-size: 2.2rem; }
  .garden-title { font-size: 1.95rem; }
  .row2 { grid-template-columns: 1fr; }
  .brand { font-size: 1.35rem; }
}

@media (prefers-color-scheme: dark) {
  .btn, .btn:hover { color: #0f1d0b; }
  .btn.secondary, .btn.secondary:hover { color: var(--pencil-dark); }
  .btn.danger, .btn.danger:hover { color: var(--cross); }
  .toast { color: #10142a; }
}

@media (max-width: 420px) {
  .topnav .nav-optional { display: none; }
}

/* ---------- Mapa záhrady ---------- */

.map-wrap { position: relative; }
.map-search { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.map-search input { flex: 1 1 220px; }
.map-search .btn { min-height: 44px; }
.map-results {
  list-style: none;
  margin: -4px 0 10px;
  padding: 6px 12px;
  border: 1.5px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
}
.map-results li { padding: 6px 0; border-bottom: 1px solid var(--rule); }
.map-results li:last-child { border-bottom: 0; }
.map-results .link-btn { text-align: left; }

.map-canvas {
  height: min(68vh, 640px);
  min-height: 340px;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: var(--paper-2);
}
.map-canvas.is-drawing { cursor: crosshair; }
.map-canvas.is-drawing .leaflet-grab { cursor: crosshair; }

/* Na šírku celej obrazovky v mobile */
@media (max-width: 600px) {
  .map-search .btn { flex: 1 1 auto; }
  .map-canvas { margin: 0 -16px; border-left: 0; border-right: 0; border-radius: 0; height: 62vh; }
}

.map-bar {
  display: flex;
  gap: 10px 16px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 12px 0;
}
.map-status { flex: 1 1 260px; }
.map-error { color: var(--cross); }
.map-tools { display: flex; gap: 8px; flex-wrap: wrap; }
.map-tools .btn { min-height: 40px; padding: 8px 14px; }

/* rohy hranice – dosť veľké na prst */
.map-vertex {
  background: #fff;
  border: 3px solid #24369a;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
}
.map-vertex.is-selected { background: #b23a3a; border-color: #fff; }
.map-vertex.is-first { background: #ffd23f; }
.map-mid {
  background: rgba(255, 255, 255, .85);
  border: 2px solid #24369a;
  border-radius: 50%;
  opacity: .8;
}
.map-mid:hover { opacity: 1; background: #ffd23f; }

.map-len span {
  display: inline-block;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  background: rgba(36, 54, 154, .9);
  color: #fff;
  font: 600 12px/1.2 var(--body);
  padding: 2px 6px;
  border-radius: 4px;
  pointer-events: none;
}

.leaflet-container { font-family: var(--body); }
.leaflet-control-layers-expanded { font-size: 15px; line-height: 1.8; }

/* ---------- Rastliny ---------- */

.plants-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.year-switch { display: flex; align-items: center; gap: 6px; }
.year-switch .btn { min-height: 44px; min-width: 44px; padding: 6px 10px; font-size: 1.2rem; }
.year-select {
  width: auto;
  font-family: var(--hand);
  font-size: 1.3rem !important;
  font-weight: 700;
  color: var(--ink);
  padding: 4px 10px;
}
.plants-hint:not(:empty) {
  background: #fff6cc;
  border-left: 4px solid #e0b100;
  color: #3a3200;
  padding: 10px 12px;
  margin-bottom: 10px;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.plants-hint .link-btn { color: #3a3200; }
@media (prefers-color-scheme: dark) {
  .plants-hint:not(:empty) { background: #3a3410; color: #fff3b0; }
  .plants-hint .link-btn { color: #fff3b0; }
}

.plants-panel { margin-top: 8px; scroll-margin-top: 12px; }
.plants-panel h2 { margin-top: 12px; }
.plant-group { margin: 6px 0; border-bottom: 1px solid var(--rule); }
.plant-group > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; padding: 10px 0; min-height: 44px; }
.plant-group > summary::-webkit-details-marker { display: none; }
.plant-group > summary::before { content: '▸'; color: var(--graphite-soft); transition: transform .15s; }
.plant-group[open] > summary::before { transform: rotate(90deg); }
.plant-group h3 { margin: 0; font-size: 1.15rem; color: var(--graphite-soft); }
.plant-group .group-count { font-weight: normal; font-size: .95rem; }
.plant-group[open] > .plant-ledger { margin-bottom: 12px; }
.plant-ledger { margin-top: 4px; }
.ledger button.entry {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 16px;
  width: 100%;
  padding: 10px 4px;
  background: none;
  border: 0;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.ledger button.entry:hover { background: var(--paper-2); }
.plant-ledger .entry-name { font-size: 1.2rem; }
.ended { margin-top: 24px; }
.ended summary { cursor: pointer; color: var(--graphite-soft); }

.is-editing-boundary .plant-shape { pointer-events: none !important; }
.plant-label {
  background: rgba(255, 255, 255, .92);
  border: 0;
  border-radius: 4px;
  padding: 1px 6px;
  font: 600 12px/1.3 var(--body);
  color: #24369a;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
.plant-label::before { display: none; }

.dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 8px; vertical-align: middle; }
.plant-title { display: flex; align-items: center; margin-top: 4px; font-size: 1.8rem; }
.plant-title .dot { width: 16px; height: 16px; flex: none; }
.plant-notes { white-space: pre-line; }
.records-title { margin-top: 28px; }

/* záznamy */
.record-add { margin: 8px 0 18px; border: 1.5px solid var(--rule); border-radius: var(--radius); padding: 8px 12px; }
.record-add summary { cursor: pointer; font-weight: 600; color: var(--pencil-dark); }
.record-form { margin-top: 10px; display: grid; gap: 10px; }
.record-form-row { display: flex; gap: 8px; flex-wrap: wrap; }
.record-form-row select, .record-form-row input { width: auto; flex: 1 1 120px; }
.record-form-row input[name=year] { flex: 0 1 100px; }
.rec-amount { display: flex; align-items: center; gap: 6px; flex: 0 1 140px; }
.rec-amount[hidden] { display: none; }
.rec-amount input { width: 100%; }
.record-form .btn { justify-self: start; }
.record-year { font-family: var(--hand); color: var(--ink); font-size: 1.3rem; margin: 18px 0 4px; border-bottom: 1.5px solid var(--ink); }
.records { list-style: none; padding: 0; margin: 0; }
.records li { padding: 8px 0; border-bottom: 1px solid var(--rule); }
.record-text { white-space: pre-line; margin-top: 2px; }
.stars { color: #c79100; letter-spacing: 1px; }

.harvest-chart { margin: 4px 0 16px; display: grid; gap: 4px; max-width: 520px; }
.harvest-row { display: grid; grid-template-columns: 3.2em 1fr 5.5em; align-items: center; gap: 8px; font-size: .92rem; }
.harvest-year { color: var(--graphite-soft); }
.harvest-bar { background: var(--paper-2); border-radius: 3px; height: 14px; overflow: hidden; }
.harvest-bar span { display: block; height: 100%; background: var(--pencil); border-radius: 3px; }
.harvest-val { text-align: right; font-variant-numeric: tabular-nums; }

/* formulár rastliny */
.plant-form { max-width: 600px; }
.plant-form .field label input, .plant-form .field label textarea, .plant-form .field label select { margin-top: 5px; font-weight: 400; }
.field .label { display: block; font-weight: 600; font-size: .95rem; margin-bottom: 5px; }
.species-btn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font: inherit;
  text-align: left;
  background: var(--paper-2);
  border: 1.5px solid var(--rule);
  border-bottom: 2px solid var(--ink-soft);
  border-radius: var(--radius) var(--radius) 2px 2px;
  padding: 10px 12px;
  color: var(--graphite);
  cursor: pointer;
}
.species-edit { color: var(--ink); text-decoration: underline; font-size: .9rem; white-space: nowrap; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font: inherit;
  font-size: .95rem;
  padding: 7px 12px;
  min-height: 38px;
  border-radius: 999px;
  border: 1.5px solid var(--rule);
  background: var(--paper);
  color: var(--graphite);
  cursor: pointer;
}
.chip:hover { border-color: var(--pencil); }
.chip.on { background: var(--pencil); border-color: var(--pencil); color: #fff; }
.chip.own { border-color: var(--pencil); color: var(--pencil-dark); font-weight: 600; }
@media (prefers-color-scheme: dark) { .chip.on { color: #0f1d0b; } }
.check { display: flex; gap: 8px; align-items: center; margin: 4px 0 14px; }
.check input { width: 20px; height: 20px; }

/* stromový výber */
dialog.picker {
  width: min(560px, 100vw);
  max-height: min(86vh, 760px);
  padding: 0;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: var(--paper);
  color: var(--graphite);
  display: flex;
  flex-direction: column;
}
dialog.picker:not([open]) { display: none; }
dialog.picker::backdrop { background: rgba(20, 25, 45, .45); }
@media (max-width: 600px) {
  dialog.picker { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; border: 0; }
}
.picker-head { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 16px 6px; }
.picker-head h2 { margin: 0; }
dialog.picker > input[type=search] { margin: 4px 16px 10px; width: auto; }
.picker-body { overflow-y: auto; padding: 0 16px 20px; flex: 1; }
.picker-cat { border-bottom: 1px solid var(--rule); }
.picker-cat summary {
  cursor: pointer;
  padding: 12px 2px;
  font-family: var(--hand);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink);
  display: flex;
  align-items: center;
}
.picker-cat summary .picker-count { margin-left: auto; font-family: var(--body); font-size: .85rem; font-weight: 400; }
.picker-cat ul, .picker-hits { list-style: none; padding: 0 0 8px; margin: 0; }
.picker-item {
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 6px;
  font: inherit;
  text-align: left;
  background: none;
  border: 0;
  border-top: 1px solid var(--rule);
  color: var(--graphite);
  cursor: pointer;
}
.picker-item:hover { background: var(--paper-2); }
.picker-latin { color: var(--graphite-soft); font-style: italic; font-size: .88rem; }
.picker-count { color: var(--pencil-dark); font-size: .82rem; margin-left: auto; }
.picker-back { margin: 6px 0 4px; }
.picker-sub { margin: 14px 0 6px; font-weight: 600; color: var(--graphite-soft); font-size: .9rem; }
.picker-other { display: flex; gap: 8px; margin-top: 16px; }
.picker-custom { margin-top: 18px; padding-top: 6px; border-top: 2px dashed var(--rule); }
.row-inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row-inline select { width: auto; }

.map-search-toggle { margin-bottom: 8px; }
.map-search-toggle summary { cursor: pointer; color: var(--ink); font-size: .95rem; padding: 4px 0 8px; }
.plants-bar { flex-wrap: nowrap; }
.year-select { min-width: 5.5em; }
@media (max-width: 480px) {
  .hide-narrow { display: none; }
  .map-search { flex-wrap: nowrap; }
  .map-search input { flex: 1 1 auto; min-width: 0; }
  .map-search .btn { flex: 0 0 auto; }
}

/* ---------- Plochy a sezónne výsadby ---------- */
.is-drawing-shape .plant-shape, .is-drawing-shape .zone-shape,
.is-editing-boundary .zone-shape, .is-editing-boundary .plant-shape { pointer-events: none !important; }
.leaflet-tooltip.zone-label {
  background: transparent; border: 0; box-shadow: none;
  font: 700 13px/1.2 var(--hand); color: #1d2a6e;
  text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 2px #fff;
}
.leaflet-tooltip.zone-label::before { display: none; }
.planting-label {
  background: rgba(255, 255, 255, .9); border: 0; border-radius: 4px; padding: 1px 5px;
  font: 600 11px/1.25 var(--body); color: #3a2a10; box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}
.planting-label::before { display: none; }
.shape-bar { border-top: 2px dashed var(--rule); margin-bottom: 6px; }
.seasonal { margin-top: 36px; padding-top: 8px; border-top: 2px solid var(--ink); }
.seasonal h2 { margin: 0; }
.seasonal-zone { margin: 18px 0 4px; font-size: 1.15rem; color: var(--graphite-soft); }
.btn.small-btn { min-height: 36px; padding: 6px 12px; font-size: .92rem; margin: 2px 0; }

/* ---------- Úpravy 4.1 ---------- */
.is-placing .plant-shape { pointer-events: none !important; }
.is-placing { cursor: crosshair; }
.is-placing .leaflet-grab { cursor: crosshair; }
.map-cancel {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, .95);
  border: 2px solid #24369a;
  border-radius: 8px;
  padding: 6px 8px 6px 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
  font: 600 14px/1.3 var(--body);
  color: #24369a;
  max-width: calc(100% - 120px);
}
.map-cancel[hidden] { display: none; }
.map-cancel .btn { white-space: nowrap; }
@media (max-width: 480px) { .map-cancel span { display: none; } .map-cancel { padding: 4px; } }
.map-labels-btn {
  background: #fff;
  border: 2px solid rgba(0, 0, 0, .2);
  border-radius: 4px;
  padding: 5px 8px;
  font: 600 12px/1.2 var(--body);
  color: #24369a;
  cursor: pointer;
}
.map-labels-btn[aria-pressed=false] { color: #888; text-decoration: line-through; }
.pick-popup .leaflet-popup-content { margin: 10px 14px; }
.pick-list { display: grid; gap: 6px; font: 14px/1.3 var(--body); }
.pick-list .link-btn { text-align: left; }

/* ---------- Fotky ---------- */
.photos { margin-top: 24px; }
.photos-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.photos-head h3 { margin: 0; }
.photo-status:not(:empty) { margin: 8px 0; color: var(--graphite-soft); }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin-top: 10px; }
.photo-thumb {
  position: relative; padding: 0; border: 0; background: var(--paper-2); cursor: zoom-in;
  aspect-ratio: 1; border-radius: var(--radius); overflow: hidden;
}
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-date {
  position: absolute; left: 4px; bottom: 4px; background: rgba(0, 0, 0, .55); color: #fff;
  font-size: 11px; padding: 1px 5px; border-radius: 3px;
}
dialog.lightbox {
  width: min(1100px, 100vw); max-height: 100dvh; padding: 0; border: 0; border-radius: 10px;
  background: #111; color: #eee;
}
dialog.lightbox::backdrop { background: rgba(0, 0, 0, .8); }
@media (max-width: 600px) { dialog.lightbox { width: 100vw; height: 100dvh; max-width: 100vw; margin: 0; border-radius: 0; } }
.lightbox-head { display: flex; justify-content: flex-end; padding: 8px 12px; }
.lightbox-head .link-btn, .lightbox a { color: #dfe5ff; }
.lightbox-img { position: relative; display: flex; justify-content: center; align-items: center; background: #000; }
.lightbox-img img { max-width: 100%; max-height: 72dvh; object-fit: contain; display: block; }
.lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 64px; border: 0;
  background: rgba(0, 0, 0, .45); color: #fff; font-size: 2rem; cursor: pointer; border-radius: 6px;
}
.lb-prev { left: 6px; } .lb-next { right: 6px; }
.lightbox-info { padding: 12px 14px 16px; }
.lb-form { display: flex; gap: 8px; flex-wrap: wrap; }
.lb-form input[type=text] { flex: 1 1 220px; }
.lb-form input[type=date] { flex: 0 1 170px; }
.lightbox input { background: #222; color: #eee; border-color: #444; }
.lb-meta { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.lightbox .muted { color: #aaa; }

/* ---------- Prehľad ---------- */
.overview-desc { white-space: pre-line; }
.ov-section { margin-top: 34px; }
.ov-section h2 { margin-top: 0; }
.ov-harvest { display: grid; gap: 10px; max-width: 680px; }
.ov-harvest-row { display: grid; grid-template-columns: 3.4em 1fr 5.5em; gap: 10px; align-items: start; }
.ov-year { font-family: var(--hand); font-weight: 700; color: var(--ink); font-size: 1.15rem; line-height: 1.2; }
.ov-bar-wrap { display: grid; gap: 3px; padding-top: 4px; }
.ov-bar-wrap .harvest-bar { height: 16px; }
.ov-kg { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; padding-top: 2px; }
.ov-table-wrap { overflow-x: auto; margin: 0 -2px; }
.ov-table { border-collapse: collapse; min-width: 100%; font-size: .92rem; }
.ov-table th, .ov-table td { border: 1px solid var(--rule); padding: 6px 8px; text-align: left; vertical-align: top; }
.ov-table thead th { font-family: var(--hand); color: var(--ink); font-size: 1.05rem; background: var(--paper-2); }
.ov-table tbody th { font-weight: 600; white-space: nowrap; }
.ov-table td div + div { margin-top: 2px; }
.ov-history { display: grid; gap: 4px; }
.ov-hist-year { display: grid; grid-template-columns: 4em 1fr; gap: 8px; align-items: start; }
.ov-hist-year h3 { margin: 0; line-height: var(--line); }
.ov-hist-year .plan-note { margin: 0; }
.ov-photos { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); margin-bottom: 12px; }
.ov-photos .photo-date { max-width: calc(100% - 8px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 480px) { .ov-harvest-row { grid-template-columns: 2.8em 1fr 4.6em; } }

/* ---------- Tlačová zostava ---------- */
.report-controls { margin-bottom: 24px; padding-bottom: 16px; border-bottom: 2px dashed var(--rule); }
.report-opts { display: flex; gap: 18px; flex-wrap: wrap; margin: 12px 0; }
.report-opts label { font-weight: 600; }
.report-opts select { width: auto; margin-left: 6px; }
.report-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 16px; margin-bottom: 8px; }
.report-checks .check { margin: 4px 0; }
body.printing-report main { max-width: 760px; }

.report-paper { background: #fff; color: #222; padding: 20px 24px; border: 1px solid #ddd; box-shadow: 0 2px 10px rgba(0, 0, 0, .08); }
.rp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; border-bottom: 2px solid #24369a; padding-bottom: 8px; margin-bottom: 14px; }
.rp-head h1 { margin: 2px 0 2px; font-size: 1.9rem; color: #24369a; }
.rp-head p { margin: 0; color: #555; }
.rp-brand { font-family: var(--hand); color: #3f7d32; font-size: 1rem; }
.rp-year { text-align: right; font-family: var(--hand); color: #24369a; }
.rp-year span { display: block; font-size: .9rem; color: #777; }
.rp-year strong { font-size: 2.2rem; line-height: 1; }
.rp-section { margin-top: 18px; }
.rp-section h2 { font-size: 1.3rem; margin: 0 0 6px; color: #24369a; border-bottom: 1px solid #ccd; padding-bottom: 2px; }
.rp-map { border: 1px solid #999; background: #fdfdfb; max-width: 100%; }
.rp-caption, .rp-small { font-size: 11px; color: #555; margin: 4px 0 0; }
.rp-table { width: 100%; border-collapse: collapse; font-size: 11.5px; line-height: 1.35; }
.rp-table th, .rp-table td { border-bottom: 1px solid #ddd; padding: 3px 5px; text-align: left; vertical-align: top; }
.rp-table thead th { background: #eef1f8; color: #24369a; font-weight: 700; }
.rp-num { width: 2.2em; text-align: center !important; font-weight: 700; color: #24369a; }
.rp-kg { text-align: right !important; white-space: nowrap; }
.rp-note td { color: #555; font-style: italic; border-bottom: 1px solid #ddd; padding-top: 0; }
.rp-table tr:has(+ .rp-note) td { border-bottom: 0; }
.rp-grid th, .rp-grid td { border: 1px solid #ccc; }
.rp-yr { width: 3.5em; font-weight: 700; color: #24369a; }
.rp-barcell { width: 35%; }
.rp-bar { display: block; height: 10px; background: #3f7d32; border-radius: 2px; }
.rp-current td { background: #f4f8ef; }
.rp-top { color: #555; }
.rp-foot { margin-top: 20px; font-size: 10px; color: #888; text-align: right; }
.rp-mark {
  background: #fff; border: 2px solid #24369a; border-radius: 50%; color: #24369a;
  font: 700 10px/16px var(--body); text-align: center; box-shadow: 0 0 2px rgba(0, 0, 0, .4);
}
.rp-letter { background: #fff6cc; border-color: #b36b00; color: #7a4a00; border-radius: 4px; }
.rp-map .zone-label { font-size: 11px; }

@media print {
  @page { size: A4 portrait; margin: 12mm 12mm 14mm; }
  html, body { background: #fff !important; color: #222 !important; }
  .topbar, footer.site, .no-print, .toast { display: none !important; }
  main { padding: 0 !important; max-width: none !important; }
  .report-paper { border: 0; box-shadow: none; padding: 0; }
  .rp-section { break-inside: auto; }
  .rp-section h2 { break-after: avoid; }
  .rp-table tr { break-inside: avoid; }
  .rp-map-sec { break-inside: avoid; }
  .rp-map { margin: 0 auto; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.export-box { margin: 0 0 26px; padding-bottom: 18px; border-bottom: 2px dashed var(--rule); }
.export-box h2 { margin-top: 0; }
.ov-more { margin-top: 30px; }
@media (max-width: 600px) { .tabs a { padding: 8px 10px 4px; font-size: 1rem; } }

/* hlavička v úzkom mobile: krátky názov, aby sa zmestilo aj Odhlásiť */
.brand-short { display: none; }
@media (max-width: 480px) {
  .brand-long { display: none; }
  .brand-short { display: inline; }
  .topnav a, .topnav button { padding: 6px 5px; font-size: .9rem; }
}

/* ---------- Správa číselníka ---------- */
@media (max-width: 480px) { .topnav .nav-wide { display: none; } }
.adm-status:not(:empty) { margin: 10px 0; }
.adm-toolbar { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 8px; }
.adm-toolbar input { flex: 1 1 240px; }
.adm-list .picker-cat ul { padding-bottom: 2px; }
.adm-cat-add { padding: 6px 6px 12px; }
.adm-varieties { font-family: var(--body); font-size: 15px; line-height: 1.5; min-height: 220px; }
.adm-rs { display: grid; gap: 6px; margin-bottom: 6px; }
.adm-rs-row { display: grid; grid-template-columns: 1fr 9em 2em; gap: 6px; align-items: center; }
.adm-crown { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.adm-crown label { font-weight: 400; font-size: .9rem; color: var(--graphite-soft); }
.adm-crown input { margin-top: 3px; }
.adm-sugg td { vertical-align: middle; }
.adm-sugg-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.adm-sugg-actions select { width: auto; padding: 5px 8px; }
.adm-type { font-size: .78rem; font-weight: 700; padding: 2px 7px; border-radius: 999px; white-space: nowrap; border: 1.5px solid currentColor; }
.adm-type-species { color: var(--cross); }
.adm-type-variety { color: var(--pencil-dark); }
.adm-type-rootstock { color: var(--ink); }
.adm-cats { list-style: none; padding: 0; margin: 10px 0 16px; border-top: 1px solid var(--rule); }
.adm-cats > li { border-bottom: 1px solid var(--rule); padding: 10px 2px; }
.adm-cat { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.adm-cat-name { flex: 1 1 200px; }
.adm-cat-btns { display: flex; gap: 12px; }
.adm-cat-btns .link-btn:disabled { color: var(--rule); cursor: default; text-decoration: none; }
.adm-cat-form .row-inline { margin-bottom: 10px; gap: 18px; }
.adm-cat-form input[type=color] { width: 44px; height: 32px; padding: 0; border: 1px solid var(--rule); vertical-align: middle; }
@media (max-width: 480px) { .adm-crown { grid-template-columns: 1fr; } .adm-rs-row { grid-template-columns: 1fr 7.5em 2em; } }

/* ---------- Karta odrody ---------- */
.variety-card { margin-top: 22px; padding: 12px 14px 4px; border: 1.5px solid var(--rule); border-left: 4px solid var(--pencil); border-radius: var(--radius); background: var(--paper-2); }
.variety-card h3 { margin: 0 0 8px; }
.variety-card .facts { margin-bottom: 8px; }
.card-res { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.res { font-size: .82rem; padding: 1px 8px; border-radius: 999px; border: 1.5px solid currentColor; white-space: nowrap; }
.res-hi { color: var(--pencil-dark); }
.res-mid { color: #a06a00; }
.res-lo { color: var(--cross); }
.card-note { white-space: pre-line; }
.card-src { font-size: .8rem; color: var(--graphite-soft); margin: 4px 0 8px; }
.card-src-box > summary { cursor: pointer; display: inline-block; padding: 4px 0; }
.card-src-box ul { margin: 4px 0 0; padding-left: 18px; }
.card-src-box li { margin: 2px 0; }
.chip-ripen { display: block; font-size: .72rem; color: var(--graphite-soft); line-height: 1.1; }
.chip.on .chip-ripen { color: inherit; }
.adm-res { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.adm-res label, .adm-fruit label { font-weight: 400; font-size: .9rem; color: var(--graphite-soft); }
.adm-res select, .adm-fruit input { margin-top: 3px; }
.adm-fruit { display: grid; grid-template-columns: 1fr 1.4fr 1.6fr; gap: 8px; }
.adm-uses { display: flex; flex-wrap: wrap; gap: 0 16px; }
.adm-uses .check { margin: 3px 0; }
.adm-src { display: grid; gap: 6px; margin-bottom: 6px; }
.adm-src-row { display: grid; grid-template-columns: 1fr 1.6fr 2em; gap: 6px; align-items: center; }
.adm-form .row-inline select { width: auto; }
@media (max-width: 600px) { .adm-fruit, .adm-src-row { grid-template-columns: 1fr; } }

/* Tabuľka odrôd (správa číselníka) */
.adm-table-tools { flex-wrap: wrap; }
.adm-table-tools input[type=search] { flex: 1 1 220px; }
.adm-table-tools select { flex: 0 1 auto; width: auto; }
.adm-table-tools label.check { flex: 0 0 auto; white-space: nowrap; margin: 0; }
/* tabuľka smie byť širšia ako textový stĺpec stránky */
.adm-wide { width: min(1400px, calc(100vw - 32px)); margin-left: calc(50% - min(700px, 50vw - 16px)); }
.adm-table { font-size: 0.86rem; }
.adm-table th { white-space: nowrap; vertical-align: bottom; }
.adm-table td { vertical-align: top; min-width: 6em; }
.adm-table td:nth-child(1), .adm-table td:nth-child(2) { white-space: nowrap; min-width: 0; }
.adm-table td:nth-child(3) { min-width: 11em; }
.adm-table td:nth-child(8), .adm-table td:nth-child(9), .adm-table td:nth-child(11) { min-width: 14em; }
.adm-table td .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.adm-table .link-btn { font-weight: 600; text-align: left; }
.adm-table tr.adm-nocard td { color: var(--graphite-soft); }
.adm-table td.num { text-align: right; }
.th-sort { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: inherit; cursor: pointer; white-space: nowrap; }
.th-sort:hover { text-decoration: underline; }

/* Karta druhu – kalendár pestovania */
.guide-card { border-left-color: var(--pencil-dark, #2f6125); }
.cal-strip { display: grid; gap: 2px; margin: 4px 0 12px; font-size: 0.72rem; }
.cal-row { display: grid; grid-template-columns: 7.5em repeat(12, 1fr); gap: 2px; align-items: center; }
.cal-head span { text-align: center; color: var(--graphite-soft); }
.cal-label { color: var(--graphite-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-row > span:not(.cal-label):not([role=rowheader]) { height: 12px; border-radius: 3px; background: rgba(36, 54, 154, 0.07); }
.cal-head > span { height: auto !important; background: none !important; }
.cal-on.cal-sow_in { background: #a7c4e8 !important; }
.cal-on.cal-sow_out { background: #6f9fd8 !important; }
.cal-on.cal-plant_out { background: #7fb069 !important; }
.cal-on.cal-harvest { background: #e0a040 !important; }
.adm-sub { font-size: 1rem; margin: 18px 0 6px; color: var(--ink); }
@media (max-width: 480px) { .cal-row { grid-template-columns: 6em repeat(12, 1fr); } }

/* ---------- Užívatelia (superadmin) a mapa záhrad ---------- */
.usr-tools { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 6px; }
.usr-tools input[type=search] { max-width: 420px; }
.usr-list { list-style: none; padding: 0; margin: 0; }
.usr { border-top: 1px solid var(--rule); padding: 14px 0; }
.usr-head .person-name { font-weight: 600; }
.usr-badge { display: inline-block; margin-left: 8px; font-size: .75rem; padding: 1px 8px; border-radius: 10px; border: 1px solid var(--rule); vertical-align: middle; }
.usr-warn { color: #9a5b00; border-color: #e6c27a; }
.usr-gardens { list-style: none; margin: 10px 0 0; padding: 0 0 0 14px; border-left: 3px solid var(--rule); }
.usr-gardens > li { padding: 6px 0 10px; }
.usr-g-name { font-weight: 600; }
.usr-g-pub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 6px; }
.usr-owner { font-size: .85rem; }
.usr-owner.yes { color: #2f7a3a; }
.usr-owner.no { color: var(--graphite-soft); }
.usr-live { font-size: .8rem; padding: 1px 8px; border-radius: 10px; background: #e3f2e5; color: #24632f; }
.check-row { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; min-height: 32px; }
.check-row input { width: 18px; height: 18px; margin: 0; }
dialog.usr-preview { width: min(960px, 96vw); }
.usr-map { height: min(60vh, 520px); margin: 0 16px; border: 2px solid var(--rule); border-radius: 6px; }
.usr-prev-info { padding: 8px 16px 16px; }
@media (max-width: 600px) { .usr-map { height: 55dvh; margin: 0; border-radius: 0; border-width: 2px 0; } }
.public-box { margin: 28px 0; max-width: 560px; }
.public-state { font-size: .9rem; margin: 6px 0 0; }
.public-state.on { color: #2f7a3a; }
.public-state.wait { color: #9a5b00; }
.public-state.off { color: var(--graphite-soft); }
@media (prefers-color-scheme: dark) {
  .usr-live { background: #1f3a25; color: #a7dcb0; }
  .usr-owner.yes, .public-state.on { color: #8fd19b; }
  .usr-warn, .public-state.wait { color: #f0c27a; }
}

/* ---------- Verejná verzia záhrady (mapa záhrad a náhľady) ---------- */
.pub-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.pub-head h1 { margin-bottom: 2px; }
.pub-head p { margin: 0 0 8px; }
.pub-year { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.pub-map { height: min(62vh, 560px); border: 2px solid var(--ink, #24369a); border-radius: 6px; margin-top: 8px; }
.pub-note { margin: 4px 0 12px; }
.pub-card-in { border: 1px solid var(--rule); border-radius: 8px; padding: 4px 16px 10px; margin: 8px 0 18px; }
.pub-card-in .page-head h2 { margin: 10px 0 4px; }
.pub-seasonal { margin-top: 26px; }
.pub-preview-body { padding: 0 16px; }
.pub-preview-note { margin: 0 16px 6px; font-size: .85rem; color: var(--graphite-soft); }
.usr-preview .pub-head h1 { font-size: 1.5rem; }
.inline-field { display: flex; gap: 8px; align-items: center; }
.inline-field input { flex: 1; min-width: 0; }
.public-extra { margin-top: 10px; }
.usr-other { margin-top: 8px; }
a.usr-live { text-decoration: none; }
.pub-thumb { display: block; width: 100%; aspect-ratio: 4 / 3; background:
  linear-gradient(var(--grid, #e3e9f0) 1px, transparent 1px) 0 0 / 16px 16px,
  linear-gradient(90deg, var(--grid, #e3e9f0) 1px, transparent 1px) 0 0 / 16px 16px, var(--paper, #fdfdfb); }
.pub-thumb-bound { fill: none; stroke: #24369a; }
@media (max-width: 600px) { .pub-map { height: 55dvh; } .pub-preview-body { padding: 0 8px; } }
@media (prefers-color-scheme: dark) { .pub-thumb { --grid: #262c3a; --paper: #171b24; } .pub-thumb-bound { stroke: #8fa2ff; } }

/* ---------- Graf úrody ---------- */
.hv { margin: 14px 0 18px; --chart-bar: #3f7d32; }
.hv figcaption { margin-bottom: 4px; }
.hv-wrap { position: relative; max-width: 620px; }
.hv-svg { display: block; width: 100%; height: auto; overflow: visible; }
.hv-bar { fill: var(--chart-bar); }
.hv-grid { stroke: var(--rule); stroke-width: 1; }
.hv-base { stroke: var(--graphite-soft); stroke-width: 1; }
.hv-tick { fill: var(--graphite-soft); font-size: 12px; }
.hv-val { fill: var(--graphite); font-size: 12px; font-weight: 600; }
.hv-hit { fill: transparent; cursor: default; outline: none; }
.hv-hit:focus-visible { stroke: var(--ink); stroke-width: 2; }
.hv-tip { position: absolute; transform: translate(-50%, calc(-100% - 24px)); background: var(--graphite); color: var(--paper); font-size: .8rem; padding: 3px 8px; border-radius: 4px; pointer-events: none; white-space: nowrap; }
.hv-table table { border-collapse: collapse; margin-top: 4px; }
.hv-table td, .hv-table th { padding: 2px 14px 2px 0; text-align: left; }
@media (prefers-color-scheme: dark) { .hv { --chart-bar: #5fa34f; } }

/* ---------- Úvodná stránka – ukážky, kroky, verejné záhrady ---------- */
.welcome-free { margin: 14px 0 0; font-size: .95rem; color: var(--graphite-soft); }
.welcome-features, .welcome-steps, .welcome-public, .welcome-cta { margin-top: 56px; }
.welcome-features > h2, .welcome-steps > h2, .welcome-public > h2 { margin-bottom: 20px; }
.welcome-feature { display: grid; gap: 14px 28px; grid-template-columns: 1fr; align-items: center; margin-bottom: 36px; }
.welcome-feature figure { margin: 0; }
.welcome-feature img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--rule); border-radius: var(--radius); background: #fdfdfb;
  box-shadow: 0 1px 2px rgba(20, 30, 60, .06), 0 6px 18px rgba(20, 30, 60, .06);
}
.welcome-feature.tall img { max-width: 300px; margin: 0 auto; }
.welcome-feature h3 { margin: 0 0 6px; font-size: 1.35rem; }
.welcome-feature p { margin: 0; }
/* široké obrázky: text nad obrázkom (aby bol obrázok čitateľný); vysoká mapa: vedľa textu */
.welcome-feature figure { order: 2; }
@media (min-width: 720px) {
  .welcome-feature.tall { grid-template-columns: 1fr 1.25fr; }
  .welcome-feature.tall figure { order: 0; }
}
.welcome-steps ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: krok; }
@media (min-width: 720px) { .welcome-steps ol { grid-template-columns: repeat(3, 1fr); } }
.welcome-steps li { counter-increment: krok; padding: 16px 16px 16px 58px; position: relative; background: var(--paper-2); border-radius: var(--radius); }
.welcome-steps li::before {
  content: counter(krok); position: absolute; left: 16px; top: 14px;
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--pencil); color: #fff; font-weight: 700;
}
.welcome-steps strong { display: block; margin-bottom: 4px; }
.welcome-steps span { color: var(--graphite-soft); font-size: .95rem; }
.welcome-public-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.welcome-public-list a { display: grid; gap: 4px; text-decoration: none; color: inherit; padding: 10px; border: 1px solid var(--rule); border-radius: var(--radius); }
.welcome-public-list a:hover, .welcome-public-list a:focus-visible { border-color: var(--ink-soft); }
.welcome-public-list .pub-thumb { border-radius: 4px; margin-bottom: 4px; }
.welcome-public-list strong { color: var(--ink); font-family: var(--hand); font-size: 1.2rem; font-weight: 700; }
.welcome-cta { padding: 22px 22px 6px; border: 2px solid var(--ink); border-radius: 10px; background: var(--paper-2); }
.welcome-cta h2 { margin-top: 0; }
@media (prefers-color-scheme: dark) {
  .welcome-feature img { border-color: #3a4256; box-shadow: none; filter: brightness(.92); }
  .welcome-steps li::before { color: #0f1d0b; }
}