/* After Tufte CSS (Dave Liepmann, MIT): one text column, notes in the
   right margin on wide screens, ET Book, rules instead of boxes. */

@font-face {
  font-family: "et-book";
  src: url("fonts/et-book-roman-line-figures.woff") format("woff");
  font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "et-book";
  src: url("fonts/et-book-display-italic-old-style-figures.woff") format("woff");
  font-weight: normal; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "et-book";
  src: url("fonts/et-book-bold-line-figures.woff") format("woff");
  font-weight: bold; font-style: normal; font-display: swap;
}

:root {
  --bg: #fffff8;
  --fg: #111;
  --muted: #5d5d55;
  --rule: #c9c9bd;
  --accent: #a3271c;
  --mark: #f3ead0;
  --bar: #b8b6a8;
  --serif: "et-book", Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --text: 36rem;
  --note: 15rem;
  --gap: 2.5rem;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #161614;
    --fg: #e4e2d9;
    --muted: #a19f94;
    --rule: #45443e;
    --accent: #ee8a76;
    --mark: #3a3322;
    --bar: #5d5b52;
  }
}

* { box-sizing: border-box; }
html { font-size: 17px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--serif);
  line-height: 1.5;
  font-variant-numeric: lining-nums;
}

article {
  max-width: calc(var(--text) + var(--gap) + var(--note));
  padding: 3rem 16px 4rem;
  margin: 0 auto;
}
article > header, section { max-width: var(--text); }

h1 { font-weight: normal; font-size: 2.6rem; line-height: 1.1; margin: 0 0 .6rem; }
h2 { font-weight: normal; font-style: italic; font-size: 1.6rem; line-height: 1.2; margin: 3.2rem 0 .8rem; }
h3 { font-weight: normal; font-style: italic; font-size: 1.25rem; margin: 2rem 0 .4rem; }
p { margin: 0 0 1rem; }
.subtitle { font-style: italic; font-size: 1.3rem; line-height: 1.35; margin-bottom: 1.6rem; }

a { color: inherit; text-decoration-color: var(--muted); text-underline-offset: .15em; }
a:hover { color: var(--accent); text-decoration-color: currentColor; }

/* Margin notes. On narrow screens they sit inline, set small. */
.note {
  font-size: .85rem;
  line-height: 1.4;
  color: var(--muted);
  margin: 0 0 1rem;
  padding-left: .8rem;
  border-left: 1px solid var(--rule);
}
@media (min-width: 62rem) {
  .note {
    float: right;
    clear: right;
    width: var(--note);
    margin-right: calc(-1 * (var(--note) + var(--gap)));
    margin-top: .3rem;
    padding-left: 0;
    border-left: 0;
  }
}

@media (max-width: 34rem) { .subtitle { font-size: 1.12rem; } h1 { font-size: 2.2rem; } }
.status { color: var(--muted); font-size: .95rem; }
.status.error { color: var(--accent); }
.caption { color: var(--muted); font-size: .9rem; }

