/* Ceļojumu plānotājs. Vizuālā identitāte: docs/DESIGN.md (meža migla, bērzs, priede, ogle).
   Kartes krāsas (--m-*) ir vienādas abās tēmās, jo flīzes vienmēr ir gaišas. */

:root {
  --bg: #E4E7E1; --bg2: #F3F4F0; --bg3: #D8DCD4;
  --ink: #24281F; --ink2: #5C6156; --line: #C6CBC0; --line2: #A9AFA2;
  --birch: #D9A621; --birch-ink: #7F5D0C; --birch-line: #A57A0B;
  --ember: #B03D18; --pine: #2E5A3C; --pine-soft: #DCE7DD; --gravel: #8B8A80;
  --s0: #4F534B; --s1: #D9A621; --s2: #2E5A3C; --s3: #B8401A; --s4: #B9BDB3;
  --field: #FBFBF8;
  --focus: #A57A0B;
  --hatch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Crect width='6' height='6' fill='%23F3F4F0'/%3E%3Cpath d='M-1 1l2-2M0 6l6-6M5 7l2-2' stroke='%23B9BDB3' stroke-width='2.2'/%3E%3C/svg%3E");

  /* karte: nemainās ar tēmu */
  /* --m-plan: galvenā plāna trase (ogle), --m-alt: aktīvais variants (ezera zilā) */
  --m-plan: #24281F; --m-alt: #2E88B0;
  --m-ink: #24281F; --m-pine: #2E5A3C; --m-birch: #D9A621; --m-birch-deep: #B98A0E;
  --m-ember: #B8401A; --m-gravel: #8B8A80; --m-slate: #5B6472; --m-shop: #3D5A80; --m-water: #2B7A9E; --m-poi: #6F6E66;
  --ms0: #4F534B; --ms1: #D9A621; --ms2: #2E5A3C; --ms3: #B8401A; --ms4: #B9BDB3;

  --fd: "Bricolage Grotesque", "IBM Plex Sans", system-ui, sans-serif;
  --fb: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fm: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --gut: 20px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #171A15; --bg2: #20241E; --bg3: #2B3029;
    --ink: #E6E8E1; --ink2: #A9AEA2; --line: #363B33; --line2: #4D5449;
    --birch: #E7B531; --birch-ink: #E7B531; --birch-line: #E7B531;
    --ember: #E0663A; --pine: #6FAE85; --pine-soft: #22352A; --gravel: #8B8A80;
    --s0: #9A9E95; --s1: #E7B531; --s2: #6FAE85; --s3: #E0663A; --s4: #4A4F47;
    --field: #1B1F19;
    --focus: #E7B531;
    --hatch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Crect width='6' height='6' fill='%2320241E'/%3E%3Cpath d='M-1 1l2-2M0 6l6-6M5 7l2-2' stroke='%235A6056' stroke-width='2.2'/%3E%3C/svg%3E");
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #171A15; --bg2: #20241E; --bg3: #2B3029;
  --ink: #E6E8E1; --ink2: #A9AEA2; --line: #363B33; --line2: #4D5449;
  --birch: #E7B531; --birch-ink: #E7B531; --birch-line: #E7B531;
  --ember: #E0663A; --pine: #6FAE85; --pine-soft: #22352A; --gravel: #8B8A80;
  --s0: #9A9E95; --s1: #E7B531; --s2: #6FAE85; --s3: #E0663A; --s4: #4A4F47;
  --field: #1B1F19;
  --focus: #E7B531;
  --hatch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Crect width='6' height='6' fill='%2320241E'/%3E%3Cpath d='M-1 1l2-2M0 6l6-6M5 7l2-2' stroke='%235A6056' stroke-width='2.2'/%3E%3C/svg%3E");
  color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }

/* ---------- pamats ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body {
  font: 15px/1.5 var(--fb);
  font-feature-settings: "tnum" 1;
  min-height: 100vh;
  overflow-x: hidden;
}
a { color: inherit; text-decoration-color: var(--birch); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:disabled { cursor: not-allowed; }
input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }
[hidden] { display: none !important; }
img, svg { max-width: 100%; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 2000;
  background: var(--ink); color: var(--bg); padding: 8px 12px; border-radius: 4px; text-decoration: none;
}
.skip:focus { top: 12px; }
.loading { padding: 48px var(--gut); color: var(--ink2); margin: 0; }
.noscript { padding: 48px var(--gut); max-width: 60ch; }
.strong { font-weight: 600; color: var(--ink); }
.warn { color: var(--ember); font-weight: 500; }
.ph { color: var(--ink2); margin: 0; padding: 24px 0; }
.tag {
  display: inline-block; margin-left: 8px; padding: 0 7px; border: 1px solid var(--line2); border-radius: 10px;
  font: 500 11.5px/1.6 var(--fb); color: var(--ink2); vertical-align: 1px;
}
/* Nozīmīte sarakstā: stāvoklis ir krāsa + vārds (docs/DESIGN.md). */
.badge {
  display: inline-block; padding: 0 7px; border: 1px solid var(--line2); border-radius: 10px;
  font: 500 11.5px/1.65 var(--fb); color: var(--ink2); white-space: nowrap; vertical-align: 1px;
}
.badge + .badge { margin-left: 6px; }
/* Pirmā atzīme aiz nosaukuma tabulas šūnā (piem. „savienotājs”, „Beidzies”) nepielīp tekstam. */
td.strong > .badge:first-of-type { margin-left: 8px; }
.badge--me { margin-left: 8px; }
.badge--pine { color: var(--pine); border-color: color-mix(in srgb, var(--pine) 45%, var(--line)); }
/* „Titullapā” in /admin/trips: on the title page, which anyone on the internet sees. */
.badge--birch { color: var(--birch-ink); border-color: color-mix(in srgb, var(--birch-line) 55%, var(--line)); }
.check .badge { margin-left: 8px; }

/* ---------- pogas un lauki ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 36px; padding: 6px 14px;
  border: 1px solid var(--line2); border-radius: 4px; background: transparent;
  color: var(--ink); font: 500 14px/1.2 var(--fb); text-decoration: none; white-space: nowrap;
}
.btn:hover { background: var(--bg2); border-color: var(--ink2); }
.btn--primary { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.btn--primary:hover { background: var(--ink2); border-color: var(--ink2); color: var(--bg); }
.btn--danger { color: var(--ember); border-color: color-mix(in srgb, var(--ember) 45%, var(--line)); }
.btn--danger:hover { border-color: var(--ember); background: color-mix(in srgb, var(--ember) 8%, transparent); }
.btn--small { min-height: 30px; padding: 3px 10px; font-size: 13px; }
.btn--icon { min-width: 32px; min-height: 32px; padding: 0 6px; font-size: 16px; }
.btn--wide { width: 100%; min-height: 44px; font-size: 15px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .42; }
.btn:disabled:hover, .btn[aria-disabled="true"]:hover { background: transparent; border-color: var(--line2); }
.btn--primary:disabled:hover, .btn--primary[aria-disabled="true"]:hover { background: var(--ink); border-color: var(--ink); }
.btn[aria-disabled="true"] { cursor: not-allowed; }
.btn[aria-busy="true"] { cursor: progress; }

.field { display: flex; flex-direction: column; gap: 4px; margin: 0 0 12px; min-width: 0; }
.field-label { font: 500 13px/1.3 var(--fb); color: var(--ink2); }
.field-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.field-hint { margin: 2px 0 0; font-size: 12px; color: var(--ink2); display: flex; justify-content: space-between; gap: 12px; }
.field-error { margin: 2px 0 8px; font-size: 13px; color: var(--ember); font-weight: 500; }
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.counter { white-space: nowrap; font-variant-numeric: tabular-nums; }
input[type="text"], input[type="email"], input[type="url"], input[type="number"], input[type="date"],
input[type="time"], input[type="search"], select, textarea {
  width: 100%; min-height: 36px; padding: 6px 9px;
  background: var(--field); border: 1px solid var(--line2); border-radius: 4px;
  font-size: 15px; line-height: 1.35;
}
textarea { resize: vertical; min-height: 72px; line-height: 1.45; }
input:hover, select:hover, textarea:hover { border-color: var(--ink2); }
input:disabled, select:disabled, textarea:disabled { opacity: .55; cursor: not-allowed; border-color: var(--line2); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 0; border-color: var(--ink); }
[aria-invalid="true"] { border-color: var(--ember) !important; }
input[type="checkbox"], input[type="radio"] { width: 17px; height: 17px; margin: 0; accent-color: var(--pine); flex: none; }
.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; min-height: 32px; }

/* ---------- augšējā josla ---------- */

.bar {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px;
  padding: 10px var(--gut); font-size: 13.5px; border-bottom: 1px solid var(--line);
}

/* logo joslas kreisajā pusē: emblēma un vārds ir viena saite uz „/”. Emblēmai ir savas plakanās
   krāsas (docs/DESIGN.md „Logo”), tāpēc tēma maina tikai vārdu; izmēru dod CSS, ne JS. */
.logo { display: inline-flex; align-items: center; gap: 9px; color: inherit; text-decoration: none; }
.logo-mark { display: block; flex: none; width: 24px; height: 24px; }
.logo-word { font: 700 21px/1 var(--fd); font-variation-settings: "opsz" 24; letter-spacing: -.012em; }
/* josla ir klusa: pasvītrojums parādās tikai uz hover un tikai vārdam */
.logo:hover .logo-word {
  text-decoration: underline; text-decoration-color: var(--birch);
  text-decoration-thickness: 1.5px; text-underline-offset: 3px;
}
.logo:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 3px; }

