/* MTG Mechanics Cheat Sheet — "Shard"
 *
 * Color as geometry rather than atmosphere. Hard-edged faceted planes in the
 * five mana colors on a bone-white ground, black keylines, offset block
 * shadows. Crystalline instead of gaseous — which is also why it is the one
 * vivid direction that survives printing: the identity lives in rules and
 * offsets, and a printer lays those down exactly.
 *
 * The five colors are Magic's own. Black is black (#2B2620 on light, the mana
 * symbol's warm gray #CBC2BF on dark) — purple is not a Magic color, it is
 * what you get by mixing two of them.
 *
 * No webfonts: an external font is a request that can fail on venue wifi and a
 * dependency the print path cannot rely on.
 *
 * Hand-written, no build step, relative paths only.
 */

:root {
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* WUBRG, saturated set — for the light ground. */
  --w: #cbb679;
  --u: #0e68ab;
  --b: #2b2620;
  --r: #d3202a;
  --g: #00733e;

  --ground: #f6f5f2;
  --panel:  #ffffff;
  --ink:    #0c0c12;
  --ink-2:  #46433d;
  --ink-3:  #69655c;
  --rule:   #0c0c12;
  --facet:  .85;   /* opacity of the radiate layer */
  --plate:  88%;   /* how solid the cards sitting on it are */

  /* A second, more saturated ramp used *only* by the background.
     The symbol colors the mana glyphs are drawn in are pale tints meant to sit
     inside a dark ring; spread across a page with nothing to contain them they
     dissolve into the paper -- at any opacity that keeps text readable they are
     not perceptible at all. These are the same hues carried to a weight that
     survives being a wash.

     Vivid, but deliberately *light*. Chroma is what makes a color read;
     darkness is what eats the text on top of it. Choosing high-chroma, high-
     luminance versions lets the layer run at .85 -- nearly twice the previous
     weight -- while every surface above it stays legible. Black is the one that
     cannot follow the rule, so it is carried as a warm gray, which is also how
     the mana symbol draws it. */
  --w-air: #f0d861;
  --u-air: #3fb0ef;
  --b-air: #8f8279;
  --r-air: #ff6a45;
  --g-air: #3fca7d;
  --offset: 3px;   /* block-shadow throw */
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Shard commits to hard edges, not to a light ground: inverted, the
       keylines go white and the facets take the mana symbols' own pale faces —
       which is how a card renders black on a dark field too. */
    /* Not the mana-symbol tints. Those are drawn to sit inside a dark ring at
       glyph size, and as flat fills they all land between 72% and 92%
       lightness -- so at full strength every column washed out to a pastel and
       the five stopped being distinguishable from each other (worst pair 90 on
       a perceptual distance; this set is 189). Red was the clearest tell: the
       symbol tint is hue 15, an orange-salmon, against light mode's 357.
       These carry the light palette's hues, which already read as WUBRG, lifted
       in luminance so they show on near-black. Black cannot be black on a dark
       ground, so it stays a warm grey -- but a much deeper one than before. */
    --w: #cdb570;
    --u: #248fdb;
    --b: #7a7066;
    --r: #d5343c;
    --g: #1daf6b;

    --ground: #0c0c12;
    --panel:  #16161d;
    --ink:    #f4f3ef;
    --ink-2:  #b8b4ab;
    --ink-3:  #8d8981;
    --rule:   #f4f3ef;
    /* Dark mode inverts the rule rather than mirroring the palette. On a light
       ground the sectors must stay light so dark text survives on them; on a
       dark ground they must stay *dark* so light text does. Reusing the light
       palette here put near-white masthead text on bright color and dropped it
       to 2.4:1. These are the same five hues taken deep instead. */
    --facet:  .95;
    --plate:  90%;
    --w-air: #7a6820;
    --u-air: #12557f;
    --b-air: #4a423c;
    --r-air: #8f2f18;
    --g-air: #175c36;
  }
}

* { box-sizing: border-box; }

