/* =========================================================================
   file:  /mnt/Vancouver/domains/persagen/public/css/wpi.css
   description:  Shared Persagen / WPI base stylesheet (readability first)
   created:  2026-Oct-14
   version:  v02 [2026-Oct-15] DRAFT (light theme only); distilled from pg-solr.css (v07)
   notes:  * Replaces the ~27 KB of live rules in pg-solr.css with ~150 lines.
           * Colors, fonts and sizes live in :root tokens (edit once).
           * Internal links = green, external = blue; no classes needed
             (legacy a.persagen / a.persagen_ext still work as aliases).
           * Site-specific layers (e.g. fist-and-rose.css) load AFTER this.
   ========================================================================= */

/* ---- Fonts: see css/atkinson.css (self-hosted; load it before this file) -- */

/* ---- Tokens ------------------------------------------------------------ */
:root {
  color-scheme: light;
  --font: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", Arial, Verdana, sans-serif;
  --mono: Inconsolata, "DejaVu Sans Mono", monospace;

  --bg: #f8f9f9;          /* page (as pg-solr.css) */
  --surface: #ffffff;
  --text: #1a1a1a;
  --muted: #595959;
  --rule: #949494;
  --zebra: #edf0f0;
  --th: #cbe6ef;

  --green: #008000;       /* Persagen green (same as LaTeX \pg) */
  --green-hover: #005c00;
  --ext: #0033cc;         /* external links */
  --ext-hover: #001f7a;

  --measure: 46rem;       /* reading column */
  --fs: 1.2rem;           /* base text size */
}

/* ---- Base -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; padding: 0 1rem 3rem;
  background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: var(--fs); line-height: 1.6;
}
main, .wrap { max-width: var(--measure); margin-inline: auto; }
p { margin: 1rem 0; }

h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.3; margin: 1.75rem 0 .5rem; }
h1 { font-size: 1.75rem; margin-top: 0; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.05rem; }
h5, h6 { font-size: .95rem; }

ul, ol { margin: .5rem 0 .5rem 2rem; padding: 0; }
li { margin: .2rem 0; }
hr { border: 0; height: 1px; background: var(--rule); margin: 2rem 0 .75rem; }
hr.green { background: var(--green); }
small, .small { font-size: .9rem; }
.muted { color: var(--muted); }
.sc { font-variant: small-caps; }

/* ---- Links: internal green (bold on hover); external blue --------------- */
a { text-decoration: none; color: var(--green); }
a:visited { color: var(--green); }
a:hover, a:focus-visible { color: var(--green-hover); font-weight: 700; }
a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

a[href^="http"]:not([href*="persagen.org"]),
a.persagen_ext { color: var(--ext); }
a[href^="http"]:not([href*="persagen.org"]):visited { color: var(--ext); }
a[href^="http"]:not([href*="persagen.org"]):hover { color: var(--ext-hover); }

a[href$=".pdf"]::before { content: "PDF\00a0"; font-size: .7em; font-weight: 700; letter-spacing: .03em; }

/* ---- Quotes, code ------------------------------------------------------ */
blockquote { margin: 1rem 0 1rem 1.5rem; padding-left: 1rem; border-left: 3px solid var(--rule); font-size: .95rem; max-width: 40rem; }
blockquote p { margin: .5rem 0; }
code, pre, kbd { font-family: var(--mono); }
pre { overflow-x: auto; padding: .75rem 1rem; background: var(--surface); border: 1px solid var(--rule); font-size: .9rem; line-height: 1.4; }

/* ---- Tables (zebra + tinted header, as pg-solr.css) --------------------- */
.table-scroll { overflow-x: auto; }
table { border-collapse: collapse; margin: 1rem 0; font-size: .9rem; border: 1px solid var(--rule); background: var(--bg); }
th, td { border: 1px solid var(--rule); padding: .15rem .5rem; text-align: left; vertical-align: top; }
thead th, thead td { background: var(--th); font-weight: 700; }
tbody tr:nth-child(odd) { background: var(--zebra); }
caption { text-align: left; font-weight: 700; padding: .25rem 0; }

/* ---- Disclosure, figures ------------------------------------------------ */
details { margin: .75rem 0; border: 1px solid var(--rule); padding: .25rem .75rem; background: var(--surface); }
summary { cursor: pointer; font-weight: 700; padding: .25rem 0; }
figure { margin: 1.5rem 0; }
figcaption { font-size: .9rem; color: var(--muted); }
img { max-width: 100%; height: auto; }

/* ---- Print --------------------------------------------------------------- */
@media print {
  body { background: #fff; color: #000; font-size: 11pt; padding: 0; }
  a, a:visited { color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}

/* ---- Legacy aliases (pg-solr.css class names) --------------------------- */
a.persagen { color: var(--green); }