/* THE SYMBOL FONTS (2026-09-24, per user, on a Mac drawing F㉾D's circled
   letter differently from the Windows laptop: "id like to see the
   symbols and since everyone does use a mac right"). A token symbol is
   whatever the contract returns - circled Hangul (U+3260-327F, the
   Atropa mark), circled digits (U+2460-24FF), and so on - and the body
   font has no glyph for those, so each machine drew them from whatever
   system font it had: two designs, two looks. These two Google families
   sit at the END of every page's font stack, after the generic
   sans-serif, so Latin never touches them on any machine (a Linux or
   Android visitor with none of the named text fonts still lands on the
   generic first) and only the odd glyph falls through; Google serves them
   in unicode-range slices, so a page downloads a slice only when a glyph
   in it is on screen. Noto Sans KR carries the circled Hangul, Noto Sans
   Symbols 2 the circled digits and letters. They are loaded by each
   page's own Google Fonts <link> in <head> (the 27 site.css pages carry
   them on the one shared link line; token.html, index.html and
   matrix.html have a link of their own above their palette link) - NOT
   by an @import here: a sheet with an @import waits for it before any
   of its own rules apply, so a slow Google fetch would have left every
   page unstyled until it answered. The API's CSP already allows both
   hosts. */

/* THE PALETTE - the one copy of every colour token, both themes, plus the
   theme button. site.css @imports this; the three pages that predate
   site.css (token.html, index.html, matrix.html - the dark-only originals
   with their GitHub palette hardcoded) link it directly, so 2026-09-16
   (per user: "why isn't there a day/dark mode button on all pages?") they
   follow the same toggle and the same colours as everything else.

   Light is the base; dark is the OS preference until the visitor picks
   (js/theme.js writes data-theme on <html>). color-scheme follows, so
   form controls and scrollbars match. --accent-text is the ink that sits
   on --accent (buttons, active pills).

   THE ACCENT IS LIGHT BLUE (2026-09-19, per user: "go with a light blue
   highlight for our stuff instead of the yellow tinge, but something
   that is readable"): #1f7fc4 on light (4.6:1 on the cream as link text,
   white ink on it) and #7cc7ff on dark (near-black ink on it). The amber
   it replaced (#a97a1f / #d9ac52) lives on only as the Cores group badge
   and in the token identity palette, which are not the accent. */
