/* palette overrides */
body.light{--bg:#FFFDF5;--card:#FFFDF5;--ctl:#FFFDF5;--soft:#F4EFE0;--line:#DCD6C4;
  --ocean:#FFFDF5;--land:#EFE8D4;--grid:#EDE7D6;
  --dotfill:#FFFDF5;--dotstroke:#111111;--lbl:#111111;--lblhalo:rgba(255,253,245,.92)}
body.dark{--ocean:#000000;--land:#171717;--grid:#1C1C1C;
  --dotfill:#000000;--dotstroke:#f2f2f2;--lbl:#f2f2f2;--lblhalo:rgba(0,0,0,.92)}

*{box-sizing:border-box}
html,body{height:100%}
body{background:var(--bg);color:var(--text);display:flex;flex-direction:column;overflow:hidden}
.grow{flex-grow:1}
.cell-r{border-right:1px solid var(--line)}
.cell-l{border-left:1px solid var(--line)}
#hdr{height:57px;flex:0 0 57px;display:flex;align-items:stretch;border-bottom:1px solid var(--line)}
#hdr .logo{width:57px;display:flex;align-items:center;justify-content:center}
#hdr .mark{display:flex;align-items:center;justify-content:center;width:30px;height:30px;
  background:var(--accent);color:var(--accentfg);font-size:12px;font-weight:700;letter-spacing:.02em}
#hdr .title{display:flex;flex-direction:column;justify-content:center;padding:0 20px;gap:2px;white-space:nowrap}
#hdr .title strong{font-size:15px;font-weight:700;letter-spacing:-0.01em}
#hdr .ctrls{flex:1;display:flex;align-items:center;gap:8px;padding:0 16px;min-width:0}
#hdr .right{width:400px;display:flex;align-items:center;gap:10px;padding:0 16px}
#hdr .searchbox{flex:1;min-width:0;position:relative;display:flex}
#hdr .right input{flex:1;min-width:0;height:32px;border:1.5px solid var(--line);background:var(--ctl);color:var(--text);
  font-family:inherit;font-stretch:75%;font-size:13px;padding:0 30px 0 10px;outline:none}
#hdr .clear{position:absolute;right:1px;top:1px;width:28px;height:30px;border:0;background:none;
  color:var(--sub);font-size:18px;line-height:1;cursor:pointer}
#hdr .clear:hover{color:var(--text)}
#hdr .right input:focus{border-color:var(--text)}
main{flex:1;display:flex;min-height:0}
#rail{width:57px;flex:0 0 57px;border-right:1px solid var(--line);display:flex;flex-direction:column}
#rail .sq{width:56px;height:56px}
#mapcol{flex:1;display:flex;flex-direction:column;min-width:0}
#mapwrap{flex:1;position:relative;background:var(--ocean);overflow:hidden;min-height:0}
#map{width:100%;height:100%;display:block;cursor:grab}
#map.drag{cursor:grabbing}
.overlay{position:absolute;display:flex;gap:8px;z-index:2}
.overlay.tl{left:16px;top:16px}.overlay.tr{right:16px;top:16px}
.overlay.br{right:16px;bottom:16px;flex-direction:column}
.overlay.bl{left:16px;bottom:16px;background:var(--bg);border:1.5px solid var(--text);padding:10px 12px;flex-direction:column;gap:6px}
.pill.flat:not(.on){background:var(--bg)}
#legend .bar{display:flex;height:10px;width:220px}
#legend .ticks{display:flex;justify-content:space-between;width:220px}
#legend .ticks span{font-size:10px;color:var(--sub)}
#timeline{height:73px;flex:0 0 73px;display:flex;align-items:center;gap:20px;
  padding-right:20px;border-top:1px solid var(--line)}
#timeline .play{width:72px;height:72px;flex:none;border-right:1px solid var(--line);font-size:14px}

#timeline .slider{flex:1;min-width:0}
#day{width:100%;-webkit-appearance:none;appearance:none;background:transparent;height:24px;margin:0}
#day::-webkit-slider-runnable-track{height:1.5px;background:var(--text)}
#day::-moz-range-track{height:1.5px;background:var(--text)}
#day::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;
  background:var(--bg);border:1.5px solid var(--text);margin-top:-11px;cursor:pointer}
