/* =============================================================
   Who Killed Mr. E — Documentation surface
   Requires tokens.css. Applies the system to RuleBook.md and
   Extended Rulebook.md when rendered to HTML.
   ============================================================= */

/* -------------------------------------------------------------
   1. PAGE

   .wk-doc paints its own ground, so it must be the element that
   fills the viewport — set the same background on html/body when
   rendering, or the page shows the browser's white outside the
   measure on a dark theme.
   ------------------------------------------------------------- */

.wk-doc {
  box-sizing: border-box;
  max-width: 78ch;
  margin-inline: auto;
  padding: var(--wk-space-16) var(--wk-space-6) var(--wk-space-24);
  background: var(--wk-doc-bg);
  color: var(--wk-doc-fg);
  font-family: var(--wk-font-body);
  font-size: var(--wk-text-md);
  line-height: var(--wk-leading-body);
  text-rendering: optimizeLegibility;
}

.wk-doc :is(p, li) {
  max-width: var(--wk-measure);
  text-wrap: pretty;
}

.wk-doc :is(h1, h2, h3, h4) {
  font-family: var(--wk-font-display);
  font-weight: var(--wk-weight-display);
  line-height: var(--wk-leading-tight);
  letter-spacing: var(--wk-track-display);
  text-transform: uppercase;
  text-wrap: balance;
}

.wk-doc h1 {
  margin: 0 0 var(--wk-space-8);
  font-size: var(--wk-text-3xl);
}

/* Section heads carry a full-width rule above them. The rule is
   structural — it marks where the document is divided, and it is
   the only horizontal line in the docs that is not a table
   border. It is deliberately NOT a redaction bar: a bar has to
   sit over something, and there is nothing above a heading. */
.wk-doc h2 {
  position: relative;
  margin: var(--wk-space-16) 0 var(--wk-space-4);
  padding-top: var(--wk-space-4);
  font-size: var(--wk-text-xl);
}

.wk-doc h2::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 6px;
  background: var(--wk-doc-fg);
}

.wk-doc h3 {
  margin: var(--wk-space-8) 0 var(--wk-space-2);
  font-size: var(--wk-text-lg);
}

.wk-doc :is(p, ul, ol) {
  margin: 0 0 var(--wk-space-4);
}

.wk-doc a {
  color: inherit;
  text-decoration-color: var(--wk-flag-red);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: background var(--wk-dur-hover) var(--wk-ease-wipe);
}

.wk-doc a:hover {
  background: var(--wk-flag-red);
  color: var(--wk-paper-000);
  text-decoration-color: transparent;
}

.wk-doc :focus-visible {
  outline: 3px solid var(--wk-focus);
  outline-offset: 2px;
}

/* Card stats are drawn as glyphs, so every .wk-stat needs a text
   equivalent. Put it in an aria-label where possible; use this
   when the stat needs a visible-to-screen-reader-only string. */
.wk-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* -------------------------------------------------------------
   2. EYEBROW — the file header above a section title.
   Use for classification-style metadata only ("MODE #1",
   "COVER-UP FACTION"). Not for subtitles.
   ------------------------------------------------------------- */

.wk-eyebrow {
  display: block;
  margin-bottom: var(--wk-space-2);
  color: var(--wk-doc-muted);
  font-family: var(--wk-font-mono);
  font-size: var(--wk-text-2xs);
  letter-spacing: var(--wk-track-eyebrow);
  text-transform: uppercase;
}

/* -------------------------------------------------------------
   3. REDACTION — the signature element

   Rules, and they are strict:
     · always --wk-ink-900, never a tint, never an actor color.
       No actor field and no panel uses ink-900, so a bar is
       always a bar and never mistakable for a ground.
     · always sits over something; a bar with nothing under it
       is decoration and does not belong in this system
     · reveals on hover, focus and click, and stays revealed
       once opened

   Used for: the logo lockup, the Cover-Up actor band, and hiding
   answers or spoiler rules in the docs. Three places. Adding a
   fourth needs a reason.
   ------------------------------------------------------------- */

.wk-redact {
  position: relative;
  border: 0;
  padding: 0 0.15em;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.wk-redact::after {
  content: "";
  position: absolute;
  inset: -0.1em -0.15em;
  transform-origin: left center;
  background: var(--wk-ink-900);
  /* On a dark page the bar is ink on ink. It keeps a hairline so
     the reader can still see that something is covered — an
     invisible redaction reads as missing text, not hidden text. */
  outline: var(--wk-hair) solid var(--wk-doc-line);
  transition: transform var(--wk-dur-wipe) var(--wk-ease-wipe);
}

.wk-redact:is(:hover, :focus-visible, [aria-expanded="true"])::after {
  outline-color: transparent;
  transform: scaleX(0);
}

/* -------------------------------------------------------------
   4. ACTOR AND FACTION TAGS

   An actor tag names an actor in running text, filled with that
   actor's field color from en/layouts.json — the same color the
   player sees on the card, so the page and the deck agree.

   Actor color appears in the docs ONLY as a filled tag, never as
   text. Two of the five are a near-black and a near-white, so as
   text they would fail against one theme or the other (Villain
   is 1.27:1 on a dark page, Victim 1.01:1 on a light one).
   ------------------------------------------------------------- */

.wk-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.1em 0.6em 0.15em;
  border-radius: var(--wk-radius-chip);
  font-family: var(--wk-font-body);
  font-size: 0.85em;
  font-weight: var(--wk-weight-body-strong);
  letter-spacing: 0.02em;
  white-space: nowrap;
  /* Every actor tag keeps a keyline. Which tag needs it flips
     with the theme — Victim disappears into a light page, Villain
     into a dark one — so all five carry it and none is special. */
  box-shadow: inset 0 0 0 var(--wk-hair) var(--wk-doc-fg);
}

