/* Intone — tuner-panel language.
   Deliberately unlike site-runway (light paper, serif-ish statement, ruled money rows) and
   site-verdant (warm cream, botanical). This is the instrument: a dark purple panel, mint
   readings, monospace figures, keylines with the legend inset into them, and tick marks
   instead of bullets and dividers.

   The palette is sampled from the app icon, the same eight values as `IntoneInk` in
   `apps/intone/Intone/IntoneKit.swift`. If the icon is ever redrawn, both move together.

   No rounded cards, no shadows, no gradient buttons — those were the shared vocabulary. */

:root {
  --night: #150c26;
  --deep:  #3b1e6e;
  --plum:  #8e2a63;
  --rose:  #c4478b;
  --mint:  #2be0a8;
  --chalk: #f3edfb;
  --haze:  #a394c2;
  --amber: #f5b942;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--night);
  color: var(--chalk);
  font: 16px/1.62 ui-sans-serif, -apple-system, "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

.wrap { max-width: 660px; margin: 0 auto; padding: 0 22px 88px; }

/* ---- masthead: the dial's tick rule, with the centre tick lit ---- */

header { padding: 54px 0 0; margin-bottom: 34px; }

h1 {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 3px;
}

.tag {
  margin: 0 0 18px;
  color: var(--haze);
  font: 500 13px/1.5 ui-monospace, "SF Mono", Menlo, monospace;
}

/* 41 ticks, the middle one lit mint — the same figure the app draws under every heading.
   Done with repeating-linear-gradient so it is one element, not forty-one. */
.ticks {
  height: 14px;
  background:
    linear-gradient(var(--mint), var(--mint)) center / 2px 14px no-repeat,
    repeating-linear-gradient(to right, var(--deep) 0 1px, transparent 1px 16px)
      center / 100% 8px no-repeat;
}

/* ---- section headings: a legend, lower case, over a keyline ---- */

h2 {
  font: 600 11px/1 ui-sans-serif, -apple-system, sans-serif;
  letter-spacing: 0.16em;
  text-transform: lowercase;
  color: var(--haze);
  margin: 40px 0 0;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--deep);
}

h2 + p, h2 + ul, h2 + .row, h2 + .qa { margin-top: 15px; }

p { margin: 0 0 14px; }
a { color: var(--mint); text-decoration-color: rgba(43, 224, 168, 0.4); }
a:hover { color: var(--rose); }

strong { color: var(--chalk); }

/* The lede sits behind a lit tick, exactly like a selected tab in the app. */
.lede {
  font-size: 18px;
  line-height: 1.5;
  border-left: 2px solid var(--mint);
  padding-left: 16px;
  margin: 0 0 8px;
  color: var(--chalk);
}

/* ---- lists: dim ticks in the margin, never round bullets ---- */

ul { margin: 0 0 16px; padding-left: 0; list-style: none; }
li {
  position: relative;
  margin-bottom: 8px;
  padding-left: 18px;
  color: var(--chalk);
}
li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 2px;
  height: 10px;
  background: var(--mint);
}

/* ---- reading rows: label left, monospace figure right in mint ---- */

.row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  border-bottom: 1px solid var(--deep);
  padding: 11px 0;
}
.row span:last-child {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  color: var(--mint);
  white-space: nowrap;
}

/* ---- Q&A: hairline-separated, question in chalk, answer in haze ---- */

.qa { border-top: 1px solid var(--deep); padding: 15px 0 4px; }
.qa:first-of-type { border-top: 0; }
.q { margin: 0 0 6px; font-weight: 650; color: var(--chalk); }
.a { margin: 0 0 10px; color: var(--haze); }

/* ---- panel: a keyline box with its legend punched into the top edge ---- */

.panel {
  position: relative;
  border: 1px solid var(--deep);
  border-radius: 6px;
  padding: 20px 16px 15px;
  margin: 26px 0;
}
.panel .legend {
  position: absolute;
  top: -8px;
  left: 12px;
  padding: 0 7px;
  background: var(--night);
  font: 600 11px/1 ui-sans-serif, -apple-system, sans-serif;
  letter-spacing: 0.16em;
  text-transform: lowercase;
  color: var(--haze);
}
.panel p:last-child { margin-bottom: 0; }

.note {
  color: var(--haze);
  font-size: 15px;
  border-left: 2px solid var(--deep);
  padding-left: 14px;
}

code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.9em;
  color: var(--amber);
}

footer {
  margin-top: 54px;
  padding-top: 18px;
  border-top: 1px solid var(--deep);
  font-size: 14px;
  color: var(--haze);
}