/* grimoire -- a reading desk, not an instrument panel.
 *
 * The data here is a stream of claims, each with arguments written against it.
 * That is a document, so the form is a worksheet: a wide margin, hairline
 * rules, engraved labels, and one compact glyph strip per finding showing every
 * alternative reading that was tried and how it went. Nothing is a card.
 *
 * Shared with the other tools in this series: radius 0 everywhere, monospace
 * with tabular figures as the primary face, exactly one sans for prose,
 * hairlines instead of boxes, and absence drawn as absence.
 */

:root {
  --ground: #f7f5f0;
  --plate: #fffefb;
  --plate-2: #efece5;
  --ink: #23201c;
  --dim: #6b665e;
  --faint: #a9a49a;
  --rule: #ddd8ce;

  --impossible: #a8301a;
  --inconsistent: #9a6b12;
  --implausible: #6d5aa0;
  --unread: #2b6b7a;
  --nopower: #8d887f;
  --ok: #2f6b3a;

  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s6: 24px; --s8: 32px;
  --max: 1120px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #14130f;
    --plate: #1a1815;
    --plate-2: #211f1b;
    --ink: #e6e1d8;
    --dim: #a09a90;
    --faint: #5d574e;
    --rule: #2f2b25;

    --impossible: #e8765c;
    --inconsistent: #d7a53f;
    --implausible: #a894e0;
    --unread: #6bb6c6;
    --nopower: #7a746b;
    --ok: #6fbf7f;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  line-height: 1.55;
  overflow-x: hidden;
}

a { color: var(--unread); }

.engraved {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--dim);
}

/* ---- masthead ---------------------------------------------------------- */

.masthead {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--s8) var(--s6) var(--s6);
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: minmax(0, 20ch) minmax(0, 1fr);
  gap: var(--s6);
  align-items: start;
}

.mast-id h1 { margin: 0; font-size: 30px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.tagline { margin: var(--s2) 0 0; font-size: 11px; color: var(--impossible); }

.mast-thesis p {
  margin: 0 0 var(--s3);
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.6;
  max-width: 68ch;
}
.mast-thesis em { font-style: normal; font-weight: 600; color: var(--impossible); }

.mast-numbers {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.mast-numbers .cell { background: var(--plate); padding: var(--s3) var(--s4); flex: 1 1 160px; min-width: 0; }
.mast-numbers b { display: block; font-size: 20px; font-weight: 600; line-height: 1.2; }
.mast-numbers .c-surv b { color: var(--impossible); }
.mast-numbers .c-diss b { color: var(--ok); }
.mast-numbers .c-cov b { color: var(--unread); }

/* ---- panels ------------------------------------------------------------ */

main { max-width: var(--max); margin: 0 auto; padding: 0 var(--s6); }
.panel { padding: var(--s8) 0; border-bottom: 1px solid var(--rule); }
.panel-head h2 { margin: 0; font-size: 16px; font-weight: 600; }
.panel-head p {
  margin: var(--s2) 0 0;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--dim);
  max-width: 80ch;
}
.panel-head p em { font-style: normal; color: var(--ink); font-weight: 600; }

textarea {
  width: 100%;
  min-height: 190px;
  margin-top: var(--s4);
  background: var(--plate);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: var(--s3);
  font: inherit;
  line-height: 1.65;
  resize: vertical;
}
textarea:focus-visible { outline: 2px solid var(--unread); outline-offset: -2px; }

.controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: var(--s4);
  margin-top: var(--s4);
}
.ctl { display: grid; gap: var(--s1); align-content: start; }
/* The examples are a row of chips, not a column: giving them one grid track
 * stacked them vertically and left the three tracks beside them empty. */
.ctl-actions { grid-column: 1 / -1; }
.pair { display: flex; align-items: center; gap: var(--s2); }
.pair i { font-style: normal; color: var(--faint); }

input[type="number"] {
  font: inherit;
  background: var(--plate);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: var(--s1) var(--s2);
  width: 100%;
  min-width: 0;
}
input[type="number"]:focus-visible { outline: 2px solid var(--unread); outline-offset: -2px; }

.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
button {
  font: inherit;
  font-size: 12px;
  background: var(--plate);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: var(--s1) var(--s3);
  cursor: pointer;
}
button:hover:not(:disabled) { background: var(--plate-2); }
button:disabled { color: var(--faint); cursor: not-allowed; }
button:focus-visible { outline: 2px solid var(--unread); outline-offset: 1px; }

/* ---- coverage ---------------------------------------------------------- */

.cov-bar { display: flex; height: 10px; border: 1px solid var(--rule); margin: var(--s4) 0 var(--s2); }
.cov-bar i { display: block; height: 100%; }
.cov-read { background: var(--ok); }
.cov-unread {
  background: repeating-linear-gradient(45deg, var(--unread) 0 2px, transparent 2px 5px);
}
.cov-note { font-family: var(--sans); font-size: 13px; color: var(--dim); max-width: 82ch; }
.cov-list { margin: var(--s3) 0 0; padding: 0; list-style: none; display: grid; gap: var(--s2); }
.cov-list li { border-left: 2px solid var(--unread); padding-left: var(--s3); }
.cov-list .ln { color: var(--faint); }

/* ---- the finding stream ------------------------------------------------ */

