/* The documentation site's own chrome.
   Everything visual here comes from Ahimsa tokens — the site is built with
   the system, which is the only honest way to document it. This file adds
   nothing but layout for the specimen pages themselves. */

/* The page is lit by its own sky. The gradient lives on <html> (the canvas)
   and body stays transparent, so the stars can sit between the two (Day's
   clouds are a layer of the html background itself). Both
   layers are decorative and fixed; the flat canvas color is the fallback. */
html.ahimsa-day {
  background: var(--ambient-clouds), var(--gradient-sky), var(--surface-canvas-flat);
  background-size: 100% 100%, auto, auto;
  background-attachment: fixed;
  background-repeat: no-repeat;
}
html.ahimsa-night {
  background: var(--gradient-midnight), var(--surface-canvas-flat);
  background-attachment: fixed;
  background-repeat: no-repeat;
}
.ahimsa-night body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--ambient-stars);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
@media (forced-colors: active) {
  html.ahimsa-day, html.ahimsa-night { background: Canvas; }
  .ahimsa-night body::before { display: none; }
}
body {
  background: transparent;
  min-height: 100%;
}
/* .ah-page paints the flat canvas, which would hide the sky and the stars
   on <html>. On this site the page is see-through and the sky is the ground. */
.ah-page { background: transparent; }

/* ---- Site header. In the flow, not fixed: a bar that follows you down the
   page is a small, permanent claim on attention. ---- */
.site-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding-block: var(--space-6) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}
.site-mark {
  font-family: var(--font-display);
  font-size: var(--size-xl);
  color: var(--text-heading);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.site-nav { display: flex; gap: var(--space-4); flex-wrap: wrap; align-items: baseline; }
.site-nav a {
  color: var(--text-secondary);
  /* Flex children are blockified, so these are not inline links and do not
     get 2.5.8's inline exemption. Give them a real target. */
  min-height: 24px;
  display: flex;
  align-items: center;
}
.site-nav a[aria-current="page"] { color: var(--text-heading); }

/* The theme switch is a control you press. Until you do, the site follows
   your operating system's appearance; once you do, your choice wins. */
.theme-switch { display: flex; gap: 4px; align-items: center; }

.site-foot {
  margin-top: var(--space-20);
  padding-block: var(--space-8) var(--space-12);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  gap: var(--space-4);
  justify-content: space-between;
  flex-wrap: wrap;
  color: var(--text-secondary);
}

/* ---- Specimen scaffolding ---- */
/* Specimens are siblings inside a section, and two panels sharing an edge
   read as one panel. Anything following another block in a section gets a
   full unit of air; margins collapse, so this never doubles up with the
   margin-bottom the prose already carries. */
.ah-section > * + * { margin-top: var(--space-6); }

.spec {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--surface-elevated);
  box-shadow: var(--shadow-sm);
}
.spec__demo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}
.spec__demo--stack { flex-direction: column; align-items: stretch; }
.spec__demo--pad { padding: var(--space-5); border-radius: var(--radius-md); background: var(--surface-sunk); }

/* A copyable snippet. The <pre> is focusable and the button is real, so it
   works without a pointer. */
.snippet { position: relative; }
.snippet pre {
  margin: 0;
  overflow-x: auto;
  padding: var(--space-4);
  padding-right: var(--space-16);
  border-radius: var(--radius-md);
  background: var(--surface-sunk);
  color: var(--text-body);
  font-family: var(--font-mono);
  font-size: var(--size-base);
  line-height: 1.6;
  tab-size: 2;
}
.snippet__copy { position: absolute; top: var(--space-2); right: var(--space-2); }

/* ---- Swatches ---- */
.ramp { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 2px; }
/* The label sits BELOW its swatch, on the page background, rather than
   inside it. A mid-tone swatch cannot host legible text in either ink, and
   a color chart whose labels you cannot read is not a color chart. */
.ramp__step { display: grid; gap: 4px; }
.ramp__chip { aspect-ratio: 1 / 1; border-radius: var(--radius-xs); }
.ramp__step code {
  font-family: var(--font-mono);
  font-size: var(--size-micro);
  color: var(--text-secondary);
  display: block;
}
.ramp__name { font-family: var(--font-mono); font-size: var(--size-micro); letter-spacing: 0.06em; text-transform: uppercase; }

.grads { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); }
.grad {
  min-height: 150px;
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-2);
  box-shadow: var(--shadow-sm);
}
.grad__note { font-family: var(--font-mono); font-size: var(--size-micro); }

/* A two-column comparison, for showing a rule and its counter-example. */
.pair { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 720px) { .pair { grid-template-columns: 1fr 1fr; } }

.yes, .no {
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--surface-elevated);
  box-shadow: var(--shadow-sm);
  display: grid;
  gap: var(--space-3);
  align-content: start;
}
/* A full ring, not a left accent. "No colored-left-border cards, no hard
   outlines" is one of this system's own rules, and a 3px stripe down one
   edge was quietly breaking it. The ring uses the same ink as the label,
   so the panel reads as one marked thing rather than a card wearing a
   flag. --ah-yes-ink / --ah-no-ink are the -700 steps, which clear 3:1
   against the surface (WCAG 1.4.11). */
.yes { box-shadow: inset 0 0 0 1.5px var(--ah-yes-ink); }
.no  { box-shadow: inset 0 0 0 1.5px var(--ah-no-ink); }
.yes > .ah-caps { color: var(--ah-yes-ink); }
.no  > .ah-caps { color: var(--ah-no-ink); }
/* The -700 step, not --accent-success / --accent-warning. Those are tuned
   as fills and marks; at 10px they sit around 4.2:1 and owe 4.5:1. */
.ahimsa-day   { --ah-yes-ink: var(--bodhi-700); --ah-no-ink: var(--clay-700); }
.ahimsa-night { --ah-yes-ink: var(--bodhi-200); --ah-no-ink: var(--clay-200); }

/* ---- Tables ---- */
.tbl { width: 100%; border-collapse: collapse; font-size: var(--size-base); }
.tbl th, .tbl td {
  text-align: left;
  padding: var(--space-3) var(--space-3) var(--space-3) 0;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: top;
}
.tbl th {
  font-family: var(--font-body);
  font-size: var(--size-xs);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-secondary);
  white-space: nowrap;
}
.ahimsa-night .tbl th { font-family: var(--font-mono); }
.tbl code { font-family: var(--font-mono); font-size: var(--size-sm); }
.tbl--fixed { table-layout: fixed; }
.wrap-anywhere { overflow-wrap: anywhere; }

/* ---- Hero ---- */
.hero { padding-block: var(--space-16) var(--space-12); display: grid; gap: var(--space-6); }
/* Night sets display type with positive tracking, so the same words run
   wider. It gets a slightly smaller ceiling rather than an extra line. */
.ahimsa-night .hero__title { font-size: clamp(2.5rem, 7.2vw, 6rem); }
.hero__lede { max-width: 46ch; color: var(--text-secondary); }

/* ---- An inset phone-sized frame, for showing a composition in context ---- */
.frame {
  width: 320px;
  height: 560px;
  max-width: 100%;
  border-radius: var(--radius-3xl);
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-lg);
  background: var(--surface-canvas);
}

/* --text-secondary, despite the name. --text-muted is a non-text token in
   this system (around 3:1) and setting body copy in it is precisely the
   mistake the first pass of this site made. Kept as a name because it
   reads as the quiet tier, which it is. */
.muted { color: var(--text-secondary); }
.secondary { color: var(--text-secondary); }
.heading-ink { color: var(--text-heading); }
.center { text-align: center; }