:root {
  --green: #426f3a;
  --navy: #162238;
  --white: #ffffff;
  --muted: #68707e;
  --line: rgba(22, 34, 56, 0.18);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--white);
  color: var(--navy);
  font-family: "Arial Nova Condensed", "Arial Narrow", Arial, sans-serif;
}

button { font: inherit; }

.page {
  width: min(1500px, calc(100% - 32px));
  margin: 0 auto;
  padding: 34px 0 56px;
}

.intro {
  max-width: 780px;
  margin-bottom: 22px;
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--green);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .85rem;
}

h1 {
  margin: 0 0 10px;
  font-family: "Arial Nova", Arial, sans-serif;
  font-size: clamp(2.2rem, 5vw, 4.8rem);
  line-height: .95;
}

.intro > p:last-child {
  margin: 0;
  font-size: 1.12rem;
  line-height: 1.5;
}

.map-shell {
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.map-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.view-switch {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tool-button {
  border: 1.5px solid var(--navy);
  border-radius: 999px;
  background: var(--white);
  color: var(--navy);
  min-height: 42px;
  padding: 9px 14px;
  cursor: pointer;
  font-weight: 800;
}

.tool-button.is-active {
  background: var(--navy);
  color: var(--white);
}

.tool-button-secondary {
  border-color: var(--green);
  color: var(--green);
}

.map {
  width: 100%;
  height: clamp(470px, 68vw, 820px);
  min-height: 470px;
  overflow: hidden;
  border-radius: 20px;
  background: var(--white);
  border: 1px solid rgba(22, 34, 56, .10);
}

.map-note {
  margin-top: 10px;
  color: var(--muted);
  font-size: .94rem;
  line-height: 1.4;
}

.palette-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-weight: 700;
}

.palette-preview span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-block;
  border: 1px solid var(--navy);
}

.swatch-green { background: var(--green); border-color: var(--green); }
.swatch-navy { background: var(--navy); }
.swatch-white { background: var(--white); }

.maplibregl-ctrl-group {
  box-shadow: none !important;
  border: 1px solid rgba(22, 34, 56, .18);
  border-radius: 10px !important;
  overflow: hidden;
}

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

.maplibregl-popup-content {
  border-radius: 12px;
  box-shadow: 0 8px 26px rgba(22, 34, 56, .16);
  color: var(--navy);
}

.maplibregl-ctrl-attrib {
  font-size: 11px;
}

@media (max-width: 700px) {
  .page {
    width: min(100% - 16px, 1500px);
    padding-top: 20px;
  }

  .map-toolbar {
    display: grid;
    grid-template-columns: 1fr;
  }

  .view-switch {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .tool-button {
    width: 100%;
    border-radius: 12px;
    min-height: 48px;
  }

  .map {
    height: 68vh;
    min-height: 520px;
    border-radius: 14px;
  }

  .maplibregl-ctrl-top-right {
    top: 8px;
    right: 8px;
  }
}


/* Programové body */
.program-popup {
  font-family: "Arial Nova Condensed", "Arial Narrow", Arial, sans-serif;
  color: var(--navy);
}

.program-popup-priority {
  color: var(--green);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: .78rem;
  margin-bottom: 5px;
}

.program-popup h3 {
  margin: 0 0 8px;
  font-family: "Arial Nova", Arial, sans-serif;
  font-size: 1.25rem;
  line-height: 1.05;
}

.program-popup p {
  margin: 0;
  line-height: 1.42;
  font-size: .98rem;
}

/* Editor se zobrazí pouze při ?edit=points */
.program-point-editor {
  position: fixed;
  z-index: 20;
  left: 14px;
  top: 14px;
  bottom: 14px;
  width: min(390px, calc(100vw - 28px));
  display: flex;
  flex-direction: column;
  background: rgba(255,255,255,.98);
  border: 1px solid rgba(22,34,56,.16);
  border-radius: 16px;
  box-shadow: 0 14px 40px rgba(22,34,56,.18);
  overflow: hidden;
  color: var(--navy);
}

.program-point-editor-head {
  padding: 16px;
  border-bottom: 1px solid rgba(22,34,56,.12);
}

.program-point-editor-head strong {
  font-family: "Arial Nova", Arial, sans-serif;
  font-size: 1.15rem;
}

.program-point-editor-head p {
  margin: 6px 0 0;
  line-height: 1.35;
}

.program-point-editor-list {
  overflow: auto;
  padding: 7px;
  flex: 1;
}

.program-point-editor-item {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--navy);
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 9px;
  border-radius: 10px;
  text-align: left;
  cursor: pointer;
}

.program-point-editor-item:hover,
.program-point-editor-item.is-selected {
  background: rgba(66,111,58,.12);
}

.editor-point-number {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--green);
  color: white;
  font-family: "Arial Nova", Arial, sans-serif;
  font-weight: 800;
}

.editor-point-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.editor-point-copy strong {
  line-height: 1.05;
}

.editor-point-copy small {
  color: #68707e;
}

.program-point-editor-actions {
  display: grid;
  gap: 7px;
  padding: 10px;
  border-top: 1px solid rgba(22,34,56,.12);
}