.finding {
  border-top: 1px solid var(--rule);
  padding: var(--s4) 0;
  display: grid;
  grid-template-columns: 13ch minmax(0, 1fr);
  gap: var(--s2) var(--s4);
}
.finding:first-child { border-top: 0; }

.f-sev { font-size: 10px; letter-spacing: 0.11em; text-transform: uppercase; }
.f-sev[data-s="impossible"] { color: var(--impossible); }
.f-sev[data-s="inconsistent"] { color: var(--inconsistent); }
.f-sev[data-s="implausible"] { color: var(--implausible); }
.f-sev[data-s="unreadable"] { color: var(--unread); }
.f-sev[data-s="no-power"] { color: var(--nopower); }
.f-sev small { display: block; color: var(--faint); letter-spacing: 0.06em; margin-top: 2px; }

.f-where { color: var(--dim); font-size: 12px; }
.f-where b { color: var(--ink); font-weight: 500; }
.f-why { font-family: var(--sans); font-size: 14px; margin: var(--s1) 0 0; }
.f-meta { font-family: var(--sans); font-size: 12.5px; color: var(--dim); margin: var(--s2) 0 0; }

/* The readings tried, as one strip. Filled = fits. Hollow = does not.
 * Hatched = would only have removed the power of the check. */
.readings { display: flex; flex-wrap: wrap; gap: 3px; margin: var(--s3) 0 0; }
.readings i {
  width: 11px; height: 11px;
  border: 1px solid var(--faint);
  display: block;
}
.readings i[data-r="fits"] { background: var(--ok); border-color: var(--ok); }
.readings i[data-r="no"] { background: transparent; }
.readings i[data-r="disarms"] {
  border-color: var(--nopower);
  background: repeating-linear-gradient(45deg, var(--faint) 0 1px, transparent 1px 3px);
}
.readings-key {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--dim);
  margin: var(--s4) 0 var(--s2);
  border-left: 2px solid var(--rule);
  padding-left: var(--s3);
}

.rescues { margin: var(--s2) 0 0; padding: 0; list-style: none; display: grid; gap: var(--s1); }
.rescues li { font-family: var(--sans); font-size: 13px; border-left: 2px solid var(--ok); padding-left: var(--s3); }
.rescues .cost { color: var(--faint); font-family: var(--mono); font-size: 11px; }
.settle { font-family: var(--sans); font-size: 12.5px; color: var(--dim); margin: var(--s2) 0 0; border-left: 2px solid var(--rule); padding-left: var(--s3); }

/* ---- gate and export --------------------------------------------------- */

.gate { margin: var(--s4) 0 0; padding: 0; list-style: none; display: grid; gap: var(--s2); }
.gate li { display: grid; grid-template-columns: 15px minmax(0, 1fr); gap: var(--s3); align-items: start; }
.gate label { font-family: var(--sans); font-size: 13.5px; cursor: pointer; }
input[type="checkbox"] {
  appearance: none; width: 14px; height: 14px; margin: 3px 0 0;
  border: 1px solid var(--faint); border-radius: 0; background: var(--plate);
  display: inline-grid; place-content: center; cursor: pointer;
}
input[type="checkbox"]::before { content: ""; width: 8px; height: 8px; background: var(--impossible); transform: scale(0); }
input[type="checkbox"]:checked::before { transform: scale(1); }
input[type="checkbox"]:focus-visible { outline: 2px solid var(--unread); outline-offset: 2px; }

.export-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: var(--s4); }
.export-note { font-family: var(--sans); font-size: 12.5px; color: var(--dim); }

/* ---- self test --------------------------------------------------------- */

.st-grid { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin-top: var(--s4); }
.st-row { background: var(--plate); padding: var(--s3); display: grid; grid-template-columns: 4ch minmax(0, 1fr) auto; gap: var(--s3); align-items: baseline; }
.st-row .mark { font-weight: 600; }
.st-row .mark[data-ok="1"] { color: var(--ok); }
.st-row .mark[data-ok="0"] { color: var(--impossible); }
.st-row .note { font-family: var(--sans); font-size: 12.5px; color: var(--dim); grid-column: 2 / -1; }
.st-rates { margin-top: var(--s4); font-family: var(--sans); font-size: 13.5px; border-left: 2px solid var(--impossible); padding-left: var(--s3); max-width: 84ch; }
.st-rates b { font-family: var(--mono); }

/* ---- footer ------------------------------------------------------------ */

footer { max-width: var(--max); margin: 0 auto; padding: var(--s8) var(--s6); }
footer section + section { margin-top: var(--s8); }
footer h2 { margin: 0 0 var(--s4); font-size: 10px; }
footer ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: var(--s3) var(--s6); align-items: start; }
footer li { font-family: var(--sans); font-size: 13px; color: var(--dim); border-left: 1px solid var(--rule); padding-left: var(--s3); }
footer li strong { color: var(--ink); font-weight: 600; }
.sources li { font-family: var(--mono); font-size: 11.5px; }
.sources li b { color: var(--ink); font-weight: 500; }
.sources .tag { color: var(--faint); }
.colophon { margin: var(--s8) 0 0; font-size: 11px; color: var(--faint); }

@media (max-width: 720px) {
  .masthead { grid-template-columns: 1fr; padding: var(--s6) var(--s4) var(--s4); }
  main, footer { padding-left: var(--s4); padding-right: var(--s4); }
  .finding { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }