/* TESTING ONLY: color-scheme variants for the block-print theme, selected by a
   data-theme attribute on <html>. Variant tokens override the :root values in
   blockprint*.css; the default (no attribute) is the current palette untouched.
   The logo marks, squares, and favicon read --brand (the anchor blue); a variant
   claims its own with one --brand line and the favicon follows at run time. Where
   links are warm, --orange (the figures' second ink) is set to the link colour.
   The JS palette for charts and the rose is read from these tokens inside a
   figure plate, so this file is the single source for every variant.
   Remove this file and blockprint-theme.js when a palette is chosen. */

/* 1 · Chartreuse as signal */
html[data-theme="1"] {
  --ground: #F1F3E8;
  --chartreuse: #DCF50F;
  --chip-bg: #DCF50F; --chip-ink: #0A0A0A;
}
html[data-theme="1"] ::selection { background: #DCF50F; color: #0A0A0A; }
html[data-theme="1"] .stamp,
html[data-theme="1"] .prose .post-figure:not(.plotly-figure):not(.explorer-figure) { border-top: 3px solid var(--chartreuse); }
html[data-theme="1"] .entry:hover { background: var(--chartreuse); }

/* 2 · Punchcard */
html[data-theme="2"] {
  --paper: #F6F3E6; --ground: #FCFAF1; --ink: #14385E;
  --link: #D9302B; --link-press: #B02420;
  --orange: var(--link);
  --olive: #C99400;
  --chip-bg: #14385E; --chip-ink: #FCFAF1;
}
html[data-theme="2"] .stamp,
html[data-theme="2"] .prose .post-figure:not(.plotly-figure):not(.explorer-figure) { border: 0.6px solid var(--ink); }
html[data-theme="2"] .prose .chroma .kc { color: var(--link); }

/* 3 · Just Be Nice */
html[data-theme="3"] {
  --paper: #FFFFFF; --ground: #D9EEFC; --ink: #1A1A1A;
  --link: #F04E1F; --link-press: #C93D14;
  --orange: #F04E1F; --green: #2EA44F; --olive: #C9A800; --plum: #B0446E;
  --chip-bg: #F04E1F; --chip-ink: #FFFFFF;
}

/* 4 · Butter */
html[data-theme="4"] {
  --paper: #FFFDF4; --ground: #F7EAB0; --ink: #1B1B1B;
  --olive: #8A6A00;
  --chip-bg: #ED7734; --chip-ink: #FFFDF4;
}

/* 5 · Swiss plate */
html[data-theme="5"] {
  --paper: #EFEEE8; --ground: #FFFFFF; --ink: #111111;
  --link: #D8321F; --link-press: #A8271A;
  --orange: var(--link); --red: #D8321F;
  --chip-bg: #111111; --chip-ink: #FFFFFF;
}

/* 6 · Sky */
html[data-theme="6"] {
  --ground: #DFE9F8;
  --chip-bg: #ED7734; --chip-ink: #FFFFFD;
}

/* 7 · Warm grey, orange links */
html[data-theme="7"] {
  --ground: #ECEAE1;
  --link: #ED7734; --link-press: #C85F22;
  --chip-bg: #ED7734; --chip-ink: #FFFFFD;
}

/* 8 · Rand-era IBM */
html[data-theme="8"] {
  --paper: #FAFAFA; --ground: #E5EEFB; --ink: #000000;
  --red: #DA1E28; --plum: #8A3FFC; --green: #007D79;
  --chip-bg: #1F5FBF; --chip-ink: #FAFAFA;
}

/* 9 · Original — white page, the production site's blue and orange as the main
   pair (links use the original --accent-hover/--accent-deep), expansion inks
   from the original module palette (teal, terracotta, gold, lime) */
html[data-theme="9"] {
  --brand: #0284C7;
  --paper: #FFFFFF; --ground: #E4F2FB;
  --link: #0284C7; --link-press: #0369A1;
  --orange: #F06B00;
  --red: #C2410C; --green: #65A30D; --plum: #14A396; --olive: #BE8800;
  --chip-bg: #F06B00; --chip-ink: #FFFFFF;
}

/* 10 · Cloud Atlas — 1930 International Cloud Atlas plate. Lightened cream
   paper, warm letterpress black, one saturated sky photo plate. Two figure
   kinds: photo plates (solid sky, no frame — the landing rose) and diagram
   plates (paper inside a hairline ink frame — all blog figures). The user
   passed on the atlas caption styling and plate-code header. */
html[data-theme="10"] {
  --paper: #FAF6EA; --ground: #B9D8EE; --ink: #1E1D1A;
  --red: #C8352B; --olive: #D9A300; --green: #2E8A48;
  --chip-bg: #1E1D1A; --chip-ink: #FAF6EA;
}
/* landing rose: photo plate — the color edge is the frame */
html[data-theme="10"] #figwrap { background: var(--ground); padding: 22px 14px; }
/* blog figures, cite-as, and index entries: diagram plates on paper */
html[data-theme="10"] .stamp,
html[data-theme="10"] .prose .post-figure:not(.plotly-figure):not(.explorer-figure),
html[data-theme="10"] .cite-as-box,
html[data-theme="10"] .entry { background: var(--paper); border: 0.6px solid var(--ink); }
/* the atlas text block is airy */
html[data-theme="10"] .prose { line-height: 1.5; }

/* 11 · Moonphase — two Swiss posters: a moon-phase calendar and a memorial
   poster's color grid. Pure white, no figure plate anywhere; color only as
   flat shapes. Red links that go orange on hover; yellow chip. The doc's
   fill-first chart rules were not adopted. */
html[data-theme="11"] {
  --paper: #FFFFFF; --ground: #FFFFFF; --ink: #0A0A0A;
  --link: #E30613; --link-press: #ED7734;
  --orange: var(--link); --red: #E30613; --olive: #FFE500; --plum: #E30613;
  --chip-bg: #FFE500; --chip-ink: #0A0A0A;
}

/* 12 · Lincoln Lab — Jacqueline Casey's 1979 MIT Lincoln Laboratory poster.
   Deep navy page, cream text, but figures STAY LIGHT: the cream block is the
   figure plate, so charts keep dark inks. A dark page, not a dark theme.
   Page-level cyan and the anchor blue lift to the light link blue; the inks
   re-scope dark inside plates. */
html[data-theme="12"] {
  --paper: #0B1226; --paper-raise: #141C36; --ground: #F3E9C4; --ink: #F3E9C4;
  --brand: #7FB0FF; --cyan: #7FB0FF; --cyan-press: #A9CBFF;
  --link: #7FB0FF; --link-press: #A9CBFF;
  --chip-bg: #ED7734; --chip-ink: #0B1226;
  --green: #7FD9A0; --red: #FF9C6B; /* code strings / numerics on the page */
}
html[data-theme="12"] ::selection { background: rgba(237, 119, 52, 0.35); }
/* figure interiors: light plates with the light-mode inks */
html[data-theme="12"] .stamp,
html[data-theme="12"] .prose .post-figure:not(.plotly-figure):not(.explorer-figure),
html[data-theme="12"] .cite-as-box {
  --ink: #0B1226; --cyan: #1F5FBF; --cyan-press: #174A96;
  --link: #1F5FBF; --link-press: #174A96;
  --green: #2E9A4A; --red: #D9302B; --olive: #B8860B;
}
html[data-theme="12"] .cite-as-box { background: var(--ground); }
/* the landing rose sits directly on the navy — no cream backer */
html[data-theme="12"] .entry { background: var(--paper-raise); }
html[data-theme="12"] .prose .highlight, html[data-theme="12"] .prose .highlight pre,
html[data-theme="12"] .prose pre, html[data-theme="12"] .prose .chroma { background: var(--paper-raise) !important; }
html[data-theme="12"] .prose pre { border-color: var(--paper-raise); }
/* inside figure plates code stays transparent on the cream (the raise rule
   above out-specifies post.css there) */
html[data-theme="12"] .prose .post-figure .highlight, html[data-theme="12"] .prose .post-figure .highlight pre,
html[data-theme="12"] .prose .post-figure pre, html[data-theme="12"] .prose .post-figure .chroma,
html[data-theme="12"] .stamp .highlight, html[data-theme="12"] .stamp pre,
html[data-theme="12"] .stamp .chroma { background: transparent !important; }

/* home layout variant: text beside the figure in two columns on desktop; the
   figure is the full-circle rose there. Phones keep the stacked layout. The
   signature row spans both columns, so it widens with the page. */
@media (min-width: 641px) {
  html[data-layout="columns"] main.col {
    max-width: 1320px;
    display: grid;
    /* text column holds its width; the extra page width all goes to the figure */
    grid-template-columns: 540px 1fr;
    grid-template-rows: 1fr auto;
    align-items: center;
    column-gap: 56px;
    /* keep the signature row clear of the fixed testing widget */
    padding-bottom: 64px;
  }
  html[data-layout="columns"] .blurb { grid-column: 1; grid-row: 1; padding-top: 0; }
  html[data-layout="columns"] #figwrap {
    grid-column: 2; grid-row: 1;
    width: 100%; margin-left: 0; transform: none;
    max-height: none; min-height: 0; display: block;
  }
  html[data-layout="columns"] #fig { display: block; height: auto; width: 100%; }
  html[data-layout="columns"] #fig svg { width: 100%; height: auto; }
  html[data-layout="columns"] .brand-row { grid-column: 1 / -1; grid-row: 2; align-self: end; }
}

