:root{color-scheme:light dark;
  --bg:#0b1220; --panel:#101a2e; --card:#16223c; --line:#24344f;
  --txt:#e5ecf6; --dim:#8ea2bd; --faint:#5a6e8a;
  --flight:#a78bfa; --transit:#38bdf8; --walk:#34d399; --layover:#8ea2bd;
  --process:#fb7185; --activity:#fbbf24; --rest:#64748b; --acc:#60a5fa;
}
html.light{color-scheme:light;
  --bg:#f6f7f9; --panel:#eef0f3; --card:#ffffff; --line:#d0d5dd;
  --txt:#1a1d26; --dim:#6b7280; --faint:#9ca3af;
  --flight:#7c3aed; --transit:#0284c7; --walk:#059669; --layover:#6b7280;
  --process:#e11d48; --activity:#d97706; --rest:#6b7280; --acc:#2563eb;
}
html.dark{color-scheme:dark;}
*{box-sizing:border-box}
.hidden{display:none}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--txt);
  font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
body.dragging{user-select:none;-webkit-user-select:none;cursor:col-resize}

/* ---------- каркас: header / [map | sidebar] / timeline ---------- */
/* Размеры взяты из текущего блога: header — авто по содержимому (43 px),
   timeline — блок #panel как есть (330 px, min-height 300px; на мобильном
   240/200). Тянется только граница сайдбара. */
#wrap{display:grid;height:100vh;height:100dvh;min-height:560px;position:relative;
  grid-template-rows:auto minmax(0,1fr) 330px;grid-template-columns:100%;overflow:hidden}
#map-wrap{display:grid;min-height:0;min-width:0;
  grid-template-columns:minmax(0,1fr) var(--splitter-w,8px) var(--sidebar-w,min(25vw,380px));
  grid-template-rows:100%}
#map{grid-column:1;grid-row:1}
#panel{grid-column:1;grid-row:3}

/* ---------- разделитель map / sidebar ---------- */
#map-splitter{position:relative;background:var(--panel);cursor:col-resize;touch-action:none;
  display:flex;align-items:center;justify-content:center;z-index:5;border-left:1px solid var(--line);
  grid-column:2;grid-row:1}
#map-splitter::before{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,var(--faint) 0 1px,transparent 1px 5px);opacity:.35}
#map-splitter:hover,#map-splitter:focus-visible,#map-splitter.active{background:var(--acc);outline:none}
#splitter-size{position:absolute;left:50%;top:8px;transform:translateX(-50%);z-index:3;
  background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:1px 6px;
  font-size:11px;color:var(--dim);white-space:nowrap;display:none;pointer-events:none}
#map-splitter.active #splitter-size{display:block}
/* сайдбар скрыт крестиком: колонки схлопываются, карта на всю ширину */
#wrap.sb-hidden #map-wrap{grid-template-columns:minmax(0,1fr)}
#wrap.sb-hidden #map-sidebar,
#wrap.sb-hidden #map-splitter{display:none}

/* ---------- сайдбар: единственный вид панели события ---------- */
#map-sidebar{display:flex;flex-direction:column;overflow:hidden;min-width:0;min-height:0;
  grid-column:3;grid-row:1;background:var(--card)}
#map-sidebar #tl-popup{flex:1 1 auto;margin:0;padding:0;border:0;border-radius:0;
  box-shadow:none;background:transparent;display:flex;flex-direction:column;overflow:hidden}
#map-sidebar #tl-popup-header{padding:2px 10px 0}
/* Сайдбар виден только при выбранном событии: без него колонка схлопнута целиком
   (см. .sb-hidden), поэтому подсказка внутри не нужна — события выбирают на
   таймлайне или на карте. */
#map-sidebar #tl-popup.hidden{display:none}

/* ---------- мобильная раскладка: одна колонка, 4 области ---------- */
/* header → map → sidebar → timeline; сайдбар регулируется по ВЫСОТЕ.
   #map-wrap растворяется (display:contents), поэтому map, разделитель и
   сайдбар становятся строками самого #wrap — порядок как в DOM. */
