/* Yuniverse instrument pages (/sky/, /birth-sky/). Builds on tokens.css + yuniverse.css.
   Rules kept from the home: silver = measured, gold = told, ember = the one action colour, eye-green = focus/live/
   selection only; radii are 14px panels and pill controls; mono only for measured numbers. */

[hidden] { display: none !important; }       /* component display rules must never override hidden */

/* ---------- the instrument: a full-height sky with a few plates on it ---------- */
.inst { position: relative; height: max(560px, 100dvh); overflow: hidden; isolation: isolate; background: var(--night); }
.inst__sky { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.inst__sky:active { cursor: grabbing; }
.inst__sky:focus-visible { outline: 2px solid var(--eye); outline-offset: -4px; border-radius: 0; }

.plate { position: absolute; left: var(--gut); top: 5.4rem; max-width: min(34rem, 62vw); pointer-events: none; }
.plate > * { pointer-events: auto; }
.plate__place { font: 400 clamp(2rem, 1.3rem + 2.6vw, 3.4rem)/1.05 var(--display); margin: 0; }
.plate__place > span:first-child { font-family: var(--story); font-style: italic; color: var(--ink-dim); }
.plate { text-shadow: 0 1px 12px rgba(9, 7, 13, .85); }
.plate__name { font: inherit; color: var(--ink); background: none; border: 0; padding: 0 0 .1rem; cursor: pointer; text-decoration: underline; text-decoration-color: var(--line-2); text-decoration-thickness: 2px; text-underline-offset: .18em; }
.plate__name:hover { text-decoration-color: var(--silver); }
.plate__coords { margin-top: .5rem; font: var(--t-xs)/1.5 var(--data); color: var(--silver); }
.plate__when { margin-top: .15rem; font-size: var(--t-s); color: var(--ink-dim); }
.plate__mode { color: var(--ink-faint); }

.tools { position: absolute; right: var(--gut); top: 5.4rem; display: grid; gap: .7rem; justify-items: end; }
.layers { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: flex-end; border: 0; margin: 0; padding: 0; }
.layers label { display: inline-flex; align-items: center; gap: .4rem; min-height: 36px; padding: .35rem .75rem; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: rgba(20, 15, 28, .72); font-size: var(--t-xs); color: var(--ink-dim); cursor: pointer; }
.layers input { appearance: none; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--silver-dim); margin: 0; }
.layers input:checked { background: var(--silver); border-color: var(--silver); }
.layers label:has(input:checked) { color: var(--ink); border-color: var(--silver-dim); }
.layers label:has(input:focus-visible) { outline: 2px solid var(--eye); outline-offset: 2px; }
[data-lens="story"] .layers { opacity: .55; }

/* identification card */
.card { position: absolute; left: var(--gut); bottom: 1.4rem; width: min(22rem, calc(100% - 2 * var(--gut))); padding: 1.1rem 1.2rem 1.2rem; border-radius: var(--r); background: rgba(20, 15, 28, .9); border: 1px solid var(--line-2); box-shadow: 0 20px 60px rgba(4, 2, 8, .6); }
.card__x { position: absolute; right: .5rem; top: .5rem; width: 36px; height: 36px; border-radius: 50%; border: 0; background: none; color: var(--ink-dim); font-size: 1.4rem; cursor: pointer; }
.card__x:hover { color: var(--ink); background: var(--dusk-2); }
.card__name { font: 400 1.7rem/1.1 var(--display); padding-right: 2rem; }
.card__kind { color: var(--ink-dim); font-size: var(--t-s); margin-top: .2rem; }
.card__facts { margin: .9rem 0 0; display: grid; gap: .3rem; }
.card__facts div { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--t-s); }
.card__facts dt { color: var(--ink-dim); }
.card__facts dd { margin: 0; font: var(--t-xs)/1.7 var(--data); color: var(--silver); text-align: right; }
.card__story { margin-top: .8rem; padding-top: .7rem; border-top: 1px solid var(--gold-dim); font: italic var(--t-s)/1.45 var(--story); color: var(--gold); }
.inst[data-lens="sky"] .card__story { display: none; }

