/* Supposable Errors. Light is the page of an 1840s Murray duodecimo: cream laid paper, a black
   letterpress ink, the grey of a pencilled tick in a margin. Dark is the same book read by a lamp.
   The knitting is drawn in ink; a loop brought forward is an open ring, the hole it makes in the
   fabric. Red has one meaning only, the place where her words and the stitches part, and always
   comes with a mark and words. */
:root {
  --paper:#f5efe2; --paper-2:#ece4d2; --paper-3:#e1d6bf; --ink:#1f1a14; --ink-soft:#5a5044; --ink-faint:#887b69;
  --rule:#d8ccb4; --rule-strong:#a99a7f;
  --yarn:#2c2620; --yarn-soft:#8f8270; --hole:#f5efe2;
  --fault:#a3231d; --fault-soft:rgba(163,35,29,.13); --mend:#2f6b3a; --mend-soft:rgba(47,107,58,.13);
  --pick:#9a5b0a; --pick-soft:rgba(154,91,10,.14);
  --link:#7a2a12;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:#15120e; --paper-2:#1d1914; --paper-3:#27211a; --ink:#ede5d7; --ink-soft:#b1a593; --ink-faint:#83786a;
    --rule:#33291f; --rule-strong:#58493a;
    --yarn:#ece0cc; --yarn-soft:#8a7d68; --hole:#15120e;
    --fault:#ff7a6c; --fault-soft:rgba(255,122,108,.14); --mend:#7fd08c; --mend-soft:rgba(127,208,140,.13);
    --pick:#f0b44c; --pick-soft:rgba(240,180,76,.16);
    --link:#f0a77e;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper:#15120e; --paper-2:#1d1914; --paper-3:#27211a; --ink:#ede5d7; --ink-soft:#b1a593; --ink-faint:#83786a;
  --rule:#33291f; --rule-strong:#58493a;
  --yarn:#ece0cc; --yarn-soft:#8a7d68; --hole:#15120e;
  --fault:#ff7a6c; --fault-soft:rgba(255,122,108,.14); --mend:#7fd08c; --mend-soft:rgba(127,208,140,.13);
  --pick:#f0b44c; --pick-soft:rgba(240,180,76,.16);
  --link:#f0a77e;
  color-scheme: dark;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"Crimson Pro","Fraunces",Georgia,serif; font-size:1.2rem; line-height:1.55; }
main { max-width:46rem; margin:0 auto; padding:4.4rem 1rem 3rem; }
a { color:var(--link); text-underline-offset:2px; }
:focus-visible { outline:2px solid var(--pick); outline-offset:2px; }
p { margin:0 0 1rem; }
q { quotes:"\201C" "\201D" "\2018" "\2019"; }
.kicker, .mono, figcaption, table, .controls, .readout, .legend, .tile, .cap, .verdict-line { font-family:"Martian Mono",ui-monospace,monospace; }
.kicker { font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 .9rem; }
h1 { font-family:"Fraunces",Georgia,serif; font-size:clamp(2.6rem,10.5vw,4.6rem); line-height:.96; margin:0 0 1rem; letter-spacing:-.02em; font-weight:600; }
.dek { font-size:1.28rem; margin:0 0 2.2rem; }
h2 { font-family:"Fraunces",Georgia,serif; font-size:1.6rem; line-height:1.2; margin:3.2rem 0 1rem; font-weight:600; letter-spacing:-.01em; }
h3 { font-size:1.1rem; margin:0 0 .5rem; }
.v { font-variant-numeric:lining-nums tabular-nums; }
blockquote { margin:1.2rem 0 1.4rem; padding:.2rem 0 .2rem 1.1rem; border-left:3px solid var(--rule-strong); }
blockquote p { margin:0 0 .4rem; }
blockquote .src { font-size:.95rem; color:var(--ink-soft); }
.small { font-size:1rem; color:var(--ink-soft); }

/* the preface, set as printed */
.preface { margin:1.6rem auto 2rem; max-width:30rem; padding:1.4rem 1.5rem 1.2rem; background:var(--paper-2); border:1px solid var(--rule); box-shadow:0 1px 0 var(--rule); }
.preface .h { text-align:center; font-family:"Fraunces",Georgia,serif; letter-spacing:.18em; text-transform:uppercase; font-size:.95rem; margin:0 0 .2rem; }
.preface .h2 { text-align:center; font-style:italic; margin:0 0 .9rem; color:var(--ink-soft); }
.preface p { text-indent:1.2em; margin:0 0 .5rem; line-height:1.45; }
.preface .addr { text-align:right; font-style:italic; text-indent:0; color:var(--ink-soft); }
.preface figcaption { font-size:.7rem; line-height:1.5; color:var(--ink-soft); margin-top:.8rem; }
.preface mark { background:var(--pick-soft); color:inherit; padding:0 .1em; }

