/* BASE — The palette, the page itself, and what every other file assumes.

   One of ten stylesheets split out of a single 10,361-line tree.css.
   THE ORDER MATTERS AND IS NOT ALPHABETICAL. The layout links them as
   base → tree → correspondences → reference → tarot → chrome → astrology → history → sections → editing,
   and the rules inside this file keep the order they had in the original,
   so the cascade resolves exactly as it did before the split. */

/* Ten traditional colours, and they are loud. Everything else stays quiet and
   lets them carry the page. These semantic tokens hold the interface chrome
   apart from correspondence data, so the reading theme can change without
   rewriting individual components. */

:root {
  /* Tells the browser to draw its OWN controls dark: native radios,
     checkboxes, scrollbars and focus rings were all being rendered for a white
     page on a near-black one. */
  color-scheme: dark;

  --background: #11110f;
  --surface: #171713;
  --surface-hover: #1d1c18;
  --text-primary: #e5dfd2;
  --text-secondary: #b0a99d;
  --text-subtle: #918b80;
  --border: #302d26;
  --accent: #a88b52;

  /* Compatibility aliases keep older components on the same theme. */
  --ground: var(--background);
  --ground-lift: var(--surface);
  --rule: var(--border);
  --ink: var(--text-primary);
  --ink-muted: var(--text-secondary);
  --ink-faint: var(--text-subtle);
  --history-event: var(--accent);
  --history-biblical: #9ca9d1;
  --history-islamic: #69b8a9;
  --history-egyptian: #d6a45f;
  /* Every other row of the chronology, a shade off the lift so a name can be
     carried across 1290 units of chart to its bar. Slight on purpose: anything
     stronger reads as a selection. Checked against all three inks by
     spec/javascript/contrast.test.js, same as the rest of the palette. */
  --history-band: var(--surface-hover);
  /* THE TYPE FLOOR. The site had no type scale at all — every size was a
     hardcoded rem somewhere in ten files — and it had drifted down: a book's
     one-sentence description rendered at 13.6px, a status word at 11.2px, a
     search result's path at 12.2px. Small type is not a density technique, it
     is just small type, and it is the first thing to fail for anyone whose
     sight is less than perfect. Density comes from using the WIDTH of the
     page, which is what `--reading-measure` and the two-column lists below
     are for.

     Two floors. `--type-label` is for a word that is a tag, a count or a
     status — things read at a glance, never in a sentence. `--type-small` is
     for anything that IS a sentence: a blurb, a subtitle, a note. Nothing
     goes under either, and `spec/e2e/density.spec.mjs` sweeps the rendered
     pages to check it. */
  /* 45–90 characters is the readable range and 50–75 the sweet spot. A wide
     screen invites the opposite failure to small type — one long line the eye
     loses its place returning from — so the extra width goes into COLUMNS and
     the line itself stays inside a measure. */
  --reading-measure: 68ch;

  --type-label: 0.8rem;
  --type-small: 0.95rem;
  --type-body: 1rem;
  --type-lede: 1.05rem;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
    Georgia, serif;
  /* Hebrew needs a stack that actually covers it rather than the default. */
  --hebrew: "SBL Hebrew", "Frank Ruehl CLM", "Noto Serif Hebrew",
    "Times New Roman", "Arial Hebrew", "Noto Sans Hebrew", serif;

  /* FOUR CHROME TOKENS, because a shadow is not a colour from the palette and
     a reorganisation into two themes is exactly where it starts pretending to
     be one. Nine of the ten stylesheets carried black and white literals —
     `rgb(0 0 0 / 28%)` for a cast shadow, `rgb(255 255 255 / 0.55)` for an
     edge light — every one of them tuned by eye against a near-black ground.
     A white sheen on a cream page is invisible and a 0.55 black shadow on one
     is a smear, so the literals become these four and the two themes answer
     for them separately.

     `--shadow-soft` and `--shadow-strong` are cast shadows, which stay black
     in both themes and only change how much of themselves they bring; a light
     page needs far less, because the ground is no longer hiding the blur.
     `--scrim` dims what is BEHIND something — a zoomed card, a drawer — and is
     black in both themes for the same reason a cinema is dark either way.
     `--sheen` is the one that inverts: it is light catching an edge, so it is
     white on the dark theme and a thin black on the light one. */
  /* THREE MORE THE AUDIT TURNED UP, each because one value cannot serve both
     themes. `--danger` is the clearest case: #d98b78 is 7.12:1 on the near-black
     ground and 2.27:1 on cream, so the error message that told an editor their
     save had failed would have become the least readable thing on the page.
     `--seal-ground` is the plate a sigil sits on, and it is near-black in the
     dark theme BECAUSE the ink is inverted onto it — see sections.css, where the
     light theme drops that filter instead. `--tint-deepen` is a hover that
     darkens whatever is under it, which needs far less of itself on cream. */
  --danger: #d98b78;
  --seal-ground: #000;
  --tint-deepen: rgb(0 0 0 / 0.25);

  --shadow-soft: rgb(0 0 0 / 0.22);
  --shadow-strong: rgb(0 0 0 / 0.45);
  --scrim: rgb(0 0 0 / 0.65);
  --sheen: rgb(255 255 255 / 0.55);
}