/* `hidden` is only a UA `display: none`, so any rule that sets display beats
   it. `.field { display: grid }` did exactly that, which left the decklist box
   on screen in every scope mode, not just deck mode. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0 auto;
  padding: 2.25rem 1.25rem 4rem;
  max-width: 62rem;
  min-height: 100vh;
  color: var(--ink);
  background: var(--ground);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Five sectors radiating from the center of the viewport -- white at twelve
   o'clock, then blue, black, red, green clockwise, the same wheel order as the
   sigil in the masthead.
   Each color holds a solid 40 degrees at the middle of its sector and spends
   the remaining 32 crossing into its neighbour, so the five stay individually
   readable while no seam is a visible line. Two stops per color is what buys
   that: one where it starts holding, one where it starts giving way.
   The radial mask keeps the middle clear, because the middle is where the text
   column sits. Fixed, so scrolling does not drag it, and behind everything so
   nothing inherits the stack. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--facet);
  filter: blur(10px);
  background: conic-gradient(from 0deg at 50% 50%,
    var(--w-air)   0deg, var(--w-air)  20deg,
    var(--u-air)  52deg, var(--u-air)  92deg,
    var(--b-air) 124deg, var(--b-air) 164deg,
    var(--r-air) 196deg, var(--r-air) 236deg,
    var(--g-air) 268deg, var(--g-air) 308deg,
    var(--w-air) 340deg, var(--w-air) 360deg);
  -webkit-mask-image: radial-gradient(78% 88% at 50% 50%,
    transparent 0%, transparent 26%, #000 84%);
  mask-image: radial-gradient(78% 88% at 50% 50%,
    transparent 0%, transparent 26%, #000 84%);
}

/* The plate. Content sits on a translucent card rather than straight on the
   radiate, which is what lets the background carry real color instead of
   being tuned down until it is invisible.
   Measured against the vivid layer, only full-strength --ink clears AA on bare
   color (6.5:1); --ink-2 gets 3.3 and --ink-3 only 1.9. So every surface
   carrying quiet text needs a plate, and the plate has to be at least 82%
   opaque -- it sits at 88%.
   The masthead is the exception and stays off it: its text is promoted to full
   ink instead, because a title standing directly on the color is the best
   thing on the page. */
main,
footer,
.topnav {
  position: relative;
  border-radius: 8px;
  padding: 1.6rem 1.6rem 2rem;
  background: color-mix(in srgb, var(--ground) var(--plate), transparent);
  backdrop-filter: blur(7px) saturate(1.06);
  -webkit-backdrop-filter: blur(7px) saturate(1.06);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--ink) 9%, transparent),
    0 14px 44px -28px rgba(0, 0, 0, .45);
}

/* Without backdrop-filter the plate would be a flat wash over the sectors, so
   it leans on opacity instead and gives up the frosting. */
@supports not (backdrop-filter: blur(1px)) {
  main, footer, .topnav { background: color-mix(in srgb, var(--ground) 96%, transparent); }
}

@media (max-width: 34rem) {
  main { padding: 1.1rem 1rem 1.4rem; border-radius: 6px; }
  footer { border-radius: 6px; }

}

/* The plates float as separate cards, so the gutters between them are where the
   radiate actually shows on a narrow screen. They are worth a little room. */


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

.masthead { display: grid; gap: .5rem; margin-bottom: 1.75rem; }

.sigil { width: 3rem; height: 3rem; overflow: visible; color: var(--ink); }
.sigil .pips circle { stroke: var(--ink); }

.eyebrow {
  margin: 0;
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  /* Full ink, not --ink-2: this sits directly on the radiate, where only
     full-strength ink clears AA against every sector. */
  color: var(--ink);
}

h1 {
  margin: 0;
  font-size: clamp(2rem, 6vw, 3.1rem);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1;
}

.flourish { display: none; }   /* the facets do the ornament's job */

.tagline { margin: 0; max-width: 34rem; color: var(--ink); font-size: .95rem; }

/* The mana thread, faceted rather than smooth: hard segments, black keyline. */
.manabar {
  height: 9px;
  border: 1px solid var(--rule);
  border-radius: 0;
  background: linear-gradient(90deg,
    var(--w) 0 20%, var(--u) 20% 40%, var(--b) 40% 60%,
    var(--r) 60% 80%, var(--g) 80% 100%);
}
.masthead-bar { margin: .3rem 0 .15rem; }

.print-scope { display: none; }

/* ---------------------------------------------------------- controls ---- */

.controls {
  display: grid;
  gap: .9rem;
  padding: 1.1rem;
  margin-bottom: 1.75rem;
  background: var(--panel);
  border: 1px solid var(--rule);
  box-shadow: var(--offset) var(--offset) 0 var(--rule);
}

