/* Tool-specific layout only. Faces, buttons, tags, fields, the title and the
   toolbar come from ../assets/base.css over the vendored system. */

:root {
  /* The chart's own pens. They are named here rather than written into each
     rule so the figure is restyled in one place, and every one of them is a
     system value rather than a literal: the sky follows the mode like every
     other surface on the site. On paper the stars are ink; on an unlit sheet
     the ground and the ink change places and they are light. That is the whole
     dark-mode story and it needed no second implementation.

     No plate appears anywhere on the chart. This section has already spent its
     one licensed breach on the full bleed, and law 00 is explicit that a
     second one cancels the first rather than adding to it. The selected object
     is marked by shape — four ticks and a gap — not by colour. */
  --sky-ground: var(--pp-paper);
  --sky-ink: var(--pp-ink);
  --sky-rule: var(--pp-edge);
  --sky-line: color-mix(in srgb, var(--pp-ink) 34%, transparent);
  --sky-quiet: color-mix(in srgb, var(--pp-ink) 22%, transparent);
  --sky-mark: var(--pp-ink);
}

.tool-head { padding-bottom: var(--pp-space-3); }

/* The place field wants to be wide: a place name is longer than a number. */
.toolbar .place { min-width: 15ch; flex: 1 1 15ch; }

.toolbar .switches {
  flex-wrap: wrap;
  gap: var(--pp-space-2) var(--pp-space-3);
}

.check {
  display: inline-flex;
  align-items: center;
  gap: var(--pp-space-1);
  font: var(--pp-size-mono) / 1 var(--pp-font-mono);
  letter-spacing: var(--w-track-mono);
  white-space: nowrap;
}

.place-note {
  margin: var(--pp-space-2) 0 0;
  font: var(--pp-size-mono) / 1.4 var(--pp-font-mono);
  color: var(--pp-faint);
  min-height: 1.2em;
}

.alternatives {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pp-space-1);
  margin-top: var(--pp-space-1);
}

.alternatives:empty { display: none; }

.alternatives .btn-ghost.is-on {
  background: var(--pp-ink);
  color: var(--pp-paper);
}

/* ---- the chart ------------------------------------------------------ */

/* Two columns: the sky, and the column that tells you what is in it. The
   second one used to arrive only when something was selected, on the argument
   that an empty column is not worth narrowing the chart for. It is never empty
   now -- the finder and the list of what is above the horizon are the answer
   to "what can I see", and that question is asked before anything is clicked,
   so the column is permanent. */
#stage {
  display: grid;
  gap: var(--pp-space-5) var(--pp-space-5);
  justify-items: center;
  padding: 0 var(--pp-gutter) var(--pp-space-4);
  max-width: var(--pp-page-max);
  margin: 0 auto;
}

.sky-column,
.side {
  width: 100%;
  max-width: min(100%, 760px);
  display: flex;
  flex-direction: column;
}

.sky-column { gap: var(--pp-space-3); }
.side { gap: var(--pp-space-4); }

.sky-holder {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  /* Never taller than the window minus the chrome above it, so the whole sky
     is on screen without a scroll. */
  max-height: min(72vh, 720px);
  border: var(--pp-rule-structure) solid var(--pp-edge);
  background: var(--sky-ground);
  /* The chart ends at its frame. The compass letters and the hover label are
     placed from script and both can be asked for a point past the edge. */
  overflow: hidden;
}

.sky-holder canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: grab;
}

.sky-holder canvas:active { cursor: grabbing; }

.sky-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  font: var(--pp-size-mono) / 1 var(--pp-font-mono);
  color: var(--pp-faint);
}

.compass span {
  position: absolute;
  transform: translate(-50%, -50%);
  font: 700 var(--pp-size-mono) / 1 var(--pp-font-mono);
  letter-spacing: var(--w-track-mono);
  color: var(--pp-muted);
  background: var(--sky-ground);
  padding: 2px 3px;
  pointer-events: none;
}

/* The name under the pointer. It follows the cursor, so it is placed from
   script; everything here is what it looks like once it is there. */
.sky-hover {
  position: absolute;
  margin: 0;
  padding: 3px 7px;
  transform: translate(14px, -50%);
  pointer-events: none;
  white-space: nowrap;
  font: var(--pp-size-mono) / 1.3 var(--pp-font-mono);
  letter-spacing: var(--w-track-mono);
  color: var(--pp-ink);
  background: var(--sky-ground);
  border: var(--pp-rule-line) solid var(--pp-line);
  border-radius: var(--pp-radius-sm);
}

.sky-hover.is-left { transform: translate(calc(-100% - 14px), -50%); }
.sky-hover em { font-style: normal; color: var(--pp-faint); }

/* ---- the view bar --------------------------------------------------- */

.view-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pp-space-2) var(--pp-space-4);
}

.view-hint {
  margin: 0;
  font: var(--pp-size-label) / 1.4 var(--pp-font-mono);
  letter-spacing: var(--w-track-mono);
  color: var(--pp-faint);
}

.view-bar .readout { min-width: 5.5ch; justify-content: center; }

/* ---- the finder and the list ---------------------------------------- */

.finder .field { flex: 1 1 12ch; min-width: 0; }

.find-results:empty { display: none; }

.up-now { display: contents; }
.up-now .section-label { margin: 0; }

.up-head {
  margin: var(--pp-space-3) 0 0;
  font: var(--pp-size-label) / 1.6 var(--pp-font-mono);
  letter-spacing: var(--w-track-label);
  text-transform: uppercase;
  color: var(--pp-faint);
}

.up-head:first-child { margin-top: 0; }

.up-empty {
  margin: 0;
  font: var(--pp-size-mono) / 1.5 var(--pp-font-mono);
  color: var(--pp-faint);
}

