/* What the Dark Tells: the post's own styles. Loaded by the essay (first line of its Markdown).
   Figures 2 to 7 are drawn into the page by wtdt.js; these rules style them and the post's callouts. */
:root {
	--o-esc: #199e70;
	--o-ret: #3987e5;
	--o-cau: #d95926;
	--o-kil: #f0a583;
	--o-oot: #6f747c;
	--wt-2: #a9a69f;
	--wt-3: #8b8880;
}

html { scroll-behavior: smooth; }
.prose h3, .prose h4, .prose figure, .prose .tcap, .prose details { scroll-margin-top: 24px; }

/* Findings and failures: a small numbered label over the heading */
.prose h4 { font-size: 1.05rem; line-height: 1.3; margin: 2em 0 0.6em; }
.prose .kick { display: block; font: 600 0.8rem/1 var(--font-sans); color: var(--color-accent); margin-bottom: 7px; }
.prose .kick-sep { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Table captions and notes */
.essay-content .prose p.tcap { font-family: var(--font-sans); font-size: 0.8rem; color: var(--wt-2); margin: 1.6em 0 6px; }
.essay-content .prose p.tcap strong { color: var(--color-text); font-weight: 600; }
.essay-content .prose p.tnote { font-family: var(--font-sans); font-size: 0.8rem; line-height: 1.5; color: var(--wt-2); margin: 10px 0 1.4em; }

/* Callouts */
.prose aside.note, .prose aside.hind { font-family: var(--font-sans); font-size: 0.84rem; line-height: 1.55; color: var(--wt-2); border-radius: 6px; padding: 12px 14px; margin: 0 0 1.4em; }
.prose aside.note { background: var(--color-surface); }
.prose aside.hind { border: 1px dashed #3a3f46; }
.essay-content .prose aside p { margin: 0; }
.prose aside .kick { margin-bottom: 6px; }

/* Appendix */
.prose details.app { border-top: 1px solid var(--color-rule); padding: 10px 0; }
.prose details.app summary { cursor: pointer; font-family: var(--font-sans); font-size: 0.9rem; }
.prose details.app summary strong { font-weight: 600; }
.essay-content .prose table.wide th { white-space: normal; min-width: 64px; vertical-align: bottom; }
.essay-content .prose ul.figlist { font-family: var(--font-sans); font-size: 0.84rem; list-style: none; padding-left: 0; }
.essay-content .prose ul.figlist li { margin-bottom: 0.5em; }

/* A name in the text that highlights that player in every figure */
.prose .follow { font: inherit; color: inherit; background: none; border: 0; padding: 0 2px; margin: 0 -2px; border-radius: 3px; outline: 1px dotted var(--wt-3); outline-offset: 0; cursor: pointer; }
.prose .follow[aria-pressed="true"] { background: var(--color-accent); color: #0f1113; outline-color: transparent; }

/* Figures */
.wt { font-family: var(--font-sans); position: relative; }
.wt svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.wt-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.wt-chips-l { font-size: 11px; color: var(--wt-3); margin-right: 2px; min-width: 38px; }
.wt-chip { font: 500 12px/1 var(--font-sans); color: var(--wt-2); background: transparent; border: 1px solid #33373d; border-radius: 999px; padding: 7px 10px; cursor: pointer; }
.wt-chip-o { display: inline-flex; align-items: center; gap: 5px; }
.wt-chip[aria-pressed="true"] { background: var(--color-text); color: #15171a; border-color: var(--color-text); }
.wt-chip:focus-visible, .prose .follow:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.wt-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 2px 0 12px; font-size: 11px; color: var(--wt-2); }
.wt-leg { display: inline-flex; align-items: center; gap: 5px; }
.wt-sw { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.wt-sw0 { background: var(--o-esc); } .wt-sw1 { background: var(--o-ret); } .wt-sw2 { background: var(--o-cau); }
.wt-sw3 { background: var(--o-kil); } .wt-sw4 { background: var(--o-oot); } .wt-sw5 { border: 1px solid var(--wt-3); }
.wt-lab { font-size: 11px; fill: var(--wt-2); }
.wt-click { cursor: pointer; }
.wt-num { font-size: 11px; fill: var(--color-text); font-variant-numeric: tabular-nums; }
.wt-faint { fill: var(--wt-3); }
.wt-ax { font-size: 10px; fill: var(--wt-3); }
.wt-ax.wt-on { fill: var(--color-text); font-weight: 600; }
.wt-let { font-size: 9.5px; font-weight: 600; fill: #101214; pointer-events: none; }
.wt-let-x { fill: var(--wt-3); }
.wt-inv { stroke: var(--wt-3); stroke-width: 1; }
.wt-cell:hover { filter: brightness(1.25); }
.wt-colsel { fill: none; stroke: var(--color-text); stroke-width: 1.5; pointer-events: none; }
.wt-grid { stroke: var(--color-rule); stroke-width: 1; }
.wt-base { stroke: #30343a; stroke-width: 1; }
.wt-brk { stroke: var(--wt-3); stroke-width: 1; }
.wt-med { fill: var(--color-text); }
.wt-seedline { stroke: var(--color-text); stroke-width: 1; opacity: 0.5; pointer-events: none; }
.wt-miss { fill: #22262b; }
.wt-hit { cursor: crosshair; }
.wt-tip { display: none; position: absolute; z-index: 10; pointer-events: none; background: #0d0e10; border: 1px solid #33373d; border-radius: 6px; padding: 7px 10px; font-family: var(--font-sans); max-width: 240px; }
.wt-tip-v { font-size: 13px; font-weight: 600; color: var(--color-text); }
.wt-tip-l { font-size: 11px; color: var(--wt-2); line-height: 1.4; }

@media (max-width: 480px) {
	.wt-chip { padding: 7px 9px; }
}
/* Fig 1's how-to, above the figure, so a reader knows how to work it before it starts. */
.essay-content .prose .fighint { font: 400 13px/1.45 var(--font-sans); color: var(--wt-2); margin: 0 0 8px; }
/* A table that would scroll sideways gets a slightly smaller face first (wtdt.js adds .tight). */
.essay-content .prose table.tight { font-size: 0.8rem; }
.essay-content .prose table.tight th, .essay-content .prose table.tight td { padding-right: 9px; }
.essay-content .prose table.wide.tight th { min-width: 50px; }
/* Fig 6: the ring on a marked seed's runs. */
.wt-ring { fill: none; stroke: var(--color-text); stroke-width: 1.2; pointer-events: none; }
/* Fig 7: one bar per model. */
.wt-bar { fill: var(--wt-2); }
/* The short version, under the opening: a callout in the body's own colour, since it is the post in brief. */
.prose aside.bluf { color: var(--color-text); font-size: 0.9rem; }
.essay-content .prose aside ul { margin: 0; padding-left: 1.1em; }
.essay-content .prose aside li { margin: 0 0 6px; }
.essay-content .prose aside li:last-child { margin-bottom: 0; }
/* Fig 3: the line between the runs that never lifted the Heart and the runs that did. */
.wt-centre { stroke: var(--wt-2); stroke-width: 1; pointer-events: none; }

/* What transfers: two columns of prose, stacked on a phone. */
.essay-content .prose table.xfer { display: table; width: 100%; font-size: 0.86rem; line-height: 1.5; }
.essay-content .prose table.xfer th, .essay-content .prose table.xfer td { white-space: normal; vertical-align: top; width: 50%; padding: 10px 18px 10px 0; }
.essay-content .prose table.xfer td:last-child, .essay-content .prose table.xfer th:last-child { padding-right: 0; }
@media (max-width: 640px) {
  .essay-content .prose table.xfer, .essay-content .prose table.xfer tbody, .essay-content .prose table.xfer tr, .essay-content .prose table.xfer td { display: block; width: auto; }
  .essay-content .prose table.xfer thead { display: none; }
  .essay-content .prose table.xfer td { padding: 8px 0; border: 0; }
  .essay-content .prose table.xfer tr { border-bottom: 1px solid var(--color-rule); padding: 6px 0; }
  .essay-content .prose table.xfer td:last-child::before { content: attr(data-l) ". "; font-weight: 600; color: var(--color-text); }
}

/* The endings table and the concordance scale (12 Nov). */
.essay-content .prose table.ends { display: table; width: 100%; font-size: 0.86rem; }
.essay-content .prose table.ends th, .essay-content .prose table.ends td { white-space: normal; vertical-align: top; }
.essay-content .prose .concfig { margin: 20px 0 28px; }
.essay-content .prose .concfig svg { display: block; width: 100%; max-width: 520px; height: auto; }
.essay-content .prose .concfig text { font-family: var(--font-sans, system-ui, sans-serif); font-size: 12px; fill: currentColor; }
.essay-content .prose .concfig text.end { opacity: 0.75; }
.essay-content .prose .concfig .ax, .essay-content .prose .concfig .rng { stroke: currentColor; stroke-width: 1; opacity: 0.55; }
.essay-content .prose .concfig .rng { opacity: 0.9; stroke-width: 1.5; }
.essay-content .prose .concfig .dot { fill: currentColor; opacity: 0.85; }
.essay-content .prose .concfig .dot.hollow { fill: var(--color-bg, #111); stroke: currentColor; stroke-width: 1.5; opacity: 1; }