/*
 * THE SECOND GROUND.
 *
 * `.panel` is a dark region on a light page, and it works by REBINDING the semantic aliases on
 * itself rather than by overriding its descendants. Write a component once against --fg, --rule and
 * the *-ink signals and it is correct inside a panel and outside it, with no `.panel .thing` rule
 * anywhere in the codebase.
 *
 * spec/design_system_spec.rb asserts that EVERY alias in the set is rebound here. That is the most
 * valuable assertion in the file: a missed one does not fail loudly, it makes some component
 * unreadable on the dark ground months from now, and only for the people reading that page.
 *
 * WHEN TO REACH FOR IT is semantic, not decorative. Dark is the instrument speaking: dense machine
 * output, a chart, our own computation, our own outage. Light is chrome, prose, forms, navigation.
 * That gives /status a mostly-dark page (it is entirely about us) and /research a light page with
 * dark figures embedded, which is the "a crop of the figure reads on its own" property for free.
 */

.panel {
  --card:       var(--panel-deep);
  --rule:       var(--panel-rule);
  --rule-soft:  var(--panel-rule);
  --fg:         var(--on-panel);
  --fg-2:       var(--on-panel-2);
  --fg-3:       var(--on-panel-3);
  --fg-4:       var(--on-panel-3);
  --fg-5:       var(--on-panel-4);
  --live-ink:   oklch(0.80 0.12 195);
  --frozen-ink: oklch(0.84 0.12 80);
  --breach-ink: oklch(0.72 0.16 25);
  --inband-ink: oklch(0.78 0.13 150);
  --accent-ink: oklch(0.80 0.12 195);
  --on-signal:  var(--panel-deep);

  background: var(--panel);
  color: var(--fg-2);
  border: var(--hair) solid var(--panel-rule);
}

.panel--deep { background: var(--panel-deep); }

/* A section that is entirely instrument: put `class="section panel"` on it. There is no
   .section--panel modifier, because a modifier would have to duplicate the alias rebind above and
   the two copies would drift. */
.section.panel { border-inline: 0; }

/* ---------------------------------------------------------------------------- Site footer --- */
/* Rendered on EVERY route by the layout, because the disclaimer is not page copy. See
   app/views/shared/_footer.html.erb. */
.site-footer {
  border-top: var(--hair) solid var(--rule);
  margin-top: var(--s6);
  padding-block: var(--s5) var(--s6);
  background: var(--card);
}

.site-footer__disclaimer {
  max-width: var(--measure);
  margin: 0 0 var(--s4);
  font-size: 13px;
  line-height: 1.6;
  color: var(--fg-3);
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  margin-bottom: var(--s3);
  font: 500 10px/1.2 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.site-footer__links a { color: var(--fg-3); }
.site-footer__links a:hover { color: var(--fg); }

.site-footer__entity {
  margin: 0;
  font-size: 12px;
  color: var(--fg-3);
}