/* Long-form styling for the two companion pages (methodology, statistics).
   Loaded after style.css, which already supplies the palette, the masthead,
   the mana bar and the footer -- this file only adds what running prose and
   charts need, so the three pages stay visibly one thing. */

/* Running text is capped near a 65-character measure. The statistics page opts
   out with .wide: its bars want the width, and a 20-row chart squeezed into a
   text column stops being readable as a chart. */
.prose {
  max-width: 38rem;
  margin: 0 auto;
  /* Must restate the plate's padding: this selector outranks the bare `main`
     rule that sets it, so omitting it here silently flattens the card. */
  padding: 1.75rem 1.9rem 2.75rem;
}

.prose.wide { max-width: 54rem; }

@media (max-width: 34rem) {
  .prose { padding: 1.2rem 1.1rem 2rem; }
}

/* Running text wants a measure near 65 characters and more line height than
   the sheet, which is deliberately dense because it has to fit on paper. */
.prose p,
.prose li,
.prose dd {
  line-height: 1.65;
  color: var(--ink-2);
}

.prose h2 {
  margin: 3rem 0 .85rem;
  font-size: 1.42rem;
  letter-spacing: .01em;
  text-wrap: balance;
  color: var(--ink);
}

/* A hairline that fades out rather than stopping: the full-width rule reads as
   a divider between unrelated things, and these sections are a sequence. */
.prose h2::after {
  content: '';
  display: block;
  height: 1px;
  margin-top: .5rem;
  background: linear-gradient(to right,
    color-mix(in srgb, var(--ink) 32%, transparent),
    transparent 62%);
}

.prose h3 {
  margin: 1.75rem 0 .4rem;
  font-size: 1rem;
  letter-spacing: .02em;
  color: var(--ink);
}

.prose section:first-of-type h2 { margin-top: 1.5rem; }

.prose code {
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, monospace;
  font-size: .88em;
  padding: .08em .34em;
  border-radius: 3px;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  color: var(--ink);
}

/* --- Contents ----------------------------------------------------------- */

.toc {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .9rem;
  margin: 1.5rem 0 .5rem;
  padding-bottom: 1.1rem;
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
}

.toc a {
  color: var(--ink-3);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.toc a:hover,
.toc a:focus-visible { color: var(--ink); border-bottom-color: currentColor; }

/* --- Definition lists --------------------------------------------------- */

.defs { margin: 1rem 0 0; }

.defs dt {
  margin-top: 1.1rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--ink);
}

.defs dd {
  margin: .3rem 0 0;
  padding-left: .95rem;
  border-left: 2px solid color-mix(in srgb, var(--ink) 16%, transparent);
}

/* --- Numbered steps ----------------------------------------------------- */

/* Numbers here are load-bearing: extraction really is three passes in order,
   and the third exists because the first two structurally cannot see it. */
.steps {
  list-style: none;
  counter-reset: step;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.35rem;
}

.steps > li {
  counter-increment: step;
  position: relative;
  padding-left: 2.6rem;
}

.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -.08rem;
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--ink) 26%, transparent);
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}

.steps h3 { margin-top: 0; }
.steps p { margin: .25rem 0 0; }

/* --- Table -------------------------------------------------------------- */

/* Wide content scrolls inside its own box so the page body never does. */
.scroll { overflow-x: auto; margin: 1.25rem 0 0; }

.grid {
  width: 100%;
  min-width: 30rem;
  border-collapse: collapse;
  font-size: .92rem;
}

.grid th,
.grid td {
  padding: .6rem .7rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}

.grid th {
  font-size: .74rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.grid td { color: var(--ink-2); }
.grid td:first-child { white-space: nowrap; }

/* Whether a source may print is the one thing this table exists to say, so it
   carries color as well as a word. */
.grid .yes,
.grid .no {
  white-space: nowrap;
  font-weight: 600;
}

.grid .yes { color: var(--g); }
.grid .no  { color: var(--ink-3); }

/* --- Asides and lists --------------------------------------------------- */

.aside {
  margin: 1.25rem 0 0;
  padding: .8rem 1rem;
  border-left: 2px solid var(--u);
  background: color-mix(in srgb, var(--u) 7%, transparent);
  font-size: .93rem;
}

.plain { margin: 1rem 0 0; padding-left: 1.15rem; }
.plain > li { margin-bottom: .7rem; }

/* --- Statistics --------------------------------------------------------- */

.statbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .75rem 1.1rem;
  margin: 1.5rem 0 0;
}

