/* My Telescope: a renter's dashboard. What can be seen at a glance first — the telescope's state and
   the night — then the panels, each a box of its own. */
.my-telescope {
  --ok: #7fd18a;
  --warn: #d6ac4b;
  --bad: #f2a6a0;
}
.scope-none,
.scope-help {
  color: var(--muted);
}
.scope-help {
  margin-top: 28px;
  font-size: var(--text-sm);
}
.dash + .dash {
  margin-top: 64px;
}
.dash-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 18px 32px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.dash-eyebrow {
  margin: 0 0 6px;
  color: var(--gold);
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.dash-title {
  margin: 0;
  font-size: var(--text-2xl);
  line-height: 1.2;
}
.dash-clock {
  color: var(--muted);
  font-size: var(--text-sm);
  text-align: right;
}
.dash-clock span {
  display: block;
}
.dash-clock b {
  color: var(--text);
  font-size: var(--text-2xl);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* The state chips: a light and a word each. */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  font-size: var(--text-sm);
}
.chip i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
}
.chip[data-tone="ok"] i {
  background: var(--ok);
  box-shadow: 0 0 6px rgba(127, 209, 138, 0.7);
}
.chip[data-tone="warn"] i {
  background: var(--warn);
}
.chip[data-tone="bad"] i {
  background: var(--bad);
}
.chip[data-tone="soon"] {
  border-style: dashed;
  color: var(--muted);
}
.chip small {
  color: var(--muted);
}

/* The night's dark hours, and now on them. */
.night {
  margin-top: 22px;
}
.night-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 16px;
  color: var(--muted);
  font-size: var(--text-sm);
}
.night-line b {
  color: var(--text);
  font-weight: 500;
}
.night-bar {
  position: relative;
  height: 12px;
  margin: 8px 0 6px;
  border: 1px solid #3d4f73;
  border-radius: 6px;
  background: linear-gradient(90deg, #4a5a7d 0%, #24345a 8%, #142144 50%, #24345a 92%, #4a5a7d 100%);
}
.night-bar span {
  position: absolute;
  top: -5px;
  width: 3px;
  height: 20px;
  margin-left: -1px;
  border-radius: 2px;
  background: var(--gold);
  box-shadow: 0 0 8px var(--gold);
}
.night-ticks {
  position: relative;
  display: flex;
  justify-content: space-between;
  height: 1.4em;
  color: var(--muted);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}
.night-ticks span[style] {
  position: absolute;
  transform: translateX(-50%);
}

/* The panels. */
.my-telescope .panel {
  margin-top: 28px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.015), transparent);
}
.my-telescope .panel > header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px 12px;
  margin-bottom: 16px;
}
.my-telescope .panel h2 {
  margin: 0;
  font-size: var(--text-lg);
}
.my-telescope .panel > header a,
.my-telescope .panel > header small {
  color: var(--muted);
  font-size: var(--text-sm);
}
.soon {
  padding: 3px 10px;
  border: 1px dashed var(--gold);
  border-radius: 999px;
  color: var(--gold);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Tonight: the sky beside its readings. */
.tonight {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 22px;
}
.tonight:not(:has(.sky)) {
  grid-template-columns: 1fr;
}
.sky {
  margin: 0;
}
.sky img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 12px;
  background: #000;
  object-fit: cover;
}
.sky figcaption {
  margin-top: 8px;
  color: var(--muted);
  font-size: var(--text-xs);
}
.tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 10px;
  margin: 0;
}
.tile {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.18);
}
.tile dt {
  color: var(--muted);
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.tile dd {
  margin: 4px 0 0;
  font-size: var(--text-xl);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.tile dd small {
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 400;
}
.tile[data-tone="ok"] dd {
  color: var(--ok);
}
.tile[data-tone="warn"] dd {
  color: var(--warn);
}
.tile[data-tone="bad"] dd {
  color: var(--bad);
}
.forecast {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Imaging: frames beside the imaging software's state, then the night's guiding and focus. */
.imaging {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 22px;
}
.frames {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.frame {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border: 1px dashed #44473e;
  border-radius: 10px;
  background: repeating-linear-gradient(45deg, #1b1c19 0 10px, #1f201c 10px 20px);
  color: #5b5f53;
  font-size: var(--text-xs);
}
.nina,
.now-list {
  display: grid;
  align-content: start;
  margin: 0;
}
.nina div,
.now-list div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--text-sm);
}
.nina dt,
.now-list dt {
  color: var(--muted);
}
.nina dd,
.now-list dd {
  margin: 0;
  text-align: right;
}
.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--muted);
}
.dot[data-tone="ok"] {
  background: var(--ok);
  box-shadow: 0 0 6px rgba(127, 209, 138, 0.7);
}
.dot[data-tone="warn"] {
  background: var(--warn);
}
.dot[data-tone="bad"] {
  background: var(--bad);
}
/* A frame the telescope took, linked to its picture. */
.frame.shot {
  display: block;
  margin: 0;
  border: 0;
  background: none;
  color: var(--muted);
  aspect-ratio: auto;
}
.frame.shot img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 10px;
  background: #000;
  object-fit: cover;
}
.frame.shot figcaption {
  margin-top: 6px;
  font-size: var(--text-xs);
  line-height: 1.4;
}