/* THE LIGHT THEME, AND IT IS A SECOND BLOCK RATHER THAN A MEDIA QUERY.
   `prefers-color-scheme` would hand the choice to the reader's operating
   system and take it away from the switch in the top bar, which is the one
   thing this is for: the theme is a deliberate choice, held in localStorage,
   written onto `<html>` as `data-theme` before the first paint. A reader who
   has never touched the switch gets the dark theme, which is what the site
   has always been.

   Only the eight core tokens and the four chrome ones are redefined here. The
   aliases below them (`--ground`, `--ink`, `--rule` and the rest) are `var()`
   references, so they follow without being named twice — writing them out
   again is how the two themes would come to disagree about what `--ink` is.
   The chronology's four colours are NOT here either: those encode which
   tradition a bar belongs to, they are data the way a path's King-scale colour
   is data, and a reader comparing two periods must not be comparing two
   themes. Same rule the diagrams follow.

   The lift stays almost invisible on purpose — 1.09:1 here against the dark
   theme's 1.05:1. `--surface` against `--background` is not how a current
   choice is ever marked; the 2px underline is, in both themes. */
:root[data-theme="light"] {
  /* The counterpart of the note above: without this every native radio,
     checkbox, scrollbar and focus ring stays drawn for a near-black page while
     the page itself is cream. */
  color-scheme: light;

  /* Off-cream, and warm rather than grey — the same warmth the dark theme has,
     read from the other end. Checked against all three inks and the accent by
     spec/javascript/contrast.test.js, which now runs the arithmetic twice. */
  --background: #f3eddf;
  --surface: #fbf7ec;
  --surface-hover: #fffdf5;
  --text-primary: #15120b;
  --text-secondary: #4b4335;
  --text-subtle: #6d6453;
  --border: #d8cfb9;
  /* The dark theme's #a88b52 gold is 1.9:1 on cream — it reads as a smudge.
     Darkened until it carries the same weight it has on the dark ground:
     5.22:1 here against 5.83:1 there, so a link underline and a focus ring
     are as findable in one theme as the other. */
  --accent: #7a5e1f;

  /* 6.46:1 on the ground, where the dark theme's #d98b78 is 2.27:1. */
  --danger: #9b2d1c;
  /* Paper, because in this theme the seals are NOT inverted: they are potrace
     output, black paths on nothing, so they are simply themselves here. */
  --seal-ground: #fffdf5;
  --tint-deepen: rgb(0 0 0 / 0.07);

  --shadow-soft: rgb(0 0 0 / 0.08);
  --shadow-strong: rgb(0 0 0 / 0.16);
  --scrim: rgb(0 0 0 / 0.65);
  --sheen: rgb(0 0 0 / 0.14);
}

/* There was no `a` rule anywhere in this stylesheet, so every link that was not
   given a class of its own rendered in the browser's default #0000EE — 2.01:1
   against the ground, 1.72:1 once visited. It was the most prominent thing on
   the section index, the spreads index and the reading setup, and it was the
   one element on those pages nobody had designed. */
a {
  color: var(--ink);
  text-decoration-color: var(--accent);
  text-underline-offset: 0.15em;
}
a:hover { text-decoration-color: var(--accent); }
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* The browser draws these at 13x13, which is under the 24px WCAG 2.2 asks of
   a target and small to hit with a thumb. The label around one is the real
   target and stays the thing to click; this just makes the box itself worth
   aiming at. */
/* A path or a filename has no spaces to break at, so on a phone it simply
   ran off the side — and WCAG 1.4.12 makes it worse, because a reader's own
   letter-spacing lengthens the token without giving it anywhere to break.
   `anywhere` lets it wrap mid-token, which is right for a filename and is the
   only way one fits a 375px screen at all. */
code {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* A paragraph with no class of its own is running prose nobody designed, and
   on a 1440px screen it ran the full width of its container — 120 characters a
   line on `/solomonic`. Everything with a class has been given a width on
   purpose and is left alone. */
#main p:not([class]) { max-width: var(--reading-measure); }

input[type="checkbox"],
input[type="radio"] {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0 0.15rem 0 0;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Respond to the component's own box, not the viewport, so the tree can be
   embedded at any width. */
#tree-of-life {
  container-type: inline-size;
}

.tree {
  display: grid;
  gap: 1.5rem 2rem;
  grid-template-columns: minmax(0, 1fr);
  /* Below 900px the table is the primary view; the diagram follows it. */
  grid-template-areas:
    "masthead"
    "toggle"
    "figure"
    "aside";
  max-width: 84rem;
  margin: 0 auto;
  padding: 2rem 1.25rem 4rem;
}

.tree--wide {
  grid-template-columns: minmax(0, 1fr) 22rem;
  grid-template-areas:
    "masthead masthead"
    "figure   aside"
    "tables   tables";
  align-items: start;
}

.tree__masthead { grid-area: masthead; }
.tree__figure   { grid-area: figure; min-width: 0; }
.tree__aside    { grid-area: aside; min-width: 0; }
.viewtoggle     { grid-area: toggle; }
.tables         { min-width: 0; }

.tree--wide .tree__aside {
  position: sticky;
  top: 1.5rem;
}

.tree__heading {
  margin: 0;
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  font-weight: 400;
  letter-spacing: 0.01em;
}

.tree__standfirst {
  margin: 0.35rem 0 0;
  max-width: 56ch;
  color: var(--ink-muted);
  font-size: 0.95rem;
}

/* Hermetic Qabalah is a reception of Jewish Kabbalah, not a parallel
   invention. The app says so rather than presenting two equivalent modes. */
.tree__provenance {
  margin: 0.75rem 0 0;
  max-width: 62ch;
  color: var(--ink-faint);
  font-size: var(--type-small);
  line-height: 1.6;
  border-left: 1px solid var(--rule);
  padding-left: 0.9rem;
}