/* "Earth now" (src/globe/now.js): a panel on the left on desktops (the layer dock steps aside while it is open), a sheet
   above the bottom dock on phones that folds down to its title. Colours come from the page's variables; each section
   sets --c, which its rows and charts (currentColor) pick up. */
#now{position:fixed;left:14px;top:84px;width:360px;max-height:calc(100% - 190px);display:none;flex-direction:column;z-index:4;padding:0;overflow:hidden}
#now.show{display:flex}
body.nw-open #dock{display:none}
body.lookup #now,body.embed #now{display:none!important}
#now:focus{outline:none}
.nw-head{display:flex;align-items:center;gap:4px;padding:10px 10px 8px 14px;border-bottom:1px solid var(--edge-dim)}
.nw-fold{display:flex;align-items:baseline;gap:10px;flex:1;min-width:0;border:0;background:none;padding:0;text-align:left;cursor:default}
.nw-fold:focus-visible,.nw-row:focus-visible,.nw-tab:focus-visible,.nw-btn:focus-visible,#now .x:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.nw-head h2{margin:0;font:900 24px/1 var(--display);letter-spacing:.05em;text-transform:uppercase;color:var(--ink)}
.nw-at{font:500 10px/1 var(--mono);letter-spacing:.1em;color:var(--faint);text-transform:uppercase;white-space:nowrap}
.nw-btn,#now .x{border:0;background:none;color:var(--faint);font-size:17px;line-height:1;padding:6px 9px;border-radius:8px}
.nw-btn:hover,#now .x:hover{color:var(--ink);background:rgba(230,237,243,.06)}
.nw-body{overflow:auto;overscroll-behavior:contain;padding:4px 10px 12px}
.nw-sec{padding:8px 2px 6px;border-bottom:1px solid var(--edge-dim);color:var(--c)}
.nw-sec:last-child{border-bottom:0}
.nw-sec h3{margin:2px 4px 6px;font:700 11px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--c)}
.nw-row{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;padding:7px 8px;border:1px solid transparent;border-radius:9px;background:none;text-align:left;color:var(--ink)}
.nw-row:hover{background:rgba(230,237,243,.05);border-color:var(--edge-dim)}
.nw-main{font:500 13.5px/1.3 var(--body)} .nw-main b{font-family:var(--mono);font-weight:600;color:var(--c,var(--ink))}
.nw-sub{font:500 11px/1.35 var(--body);color:var(--dim)}
.nw-hot{color:#ff4d5e!important}
.nw-chips{display:flex;flex-wrap:wrap;gap:4px;margin:2px 0 4px}
.nw-chips .nw-row{width:auto;padding:5px 9px;border-color:var(--edge-dim);flex-direction:row}
.nw-chips .nw-main{font-size:12px}
.nw-wait,.nw-note{margin:4px 8px;font-size:12px;line-height:1.35;color:var(--dim)}
.nw-src{margin:4px 8px 0;font-size:10.5px;line-height:1.35;color:var(--faint)}
.nw-tabs{display:flex;gap:4px;margin:6px 4px 2px}
.nw-tab{border:1px solid var(--edge-dim);background:none;border-radius:7px;padding:4px 8px;font:500 10.5px/1 var(--mono);letter-spacing:.06em;color:var(--dim)}
.nw-tab.on{color:var(--c);border-color:currentColor}
.nw-chart-box{margin:4px 6px 0;color:var(--c)}
.nw-chart{display:block;height:74px;overflow:visible}
.nw-chart text{font-family:var(--mono)}
.nw-cd{font-variant-numeric:tabular-nums}
@media (forced-colors:active){.nw-chart rect{fill:CanvasText}.nw-row{border-color:CanvasText}}
@media (prefers-reduced-motion:reduce){#now{transition:none}}
/* phones: a sheet above the bottom dock; folded, only the title bar shows */
@media (max-width:820px){
  #now{left:10px;right:10px;width:auto;top:auto;bottom:calc(84px + env(safe-area-inset-bottom,0px));max-height:min(62dvh,560px);border-radius:16px}
  #now.peek .nw-body{display:none}
  #now.peek{max-height:none}
  .nw-fold{cursor:pointer}
  .nw-fold::after{content:'▾';margin-left:auto;color:var(--faint);font-size:14px}
  #now.peek .nw-fold::after{content:'▴'}
  .nw-head h2{font-size:20px}
  .nw-row{min-height:44px;justify-content:center}
  .nw-chips .nw-row{min-height:36px}
  .nw-tab{padding:8px 10px}
  #now .x,.nw-btn{font-size:22px;padding:8px 12px}
  body.nw-open #card.show{bottom:calc(150px + env(safe-area-inset-bottom,0px))}
}
/* desktops: the destination band grew past 1,600 px wide (it was cut off at both ends): keep it clear of the navigation
   pad on the right and let it scroll sideways instead */
@media (min-width:821px){#band{max-width:calc(100% - 150px);overflow-x:auto;scrollbar-width:thin}}