/* home banner variant: the wordmark header row on the front page; the
   signature row cedes the logo to it */
.home-banner { display: none; }
html[data-banner="on"] .home-banner {
  display: flex; justify-content: space-between; align-items: center;
  max-width: 1120px; margin: 0 auto; padding: 22px 20px 0; gap: 24px;
}
html[data-banner="on"] .home-banner .wordmark {
  font-family: var(--font-wordmark); font-weight: 700; font-size: 2rem;
  line-height: 1; color: var(--ink); text-decoration: none;
  display: inline-flex; align-items: baseline; letter-spacing: -0.01em;
}
html[data-banner="on"] .home-banner .wordmark .qed {
  display: block; height: 0.325em; width: 0.325em; margin-left: 0.09em; flex-shrink: 0;
}
html[data-banner="on"] .home-banner nav { display: flex; gap: 20px; align-items: baseline; }
html[data-banner="on"] .home-banner nav a {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; line-height: 18px;
}
html[data-banner="on"] .home-banner nav a:hover { color: var(--link, var(--cyan)); }
html[data-banner="on"] .brand-row { display: none; }
html[data-banner="on"] main.col { height: auto; min-height: calc(100vh - 70px); min-height: calc(100dvh - 70px); }

/* variant toggle widget */
.bp-theme-toggle {
  position: fixed; right: 14px; bottom: 14px; z-index: 9999;
  background: var(--paper, #FFFFFD); border: 1.5px solid var(--ink, #0A0A0A);
  padding: 6px 8px; display: flex; align-items: center; gap: 6px;
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 10px;
  font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink, #0A0A0A);
}
.bp-theme-toggle select {
  font: inherit; color: inherit; background: transparent;
  border: 0; text-transform: inherit; letter-spacing: inherit; cursor: pointer;
}
.bp-theme-toggle select:focus-visible { outline: 2px solid var(--cyan, #1F5FBF); outline-offset: 2px; }
@media print { .bp-theme-toggle { display: none; } }