.field { display: grid; gap: .35rem; }
.two-up { grid-template-columns: 1fr auto auto; gap: .7rem; align-items: end; }
.two-up > div { display: grid; gap: .35rem; }
@media (max-width: 44rem) { .two-up { grid-template-columns: 1fr 1fr; } }
@media (max-width: 30rem) { .two-up { grid-template-columns: 1fr; } }

.field label, .two-up label {
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.selects { display: flex; gap: .5rem; flex-wrap: wrap; }
.selects select { flex: 1 1 11rem; min-width: 0; }

select, input[type="search"], textarea, button {
  font-family: var(--sans);
  font-size: .92rem;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: .45rem .55rem;
  width: 100%;
}
select { cursor: pointer; }
textarea { font-family: var(--mono); font-size: .8rem; line-height: 1.5; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible {
  outline: 2px solid var(--u);
  outline-offset: 1px;
}

button.primary {
  width: auto;
  justify-self: start;
  cursor: pointer;
  padding: .5rem 1.1rem;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ground);
  background: var(--ink);
  border: 1px solid var(--rule);
  box-shadow: var(--offset) var(--offset) 0 var(--r);
  transition: transform .08s, box-shadow .08s;
}
button.primary:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--r); }
button.primary:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--r); }
.print-button { justify-self: end; }
.deck-field button { justify-self: start; }

.chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .28rem .6rem;
  border: 1px solid var(--rule);
  background: var(--panel);
  font-size: .76rem;
  color: var(--ink-2);
  cursor: pointer;
  user-select: none;
}
.chip:has(input:checked) { background: var(--ink); color: var(--ground); }
.chip input { width: auto; margin: 0; accent-color: var(--u); }

/* ------------------------------------------------------------ status ---- */