/* ---------- the dial: time ---------- */
.dial { background: var(--dusk); border-top: 1px solid var(--line); padding: 1.1rem 0 1.4rem; }
.dial__in { display: grid; gap: 1.6rem; }
.ribbon { position: relative; height: 46px; margin-bottom: 1.1rem; }
.ribbon__bands { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: var(--r); }
.ribbon__range { position: absolute; inset: -6px 0; width: 100%; height: calc(100% + 12px); margin: 0; appearance: none; background: transparent; cursor: ew-resize; }
.ribbon__range::-webkit-slider-runnable-track { height: 100%; background: transparent; }
.ribbon__range::-moz-range-track { height: 100%; background: transparent; }
.ribbon__range::-webkit-slider-thumb { appearance: none; width: 6px; height: 58px; border-radius: 3px; background: var(--ink); box-shadow: 0 0 0 2px var(--night); }
.ribbon__range::-moz-range-thumb { width: 6px; height: 58px; border: 0; border-radius: 3px; background: var(--ink); box-shadow: 0 0 0 2px var(--night); }
.ribbon__range:focus-visible { outline: 2px solid var(--eye); outline-offset: 4px; border-radius: var(--r); }
.ribbon__ticks { position: absolute; left: 0; right: 0; top: 100%; height: 1.2rem; pointer-events: none; }
.ribbon__ticks span { position: absolute; top: .35rem; transform: translateX(-50%); font: .7rem/1 var(--data); color: var(--ink-faint); }
.ribbon__ticks span:first-child { transform: none; }
.dial__row { display: flex; flex-wrap: wrap; align-items: end; gap: .75rem 1rem; }
.dial__msg { flex-basis: 100%; color: var(--gold); font-size: var(--t-s); min-height: 1.4em; margin: 0; }
.dial__msg:empty { min-height: 0; }

.field { display: grid; gap: .3rem; font-size: var(--t-xs); color: var(--ink-dim); }
.field input, .field select { min-height: 44px; padding: .5rem .8rem; border-radius: 10px; border: 1px solid var(--line-2); background: var(--night); color: var(--ink); font: 500 var(--t-m)/1.2 var(--ui); color-scheme: dark; }
.field input:focus-visible, .field select:focus-visible,
.field input[type="date"]:focus, .field input[type="time"]:focus { outline: 2px solid var(--eye); outline-offset: 1px; border-color: var(--eye); }   /* date/time sub-fields do not always report :focus-visible */
.btn--sm { min-height: 44px; padding: .55rem 1.1rem; }
.btn--ghost[aria-pressed="true"] { border-color: var(--ink); }

/* ---------- this night ---------- */
.night { padding: clamp(3rem, 8vw, 5.5rem) 0; }
.night__in { display: grid; gap: 3rem; }
@media (min-width: 960px) { .night__in { grid-template-columns: 1.25fr 1fr; gap: 4rem; } }
.night__title { font: 400 var(--t-xl)/1.15 var(--display); margin-bottom: 1.2rem; }
.night__hint { color: var(--ink-dim); font-size: var(--t-s); margin: -.6rem 0 1rem; }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.timeline li { display: grid; grid-template-columns: 4.2rem 1fr; column-gap: 1rem; align-items: baseline; padding: .45rem 0; }
.timeline time { font: var(--t-s)/1.4 var(--data); color: var(--silver); }
.timeline__go { justify-self: start; background: none; border: 0; padding: 0; color: var(--ink); font: 500 var(--t-m)/1.4 var(--ui); cursor: pointer; text-align: left; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; min-height: 24px; }
.timeline__go:hover { text-decoration-color: var(--silver-dim); }
.timeline li > span { grid-column: 2; color: var(--ink-dim); font-size: var(--t-s); }
.uplist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .5rem; }
.uplist button { width: 100%; min-height: 56px; display: grid; gap: .1rem; text-align: left; padding: .6rem .8rem; border-radius: 10px; border: 1px solid var(--line); background: var(--dusk); color: var(--ink); cursor: pointer; }
.uplist button:hover { border-color: var(--silver-dim); }
.uplist button[data-kind="body"] { border-color: var(--line-2); }
.uplist b { font-weight: 600; font-size: var(--t-s); }
.uplist span { font-size: var(--t-xs); color: var(--ink-dim); }
.uplist__none { color: var(--ink-dim); font-size: var(--t-s); grid-column: 1 / -1; }

.method { padding: 0 0 clamp(3rem, 8vw, 5rem); }
.method__in { max-width: 60rem; }
.method h2 { font: 400 var(--t-l)/1.2 var(--display); margin-bottom: .6rem; }
.method p { color: var(--ink-dim); max-width: 65ch; margin-bottom: .6rem; }