@media (max-width:800px){
  #wrap{grid-template-rows:auto minmax(120px,1fr) 8px var(--sidebar-h,240px) 240px}
  #map-wrap{display:contents}
  #topbar{grid-column:1;grid-row:1}
  #map{grid-column:1;grid-row:2}
  #day-floating{grid-column:1;grid-row:2}
  #map-splitter{grid-column:1;grid-row:3;cursor:row-resize;border-left:0;
    border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  #map-splitter::before{background:repeating-linear-gradient(180deg,var(--faint) 0 1px,transparent 1px 5px)}
  #splitter-size{top:50%;left:6px;transform:translateY(-50%)}
  body.dragging{cursor:row-resize}
  #map-sidebar{grid-column:1;grid-row:4;border-left:0}
  #panel{grid-column:1;grid-row:5}
  #wrap.sb-hidden{grid-template-rows:auto minmax(120px,1fr) 240px}
  #wrap.sb-hidden #panel{grid-row:3}
}

/* ---------- header ---------- */
#topbar{flex:0 0 auto;display:flex;align-items:center;gap:0;padding:0 12px;
  border-bottom:1px solid var(--line);background:var(--panel);position:relative}
#topbar .topbar-btn{width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  background:none;border:none;border-radius:8px;cursor:pointer;font-size:20px;color:var(--dim);
  text-decoration:none;flex:0 0 auto}
#topbar .topbar-btn:hover{background:rgba(255,255,255,.06);color:var(--txt)}
#trip-info{display:flex;align-items:baseline;gap:14px;padding:8px 6px;flex:1 1 auto;min-width:0}
#trip-title{font-size:18px;font-weight:700;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#trip-sub{color:var(--dim);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#settings-wrap{position:relative;flex:0 0 auto}
#settings-menu{position:fixed;top:42px;right:0;left:auto;bottom:auto;z-index:1000;min-width:240px;
  background:var(--card);border:1px solid var(--line);border-radius:0;border-top:none;border-right:none;
  box-shadow:0 8px 30px rgba(0,0,0,.5);padding:0}
#settings-menu.hidden{display:none}
.sm-section{margin:0;border-top:1px solid var(--line)}
.sm-section:first-child{border-top:none}
.sm-label{font-size:14px;font-weight:700;color:var(--dim);padding:10px 12px;cursor:pointer;user-select:none;display:flex;align-items:center;justify-content:space-between}
.sm-label:hover{color:var(--txt)}
.sm-label::after{content:"";width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid var(--faint);transition:transform .15s}
.sm-section.open>.sm-label::after{transform:rotate(180deg)}
.sm-section:not(.open)>.sm-options{display:none}
.sm-options{padding:4px 10px 10px;display:flex;flex-wrap:wrap;gap:4px}
.sm-options:has(.sm-layer-table){display:block;padding:0}
#sm-legend{flex-direction:column;gap:2px;padding:6px 10px 10px}
.sm-layer-table{display:grid;grid-template-columns:auto 1fr auto;gap:3px 6px;align-items:center;width:100%;padding:4px 10px 10px;font-size:12px}
.sm-opt{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:4px 12px;height:30px;display:inline-flex;align-items:center;
  font-size:12px;cursor:pointer;color:var(--txt)}
.sm-opt:hover{border-color:var(--acc)}
.sm-opt.active{background:var(--acc);color:#fff;border-color:var(--acc)}
#sm-theme{flex-direction:column;gap:4px;padding:6px 10px 10px;align-items:flex-start}
#sm-theme .sm-opt{height:30px;display:inline-flex;align-items:center}
#sm-legend .lg-row{padding:2px 0}
.sm-layer-table .sm-lt-h{font-size:10px;color:var(--faint);text-align:center;text-transform:uppercase;letter-spacing:1px}
.sm-lt-radio{width:18px;height:18px;margin:0;cursor:pointer;accent-color:var(--acc)}

/* ---------- map ---------- */
/* Раскладка области карты — в блоке «каркас» выше; здесь только оформление
   самой Leaflet-карты. */
#map .leaflet-control-attribution{background:var(--card);color:var(--faint);font-size:9px;opacity:.85;padding:0 5px;border-radius:6px 0 0 0}
#map .leaflet-control-attribution a{color:var(--dim)}
/* Тёмная тема карты: только pane тёмного слоя затемняется фильтром
   (светлый OSM/спутник/топо остаются как есть; маркеры не затронуты) */
#map .leaflet-darkTiles-pane{filter:invert(1) hue-rotate(185deg) brightness(.92) contrast(.92) saturate(.5)}
#day-floating{grid-column:1;grid-row:1;justify-self:center;align-self:start;margin-top:10px;z-index:600;
  background:var(--panel);border:1px solid var(--line);border-radius:20px;
  padding:5px 14px;font-size:13px;color:var(--txt);backdrop-filter:blur(4px);
  pointer-events:none;white-space:nowrap}