/* One row idiom for both lists: a name, where to look, and how bright. The
   whole row is the control, because the name is the thing you want to press
   and a separate button beside it would be a second target for one act. */
.sky-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content 4.5ch;
  align-items: baseline;
  gap: var(--pp-space-2) var(--pp-space-3);
  width: 100%;
  text-align: left;
  padding: var(--pp-space-2) var(--pp-space-2);
  border: 0;
  border-top: var(--pp-rule-hairline) solid var(--pp-hair);
  background: none;
  color: var(--pp-ink);
  font: var(--pp-size-mono) / 1.4 var(--pp-font-body);
  cursor: pointer;
}

.sky-row:hover { background: var(--pp-tint); }
.sky-row:active { transform: var(--w-press); }

/* Selected, in ink -- the same mark the place alternatives use. The chart's
   own selection is carried by shape rather than colour because the chart has
   no second breach to spend; a list is ordinary page furniture and this is
   the page's ordinary way of saying "this one". */
.sky-row.is-on { background: var(--pp-ink); color: var(--pp-paper); }
.sky-row.is-on .sky-row-where,
.sky-row.is-on .sky-row-mag,
.sky-row.is-on em { color: var(--pp-paper); }

.sky-row-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sky-row-name em { font-style: normal; color: var(--pp-faint); }

.sky-row-where,
.sky-row-mag {
  font-family: var(--pp-font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--pp-muted);
  white-space: nowrap;
}

.sky-row-mag { text-align: right; }

/* ---- the panel ------------------------------------------------------ */

.detail {
  position: relative;
  width: 100%;
  border: var(--pp-rule-structure) solid var(--pp-edge);
  background: var(--pp-surface);
  padding: var(--pp-space-4);
}

.detail-close {
  position: absolute;
  top: 0;
  right: 0;
  width: var(--pp-target-compact);
  height: var(--pp-target-compact);
  border: 0;
  background: none;
  color: var(--pp-muted);
  font: 400 20px / 1 var(--pp-font-mono);
  cursor: pointer;
}

.detail-close:hover { color: var(--pp-ink); }

.detail-kind {
  margin: 0;
  font: var(--pp-size-label) / 1 var(--pp-font-mono);
  letter-spacing: var(--w-track-label);
  text-transform: uppercase;
  color: var(--pp-faint);
}

.detail-kind:empty { display: none; }

.detail-name {
  margin: var(--pp-space-1) 0 0;
  font: var(--pp-weight-strong) var(--pp-size-subhead) / 1.1 var(--pp-font-display);
}

.detail-sub {
  margin: var(--pp-space-1) 0 0;
  font: var(--pp-size-mono) / 1.4 var(--pp-font-body);
  color: var(--pp-muted);
}

.detail-sub:empty { display: none; }

.detail-rows {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--pp-space-1) var(--pp-space-4);
  margin: var(--pp-space-3) 0 0;
  border-top: var(--pp-rule-hairline) solid var(--pp-hair);
  padding-top: var(--pp-space-3);
}

.detail-rows dt {
  font: var(--pp-size-label) / 1.5 var(--pp-font-mono);
  letter-spacing: var(--w-track-label);
  color: var(--pp-faint);
}

.detail-rows dd {
  margin: 0;
  font: var(--pp-size-mono) / 1.5 var(--pp-font-mono);
  font-variant-numeric: tabular-nums;
}

/* ---- the foot ------------------------------------------------------- */

.status-line {
  margin: 0 0 var(--pp-space-5);
  font: var(--pp-size-mono) / 1.5 var(--pp-font-mono);
  color: var(--pp-muted);
  border-top: var(--pp-rule-hairline) solid var(--pp-hair);
  padding-top: var(--pp-space-2);
}

.notes p { max-width: var(--pp-measure); }

.sources {
  list-style: none;
  margin: var(--pp-space-3) 0 var(--pp-space-6);
  padding: 0;
  max-width: var(--pp-measure);
}

.sources li {
  display: grid;
  /* max-content, not a ch measure: these labels carry letter-spacing, so a
     column counted in characters is narrower than the word that goes in it
     and "DISTANCES" ends up touching the sentence beside it. */
  grid-template-columns: max-content 1fr;
  gap: var(--pp-space-3);
  padding: var(--pp-space-2) 0;
  border-top: var(--pp-rule-hairline) solid var(--pp-hair);
  font: var(--pp-size-mono) / 1.5 var(--pp-font-body);
}

.sources li span {
  font: var(--pp-size-label) / 1.7 var(--pp-font-mono);
  letter-spacing: var(--w-track-label);
  text-transform: uppercase;
  color: var(--pp-faint);
}

/* ---- wide ----------------------------------------------------------- */

@media (min-width: 62rem) {
  #stage {
    grid-template-columns: minmax(0, 1fr) 23rem;
    align-items: start;
    justify-items: stretch;
  }

  .sky-column,
  .side { max-width: 100%; }

  .sky-holder { max-height: min(78vh, 820px); }
}

@media (max-width: 34rem) {
  .sources li { grid-template-columns: 1fr; gap: 2px; }
  .detail { padding: var(--pp-space-3); }

  /* Let the groups pack rather than giving each one a row of its own. On a
     phone every row of chrome is a row the sky does not get, and the sky is
     what the page is for. */
  .toolbar { gap: var(--pp-space-2) var(--pp-space-3); }
  .toolbar .place { flex: 1 1 9ch; min-width: 9ch; }
  .toolbar .group { flex-wrap: wrap; }

  /* The place and the hour each earn a line. Everything else shares. */
  .toolbar .group:nth-child(1),
  .toolbar .group:nth-child(2) { width: 100%; }

  .sky-holder { max-height: none; }
  .view-hint { display: none; }
}