/* ============================================================
   theme.css
   One skin over the preserved edition, so it reads as this site.

   The instruments were built on a warm paper palette with a brown accent and
   Newsreader for body text. The site they now live inside is cool, near black
   by default, and sets its prose in Instrument Sans. Two houses, one address.

   This file does not touch a single tool's logic or markup. kit.css already
   names its colours as custom properties, and it happens to use most of the
   same names this site does, so redefining the tokens after it loads re-skins
   every one of the sixty one pages at once. What is left is typography and a
   handful of components whose treatment belonged to the old world.

   The reference point for the instruments is the way a consulting firm sets a
   quantitative exhibit: one accent and no more, rules thin enough to organise
   without drawing attention, numbers in a tabular face so columns line up, and
   enough air that the figure is the loudest thing on the page.
   ============================================================ */

/* ---------- 1. tokens ---------- */

/* These pages are built on kit.css, which names its colours as custom
   properties, so redefining them after it loads brings the instruments, the
   simulations, the essays and the written pages onto this site's palette
   without touching a line of any tool's markup.

   The seventeen workshop tools are NOT in this file and never were reskinned:
   they carry their own systems, and in those a colour is not decoration. Red
   and blue in an earthworks tool are cut and fill. That distinction is the
   whole reason this file stops where it does. */

:root {
  color-scheme: light dark;

  --paper:      #fcfcfb;
  --paper-sunk: #f4f5f7;
  --panel:      #f8f9fa;
  --field:      #ffffff;

  --ink:        #16171a;
  --ink-soft:   #5b5f66;
  --dim:        #6b7078;
  --faint:      #787e86;

  --rule:       #dcdde0;
  --rule-firm:  #c3c6cb;
  --rule-edge:  #9aa0a8;

  --accent:     #1f4f8f;
  --accent-lit: #eef2f8;

  /* a warning still has to read as a warning, so it keeps its own hue; it is
     pulled toward the blue so it sits in the same light as everything else */
  --flag:       #a63a26;
  --flag-lit:   #fbeeec;
  --good:       #2f6b45;
  --good-lit:   #eaf2ed;

  --serif: "Instrument Sans", -apple-system, "Segoe UI", Helvetica, sans-serif;
  --reading: "Newsreader", Georgia, "Times New Roman", serif;

  --edge: clamp(1.15rem, 5vw, 3.5rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:      #111214;
    --paper-sunk: #0c0d0f;
    --panel:      #16181c;
    --field:      #191c21;

    --ink:        #e9eaec;
    --ink-soft:   #9aa0a8;
    --dim:        #878d95;
    --faint:      #767c84;

    --rule:       #292b30;
    --rule-firm:  #3a3e45;
    --rule-edge:  #4e535a;

    --accent:     #7aa7e0;
    --accent-lit: #1b2330;

    --flag:       #e8907c;
    --flag-lit:   #2a1a17;
    --good:       #86c39a;
    --good-lit:   #16241c;
  }
}

/* The drop marker beside the kicker is an inline SVG with its old brown baked
   into a fill attribute, so no token can reach it. */
.k-crown svg path,
.k-crown-no svg path {
  fill: var(--accent);
}

/* ---------- 2. type ---------- */

body {
  font-family: var(--serif);
  font-size: clamp(0.98rem, 0.95rem + 0.15vw, 1.05rem);
  line-height: 1.62;
  letter-spacing: -0.005em;
}

/* The essays and the notes are for reading rather than operating, so they keep
   a serif. An instrument is operated, and a sans is easier to scan under a
   number you are checking. */
.prose p,
.essay p,
article p {
  font-family: var(--reading);
  font-size: 1.06em;
  line-height: 1.68;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

h1 { line-height: 1.06; }

/* Every number on these pages is meant to be compared with another number, so
   all of them are tabular and none of them shift width as they change. */
input, output, td, th, .num, .fig, [class*="num"], [class*="val"] {
  font-variant-numeric: tabular-nums;
}

/* ---------- 3. rules and sections ---------- */

hr,
.rule {
  border: 0;
  border-top: 1px solid var(--rule);
}

/* The section number was a warm brown serif sitting on the heading's baseline.
   It becomes a quiet mono tick: the heading is the thing, the number only says
   where you are. */
.k-num {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  color: var(--faint);
}

.k-panel {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 10px;
}

.k-hint { color: var(--dim); }
.k-warn { color: var(--flag); }

.k-table th {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 400;
}

/* ---------- 4. controls ---------- */

input, select, textarea, button {
  font-family: inherit;
  border-radius: 6px;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--accent);
}

/* A slider is the one control on these pages people actually play with, so it
   is worth the few lines that make it feel like something. */
input[type="range"] {
  border: 0;
  background: transparent;
  accent-color: var(--accent);
}

input, select, textarea {
  background: var(--field);
  border: 1px solid var(--rule-firm);
  color: var(--ink);
}

input:hover, select:hover, textarea:hover { border-color: var(--rule-edge); }

button {
  cursor: pointer;
  border: 1px solid var(--rule-firm);
  background: var(--panel);
  color: var(--ink);
}

button:hover { border-color: var(--accent); color: var(--accent); }

button:active {
  transform: translateY(1px);
}

/* ---------- 5. links ---------- */

a {
  color: inherit;
  text-underline-offset: 0.18em;
  text-decoration-thickness: from-font;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  transition: text-decoration-color 0.18s ease, color 0.18s ease;
}

a:hover {
  text-decoration-color: currentColor;
}