:root {
  color-scheme: light;
  --accent-text: #ffffff;
  --bg: #f6f3ea;
  --surface: #ffffff;
  --surface-hover: #f0ece0;
  --border: #e3ddcc;
  --text: #241f16;
  --text-muted: #6f6752;   /* #837a63 until 2026-10-07: 3.8:1 on the cream, under AA for the small muted text; this is 4.9:1 */
  --accent: #1f7fc4;
  --accent-soft: #d6eaf8;
  --good: #3f8f63;
  --bad: #b7503b;
  --good-soft: #dcefe2;
  --bad-soft: #f6e0da;
  --link: #1f7fc4;
  --shadow: 0 1px 2px rgba(36,31,22,0.06);
  /* THE CANDLES ARE LOUDER THAN THE TEXT COLOURS (2026-09-25, per user: "just
     candles seem a little thin and chart doesn't scream at you"): the pool
     chart's bars take these, a saturated up and down the muted --good /
     --bad were never meant to be; every other good/bad on the site is
     untouched. The chart falls back to --good / --bad when a theme lacks
     them. */
  --candle-up: #10a862;
  --candle-down: #e0364f;
  /* the logo's ".com" (theme.js ensureCom): black on light, white on dark,
     the accent's orange on Halloween */
  --logo-com: #111111;
}
/* THE DARK THEME IS THE PDAI LOOK (2026-10-14, per user, after the 2nd
   Annual pDAI Conference: "the pdai theme lets make that our permanent dark
   mode now....keep the other one arhcived in case we get bad feedback but
   get rid of the pdai logo"). What was the pDAI event theme (2026-10-06,
   for the conference: "definitely the pDAI colours (PulseChain colours) -
   reds, purples, blues with white on some kind of dark background") is the
   dark theme now: the logo's own sweep - cyan #12c8ff, blue #3b5cff,
   purple #8b2cff, magenta #ff1f8e, red #ff2d55 - on a deep indigo-black,
   the text white; the halo cyan along the top, blue down the left, purple
   down the right, red-magenta along the bottom; a 2 px sweep across the
   very top; the line under the logo and the cursor in the same sweep; up
   candles cyan-mint, down red. There is no pDAI button any more and no
   data-theme="pdai" (theme.js reads a stored "pdai" as "dark").
   THE CLASSIC DARK IS ARCHIVED, ONE WORD AWAY: the warm olive-black dark
   (#14150f, 2026-09-16 to 2026-10-14) is the CLASSIC DARK block further
   down, keyed on html.classic-dark - CLASSIC_DARK = true in js/theme.js
   puts that class on and brings it back everywhere, nothing else to edit. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --accent-text: #0a0620;
    --bg: #07061a;
    --surface: #0f0c2a;
    --surface-hover: #181443;
    --border: #2a2463;
    --text: #f7f6ff;
    --text-muted: #a8a2d8;
    --accent: #a47dff;
    --accent-soft: #24185a;
    --good: #3fe0c5;
    --bad: #ff4f7b;
    --good-soft: #0e2f35;
    --bad-soft: #3a1030;
    --link: #6fc9ff;
    --shadow: 0 1px 3px rgba(0,0,0,0.55);
    --candle-up: #19e3d0;
    --candle-down: #ff2d6b;
    --logo-com: #ffffff;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --accent-text: #0a0620;
  --bg: #07061a;
  --surface: #0f0c2a;
  --surface-hover: #181443;
  --border: #2a2463;
  --text: #f7f6ff;
  --text-muted: #a8a2d8;
  --accent: #a47dff;
  --accent-soft: #24185a;
  --good: #3fe0c5;
  --bad: #ff4f7b;
  --good-soft: #0e2f35;
  --bad-soft: #3a1030;
  --link: #6fc9ff;
  --shadow: 0 1px 3px rgba(0,0,0,0.55);
  --candle-up: #19e3d0;
  --candle-down: #ff2d6b;
  --logo-com: #ffffff;
}

/* THE AMBIENT BACKGROUND - THE EDGE HALO (2026-09-29, per user, after the
   bolt had to go: "im okay with getting rid of the lightning bolt but i
   still want like a glow in the background... chromish or techy look...
   i dont want to seem like the others", then, from six options drawn on
   the real Cores page, "edge halo please"). The screen is EDGE-LIT, like a
   monitor's bezel: silver along the top, the logo's blue down the left,
   its violet down the right, a little violet along the bottom, and one
   1 px chrome highlight across the very top. Still - no animation.
   body::after is the halo (inset box-shadows on a fixed layer the size of
   the viewport), body::before the highlight line. The body is a stacking
   context (position relative, z-index 0) so a z-index of -1 puts both
   ABOVE the body's own background and BELOW everything in it; the opaque
   cards and tables cover them, so text never sits on colour. The colours
   are rgb triplets per theme (--halo-top / -left / -right / -bottom /
   -line) with their strengths (--halo-a-*). Before this: drifting silver
   and purple tinges and a long lightning bolt behind the logo (09-19 to
   09-29); the scratchpad's bg/options.mjs holds the six options that were
   drawn, should the look be revisited. */
:root {
  --halo-top: 70 90 130;     --halo-a-top: 0.27;
  --halo-left: 31 127 196;   --halo-a-left: 0.38;
  --halo-right: 87 69 206;   --halo-a-right: 0.42;
  --halo-bottom: 87 69 206;  --halo-a-bottom: 0.19;
  --halo-line: 70 90 130;    --halo-a-line: 0.40;
}
/* Dark: the pDAI sweep (2026-10-14 - see THE DARK THEME IS THE PDAI LOOK). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --halo-top: 18 200 255;    --halo-a-top: 0.36;
    --halo-left: 59 92 255;    --halo-a-left: 0.58;
    --halo-right: 139 44 255;  --halo-a-right: 0.62;
    --halo-bottom: 255 31 110; --halo-a-bottom: 0.40;
    --halo-line: 120 160 255;  --halo-a-line: 0.55;
  }
}
:root[data-theme="dark"] {
  --halo-top: 18 200 255;    --halo-a-top: 0.36;
  --halo-left: 59 92 255;    --halo-a-left: 0.58;
  --halo-right: 139 44 255;  --halo-a-right: 0.62;
  --halo-bottom: 255 31 110; --halo-a-bottom: 0.40;
  --halo-line: 120 160 255;  --halo-a-line: 0.55;
}

/* THE HALLOWEEN THEME (2026-09-19, per user: "can we make a holiday theme
   (make it a pumpkin button) and basically the lightning orange and make
   the theme halloween style (black/orange) maybe add some pumpkins in some
   places too"; then "the halloween button needs to be beside the
   light/dark... so basically we have 3 themes"). data-theme="halloween",
   set by the pumpkin button js/theme.js puts beside the light/dark one.
   Black dominant, orange accent, the purple kept on the right, the halo
   orange on the left, the logo swapped for its Halloween render (theme.js), and
   Halloween emoji scattered behind the page (#spooks, below). Everything in it is
   under this one selector, so switching the theme off leaves nothing
   behind, and the file can lose the block after the holiday. */