.lg-row{display:flex;align-items:center;gap:6px;margin:2px 0}
.lg-swatch{width:10px;height:10px;border-radius:3px;display:inline-block}

/* ---------- bottom panel: область timeline целиком, вид как в текущем блоге ---------- */
#panel{display:flex;border-top:1px solid var(--line);background:var(--panel);
  position:relative;min-height:0;min-width:0;height:100%;overflow:hidden}

/* day switcher */
#daynav{flex:0 1 132px;border-right:1px solid var(--line);padding:8px;display:flex;flex-direction:column;overflow:hidden;min-width:140px}
#daynav-list{overflow-y:auto;flex:1;min-height:0;scroll-behavior:smooth}
#daynav-head{display:flex;align-items:center;justify-content:space-between;margin:2px 4px 8px}
#daynav-title{font-size:11px;text-transform:uppercase;letter-spacing:.8px;color:var(--faint)}
#daynav-btns{display:flex;gap:4px}
#daynav-btns button{width:24px;height:24px;padding:0;background:var(--card);color:var(--txt);border:1px solid var(--line);
  border-radius:7px;cursor:pointer;font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center}
#daynav-btns button:hover{border-color:var(--acc)}
#daynav-btns button:disabled{opacity:.35;cursor:default}
#dn-prev,#dn-next{transform:rotate(90deg)}
#daynav-list::-webkit-scrollbar,#tl-chips::-webkit-scrollbar{width:4px}
#daynav-list::-webkit-scrollbar-track,#tl-chips::-webkit-scrollbar-track{background:transparent}
#daynav-list::-webkit-scrollbar-thumb,#tl-chips::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
#daynav-list::-webkit-scrollbar-thumb:hover,#tl-chips::-webkit-scrollbar-thumb:hover{background:var(--faint)}
.daybtn{display:block;width:100%;text-align:left;background:transparent;border:1px solid transparent;
  border-radius:9px;color:var(--txt);padding:7px 9px;margin-bottom:6px;cursor:pointer}