/* ---------- 6. the source blocks ---------- */

/* Every published figure on these pages carries its source, which is the best
   thing about them and was also the heaviest: a wall of monospace under each
   field. It keeps the mono, because that is the mark of a citation here, but
   it steps back a size and hangs off a rule instead of filling a panel. */
.k-source,
.k-note {
  border-left: 2px solid var(--rule);
  padding-left: 0.9rem;
  background: none;
  color: var(--dim);
  font-size: 0.8rem;
  line-height: 1.55;
}

/* ---------- 7. motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- 8. the exhibit ---------------------------------------------- */

/* The layout was not broken, it was timid. Measured on a real desktop the
   column is 1072px inside an 1184px wrap, which is fine; what made these read
   as the old site was the hierarchy, and the hierarchy was upside down.

   The section heading was 24px. The headings that label the answers were 11px,
   the smallest type on the page, under body text at 17px. Everything whispered
   at the same volume and the one thing a reader came for was the quietest
   thing there.

   A consulting exhibit does the opposite: the number is the largest object on
   the page, the label above it is a small tracked mark, and the working is
   underneath in a size you only read if you doubt the number. That is the
   order set below. Nothing here moves an element; it is all weight and space,
   which is why it can be applied to five differently shaped tools at once. */

/* The section header becomes an exhibit header: the number hangs in the left
   margin where the eye can run down it, and the heading gets the size it was
   always meant to carry. */
.k-sect { margin-top: clamp(3rem, 6vw, 5.5rem); }

.k-sect > h2 {
  position: relative;
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  line-height: 1.12;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--rule);
}

.k-sect > h2 > .k-num {
  display: block;
  margin-bottom: 0.55rem;
}

/* On a wide screen the number leaves the flow entirely and sits in the margin,
   so the headings align on one edge all the way down the page. */
@media (min-width: 1180px) {
  .k-sect > h2 > .k-num {
    position: absolute;
    left: -3.25rem;
    top: 0.55rem;
    margin: 0;
  }
}

/* A panel is a result, not a box. The border goes, a rule and air do the work,
   and the label above it is a mark rather than a heading pretending to be one. */
.k-panel {
  background: none;
  border: 0;
  border-top: 1px solid var(--rule);
  border-radius: 0;
  padding: 1.4rem 0 0;
  margin-top: 1.6rem;
}

.k-panel > h3,
.k-panel > h4,
.k-panel-h {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--faint);
  margin: 0 0 0.9rem;
}

/* The working, and then the answer. Each step is quiet; the last line of a
   chain is what the reader came for, so it is the one that is allowed to be
   loud. */
.k-steps > li {
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--ink-soft);
}

.k-steps > li:last-child {
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  line-height: 1.35;
  color: var(--ink);
  margin-top: 0.55rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--rule);
  font-variant-numeric: tabular-nums;
}

/* A warning is a result too, and it was rendered at the same weight as a note
   about rounding. It gets the one colour on the page that is not the accent. */
.k-warn {
  border-left: 2px solid var(--flag);
  padding-left: 1rem;
}

.k-warn > .k-panel-h,
.k-warn > h3 {
  color: var(--flag);
}

/* Fields were 336px of cramped control. They get room, and the label above
   them gets the same mark treatment as everything else that names a value. */
.k-field > label,
.k-lab {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}

.k-field input,
.k-field select {
  padding: 0.6rem 0.75rem;
  font-size: 1rem;
}

/* The source note is the best thing on these pages and it was set as a wall of
   mono narrower than the text above it. Same mono, more room, more leading. */
.k-source {
  max-width: 68ch;
  padding: 0.15rem 0 0.15rem 1rem;
}

/* Tables carry figures, so the figures line up and the head is a mark. */
.k-table,
.k-sect table {
  width: 100%;
  border-collapse: collapse;
}

.k-sect table td,
.k-sect table th {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--rule);
}

/* a column of numbers reads down the right edge, not the left */
.k-sect table td:not(:first-child),
.k-sect table th:not(:first-child) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ---------- 9. the section rail ------------------------------------------ */

/* Built by toc.js from the headings the page already has. It is only ever
   created above 1400px, so this needs no breakpoint of its own; it does need
   to disappear if the window is dragged narrower after it was built. */

.k-toc {
  position: fixed;
  top: 50%;
  left: clamp(1rem, calc((100vw - 1184px) / 2 - 13rem), 4rem);
  transform: translateY(-50%);
  z-index: 20;
  max-height: 76vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.k-toc ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.k-toc a {
  display: grid;
  grid-template-columns: 1.6rem 1fr;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.3rem 0;
  max-width: 11rem;
  text-decoration: none;
  color: var(--faint);
  transition: color 0.25s ease, opacity 0.25s ease;
  opacity: 0.55;
}

.k-toc a:hover { opacity: 1; color: var(--ink-soft); }

.k-toc a[aria-current="true"] {
  opacity: 1;
  color: var(--ink);
}

.k-toc-n {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: var(--accent);
}

.k-toc-l {
  font-size: 0.78rem;
  line-height: 1.35;
}

/* The rail sits in the left margin, which only exists on a wide window. Below
   that the page keeps its own scroll and the rail goes away rather than
   overlapping the text it is meant to index. */
@media (max-width: 1399px) {
  .k-toc { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .k-toc a { transition: none; }
}

/* Anchored jumps land under nothing, and land softly. */
html { scroll-behavior: smooth; scroll-padding-top: 2rem; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}