@import "tailwindcss";
@import "../../common/styles/tokens.css";
@source "../../common/components";

/* This is the PROJECT's site — the instrument, not one of the archives it
   builds. It opens on the dark base in Signal, the family's own accent, and
   keeps its chrome achromatic: colour is reserved for recording state and for
   the archives' own accents. The bases, the accents and the `dark` variant
   live in common/styles/tokens.css; only the faceplate geometry and the
   page-load reveal remain here.

   The warm radial glow + film grain that used to live here is deliberately
   GONE. It was archive-room dressing, correct back when this page was a shelf
   of archives; a faceplate wants flat ground and crisp rules. */

html {
  background-color: var(--background);
}

body {
  color: var(--foreground);
  font-family: var(--font-sans), ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* An instrument module: a flat faceplate with hairline geometry. No blur, no
   gradient, no glow — the panel is a solid surface with a drawn edge, and its
   top hairline is the only thing that "signs" it. */
.panel-instrument {
  background: var(--chart-surface);
  border: 1px solid var(--border);
  border-top-color: var(--border-strong);
}

/* A hairline module used for content panels (as opposed to the chart's
   instrument panel). Square-ish by family radius; the top rule is the tell. */
.faceplate {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* Small-caps machine label: section eyebrows, column heads, unit suffixes. */
.label-machine {
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 0.6875rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--faint);
}

/* Tabular figures everywhere a number can change length between renders, so
   columns of counts and timecodes don't shift. */
.tabular {
  font-family: var(--font-mono), ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

/* One orchestrated page-load reveal. Children stagger via inline --d. */
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.reveal {
  opacity: 0;
  animation: rise 0.72s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: var(--d, 0ms);
}

/* The rail's rows arrive in sequence, as acquisitions do. Same easing as the
   page reveal so it reads as one orchestrated load, not a second animation. */
.rail-row {
  opacity: 0;
  animation: rise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: var(--d, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .rail-row {
    animation: none;
    opacity: 1;
  }
}

/* Documentation prose measure. Docs are a single generous column, never
   broadsheet columns — the family's geometry is panels, not newspaper. */
.doc-measure {
  max-width: 68ch;
}

/* The growth chart's hover layer: one transparent column per month, tinted
   under the pointer. Native <title> tooltips, no client JS. */
.growth-hit {
  fill: transparent;
}
.growth-hit:hover {
  fill: var(--chart-grid);
}

/* The growth chart's surface gap (ArchiveGrowthChart.tsx): 2 px along a
   band's upper edge, in the colour behind the plot — the page ground — so
   touching bands read apart by a gap, never by a line drawn around them.
   Forced colours: the reader's Canvas. */
.growth-gap {
  stroke: var(--background);
  stroke-width: 2px;
}
@media (forced-colors: active) {
  .growth-gap {
    stroke: Canvas;
  }
}