.status {
  margin: 0 0 1rem;
  font-size: .78rem;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.banner {
  margin: 0 0 1.25rem;
  padding: .7rem .85rem;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-left: 5px solid var(--w);
  font-size: .9rem;
}
.banner p { margin: 0; }
.banner p + p { margin-top: .4rem; }
.banner.ok { border-left-color: var(--g); }

/* ------------------------------------------------------------- sheet ---- */

.sheet { position: relative; }
.sheet-bar { margin-bottom: 1.25rem; }

.section { margin: 0 0 1.75rem; }

.section > h2 {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 .85rem;
  padding: .3rem .6rem;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ground);
  background: var(--ink);
  border: 1px solid var(--rule);
}
.section > h2::before, .section > h2::after { content: none; }
.section > h2 .count { margin-left: auto; font-variant-numeric: tabular-nums; opacity: .8; }
.section.is-new > h2 { background: var(--r); border-color: var(--r); color: #fff; }

.terms { columns: 2; column-gap: 1.6rem; }
@media (max-width: 46rem) { .terms { columns: 1; } }

.term {
  break-inside: avoid;
  page-break-inside: avoid;
  margin: 0 0 .8rem;
  padding: .55rem .65rem;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 0;
}
/* Each entry throws its shadow in a mana color, cycling the wheel — the
   palette recurs without tinting a single word of the definitions. */
.term:nth-of-type(5n+1) { box-shadow: var(--offset) var(--offset) 0 var(--w); }
.term:nth-of-type(5n+2) { box-shadow: var(--offset) var(--offset) 0 var(--u); }
.term:nth-of-type(5n+3) { box-shadow: var(--offset) var(--offset) 0 var(--b); }
.term:nth-of-type(5n+4) { box-shadow: var(--offset) var(--offset) 0 var(--r); }
.term:nth-of-type(5n+5) { box-shadow: var(--offset) var(--offset) 0 var(--g); }

.term.new {
  background: var(--ink);
  box-shadow: var(--offset) var(--offset) 0 var(--r);
}
.term.new .name { color: var(--ground); }
.term.new .def { color: color-mix(in srgb, var(--ground) 80%, var(--ink)); }
.term.new .count { color: color-mix(in srgb, var(--ground) 62%, var(--ink)); }

.term .head { display: flex; align-items: baseline; gap: .4rem; }
.term .name { font-weight: 700; font-size: .98rem; letter-spacing: -.012em; }

/* The pill is baseline-aligned with the term name, which is right for the text
   inside it and wrong for the box around it: half-leading plus padding left the
   block hanging well below the name's baseline, so it read as sitting low.
   line-height: 1 removes the leading, and since the label is uppercase there
   are no descenders to make room for -- the box then hugs its own caps and can
   be nudged onto the name's optical center. */
.term .tag {
  font-size: .54rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .18rem .32rem .14rem;
  background: var(--ink);
  color: var(--ground);
  white-space: nowrap;
  position: relative;
  top: -.2rem;
}
.term.new .tag { background: var(--ground); color: var(--ink); }

/* Centered rather than baseline-aligned. Baseline is the right default for
   text on a shared line, but this sits at the far right of the row where there
   is no baseline continuity to read -- and being two-thirds the name's size, a
   shared baseline put its center 3px low, which is what made the row look
   crooked. align-self rather than a nudge, so it stays centered if the name
   ever wraps. */
.term .count {
  margin-left: auto;
  align-self: center;
  font-size: .66rem;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.term .count .n { font-weight: 700; }

/* ---- the filled dial ----------------------------------------------------
   A fixed-size disc whose ink rises from the bottom with the count, read the
   way you read a fuel gauge. Fixed size on purpose: the frequency lives in the
   fill, so the column edge stays straight.

   --f is set per term in app.js on a log scale, because Magic's frequency curve
   is steep -- a set typically has a third of its mechanics on a single card and
   one on a dozen, and a linear ramp flattens that whole tail into nothing. */
.term .dial {
  align-self: center;
  --d: 1.12rem;
  width: var(--d); height: var(--d); flex: none;
  margin-left: auto;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--ink);
  font-size: .6rem; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(to top,
    color-mix(in srgb, var(--ink) 85%, transparent) 0 calc(var(--f) * 100%),
    transparent calc(var(--f) * 100%));

  /* White on a black outline, at every fill level and in both themes. The digit
     sits on two grounds at once -- filled below the line, empty above it -- so
     no single flat colour works, and switching at a threshold made the number
     change colour partway down a column for a reason belonging to the render
     rather than to the data. One pair plus an outline reads on both halves.
     Literal black and white rather than the theme tokens: the fill is near-ink
     and the empty half near-ground, so tokens would collide with one or the
     other. */
  color: #fff;
  text-shadow:
    1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000,
    .7px .7px 0 #000, -.7px .7px 0 #000, .7px -.7px 0 #000, -.7px -.7px 0 #000;
}

/* A stroke is a real outline on the glyph rather than eight copies behind it,
   so it stays sharp instead of thickening. paint-order is what makes it usable:
   without it the stroke paints over the fill and eats the digit. */
@supports (paint-order: stroke) and (-webkit-text-stroke: 1px currentColor) {
  .term .dial {
    text-shadow: none;
    -webkit-text-stroke: 1.4px #000;
    paint-order: stroke fill;
  }
}
.term.new .dial { border-color: var(--ground); }

.term .def { margin: .15rem 0 0; font-size: .875rem; line-height: 1.42; color: var(--ink-2); }
.term .eg { margin: .2rem 0 0; font-size: .69rem; color: var(--ink-3); }
.term.new .eg { color: color-mix(in srgb, var(--ground) 55%, var(--ink)); }

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

/* No top rule any more: the footer is its own plate now, and a keyline across
   a card reads as a mistake. Padding and background come from the plate rule. */
footer { margin-top: 1.1rem; padding: 1.1rem 1.6rem 1.3rem; }
.rule { display: none; }
#provenance, .fine { margin: .3rem 0; font-size: .7rem; line-height: 1.5; color: var(--ink-3); }
a { color: var(--u); text-underline-offset: 2px; }

/* ------------------------------------------------------------- print ----
   Shard's identity is rules and offsets, not atmosphere, so most of it makes
   the trip. What does not is per-entry boxing: at 78 terms a page, a border
   and padding around every entry is unaffordable. The keylines move to the
   header band, the reversed rubrics, and solid black column rules. */


/* --- Mana and tap symbols ------------------------------------------------
   Inlined as markup by scripts/build_symbols.py, so these are real <svg>
   children rather than background images -- a background would be treated as
   decoration and dropped from the print, which is the one place the sheet
   most needs to look like a card. Sized in em so they ride the text they sit
   in, on screen and on paper alike. */
.mana {
  display: inline-block;
  width: .92em;
  height: .92em;
  vertical-align: -.13em;
  margin: 0 .05em;
}
.mana svg { display: block; width: 100%; height: 100%; }



/* --- Top navigation ------------------------------------------------------
   The three pages are peers, so the way between them sits at the top of every
   one of them rather than buried in the footer. .chrome keeps it off the print,
   where a link to another web page is dead weight. */
.topnav {
  display: flex;
  flex-wrap: wrap;
  gap: .15rem;
  padding: .5rem .7rem;
  margin-bottom: 1.1rem;
  /* Background, radius and blur come from the shared plate rule above; this
     one must not restate them, and must not reinstate the bottom border --
     source order would let it win. */
}

.topnav a {
  padding: .34rem .7rem;
  border-radius: 3px;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-3);
}