/* lielā zīme saraksta lapā (.trips-head): izmēru un atstarpi dod konteiners, lai emblēma paliek
   ceļojuma glifa kolonnā un vārds sākas tur, kur ceļojumu nosaukumi. */
.logo--big { gap: var(--head-gap, 28px); align-items: center; }
.logo--big .logo-mark { width: var(--head-mark, 88px); height: var(--head-mark, 88px); }
.logo--big .logo-word {
  font-size: var(--head-word, clamp(36px, 5.2vw, 52px));
  font-variation-settings: "opsz" 96; letter-spacing: -.022em;
}
.logo--big:hover .logo-word { text-decoration-thickness: 3px; text-underline-offset: 6px; }

.bar-user { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 16px; margin-left: auto; }
.bar-name { color: var(--ink2); max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* bez sesijas vārda vietā „Ieiet” (ui.js siteBar(null)): saite ar bērza svītru, kā titullapā */
.bar-login {
  padding: 4px 0; font-weight: 500; font-size: 14px; white-space: nowrap;
  text-decoration: underline; text-decoration-color: var(--birch); text-underline-offset: 4px;
}
.bar-login:hover { text-decoration-color: currentColor; }
/* aģenta zīme pirms vārda (ui.js agentChip): priedes punkts — pieslēgts, tukšs grants aplis — nav */
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px 2px 7px;
  border: 1px solid var(--line2); border-radius: 12px;
  font-size: 12.5px; line-height: 1.5; color: var(--ink2); white-space: nowrap; text-decoration: none;
}
a.chip:hover { color: var(--ink); border-color: var(--ink2); }
.chip--unknown { padding-left: 9px; }
.chip-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--pine); }
.chip--off .chip-dot { background: transparent; border: 2px solid var(--gravel); }
/* galvenā navigācija aiz logo: Mani ceļojumi, Publiskie ceļojumi. Pašreizējā bērza tintē ar bērza
   svītru apakšā, tāpat kā pārvaldības cilnes un zobrata punkts. */
.bar-nav { display: flex; align-items: center; gap: 0 18px; }
.bar-nav-link {
  padding: 4px 0; font-weight: 500; font-size: 14px; color: var(--ink2); text-decoration: none; white-space: nowrap;
}
.bar-nav-link:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--birch); }
.bar-nav-link[aria-current] { color: var(--birch-ink); box-shadow: inset 0 -2px 0 var(--birch); }
.bar-nav-link[aria-current]:hover { text-decoration: none; }

/* zobrats: izvēlne ar saitēm, tēmu un „Iziet” (docs/DESIGN.md „Josla un zobrata izvēlne”) */
.bar-menu { position: relative; display: flex; }
.gear {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 4px; color: var(--ink2);
}
.gear:hover, .gear[aria-expanded="true"] { background: var(--bg2); color: var(--ink); }
.gear[aria-current] { color: var(--birch-ink); }
.gear-ic { display: block; width: 20px; height: 20px; fill: currentColor; }
.menu {
  position: absolute; right: 0; top: calc(100% + 7px); z-index: 900; min-width: 172px; padding: 4px;
  background: var(--bg2); border: 1px solid var(--line2); border-radius: 6px; font-size: 14px;
}
.menu-item { display: block; padding: 8px 12px; border-radius: 4px; text-decoration: none; font-weight: 500; white-space: nowrap; }
button.menu-item { width: 100%; text-align: left; }
.menu-item:hover { background: var(--bg3); }
.menu-item[aria-current] { color: var(--birch-ink); box-shadow: inset 3px 0 0 var(--birch); }
/* fokuss iekšpusē: ārpusē tas uzkāptu kaimiņu punktiem un izvēlnes malai */
.menu-item:focus-visible { outline-offset: -3px; }
.menu-sep { margin: 4px -4px; border-top: 1px solid var(--line); }
.menu-label { padding: 6px 12px 2px; font: 500 12px/1.3 var(--fb); color: var(--ink2); }
/* tēmas izvēle: aplītis kā radio pogai; izvēlētajam bērza tintes punkts (krāsa + forma, ne tikai krāsa) */
.menu-radio { display: flex; align-items: center; gap: 10px; }
.menu-radio::before {
  content: ""; flex: none; width: 14px; height: 14px; padding: 2px; border-radius: 50%;
  border: 1.5px solid var(--line2); background-clip: content-box;
}
.menu-radio[aria-checked="true"]::before { border-color: var(--birch-ink); background-color: var(--birch-ink); }
.menu-form { margin: 0; }
.page-title {
  font: 800 clamp(34px, 5vw, 48px)/.95 var(--fd); font-variation-settings: "opsz" 96;
  letter-spacing: -.02em; margin: 0;
}

/* ---------- maršruta glifs ---------- */

.glyph { display: block; overflow: visible; flex: none; --glyph-bg: var(--bg); }
.glyph-line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.glyph-start { fill: currentColor; }
.glyph-end { fill: var(--glyph-bg); stroke: currentColor; stroke-width: 1.6; }
.glyph--main { color: var(--ink); }
.glyph--published { color: var(--pine); }
.glyph--draft { color: var(--birch-line); }
.glyph--draft .glyph-line { stroke-dasharray: 4 3.4; }
.glyph--withdrawn { color: var(--gravel); }
.glyph--none, .glyph--empty { color: var(--gravel); }
.glyph--empty .glyph-line { stroke-dasharray: 1 5; }

/* ---------- ceļojumu saraksts „Mani ceļojumi” (A3: plakāts, kartītes, publiskie, klusā rinda) ---------- */

.trips-page { padding: 20px var(--gut) 72px; max-width: 1180px; }

/* The page head: the big mark (64 px, 56 on a phone), the word, and the title and the lede in the
   word's column under it. */
.trips-head {
  --head-mark: 64px; --head-gap: 22px; --head-word: clamp(32px, 4.4vw, 44px);
  display: grid; grid-template-columns: var(--head-mark) minmax(0, 1fr); column-gap: var(--head-gap);
  padding: 10px 0 18px; border-bottom: 1px solid var(--line);
}
/* `justify-self: start`: the grid cell spans the row, but the link must end after the word —
   otherwise a click in the empty space on the right would go to „/”. */
.trips-head .logo { grid-column: 1 / -1; justify-self: start; }
/* the title stays large (owner's call), in the word's column under the big mark */
.trips-head .page-title { grid-column: 2; margin: 8px 0 0; }
.trips-lede { grid-column: 2; margin: 10px 0 0; max-width: 62ch; color: var(--ink2); }

/* the poster first, the other cards under it, then the archive, the public trips and the quiet line */
.home > .card--poster { margin-top: 24px; }
.home > .cards { margin-top: 16px; }
.home > .archive { margin-top: 28px; }
.archive > .cards { margin-top: 12px; }
.home-sect { margin-top: 36px; }
.sect-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin: 0 0 12px; }
.sect-head h2 {
  margin: 0; font: 700 22px/1.1 var(--fd); font-variation-settings: "opsz" 40; letter-spacing: -.012em;
}
.sect-head a { font-size: 14px; color: var(--ink2); }
.sect-head a:hover { color: var(--ink); }
.sect-intro { margin: -4px 0 14px; max-width: 62ch; color: var(--ink2); }
.sect-empty { margin: 0; color: var(--ink2); }
/* by hand: the backup way, below a line, in the quiet voice */
.quiet {
  margin: 40px 0 0; padding-top: 18px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; font-size: 14px; color: var(--ink2);
}
.quiet-hint { max-width: 62ch; }

/* „Tavs nākamais ceļojums”: the poster of the trip that is not there yet. The same card, a dotted
   gravel glyph and the title in gravel; it is no link, so hover leaves its border alone. */
.poster--next:hover { border-color: var(--line); }
.poster--next .card-glyph { height: 150px; }
.poster--next .card-title { color: var(--gravel); }
.poster--next .card-sub { max-width: 52ch; }

/* The three stops in a row, joined by the route (the title page's stops, on paper): a filled dot,
   a birch one, an open one. The line runs from the first dot to the last, not to the edge. */
