/* Parts added with the lunar surface layers and the terrain view (landing.js). Values from tokens.css only.
   Same surface as the parameter sidebar and the info cards; one surface per part. */

/* Surface selector of the sidebar: a field like the other inputs */
.pitem select{width:100%;height:calc(var(--u) * 8.5);padding:0 calc(var(--u) * 1.8);background:var(--field);border:1px solid transparent;border-radius:var(--r-outer);outline:0;color:var(--text);font:400 calc(var(--u) * 2.7) var(--font-ui);cursor:pointer;transition:border-color var(--t-fast),background var(--t-fast)}
.pitem select:hover{background:rgb(255 255 255 / .12)}
.pitem select:focus-visible{border-color:var(--accent)}
.pitem select option{background:#16171a;color:var(--text)}
.pitem select option:disabled{color:#7d828a}
.phead label{font:inherit;color:inherit}

/* Values under the pointer: follows it, never takes it */
.readout{position:absolute;left:0;top:0;z-index:7;width:max-content;max-width:calc(100% - 2 * var(--s2));padding:var(--s2) var(--s3);background:var(--surface);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid var(--line);border-radius:var(--r-outer);color:var(--text);font:400 14px/1.5 var(--font-ui);font-variant-numeric:tabular-nums;white-space:normal;pointer-events:none}
.readout[hidden]{display:none}
.readout b{font-weight:600}
.readout span{color:var(--text-muted)}

/* Legend of a colour-coded surface: bottom right of the scene (cards and the terrain bar stand on the left) */
.legend{position:absolute;right:var(--s4);bottom:var(--s5);z-index:5;width:340px;padding:var(--s3) var(--s4);background:var(--surface);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid var(--line);border-radius:var(--r-outer);color:var(--text);font:400 13px/1.5 var(--font-ui);font-variant-numeric:tabular-nums;pointer-events:none}
.legend[hidden]{display:none}
.legend-title{font-weight:600;font-size:14px}
.legend-bar{height:12px;margin-top:var(--s2);border-radius:var(--r-inner)}
.legend-ticks{position:relative;height:20px;margin-top:var(--s1)}
.legend-ticks span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.legend-ticks span:first-child{transform:none}.legend-ticks span:last-child{transform:translateX(-100%)}
.legend-note{color:var(--text-muted)}.legend-note:empty{display:none}

/* Loading a terrain block: one line of text and a bar, centred over the scene */
.loading{position:absolute;left:50%;top:50%;z-index:8;width:min(420px,calc(100% - 2 * var(--s4)));transform:translate(-50%,-50%);padding:var(--s4) var(--s5);background:var(--surface);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid var(--line);border-radius:var(--r-outer);color:var(--text);font:500 16px/1.5 var(--font-ui)}
.loading[hidden]{display:none}
.loading p{margin:0 0 var(--s3)}
.loading-track{height:4px;border-radius:99px;background:rgb(255 255 255 / .16);overflow:hidden}
.loading-track i{display:block;height:100%;width:0;border-radius:99px;background:var(--accent);transition:width var(--t-fast) linear}

/* Terrain view: the pointer layer for orbiting, and the bar that names the place and leads back */
.tinput{position:absolute;inset:0;z-index:1;cursor:default;touch-action:none}.tinput.on-ground{cursor:none}
.tinput[hidden]{display:none}
.tinput:active,.tinput.on-ground:active{cursor:grabbing}
.tbar{position:absolute;left:72px;top:93px;z-index:6;display:flex;flex-direction:column;align-items:flex-start;gap:var(--s2);width:380px;max-width:calc(100% - 72px - var(--s4));font-family:var(--font-ui);color:var(--text)}
.tbar[hidden]{display:none}
.tback{flex:none;display:flex;align-items:center;gap:var(--s2);height:var(--hit);padding:0 var(--s4);background:var(--accent);border:0;border-radius:var(--r-outer);color:var(--accent-ink);font:600 16px var(--font-ui);cursor:pointer;transition:opacity var(--t-fast)}
.tback svg{width:14px;height:14px}
.tback:hover{opacity:.86}
.tback:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tinfo{display:flex;flex-direction:column;min-width:0;max-width:100%;line-height:1.4;text-shadow:0 0 3px var(--bg),0 0 8px var(--bg),0 0 12px var(--bg)}
.tinfo strong{font-weight:600;font-size:18px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tinfo span{font-size:13px;line-height:1.4;color:var(--text);font-variant-numeric:tabular-nums}

/* While the terrain view is open the parts that belong to the globe are away */
body.terrain .pins,body.terrain .card-lines,body.terrain .moon-target,body.terrain .card-terrain{display:none}
body.terrain .hero{cursor:default!important}
/* Change of view: the scene dips to black for a moment, the page around it stays */
.hero-world.veil::after{opacity:1;transition:opacity .3s ease}
@media(prefers-reduced-motion:reduce){.loading-track i,.hero-world.veil::after{transition:none}}

/* Time bar under the scene, in the system view and in the terrain view: Play/Pause, one hour back or on, the clock,
   speeds, a slider over the time span, and Start and Stop of the span. Everything about time and date is here; the
   sidebar has none of it. */
.timebar{--u:5.2px;position:absolute;left:50%;bottom:var(--s5);z-index:6;display:none;flex-direction:column;gap:var(--s2);width:min(920px,calc(100% - 2 * var(--s4)));transform:translateX(-50%);padding:var(--s3) var(--s4);background:var(--surface);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid var(--line);border-radius:var(--r-outer);color:var(--text);font:400 14px/1.4 var(--font-ui);font-variant-numeric:tabular-nums}
body.expanded .timebar,body.terrain .timebar{display:flex}
.tb-row{display:flex;align-items:center;gap:var(--s2)}
.tb-row small{color:var(--text-muted);font-size:13px}
.tb-now{margin-left:var(--s2);font-size:16px}
.tb-speeds{display:flex;gap:var(--s1);margin-left:auto}
.tb-speeds .pspeed{flex:none;width:56px;font-size:14px}
.tb-step{flex:none;height:var(--hit);padding:0 var(--s3);background:var(--field);border:1px solid transparent;border-radius:var(--r-outer);color:var(--text);font:500 14px var(--font-ui);font-variant-numeric:tabular-nums;white-space:nowrap;cursor:pointer;transition:border-color var(--t-fast),background var(--t-fast)}
.tb-step:hover{background:rgb(255 255 255 / .14)}
.tb-step:focus-visible{border-color:var(--accent);outline:2px solid var(--accent);outline-offset:2px}
#tb-scrub{-webkit-appearance:none;appearance:none;width:100%;height:24px;margin:0;background:none;cursor:pointer}
#tb-scrub::-webkit-slider-runnable-track{height:6px;border-radius:99px;background:linear-gradient(90deg,var(--text-muted) var(--p,0%),rgb(255 255 255 / .16) var(--p,0%))}
#tb-scrub::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;margin-top:-6px;border-radius:50%;border:0;background:var(--text);transition:transform var(--t-fast)}
#tb-scrub::-moz-range-track{height:6px;border-radius:99px;background:linear-gradient(90deg,var(--text-muted) var(--p,0%),rgb(255 255 255 / .16) var(--p,0%))}
#tb-scrub::-moz-range-thumb{width:18px;height:18px;border-radius:50%;border:0;background:var(--text)}
#tb-scrub:active::-webkit-slider-thumb{transform:scale(1.15)}
#tb-scrub:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-inner)}
.tb-ends{display:flex;justify-content:space-between;gap:var(--s3);color:var(--text-muted);font-size:13px}
/* Start and Stop of the time span (date and time, UTC) and Clear */
.tb-lab{flex:none;font-weight:500}.tb-span input+.tb-lab{margin-left:var(--s3)}
.tb-span input{flex:1.4;min-width:0;height:var(--hit);padding:0 var(--s2);background:var(--field);border:1px solid transparent;border-radius:var(--r-outer);outline:0;color:var(--text);color-scheme:dark;font:400 14px var(--font-ui);font-variant-numeric:tabular-nums;transition:border-color var(--t-fast)}
.tb-span input[type=time]{flex:1}
.tb-span input:focus-visible{border-color:var(--accent)}
.tb-span input[aria-invalid="true"]{border-color:var(--bad)}
.tb-span #p-clear{margin-left:var(--s3)}
/* Where the window is too narrow for time bar and legend side by side, the legend stands above the bar */
@media(max-width:1740px){body.expanded .legend,body.terrain .legend{bottom:calc(var(--s5) + 184px)}}
@media(prefers-reduced-motion:reduce){#tb-scrub::-webkit-slider-thumb{transition:none}}
/* Sun and Earth outside the picture: a label at the edge of the scene with an arrow towards the body (landing.js).
   Same surface as the hover box; under the panels, never in the way of the pointer. */
.offscreen{position:absolute;left:0;top:0;z-index:3;display:flex;align-items:center;gap:var(--s2);padding:var(--s1) var(--s3);background:var(--surface);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid var(--line);border-radius:var(--r-outer);color:var(--text);font:500 14px/1.5 var(--font-ui);white-space:nowrap;pointer-events:none}
.offscreen[hidden],.entering .offscreen{display:none}
.offscreen svg{flex:none;width:14px;height:14px}