/* Shared look of the site's pages (home, Research, Methods), modeled on ruyf26.samlay.xyz (user, 2026-10-10:
   one type scale, one set of colours, one column). Page-specific styles stay in each page. */
/* the colours are registered as colours, so the light / dark switch can ease the variables themselves (see .theme-anim) */
@property --bg { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
@property --text { syntax: "<color>"; inherits: true; initial-value: #1a1a1a; }
@property --muted { syntax: "<color>"; inherits: true; initial-value: #6b6b6b; }
@property --faint { syntax: "<color>"; inherits: true; initial-value: #9a9a9a; }
@property --line { syntax: "<color>"; inherits: true; initial-value: #e6e6e6; }
@property --hover { syntax: "<color>"; inherits: true; initial-value: #f7f7f7; }
@property --tint { syntax: "<color>"; inherits: true; initial-value: #3f51b5; }
@property --verified { syntax: "<color>"; inherits: true; initial-value: #2e7d32; }
@property --unverified { syntax: "<color>"; inherits: true; initial-value: #b26a00; }
@property --question { syntax: "<color>"; inherits: true; initial-value: #6b6b6b; }
@property --analysis { syntax: "<color>"; inherits: true; initial-value: #3f51b5; }
:root {
  --bg: #ffffff; --text: #1a1a1a; --muted: #6b6b6b; --faint: #9a9a9a; --line: #e6e6e6; --hover: #f7f7f7;
  --tint: #3f51b5;
  /* how sure an entry is (Research, Timeline) */
  --verified: #2e7d32; --unverified: #b26a00; --question: #6b6b6b; --analysis: #3f51b5;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* timing, the same across the site (user, 2026-10-10; also in viewer.html): small feedback, overlays appearing,
     closing / a change of the whole page, overlays fading after the idle wait */
  --t-feedback: .2s; --t-in: .3s; --t-out: .5s; --t-idle: 1.5s;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark; --bg: #161616; --text: #ededed; --muted: #a0a0a0; --faint: #777777; --line: #2c2c2c; --hover: #1f1f1f;
    --tint: #9fa8da;
    --verified: #81c784; --unverified: #ffb74d; --question: #a0a0a0; --analysis: #9fa8da;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark; --bg: #161616; --text: #ededed; --muted: #a0a0a0; --faint: #777777; --line: #2c2c2c; --hover: #1f1f1f;
  --tint: #9fa8da;
  --verified: #81c784; --unverified: #ffb74d; --question: #a0a0a0; --analysis: #9fa8da;
}

/* moving between the site's pages cross-fades (View Transitions; browsers without it simply change page) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .5s; animation-timing-function: ease; }
/* behind the two pictures being cross-faded, the page colour, not the browser's white: a picture with see-through
   parts (the Network's 3D view) otherwise let light through mid-fade (user, 2026-10-13: dark, light, dark) */
::view-transition { background: var(--bg); }

* { margin: 0; padding: 0; box-sizing: border-box; }
/* short pages keep the scrollbar's room, so every page's column lines up; the page colour reaches the window edges */
html { scrollbar-gutter: stable; background: var(--bg); }
body { font-family: var(--font); font-size: 16px; line-height: 1.6; background: var(--bg); color: var(--text); }
a { color: inherit; }
code { font: 0.8rem var(--mono); }

/* one column, the same on every page */
.container { max-width: 760px; margin: 0; padding: 48px 16px 64px; }
/* the column sits at the left on every page, not in the middle (user, 2026-10-13: so the Network's view has the
   middle of the screen); wider screens give it a wider margin */
@media (min-width: 900px) { .container { max-width: 840px; padding-left: 40px; padding-right: 40px; } }

/* header: eyebrow (link home + authors), title, one-line subtitle, hairline */
.header { padding-bottom: 32px; border-bottom: 1px solid var(--line); margin-bottom: 32px; }
.eyebrow { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); margin-bottom: 12px; }
.home { color: inherit; }   /* "home" in the eyebrow, underlined like the viewer's */
.header h1 { font-size: 2.4rem; line-height: 1.15; letter-spacing: -0.02em; margin-bottom: 12px; }
.subtitle { color: var(--muted); max-width: 520px; }
/* switching between the views of one page (Research: Network, List), under the title */
.views { display: flex; gap: 14px; font-size: 0.8rem; margin: -4px 0 12px; }
.views a { color: var(--muted); text-decoration: none; padding-bottom: 1px; border-bottom: 1px solid transparent;
  transition: color var(--t-feedback), border-color var(--t-feedback); }
.views a:hover { color: var(--text); }
.views a.on { color: var(--text); border-bottom-color: currentColor; }

/* small uppercase label over a group (Research topics, home entries, Methods contents) */
.label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint);
  padding-bottom: 8px; border-bottom: 1px solid var(--line); }

/* an entry in a list: title + muted summary (Research findings, home entries) */
.entry-title { font-size: 1.15rem; line-height: 1.35; font-weight: 700; }
.entry-summary { color: var(--muted); font-size: 0.95rem; }

/* running text */
.prose p { margin-bottom: 12px; }
.note { color: var(--muted); font-size: 0.85rem; }

.footer { margin-top: 64px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 0.8rem; color: var(--faint); }

/* the scrollbar takes the page's colours, so it fades with them instead of jumping when color-scheme flips */
html { scrollbar-color: var(--line) var(--bg); }
/* switching light / dark eases the colour variables on the root only (theme.js sets .theme-anim for the length of the
   change); every element follows them in step. Easing each element's own colour instead made inherited colours lag
   behind and jump at the end (home: Model / Research / Methods flashed; user, 2026-10-12, measured). */
.theme-anim { transition: --bg var(--t-out) ease, --text var(--t-out) ease, --muted var(--t-out) ease,
    --faint var(--t-out) ease, --line var(--t-out) ease, --hover var(--t-out) ease, --tint var(--t-out) ease,
    --verified var(--t-out) ease, --unverified var(--t-out) ease, --question var(--t-out) ease,
    --analysis var(--t-out) ease !important; }
/* hover underlines (entry titles) come in with the small-feedback time; other links keep theirs */
.entry-title, .finding-title { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: transparent;
  transition: text-decoration-color var(--t-feedback); }

.theme-toggle { position: fixed; right: 16px; bottom: 16px; width: 36px; height: 36px; font-size: 1rem; color: var(--text);
  background: var(--bg); border: 1px solid var(--line); border-radius: 3px; cursor: pointer; }

@media (max-width: 600px) {
  .container { padding-top: 32px; }
  .header h1 { font-size: 1.9rem; }
}