.hsteps {
  --hs-gap: 32px;
  position: relative; list-style: none; margin: 22px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--hs-gap);
}
.hsteps::before {
  content: ""; position: absolute; top: 7px; left: 7px;
  right: calc((100% - 2 * var(--hs-gap)) / 3 - 8.5px);
  border-top: 3px solid var(--ink);
}
.hsteps > li { position: relative; min-width: 0; padding-top: 32px; }
.hsteps > li::before {
  content: ""; position: absolute; left: 0; top: 0; width: 17px; height: 17px; border-radius: 50%;
  background: var(--bg2); border: 3px solid var(--ink);
}
.hsteps > li:first-child::before { background: var(--ink); }
.hsteps > li:nth-child(2)::before { background: var(--birch); }
.hsteps h3 {
  margin: 0; font: 700 20px/1.15 var(--fd); font-variation-settings: "opsz" 40; letter-spacing: -.01em;
}
.hsteps p { margin: 6px 0 0; max-width: 42ch; font-size: 14.5px; color: var(--ink2); }
.hsteps .ask-block { margin-top: 10px; }
.hstep-choices { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hsteps .hstep-choices { margin-top: 12px; }
.hstep-alt { font-size: 13px; }
.hsteps .cmd { margin-top: 10px; }
/* connected already: the stop says which agent, with the bar's pine dot */
/* baseline, not center: a token name long enough to wrap keeps the dot on the first line */
.hsteps .hstep-state { display: flex; align-items: baseline; gap: 8px; color: var(--ink); font-weight: 500; }

/* narrow poster: the stops one under another, the route down their left side, ending at the last dot */
@container card-poster (width <= 760px) {
  .poster--next .card-glyph { height: 96px; }
  .hsteps { grid-template-columns: minmax(0, 1fr); gap: 22px 0; padding-left: 30px; }
  .hsteps::before { top: 8px; bottom: 0; left: 7px; right: auto; border-top: 0; border-left: 3px solid var(--ink); }
  .hsteps > li { padding-top: 0; }
  .hsteps > li::before { left: -30px; top: 3px; }
  /* paper over the line below the last dot */
  .hsteps > li:last-child::after {
    content: ""; position: absolute; left: -30px; top: 20px; bottom: 0; width: 17px; background: var(--bg2);
  }
}

/* ---------- publiskie ceļojumi /publiskie ---------- */

.pub-page .page-title { margin-top: 12px; }
.pub-lede { margin: 10px 0 0; max-width: 62ch; color: var(--ink2); }
.pub-search {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 28px;
  margin: 24px 0 0; padding-bottom: 18px; border-bottom: 1px solid var(--line);
}
.pub-search .pub-q { margin: 0; flex: 1 1 260px; max-width: 420px; }
.pub-kind { display: flex; flex-direction: column; gap: 4px; min-width: 0; max-width: 100%; }
/* veidi vienā rindā; ja neietilpst (telefonā), rinda ritinās pati, ne lapa */
.pub-kind .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.pub-kind .seg-btn { white-space: nowrap; }
.pub-status { margin: 14px 0 0; font-size: 14px; color: var(--ink2); }
.pub-list { margin-top: 12px; }
.pub-list[aria-busy="true"] { opacity: .6; transition: opacity .15s; }
.pub-more { margin: 20px 0 0; }
.pub-retry { margin: 10px 0 0; }
.archive { margin-top: 40px; }
.archive summary { cursor: pointer; font: 600 18px/1.3 var(--fd); padding: 6px 0; }
.empty { padding: 36px 0; max-width: 60ch; }
.empty h2 { font: 700 26px/1.15 var(--fd); margin: 0 0 8px; }
.empty p { margin: 0 0 14px; }
/* tukšā ceļojumā: aģenta ceļš zem pogas, klusāk */
.empty .empty-agent { margin-top: 18px; color: var(--ink2); }
.empty-agent code { color: var(--ink); overflow-wrap: anywhere; }
.empty-slug { overflow-wrap: anywhere; }

/* ---------- ceļojuma galva ---------- */

.trip-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 32px;
  padding: 18px var(--gut) 12px;
}
.trip-title { min-width: 0; flex: 1 1 520px; }
.trip-title h1 {
  margin: 0; font: 800 clamp(38px, 6.4vw, 64px)/.95 var(--fd); font-variation-settings: "opsz" 96;
  letter-spacing: -.02em; overflow-wrap: break-word; hyphens: auto;
}
.lede { margin: 8px 0 0; max-width: 72ch; color: var(--ink2); }
.trip-meta { margin: 6px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; font-size: 13.5px; color: var(--ink2); }
.trip-nav {
  display: flex; flex-wrap: wrap; gap: 4px 18px; margin-left: auto; font-weight: 500; padding-bottom: 2px;
}
.trip-nav a { padding: 4px 0; white-space: nowrap; }
.archived-note {
  margin: 10px 0 0; padding: 6px 12px; max-width: 72ch; font-weight: 500;
  border-left: 4px solid var(--gravel); background: var(--bg2);
}
.trip-nav a[aria-current] { text-decoration: none; color: var(--birch-ink); }
/* publisks ceļojums no malas: tikai skatīt; priede — „redz arī citi”, kā publicētam ieteikumam */
.public-note {
  margin: 10px 0 0; padding: 8px 12px; max-width: 72ch;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  border-left: 4px solid var(--pine); background: var(--bg2);
}
.public-note p { margin: 0; flex: 1 1 32ch; }
.nav-gpx::after { content: ""; }

/* ---------- variantu josla ---------- */