/* Text color is the panel rule from cards.css §2: whichever of
   ink or paper contrasts with the field. All five clear 4.5:1. */
.wk-tag--villain { background: var(--wk-villain); color: var(--wk-paper-000); }
.wk-tag--politician { background: var(--wk-politician); color: var(--wk-ink-900); }
.wk-tag--media { background: var(--wk-media); color: var(--wk-paper-000); }
.wk-tag--victim { background: var(--wk-victim); color: var(--wk-ink-900); }
.wk-tag--detective { background: var(--wk-detective); color: var(--wk-paper-000); }

/* Faction tags carry the card convention into the docs, and the
   convention is now the bar, not the ground: a Cover-Up card
   wears a redaction bar across its actor band, a Truth card
   shows the band uncovered. So the Cover-Up tag IS a bar, and
   the Truth tag is the same shape left open. */
.wk-tag--coverup {
  background: var(--wk-ink-900);
  box-shadow: inset 0 0 0 var(--wk-hair) var(--wk-doc-line);
  color: var(--wk-paper-100);
}

.wk-tag--truth {
  background: none;
  box-shadow: inset 0 0 0 var(--wk-keyline) var(--wk-doc-fg);
  color: var(--wk-doc-fg);
}

/* -------------------------------------------------------------
   5. INLINE STATS — cost, gain, thresholds in running text.
   ------------------------------------------------------------- */

.wk-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3em;
  padding: 0.05em 0.5em 0.1em;
  border: 2px solid currentColor;
  border-radius: var(--wk-radius-panel);
  font-family: var(--wk-font-mono);
  font-size: 0.85em;
  font-weight: 700;
  white-space: nowrap;
}

/* Flag navy and flag red are both too dark to sit on an ink
   page, so on the dark surface the chips resolve to the lifted
   flag stops. --wk-chip-cost/-gain are theme tokens, so this
   holds for the system setting as well as an explicit toggle. */
.wk-chip--cost { color: var(--wk-chip-cost); }
.wk-chip--gain { color: var(--wk-chip-gain); }

/* Threshold display — 30 NS / 20 NS. The one place a number is
   allowed to be large. */
.wk-threshold {
  display: block;
  font-family: var(--wk-font-display);
  font-weight: var(--wk-weight-display);
  font-size: var(--wk-text-2xl);
  line-height: var(--wk-leading-tight);
  letter-spacing: var(--wk-track-display);
}

/* -------------------------------------------------------------
   6. CALLOUT

   For rules that decide arguments: what happens to a nullified
   special action, how the final round is counted, what a
   blocked Homeland still contributes at scoring.
   ------------------------------------------------------------- */

.wk-callout {
  margin: var(--wk-space-6) 0;
  padding: var(--wk-space-4) var(--wk-space-6);
  border-left: 6px solid var(--wk-callout-accent);
  background: var(--wk-doc-panel);
}

.wk-callout > :last-child {
  margin-bottom: 0;
}

.wk-callout__label {
  display: block;
  margin-bottom: var(--wk-space-2);
  color: var(--wk-callout-accent);
  font-family: var(--wk-font-stencil);
  font-size: var(--wk-text-xs);
  font-weight: var(--wk-weight-display);
  letter-spacing: var(--wk-track-stamp);
  text-transform: uppercase;
}

/* -------------------------------------------------------------
   7. TABLES — deck lists, cost/gain breakdowns.
   ------------------------------------------------------------- */

.wk-doc table {
  width: 100%;
  margin: var(--wk-space-6) 0;
  border-collapse: collapse;
  font-size: var(--wk-text-sm);
}

.wk-doc :is(th, td) {
  padding: var(--wk-space-2) var(--wk-space-3);
  border-bottom: var(--wk-hair) solid var(--wk-doc-line);
  text-align: left;
  vertical-align: baseline;
}

.wk-doc th {
  border-bottom-width: 2px;
  border-bottom-color: var(--wk-doc-fg);
  font-family: var(--wk-font-mono);
  font-size: var(--wk-text-2xs);
  font-weight: 700;
  letter-spacing: var(--wk-track-eyebrow);
  text-transform: uppercase;
}

.wk-doc td:is(.is-num) {
  font-family: var(--wk-font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* -------------------------------------------------------------
   8. FIGURES
   ------------------------------------------------------------- */

.wk-doc figure {
  margin: var(--wk-space-8) 0;
}

.wk-doc img {
  display: block;
  max-width: 100%;
  height: auto;
}

.wk-doc figcaption {
  margin-top: var(--wk-space-2);
  color: var(--wk-doc-muted);
  font-family: var(--wk-font-mono);
  font-size: var(--wk-text-2xs);
  letter-spacing: 0.04em;
}

/* -------------------------------------------------------------
   9. PRINT
   ------------------------------------------------------------- */

@media print {
  .wk-doc {
    max-width: none;
    padding: 0;
    background: #fff;
    color: #000;
    font-size: 10.5pt;
  }

  .wk-doc :is(h2, h3) {
    break-after: avoid;
  }

  /* A redaction in a printed rulebook cannot be revealed, so the
     bar is not printed and the text below it prints in the clear.
     Do not use .wk-redact for anything that must stay hidden in
     a PDF — it only hides on screen. */
  .wk-redact::after {
    display: none;
  }
}