:root[data-theme="halloween"] {
  color-scheme: dark;
  --accent-text: #1a0d00;
  --bg: #0a0805;
  --surface: #17120c;
  --surface-hover: #221a10;
  --border: #3d2a12;
  --text: #f6e7cf;
  --text-muted: #b8905c;
  --accent: #ff8c1a;
  --accent-soft: #3a2008;
  --good: #8bd67a;
  --bad: #ff6a3d;
  --good-soft: #1c2e17;
  --bad-soft: #3a1a10;
  --candle-up: #9cff5e;
  --candle-down: #ff5a1f;
  --logo-com: #ff8c1a;
  --link: #ffa640;
  --shadow: 0 1px 2px rgba(0,0,0,0.5);
  --halo-top: 255 210 122;   --halo-a-top: 0.30;
  --halo-left: 255 140 26;   --halo-a-left: 0.45;
  --halo-right: 140 40 190;  --halo-a-right: 0.58;
  --halo-bottom: 140 40 190; --halo-a-bottom: 0.26;
  --halo-line: 255 166 64;   --halo-a-line: 0.45;
}
/* Dark's top line is the whole sweep, 2 px (the pDAI look, 2026-10-14).
   Not under the classic dark (html.classic-dark), which keeps the plain
   chrome line drawn by body::before below. */