.variants { border-top: 1px solid var(--line); }
.variants:empty, .trip-head:empty { display: none; }
.variant-list {
  list-style: none; margin: 0; padding: 0; display: flex; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scrollbar-width: thin;
}
.variant {
  position: relative; flex: 0 0 auto; min-width: 250px; max-width: 360px;
  border-right: 1px solid var(--line); scroll-snap-align: start;
}
.variant::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: transparent; }
.variant.is-selected { background: var(--bg2); }
.variant.is-selected .glyph, .v-link:hover .glyph { --glyph-bg: var(--bg2); }
.variant.is-selected::before { background: var(--birch); }
.v-link {
  display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px; align-items: center;
  height: 100%; padding: 12px 18px 12px var(--gut); text-decoration: none; color: inherit; text-align: left; width: 100%;
}
.variant:not(:first-child) .v-link { padding-left: 18px; }
.v-link:hover { background: var(--bg2); }
.v-link:hover .v-title { text-decoration: underline; text-decoration-color: var(--birch); }
.v-link:focus-visible { outline-offset: -3px; }
.v-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.v-title {
  font: 600 16px/1.2 var(--fd); overflow-wrap: anywhere;
  /* garš nosaukums nepadara visu joslu augstāku: 2 rindas, pilns teksts virsrakstā (title) */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.v-state, .v-meta { display: flex; flex-wrap: wrap; gap: 0 10px; font-size: 12.5px; color: var(--ink2); }
.v-sw { display: inline-flex; align-items: center; }
.state { font-weight: 600; }
.state--main { color: var(--ink); }
.state--published { color: var(--pine); }
.state--draft { color: var(--birch-ink); }
/* grants krāsa tekstam gaišajā tēmā ir par gaišu (2,8:1), tāpēc tumšāks tonis */
.state--withdrawn { color: color-mix(in srgb, var(--gravel) 55%, var(--ink)); }
.diff { font-weight: 500; color: var(--ink); }
.v-new { grid-template-columns: 48px auto; color: var(--ink2); }
.variant.variant--new { min-width: 0; }
.variant--new .v-title { max-width: 9em; }
/* „Jauns melnraksts” vienmēr redzams: ja joslā kolonnu ir vairāk, nekā ietilpst, tā pielīp labajā malā
   (tā pati vertikālā līnija kreisajā pusē, fons kā joslai, bez ēnas). */
.variant--new[data-sticky] {
  position: sticky; right: 0; z-index: 2; margin-left: -1px;
  background: var(--bg); border-left: 1px solid var(--line); border-right: 0;
}
.variant--new[data-sticky] .v-link:hover { background: var(--bg2); }
.v-plus {
  display: grid; place-items: center; width: 48px; height: 48px; border: 2px dashed var(--birch-line);
  border-radius: 50%; font: 500 26px/1 var(--fd); color: var(--birch-ink);
}
.v-new:hover { color: var(--ink); }

/* ---------- redzamības rinda ---------- */

.visrow { border-top: 1px solid var(--line); padding: 10px var(--gut) 12px; }
.visrow:empty { display: none; }
.visrow-main { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; }
.vis { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; font-size: 14px; }
.vis-who { font-weight: 500; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.action-with-hint { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.action-hint { font-size: 12.5px; color: var(--ink2); }
.notice {
  margin: 0 0 10px; padding: 8px 12px; border-left: 4px solid var(--birch); background: var(--bg2); max-width: 72ch;
}
.plan-note { margin-top: 6px; max-width: 72ch; font-size: 14.5px; line-height: 1.5; color: var(--ink2); }
.plan-note-body > :first-child { margin-top: 0; }
.plan-note-body > :last-child { margin-bottom: 0; }
/* saīsināts: 3 rindas (line-clamp skaita arī rindkopu un sarakstu rindas), max-height kā rezerve */
.plan-note.is-clamped .plan-note-body {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3;
  overflow: hidden; max-height: 4.5em;
}
.plan-note.is-clamped .plan-note-body > * { margin-top: 0; margin-bottom: 0; }
.plan-note.is-clamped .plan-note-body > :is(h2, h3, h4, h5, h6) { font-size: 1em; line-height: 1.5; }
.plan-note-toggle { margin-top: 2px; font-size: 13.5px; font-weight: 500; color: var(--ink); }

/* ---------- karte ---------- */

.stage { display: block; outline: none; }
.stage[aria-busy="true"] { opacity: .6; transition: opacity .15s; }
.route-notice { padding: 8px var(--gut); background: var(--bg2); border-top: 1px solid var(--line); border-left: 4px solid var(--ember); }
.route-notice p { margin: 0; }
.map {
  height: min(62vh, 640px); min-height: 340px; background: var(--bg3);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
/* isolation: Leaflet rūtis (z 400–700) un vadīklas (z 1000) paliek kartes iekšā, nevis sacenšas ar lapas
   slāņiem — citādi „Slāņi” un +/− uzkāpj atvērtai zobrata izvēlnei (z 900). Tāpēc nav jākāpina z-index. */
.leaflet-container { font: 13px/1.35 var(--fb); background: var(--bg3); isolation: isolate; }
/* savām rūtīm (dayHl, surf) Leaflet neatceļ augšējo „svg { max-width: 100% }” */
.leaflet-container .leaflet-pane > svg { max-width: none !important; max-height: none !important; }
.leaflet-container a { color: inherit; }
.leaflet-bar { border: 1px solid var(--line2) !important; border-radius: 6px; overflow: hidden; }
.leaflet-bar a { background: var(--bg2); color: var(--ink); border-bottom-color: var(--line); }
.leaflet-bar a:hover, .leaflet-bar a:focus { background: var(--bg3); color: var(--ink); }
.leaflet-bar a.leaflet-disabled { background: var(--bg2); color: var(--line2); }
.leaflet-control-attribution { background: color-mix(in srgb, var(--bg2) 82%, transparent) !important; color: var(--ink2); font-size: 10.5px; }
.leaflet-control-attribution a { color: var(--ink); }
.leaflet-control-scale-line { background: color-mix(in srgb, var(--bg2) 80%, transparent); border-color: var(--ink2); color: var(--ink); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--bg2); color: var(--ink); box-shadow: 0 2px 10px rgba(0, 0, 0, .2); }
.leaflet-popup-content-wrapper { border-radius: 6px; }
.leaflet-popup-content { margin: 10px 14px; font-size: 13px; line-height: 1.4; }
.leaflet-container a.leaflet-popup-close-button { color: var(--ink2); }
.leaflet-tooltip { background: var(--bg2); color: var(--ink); border-color: var(--line2); font: 500 12.5px var(--fb); box-shadow: none; }
.leaflet-tooltip-top::before { border-top-color: var(--line2); }
:root[data-theme="dark"] .leaflet-tile-pane { filter: brightness(.82) contrast(1.06); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .leaflet-tile-pane { filter: brightness(.82) contrast(1.06); }
}

.pop { display: flex; flex-direction: column; gap: 2px; max-width: 260px; }
.pop strong { font: 600 15px/1.25 var(--fd); margin-bottom: 2px; }
.pop-meta { display: flex; flex-wrap: wrap; gap: 0 10px; color: var(--ink2); }
.pop-desc { color: var(--ink2); margin-top: 2px; }
.pop a { margin-top: 4px; font-weight: 500; }
.pop-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* atrašanās vieta un „viss maršruts” */
.loc-btn, .fit-btn { display: grid; place-items: center; width: 30px; height: 30px; background: var(--bg2); color: var(--ink); }
.loc-btn:hover, .fit-btn:hover { background: var(--bg3); }
.loc-btn svg { width: 17px; height: 17px; fill: currentColor; }
.fit-ic { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.fit-ic .fit-frame { stroke-width: 2; }
.fit-ic .fit-route { stroke-width: 1.7; opacity: .8; }

/* leģenda: kura līnija ir kurš plāns */
.mlegend {
  max-width: min(62vw, 300px); padding: 5px 9px 6px;
  background: color-mix(in srgb, var(--bg2) 90%, transparent); color: var(--ink);
  border: 1px solid var(--line2); border-radius: 6px; font: 12.5px/1.3 var(--fb);
}
.mlg {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1px 7px; margin: 0; padding: 2px 0 2px 6px;
  border-left: 3px solid transparent; color: var(--ink2);
}
.mlg.is-active { border-left-color: var(--birch); color: var(--ink); font-weight: 600; }
.mlg-name { flex: 1 1 auto; min-width: 9ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mlg-who, .mlg-on { color: var(--ink2); font-weight: 400; white-space: nowrap; }
.mlg-on { color: var(--birch-ink); }
.mlg-warn { color: var(--ember); font-weight: 500; white-space: nowrap; }
.loc-btn[aria-busy="true"] svg { animation: loc-pulse 1s ease-in-out infinite alternate; }
@keyframes loc-pulse { to { opacity: .35; } }
.me-acc { stroke: #2B7A9E; stroke-width: 1; fill: #2B7A9E; fill-opacity: .12; }
.me-dot { stroke: #fff; stroke-width: 2.5; fill: #2B7A9E; fill-opacity: 1; }
.locinfo {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 8px var(--gut);
  background: var(--bg2); border-bottom: 1px solid var(--line); border-left: 4px solid var(--m-water);
}
.locinfo p { margin: 0; flex: 1 1 320px; }
.loc-acc { color: var(--ink2); font-size: 12.5px; }
.linkish { text-decoration: underline; text-decoration-color: var(--birch); text-underline-offset: 3px; font-weight: 600; }
.linkish:hover { text-decoration-color: currentColor; }

/* slāņu panelis */
.lp { background: var(--bg2); color: var(--ink); border: 1px solid var(--line2); border-radius: 6px; font: 13px/1.35 var(--fb); }
.lp-toggle { display: flex; align-items: center; gap: 6px; padding: 7px 11px; font-weight: 500; min-height: 34px; }
.lp-toggle svg { width: 16px; height: 16px; fill: currentColor; }
.lp-toggle[aria-expanded="true"] { color: var(--birch-ink); }
.lp-panel {
  border-top: 1px solid var(--line); padding: 2px 12px 10px;
  max-height: min(60vh, 440px); overflow: auto; width: min(290px, calc(100vw - 80px));
}
.lp-group { border: 0; margin: 10px 0 0; padding: 0; min-width: 0; }
.lp-group legend { padding: 0; margin: 0 0 2px; font-weight: 600; font-size: 12.5px; color: var(--ink2); }
.lp-item { display: flex; align-items: center; gap: 8px; padding: 3px 0; cursor: pointer; min-height: 28px; }
.sw { flex: none; overflow: visible; }
.sw path { fill: none; stroke-width: 3; stroke-linecap: round; }
.sw .sw-casing { stroke: #fff; stroke-width: 8; stroke-opacity: .9; }
.sw .rt-surf-sw { stroke: var(--m-birch); stroke-dasharray: 5 2; stroke-linecap: butt; stroke-width: 4; }
.sw .avoid-sw { stroke: var(--m-ember); stroke-dasharray: 3 2; stroke-linecap: butt; }
.sw .poi-sw { stroke: var(--m-pine); stroke-dasharray: 0 7; stroke-width: 6; }
.sw .rt-plan-sw { stroke: var(--m-plan); stroke-width: 4; }
.sw .rt-alt-sw { stroke: var(--m-alt); stroke-width: 4; }

/* līnijas kartē (Leaflet path className).
   Divas maršruta krāsas: ogle = galvenais plāns, ezera zilā = aktīvais variants.
   Tās atšķiras gan tonī, gan gaišumā (1 : 3,8), tāpēc lasāmas arī ar krāsu redzes traucējumiem.
   Raustīta līnija nozīmē tikai „maršruts novecojis”. */
.rt-casing { stroke: #fff; stroke-opacity: .8; }
.rt-line, .rt-plan-ref, .rt-straight { stroke: var(--m-plan); }
.rt--plan { stroke: var(--m-plan); }
.rt--alt { stroke: var(--m-alt); }
.rt-line.is-stale { stroke-dasharray: 11 7; }
.rt-line:hover { stroke-width: 6; }
.rt-hl { stroke: var(--m-birch); stroke-opacity: .95; }
.rt-ref { stroke: var(--m-slate); stroke-dasharray: 6 6; stroke-opacity: .85; }
.rt-straight { stroke-dasharray: 4 7; stroke-opacity: .7; }
.rt-old { stroke: var(--m-gravel); stroke-opacity: .7; stroke-dasharray: 11 7; }
.ed-line { stroke: var(--m-ink); stroke-dasharray: 5 6; stroke-opacity: .5; }
.ed-line.is-active { stroke: var(--m-birch-deep); stroke-opacity: .95; }
.avoid { stroke: var(--m-ember); fill: var(--m-ember); fill-opacity: .12; stroke-dasharray: 4 4; }
.rt-surf.sf--0 { stroke: var(--ms0); }
.rt-surf.sf--1 { stroke: var(--ms1); }
.rt-surf.sf--2 { stroke: var(--ms2); }
.rt-surf.sf--3 { stroke: var(--ms3); }
.rt-surf.sf--4 { stroke: var(--ms4); stroke-dasharray: 3 3; }

/* pini */
.pin-wrap { background: none; border: 0; }
.pin {
  width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid #fff; background: var(--m-ink); color: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}
.pin svg { width: 14px; height: 14px; fill: currentColor; }
.pin--camp, .pin--lvm { background: var(--m-pine); }
.pin--shop { background: var(--m-shop); }
.pin--water { background: var(--m-water); }
.pin--hazard { background: var(--m-ember); }
.pin--poi { background: var(--m-poi); }
.pin--tip { background: #fff; color: var(--m-ink); border-color: var(--m-birch); }
.pin--lvm { border-width: 1.5px; }
.pin--lvm svg { width: 10px; height: 10px; }
.pin-letter { font: 700 13px/1 var(--fd); }
.pin.is-active { outline: 3px solid var(--m-birch); outline-offset: 1px; }
.cursor-dot {
  width: 14px; height: 14px; border-radius: 50%; background: var(--m-birch); border: 2px solid #fff;
  box-shadow: 0 0 0 3px rgba(217, 166, 33, .35);
}

/* ---------- kilometru lente ---------- */

.tape { position: relative; background: var(--bg2); border-bottom: 1px solid var(--line); }
.tape-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; padding: 14px var(--gut) 0; }
.tape-head h2 { font: 600 18px/1.2 var(--fd); margin: 0; }
.tape-sum { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; font-size: 13.5px; }
.tape-sum .sw { margin-right: -6px; }
.diff-note { color: var(--ink2); font-weight: 400; }
.tape-sum .diff { display: inline-flex; gap: 10px; }
.tape-fit {
  display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 2px 10px 2px 7px;
  border: 1px solid var(--line2); border-radius: 4px; color: var(--ink); font: 500 13px/1.2 var(--fb);
}
.tape-fit:hover { background: var(--bg3); border-color: var(--ink2); }
.tape-fit .fit-ic { width: 16px; height: 16px; flex: none; }
.mix-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 13px; color: var(--ink2); }
.mix-legend li { display: inline-flex; align-items: center; gap: 6px; }
.mix-legend i { width: 11px; height: 11px; border-radius: 2px; display: inline-block; }
.mix-legend .sf--0 i { background: var(--s0); }
.mix-legend .sf--1 i { background: var(--s1); }
.mix-legend .sf--2 i { background: var(--s2); }
.mix-legend .sf--3 i { background: var(--s3); }
.mix-legend .sf--4 i { background: var(--hatch); box-shadow: inset 0 0 0 1px var(--s4); }
.tape-scroll {
  overflow-x: auto; overflow-y: hidden; padding: 6px var(--gut) 10px;
  -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: thin;
}
.tape-scroll:focus-visible { outline-offset: -3px; }
.tape-empty { margin: 0; padding: 18px 0 14px; color: var(--ink2); }
/* Zīmējums un dienu pogas vienā ritināmā kastē, lai poga paliek pie savas dienas. */
.tape-plot { position: relative; }
.tape-dayfit {
  position: absolute; top: 3px; display: grid; place-items: center; width: 24px; height: 24px;
  border: 1px solid var(--line2); border-radius: 4px; background: var(--bg2); color: var(--ink2);
}
.tape-dayfit:hover { background: var(--bg3); border-color: var(--ink2); color: var(--ink); }
.tape-dayfit[aria-pressed="true"] {
  color: var(--birch-ink); border-color: var(--birch-line); box-shadow: inset 0 0 0 1px var(--birch-line);
}
.tape-dayfit .fit-ic { width: 15px; height: 15px; }
.tape-svg { display: block; font-family: var(--fb); user-select: none; -webkit-user-select: none; touch-action: pan-x; max-width: none; }
.tape-svg .ele { fill: var(--bg3); stroke: var(--ink2); stroke-width: 1.2; }
.tape-svg .ele-day { fill: none; stroke: var(--birch); stroke-width: 2.2; }
.tape-svg .grid { stroke: var(--line); stroke-width: 1; }
.tape-svg .gridlab { fill: var(--ink2); font-size: 10px; }
.tape-svg .daylab { font: 600 13px var(--fd); fill: var(--ink); }
.tape-svg .daylab.sub { font: 400 11.5px var(--fb); fill: var(--ink2); }
.tape-svg .daybox { fill: transparent; cursor: pointer; }
.tape-svg .daybox:hover { fill: rgba(217, 166, 33, .08); }
.tape-svg .daybox.is-active { fill: rgba(217, 166, 33, .15); }
.tape-svg .dayline { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 2 3; }
.tape-svg .sf--0 { fill: var(--s0); }
.tape-svg .sf--1 { fill: var(--s1); }
.tape-svg .sf--2 { fill: var(--s2); }
.tape-svg .sf--3 { fill: var(--s3); }
.tape-svg .hatch-bg { fill: var(--s4); }
.tape-svg .hatch-line { stroke: var(--bg2); stroke-width: 2; }
.tape-svg .stopTick { stroke: var(--ink2); stroke-width: 1; }
.tape-svg .stopTick.k-camp { stroke: var(--pine); stroke-width: 1.5; }
.tape-svg .stopTick.k-hazard { stroke: var(--ember); stroke-width: 1.5; }
.tape-svg .stopDot { fill: var(--ink); }
.tape-svg .stopDot.k-camp { fill: var(--pine); }
.tape-svg .stopDot.k-hazard { fill: var(--ember); }
.tape-svg .stopDot.k-shop { fill: var(--m-shop); }
.tape-svg .stopDot.k-water { fill: var(--m-water); }
/* izvēle, pa kuru šis variants tomēr brauc: tukšs aplis un raustīta svītra — pietura, kas nav jābrauc */
.tape-svg .stopTick.k-tip { stroke: var(--birch-line); stroke-dasharray: 2 2; }
.tape-svg .stopDot.k-tip { fill: var(--bg2); stroke: var(--birch-line); stroke-width: 1.6; }
.tape-svg .stopLab { font-size: 11.5px; fill: var(--ink); cursor: pointer; }
.tape-svg .stopLab.dim { fill: var(--ink2); }
.tape-svg .stopLab:hover { fill: var(--birch-ink); text-decoration: underline; }
.tape-svg .stopLab:focus-visible { outline: none; fill: var(--birch-ink); text-decoration: underline; }
.tape-svg .cross { stroke: var(--birch); stroke-width: 1.5; pointer-events: none; }
.tape-tip {
  position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none;
  display: flex; gap: 10px; align-items: baseline; white-space: nowrap;
  background: var(--ink); color: var(--bg); font-size: 12px; line-height: 1.3; padding: 6px 9px; border-radius: 4px;
  transform: translate(-50%, -100%); opacity: 0; transition: opacity .12s;
}
.tape-tip.is-on { opacity: 1; }
.tape-tip b { font: 600 13px var(--fd); }

/* ---------- dienas un detaļas ---------- */

.lower { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); min-height: 420px; }
.days { border-right: 1px solid var(--line); padding: 8px 0; }
.day {
  position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); width: 100%;
  text-align: left; padding: 14px var(--gut); border-bottom: 1px solid var(--line);
}
.days > div:last-child .day { border-bottom: 0; }
.day:hover, .day.is-active { background: var(--bg2); }
.day.is-active::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--birch); }
.day:focus-visible { outline-offset: -3px; }
.day > span { grid-column: 2; display: block; }
.day .day-n {
  grid-column: 1; grid-row: 1 / span 2; font: 800 26px/1 var(--fd); font-variation-settings: "opsz" 48; color: var(--birch-ink);
}
.day-t { font: 600 16px/1.25 var(--fd); overflow-wrap: anywhere; }
.day-m { display: flex !important; flex-wrap: wrap; gap: 0 12px; margin-top: 3px; font-size: 13px; color: var(--ink2); }
.mixbar { display: flex !important; height: 5px; margin-top: 8px; border-radius: 3px; overflow: hidden; background: var(--bg3); }
.mixbar i { display: block; height: 100%; }
.mixbar .sf--0 { background: var(--s0); }
.mixbar .sf--1 { background: var(--s1); }
.mixbar .sf--2 { background: var(--s2); }
.mixbar .sf--3 { background: var(--s3); }
.mixbar .sf--4 { background: var(--hatch); }
.light { position: relative; height: 6px; margin-top: 9px; border-radius: 3px; background: var(--bg3); overflow: hidden; }
.light i, .light b { position: absolute; top: 0; bottom: 0; }
.light-sun { background: var(--birch); opacity: .9; }
.light-ride { background: var(--ink); opacity: .55; }
.light-ride.is-late { background: var(--ember); opacity: .85; }
.lt { display: flex !important; justify-content: space-between; flex-wrap: wrap; gap: 0 10px; margin-top: 4px; font-size: 11.5px; color: var(--ink2); }
.lt .late { color: var(--ember); font-weight: 500; }

.detail { padding: 18px 24px 44px; max-width: 80ch; min-width: 0; outline: none; }
.detail > h2 { font: 700 26px/1.15 var(--fd); font-variation-settings: "opsz" 48; letter-spacing: -.01em; margin: 0 0 6px; overflow-wrap: anywhere; }
.meta { margin: 0 0 16px; display: flex; flex-wrap: wrap; gap: 2px 14px; color: var(--ink2); font-size: 13.5px; }
.day-note { margin: 0 0 18px; }
.stop {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 4px 12px;
  padding: 14px 0; border-top: 1px solid var(--line); scroll-margin-top: 12px; outline: none;
}
.stops > .stop:first-child { border-top: 0; }
.stop.is-hi { background: var(--bg2); margin: 0 -12px; padding-left: 12px; padding-right: 12px; }
.ic {
  width: 26px; height: 26px; margin-top: 2px; border-radius: 50%; display: grid; place-items: center;
  /* ārpus kartes: tēmas tinte, lai starta un finiša aplis redzams arī tumšajā tēmā */
  background: var(--ink); color: var(--bg); flex: none;
}
.ic svg { width: 14px; height: 14px; fill: currentColor; }
.ic .pin-letter { font-size: 12px; }
:is(.k-camp, .k-shop, .k-water, .k-hazard, .k-poi) > .ic, .ic:is(.k-camp, .k-shop, .k-water, .k-hazard, .k-poi) { color: #fff; }
.k-camp > .ic, .ic.k-camp { background: var(--m-pine); }
.k-shop > .ic, .ic.k-shop { background: var(--m-shop); }
.k-water > .ic, .ic.k-water { background: var(--m-water); }
.k-hazard > .ic, .ic.k-hazard { background: var(--m-ember); }
.k-poi > .ic, .ic.k-poi { background: var(--m-poi); }
.k-tip > .ic, .ic.k-tip { background: var(--bg2); color: var(--ink); box-shadow: inset 0 0 0 2px var(--birch); }
.stop h3 { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.stop-name { font: 600 16.5px/1.25 var(--fd); text-align: left; overflow-wrap: anywhere; }
.stop-name:hover { text-decoration: underline; text-decoration-color: var(--birch); text-underline-offset: 3px; }
.stop-meta { display: inline-flex; flex-wrap: wrap; gap: 0 10px; font: 500 12.5px var(--fb); color: var(--ink2); }
.stop p { margin: 4px 0 0; }
.stop .night .lbl { color: var(--ink2); }
.stop .md { margin-top: 4px; }
.links { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; }
.links .coords { color: var(--ink2); }
.pois { margin-top: 24px; padding-top: 14px; border-top: 1px solid var(--line); }
.pois-h { font: 600 15.5px/1.3 var(--fd); margin: 0; color: var(--pine); }
.pois-src { margin: 2px 0 8px; font-size: 12.5px; color: var(--ink2); }
.poilist { list-style: none; padding: 0; margin: 0; }
.poilist button {
  position: relative; display: block; width: 100%; text-align: left; padding: 6px 0 6px 18px; font-size: 13.5px; line-height: 1.35;
}
.poilist button::before { content: ""; position: absolute; left: 2px; top: 12px; width: 8px; height: 8px; border-radius: 50%; background: var(--pine); }
.poi-name { font-weight: 600; margin-right: 8px; }
.poilist button:hover .poi-name { color: var(--birch-ink); text-decoration: underline; text-decoration-color: var(--birch); }
.poi-meta { display: inline-flex; flex-wrap: wrap; gap: 0 10px; color: var(--ink2); }
.foot {
  display: flex; flex-wrap: wrap; gap: 6px 24px; padding: 18px var(--gut) 28px; border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--ink2);
}
.foot span { max-width: 60ch; }

/* ---------- Markdown ---------- */

.md { overflow-wrap: break-word; }
.md > :first-child { margin-top: 0; }
.md p, .md ul, .md ol, .md blockquote { max-width: 72ch; }
.md p { margin: 8px 0; }
.md h2, .md h3, .md h4, .md h5, .md h6 { font-family: var(--fd); line-height: 1.2; margin: 22px 0 6px; }
.md h2 { font-size: 26px; font-weight: 700; letter-spacing: -.01em; }
.md h3 { font-size: 19px; font-weight: 650; }
.md h4, .md h5, .md h6 { font-size: 16px; font-weight: 600; }
.md ul, .md ol { padding-left: 22px; margin: 8px 0; }
.md li { margin: 3px 0; }
.md li::marker { color: var(--ink2); }
.md blockquote { margin: 12px 0; padding: 2px 0 2px 14px; border-left: 3px solid var(--birch); color: var(--ink2); }
.md blockquote p { margin: 4px 0; }
.md code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .9em; background: var(--bg3); padding: 1px 5px; border-radius: 3px; }
.md hr { border: 0; border-top: 1px solid var(--line); margin: 22px 0; max-width: 72ch; }
.md a { overflow-wrap: anywhere; }
.md-table { overflow-x: auto; margin: 12px 0; max-width: 100%; -webkit-overflow-scrolling: touch; }
.md-table:focus-visible { outline-offset: 0; }
.md table { border-collapse: collapse; width: 100%; font-size: 14px; }
.md th, .md td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.md th { font: 600 13px var(--fb); color: var(--ink2); border-bottom: 2px solid var(--line); white-space: nowrap; }
.md .al-right { text-align: right; white-space: nowrap; }
.md .al-center { text-align: center; }
.md-check-note { margin: 12px 0 2px !important; font-size: 12.5px; color: var(--ink2); }
.md .md-check { list-style: none; padding-left: 0; }
.md-check li { margin: 0; }
.md-check label { display: flex; align-items: flex-start; gap: 10px; padding: 5px 0; cursor: pointer; }
.md-check input { margin-top: 2px; }
.md-check input:disabled { cursor: default; }
.md-check li.done span { color: var(--ink2); text-decoration: line-through; text-decoration-color: var(--line2); }

/* ---------- sadaļas skats ---------- */

.section-view { padding: 26px var(--gut) 72px; max-width: calc(72ch + 2 * var(--gut)); border-top: 1px solid var(--line); }
.section-head h2 { font: 700 30px/1.1 var(--fd); font-variation-settings: "opsz" 60; letter-spacing: -.01em; margin: 0 0 6px; }
.section-head .meta { margin-bottom: 18px; }
.md-page { font-size: 15.5px; line-height: 1.58; }
.md-page h2 { padding-top: 16px; border-top: 1px solid var(--line); margin-top: 30px; }
.md-page h2:first-child { border-top: 0; padding-top: 0; }
.toc { margin: 0 0 22px; padding: 10px 0 12px 14px; border-left: 3px solid var(--line); }
.toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 14px; }
.toc .toc-sub { color: var(--ink2); }

/* ---------- redaktors ---------- */

.editor { display: grid; grid-template-columns: minmax(0, 1fr) 400px; border-top: 1px solid var(--line); }
.ed-map-col { position: sticky; top: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; min-width: 0; }
.ed-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px var(--gut);
  background: var(--bg2); border-bottom: 1px solid var(--line);
}
.seg { display: inline-flex; border: 1px solid var(--line2); border-radius: 4px; overflow: hidden; }
.seg-btn { padding: 6px 12px; min-height: 34px; font-weight: 500; font-size: 14px; border-right: 1px solid var(--line2); }
.seg-btn:last-child { border-right: 0; }
.seg-btn:hover { background: var(--bg3); }
.seg-btn[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.seg-btn:focus-visible { outline-offset: -3px; }
.ed-day { font-size: 13px; color: var(--ink2); margin-left: 6px; }
.ed-toolbar select { width: auto; min-width: 104px; }
.ed-hint { flex: 1 1 260px; font-size: 12.5px; color: var(--ink2); }
.ed-map { flex: 1; height: auto; min-height: 320px; border: 0; }
.ed-map.leaflet-grab.mode-points, .ed-map.leaflet-grab.mode-avoid, .ed-map.leaflet-grab.mode-stop { cursor: crosshair; }
.ed-map.leaflet-dragging.leaflet-grab { cursor: move; }
.ed-status {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 18px;
  padding: 8px var(--gut); background: var(--bg2); border-top: 1px solid var(--line); font-size: 13.5px; min-height: 52px;
}
.ed-save-wrap, .ed-route-wrap { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.ed-save.is-ok { color: var(--pine); }
.ed-save.is-busy { color: var(--ink2); }
.ed-save.is-error { color: var(--ember); font-weight: 500; }
.ed-route.is-warn { color: var(--birch-ink); font-weight: 600; }
.ed-route.is-ok { color: var(--pine); }
.ed-route.is-busy { color: var(--ink2); }
.ed-route.is-error { color: var(--ember); font-weight: 500; }
.ed-route-note { font-size: 12.5px; color: var(--ink2); }

.wp {
  width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center;
  background: #fff; border: 2px solid var(--m-ink); color: var(--m-ink); font: 700 10.5px/1 var(--fb);
}
.wp:not(.is-active) span { display: none; }
.wp.is-active { background: var(--m-birch); }
.wp.is-end { background: var(--m-ink); color: #fff; }
.wp.is-end:not(.is-active) { background: var(--m-ink); }
.wp.is-boundary { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--m-pine); }
.avoid-handle { width: 100%; height: 100%; border-radius: 50%; background: #fff; border: 3px solid var(--m-ember); }

.ed-panel { background: var(--bg2); border-left: 1px solid var(--line); min-width: 0; padding-bottom: 32px; }
.ed-panel-head { padding: 16px var(--gut) 14px; border-bottom: 1px solid var(--line); }
.ed-panel-head h2 { font: 700 22px/1.15 var(--fd); margin: 0 0 4px; }
.ed-panel-head p { margin: 0 0 10px; font-size: 13.5px; color: var(--ink2); }
.ed-panel-head .ed-agent { margin-top: -4px; }
.ed-sec { border-bottom: 1px solid var(--line); }
.ed-sec > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px;
  padding: 13px var(--gut); font: 600 17px/1.2 var(--fd);
}
.ed-sec > summary::-webkit-details-marker { display: none; }
.ed-sec > summary::before {
  content: ""; width: 0; height: 0; border-left: 6px solid var(--ink2);
  border-top: 5px solid transparent; border-bottom: 5px solid transparent; transition: transform .12s;
}
.ed-sec[open] > summary::before { transform: rotate(90deg); }
.ed-sec > summary:hover { background: var(--bg3); }
.ed-sec > summary:focus-visible { outline-offset: -3px; }
.sec-count { margin-left: auto; font: 500 12.5px var(--fb); color: var(--ink2); }
.ed-sec-body { padding: 4px var(--gut) 18px; }
.ed-day-block { position: relative; padding: 14px 0 16px; border-top: 1px solid var(--line); }
.ed-day-block:first-child { border-top: 0; }
.ed-day-block.is-active::before { content: ""; position: absolute; left: calc(-1 * var(--gut)); top: 0; bottom: 0; width: 4px; background: var(--birch); }
.ed-day-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 10px; }
.ed-day-head h3 { font: 700 18px/1.2 var(--fd); margin: 0 auto 0 0; }
.day-activate[aria-pressed="true"] { border-color: var(--birch-line); color: var(--birch-ink); }
.wp-list { list-style: none; margin: 4px 0 10px; padding: 0; }
.wp-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 4px 8px; align-items: start; padding: 6px 0; border-top: 1px solid var(--line); }
.wp-row:first-child { border-top: 0; }
.wp-n { font: 700 13px/36px var(--fd); color: var(--ink2); text-align: right; }
.wp-row.is-locked .wp-n { color: var(--pine); }
.wp-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wp-sub { display: flex; flex-wrap: wrap; gap: 0 10px; font-size: 11.5px; color: var(--ink2); }
.wp-tag { color: var(--pine); font-weight: 500; }
.wp-actions { display: flex; gap: 2px; padding-top: 2px; }
.wp-actions .btn--icon { min-width: 30px; min-height: 30px; border-color: transparent; }
.wp-actions .btn--icon:hover:not(:disabled) { border-color: var(--line2); }
.plain-list { list-style: none; margin: 6px 0 10px; padding: 0; }
.plain-list > li { padding: 12px 0; border-top: 1px solid var(--line); }
.plain-list > li:first-child { border-top: 0; }
.row-actions { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px; padding-bottom: 12px; }
.md-preview { margin: 8px 0 4px; padding: 10px 12px; background: var(--bg); border: 1px dashed var(--line2); border-radius: 4px; max-height: 420px; overflow: auto; }
.field--md textarea { font-size: 14.5px; }
.stop-edits { margin: 6px 0 10px; }
.stop-edit { border-top: 1px solid var(--line); }
.stop-edit:first-child { border-top: 0; }
.stop-edit > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 9px 0; min-height: 44px;
}
.stop-edit > summary::-webkit-details-marker { display: none; }
.stop-edit > summary:hover .stop-sum-name { text-decoration: underline; text-decoration-color: var(--birch); }
.stop-edit[open] > summary { font-weight: 600; }
.stop-sum-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stop-sum-day { font-size: 12.5px; color: var(--ink2); white-space: nowrap; }
.stop-edit .ic { margin-top: 0; }
.stop-edit-body { padding: 4px 0 14px 36px; }
.links-edit h4 { font: 600 14px var(--fb); margin: 8px 0 4px; }
.link-row { display: block; }
.ed-publish { padding: 18px var(--gut) 8px; }
.ed-publish .field-hint { display: block; margin-top: 8px; }
.ed-publish .field-hint.is-blocked { color: var(--ink); font-weight: 500; }

/* ---------- dialogi un paziņojumi ---------- */

.dlg {
  width: min(520px, calc(100vw - 28px)); max-height: calc(100vh - 40px); overflow: auto;
  padding: 22px 24px 20px; border: 1px solid var(--line2); border-radius: 6px;
  background: var(--bg2); color: var(--ink);
}
.dlg[open] { animation: dlg-in .16s ease-out; }
.dlg::backdrop { background: rgba(23, 26, 21, .5); }
.dlg h2 { font: 700 23px/1.2 var(--fd); margin: 0 0 10px; }
.dlg p { margin: 0 0 8px; max-width: 60ch; }
.dlg form { margin: 0; }
.dlg .field { margin-top: 12px; }
.dlg-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.dlg--wide { width: min(720px, calc(100vw - 28px)); }
.dlg-intro { color: var(--ink2); }
.dlg-fields { margin-top: 4px; }
.dlg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 18px; }
.dlg-grid .field { margin: 0 0 14px; }
.dlg-checks { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; margin-top: 8px; }
.dlg-grid .dlg-checks { grid-column: 1 / -1; }
.dlg-checks .field-hint { flex: 1 1 100%; margin: 0; }
/* A box the dialog switched off (e.g. „Ieteikt titullapā” for a private trip) reads as off, its hint says why. */
.dlg-checks .check:has(> input:disabled) { color: var(--ink2); cursor: not-allowed; }
.dlg .field-error { margin: 12px 0 0; }
.dlg[aria-busy="true"] { cursor: progress; }
.dlg .dlg-wait { margin: 12px 0 0; font-size: 13px; color: var(--ink2); }
.dlg-span { grid-column: 1 / -1; }
.dlg .copy-dates { margin: -8px 0 14px; }
/* izvēle ar paskaidrojumu (redzamība, kopijas pamats): radio, virsraksts, zem tā klusāks teksts */
.choice-set { border: 0; margin: 16px 0 0; padding: 0; min-width: 0; }
.dlg-grid .choice-set { margin: 0 0 14px; }
.choice-set legend { padding: 0; margin: 0 0 2px; }
.choice {
  display: grid; grid-template-columns: 17px minmax(0, 1fr); column-gap: 10px; align-items: baseline;
  padding: 6px 0; cursor: pointer;
}
.choice input { align-self: start; margin-top: 3px; }
.choice-title { font-weight: 600; overflow-wrap: anywhere; }
.choice-hint { grid-column: 2; font-size: 13px; line-height: 1.45; color: var(--ink2); }
.dlg p.choice-one { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
@keyframes dlg-in { from { opacity: 0; transform: translateY(8px); } }

.toast {
  position: fixed; left: 16px; bottom: 16px; z-index: 3000; max-width: min(460px, calc(100vw - 32px));
  padding: 10px 14px; border-radius: 4px; background: var(--ink); color: var(--bg); font-weight: 500;
  opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .16s, transform .16s;
}
.toast.is-on { opacity: 1; transform: none; }
.toast--error { background: #B03D18; color: #fff; }
.toast:empty { display: none; }

.errpage { padding: 24px var(--gut); }
.errbox { padding: 32px 0; max-width: 62ch; }
.errbox h1, .errbox h2 { font: 700 28px/1.15 var(--fd); margin: 0 0 8px; }
.errbox p { margin: 0 0 12px; }
.errbox-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.stage > .errbox { padding: 32px var(--gut); }
.stage > .empty { padding: 36px var(--gut); }

/* ---------- pārvaldība ---------- */

.admin { padding: 22px var(--gut) 72px; max-width: 1280px; }
.admin-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 10px 20px; }
.admin-head .page-title { margin: 0; }
.subnav { display: flex; gap: 0 22px; margin-top: 20px; border-bottom: 1px solid var(--line); }
.subnav-link {
  padding: 8px 0 9px; text-decoration: none; font-weight: 500;
  border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.subnav-link:hover { border-bottom-color: var(--line2); }
.subnav-link[aria-current] { color: var(--birch-ink); border-bottom-color: var(--birch); }
.admin-sec { padding-top: 14px; }
.admin-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 10px; }
.admin-tools input[type="search"] { width: min(280px, 100%); min-height: 32px; }
.admin-count { margin: 0 0 0 auto; color: var(--ink2); font-size: 13px; }

/* Blīva tabula: viena rinda = viens ieraksts, bez ievadlaukiem. */
.atable { overflow-x: auto; max-width: 100%; border-top: 1px solid var(--line); -webkit-overflow-scrolling: touch; }
.atable:focus-visible { outline-offset: -3px; }
.atable table { border-collapse: collapse; width: 100%; min-width: 820px; font-size: 13.5px; }
.atable th, .atable td { text-align: left; padding: 6px 14px 6px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.atable th {
  font: 600 12.5px var(--fb); color: var(--ink2); white-space: nowrap;
  padding-top: 8px; padding-bottom: 8px; border-bottom-color: var(--line2);
}
.atable tr:hover td { background: var(--bg2); }
.atable .nm { min-width: 170px; padding-right: 20px; }
.atable .sub { display: block; font-size: 12px; color: var(--ink2); }
.atable .num { text-align: right; width: 1%; white-space: nowrap; }
.atable .when { white-space: nowrap; color: var(--ink2); }
.atable .tags { white-space: nowrap; }
.atable .acts { text-align: right; white-space: nowrap; padding-right: 0; width: 1%; }
.atable .acts .btn + .btn { margin-left: 6px; }
.atable tr.is-off td, .atable tr.is-off .strong { color: var(--ink2); }

.member-boxes { display: flex; flex-direction: column; margin-top: 12px; max-height: 44vh; overflow-y: auto; }
.wd-list { list-style: none; margin: 14px 0 0; padding: 0; }
.wd-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.wd-list li:first-child { border-top: 0; }
.wd-title { font-weight: 500; flex: 1 1 100%; overflow-wrap: anywhere; }
.wd-list .sub { margin-right: auto; font-size: 12.5px; color: var(--ink2); }

/* ---------- aģentu žetoni ---------- */

.tok-intro { margin: 0 0 16px; max-width: 74ch; color: var(--ink2); font-size: 14px; }
.tok-intro p { margin: 0 0 6px; }
.tok-help { font-weight: 500; color: var(--ink); }
.tok-secret { margin-top: 4px; }
.tok-field + .tok-field { margin-top: 14px; }
.tok-row { display: flex; align-items: center; gap: 8px; }
.tok-value { flex: 1 1 auto; min-width: 0; font: 13px/1.4 var(--fm); }
.tok-hint { margin: 3px 0 0; font-size: 12px; color: var(--ink2); }
/* žetona logs: brīdinājums, ka žetonu rāda vienu reizi, ir pirmais un redzamākais */
.tok-secret .tok-warn { margin: 0 0 16px; padding: 8px 12px; border-left: 4px solid var(--birch); background: var(--bg); font-weight: 500; }
.tok-steps { margin: 0; padding-left: 22px; }
.tok-steps > li { margin: 0 0 14px; padding-left: 2px; }
.tok-steps > li::marker { font: 700 15px var(--fd); color: var(--birch-ink); }
.tok-secret .tok-step { margin: 0 0 6px; }
/* soļa teksts jau saka, kas laukā ir; lauka vārds paliek ekrāna lasītājam (aria-label) */
.tok-steps .tok-field { margin: 0; }
.tok-steps .tok-field > .field-label { display: none; }
.tok-secret :not(pre) > code { font: .9em var(--fm); background: var(--bg3); padding: 1px 5px; border-radius: 3px; }
.tok-more { margin-top: 12px; font-size: 13.5px; }
.tok-more > summary { cursor: pointer; color: var(--ink2); }
.tok-more .tok-field { margin-top: 10px; }

/* ---------- palīdzība ---------- */

/* lasīšanas kolonna kā sadaļas skatā: ≤ 72 zīmes, tā pati burtu skala */
.help { padding: 22px var(--gut) 72px; max-width: calc(72ch + 2 * var(--gut)); }
.help-body { font-size: 15.5px; line-height: 1.58; }
.help-lede { margin: 12px 0 0; max-width: 62ch; font-size: 17px; line-height: 1.5; color: var(--ink2); }
.help .toc { margin: 22px 0 0; }
.help-sec { margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--line); }
.help-sec h2 { font: 700 26px/1.15 var(--fd); font-variation-settings: "opsz" 60; letter-spacing: -.01em; margin: 0 0 10px; }
.help-sec h3 { font: 600 18px/1.3 var(--fb); margin: 20px 0 4px; }
.help-sec p { margin: 8px 0; }
.help-list { margin: 8px 0; padding-left: 22px; }
.help-list li { margin: 4px 0; }
.help-list li::marker { color: var(--ink2); }
/* soļi: numurs aplī kreisajā malā, teksts un komandas pa labi no tā */
.help-steps { margin: 16px 0 8px; padding: 0; list-style: none; counter-reset: step; }
.help-steps > li { position: relative; counter-increment: step; padding-left: 42px; margin: 0 0 24px; }
.help-steps > li::before {
  content: counter(step); position: absolute; left: 0; top: 0;
  width: 28px; height: 28px; border: 1.5px solid var(--birch-line); border-radius: 50%;
  font: 700 14px/25px var(--fd); text-align: center; color: var(--birch-ink);
}
.help-steps > li > :first-child { margin-top: 2px; }
.help-sec .help-step { margin-bottom: 6px; }
.help-body :not(pre) > code { font: .9em var(--fm); background: var(--bg3); padding: 1px 5px; border-radius: 3px; }
.help-prompt { margin: 10px 0; padding: 2px 0 2px 14px; border-left: 3px solid var(--birch); }
.help-sec .help-prompt p { margin: 4px 0; }

/* komanda ar pogu „Kopēt” (views/agent.js copyBlock): gara rinda aplūst, lapa horizontāli neritinās */
.cmd { display: flex; align-items: flex-start; gap: 8px; margin: 8px 0; }
.cmd-code {
  flex: 1 1 auto; min-width: 0; margin: 0; padding: 7px 10px;
  background: var(--field); border: 1px solid var(--line2); border-radius: 4px;
  font: 13.5px/1.5 var(--fm); white-space: pre-wrap; overflow-wrap: anywhere;
}
.cmd .btn { flex: none; margin-top: 2px; }
.cmd-flag { white-space: nowrap; }

/* gatavs lūgums aģentam ar pogu „Kopēt” (views/agent.js askBlock): papīra lapiņa uz kartītes */
.ask-block { min-width: 0; }
.ask-head { margin: 0 0 8px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.ask { margin: 0; }
.ask-text {
  margin: 0; padding: 12px 14px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
  font: 500 15px/1.45 var(--fd); font-variation-settings: "opsz" 24; overflow-wrap: anywhere;
}
.ask-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px;
  font-size: 12.5px; color: var(--ink2);
}
.ask-row .btn { flex: none; }
.ask-hint { margin: 0; font-size: 12.5px; color: var(--ink2); }
.ask-connect { margin-top: 14px; }
.ask-connect .cmd { margin: 6px 0; }

/* ---------- šaurs ekrāns ---------- */

@media (max-width: 1100px) {
  .editor { grid-template-columns: minmax(0, 1fr) 360px; }
}
@media (max-width: 960px) {
  .editor { grid-template-columns: 1fr; }
  .ed-map-col { position: static; height: auto; }
  .ed-map { height: 58vh; min-height: 300px; flex: none; }
  .ed-panel { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 820px) {
  :root { --gut: 14px; }
  /* iOS nepietuvina lauku, ja burti ir vismaz 16 px */
  input[type="text"], input[type="email"], input[type="url"], input[type="number"], input[type="date"],
  input[type="time"], input[type="search"], select, textarea { font-size: 16px; }
  .trip-head { padding-top: 16px; padding-bottom: 12px; }
  .trip-nav { margin-left: 0; width: 100%; }
  .map { height: 52vh; min-height: 300px; }
  .lower { grid-template-columns: 1fr; }
  .days { border-right: 0; border-bottom: 1px solid var(--line); }
  .detail { padding: 16px var(--gut) 40px; }
  /* the big mark 56 px on a phone (docs/DESIGN.md „Logo”) */
  .trips-head { --head-mark: 56px; --head-gap: 16px; padding-bottom: 16px; }
  .trips-head .page-title { margin-top: 6px; }
  .actions { margin-left: 0; }
  .variant { min-width: 230px; }
}
/* josla ar navigāciju: šaurākā ekrānā vārds atkāpjas (zobrats paliek), tad arī logo vārds */
@media (max-width: 680px) {
  .bar-name { display: none; }
  /* aģenta zīme: tikai punkts (vārds paliek title un ekrāna lasītājam); nezināms stāvoklis neko
     nesaka, tāpēc telefonā tam vietas netērē. Punkts-saite ir vismaz 24 × 24 px. */
  .chip { min-width: 24px; min-height: 24px; justify-content: center; padding: 0 6px; }
  .chip .chip-label { display: none; }
  .chip--unknown { display: none; }
}
@media (max-width: 440px) {
  .bar .logo-word { display: none; }
  .bar-nav { gap: 0 14px; }
  .bar-nav-link { font-size: 13.5px; }
}
@media (max-width: 520px) {
  /* telefons: galva kompakta, lai karte sākas pirmajā ekrānā */
  .bar { padding-top: 6px; padding-bottom: 6px; gap: 2px 12px; font-size: 13px; }
  .bar-user { gap: 2px 12px; }
  /* joslas logo telefonā mazāks; CSS pārraksta SVG width/height, jo tās ir arī CSS īpašības.
     Noteikumi ir piesieti joslai, lai tie neskar saraksta lapas lielo zīmi (.logo--big). */
  .bar .logo { gap: 7px; }
  .bar .logo-mark { width: 20px; height: 20px; }
  .bar .logo-word { font-size: 18px; font-variation-settings: "opsz" 20; }
  .trips-page { padding-top: 14px; }
  .trip-head { padding-top: 10px; padding-bottom: 8px; gap: 6px; }
  .trip-title h1 { font-size: 30px; line-height: 1; }
  .lede { margin-top: 4px; font-size: 13.5px; line-height: 1.4;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
  .trip-meta { margin-top: 4px; gap: 2px 10px; font-size: 12.5px; }
  .trip-meta .btn--small { min-height: 26px; padding: 1px 8px; font-size: 12.5px; }
  .archived-note { margin-top: 6px; padding: 4px 10px; font-size: 13px; }
  .public-note { margin-top: 6px; padding: 6px 10px; gap: 6px 12px; font-size: 13px; }
  .pub-search { margin-top: 18px; gap: 12px; }
  .pub-search .pub-q { flex-basis: 100%; max-width: none; }
  .pub-kind .seg-btn { padding: 6px 10px; font-size: 13.5px; }
  /* navigācija vienā ritināmā rindā līdz ekrāna malām */
  .trip-nav {
    flex-wrap: nowrap; overflow-x: auto; gap: 0 16px; scrollbar-width: none;
    margin: 0 calc(-1 * var(--gut)); padding: 0 var(--gut) 2px; width: calc(100% + 2 * var(--gut));
    overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  }
  .trip-nav::-webkit-scrollbar { display: none; }
  .v-link { padding-top: 8px; padding-bottom: 8px; gap: 10px; }
  .v-title { font-size: 15px; }
  /* „Jauns melnraksts” šaura: aplis virs uzraksta, lai pielipinātā kolonna neaizsedz variantus */
  .v-link.v-new { grid-template-columns: auto; justify-items: center; text-align: center; gap: 4px; padding: 8px 12px; }
  .v-plus { width: 32px; height: 32px; font-size: 19px; }
  .variant--new .v-title { max-width: 6.5em; font: 600 12.5px/1.2 var(--fb); }
  .visrow { padding-top: 6px; padding-bottom: 8px; }
  .visrow-main { gap: 6px 14px; }
  .vis { font-size: 13px; gap: 0 10px; }
  .actions { gap: 6px; }
  .actions .btn { min-height: 32px; padding: 4px 10px; font-size: 13px; }
  .notice { padding: 6px 10px; font-size: 13.5px; }
  .plan-note { margin-top: 4px; font-size: 13.5px; }
  .plan-note.is-clamped .plan-note-body { -webkit-line-clamp: 2; line-clamp: 2; max-height: 3em; }
  .map { height: 56vh; min-height: 280px; }
  /* leģenda telefonā: divas šauras rindas kartes kreisajā apakšā, virs mēroga */
  .mlegend { max-width: min(70vw, 230px); padding: 4px 7px 5px; font-size: 11.5px; }
  .mlg { gap: 6px; padding-left: 5px; }
  .mlg-who { display: none; }
  .bar-name { max-width: 14ch; }
  .field-pair { grid-template-columns: 1fr; }
  .v-link { grid-template-columns: 64px minmax(0, 1fr); }
  .v-link .glyph { width: 64px; height: auto; }
  .variant { min-width: 210px; }
  .stop-edit-body { padding-left: 0; }
  .dlg { padding: 18px 16px; }
  .dlg-actions .btn { flex: 1 1 auto; }
  .ed-hint { flex-basis: 100%; }
  /* pārvaldība telefonā: kompakta galva, tabula ritinās savā konteinerā */
  .admin { padding-top: 14px; }
  .admin-head { align-items: flex-start; }
  .subnav { margin-top: 14px; gap: 0 18px; }
  .admin-tools input[type="search"] { width: 100%; }
  .admin-count { margin-left: 0; flex-basis: 100%; }
  .help { padding-top: 14px; }
  .help-sec h2 { font-size: 23px; }
  .help-steps > li { padding-left: 36px; }
  .cmd-code { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@media print {
  .bar, .variants, .visrow .actions, .ed-toolbar, .leaflet-control-container, .toast, .skip,
  .tape-fit, .tape-dayfit { display: none !important; }
  body { background: #fff; color: #000; }
}