.daybtn:hover{background:var(--card)}
.daybtn.active{background:var(--card);border-color:var(--acc)}
.daybtn .db-date{font-size:12px;font-weight:700}
.daybtn .db-week{font-size:10px;color:var(--dim)}
.daybtn .db-t{font-size:11px;color:var(--dim);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* timeline */
#timeline{flex:1 1 auto;position:relative;display:flex;flex-direction:column;padding:8px 14px 6px;min-width:0}
#tl-head{display:flex;align-items:center;gap:8px;flex:0 0 auto}
#tl-daytitle{font-size:14px;font-weight:700;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#tl-canvas{position:relative;flex:1 1 auto;margin-top:6px;overflow:hidden}

#tl-axisline{position:absolute;left:0;right:0;bottom:26px;height:0;border-top:1px solid var(--line);z-index:1}
#tl-axisline-hours{position:absolute;left:0;right:0;top:6px}
#tl-hours{position:absolute;inset:0;z-index:0;pointer-events:none}
#tl-hours .tl-hgrid{position:absolute;top:0;bottom:0;border-left:1px dashed rgba(36,52,79,.55)}
#tl-hours .tl-htick{position:absolute;color:var(--faint);font-size:9.5px;transform:translateX(-50%);white-space:nowrap}

#tl-lane-moves,#tl-lane-stops{position:absolute;left:0;right:0;z-index:2}
#tl-lane-moves{top:0;height:30px}
#tl-lane-stops{top:34px;height:34px}

.tl-item{position:absolute;cursor:pointer;user-select:none;transition:filter .12s, transform .12s}
.tl-item:hover{filter:brightness(1.25)}
.tl-item.hl{outline:2px solid #fff;outline-offset:1px;z-index:5}

.tl-bar{top:6px;height:20px;border-radius:10px;min-width:8px;
  background:var(--card);box-shadow:inset 0 0 0 1px currentColor;
  display:flex;align-items:center;overflow:hidden}
.tl-bar .tl-bar-in{height:100%;border-radius:10px}
.tl-bar .tl-txt{position:absolute;left:100%;margin-left:6px;white-space:nowrap;font-size:10.5px;color:var(--txt);
  display:flex;align-items:center;gap:5px;top:0;bottom:0}
.tl-bar .tl-txt.right{left:auto;right:calc(100% + 6px);margin-left:0}
.tl-bar .tl-txt .t{color:var(--dim)}
.tail-tag{font-style:italic;color:var(--faint)}
.tl-tag{position:absolute;white-space:nowrap;font-size:10.5px;color:var(--dim)}
.tl-dot{position:absolute;top:7px;width:20px;height:20px;border-radius:50%;transform:translate(-50%,0);
  border:2.5px solid var(--bg);z-index:3;box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.tl-dot .tl-dtime{position:absolute;top:24px;left:50%;transform:translateX(-50%);font-size:10px;
  color:var(--txt);background:var(--panel);padding:1px 5px;border-radius:6px;white-space:nowrap;
  border:1px solid var(--line)}

#tl-chips{flex:0 0 auto;display:flex;flex-wrap:wrap;gap:5px;padding-top:4px;overflow-y:auto;max-height:64px}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:2px 9px;font-size:11px;cursor:pointer;color:var(--txt)}
.chip:hover{border-color:var(--acc)}
.chip .ct{color:var(--faint);font-size:10px}
.chip .ch-j{font-size:11px;margin-left:3px}

/* панель события: единственный вид — в колонке сайдбара (см. каркас выше).
   Режимов «свернуть / над таймлайном / справа» здесь нет: остаётся навигация
   ‹ › по событиям дня и крестик (скрыть сайдбар). */
#tl-popup{background:var(--card);display:flex;flex-direction:column}
#tl-popup.hidden{display:none}
#tl-popup-header{flex:0 0 auto;position:relative;min-height:38px;padding:4px 10px 0;border-bottom:1px solid var(--line)}
#tl-popup-scroll{flex:1 1 auto;overflow:auto;padding:12px 14px 12px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
#tl-popup-scroll::-webkit-scrollbar{width:4px}
#tl-popup-scroll::-webkit-scrollbar-track{background:transparent}
#tl-popup-scroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
#tl-popup-scroll::-webkit-scrollbar-thumb:hover{background:var(--faint)}
#tl-popup-nav{position:absolute;top:6px;left:10px;display:flex;gap:6px}
#tl-popup-nav button{background:var(--card);color:var(--txt);border:1px solid var(--line);border-radius:7px;
  width:26px;height:26px;padding:0;cursor:pointer;font-size:16px;line-height:1}
#tl-popup-nav button:hover:not(:disabled){border-color:var(--acc)}
#tl-popup-nav button:disabled{opacity:.35;cursor:default}
#tl-popup-close{position:absolute;top:6px;right:10px;background:var(--card);border:1px solid var(--line);border-radius:7px;
  color:var(--dim);font-size:18px;cursor:pointer;line-height:1;width:26px;height:26px;padding:0;display:flex;align-items:center;justify-content:center}
#tl-popup-close:hover{border-color:var(--acc);color:var(--txt)}
.p-title{font-size:14.5px;font-weight:700;padding-right:24px;margin-bottom:2px}.p-loc{color:var(--dim);font-size:12px;margin-bottom:8px}
.p-row{display:flex;gap:8px;margin:3px 0;font-size:12.5px;align-items:baseline}
.p-row .ico{flex:0 0 20px;text-align:center}
.p-row .vl{font-weight:600;white-space:pre}
.p-row .vs{color:var(--dim)}
.p-notes{margin-top:8px;padding-top:8px;border-top:1px dashed var(--line);font-size:12px;color:var(--dim)}
.p-notes li{margin:2px 0}
.goto-prev-day,.goto-next-day{display:block;width:100%;margin-top:12px;padding:7px 10px;text-align:left;
  background:var(--card);border:1px dashed var(--line);border-radius:8px;
  color:var(--dim);font-size:12px;cursor:pointer}
.goto-prev-day:hover,.goto-next-day:hover{color:var(--txt);border-color:var(--acc)}
.p-time{display:inline-block;background:var(--card);border-radius:6px;padding:0 6px;font-weight:700;
  font-variant-numeric:tabular-nums}
.badge{display:inline-block;font-size:10.5px;border-radius:20px;padding:1px 8px;margin-left:8px;vertical-align:1px}
.hint{color:var(--faint);font-size:11px;font-style:italic}

/* заметки */
.j-sep{border:none;border-top:1px solid var(--line);margin:0 -14px 0;}
.j-entry{border-bottom:1px dashed var(--line);padding:12px 14px}
.j-entry:last-child{border-bottom:none}
.j-entry p{margin:0 0 8px;font-size:13px;line-height:1.6;color:var(--txt)}
.j-entry p:last-child{margin-bottom:0}

/* фото-превью */
.j-photos,.p-photos{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;margin-bottom:12px}
.j-thumb{width:80px;height:60px;object-fit:cover;border-radius:8px;cursor:pointer;border:1px solid var(--line);transition:border-color .12s}
.j-thumb:hover{border-color:var(--acc)}
.p-photos .j-thumb{width:60px;height:45px}

/* лайтбокс */
.lightbox{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.88);display:flex;align-items:center;justify-content:center;cursor:pointer}
.lb-img{max-width:90vw;max-height:90vh;border-radius:8px;object-fit:contain;cursor:default}
.lb-vid{max-width:90vw;max-height:90vh;border-radius:8px;object-fit:contain;cursor:default;max-width:100%}
.lb-media{display:flex;align-items:center;justify-content:center;max-width:90vw;max-height:90vh}
.j-photos,.p-photos{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;margin-bottom:12px}
.ph-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center}
.vid-badge{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:28px;color:#fff;text-shadow:0 0 8px rgba(0,0,0,.7);pointer-events:none;opacity:.9;line-height:1}
.lb-close{position:absolute;top:16px;right:20px;color:#fff;font-size:32px;cursor:pointer;line-height:1;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,.1)}
.lb-close:hover{background:rgba(255,255,255,.25)}
.lb-prev,.lb-next{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;background:rgba(255,255,255,.1);border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center}
.lb-prev{left:12px}.lb-next{right:12px}
.lb-prev::after,.lb-next::after{content:"";display:block;width:12px;height:12px;border:solid #fff;border-width:2px 2px 0 0}
.lb-prev::after{transform:rotate(-135deg)}.lb-next::after{transform:rotate(45deg)}
.lb-prev.single,.lb-next.single{display:none}

/* видимый фокус для клавиатуры (не показывается при клике мышью) */
.daybtn:focus-visible,.chip:focus-visible,.tl-item:focus-visible,
#daynav-btns button:focus-visible,#tl-popup button:focus-visible{
  outline:2px solid var(--acc);outline-offset:2px}
#tl-popup:focus-visible{outline:none}

@media (max-width:800px){
  #daynav{flex-basis:104px;min-width:120px}
  #tl-lane-stops{top:30px}
  #timeline{min-height:0}
}

/* ---------- главная: список путешествий ---------- */
#home{flex:1;width:100%;max-width:760px;margin:0 auto;padding:36px 20px 60px;display:flex;
  flex-direction:column;align-items:center}
#home-head{text-align:center;margin-bottom:34px}
#home-icon{font-size:44px;line-height:1}
#home-title{font-size:26px;font-weight:800;margin:10px 0 6px;letter-spacing:.3px}
#home-sub{color:var(--dim);font-size:14px;margin:0}
#trip-grid{display:flex;flex-direction:column;gap:14px;width:100%}
.trip-card{display:flex;align-items:center;gap:16px;padding:18px 20px;background:var(--panel);
  border:1px solid var(--line);border-radius:14px;color:var(--txt);text-decoration:none;
  transition:border-color .15s, transform .15s}
.trip-card:hover{border-color:var(--acc);transform:translateY(-2px)}
.trip-card:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.tc-icon{font-size:34px;line-height:1;flex:0 0 auto}
.tc-main{display:flex;flex-direction:column;gap:3px;min-width:0}
.tc-title{font-size:18px;font-weight:700}
.tc-dates{font-size:12px;color:var(--dim)}
.tc-blurb{font-size:13px;color:var(--dim)}
.tc-go{flex:0 0 auto;margin-left:auto;color:var(--faint);font-size:20px}
@media (max-width:520px){
  #home{padding:24px 14px 40px}
  .trip-card{padding:14px;gap:12px}
  .tc-icon{font-size:28px}
}