.topnav a:hover,
.topnav a:focus-visible {
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 7%, transparent);
}

/* The current page stays listed rather than disappearing, so the set of pages
   reads the same everywhere -- it is just marked. */
.topnav a.here {
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 9%, transparent);
  box-shadow: inset 0 -2px 0 var(--u);
}

/* --- The interim "include the new set" toggle ---------------------------- */

/* Only rendered while a set is previewing, so it is deliberately loud: it is a
   temporary answer to a temporary problem, and leaving it on afterwards would
   quietly add illegal cards to a Standard sheet. */
.interim {
  margin: .3rem 0 0;
  padding: .7rem .85rem;
  border-left: 3px solid var(--w);
  border-radius: 0 3px 3px 0;
  background: color-mix(in srgb, var(--w) 12%, transparent);
  font-size: .86rem;
  line-height: 1.5;
  color: var(--ink-2);
}

.interim strong { color: var(--ink); }
.interim input { margin-right: .45rem; }
.interim .why { display: block; margin-top: .3rem; color: var(--ink-3); font-size: .82rem; }


/* --- Collapsible filter panel (shared with the statistics page) ---------- */

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

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

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

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

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


/* --- Small screens ------------------------------------------------------
   Deliberately last of the screen rules. `.topnav` sets its own display further
   up, and a media query does not outrank a later plain rule -- putting this
   earlier in the file left it unchanged on a phone even though the query
   matched. */
