/* Theme bridge for the interactive tools (the Prophetic Timeline, which now carries the genealogy).
 *
 * The React components style themselves inline from ten CSS custom properties, each written as
 * var(--color-x, <light-mode fallback>) -- see the `theme` object in app/src/components/chronology/shared.js and
 * MillennialWeek.jsx. Those ten used to be defined by Astro's BaseLayout, which carried its own
 * palette and its own dark-mode toggle. Now mkdocs-material owns the page, so they are defined
 * here in terms of material's own variables instead.
 *
 * These MUST be declared on the element carrying data-md-color-scheme, which material puts on
 * <body> -- NOT on :root, which is where this file had them until it was caught by eye.
 *
 * Material declares the light values on `:root,[data-md-color-scheme=default]` and the dark ones
 * on `[data-md-color-scheme=slate]`. Only the second selector matches <body>; :root is <html>,
 * which always holds the light set. A custom property is substituted at computed-value time on
 * the element that DECLARES it, so `--color-text: var(--md-default-fg-color)` declared at :root
 * resolved against <html> and froze to the light value, then inherited that everywhere. The
 * toggle changed material's own colours and nothing in the tools moved.
 *
 * Declared on <body> it resolves correctly in both directions: in the default scheme body matches
 * [data-md-color-scheme=default] and gets the light set, in slate it gets the dark one.
 *
 * Given the correct scope, no [data-md-color-scheme="slate"] block is needed: material redefines
 * the --md-* values per scheme, so the tools follow the palette toggle for free.
 */
[data-md-color-scheme] {
  --color-text: var(--md-default-fg-color);
  --color-text-muted: var(--md-default-fg-color--light);
  --color-text-subtle: var(--md-default-fg-color--light);
  --color-bg: var(--md-default-bg-color);
  --color-bg-elevated: var(--md-default-bg-color);
  --color-card-bg: var(--md-code-bg-color);
  --color-card-hover: var(--md-accent-fg-color--transparent);
  --color-border: var(--md-default-fg-color--lightest);
  --color-border-strong: var(--md-default-fg-color--lighter);
  --color-primary: var(--md-primary-fg-color);

  /* Selected-row and callout surfaces. The components used fixed indigo/blue-50 and amber tints
   * for these, which are near-white: fine on Astro's always-light page, unreadable once the
   * palette toggle can put white text on top of them. Both are alpha/scheme-aware here. */
  --color-selected-bg: var(--md-accent-fg-color--transparent);
  --color-callout-bg: var(--md-code-bg-color);

  /* The timeline ruler's Gregorian years, one colour per epoch. Material has no variable for
   * these, so each needs its own dark value: the light ones are too dark to read on slate. */
  --color-epoch-site: #1d4ed8;
  --color-epoch-compare: #be123c;
  --color-eighth-day: #047857;
  --color-link-quotation: #1d4ed8;
  --color-link-inner: #047857;
  --color-link-allusion: #b45309;
  --color-link-candidate: #be123c;
  --color-link-crosslang: #7c3aed;
}

[data-md-color-scheme="slate"] {
  --color-epoch-site: #93c5fd;
  --color-epoch-compare: #fda4af;
  --color-eighth-day: #6ee7b7;
  --color-link-quotation: #93c5fd;
  --color-link-inner: #6ee7b7;
  --color-link-allusion: #fcd34d;
  --color-link-candidate: #fda4af;
  --color-link-crosslang: #c4b5fd;
}

/* Material's content column is 61rem, but the viewer wants up to 1400px and holds wide tables and
 * a gantt chart. Widen the grid only on pages that actually mount a tool -- keyed off the mount
 * div, so no prose page is affected and nothing has to be remembered when adding a page. The
 * component keeps its own max-width and centring, so this raises the ceiling rather than forcing
 * full width.
 */
.md-main:has(.md-main:has(#timeline-root) .md-grid {
  max-width: 100%;
}

/* The tools render their own controls and headings; they don't need the article's top padding
 * fighting the card layout underneath. */
#timeline-root {
  margin-top: 1rem;
}

/* The millennial-week chart has a fixed minimum width; below tablet it has to scroll rather than
 * squash. This was .timeline-container in the Astro page's own <style> block. */
@media (max-width: 1024px) {
  #timeline-root {
    overflow-x: auto;
  }
}

/* Form controls do not inherit colour or font from their parent -- the browser's own stylesheet
 * gives them `color: buttontext` and a `Field` background, which stay light no matter what the
 * page around them does. That is why the tree's expand/collapse twisty looked identical in both
 * themes, and why the filter selects and search boxes rendered as white blocks on a dark page.
 *
 * Done here rather than as inline styles on each control because there are 23 of them across the
 * two tools, and the next one added would have the same bug. Inline styles win over these rules,
 * so the controls that DO set a colour deliberately -- white text on a saturated chip, say --
 * keep it; this only fills the gaps.
 */
#timeline-root button,
#timeline-root select,
#timeline-root input {
  color: inherit;
  font-family: inherit;
}

#timeline-root select,
#timeline-root input,
#timeline-root option {
  background-color: var(--color-bg-elevated);
}

/* Placeholder text needs the muted token explicitly; it does not follow `color: inherit`. */
#timeline-root input::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}