/* the instrument */
.instrument { margin:2rem -1rem 2.4rem; padding:1rem; background:var(--paper-2); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
@media (min-width:62rem) { .instrument { margin-left:calc(50% - 30rem); margin-right:calc(50% - 30rem); border:1px solid var(--rule); border-radius:4px; } }
.instrument h3 { font-family:"Fraunces",Georgia,serif; font-size:1.2rem; margin:0 0 .4rem; }
.lede { font-size:1.02rem; color:var(--ink-soft); margin:0 0 .8rem; }
.controls { display:flex; flex-wrap:wrap; gap:.5rem .8rem; align-items:center; font-size:.72rem; margin:0 0 .8rem; }
.controls label { color:var(--ink-soft); }
.controls select { font:inherit; font-size:.72rem; max-width:100%; padding:.3rem .4rem; background:var(--paper); color:var(--ink); border:1px solid var(--rule-strong); border-radius:3px; }
.controls button { font:inherit; font-size:.72rem; padding:.35rem .6rem; background:var(--paper); color:var(--ink); border:1px solid var(--rule-strong); border-radius:3px; cursor:pointer; }
.controls button[aria-pressed="true"] { background:var(--ink); color:var(--paper); border-color:var(--ink); }
.controls button:disabled { opacity:.45; cursor:default; }
.controls .grp { display:inline-flex; gap:.3rem; align-items:center; }
.bench { display:grid; grid-template-columns:1fr; gap:.9rem; }
@media (min-width:52rem) { .bench { grid-template-columns:minmax(16rem,22rem) 1fr; } }
.words { background:var(--paper); border:1px solid var(--rule); padding:.8rem .9rem; font-size:1rem; line-height:1.45; max-height:30rem; overflow:auto; }
.words .t { font-family:"Fraunces",Georgia,serif; font-weight:600; font-size:1.05rem; margin:0 0 .5rem; }
.words p { margin:0 0 .45rem; }
.words .say { border-radius:2px; transition:background-color .2s; }
.words .say.on { background:var(--pick-soft); box-shadow:0 0 0 2px var(--pick-soft); }
.words .say.bad { text-decoration:underline wavy var(--fault); text-underline-offset:3px; }
.words .say.mend { background:var(--mend-soft); }
.mapwrap { background:var(--paper); border:1px solid var(--rule); position:relative; overflow:hidden; min-height:14rem; }
#map { display:block; width:100%; height:min(34rem,70vh); }
.readout { font-size:.74rem; line-height:1.6; margin:.7rem 0 0; min-height:3.2em; }
.readout b { font-weight:600; }
.readout .bad { color:var(--fault); }
.readout .ok { color:var(--mend); }
.legend { display:flex; flex-wrap:wrap; gap:.3rem 1rem; font-size:.66rem; color:var(--ink-soft); margin:.5rem 0 0; }
.legend svg { vertical-align:-3px; margin-right:.25rem; }
.verdict-line { font-size:.7rem; line-height:1.6; margin:.4rem 0 0; color:var(--ink-soft); }
.words ins { text-decoration:none; background:var(--mend-soft); box-shadow:inset 0 -2px 0 var(--mend); }
.words .say.mend { display:inline; padding:0 .15em; }

/* the sampler: the whole book */
.sampler { display:grid; grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr)); gap:.45rem; margin:1rem 0 1.4rem; }
.tile { appearance:none; text-align:left; font:inherit; font-size:.64rem; line-height:1.35; padding:.45rem .5rem .5rem; background:var(--paper-2); color:var(--ink); border:1px solid var(--rule); border-left:4px solid var(--rule-strong); border-radius:3px; cursor:pointer; min-height:4.2rem; }
.tile:hover { border-color:var(--rule-strong); }
.tile .pg { color:var(--ink-faint); }
.tile .vd { display:block; margin-top:.25rem; color:var(--ink-soft); }
.tile[data-v="works"] { border-left-color:var(--mend); }
.tile[data-v="works-if-finished"] { border-left-color:var(--pick); }
.tile[data-v="count-drifts"], .tile[data-v="stated-wrong"] { border-left-color:var(--fault); }
.tile[data-v="unchecked"], .tile[data-v="unread"] { border-left-style:dashed; }
.tile[aria-current="true"] { outline:2px solid var(--ink); outline-offset:1px; }
.keyrow { display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; font-family:"Martian Mono",ui-monospace,monospace; font-size:.66rem; color:var(--ink-soft); }
.keyrow span::before { content:""; display:inline-block; width:.7rem; height:.7rem; margin-right:.35rem; vertical-align:-1px; border-left:4px solid var(--rule-strong); }
.keyrow .k-works::before { border-color:var(--mend); }
.keyrow .k-fin::before { border-color:var(--pick); }
.keyrow .k-bad::before { border-color:var(--fault); }

/* tables */
.tablewrap { overflow-x:auto; margin:1rem 0 1.4rem; }
table { border-collapse:collapse; width:100%; font-size:.7rem; line-height:1.45; }
th, td { text-align:left; vertical-align:top; padding:.4rem .5rem; border-bottom:1px solid var(--rule); }
th { color:var(--ink-soft); font-weight:600; }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; }
td .w { font-family:"Crimson Pro","Fraunces",Georgia,serif; font-size:.95rem; }
.flag-bad { color:var(--fault); }
.flag-ok { color:var(--mend); }

/* the letter */
.letter { margin:1.6rem 0 2rem; padding:1.4rem 1.5rem; background:var(--paper-2); border:1px solid var(--rule); }
.letter p { margin:0 0 .7rem; }
.letter .sal { font-style:italic; }
.letter ol { margin:.4rem 0 1rem; padding-left:1.3rem; }
.letter li { margin:0 0 .5rem; }
.letter .sig { text-align:right; font-style:italic; }

.check { border-left:3px solid var(--mend); background:var(--paper-2); padding:.9rem 1.1rem; margin:2rem 0; font-size:1rem; }
.check h2 { font-family:"Martian Mono",ui-monospace,monospace; font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; margin:0 0 .5rem; color:var(--ink-soft); }
code, .mono { font-family:"Martian Mono",ui-monospace,monospace; font-size:.82em; }
pre { font-family:"Martian Mono",ui-monospace,monospace; font-size:.72rem; overflow-x:auto; background:var(--paper-2); padding:.7rem .8rem; border:1px solid var(--rule); }
ul.model { margin:.2rem 0 1.2rem; padding-left:1.2rem; }
ul.model li { margin:0 0 .35rem; }
footer.sources { margin-top:3rem; font-size:.95rem; color:var(--ink-soft); }
@media (prefers-reduced-motion: reduce) { .words .say { transition:none; } }