/* ==========================================================================
   AstroChris — object.css
   Loaded on /object/:designation (after main.css AND photo.css) and on
   /objects (after main.css only).

   The object page deliberately loads photo.css as well: it reuses .shot,
   .photo-layout, .photo-main, .photo-side, .photo-head and .photo-designation
   wholesale rather than inventing a second two-column article grid. This file
   adds only what neither stylesheet has:

     1. Object hero (the photo-page .shot, made clickable)
     2. Captures section spacing
     3. The best-months bar chart
     4. Observing panel controls
     5. /objects — stats, blurb, catalogue tile grid
     6. Reduced motion and print

   Tokens only — no literal colours. See DESIGN.md §9.
   ========================================================================== */

/* ------------------------------------------------------- 1. Object hero */
/* Unlike a photo page the hero here is a link to the capture it came from, so
   it needs a focus ring and a caption the .shot rules do not provide. */

.object-hero {
  margin-bottom: var(--space-md);
}

.object-hero__link {
  display: block;
  line-height: 0;
}

.object-hero__link:focus-visible {
  outline-offset: -4px;
}

.object-hero__caption {
  padding: var(--space-2xs) var(--space-sm);
  text-align: center;
  color: var(--text-dim);
  font-size: var(--step--1);
}

.object-hero__caption a {
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--border-strong);
}

.object-hero__caption a:hover {
  color: var(--accent-strong);
  border-bottom-color: var(--accent-strong);
}

/* --------------------------------------------------- 2. Captures section */

.object-captures {
  margin-top: var(--space-lg);
}

.object-captures .section__head {
  margin-bottom: var(--space-sm);
}

/* ---------------------------------------------------- 3. Best months bar */
/* Twelve bars, one per month, height driven by --month-score (0–1) set inline
   by the renderer. The colour says how good the month is; the height says how
   high the target actually gets, normalised against the whole sky so two
   objects can be compared by eye. */

.months {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: end;
  gap: 3px;
  margin: 0 0 var(--space-sm);
  padding: 0;
  list-style: none;
  height: 5.5rem;
}

.month {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-3xs);
  height: 100%;
  min-width: 0;
}

.month__bar {
  display: block;
  width: 100%;
  /* The label row and its gap own ~1.1rem of the track; the bar gets the rest,
     scaled by --month-score. A score of 1 therefore fills the track exactly. */
  height: calc(var(--month-score, 0) * (100% - 1.1rem));
  min-height: 2px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: var(--border-strong);
  transition: height var(--transition), background-color var(--transition);
}

.month__label {
  font-size: 0.6875rem;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

/* The four ratings. Only "best" gets the accent — if every bar were warm the
   chart would say nothing. */
.month--best .month__bar {
  background: var(--accent);
}

.month--best .month__label {
  color: var(--accent);
}

.month--good .month__bar {
  background: var(--accent-line);
}

.month--low .month__bar {
  background: var(--border-strong);
}

.month--none .month__bar {
  background: var(--border);
  min-height: 1px;
}

/* ------------------------------------------- 4. Observing panel controls */

.observing__summary {
  margin: 0 0 var(--space-sm);
  color: var(--text);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.observing__lat {
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border);
}

.observing__lat .input {
  max-width: 8rem;
}

.observing__note {
  margin: var(--space-2xs) 0 0;
  font-size: var(--step--1);
  line-height: 1.45;
}

/* Set by js/object.js once the visitor's own latitude is in use, so the panel
   can say so without the server having to guess. */
.observing--custom .observing__summary::after {
  content: ' Your latitude.';
  color: var(--text-dim);
}

/* ------------------------------------------------------------ 5. /objects */

.objects-stats {
  margin-top: var(--space-md);
  max-width: 34rem;
}

.objects-blurb {
  max-width: 46rem;
  margin: 0 0 var(--space-sm);
  font-size: 0.9375rem;
  line-height: 1.55;
}

/* The catalogue map: 110 Messier tiles have to be scannable at a glance, so
   they are small, dense and uniform. auto-fill rather than a fixed count so it
   collapses to two columns on a phone without a media query. */
.object-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr));
  gap: var(--space-3xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.object-tile__link {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1px;
  height: 100%;
  padding: var(--space-2xs) var(--space-xs);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--text-muted);
  text-decoration: none;
  transition: border-color var(--transition), background-color var(--transition),
    color var(--transition);
}

.object-tile__link:hover {
  border-color: var(--border-strong);
  background: var(--surface-2);
  color: var(--text);
}

.object-tile__key {
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.object-tile__name {
  font-size: var(--step--1);
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A tile with captures is a page worth visiting: accent edge, accent key, and
   the count in the corner. This grid doubles as a progress map. */
.object-tile--shot .object-tile__link {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--text);
}

.object-tile--shot .object-tile__key {
  color: var(--accent-strong);
}

.object-tile--shot .object-tile__link:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.object-tile__count {
  position: absolute;
  top: var(--space-3xs);
  right: var(--space-3xs);
  min-width: 1.15rem;
  padding: 0 0.25rem;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1.15rem;
  text-align: center;
}

/* ------------------------------------------ 6. Reduced motion and print */

@media (prefers-reduced-motion: reduce) {
  .month__bar,
  .object-tile__link {
    transition: none;
  }
}

@media print {
  .observing__lat,
  .object-tile__link {
    background: none;
  }

  .months {
    height: 4rem;
  }
}