.statbar .field { margin: 0; }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: .75rem;
  margin: 1.75rem 0 0;
}

.card {
  padding: .85rem .9rem;
  border: 1px solid color-mix(in srgb, var(--ink) 13%, transparent);
  border-radius: 4px;
  background: color-mix(in srgb, var(--ink) 3%, transparent);
}

.card .n {
  display: block;
  font-size: 1.65rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: var(--ink);
}

.card .k {
  display: block;
  margin-top: .2rem;
  font-size: .72rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Each chart's colored edge is the mana color assigned to it, set inline by
   stats.js, so the five charts read as a set rather than five separate boxes. */
.chart { margin: 2.5rem 0 0; }

.chart h2 { margin-bottom: .2rem; }

.chart .note {
  margin: 0 0 .9rem;
  font-size: .87rem;
  color: var(--ink-3);
}

/* Horizontal bars: a label column, the bar, then the figure. Grid rather than
   flex so every label lines up across rows regardless of length. */
.bars { display: grid; gap: .3rem; }

.bar {
  display: grid;
  grid-template-columns: minmax(6rem, 11rem) 1fr auto;
  align-items: center;
  gap: .6rem;
  font-size: .88rem;
}

/* Share bars carry two figures: the percentage the bar draws, and the raw
   counts behind it. The percentage is the headline and lines up with the bar;
   the counts sit after it, quieter, for the reader who wants to know whether a
   share rests on 40 cards or on 1. */
.bar:has(.sub) { grid-template-columns: minmax(6rem, 11rem) 1fr auto auto; }

.bar .sub {
  font-variant-numeric: tabular-nums;
  font-size: .8rem;
  color: color-mix(in srgb, var(--ink-3) 80%, transparent);
  min-width: 3.2rem;
  text-align: right;
}

.bar .lbl {
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* display:block is load-bearing on all three of these. They are spans, and an
   inline box ignores width, height and transform outright -- the bars rendered
   as empty gray tracks, and a computed-style check does not catch it because
   getComputedStyle still reports the specified width. */
.bar .track {
  display: block;
  height: .72rem;
  border-radius: 2px;
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  overflow: hidden;
}

.bar .fill {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--hue, var(--ink-2));
  /* A darker ring of the same hue, echoing the dark ring on a real mana symbol.
     It is what lets the pale white-mana swatch stay legible without pushing its
     color away from parchment. */
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hue, var(--ink-2)) 42%, #000);
  /* Deliberately not animated. An entry animation has to start from scaleX(0),
     which makes the resting state of every bar "invisible" and the drawn chart
     contingent on the animation actually running -- and when it does not run,
     the whole chart reads as empty gray tracks. The bars are rebuilt on every
     filter change too, so replaying it was noise rather than polish. */
}

.bar .val {
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
  min-width: 2.6rem;
  text-align: right;
}

/* A second segment drawn over the first, for the explained/unexplained split. */
.bar .track.split { display: flex; }
.bar .track.split .fill:last-child { opacity: .32; }


.legend {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  margin: .8rem 0 0;
  font-size: .8rem;
  color: var(--ink-3);
}

.legend span { display: inline-flex; align-items: center; gap: .35rem; }

.legend i {
  display: inline-block;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hue, var(--ink-2)) 42%, #000);
  width: .7rem;
  height: .7rem;
  border-radius: 2px;
  background: var(--hue, var(--ink-2));
}

.legend i.faint { opacity: .32; }

@media (max-width: 30rem) {
  .bar { grid-template-columns: minmax(4.5rem, 7rem) 1fr auto; font-size: .82rem; }
}

/* These pages are for reading on a screen; the sheet is the thing that prints.
   Printing one should still produce something sane, so charts keep their ink. */
@media print {
  .toc, .statbar { display: none; }
  .prose { max-width: none; padding: 0; }
}

/* --- Filters panel ------------------------------------------------------ */