/* Controls written into a sentence. */
.ask { font-size: 1.2rem; line-height: 1.7; }
.ask p { margin-bottom: .4rem; }
select, input, button { font: inherit; color: inherit; }
select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 1px dotted var(--accent);
  border-radius: 0;
  color: var(--accent);
  padding: 0 .1em;
  max-width: 100%;
  cursor: pointer;
}
select option { color: var(--fg); background: var(--bg); }
select:disabled { color: var(--muted); border-bottom-color: var(--rule); }
.judgement { font-size: 1rem; line-height: 1.5; }
.judgement label { cursor: pointer; }
.judgement span { color: var(--muted); }
input[type="checkbox"], input[type="range"] { accent-color: var(--accent); }
input[type="checkbox"] { width: 1rem; height: 1rem; vertical-align: -.1rem; margin: 0 .3rem 0 0; }
input[type="range"] { width: 9rem; vertical-align: middle; }
input[type="number"] {
  width: 8.5rem;
  background: transparent;
  border: 0;
  border-bottom: 1px dotted var(--accent);
  color: var(--accent);
  font-family: var(--mono);
  font-size: .9em;
  padding: 0 .1em;
  border-radius: 0;
}
output { font-family: var(--mono); font-size: .9em; color: var(--accent); display: inline-block; min-width: 1.4em; text-align: right; }
button {
  background: transparent;
  border: 1px solid var(--fg);
  border-radius: 0;
  padding: .2rem .7rem;
  cursor: pointer;
}
button:hover { color: var(--accent); border-color: var(--accent); }
button.text { border: 0; padding: 0; color: var(--accent); text-decoration: underline dotted; text-underline-offset: .2em; font-size: .9em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The result table: rules above and below, no boxes. */
table.result { border-collapse: collapse; width: 100%; margin: 1.2rem 0 .5rem; }
.result th, .result td { padding: .3rem .5rem .3rem 0; text-align: left; vertical-align: baseline; }
.result thead th { font-weight: normal; font-style: italic; border-top: 2px solid var(--fg); border-bottom: 1px solid var(--fg); }
.result tbody tr:last-child td { border-bottom: 2px solid var(--fg); }
.result .num { text-align: right; font-family: var(--mono); font-size: .85rem; white-space: nowrap; }
.result thead .num { font-family: var(--serif); font-size: 1rem; }
.result td.group { overflow-wrap: anywhere; }
.result .bar { width: 26%; padding-left: .8rem; }
.result .bar span { display: block; height: .45rem; background: var(--bar); }
.result tr.selected td { background: var(--mark); }
.result .was { display: block; color: var(--muted); font-size: .75rem; }
.result .gone { color: var(--muted); }
@media (max-width: 30rem) { .result .bar { display: none; } }

button.cell {
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--accent);
  text-decoration: underline dotted;
  text-underline-offset: .25em;
}
tr.selected button.cell { text-decoration-style: solid; }

/* Pipeline: sentence on the left, counts on the right. */
ol.pipeline { list-style: none; counter-reset: step; padding: 0; margin: 1rem 0; border-top: 1px solid var(--rule); }
.pipeline li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 1.6rem 1fr 8.5rem;
  gap: 0 .6rem;
  padding: .5rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: .95rem;
  line-height: 1.4;
}
.pipeline li::before { content: counter(step) "."; color: var(--muted); }
.pipeline .counts { text-align: right; font-family: var(--mono); font-size: .8rem; line-height: 1.6; }
.pipeline .counts .traced { color: var(--accent); display: block; }
@media (max-width: 34rem) {
  .pipeline li { grid-template-columns: 1.6rem 1fr; }
  .pipeline .counts { grid-column: 2; text-align: left; }
  .pipeline .counts .traced { display: inline; margin-left: .8rem; }
}

details.plan-json { margin: 0 0 1rem; font-size: .9rem; }
details.plan-json summary { cursor: pointer; color: var(--muted); }
pre {
  font-family: var(--mono);
  font-size: .72rem;
  line-height: 1.45;
  overflow-x: auto;
  max-height: 22rem;
  padding: .6rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  white-space: pre;
}

/* Receipts: one request per entry, like lines on a receipt. */
ul.receipts, ol.movers { list-style: none; padding: 0; margin: .5rem 0 1rem; border-top: 1px solid var(--rule); }
.receipts li, .movers li { padding: .45rem 0; border-bottom: 1px dotted var(--rule); font-size: .95rem; line-height: 1.4; }
.receipts .key, .movers .key { font-family: var(--mono); font-size: .8rem; }
.receipts .meta, .movers .meta { color: var(--muted); font-size: .85rem; display: block; }
.movers li { display: grid; grid-template-columns: 1fr auto; gap: 0 1rem; }
.movers .without { font-family: var(--mono); font-size: .8rem; text-align: right; white-space: nowrap; }
.movers li.out { background: var(--mark); }

.buttons button { margin: 0 .5rem .5rem 0; }
button:disabled { color: var(--muted); border-color: var(--rule); cursor: default; }
.tally li { font-size: .85rem; }
.effect { font-size: 1.15rem; min-height: 1.5em; }
.effect .num { font-family: var(--mono); font-size: .9em; }
.effect.refused { color: var(--accent); }

#notes h2 { margin-top: 4rem; }
.foot { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--rule); font-size: .85rem; color: var(--muted); }

[hidden] { display: none !important; }