html,body{margin:0;background:#000;color:#ddd;height:100%;overflow:hidden}
body{display:grid;place-items:center;font:12px Arial,"Microsoft YaHei","PingFang SC",sans-serif}
#stage{position:relative;width:min(100vw,calc(100dvh * 5 / 3));aspect-ratio:5/3;container-type:inline-size}
#clock{display:block;width:100%;height:100%;outline:none}
#map,#map-ui{position:absolute;left:17.375%;top:31.0416667%;width:82.5%;height:68.75%}
#map{background:#101018;outline:none;touch-action:none}
#map-ui{pointer-events:none;font:11px Arial,sans-serif;color:#ddd}
#sun{position:absolute;right:4px;top:4px;background:#000;border:1px solid #777;padding:2px 5px}
#sun:empty,#legend:empty,#km:empty{display:none}
#sun img{width:15px;height:15px;object-fit:contain;border-radius:50%;vertical-align:middle;margin-right:5px}
#sun span{margin-right:7px}#sun b{color:#fff;font-weight:400;margin-left:3px}
/* the foot, as the native map's: scale bar and terrain detail left, legend right; a narrow map
   wraps the legend upward instead of laying it over the scale */
#foot{position:absolute;left:2px;right:4px;bottom:2px;display:flex;justify-content:space-between;align-items:flex-end;gap:8px}
#scale{flex:none;display:grid;grid-template-columns:auto auto;column-gap:14px;align-items:end;background:#000;padding:1px 6px 4px 8px}
#km{color:#fff}#bar{display:block;grid-row:2;height:2px;background:#fff;margin-top:2px}
#dem{grid-row:1/3;grid-column:2;color:#969696;white-space:pre;padding-bottom:1px}
#legend{flex:0 1 auto;min-width:0;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:7px;background:#000;border:1px solid #fff;padding:3px 5px}
#legend i{display:inline-block;width:7px;height:7px;margin-right:4px}
#profile{position:absolute;box-sizing:border-box;width:260px;background:#000;border:1px solid #888;color:#ddd;padding:5px 7px;font:11px/13px Arial,sans-serif;z-index:5}
/* every line keeps its height while the place is worked out, as the native popup: it never jumps */
#position,#loss,#conditions{height:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#profile[hidden]{display:none}#profile .title{text-align:center;color:#fff;margin-bottom:9px}
#profile-close{position:absolute;right:3px;top:2px;border:1px solid #777;background:#000;color:#ddd;width:18px;height:18px;padding:0;cursor:pointer}
#position{color:#ffb400;margin-bottom:9px}#reach-table{border-collapse:collapse;width:100%;margin-bottom:7px;table-layout:fixed}
#reach-table th,#reach-table td{height:13px;white-space:nowrap}#reach-table th:first-child{width:46px}
#reach-table th{font-weight:400;color:#fff;padding:2px}#reach-table td{text-align:center;border:1px solid #444;padding:3px 1px}
#reach-table td:first-child{border:0;text-align:left;color:#ddd;padding-right:4px}
#reach-table .OK{background:#009100;color:#fff}#reach-table .LOS{background:#af7d00;color:#fff}#reach-table .BLK{background:#910000;color:#fff}
#terrain{display:block;width:100%;height:35px;margin-top:3px;border-bottom:1px solid #666}
#nearby{color:#00dcdc;margin-top:5px;height:26px;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}
#conditions{color:#999;margin-top:6px;font-size:10px}
@media(max-width:700px){#sun{font-size:9px}#legend,#scale{font-size:9px}#legend{gap:4px}#profile{width:235px;font-size:10px}#reach-table th:first-child{width:42px}}
/* the search box is drawn in HamClock's 1600x960 pixels (--dot is one) and scaled as the clock is;
   the field under its prompt is invisible and only takes the keys, the lists are for screen readers */
#search{--dot:calc(100cqw / 1600);position:absolute;left:calc(17.375% + 4 * var(--dot));top:calc(31.0416667% + 4 * var(--dot));z-index:6}
#search[hidden]{display:none}
#search-dots{display:block;width:calc(600 * var(--dot));height:calc(var(--lines,1) * 30 * var(--dot));cursor:pointer}
#search-query{position:absolute;left:0;top:0;width:100%;height:calc(30 * var(--dot));box-sizing:border-box;margin:0;padding:0;border:0;opacity:0;font-size:calc(16 * var(--dot))}
#search-results,#search-note{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}