/* ---------- place dialog + combobox ---------- */
.placebox { width: min(30rem, calc(100% - 2rem)); padding: 0; border-radius: var(--r-lg); border: 1px solid var(--line-2); background: var(--dusk); color: var(--ink); }
.placebox::backdrop { background: rgba(4, 2, 8, .7); backdrop-filter: blur(3px); }
.placebox__in { display: grid; gap: 1rem; padding: 1.4rem; }
.placebox h2 { font: 400 var(--t-xl)/1.1 var(--display); }
.placebox__note { color: var(--ink-dim); font-size: var(--t-xs); margin-top: -.4rem; }
.placebox__actions { display: flex; justify-content: flex-end; }
.combo { position: relative; display: grid; gap: .35rem; }
.combo label { font-size: var(--t-xs); color: var(--ink-dim); }
.combo input { min-height: 48px; padding: .6rem .9rem; border-radius: 10px; border: 1px solid var(--line-2); background: var(--night); color: var(--ink); font: 500 var(--t-m)/1.2 var(--ui); width: 100%; }
.combo input:focus-visible { outline: 2px solid var(--eye); outline-offset: 1px; border-color: var(--eye); }
.combo__list { list-style: none; margin: .2rem 0 0; padding: .3rem; border-radius: 12px; border: 1px solid var(--line-2); background: var(--night); max-height: 16rem; overflow-y: auto; position: absolute; top: 100%; left: 0; right: 0; z-index: 5; box-shadow: 0 20px 50px rgba(4, 2, 8, .7); }
.combo__list li { display: grid; gap: .05rem; padding: .55rem .7rem; border-radius: 8px; cursor: pointer; }
.combo__list li b { font-weight: 600; }
.combo__list li span { font-size: var(--t-xs); color: var(--ink-dim); }
.combo__list li[aria-selected="true"], .combo__list li:hover { background: var(--dusk-2); outline: 1px solid var(--silver-dim); }
.combo__status { font-size: var(--t-xs); color: var(--ink-dim); min-height: 1em; }

/* ---------- plain document pages (/sources/) ---------- */
.top--solid { position: relative; border-bottom: 1px solid var(--line); }
.doc { padding-top: clamp(2.5rem, 6vw, 4.5rem); padding-bottom: clamp(3rem, 8vw, 5rem); max-width: 54rem; }
.doc h1 { font: 400 var(--t-2xl)/1.05 var(--display); }
.doc h2 { font: 400 var(--t-xl)/1.15 var(--display); margin: 2.6rem 0 1rem; }
.doc p { color: var(--ink-dim); max-width: 68ch; margin-bottom: .8rem; }
.doc__lead { font-size: var(--t-l); margin-top: 1.2rem; }
.doc__sky { color: var(--silver); } .doc__story { color: var(--gold); }
.doc__list { margin: 0; }
.doc__list div { display: grid; gap: .25rem 1.5rem; padding: .85rem 0; border-top: 1px solid var(--line); }
@media (min-width: 720px) { .doc__list div { grid-template-columns: 13rem 1fr; } }
.doc__list dt { font-weight: 600; }
.doc__list dd { margin: 0; color: var(--ink-dim); }
.doc__bul { color: var(--ink-dim); padding-left: 1.2rem; max-width: 68ch; display: grid; gap: .5rem; }
.doc__licence { white-space: pre-wrap; font: .78rem/1.55 var(--data); color: var(--ink-faint); background: var(--dusk); border: 1px solid var(--line); border-radius: var(--r); padding: 1rem 1.1rem; overflow-wrap: anywhere; }

/* ---------- phones ---------- */
@media (max-width: 959px) {
  .inst { height: 78svh; min-height: 520px; }
  .plate { top: 4.6rem; max-width: calc(100% - 2 * var(--gut)); }
  .tools { top: auto; bottom: .9rem; left: var(--gut); right: var(--gut); justify-items: stretch; }
  .tools .lens { justify-self: start; }
  .layers { justify-content: flex-start; }
  .card { bottom: .9rem; z-index: 2; }
}
@media (max-width: 520px) { .ribbon__ticks span:nth-child(even) { display: none; } }   /* 6-hour labels on phones */
@media (max-width: 380px) {
  .layers label { padding: .3rem .6rem; }
  .lens label { padding: .4rem .8rem; }
}