@media (prefers-color-scheme: dark) {
  :root:not(.classic-dark):not([data-theme]) body::before {
    background: linear-gradient(90deg, transparent 2%, #12c8ff 18%, #3b5cff 38%, #8b2cff 60%, #ff1f8e 80%, transparent 98%) no-repeat 50% 0 / 100% 2px;
    opacity: 0.85;
  }
}
:root:not(.classic-dark)[data-theme="dark"] body::before {
  background: linear-gradient(90deg, transparent 2%, #12c8ff 18%, #3b5cff 38%, #8b2cff 60%, #ff1f8e 80%, transparent 98%) no-repeat 50% 0 / 100% 2px;
  opacity: 0.85;
}
/* THE SCATTER (2026-10-01, per user: "the random emoji halloween things are
   in the way of things... get rid of that and maybe add random ones all of
   the place type thing"). The pumpkins beside the wordmark and the row
   along the header are gone. js/theme.js puts #spooks in while the theme is
   on - a layer the size of the page holding Halloween emoji at random
   spots, sizes and tilts, drifting slowly - placed only where the page is
   EMPTY (theme.js measures every word, control, picture and card first),
   behind everything (the halo's layer) and taking no clicks. A new set of
   spots on every page. */
#spooks { position: absolute; left: 0; top: 0; z-index: -1; pointer-events: none; overflow: hidden; max-width: 100%; animation: spook-in 0.9s ease-out both; }
@keyframes spook-in { from { opacity: 0; } to { opacity: 1; } }
#spooks span {
  position: absolute; line-height: 1; opacity: var(--o, 0.5);
  transform: rotate(var(--r, 0deg));
  animation: spook-drift var(--d, 14s) ease-in-out var(--delay, 0s) infinite alternate;
  filter: drop-shadow(0 0 6px rgba(255, 140, 26, 0.35));
  user-select: none;
}
@keyframes spook-drift {
  from { transform: translate(0, 0) rotate(var(--r, 0deg)); }
  to { transform: translate(var(--dx, 10px), var(--dy, -14px)) rotate(calc(var(--r, 0deg) + 8deg)); }
}
@media (prefers-reduced-motion: reduce) { #spooks span { animation: none; } }
:root[data-theme="halloween"] .groupbadge.cores { background: #3a2008; color: #ffa640; border-color: #7a4a10; }
/* The pumpkin button lights up while the theme is on. */
#holidayBtn { font-size: 16px; line-height: 1; }
#holidayBtn.active { border-color: #ff8c1a; box-shadow: 0 0 0 2px rgba(255, 140, 26, 0.35); }
body { position: relative; z-index: 0; }
body::before, body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
/* The chrome highlight: one pixel across the very top, brightest in the
   middle. */
body::before {
  background: linear-gradient(90deg, transparent 5%, rgb(var(--halo-line) / var(--halo-a-line)) 50%, transparent 95%) no-repeat 50% 0 / 100% 1px;
}
/* The halo. */
body::after {
  box-shadow:
    inset 0 90px 120px -80px rgb(var(--halo-top) / var(--halo-a-top)),
    inset 110px 0 160px -110px rgb(var(--halo-left) / var(--halo-a-left)),
    inset -110px 0 160px -110px rgb(var(--halo-right) / var(--halo-a-right)),
    inset 0 -70px 120px -90px rgb(var(--halo-bottom) / var(--halo-a-bottom));
}
/* A phone's narrow screen: the side glows reach half as far, so they
   frame the page rather than tint it. */
@media (max-width: 760px) {
  body::after {
    box-shadow:
      inset 0 60px 90px -60px rgb(var(--halo-top) / var(--halo-a-top)),
      inset 55px 0 80px -55px rgb(var(--halo-left) / var(--halo-a-left)),
      inset -55px 0 80px -55px rgb(var(--halo-right) / var(--halo-a-right)),
      inset 0 -50px 80px -60px rgb(var(--halo-bottom) / var(--halo-a-bottom));
  }
}

/* The theme button. */
.iconbtn {
  all: unset;
  cursor: pointer;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
}
.iconbtn:hover { background: var(--surface-hover); }
/* The pumpkin UNDER the light / dark button (2026-09-30, per user) - one
   small column, theme.js builds it; a touch smaller so the pair fits the
   tab row without making it much taller. */
.themestack { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; flex: none; }
.themestack .iconbtn { width: 26px; height: 26px; font-size: 13px; border-radius: 7px; }
/* The event theme (Halloween) under it - a row, so a second one would sit
   beside the pumpkin (the pDAI button did, 2026-10-06 to 10-14). */
.themerow { display: inline-flex; gap: 3px; }
/* Pages 2 and 3 give the header's #themeBtn / #holidayBtn an order of their
   own (from before the stack); inside the stack the markup's order holds. */
.themestack #themeBtn, .themestack .eventbtn { order: 0 !important; }
/* On a phone the three sit side by side, finger-sized (2026-10-07): the
   two-storey stack was the tallest thing in the tools row and its 26 px
   buttons were 3 px apart. */
@media (max-width: 760px) {
  .themestack { flex-direction: row; gap: 6px; }
  .themerow { gap: 6px; }
  .themestack .iconbtn { width: 34px; height: 34px; font-size: 16px; border-radius: 9px; }
}

/* THE CURSOR (2026-10-01, per user: "are we able to customize the cursor
   people use on our website? lol seems silly but its fun"). The site's own
   arrow in place of the system's: the accent blue on light and dark,
   orange with a purple rim and a little bat on Halloween. Only the plain
   arrow changes - links keep the hand (the browser's own rule), anything
   typed into keeps the I-beam, and the charts keep their crosshairs (each
   sets its own cursor). The hotspot is the arrow's tip; ", auto" falls
   back to the system arrow where an SVG cursor is not drawn.
   HALLOWEEN IS A WITCH ON HER BROOM (2026-10-02, per user, on the bat
   arrow: "i can barely see it... was hoping it was like the mouse itself
   was a witch riding a broomstick"): 48 px, flying left in front of a full
   moon, the click on the FRONT TIP of the broom handle (hotspot 3 25 - "the
   clicker basically is end of the broom right?"). A browser that will not
   draw a cursor that big (some Windows display settings) falls through to
   the orange bat arrow, then the system's. Light and dark keep the blue.
   THE WITCH IS GONE (2026-10-03, per user: "get rid of halloween witch
   cursor please, go back to regular with orange color like before"):
   Halloween is the regular arrow in orange with the purple rim - no witch,
   no bat. The witch is scratchpad/witch.svg if it is ever wanted back. */
html { cursor: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2224%22%20height=%2224%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M3%202.5v17l4.6-4.4%203.1%206.6%203-1.4-3.1-6.5H17z%22%20fill=%22none%22%20stroke=%22%23ffffff%22%20stroke-width=%223%22%20stroke-linejoin=%22round%22/%3E%3Cpath%20d=%22M3%202.5v17l4.6-4.4%203.1%206.6%203-1.4-3.1-6.5H17z%22%20fill=%22%233f9dff%22%20stroke=%22%230b1f3a%22%20stroke-width=%221.2%22%20stroke-linejoin=%22round%22/%3E%3Cpath%20d=%22M4.6%205.6v9.6l2.1-2%22%20fill=%22none%22%20stroke=%22%23ffffff%22%20stroke-opacity=%220.55%22%20stroke-width=%221%22%20stroke-linecap=%22round%22/%3E%3C/svg%3E") 3 2, auto; }
:root[data-theme="halloween"] { cursor: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2224%22%20height=%2224%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M3%202.5v17l4.6-4.4%203.1%206.6%203-1.4-3.1-6.5H17z%22%20fill=%22none%22%20stroke=%22%238c28be%22%20stroke-width=%223%22%20stroke-linejoin=%22round%22/%3E%3Cpath%20d=%22M3%202.5v17l4.6-4.4%203.1%206.6%203-1.4-3.1-6.5H17z%22%20fill=%22%23ff8c1a%22%20stroke=%22%231a0d00%22%20stroke-width=%221.2%22%20stroke-linejoin=%22round%22/%3E%3Cpath%20d=%22M4.6%205.6v9.6l2.1-2%22%20fill=%22none%22%20stroke=%22%23ffffff%22%20stroke-opacity=%220.55%22%20stroke-width=%221%22%20stroke-linecap=%22round%22/%3E%3C/svg%3E") 3 2, auto; }
/* Dark: the arrow in the pDAI sweep (2026-10-14); the classic dark keeps the blue one above. */
@media (prefers-color-scheme: dark) { :root:not(.classic-dark):not([data-theme]) { cursor: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2224%22%20height=%2224%22%20viewBox=%220%200%2024%2024%22%3E%3Cdefs%3E%3ClinearGradient%20id=%22g%22%20x1=%220%22%20y1=%220%22%20x2=%220.4%22%20y2=%221%22%3E%3Cstop%20offset=%220%22%20stop-color=%22%2312c8ff%22/%3E%3Cstop%20offset=%220.45%22%20stop-color=%22%238b2cff%22/%3E%3Cstop%20offset=%221%22%20stop-color=%22%23ff2d55%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath%20d=%22M3%202.5v17l4.6-4.4%203.1%206.6%203-1.4-3.1-6.5H17z%22%20fill=%22none%22%20stroke=%22%23ffffff%22%20stroke-width=%223%22%20stroke-linejoin=%22round%22/%3E%3Cpath%20d=%22M3%202.5v17l4.6-4.4%203.1%206.6%203-1.4-3.1-6.5H17z%22%20fill=%22url(%23g)%22%20stroke=%22%230a0620%22%20stroke-width=%221.2%22%20stroke-linejoin=%22round%22/%3E%3C/svg%3E") 3 2, auto;; } }
:root:not(.classic-dark)[data-theme="dark"] { cursor: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2224%22%20height=%2224%22%20viewBox=%220%200%2024%2024%22%3E%3Cdefs%3E%3ClinearGradient%20id=%22g%22%20x1=%220%22%20y1=%220%22%20x2=%220.4%22%20y2=%221%22%3E%3Cstop%20offset=%220%22%20stop-color=%22%2312c8ff%22/%3E%3Cstop%20offset=%220.45%22%20stop-color=%22%238b2cff%22/%3E%3Cstop%20offset=%221%22%20stop-color=%22%23ff2d55%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath%20d=%22M3%202.5v17l4.6-4.4%203.1%206.6%203-1.4-3.1-6.5H17z%22%20fill=%22none%22%20stroke=%22%23ffffff%22%20stroke-width=%223%22%20stroke-linejoin=%22round%22/%3E%3Cpath%20d=%22M3%202.5v17l4.6-4.4%203.1%206.6%203-1.4-3.1-6.5H17z%22%20fill=%22url(%23g)%22%20stroke=%22%230a0620%22%20stroke-width=%221.2%22%20stroke-linejoin=%22round%22/%3E%3C/svg%3E") 3 2, auto;; }
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="file"]), textarea, [contenteditable="true"], [contenteditable=""]) { cursor: text; }
:where(select, summary, label[for], input[type="checkbox"], input[type="radio"], input[type="color"], input[type="range"], input[type="file"]) { cursor: pointer; }

/* THE LOGO SAYS .COM (2026-10-01, per user: "add .(dot) com cause thats kind
   of our main logo Dex Denom . Com", then, on three mock-ups: "I like the
   smaller .com but... make it white for dark mode, and black for light mode
   and then for themes do what you can to make it work"). The ".com" is NOT
   in the picture - it is text drawn beside it by js/theme.js (ensureCom), in
   the logo's own coordinates, so it follows the theme: --logo-com above
   (black on light, white on dark, the accent's orange on Halloween). The face
   is Audiowide (SIL Open Font License, web/fonts/audiowide-OFL.txt), the
   closest to the render's rounded letters, served from this site. */
@font-face {
  font-family: "DexLogo";
  src: url("/fonts/audiowide.woff2") format("woff2");
  font-display: block;
}
.wordmark .logocom { display: block; flex: none; overflow: visible; }
.wordmark .logocom text { fill: var(--logo-com, currentColor); font-family: "DexLogo", sans-serif; }
/* THE LINE UNDER THE LOGO (2026-10-06, theme.js ensureTag): the logo and
   its ".com" on the first row of a small grid, the line centred under both
   (a grid, not a wrapping flex row, so the link is only as wide as the
   wider of the two). Small spaced capitals; the colour per theme -
   slate on light, the accent's orange on Halloween, the pDAI cyan ->
   purple -> red sweep on dark (2026-10-14; it was chrome silver, the "Dex",
   until then - the classic dark keeps that). */
.wordmark.hastag { display: flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none; }
.wordmark .logorow { display: flex; align-items: flex-start; line-height: 0; }
.wordmark .logotag {
  margin-top: -3px;
  font: 600 10.5px/1.25 "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--logo-tag, var(--text-muted));
}
:root { --logo-tag: #5a6472; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --logo-tag: #c9c3ff; } }
:root[data-theme="dark"] { --logo-tag: #c9c3ff; }
:root[data-theme="halloween"] { --logo-tag: #ffb565; }
/* Dark's line is the pDAI sweep (2026-10-14); the classic dark keeps the
   plain silver (its own block sets --logo-tag back to #b9c3cf). */
@media (prefers-color-scheme: dark) {
  :root:not(.classic-dark):not([data-theme]) .wordmark .logotag {
    background: linear-gradient(90deg, #12c8ff, #6a7bff 35%, #a35cff 65%, #ff3d7f);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
  }
}
:root:not(.classic-dark)[data-theme="dark"] .wordmark .logotag {
  background: linear-gradient(90deg, #12c8ff, #6a7bff 35%, #a35cff 65%, #ff3d7f);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
/* LIGHT GETS THE SWEEP TOO (2026-10-15, per user: "are we able to get the
   same or similar type colouring in the subheader for light mode?"): the
   same cyan -> blue -> purple -> magenta, each stop darkened to 4.5:1 or
   better on the cream (#0a6fae 4.9, #4b4fd8 5.6, #7a33d6 5.8, #c81d58 5.0)
   since the line is small type. Halloween keeps its orange. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .wordmark .logotag {
    background: linear-gradient(90deg, #0a6fae, #4b4fd8 35%, #7a33d6 65%, #c81d58);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
  }
}
:root[data-theme="light"] .wordmark .logotag {
  background: linear-gradient(90deg, #0a6fae, #4b4fd8 35%, #7a33d6 65%, #c81d58);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
@media (max-width: 760px) { .wordmark .logotag { font-size: 9.5px; letter-spacing: 0.13em; white-space: normal; text-align: center; max-width: calc(100vw - 32px); } }

/* THE CONFERENCE BADGE (2026-10-06, theme.js ensureConference): top left of
   row one, above the tab row, in every theme - the pDAI logo, "2nd Annual"
   over "pDAI Conference" in the logo's sweep. A link to the welcome card.
   OFF since 2026-10-14 (the conference is over): CONFERENCE_BADGE false in
   theme.js draws none; these rules stay for the next one. */
.confbadge {
  display: inline-flex; align-items: center; gap: 9px; flex: 0 0 auto;
  padding: 6px 13px 6px 7px; border-radius: 12px;
  border: 1px solid var(--conf-border, rgba(140, 110, 255, 0.45));
  background: var(--conf-bg, rgba(40, 30, 110, 0.18));
  text-decoration: none !important; white-space: nowrap;
  font-family: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  transition: border-color 0.15s, background 0.15s;
}
.confbadge:hover { border-color: #a35cff; background: var(--conf-bg-hover, rgba(60, 40, 150, 0.28)); }
.confbadge img { width: 30px; height: 30px; display: block; flex: 0 0 auto; }
.confbadge .conftext { display: flex; flex-direction: column; line-height: 1.15; }
.confbadge .confyear {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--logo-tag, var(--text-muted));
}
.confbadge .confname {
  font-size: 14.5px; font-weight: 700; letter-spacing: 0.01em;
  background: var(--conf-ink, linear-gradient(90deg, #12c8ff, #6a7bff 35%, #a35cff 65%, #ff3d7f));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
:root { --conf-ink: linear-gradient(90deg, #0a74b8, #4b4fd8 38%, #7a33d6 66%, #d01f5c); --conf-bg: rgba(110, 80, 230, 0.07); --conf-bg-hover: rgba(110, 80, 230, 0.13); --conf-border: rgba(110, 80, 230, 0.35); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --conf-ink: linear-gradient(90deg, #12c8ff, #6a7bff 35%, #a35cff 65%, #ff3d7f); --conf-bg: rgba(40, 30, 110, 0.18); --conf-bg-hover: rgba(60, 40, 150, 0.28); --conf-border: rgba(140, 110, 255, 0.45); } }
:root[data-theme="dark"], :root[data-theme="halloween"] { --conf-ink: linear-gradient(90deg, #12c8ff, #6a7bff 35%, #a35cff 65%, #ff3d7f); --conf-bg: rgba(40, 30, 110, 0.18); --conf-bg-hover: rgba(60, 40, 150, 0.28); --conf-border: rgba(140, 110, 255, 0.45); }
.confbreak { display: none; }
.confbreak.ownline { display: block; flex-basis: 100%; height: 0; order: 9; }
.confbadge.ownline { order: 9; }
/* On a phone (2026-10-07, the header slim-down): ONE slim line - the logo,
   the date and the name side by side - rather than a two-storey card. */
@media (max-width: 760px) {
  /* 32 px tall for a finger; never wider than the screen - a longer
     language (French, Italian) tightens the date's spacing, and past that
     the date goes on a line of its own above the name (2026-10-08). */
  .confbadge { margin: 0 auto; padding: 5px 11px 5px 4px; gap: 7px; border-radius: 999px; max-width: calc(100vw - 20px); box-sizing: border-box; }
  .confbadge img { width: 20px; height: 20px; }
  .confbadge .conftext { flex-direction: row-reverse; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0 7px; min-width: 0; }
  .confbadge .confname { font-size: 12.5px; }
  .confbadge .confyear { font-size: 8.5px; letter-spacing: 0.1em; }
}
@media (max-width: 400px) {
  .confbadge .confyear { letter-spacing: 0.03em; }
}
@media print { .confbadge { display: none; } }

/* KEYBOARD AND SCREEN READERS (2026-10-03, js/a11y.js). A focus outline
   ONLY while tabbing (:focus-visible - a mouse click on a button draws
   none), at zero specificity (:where) so a control's own focus rule still
   wins. Rows and cards a page made clickable take the keyboard (a11y.js
   gives them tabindex), and get the same outline, drawn inside so a
   scrolling table's edge does not clip it. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
:where(tbody tr[tabindex], .mcard[tabindex], th[tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
/* Read by a screen reader, not drawn. */
.sr-only, .visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
/* "Skip to main content": the first Tab stop on every page, off screen
   until it has the focus. */
.skiplink {
  position: fixed; left: 12px; top: -60px; z-index: 100000;
  padding: 8px 14px; border-radius: 8px;
  background: var(--surface); color: var(--text); border: 2px solid var(--accent);
  font: 600 14px/1.2 "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-decoration: none; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}
.skiplink:focus, .skiplink:focus-visible { top: 12px; outline: 2px solid var(--accent); outline-offset: 2px; }

/* THE PARITY COLOURS (Copies, page 2's Parity tile), per theme (2026-10-07,
   phone cleanup's contrast check): the dark-theme purple / green were 2.2:1
   and 1.9:1 on white. Light gets a darker pair (5.9:1 / 5.4:1); dark,
   Halloween keep the old two exactly. */
:root { --parity-pls: #6a4fc4; --parity-eth: #187a48; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --parity-pls: #a9a9e4; --parity-eth: #7fcfa6; } }
:root[data-theme="dark"], :root[data-theme="halloween"] { --parity-pls: #a9a9e4; --parity-eth: #7fcfa6; }

/* THE CLASSIC DARK - ARCHIVED (2026-10-14). The warm olive-black dark theme
   the site had from 2026-09-16 until the pDAI look took its place, kept
   whole in case the new one gets bad feedback (per user: "keep the other
   one arhcived"). It applies ONLY when <html> carries the class
   "classic-dark", which js/theme.js puts on when CLASSIC_DARK = true - the
   one switch; flip it and push, nothing here changes. It outranks the dark
   blocks above (one more class), never touches light or Halloween (the
   OS-dark rule is keyed on NO data-theme attribute, the way a visitor who
   never picked follows their system), and the pDAI extras - the 2 px sweep,
   the swept line under the logo, the swept cursor - are written
   :not(.classic-dark), so they drop away and the plain chrome line, the
   silver line and the blue arrow come back on their own. */
@media (prefers-color-scheme: dark) {
  :root.classic-dark:not([data-theme]) {
    --accent-text: #06131f;
    --bg: #14150f;
    --surface: #1c1d16;
    --surface-hover: #24251c;
    --border: #33341f;
    --text: #ece7d8;
    --text-muted: #948d76;
    --accent: #7cc7ff;
    --accent-soft: #173247;
    --good: #6fbf94;
    --bad: #e08469;
    --good-soft: #1e3327;
    --bad-soft: #3a241e;
    --link: #7cc7ff;
    --shadow: 0 1px 2px rgba(0,0,0,0.4);
    --candle-up: #22e58a;
    --candle-down: #ff4d6d;
    --logo-com: #ffffff;
    --logo-tag: #b9c3cf;
    --halo-top: 235 246 244;   --halo-a-top: 0.34;
    --halo-left: 63 157 255;   --halo-a-left: 0.48;
    --halo-right: 135 85 245;  --halo-a-right: 0.52;
    --halo-bottom: 135 85 245; --halo-a-bottom: 0.24;
    --halo-line: 235 246 244;  --halo-a-line: 0.40;
  }
}
:root.classic-dark[data-theme="dark"] {
  --accent-text: #06131f;
  --bg: #14150f;
  --surface: #1c1d16;
  --surface-hover: #24251c;
  --border: #33341f;
  --text: #ece7d8;
  --text-muted: #948d76;
  --accent: #7cc7ff;
  --accent-soft: #173247;
  --good: #6fbf94;
  --bad: #e08469;
  --good-soft: #1e3327;
  --bad-soft: #3a241e;
  --link: #7cc7ff;
  --shadow: 0 1px 2px rgba(0,0,0,0.4);
  --candle-up: #22e58a;
  --candle-down: #ff4d6d;
  --logo-com: #ffffff;
  --logo-tag: #b9c3cf;
  --halo-top: 235 246 244;   --halo-a-top: 0.34;
  --halo-left: 63 157 255;   --halo-a-left: 0.48;
  --halo-right: 135 85 245;  --halo-a-right: 0.52;
  --halo-bottom: 135 85 245; --halo-a-bottom: 0.24;
  --halo-line: 235 246 244;  --halo-a-line: 0.40;
}