@media (max-width: 34rem) {
  /* All three pages stay listed, on one row. The uppercase tracking is what
     made this wrap: at .78rem with .08em of letter-spacing the three labels ran
     past a 375px screen. Tightening the type and the padding fits them with
     room to spare down to 320px, and nowrap makes a wrap impossible rather than
     merely unlikely. */
  .topnav {
    flex-wrap: nowrap;
    gap: .1rem;
    padding: .45rem .35rem;
  }

  .topnav a {
    flex: 0 1 auto;
    min-width: 0;
    padding: .3rem .45rem;
    font-size: .68rem;
    letter-spacing: .04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}


/* --- Mechanic-type help -------------------------------------------------
   The four category chips use vocabulary from the Comprehensive Rules, and the
   distinction between a keyword ability and an ability word is not guessable --
   one is a rule, the other is explicitly not (207.2c). Folded away by default
   so it costs nothing to the reader who already knows. */
.typehelp { margin: .5rem 0 .2rem; font-size: .82rem; line-height: 1.5; }

.typehelp dt {
  margin-top: .55rem;
  font-weight: 650;
  color: var(--ink);
}

.typehelp dt:first-child { margin-top: 0; }

.typehelp dd {
  margin: .1rem 0 0;
  padding-left: .8rem;
  border-left: 2px solid color-mix(in srgb, var(--ink) 15%, transparent);
  color: var(--ink-2);
}

.typehelp em { font-style: italic; }

@media print {
  @page { margin: 9mm 8mm; }

  :root {
    --w:#cbb679; --u:#0e68ab; --b:#2b2620; --r:#d3202a; --g:#00733e;
    --ground:#fff; --panel:#fff; --ink:#000; --ink-2:#1a1a1a; --ink-3:#555;
    --rule:#000; --offset:0px;
  }

  body {
    max-width: none;
    padding: 0;
    background: #fff;
    font-size: 7.8pt;
    line-height: 1.28;
  }
  body::before { display: none; }   /* the radiate would sit under the text */

  /* The plate is a screen device: on paper it would print as a gray box. */
  main, footer, .topnav {
    padding: 0;
    border-radius: 0;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
  }

  .chrome, #status, .banner, button { display: none !important; }

  /* The header band. One row about 9mm tall: sigil, what kind of sheet this is,
     the scope as the headline, counts on the right. Naming the scope is the
     whole job -- "Mechanics Cheat Sheet" is the same on every sheet ever
     printed, so the page title is dropped here and the scope takes its place. */
  .masthead {
    display: flex !important;
    align-items: center;
    gap: 2mm;
    margin: 0 0 1.4mm;
  }
  .masthead .eyebrow, .masthead .tagline, .masthead .flourish, .masthead h1 { display: none; }
  .sigil { width: 6.5mm; height: 6.5mm; color: #000; }

  /* Grid rather than flex: the kind sits directly above the scope name as one
     title block while the counts hold the full height of both, and a filter
     line takes a full row underneath. Flex cannot express that without extra
     wrapper elements. */
  .print-scope {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "kind meta"
      "who  meta"
      "narrowed narrowed";
    align-items: start;
    column-gap: 3mm;
    flex: 1;
    margin: 0;
    text-align: left;
    max-width: none;
    line-height: 1.35;
    color: #333;
  }

  .print-scope .kind {
    grid-area: kind;
    font-size: 5.4pt;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #555;
    line-height: 1;
  }

  .print-scope .who {
    grid-area: who;
    font-size: 13pt;
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1.05;
    color: #000;
    margin-top: .3mm;
  }

  .print-scope .meta {
    grid-area: meta;
    align-self: center;
    text-align: right;
    font-size: 5.9pt;
    line-height: 1.35;
    color: #444;
    font-variant-numeric: tabular-nums;
  }

  .print-scope .meta b { color: #000; }
  .print-scope .meta .built { color: #666; }

  /* A filter line is an exception rather than furniture, so it takes a row of
     its own beneath the band rather than crowding the counts. */
  .print-scope .narrowed {
    grid-area: narrowed;
    font-weight: 700;
    color: #000;
    font-size: 6pt;
    margin-top: .4mm;
  }

  /* The faceted band, printed. Hard segments with a keyline; on a mono printer
     the five fall to five distinct greys, which still reads as deliberate. */
  .manabar { border: .5pt solid #000; border-radius: 0; }
  .masthead-bar {
    display: block;
    flex: 0 0 100%;
    width: 100%;
    height: 3.4pt;
    margin: .6mm 0 0;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .sheet-bar { display: none; }

  /* Column count is set by the paper selector, which writes its own @media
     print block at runtime -- @page size cannot be reached from a selector. */
  .sheet-flow { columns: 3; column-gap: 5mm; column-rule: .4pt solid #999; }

  /* --- Radiate, printed ---------------------------------------------------
     The same five sectors as the web page, but in the mana-symbol tints rather
     than the screen palette. Dimming the deep colours far enough to keep 7.8pt
     text readable made them invisible -- the white sector measured 25 from
     blank paper. These are high-luminance and still chromatic, so they run at
     full strength: more colour on the page and better contrast under the type
     (60-233 visible, 11.2:1 for black text).
     Masked clear through the middle, which is where the columns are densest. */
  body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: conic-gradient(from 0deg at 50% 50%,
      #fffbd5   0deg, #fffbd5  20deg, #aae0fa  52deg, #aae0fa  92deg,
      #cbc2bf 124deg, #cbc2bf 164deg, #f9aa8f 196deg, #f9aa8f 236deg,
      #9bd3ae 268deg, #9bd3ae 308deg, #fffbd5 340deg, #fffbd5 360deg);
    -webkit-mask-image: radial-gradient(78% 88% at 50% 50%,
      transparent 0%, transparent 24%, #000 82%);
    mask-image: radial-gradient(78% 88% at 50% 50%,
      transparent 0%, transparent 24%, #000 82%);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* --- Ink saver ----------------------------------------------------------
     Everything that costs colour or a solid fill comes off together: the wash,
     the mana bar, and the reversed section bands, which become a rule instead.
     The sheet keeps its structure and its header. */
  body.ink-saver::after { display: none; }

  body.ink-saver .masthead-bar { display: none; }

  body.ink-saver .section > h2 {
    background: none;
    color: #000;
    border-bottom: .8pt solid #000;
    padding-left: 0;
  }
  .terms { columns: auto; }

  .section { margin: 0 0 2mm; }
  .section > h2 {
    display: block;
    font-size: 6.2pt;
    letter-spacing: .16em;
    margin: 0 0 1mm;
    padding: .5mm 1.2mm;
    color: #fff;
    background: #000;
    border: 0;
    break-after: avoid;
    page-break-after: avoid;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .section > h2 .count { float: right; opacity: .85; }
  .section.is-new > h2 { background: #000; color: #fff; }

  /* Inline definitions: the density decision, unchanged at ~78 terms a page. */
  .term {
    display: block;
    margin: 0 0 .9mm;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
  }
  .term.new {
    background: none;
    border-left: 2pt solid #000;
    padding-left: 1.2mm;
  }
  .term.new .name, .term.new .def, .term.new .count { color: #000; }
  .term .head { display: inline; }
  .term .name { font-size: 7.8pt; font-weight: 700; margin-right: .5mm; }
  .term.new .name { text-decoration: underline; text-underline-offset: 1.5pt; }
  .term .def { display: inline; margin: 0; font-size: 7.8pt; color: #000; }
  .term .tag, .term .eg { display: none; }
  .term .count {
    display: inline;
    margin: 0 .4mm 0 0;
    font-size: 6.2pt;
    color: #666;
    vertical-align: .35em;
  }
  .term .count .n { font-weight: 700; }
  .term .count .unit { display: none; }
  .term .count::after { content: "·"; margin-left: .5mm; color: #000; vertical-align: baseline; }

  /* The dial rides inline right after the term, where the superscript count
     sits. A left-floated badge would indent every row, and on a sheet running
     78 terms a page an indent column is the most expensive thing there is. */
  .term .dial {
    --d: 8.8pt;
    font-size: 5.6pt;
    /* Not `middle`: that aligns to the parent's x-height, which is not where a
       bold term's optical center sits. Measured at this exact size against the
       real 7.8pt body -- the artifact's value did not carry over, and neither
       did the previous one once the dial grew. */
    vertical-align: .23em;
    margin: 0 .3mm 0 .2mm;
    /* White on a black outline at every fill level, as on screen. The flipped
       variant that used to sit here keyed off a data-flip attribute nothing
       sets any more. */
    color: #fff;
    border: .4pt solid #000;
    background: linear-gradient(to top, #3a3a3a 0 calc(var(--f) * 100%), #fff calc(var(--f) * 100%));
    text-shadow:
      .5pt 0 0 #000, -.5pt 0 0 #000, 0 .5pt 0 #000, 0 -.5pt 0 #000,
      .35pt .35pt 0 #000, -.35pt .35pt 0 #000, .35pt -.35pt 0 #000, -.35pt -.35pt 0 #000;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .term.new .dial { border-color: #000; }

  footer { margin-top: 3mm; border-top: .5pt solid #000; padding-top: 1mm; }
  #provenance, .fine { font-size: 5.6pt; margin: .3mm 0; }
  a { color: #000; text-decoration: none; }
}

@media print {
  .mana { width: .85em; height: .85em; vertical-align: -.11em; margin: 0 .03em; }
}

.card-example { color: inherit; text-decoration: underline dotted; text-underline-offset: 2px; }
.card-example:hover, .card-example:focus-visible { text-decoration-style: solid; }
.card-preview { position: fixed; z-index: 1000; width: min(310px, calc(100vw - 16px)); max-height: calc(100dvh - 16px); overflow: auto; box-sizing: border-box; padding: 12px; background: var(--panel, white); color: var(--ink, black); border: 1px solid var(--rule, #aaa); border-radius: 10px; box-shadow: 0 8px 32px #0006; font-size: .9rem; }
.card-preview[hidden] { display: none; }
.preview-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.card-preview button { cursor: pointer; font: inherit; padding: 4px 8px; }
.preview-image { display: block; width: 100%; max-height: calc(100dvh - 150px); object-fit: contain; border-radius: 8px; margin-bottom: 8px; }
.preview-image[hidden] { display: none; }
.card-preview > a { display: block; margin-top: 8px; }
@media print { .card-preview { display: none !important; } .card-example { color: inherit; text-decoration: none; } }

/* Return link shares the navigation plate and stays off printed sheets. */
.topnav a.projects-back { display: inline-flex; flex: 0 0 2rem; align-items: center; justify-content: center; padding: 0; margin-right: .25rem; border-right: 1px solid color-mix(in srgb, var(--ink) 15%, transparent); border-radius: 0; }
.topnav a.projects-back svg { flex-shrink: 0; }

@media screen and (max-width: 420px) {
  .topnav { display: grid; grid-template-columns: 2rem 1fr 1fr; }
  .topnav a { text-align: center; overflow: visible; }
  .topnav a.projects-back { grid-row: 1 / 3; margin-right: 0; }
}