/* Telescope now: where it points, from above and from the side, beside its state. */
.now {
  display: grid;
  grid-template-columns: 260px 170px minmax(0, 1fr);
  align-items: center;
  gap: 26px;
}
.now-faint .pose {
  opacity: 0.45;
}
.pose {
  margin: 0;
  text-align: center;
}
.pose svg {
  display: block;
  width: 100%;
  height: auto;
}
.pose figcaption {
  margin-top: 4px;
  color: var(--muted);
  font-size: var(--text-xs);
}
.pose .horizon {
  fill: #10182b;
  stroke: #3d4f73;
  stroke-width: 1.5;
}
.pose .ring,
.pose-alt .arc {
  fill: none;
  stroke: #2a3654;
  stroke-dasharray: 3 4;
}
.pose-alt .arc {
  stroke: #3d4f73;
  stroke-width: 1.5;
}
.pose .meridian {
  stroke: #2a3654;
}
.pose .cardinal {
  fill: var(--softgold);
  font-size: 15px;
  font-weight: 600;
  text-anchor: middle;
}
.pose .ringlabel {
  fill: #6b7590;
  font-size: 10px;
}
.pose .zenith {
  fill: #6b7590;
}
.pose .tube {
  stroke: var(--gold);
  stroke-width: 3;
  stroke-linecap: round;
}
.pose .aim {
  fill: var(--gold);
}
.pose .aim-halo {
  fill: rgba(214, 172, 75, 0.25);
}
.pose .aim-label {
  fill: var(--text);
  font-size: 13px;
  font-weight: 500;
}
.pose-alt .ground {
  stroke: #55594d;
}

/* The picker, for someone with more than one telescope. */
/* The page title, and beside it the telescope shown when there is more than one. */
.scope-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 24px;
  margin-bottom: 28px;
}
.scope-top h1 {
  margin: 0;
}
.scope-pick {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: var(--text-sm);
}
.scope-pick select {
  min-width: 200px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-size: var(--text-base);
}
.soon-note {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: var(--text-sm);
}
.charts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 20px;
}
.chart-box {
  margin: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.18);
}
.chart-box figcaption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  font-size: var(--text-sm);
}
.chart-box figcaption span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: var(--text-xs);
}
.k {
  display: inline-block;
  width: 10px;
  height: 3px;
  border-radius: 2px;
}
.k.ra {
  background: #8fb4f2;
}
.k.dec {
  background: #f2a6a0;
}
.chart {
  display: block;
  width: 100%;
  height: 140px;
}
/* Faint until the telescope sends its own. */
.chart.faint {
  opacity: 0.3;
}
.chart-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  color: var(--muted);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}
.chart .axis {
  stroke: #55594d;
}
.chart .ra,
.chart .dec {
  fill: none;
  stroke-width: 1.6;
}
.chart .ra {
  stroke: #8fb4f2;
}
.chart .dec {
  stroke: #f2a6a0;
}
.chart.hfr circle {
  fill: var(--softgold);
}
.data-link {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.data-link p {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-sm);
}
.data-link p b {
  display: block;
  color: var(--text);
  font-size: var(--text-base);
  font-weight: 500;
}
/* Automated imaging, at the top of a rental it is switched on for. */
.data-link.auto-imaging {
  margin-top: 18px;
  border-color: var(--gold);
  background: rgba(214, 172, 75, 0.08);
}
.data-link.auto-imaging p {
  flex: 1 1 320px;
}

/* The telescope, small: its picture, the four figures that frame an image, the rest on request. */
.scope {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: start;
  gap: 22px;
}
.scope:not(:has(> img)) {
  grid-template-columns: 1fr;
}
.scope > img {
  width: 150px;
  height: 150px;
  border-radius: 10px;
  background: #fff;
  object-fit: cover;
}
.keys {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}
.keys div {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.keys dt {
  color: var(--muted);
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.keys dd {
  margin: 4px 0 0;
  font-size: var(--text-lg);
  font-weight: 500;
}
.scope-line {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: var(--text-sm);
}
.full {
  margin-top: 12px;
}
.full summary {
  color: var(--softgold);
  font-size: var(--text-sm);
  cursor: pointer;
}
.spec {
  width: 100%;
  margin-top: 10px;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.spec th,
.spec td {
  padding: 7px 10px 7px 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.spec th {
  width: 130px;
  color: var(--muted);
  font-weight: 400;
}

@media (max-width: 820px) {
  .tonight,
  .imaging,
  .charts {
    grid-template-columns: 1fr;
  }
  .now {
    grid-template-columns: 1fr 1fr;
  }
  .now-list {
    grid-column: 1 / -1;
  }
  .keys {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .scope {
    grid-template-columns: 1fr;
  }
  .dash-clock {
    text-align: left;
  }
}