.settings {
  margin: .5rem 0 0;
  font-size: .88rem;
}

.settings > summary {
  cursor: pointer;
  padding: .3rem 0;
  color: var(--ink-2);
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: .76rem;
}

.settings > summary:focus-visible { outline: 2px solid var(--u); outline-offset: 2px; }

/* Says what is filtered while the panel is shut, so a narrowed chart cannot be
   mistaken for the whole scope. */
.settings .applied {
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-3);
}

.settings .chips { margin-top: .5rem; }

/* --- Color toggles ----------------------------------------------------- */

.swatches { margin: .2rem 0 1.25rem; }

.swatch i {
  display: inline-block;
  width: .8rem;
  height: .8rem;
  margin-right: .4rem;
  border-radius: 2px;
  background: var(--hue);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hue) 42%, #000);
  vertical-align: -.08em;
}

/* An unchecked color dims its own swatch, so the control shows its state in
   the same visual language as the chart it drives. */
.swatch:has(input:not(:checked)) { opacity: .45; }
.swatch:has(input:not(:checked)) i { background: transparent; }

/* --- Sub-charts --------------------------------------------------------- */

.subchart { margin-top: 1.5rem; }

.subchart h3 {
  margin: 0 0 .15rem;
  font-size: .95rem;
  color: var(--ink);
}

.subchart .note { margin-bottom: .7rem; }

/* Segments of a color-split bar butt against each other, so each needs an edge
   to stay distinct where two similar colors meet. */