.program-point-editor-actions button {
  min-height: 42px;
  border: 1px solid var(--navy);
  border-radius: 9px;
  background: white;
  color: var(--navy);
  font-weight: 800;
  cursor: pointer;
}

.program-point-editor-actions button:first-child {
  background: var(--navy);
  color: white;
}

.program-point-editor-active .page {
  padding-left: 410px;
}

@media (max-width: 900px) {
  .program-point-editor {
    position: relative;
    left: auto;
    top: auto;
    bottom: auto;
    width: calc(100% - 16px);
    max-height: 480px;
    margin: 8px auto 16px;
  }

  .program-point-editor-active .page {
    padding-left: 0;
  }
}


/* Hlavní principy */
.principle-filter{display:grid;grid-template-columns:.8fr repeat(4,1fr);margin:8px 0 22px;border-top:1px solid rgba(22,34,56,.16);border-bottom:1px solid rgba(22,34,56,.16)}
.principle-item{appearance:none;border:0;border-right:1px solid rgba(22,34,56,.12);background:transparent;color:var(--navy);padding:13px 12px;display:flex;align-items:center;gap:10px;text-align:left;cursor:pointer;line-height:1.05;font-weight:700}.principle-item:last-child{border-right:0}.principle-symbol{flex:0 0 auto;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;border:2px solid var(--green);color:var(--green);background:#fff;font-family:"Arial Nova",Arial,sans-serif;font-weight:800}.principle-item.is-active{background:rgba(66,111,58,.07)}.principle-item.is-active .principle-symbol,.principle-item:hover .principle-symbol{background:var(--green);color:#fff}.symbol-all{font-size:.7rem}
.idea-callout{display:grid;grid-template-columns:1fr auto;align-items:center;gap:20px;margin:0 0 14px;padding:16px 0;border-top:1px solid rgba(22,34,56,.14);border-bottom:1px solid rgba(22,34,56,.14)}.idea-callout h2{margin:0 0 5px;font-family:"Arial Nova",Arial,sans-serif;font-size:clamp(1.5rem,3vw,2.2rem)}.idea-callout p:last-child{margin:0}.idea-toggle{border:0;border-radius:999px;padding:12px 18px;background:var(--green);color:#fff;font-weight:800;cursor:pointer;min-height:44px}.idea-toggle.is-active{background:var(--navy)}
.map-toolbar{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap}.layer-switch{display:flex;gap:8px;flex-wrap:wrap}.layer-button{border:1.5px solid var(--navy);background:#fff;color:var(--navy);border-radius:999px;padding:9px 13px;min-height:42px;cursor:pointer;font-weight:800}.layer-button.is-active{background:var(--navy);color:#fff}
.idea-dialog{width:min(680px,calc(100% - 28px));padding:0;border:0;border-radius:20px;color:var(--navy)}.idea-dialog::backdrop{background:rgba(22,34,56,.62)}.dialog-copy{padding:26px 28px 30px}.dialog-copy h2{font-family:"Arial Nova",Arial,sans-serif}.dialog-close{position:absolute;right:12px;top:12px;width:42px;height:42px;border:0;border-radius:50%;background:#fff;color:var(--navy);font-size:1.7rem;cursor:pointer;box-shadow:0 2px 12px rgba(0,0,0,.15)}#ideaForm{display:grid;gap:12px}#ideaForm label{font-weight:800}#ideaText,#ideaName,#ideaPrinciple{width:100%;padding:11px 13px;border:1.5px solid rgba(22,34,56,.24);border-radius:12px;color:var(--navy);background:#fff;font-size:1rem}#ideaText{min-height:150px;resize:vertical}.identity-fields{display:grid;gap:9px}.anonymous-choice{display:flex;align-items:center;gap:9px;font-weight:700;cursor:pointer}.anonymous-choice input{width:18px;height:18px;accent-color:var(--green)}.hp-field{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important}.form-note{margin:0;color:#68707e;font-size:.88rem;line-height:1.45}.button{border:0;border-radius:999px;padding:11px 16px;background:var(--green);color:#fff;cursor:pointer;font-weight:700}.idea-result{margin-top:18px;padding:14px 16px;border-left:4px solid var(--green);background:rgba(66,111,58,.07)}.popup-author{margin-top:12px;color:var(--green);font-weight:800}
@media(max-width:820px){.principle-filter{grid-template-columns:1fr 1fr}.principle-item:first-child{grid-column:1/-1}.principle-item{border-bottom:1px solid rgba(22,34,56,.12)}}
@media(max-width:700px){.idea-callout{grid-template-columns:1fr;gap:14px}.idea-toggle{width:100%;border-radius:12px;min-height:50px}.map-toolbar{display:grid;grid-template-columns:1fr}.layer-switch,.view-switch{display:grid;grid-template-columns:1fr 1fr;width:100%}.layer-button,.tool-button{width:100%;border-radius:12px;min-height:48px}.dialog-copy{padding:22px 20px 24px}}
@media(max-width:480px){.principle-filter{grid-template-columns:1fr}.principle-item:first-child{grid-column:auto}.principle-item{border-right:0}.layer-switch{grid-template-columns:1fr}}