/* Profily ulic: calm IPR-like page (white, ink, one red accent) around the playful drawings. */
:root {
  --bg: #f4f1ea; /* warm paper, a shade under the drawing's #fbfaf6 */
  --paper: #fbfaf6;
  --panel: #ffffff;
  --text: #1d1d1b;
  --muted: #6b6a65;
  --line: #e2ded4;
  --line-strong: #c9c4b8;
  --red: #d8413f; /* the cut ends A/B, the brand mark */
  --red-bg: #fbe9e7;
  --accent: #185fa5;
  --dtm: #3b6d11;
  --osm: #854f0b;
  --odhad: #8f8b82;
  --warn: #a32d2d;
  --user: #534ab7;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(29, 29, 27, 0.06), 0 2px 10px rgba(29, 29, 27, 0.05);
  color-scheme: light;
}
* { box-sizing: border-box; }
body {
  margin: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column;
  font: 14px/1.45 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-feature-settings: "tnum" 1; /* aligned numbers in widths */
  background: var(--bg); color: var(--text);
  -webkit-font-smoothing: antialiased;
}
.spacer { flex: 1; }
.muted { color: var(--muted); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- header ---------- */
header {
  display: flex; align-items: center; gap: 10px; padding: 8px 14px;
  background: var(--panel); border-bottom: 1px solid var(--line);
  position: relative; z-index: 2000; /* menus above the map and its controls (Leaflet puts them at 1000) */
}
.brand { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
.brand-mark { width: 30px; height: 30px; flex: none; }
.brand-name { font-weight: 700; font-size: 16px; letter-spacing: -0.01em; white-space: nowrap; }

button, .btn {
  font: inherit; font-weight: 500; padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: 8px;
  background: var(--panel); color: var(--text); cursor: pointer; line-height: 1.3; white-space: nowrap;
  transition: background 0.12s, border-color 0.12s;
}
button:hover, .btn:hover { background: var(--paper); border-color: #a9a395; }
button.danger { color: var(--warn); border-color: #e6b8b3; }
button.danger:hover { background: var(--red-bg); }
button.primary { background: var(--text); color: #fff; border-color: var(--text); }
button.primary:hover { background: #3a3a37; }

/* The other language, as a short code. */
button.lang { padding: 6px 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--muted); }

.seg-toggle { display: inline-flex; background: var(--bg); border-radius: 9px; padding: 3px; gap: 2px; }
.seg-toggle button { border: 0; border-radius: 7px; background: transparent; padding: 5px 14px; color: var(--muted); }
.seg-toggle button:hover { background: rgba(255, 255, 255, 0.6); color: var(--text); }
.seg-toggle button.active { background: var(--panel); color: var(--text); box-shadow: var(--shadow); font-weight: 600; }

/* Prague / Brno: two sites of the same app, the current one marked. */
.city-toggle { display: inline-flex; background: var(--bg); border-radius: 9px; padding: 3px; gap: 2px; font-size: 13px; }
.city-toggle a { border-radius: 7px; padding: 4px 10px; color: var(--muted); text-decoration: none; }
.city-toggle a:hover { background: rgba(255, 255, 255, 0.6); color: var(--text); }
.city-toggle a[aria-current="page"] { background: var(--panel); color: var(--text); box-shadow: var(--shadow); font-weight: 600; }

/* The illustrations switch. */
.switch { font-size: 13px; display: inline-flex; align-items: center; gap: 8px; border-color: transparent; background: transparent; padding-left: 6px; }
.switch::before {
  content: ""; width: 30px; height: 18px; border-radius: 9px; background: var(--line-strong); flex: none;
  box-shadow: inset 0 0 0 2px var(--line-strong); transition: background 0.15s;
  background-image: radial-gradient(circle 7px at 9px 9px, #fff 6.5px, transparent 7px);
}
.switch[aria-checked="true"]::before {
  background-color: var(--red); box-shadow: inset 0 0 0 2px var(--red);
  background-image: radial-gradient(circle 7px at 21px 9px, #fff 6.5px, transparent 7px);
}

/* Header menus (Export, Soubor). */
.menu { position: relative; }
.menu summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary::after { content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg) translateY(-2px); opacity: 0.6; }
.menu[open] summary { background: var(--paper); border-color: #a9a395; }
.ico { width: 15px; height: 15px; flex: none; }
.menu-list {
  position: absolute; right: 0; top: calc(100% + 6px); min-width: 210px; padding: 6px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 8px 28px rgba(29, 29, 27, 0.14);
  display: flex; flex-direction: column; gap: 2px;
}
.menu-list button, .menu-list .btn { border: 0; text-align: left; border-radius: 6px; padding: 8px 10px; font-weight: 500; }
.menu-list button:hover, .menu-list .btn:hover { background: var(--bg); }
.menu-list hr { border: 0; border-top: 1px solid var(--line); margin: 4px 2px; width: auto; }
.menu-list input { font: inherit; font-size: 13px; padding: 6px 8px; margin: 2px 4px; border: 1px solid var(--line-strong); border-radius: 8px; }
.menu-list .switch { padding-left: 10px; font-size: 14px; }

/* ---------- layout ---------- */
/* --map-size: share of the screen for the map, set by dragging the splitter (app.js). */
/* The profile is the point: the map never leaves it less than 430 px. */
main { flex: 1; display: grid; grid-template-columns: min(var(--map-size, 50%), calc(100% - 440px)) 10px minmax(0, 1fr); min-height: 0; }
#map-pane { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--panel); }
#splitter { cursor: col-resize; background: var(--bg); touch-action: none; position: relative; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
#splitter::after { content: ""; position: absolute; left: 3px; right: 3px; top: 50%; height: 40px; margin-top: -20px; border-radius: 3px; background: var(--line-strong); }
#splitter:hover, #splitter.dragging, #splitter:focus-visible { background: var(--line); outline: none; }
#splitter:hover::after, #splitter.dragging::after { background: var(--muted); }
body.resizing { user-select: none; cursor: col-resize; }
#map { flex: 1; }
#map-help { padding: 8px 12px; font-size: 13px; color: var(--muted); border-top: 1px solid var(--line); }
#map-help[hidden] { display: none; }
.pano-link { display: block; padding: 6px 12px; font-size: 13px; border-top: 1px solid var(--line); color: var(--accent); }
.pano-link[hidden] { display: none; }
button.pano-link { width: 100%; text-align: left; background: var(--panel); border: 0; border-top: 1px solid var(--line); border-radius: 0; cursor: pointer; }
#pano-dialog { width: min(1100px, 94vw); height: min(720px, 86vh); padding: 0; border: 1px solid var(--line); border-radius: var(--radius); flex-direction: column; }
#pano-dialog[open] { display: flex; }
#pano-dialog::backdrop { background: rgba(29, 29, 27, 0.5); }
.pano-head { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.pano-head .muted { flex: 1; font-size: 13px; }
#pano-view { flex: 1; position: relative; background: #222; }
#report-dialog { width: min(520px, 94vw); padding: 0; border: 1px solid var(--line); border-radius: var(--radius); }
#report-dialog::backdrop { background: rgba(29, 29, 27, 0.5); }
#report-dialog .pano-head strong { flex: 1; }
.report-body { display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.report-what { display: flex; flex-wrap: wrap; gap: 6px; }
.report-what label { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border: 1px solid var(--line); border-radius: 20px; font-size: 13px; cursor: pointer; }
.report-what label:has(input:checked) { border-color: var(--accent); background: #e6f1fb; }
.report-what input { margin: 0; }
#report-text { width: 100%; box-sizing: border-box; font: inherit; padding: 8px; border: 1px solid var(--line-strong); border-radius: 8px; resize: vertical; }
.report-note { margin: 0; font-size: 12px; }
.report-buttons { display: flex; align-items: center; gap: 8px; }
.report-buttons span { flex: 1; font-size: 13px; }
#stav-cta button.link[hidden], .menu-list button[hidden] { display: none; }
#stav-cta button.link { border: 0; background: none; padding: 0; color: var(--accent); text-decoration: underline; cursor: pointer; font-size: 13px; }
.pano-credit { font-size: 11px; color: var(--muted); padding: 4px 12px; }

/* ---------- profile pane ---------- */
#profile-pane { overflow: auto; padding: 14px 18px 18px; display: flex; flex-direction: column; gap: 12px; }
#profile-pane > * { flex: none; }
#profile-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
#profile-head[hidden] { display: none; }
#profile-head h1 { margin: 0; font-size: 24px; line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; }
#profile-sub { font-size: 14px; }
body[data-mode="navrh"] #profile-wrap { box-shadow: inset 4px 0 0 var(--accent), var(--shadow); }
#stav-cta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-radius: var(--radius); background: var(--panel); border: 1px dashed var(--line-strong); color: var(--muted); }
#stav-cta[hidden] { display: none; }
#shares { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; display: grid; gap: 6px; }
#shares[hidden] { display: none; }
#shares h3 { margin: 0; font-size: 13px; }
.share-row { display: flex; align-items: center; gap: 8px; }
.share-title { width: 48px; font-size: 12px; font-weight: 600; color: var(--muted); }
.share-bar { flex: 1; display: flex; height: 22px; border-radius: 6px; overflow: hidden; }
.share-bar span { display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: #1d1d1b; min-width: 0; overflow: hidden; white-space: nowrap; }
.share-bar span.dark { color: #fff; }
.share-note { font-size: 11px; color: var(--muted); }
.share-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--muted); }
.share-legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--c); margin-right: 5px; vertical-align: -1px; }
#stav-cta.fixing { border: 1px solid var(--user); background: #f1effb; color: var(--text); }
#stav-cta button[hidden] { display: none; }
#stav-cta span { flex: 1; min-width: 220px; }
.diff { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; margin-top: 12px; }
.diff h3 { margin: 0 0 4px; font-size: 13px; }
.diff ul { margin: 0; padding-left: 18px; }
#profile-wrap { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; box-shadow: var(--shadow); }
/* A wide street keeps a readable scale (app.js fitPhone) and scrolls sideways instead of shrinking. */
#profile-wrap.scrolls { overflow-x: auto; -webkit-overflow-scrolling: touch; }
#profile-frame { position: relative; }
.scroll-btn { width: 32px; height: 32px; padding: 0; border-radius: 50%; font-size: 20px; line-height: 1;
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--text); }
.scroll-btn[hidden] { visibility: hidden; display: inline-block; }
.compare-title { margin: 12px 0 4px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.compare-title:first-child { margin-top: 0; }
.compare-title .muted { text-transform: none; letter-spacing: 0; font-weight: 400; }
#profile g.seg.changed rect.ground, #profile g.seg.hover rect.ground { stroke: var(--accent); stroke-width: 3px; vector-effect: non-scaling-stroke; }
#profile g.seg.hover rect.ground { fill-opacity: .7; }
#width-check.ok { display: inline-flex; padding: 3px 10px; font-size: 12px; border-radius: 999px; }
#profile-wrap.fade-r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); }
#profile-wrap.fade-l { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 48px), transparent); }
#profile-wrap.fade-l.fade-r { -webkit-mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent); }
#scroll-hint { font-size: 12px; margin: 6px 0 0; display: flex; align-items: center; gap: 6px; }
#scroll-hint span { flex: 1; }
#scroll-hint[hidden] { display: none; }
#profile svg { display: block; width: var(--fit-width, 100%); max-width: none; height: auto; user-select: none; }
#profile svg + svg { margin-top: 14px; }
/* A tall profile leaves room for the editor below it (the drawing keeps its proportions); in Stav the same, so the
   profile keeps its size and place when Návrh is switched on (Bára). */
body:is([data-mode="navrh"], [data-mode="stav"]) #profile svg { max-height: max(260px, calc(100dvh - 400px)); }
body[data-mode="porovnat"] #profile svg { max-height: max(200px, calc((100dvh - 330px) / 2)); }
#profile .seg { cursor: pointer; }
#profile .seg.selected rect.ground { stroke: var(--accent); stroke-width: 3px; vector-effect: non-scaling-stroke; }
/* An edge of the street (a building, a fence, a garden), selected like a part. */
#profile g.edge { cursor: pointer; }
#profile g.edge:hover, #profile g.edge:focus-visible { filter: drop-shadow(0 0 4px var(--accent)); outline: none; }
#profile g.edge.selected { filter: drop-shadow(0 0 6px var(--accent)); }
#profile .seg.selected { filter: drop-shadow(0 0 0 transparent); }
#profile .seg.selected rect.ground { fill-opacity: 0.75; }
#profile .handle { cursor: ew-resize; }
#profile .handle:hover line { stroke: var(--accent); stroke-width: 3; }
#profile .seg:focus { outline: none; }
#profile .seg:focus-visible rect.ground { stroke: var(--accent); stroke-width: 5; }
#profile text { pointer-events: none; }

/* Before the first cut: a short how-to with the tram. */
.empty { display: flex; gap: 20px; align-items: center; padding: 24px 18px; }
.empty img { flex: none; }
.empty h1 { margin: 0 0 8px; font-size: 18px; letter-spacing: -0.01em; }
.empty ol { margin: 0; padding-left: 20px; color: var(--muted); }
.empty li { margin: 3px 0; }

#status { font-size: 13px; color: var(--muted); }
#status:empty { display: none; }
#profile .handle { touch-action: none; }
#profile-head .flip { padding: 4px 10px; font-size: 13px; align-self: center; }
#profile-head .head-tools { display: inline-flex; gap: 8px; align-self: center; white-space: nowrap; margin-left: auto; }
#profile-head #site-btn[hidden] { display: none; }
#profile-head #site-btn[aria-pressed="true"] { background: var(--paper); border-color: #a9a395; box-shadow: inset 0 0 0 1px #a9a395; }
#net-hint { margin: 6px 2px 0; font-size: 12px; }
#undo-bar { display: inline-flex; gap: 4px; align-self: center; }
#undo-bar[hidden] { display: none; }
#undo-bar button { padding: 4px 10px; font-size: 13px; }
#undo-bar button:disabled { opacity: .4; }
#status.error { color: var(--warn); background: var(--red-bg); border-radius: var(--radius); padding: 8px 12px; font-weight: 500; }
#status.error::before { content: "⚠ "; }
#status.ok { color: var(--dtm); }
.noscript { margin: 0; padding: 12px 16px; background: var(--red-bg); color: var(--warn); font-weight: 600; }
body.loading #status::before {
  content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 8px; vertical-align: -2px;
  border: 2px solid var(--red); border-right-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite;
}
body.loading #profile { opacity: 0.45; transition: opacity 0.2s; }
@keyframes spin { to { transform: rotate(360deg); } }

#legend[hidden] { display: none; }
#legend { display: flex; gap: 6px 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); padding: 0 2px; }
.src::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; background: var(--c); }
.src-dtm { --c: var(--dtm); } .src-osm { --c: var(--osm); } .src-tsk { --c: #0f6e56; } .src-odhad { --c: var(--odhad); } .src-user { --c: var(--user); } .src-ortofoto { --c: #c07a12; }

.card, #editor { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
#editor { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.ed-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; }
.ed-head h3 { margin: 0; font-size: 15px; }
.ed-head .close, .pano-head .close { margin-left: auto; border: 0; font-size: 20px; line-height: 1; padding: 2px 8px; color: var(--muted); }
.ed-row { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.ed-row:empty { display: none; }
.ed-row .spacer { flex: 1; }
.stepper { display: inline-flex; align-items: center; gap: 4px; }
.stepper .step { width: 34px; padding: 6px 0; text-align: center; font-weight: 600; }
.items { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; color: var(--muted); }
button.tag { padding: 3px 9px; border-radius: 20px; font-size: 12px; }
#editor > label { display: flex; }
#editor:empty { display: none; }
#editor label { display: inline-flex; gap: 8px; align-items: center; font-weight: 500; max-width: 100%; min-width: 0; }
#editor input.floors { width: 4.5em; } /* the floors of a building at an edge */
#editor select { max-width: 100%; min-width: 0; flex: 1; text-overflow: ellipsis; }
#editor input[type=number], #editor select, #editor input[type=text] {
  font: inherit; font-weight: 400; padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--panel);
}
#editor input[type=number] { width: 88px; }

#width-check { border-radius: var(--radius); padding: 10px 14px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
#width-check[hidden] { display: none; }
#width-check.ok { background: #eaf3de; color: var(--dtm); }
#width-check.off { background: var(--red-bg); color: var(--warn); font-weight: 600; }
#rule-check { background: #fff7e6; border: 1px solid #f0d8a8; border-radius: var(--radius); padding: 10px 14px; font-size: 13px; }
#rule-check[hidden] { display: none; }
#rule-check ul { margin: 4px 0 0; padding-left: 18px; }
#rule-check li.min { color: var(--warn); }
#rule-check li { cursor: pointer; }
#rule-check .muted { font-size: 12px; }
#profile .seg.warn-min rect.ground { stroke: #c0392b; stroke-width: 6; stroke-dasharray: 14 8; }
#profile .seg.warn-zaklad:not(.warn-min) rect.ground { stroke: #d68910; stroke-width: 4; stroke-dasharray: 10 8; }

/* Parts to add, each with its colour from the drawing. */
#palette { display: flex; flex-direction: column; gap: 8px; }
#palette:empty { display: none; }
.pal-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.pal-group { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pal-name { width: 118px; font-size: 12px; color: var(--muted); font-weight: 500; }
#palette .chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; padding: 5px 10px 5px 8px;
  border-radius: 20px; border: 1px solid var(--line); background: var(--panel); cursor: pointer;
}
#palette .chip::before { content: ""; width: 12px; height: 12px; border-radius: 4px; background: var(--c, #ccc); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); }
#palette .chip:hover { border-color: var(--line-strong); background: var(--paper); }

footer { padding: 5px 14px; font-size: 12px; color: var(--muted); background: var(--panel); border-top: 1px solid var(--line); }
footer a { color: inherit; }
.cut-handle { background: var(--red); border: 2px solid #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }
.cut-end { color: #fff; font: 600 12px/18px Inter, system-ui, sans-serif; text-align: center; }

/* Touch screens: a larger invisible grab area around the cut handles. */
@media (pointer: coarse) {
  .cut-handle::before { content: ""; position: absolute; inset: -14px; border-radius: 50%; }
}

/* Large screens: the profile pane keeps its controls at a comfortable reading width. */
@media (min-width: 1600px) {
  #editor, #palette, #width-check, #rule-check { max-width: 1100px; }
}

/* Laptops and tablets: a lighter header. */
@media (max-width: 1180px) {
  header { gap: 8px; padding: 8px 10px; }
  .seg-toggle button { padding: 5px 10px; }
}
@media (max-width: 960px) and (min-width: 761px) {
  .brand-name { display: none; }
  #profile-pane { padding: 12px; }
}

/* Phones: map above the profile, the page scrolls; the header is two short rows. */
@media (max-width: 760px) {
  body { height: auto; min-height: 100vh; }
  header { flex-wrap: wrap; gap: 8px; padding: 8px 10px; }
  .brand-name, header .spacer, .menu summary::after, header .lbl { display: none; }
  .brand-mark { width: 32px; height: 32px; }
  #btn-share { margin-left: auto; }
  .menu summary { padding: 8px 10px; }
  button.lang { padding: 8px 8px; }
  .ico { width: 18px; height: 18px; }
  .seg-toggle { order: 10; flex-basis: 100%; }
  .seg-toggle button { flex: 1; padding: 8px 6px; font-size: 14px; }
  .menu-list { right: 0; left: auto; }
  main { display: flex; flex-direction: column; }
  #map { height: var(--map-size, 55vh); flex: none; }
  #splitter { height: 18px; cursor: row-resize; flex: none; border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  #splitter::after { top: 7px; bottom: auto; height: 4px; margin-top: 0; left: 50%; right: auto; width: 48px; margin-left: -24px; }
  body.resizing { cursor: row-resize; }
  #map-help { display: none; }
  #profile-pane { overflow: visible; padding: 10px 8px; }
  #profile-wrap { padding: 6px; }
  .empty { flex-direction: column; text-align: center; padding: 16px 8px; }
  .empty ol { text-align: left; }
  #editor { padding: 10px; }
  #editor input[type=number], #editor select, .menu-list input, #report-text { font-size: 16px; } /* no zoom on focus in iOS */
  #palette .chip { min-height: 40px; padding: 8px 12px 8px 9px; font-size: 13px; }
  .pal-name { width: 100%; }
  #editor label { flex-direction: column; align-items: stretch; gap: 4px; }
  #editor .ed-row > label { flex: 1 1 140px; }
  .ed-row button { min-height: 40px; }
  #profile-head h1 { font-size: 20px; }
}

/* Address search at the map's top left (search.js), above the zoom buttons. */
#map .search { position: relative; z-index: 801; width: 300px; max-width: calc(100vw - 90px); background: var(--panel); border-radius: 8px; box-shadow: var(--shadow); cursor: auto; }
#map .search input { width: 100%; font: inherit; padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--panel); color: var(--text); }
#map .search input:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
#map .search ul { position: absolute; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px; list-style: none; max-height: 320px; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); }
#map .search ul[hidden] { display: none; }
#map .search li { display: flex; flex-direction: column; padding: 6px 8px; border-radius: 6px; cursor: pointer; line-height: 1.3; }
#map .search li[aria-selected="true"], #map .search li[role=option]:hover { background: var(--bg); }
#map .search .search-main { font-weight: 500; }
#map .search .search-sub, #map .search .search-note { font-size: 12px; }
#map .search .search-note { cursor: default; }
@media (max-width: 760px) {
  #map .search { width: calc(100vw - 80px); }
  #map .search input { font-size: 16px; padding: 8px 10px; } /* no zoom on focus in iOS */
  #map .search li { padding: 8px; }
}

/* Clicking the map makes a cut: a crosshair instead of Leaflet's open hand, which reads as "pan only".
   Dragging the map still shows the closed hand. */
#map.leaflet-container, #map .leaflet-grab, #map .leaflet-interactive { cursor: crosshair; }
#map.leaflet-dragging .leaflet-grab { cursor: grabbing; }
#map .leaflet-marker-icon.leaflet-interactive { cursor: grab; }

/* Networks under the street (a trial): a hand over them, their ring darker on hover. */
#profile .networks g { cursor: pointer; }
#profile .networks g:hover circle.net { stroke: #1d1d1b; stroke-opacity: 1; stroke-width: 3; }

#net-tip { position: fixed; z-index: 1000; pointer-events: none; max-width: 280px; padding: 6px 9px; border-radius: 8px; background: #1d1d1b; color: #fbfaf6; font-size: 12px; line-height: 1.35; box-shadow: 0 4px 14px rgba(0,0,0,.18); white-space: pre-line; }
#net-tip[hidden] { display: none; }
/* The profile's magnifier: + and − in its top right corner. */
.zoom-ctl { position: absolute; top: 8px; right: 8px; display: flex; flex-direction: column; gap: 4px; z-index: 5; }
.zoom-ctl button { width: 30px; height: 30px; padding: 0; font-size: 18px; line-height: 1; border-radius: 8px; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow); }
.zoom-ctl button:disabled { opacity: .4; }

/* The magnifier: a zoomed drawing keeps its full height (Návrh and Porovnat otherwise cap it, which undid the zoom). */
#profile.zoomed svg { max-height: none !important; }
@media (max-width: 760px) { .zoom-ctl { top: 52px; } } /* clear of the A/B marks and the top of the houses */
#btn-share { display: inline-flex; align-items: center; gap: 6px; }

/* The card of a part (Fable's look at the interface): its moves in the head, the rarer choices folded. */
.ed-acts { display: inline-flex; gap: 4px; margin-left: auto; align-self: center; }
.ed-acts button { padding: 4px 9px; font-size: 13px; min-width: 32px; }
.ed-acts button:disabled { opacity: 0.35; cursor: default; }
.ed-hint { margin: -4px 0 0; font-size: 13px; }
#editor.hint-only { background: none; border: 0; box-shadow: none; padding: 0 2px; }
#editor.hint-only .ed-hint { margin: 0; }
.ed-more { border-top: 1px solid var(--line); padding-top: 8px; display: flex; flex-direction: column; gap: 10px; }
.ed-more:not([open]) { gap: 0; }
.ed-more summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--muted); }
.ed-more[open] summary { margin-bottom: 2px; }
/* The palette folded into one button. */
#palette details { display: flex; flex-direction: column; gap: 8px; }
#palette details > summary { list-style: none; align-self: flex-start; font-weight: 600; cursor: pointer; }
#palette details > summary::-webkit-details-marker { display: none; }
#palette details[open] > summary { background: var(--paper); }
.pal-note { font-size: 12px; margin: 8px 0 4px; }
@media (max-width: 760px) {
  .ed-head { row-gap: 6px; }
  .ed-acts { order: 5; margin-left: 0; flex-basis: 100%; }
  .ed-acts button { min-height: 40px; flex: 1; }
}
footer summary { cursor: pointer; }
footer details[open] summary { margin-bottom: 4px; }
#editor .items select { flex: 0 1 auto; width: 11.5em; } /* closed it says only "+ přidat…"; the list opens wider */
.ed-acts .close { margin-left: 2px; padding: 2px 6px; }
#editor .under-size { display: inline-flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
#editor .under-size input[type=number] { width: 72px; }
#editor .under-size .muted { font-size: 12px; }