#day::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--bg);border:1.5px solid var(--text);cursor:pointer}
.months{display:flex;justify-content:space-between;margin-top:-2px}
.months span{font-size:13px;font-weight:500;color:var(--text);letter-spacing:.01em}
#panel{width:400px;flex:0 0 400px;display:flex;flex-direction:column;min-height:0;border-left:1px solid var(--line)}
#panel .tabs{display:flex}
#list{flex:1;overflow-y:auto}
#list .row{cursor:pointer}
#list .rank{width:22px;font-size:12px;color:var(--sub);flex:none}
#list .nm{flex:1;min-width:0}
#list .nm b{display:block;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#list .nm span{font-size:11px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
#list .dot{width:12px;height:12px;flex:none}
#list .sect{padding:10px 20px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--sub);background:var(--soft);border-bottom:1px solid var(--line)}
#popup .src{color:var(--sub);font-size:11.5px}
#list .note{padding:16px 20px;border-bottom:1px solid var(--line);font-size:12.5px;line-height:1.5}
#list .note b{display:block;font-size:13px;margin-bottom:4px}
#popup{position:absolute;width:320px;border:1.5px solid var(--text);background:var(--card);z-index:5;padding:16px 18px}
#popup .x{position:absolute;right:8px;top:6px;border:0;background:none;font-size:16px}
#popup h3{margin:0 0 2px;font-size:15px}
#popup .kv{display:flex;justify-content:space-between;font-size:12px;padding:5px 0;border-bottom:1px solid var(--line)}
#popup .kv span:first-child{color:var(--sub)}
#popup p{font-size:12px;line-height:1.5;margin:10px 0 0}
#popup .spark{display:flex;gap:2px;margin-top:10px;height:26px;align-items:flex-end}
#popup .spark i{flex:1;display:block}
@media (max-width:1180px){#panel{width:320px;flex-basis:320px}#hdr .right{width:320px}}
@media (max-width:1100px){
  #hdr .title span{display:none}                 /* the strapline goes first */
  #hdr #count{display:none}                      /* then the SEARCH caption */
  #hdr .ctrls{padding:0 10px;gap:5px}
  #hdr .ctrls .pill{padding:6px 9px;font-size:12px}
}
@media (max-width:940px){
  #hdr .ctrls .pill span{display:none}           /* icons only, before anything overlaps */
  #hdr .ctrls .pill{padding:6px 10px}
}
@media (max-width:900px){#rail,#hdr .title{display:none}main{flex-direction:column}
  #panel{width:auto;flex:0 0 40vh;border-top:1px solid var(--line)}#mapcol{border-right:0}}

/* saved-places view */
#saved{position:absolute;inset:0;width:100%;height:100%;display:block;background:var(--ocean)}
#savedEmpty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:var(--ocean)}
#savedEmpty b{font-size:15px}
#savedEmpty span{font-size:12.5px;color:var(--sub)}
#saved .paneName{font-size:13px;font-weight:700;fill:var(--text)}
#saved .paneMeta{font-size:11px;fill:var(--sub);letter-spacing:.06em;text-transform:uppercase}
#saved .paneBox{fill:none;stroke:var(--line);stroke-width:1}
#saved .paneChip{fill:var(--bg);stroke:var(--text);stroke-width:1.5}

#saved .paneCardBig{font-size:15px;font-weight:700;fill:var(--text)}
#saved .paneCardRest{font-size:11px;fill:var(--sub)}
#saved .paneHit{fill:transparent;cursor:pointer}
#saved .paneHit:hover{fill:rgba(127,127,127,.06)}
#saved .paneClose{color:var(--sub);cursor:pointer}
#saved .paneClose:hover{color:var(--text)}
.bm{border:0;background:none;padding:0;width:26px;height:26px;flex:none;display:flex;
    align-items:center;justify-content:center;color:var(--sub);cursor:pointer}
.bm:hover{color:var(--text)}
.bm.on{color:var(--text)}
[hidden]{display:none!important}

/* original button size, larger glyphs inside */
#mapwrap .mc{width:40px;height:40px;padding:0;border:1.5px solid var(--text);background:var(--ctl);
  color:var(--text);display:flex;align-items:center;justify-content:center;line-height:0}
#mapwrap .mc svg{display:block}
#mapwrap .mc:hover{background:var(--soft)}
.overlay.br{gap:8px}
#popup .sparkcap{display:block;margin-top:12px}
#popup .spark{margin-top:6px}

#hdr .sep{width:1px;height:22px;background:var(--line);margin:0 4px;flex:none}
#hdr .ctrls{gap:6px}
#hdr .ctrls .pill{padding:6px 11px;font-size:12.5px}


#panel .tab{padding:0 4px}

#list .empty{padding:28px 20px;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
#list .empty b{font-size:14px}
#list .empty span{font-size:12.5px;color:var(--sub)}

#rail .railgap{flex:1}
#rail #theme{border-top:1px solid var(--line);border-bottom:0}

/* the date is a label, not a control */
.daybox{flex:none;min-width:54px;   /* widest label is “30 May” at 51 px; fixed so the slider never shifts */
  display:flex;flex-direction:column;gap:1px}
#dayLabel{font-size:19px;font-weight:700;letter-spacing:-0.01em;white-space:nowrap;color:var(--text)}
#weekLabel{font-size:10.5px}
#timeline #today{flex:none}
#timeline .slider{flex:1;min-width:0;transform:translateY(-5px)}   /* track + months optically sit low */
.months{padding:0 11px}                 /* line month labels up with the slider thumb */

.listhead{height:48px;flex:none;display:flex;align-items:center;justify-content:space-between;
  padding:0 12px 0 20px;border-bottom:1px solid var(--line)}
#listTitle{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.06em}
#sortBtn{width:34px;height:34px}

.pillicon{flex:none;margin-right:1px}



#hdr .ctrls{gap:8px;padding:0 16px}

#credits{flex:none;padding:10px 20px;border-top:1px solid var(--line);
  font-size:10.5px;line-height:1.5;color:var(--sub)}
#credits a{color:var(--sub);text-decoration:none;border-bottom:1px solid var(--line)}
#credits a:hover{color:var(--text)}