/* 🚐 Cesta — styly obrazovek v trip.js. JEDEN soubor pro oba hostitele (2. 10. 2026):
   Pilot ho linkuje vedle pilot.css, cesta.runflow.cz ho dostává buildem z app/pilot/.
   Nová třída pro Cestu patří SEM, ne do pilot.css. */

/* ───────────────────────────────────────────────────────────────────────────
   🚐 CESTA (trip.js) — itinerář, balení, peníze. Mobil na prvním místě:
   jeden sloupec, velká klepací plocha (David to používá za volantem i na pláži).
   Od 900 px se peníze a itinerář rozloží do dvou sloupců.
   ─────────────────────────────────────────────────────────────────────────── */
.tr-wrap { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.tr-head { background: var(--acc-soft); border-radius: 14px; padding: 14px 16px; }
.tr-head b { display: block; font-size: 22px; line-height: 1.2; }
.tr-head small { display: block; color: var(--muted); font-size: 13px; margin-top: 3px; }
.tr-head small + small { margin-top: 1px; }
.tr-of { font-size: 15px; font-weight: 600; color: var(--muted); }

/* Proužek postupu — stejný tvar všude (km, peníze, balení). */
.tr-bar { display: block; height: 7px; border-radius: 99px; background: var(--line); overflow: hidden; }
.tr-bar i { display: block; height: 100%; background: var(--acc); border-radius: 99px; }
.tr-bar.over i { background: var(--bad); }

/* Tři dlaždice na Přehledu: km · peníze · sbaleno. Na úzku se zalomí, nikdy nepřetečou. */
.tr-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tr-tile { background: var(--card-2); border: 1px solid var(--line); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tr-tile .tr-i { font-size: 15px; }
.tr-tile b { font-size: 16px; line-height: 1.15; overflow-wrap: anywhere; }
.tr-tile small { font-size: 11px; color: var(--muted); line-height: 1.25; }
.tr-tile .tr-bar { margin-top: 4px; }
.tr-tile.over b { color: var(--bad); }
/* Na úzkém telefonu se tři dlaždice vedle sebe zmáčknou — radši dvě a třetí přes celou šířku. */
@media (max-width: 380px) {
  .tr-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tr-tiles > :last-child { grid-column: 1 / -1; }
}
/* Čtyři záložky na jeden řádek i na 375 px — dva řádky ukrajují místo obsahu.
   Na mobilu proto stejně široké sloupce místo zalomení. */
#trip-tabs button { padding: 7px 10px; font-size: 13px; }
@media (max-width: 560px) {
  #trip-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; overflow: visible; }
  #trip-tabs button { padding: 8px 2px; font-size: 12px; text-align: center; overflow: hidden; }
}

/* 🗺 Itinerář */
.tr-days { list-style: none; margin: 8px 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tr-day { position: relative; }
.tr-day-b { width: 100%; text-align: left; background: var(--card-2); border: 1px solid var(--line); border-radius: 14px;
  padding: 11px 13px; display: flex; flex-direction: column; gap: 4px; color: inherit; font: inherit; }
.tr-day-b.card { background: var(--card); }
.tr-day.now .tr-day-b { border-color: var(--acc); background: var(--acc-soft); }
.tr-day.past .tr-day-b { opacity: .62; }
.tr-day-h { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.tr-date { font-weight: 700; letter-spacing: .02em; }
.tr-sleep { margin-left: auto; }
.tr-km { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tr-km b { color: var(--ink); }
.tr-day-t { font-size: 15px; line-height: 1.25; overflow-wrap: anywhere; }
.tr-day-p, .tr-day-n { font-size: 13px; color: var(--muted); line-height: 1.4; overflow-wrap: anywhere; }
.tr-day-n { color: var(--ok); }
/* 🗺 Odkazy do Map pod dnem (David 27. 9. 2026: „dávat si jednotlivé dny cesty i do map").
   Stojí VEDLE řádku dne, ne v něm — řádek je <button> a odkaz v tlačítku nejde. */
.tr-day-w { display: flex; flex-direction: column; gap: 0; }
.tr-maps { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 4px 2px; }
.tr-maps a { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; min-width: 0;
  padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--card);
  color: var(--acc); font-size: 12px; font-weight: 600; text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-maps a:hover { background: var(--acc-soft); border-color: var(--acc); }
/* 🏨 kde spíme — odlišené od cílů a tras, ať je večerní adresa vidět na první pohled */
.tr-maps a.stay { background: var(--acc-soft); border-color: var(--acc-soft); color: var(--ink); }
.tr-tag { display: inline-block; padding: 5px 9px; border-radius: 999px; background: var(--acc-soft);
  color: var(--acc); font-size: 12px; font-weight: 600; white-space: nowrap; }

/* 📄 Doklady — čísla pojistek a asistence; čte se to na krajnici, tak velké a v klidu. */
.tr-doc { display: flex; align-items: stretch; gap: 4px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--card); margin-top: 8px; }
.tr-doc.warn { border-color: var(--warn); background: var(--warn-soft); }
.tr-doc-b { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px; background: none; border: 0; text-align: left; color: inherit; font: inherit; }
.tr-doc-b b { font-size: 14px; }
.tr-doc-n { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px;
  letter-spacing: .02em; overflow-wrap: anywhere; }
.tr-doc-b small { font-size: 12px; color: var(--muted); line-height: 1.35; overflow-wrap: anywhere; }
.tr-doc-a { display: flex; align-items: center; gap: 2px; padding-right: 4px; }
.tr-doc-a .pr-btn { text-decoration: none; }

/* 🎒 Balení — škatulky, které jdou sbalit; odškrtávátko je velké kvůli palci. */
.tr-grp { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--card-2); }
.tr-grp-h { width: 100%; display: flex; align-items: center; gap: 8px; padding: 11px 13px; background: none; border: 0; color: inherit; font: inherit; font-weight: 600; font-size: 14px; text-align: left; }
.tr-grp-h .mono { margin-left: auto; }
.tr-cx { color: var(--muted); font-size: 12px; }
.tr-pack { list-style: none; margin: 0; padding: 0 6px 6px; }
.tr-pack li { display: flex; align-items: flex-start; gap: 4px; border-top: 1px solid var(--line); }
/* Odškrtávátko a text jsou DVĚ tlačítka: čtvereček sbalí, klepnutí na text otevře úpravu
   (David 27. 9. 2026: „edit chci mít spíš než na tužtičku — že kliknu na ten text"). */
.tr-box { flex: 0 0 auto; display: grid; place-items: center; padding: 11px 4px 11px 2px;
  background: none; border: 0; }
.tr-box .box { width: 24px; height: 24px; border-radius: 7px; border: 2px solid var(--line);
  display: grid; place-items: center; color: transparent; font-size: 14px; font-weight: 800; }
.tr-box.on .box { background: var(--acc); border-color: var(--acc); color: var(--on-acc); }
.tr-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px;
  padding: 11px 6px; background: none; border: 0; text-align: left; color: inherit; font: inherit;
  font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
.tr-txt:hover .tr-lbl { text-decoration-color: currentColor; }
.tr-txt.on { color: var(--muted); }
.tr-txt.on .tr-lbl { text-decoration: line-through; }
.tr-txt i { font-style: normal; color: var(--muted); font-size: 12px; }
.tr-allok { padding: 11px 6px; font-size: 13px; color: var(--ok); }
/* ⠿ úchyt k tažení + 💬 vysvětlivka pod názvem věci (David 27. 9. 2026). */
.tr-grip { flex: 0 0 auto; width: 30px; align-self: stretch; border: 0; background: none; color: var(--muted);
  font-size: 15px; cursor: grab; touch-action: none; }
.tr-grip:active { cursor: grabbing; }
.tr-pack li.dragging, .tr-cats li.dragging { opacity: .6; background: var(--acc-soft); border-radius: 10px; }
.tr-note { display: block; font-size: 12px; line-height: 1.35; color: var(--muted); margin-top: 3px; overflow-wrap: anywhere; }
.tr-lbl { display: block; }
/* ✕ maže rovnou ze seznamu — bez okna „opravdu?", s „Vrátit" v hlášce (David 27. 9. 2026). */
.pr-btn.del { color: var(--muted); }
.pr-btn.del:hover { background: var(--bad-soft); color: var(--bad); }
/* 📌 Přilepená lišta balení (David 28. 9. 2026) — hledání, ＋, ⋯ menu a jména zůstávají
   nahoře, i když je David hluboko v seznamu. Záporný okraj = lišta sahá přes celou šířku okna,
   pozadí karty zakryje řádky, které pod ní odjíždějí. */
.tr-packbar { position: sticky; top: -14px; z-index: 4; margin: -4px -16px 0; padding: 10px 16px 8px;
  background: var(--card); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.tr-pb-row { display: flex; gap: 6px; align-items: center; }
.tr-pb-row input { flex: 1 1 auto; min-width: 0; box-sizing: border-box; font: inherit; font-size: 16px; padding: 9px 12px;
  border-radius: 12px; border: 1px solid var(--line); background: var(--card-2, var(--card)); color: var(--ink); }
.tr-pb-btn { flex: 0 0 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line); background: var(--card);
  color: var(--ink); font: inherit; font-size: 20px; font-weight: 700; line-height: 1; cursor: pointer; position: relative; }
.tr-pb-btn.add { background: var(--acc); border-color: var(--acc); color: var(--on-acc); }
.tr-pb-btn.on::after { content: ''; position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--acc); }
.tr-pb-btn[aria-expanded="true"] { background: var(--acc-soft); border-color: var(--acc); }
.tr-pb-menu { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px;
  padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--card-2, var(--card)); }
.tr-pb-menu[hidden] { display: none; }
.tr-pb-menu button { text-align: left; padding: 9px 10px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--card); color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.tr-pb-menu .hint { grid-column: 1 / -1; margin: 2px 2px 0; }
.tr-pb-state { align-self: flex-start; padding: 4px 10px; border-radius: 999px; border: 1px dashed var(--line);
  background: none; color: var(--muted); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
/* jména v liště: jeden řádek, co se nevejde, jede prstem do strany */
.tr-packbar .tr-who { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.tr-packbar .tr-who::-webkit-scrollbar { display: none; }
.tr-packbar .tr-who-b { flex: 0 0 auto; }
/* 👥 Kdo co bere — filtr nad balením a štítek u věci. */
.tr-who { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.tr-who-b { padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--card);
  color: inherit; font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; }
.tr-who-b[aria-pressed="true"] { background: var(--acc); border-color: var(--acc); color: var(--on-acc); }
.tr-who-b i { font-style: normal; opacity: .7; font-size: 12px; }
.tr-who-t { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  background: var(--acc-soft); color: var(--acc); font-size: 11px; font-weight: 700; white-space: nowrap; }

/* 📋 Před cestou — na rozdíl od balení má termín, takže co hoří, je vidět barvou. */
.tr-todo { list-style: none; margin: 0; padding: 0; }
.tr-todo li { display: flex; align-items: flex-start; gap: 4px; border-top: 1px solid var(--line); }
.tr-todo li:first-child { border-top: 0; }
.tr-todo li.late .tr-note { color: var(--bad); }
.tr-todo li.today .tr-note { color: var(--acc); }
.tr-todo .tr-tag { align-self: flex-start; margin-top: 3px; }
@media (max-width: 380px) { .tr-pack .pr-btn { width: 30px; } .tr-grip { width: 26px; } }
.tr-cats { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tr-cats li { display: flex; align-items: center; gap: 6px; }
.tr-cats .emoji { flex: 0 0 56px; text-align: center; }
.tr-cats .name { flex: 1 1 auto; min-width: 0; }
.tr-cats input { border: 1px solid var(--line); background: var(--card-2); border-radius: 10px; padding: 9px 10px; font-size: 16px; }

/* 💰 Peníze */
.tr-cat { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 9px 2px; border-bottom: 1px solid var(--line); font-size: 14px; width: 100%; text-align: left; }
.tr-cat.as-btn { background: none; border-left: 0; border-right: 0; border-top: 0; color: inherit; font: inherit; font-size: 14px; }
.tr-cat b { font-variant-numeric: tabular-nums; text-align: right; }
.tr-cat b i { display: block; font-style: normal; font-size: 11.5px; font-weight: 400; color: var(--muted); }
.tr-cat .tr-bar { grid-column: 1 / -1; margin: 3px 0 1px; }
.tr-cat small { grid-column: 1 / -1; font-size: 11.5px; color: var(--muted); }
.tr-sd { margin-bottom: 10px; }
.tr-sd-h { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 700; color: var(--muted); padding: 4px 2px; }
.tr-sp, .tr-bd { width: 100%; display: grid; grid-template-columns: auto 1fr auto; gap: 2px 10px; align-items: center;
  background: var(--card-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 6px;
  text-align: left; color: inherit; font: inherit; font-size: 14px; }
.tr-sp-i { font-size: 13px; color: var(--muted); white-space: nowrap; }
.tr-sp-t { min-width: 0; overflow-wrap: anywhere; }
.tr-sp-t i { display: block; font-style: normal; font-size: 12px; color: var(--muted); }
.tr-sp b, .tr-bd b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tr-sp small { grid-column: 3; font-size: 11px; color: var(--muted); text-align: right; }
.tr-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
/* 🔎 Jak to dopadlo — palce u věcí a dnů; prst musí trefit, proto 38 px. */
.tr-use { flex: 0 0 auto; width: 38px; height: 38px; border: 1px solid var(--line); background: var(--card-2);
  border-radius: 10px; font-size: 17px; line-height: 1; opacity: .5; }
.tr-use.on { opacity: 1; border-color: var(--acc); background: var(--acc-soft); }
.tr-urow { display: flex; align-items: center; gap: 6px; }
.tr-urow .tr-txt { flex: 1 1 auto; min-width: 0; }
.tr-urow.unused .tr-lbl { text-decoration: line-through; color: var(--muted); }
.tr-rv { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tr-rv li { display: flex; align-items: center; gap: 6px; background: var(--card-2); border: 1px solid var(--line);
  border-radius: 12px; padding: 4px 8px; font-size: 14px; }
.tr-rv li > button:not(.tr-use):not(.pr-btn) { flex: 1 1 auto; min-width: 0; text-align: left; background: none; border: 0; color: inherit; font: inherit; font-size: 14px; padding: 8px 2px; }
.tr-rv li > span { flex: 1 1 auto; min-width: 0; padding: 8px 2px; overflow-wrap: anywhere; }
.tr-rv.pick label { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 2px; }
.tr-rv.pick input { width: 20px; height: 20px; flex: 0 0 auto; }
.tr-cat b.bad { color: var(--bad); }
/* ⚡ Rychlé zápisy — chipy, co se vejdou na 320 px (zalamují se) a dají se trefit palcem. */
.tr-quick { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.tr-quick button { border: 1px solid var(--line); background: var(--card-2); color: inherit; border-radius: 999px;
  padding: 9px 12px; font: inherit; font-size: 14px; font-weight: 600; line-height: 1; }
.tr-quick button:first-child { background: var(--acc-soft); border-color: var(--acc); }
.tr-day-q { margin-top: 6px; }
.tr-yday { border: 1px solid var(--acc); border-radius: 14px; padding: 10px 12px; margin-top: 14px; }
/* 🧭 Plánovač základen — karta na základnu, všechno na palec, i na 320 px. */
.tr-head.warn { background: var(--warn-soft); }
.tr-bases { list-style: none; margin: 10px 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tr-base { background: var(--card-2); border: 1px solid var(--line); border-radius: 14px; padding: 8px 10px; }
.tr-base.over { border-color: var(--bad); }
.tr-base.back { border-style: dashed; }
.tr-base-r1 { display: flex; align-items: center; gap: 6px; }
.tr-base-n { flex: 0 0 22px; font-weight: 700; color: var(--muted); font-size: 13px; text-align: center; }
.tr-base-name { flex: 1 1 auto; min-width: 0; border: 1px solid var(--line); background: var(--card); border-radius: 10px; padding: 9px 10px; font: inherit; font-size: 16px; }
.tr-base-r2 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; font-size: 13px; color: var(--muted); }
.tr-step { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--line); border-radius: 999px; padding: 0 4px; background: var(--card); }
.tr-step button { width: 34px; height: 34px; border: 0; background: none; font-size: 20px; line-height: 1; color: inherit; }
.tr-step b { min-width: 18px; text-align: center; font-size: 16px; color: var(--text); }
.tr-step small { margin-right: 4px; }
.tr-base-km { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.tr-base-km input { width: 64px; border: 1px solid var(--line); background: var(--card); border-radius: 8px; padding: 7px 6px; font: inherit; font-size: 16px; text-align: right; }
.tr-base-km i { font-style: normal; }
.tr-base-km i.bad { color: var(--bad); font-weight: 700; }
.tr-link { background: none; border: 0; color: var(--acc-text, var(--acc)); font: inherit; font-size: 14px; font-weight: 600; text-decoration: none; padding: 6px 4px; }
.tr-warn { list-style: none; margin: 10px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.tr-warn li { background: var(--warn-soft); border-radius: 10px; padding: 8px 10px; }
.hint.ok { color: var(--ok); }
/* ☀️ Počasí pod dnem — jedna řádka, šedě; vlny pro Matea kurzívou. */
.tr-wx { display: block; font-size: 13px; color: var(--muted); padding: 4px 2px 0; }
.tr-wx i { font-style: normal; color: var(--text); }
.tr-wx small { opacity: .7; }
/* ⛽ Tankování: cena za litr je to hlavní číslo, koruny hned vedle (David 30. 9. 2026). */
.tr-fuelbox { border: 1px dashed var(--line); border-radius: 12px; padding: 10px 12px 4px; margin-bottom: 12px; background: var(--card-2); }
.tr-fuelbox[hidden] { display: none; }
.tr-fu-avg { font-size: 14px; margin: 4px 0 6px; }
.tr-fu-avg b { font-size: 17px; }
.tr-fu-avg i { font-style: normal; color: var(--muted); }
.tr-fu .tr-fu-p { font-size: 16px; }
.tr-fu .tr-fu-c { display: inline; font-size: 12px; color: var(--muted); }
.tr-fu.dear { border-color: var(--bad); }
.tr-fu.dear small { color: var(--bad); font-weight: 600; }
.tr-fu.cheap { border-color: var(--ok); }
.tr-fu.cheap small { color: var(--ok); font-weight: 600; }
/* 📈 Jak to vyjde — tři řádky, ať je hned vidět, z čeho se ten odhad skládá. */
.tr-out { list-style: none; margin: 10px 0 4px; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.tr-out li { background: var(--card-2); border: 1px solid var(--line); border-radius: 12px; padding: 9px 12px; }
.tr-head small.bad { color: var(--bad); font-weight: 600; }
.tr-tip { margin-top: 10px; font-size: 13px; color: var(--muted); }
.tr-tip summary { cursor: pointer; font-weight: 600; color: var(--text); padding: 6px 2px; }
.tr-tip p { margin: 6px 0; }
/* Částka + přepínač měny: pole se roztáhne, Kč/€ zůstává vpravo i na 320 px. */
.tr-amt { display: flex; gap: 8px; align-items: stretch; }
.tr-amt input { flex: 1 1 auto; min-width: 0; }
.tr-amt .seg { flex: 0 0 auto; }
.tr-cols { display: grid; gap: 14px; }

/* 🖥 Na počítači se okno roztáhne — víc informací najednou, ne roztažené řádky. */
@media (min-width: 900px) {
  .tr-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
  .tr-days { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tr-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  #sheet.mode-full .tr-days { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 🚐 Půjčovna (2. 10. 2026): pruh u cizí cesty, řádky cest zákazníků, štítek návrhu do společného seznamu */
.tr-foreign { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; margin-bottom: 10px; border-radius: 12px; background: var(--personal-soft); border: 1px solid var(--line); }
.tr-foreign > b { display: block; font-size: 14px; }
.tr-foreign small { display: block; color: var(--muted); font-size: 12px; }
.tr-foreign > .btn-ghost { margin-left: auto; }
.tr-rent { display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; padding: 10px 12px; margin: 6px 0; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; cursor: pointer; }
.tr-rent > span:first-child { font-size: 22px; }
.tr-rent b { display: block; font-size: 14px; }
.tr-rent small { display: block; color: var(--muted); font-size: 12px; }
.tr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tr-tpl { margin-left: 6px; font-size: 12px; }
.tr-country { margin-bottom: 12px; border: 1px dashed var(--work); border-radius: 12px; padding: 10px 12px; }

/* 📝 zápisky a fotky z cesty, 🗺 souhlas s veřejnou mapou */
.tr-posts { display: flex; flex-direction: column; gap: 6px; }
.tr-post { display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; cursor: pointer; }
.tr-post img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; flex: none; }
.tr-post-ico { width: 56px; height: 56px; display: grid; place-items: center; font-size: 24px; border-radius: 8px; background: var(--card-2); flex: none; }
.tr-post > span:not(.tr-tpl) { min-width: 0; flex: 1; }
.tr-post b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-post small { display: block; color: var(--muted); font-size: 12px; }
.tr-q-img { max-width: 100%; max-height: 260px; border-radius: 12px; display: block; margin-bottom: 8px; }
.tr-consent { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; padding: 8px 10px; border-radius: 12px; background: var(--card-2); }
.tr-consent small { flex: 1; min-width: 11em; color: var(--muted); font-size: 12px; line-height: 1.35; }

/* 🚐 předání/vrácení · 🆘 pomoc · 📖 návody · ✉️ vzkazy */
.tr-agree { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; margin-bottom: 8px; }
.tr-agree input { width: 20px; height: 20px; margin-top: 1px; flex: none; }
.tr-a2hs { margin: 12px 0; border: 1px dashed var(--line); border-radius: 12px; padding: 8px 12px; }
.tr-proto { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; margin: 6px 0; border-radius: 12px; border: 1px solid var(--line); background: var(--card); }
.tr-proto > b { display: block; font-size: 14px; }
.tr-proto > small { flex: 1; min-width: 10em; color: var(--muted); font-size: 12px; }
.tr-proto.ok { border-color: var(--ok); }
.tr-proto.bad { border-color: var(--bad); }
.tr-pr-photos { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.tr-pr-photos > span { position: relative; }
.tr-pr-photos img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; display: block; }
.tr-pr-photos button { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: var(--bad); color: #fff; font-size: 12px; }
.tr-help .row-btns a { text-decoration: none; }
.tr-guides { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.tr-guide { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.tr-guide img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }
.tr-guide b { font-size: 13px; }
.tr-msgs { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.tr-msg { position: relative; padding: 10px 12px; border-radius: 12px; background: var(--warn-soft); border: 1px solid var(--warn); }
.tr-msg b { display: block; font-size: 12px; color: var(--muted); }
.tr-msg p { margin: 4px 0 0; font-size: 14px; white-space: pre-wrap; }
.tr-msg > .btn-ghost { position: absolute; top: 6px; right: 6px; }
.tr-after { border: 1px solid var(--ok); border-radius: 12px; padding: 10px 12px; }