.bar .track.split .seg + .seg {
  box-shadow: inset 1px 0 0 color-mix(in srgb, var(--ground) 65%, transparent),
              inset 0 0 0 1px color-mix(in srgb, var(--hue, var(--ink-2)) 42%, #000);
}

.bar .track.split .seg:last-child { opacity: 1; }

/* --- Long-press tooltip -------------------------------------------------- */

/* Hover is a mouse idea; on a phone the segment counts were simply unreachable.
   This is what a long press puts on screen. */
.tip {
  position: absolute;
  z-index: 50;
  max-width: 16rem;
  padding: .38rem .6rem;
  border-radius: 4px;
  background: var(--ink);
  color: var(--ground);
  font-size: .78rem;
  line-height: 1.35;
  pointer-events: none;
  box-shadow: 0 6px 20px -8px rgba(0,0,0,.5);
}

/* --- Expand / collapse --------------------------------------------------- */

.expander {
  appearance: none;
  margin: .9rem 0 0;
  padding: .4rem .85rem;
  border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  border-radius: 4px;
  background: transparent;
  font: inherit;
  font-size: .8rem;
  color: var(--ink-2);
  cursor: pointer;
}

.expander:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.expander:focus-visible { outline: 2px solid var(--u); outline-offset: 2px; }

/* An expanded color list runs to hundreds of rows, so a collapse control at
   the bottom is unreachable from inside it. This one stays on screen the whole
   way down. */
.collapse-float {
  position: sticky;
  bottom: 1rem;
  float: right;
  z-index: 10;
  margin-top: -2.2rem;
  padding: .45rem .9rem;
  border: 1px solid color-mix(in srgb, var(--ink) 20%, transparent);
  border-radius: 100px;
  background: color-mix(in srgb, var(--ground) 92%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px -10px rgba(0,0,0,.45);
  font: inherit;
  font-size: .8rem;
  color: var(--ink);
  cursor: pointer;
}

.collapse-float:focus-visible { outline: 2px solid var(--u); outline-offset: 2px; }

.fieldnote {
  margin: .5rem 0 .1rem;
  font-size: .76rem;
  line-height: 1.45;
  color: var(--ink-3);
}

@media print {
  .tip, .expander, .collapse-float { display: none; }
}

/* --- Heatmap ------------------------------------------------------------
   Replaces the stacked color bar. In a stacked bar the segment width carries
   the count, so on a 500-card mechanic the minority colors collapse to a
   sliver a pixel wide. Here a cell is the same size whatever its value, which
   makes the small numbers readable and the columns scannable top to bottom. */

.heat-scroll { overflow-x: auto; }

.heat {
  display: grid;
  grid-template-columns: minmax(6.5rem, 9rem) repeat(var(--cols), minmax(2.5rem, 1fr)) 3.6rem;
  gap: 2px;
  min-width: 22rem;

  /* TEMPORARY -- swapped for comparison, 2026-08-23.
     Normal:  --cell-ink: var(--ink);    --cell-edge: var(--ground);
     Swapped: --cell-ink: var(--ground); --cell-edge: var(--ink);
     In the light theme the swap gives white numerals with a black outline; in
     the dark theme it gives dark numerals with a light one. Flip these two
     lines to go back -- nothing else references the pair. */
  --cell-ink:  var(--ground);
  --cell-edge: var(--ink);
}

.heat .hhead {
  font-size: .68rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: center;
  padding-bottom: .3rem;
}

.heat .hlabel {
  display: flex;
  align-items: center;
  font-size: .82rem;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: .4rem;
}

/* One ink for every cell, outlined, rather than switching the text between
   light and dark depending on the fill. Picking the higher-contrast ink per
   cell measured better but looked worse: the numbers flipped color partway
   down a column, and the eye reads that as an inconsistency in the data rather
   than a rendering decision.
   The outline does the work instead. It is what lets one ink sit on everything
   from a 7% wash to a saturated fill, in either theme. */
.heat .hcell {
  display: grid;
  place-items: center;
  height: 1.8rem;
  border-radius: 3px;
  font-size: .74rem;
  font-variant-numeric: tabular-nums;
  /* Heavier than the surrounding text. At this size the stroke is a large
     fraction of the glyph, so a regular weight leaves very little fill for the
     eye to catch -- more ink in the letterform is what makes the outline read
     as definition rather than as fuzz. 600 rather than 700 because the CSS
     font-matching rules resolve it upward when a face has no semibold, so it
     lands on 700 where that is all there is and stays a step lighter where a
     real 600 exists. */
  font-weight: 600;
  color: var(--cell-ink);
  /* Fallback for engines without paint-order: eight copies of the glyph. Eight
     rather than four -- a four-way ring leaves the diagonals open, which is
     most of why the first attempt read as soft rather than crisp. */
  text-shadow:
     1px 0 0 var(--cell-edge), -1px  0   0 var(--cell-edge),
     0 1px 0 var(--cell-edge),  0   -1px 0 var(--cell-edge),
     1px 1px 0 var(--cell-edge), -1px -1px 0 var(--cell-edge),
     1px -1px 0 var(--cell-edge), -1px 1px 0 var(--cell-edge);
}

/* A real stroke on the glyph, painted behind the fill, rather than copies
   stacked behind it -- it stays sharp instead of thickening as it widens.
   paint-order is what makes it usable: without it the stroke paints *over* the
   fill and eats half the letterform, so the whole thing is gated on support for
   both properties and falls back to the shadow ring otherwise. */
@supports (paint-order: stroke) and (-webkit-text-stroke: 1px currentColor) {
  .heat .hcell {
    text-shadow: none;
    -webkit-text-stroke: 1.5px var(--cell-edge);
    paint-order: stroke fill;
  }
}

/* An empty cell is a dot on almost-nothing, so an outline is only noise there. */
.heat .hcell.zero {
  text-shadow: none;
  -webkit-text-stroke: 0;
}

/* A dot rather than a 0: an empty cell is a fact about the color pie, and a
   grid full of zeroes reads as noise. */
.heat .hcell.zero { color: color-mix(in srgb, var(--ink-3) 40%, transparent); }

.heat .htotal {
  display: grid;
  place-items: center;
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}

/* On a phone the grid has to fit the plate rather than scroll inside it: the
   totals column was being clipped mid-word. min-width goes to 0 so the columns
   compress instead of forcing a scrollbar. */
@media (max-width: 34rem) {
  .heat {
    grid-template-columns: 4.4rem repeat(var(--cols), minmax(1.8rem, 1fr)) 2.5rem;
    gap: 1px;
    min-width: 0;
  }
  .heat .hhead { font-size: .58rem; letter-spacing: .02em; }
  .heat .hlabel { font-size: .7rem; padding-right: .25rem; }
  .heat .hcell { font-size: .64rem; height: 1.5rem; }
  .heat .htotal { font-size: .66rem; }
}