.swatch.shade{background:#767ab2}
body.shade-mode .legend,body.shade-mode #location,body.shade-mode .period-control,body.shade-mode .opacity-control,body.shade-mode .display-controls{display:none!important}
#shade-panel{position:absolute;left:20px;top:157px;width:320px;max-height:calc(100dvh - 265px);overflow:auto;background:var(--panel);border:1px solid #fff;border-radius:10px;padding:15px 17px;box-shadow:0 6px 28px #17384230;z-index:9;font-size:.8rem;line-height:1.5}
#shade-panel h2{font-size:1.05rem;margin:0}#shade-panel p{margin:9px 0}#shade-panel label{display:block;font-weight:600;margin:10px 0 5px}#shade-panel input[type=date],#shade-panel select{width:100%;max-width:none;padding:8px;border:1px solid var(--line);border-radius:5px;background:#fff;color:var(--ink);font:inherit}#shade-panel output{float:right;font-variant-numeric:tabular-nums}#shade-panel details{border-top:1px solid var(--line);margin-top:12px;padding-top:10px}#shade-panel summary{cursor:pointer;font-weight:600}#shade-panel .caution{font-size:.76rem}#shade-panel .shade-controls{margin-top:6px}#shade-panel .shade-key{height:12px;background:linear-gradient(90deg,#fff,rgba(49,68,152,.85));border:1px solid var(--line);border-radius:3px}#shade-panel .shade-ticks{display:flex;justify-content:space-between;font-size:.75rem}#shade-status{font-size:.77rem;color:#3f5864}#shade-reading{border-left:3px solid #6674a1;padding-left:9px;font-weight:600}#shade-reading:empty,#shade-tree-reading:empty,#shade-location:empty,#shade-tree-status:empty{display:none}#shade-tree-reading{border-left:3px solid #24795c;padding-left:9px}#shade-location{font-weight:650}#shade-panel .text-button{margin-right:12px}#shade-panel a{font-size:.76rem}
@media(min-width:1550px){#shade-panel{left:28px}}
@media(min-width:851px) and (max-width:1150px){.toolbar{gap:8px}.modes button{padding:9px 7px;font-size:.8rem;gap:5px}.period-control{min-width:0;padding-left:8px;gap:6px}.period-control select{min-width:0;max-width:190px}.opacity-control{min-width:90px;width:90px}}
@media(max-width:850px){.modes button{padding:8px 5px;font-size:.78rem;gap:5px}#shade-panel{left:12px;top:auto;bottom:86px;width:min(320px,calc(100% - 70px));max-height:43dvh;padding:12px 14px}body.shade-mode .map-actions{top:190px}body.shade-mode #status{top:180px}}
@media(max-width:380px){.modes button{font-size:.73rem;padding:8px 3px;gap:3px}.modes .swatch{width:6px;height:6px}}

/* Compact controls; collapse keeps the active shadow visible on the map. */
#shade-panel{padding:10px 13px}#shade-panel .panel-heading{gap:12px}#shade-panel .panel-heading>div{display:flex;gap:8px}#shade-panel .panel-heading button{min-height:30px;min-width:27px}
#shade-panel .shade-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}#shade-panel .shade-pair>div{min-width:0}#shade-panel label{margin:7px 0 4px;font-size:.75rem}
#shade-panel input[type=date],#shade-panel select{padding:6px 4px;font-size:.76rem;min-width:0;min-height:34px}
#shade-panel p{margin:6px 0}#shade-panel .caution{font-size:.71rem}#shade-panel details{margin-top:7px;padding-top:7px}#shade-location{font-size:.77rem}
@media(max-width:850px){#shade-panel{width:calc(100% - 70px);max-width:340px;max-height:38dvh;bottom:84px;padding:9px 12px}#shade-panel h2{font-size:.94rem}#shade-status{font-size:.71rem}#shade-panel .shade-pair{gap:8px}}

.shade-examples{display:flex;gap:16px}.shade-examples .text-button{margin:3px 0 7px}#shade-tree-status{font-size:11px;color:#62706a}#shade-tree-reading:empty,#shade-tree-status:empty{display:none}