/* Graceful Tree Search — project stylesheet.
 *
 * Loaded via STYLESHEET in html/project/project.inc, which page_head() emits
 * AFTER the Bootstrap pair. BOINC's DARK_MODE ships two themes chosen by
 * prefers-color-scheme (bootstrap_darkly.min.css for dark,
 * sample_bootstrap.min.css for light), so every rule here has to survive both.
 * Hence tokens + one prefers-color-scheme override, rather than literal colors
 * in the rules.
 *
 * UNITS: never use rem here. Bootstrap 3 sets html{font-size:10px}, so 1rem is
 * 10px and every rem-based size comes out about a third too small. Sizes below
 * are px; em is fine where it should track the element's own font-size.
 *
 * This is Bootstrap 3, not 4/5 — no CSS grid gap shorthand
 * assumptions, and the framework's own classes stay untouched.
 */

:root {
  --gt-accent:      #147a5c;
  --gt-accent-soft: rgba(20, 122, 92, 0.10);
  --gt-link:        #10684f;
  --gt-link-hover:  #0a4735;
  --gt-ink:         #1c2321;
  --gt-muted:       #5f6b67;
  --gt-rule:        rgba(0, 0, 0, 0.12);
  --gt-panel:       #f6f8f7;
  --gt-warn:        #8a5a00;
  --gt-warn-soft:   rgba(214, 158, 46, 0.12);
  --gt-node:        #147a5c;
  --gt-node-ink:    #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --gt-accent:      #4ecfa4;
    --gt-accent-soft: rgba(78, 207, 164, 0.12);
  --gt-link:        #4ecfa4;
  --gt-link-hover:  #86e5c4;
    --gt-ink:         #e6ece9;
    --gt-muted:       #9aa8a3;
    --gt-rule:        rgba(255, 255, 255, 0.16);
    --gt-panel:       rgba(255, 255, 255, 0.04);
    --gt-warn:        #e3b341;
    --gt-warn-soft:   rgba(227, 179, 65, 0.12);
    --gt-node:        #4ecfa4;
    --gt-node-ink:    #10201a;
  }
}

/* ---------------------------------------------------------------- hero ---- */

.gt-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 32px;
  padding: 28px 0 34px;
  border-bottom: 1px solid var(--gt-rule);
  margin-bottom: 26px;
}

.gt-hero-art {
  flex: 1 1 320px;
  min-width: 0;
  text-align: center;
}

.gt-hero-art img {
  max-width: 100%;
  height: auto;
}

.gt-hero-text {
  flex: 1 1 320px;
  min-width: 0;
}

.gt-hero-text h1 {
  margin-top: 0;
  font-size: 32px;
  line-height: 1.22;
  letter-spacing: -0.015em;
}

.gt-lead {
  font-size: 18px;
  line-height: 1.6;
  color: var(--gt-muted);
}

.gt-hero-links {
  margin-top: 18px;
  font-weight: 600;
}

.gt-hero-links a { color: var(--gt-accent); }

.gt-sep {
  color: var(--gt-muted);
  padding: 0 8px;
}

/* --------------------------------------------------------------- prose ---- */

/* A measure of roughly 70 characters. Long-form mathematical explanation is
 * unreadable at full page width, and these pages are mostly explanation. */
.gt-prose {
  max-width: 44em;
  font-size: 15px;
  line-height: 1.65;
}

.gt-prose h3 {
  margin-top: 2em;
  margin-bottom: 0.6em;
  padding-bottom: 0.3em;
  border-bottom: 1px solid var(--gt-rule);
  font-size: 21px;
  letter-spacing: -0.01em;
}

.gt-prose ul,
.gt-prose ol { line-height: 1.65; }

.gt-prose li { margin-bottom: 0.4em; }

.gt-formula {
  margin: 1.1em 0;
  padding-left: 1.2em;
  /* border-left: 3px solid var(--gt-accent); -- owner: no left-border accent bars, 2026-09-16 */
  font-size: 17px;
}

.gt-note {
  color: var(--gt-muted);
  font-size: 13px;
}

.gt-dim { color: var(--gt-muted); }

/* ------------------------------------------------------------ callouts ---- */

.gt-callout {
  margin: 1.4em 0;
  padding: 14px 18px;
  background: var(--gt-accent-soft);
  /* border-left: 4px solid var(--gt-accent); -- owner: no left-border accent bars, 2026-09-16 */
  border-radius: 3px;
}

.gt-callout-warn {
  background: var(--gt-warn-soft);
  /* border-left-color: var(--gt-warn); -- see .gt-callout above */
}

/* -------------------------------------------------------------- tables ---- */

.gt-table {
  width: 100%;
  margin: 1.2em 0;
  border-collapse: collapse;
}

.gt-table th,
.gt-table td {
  padding: 7px 12px;
  border-bottom: 1px solid var(--gt-rule);
  text-align: left;
  vertical-align: top;
}

.gt-table thead th {
  border-bottom: 2px solid var(--gt-rule);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gt-muted);
}

/* Counts are compared down the column, so they need tabular figures and a
 * monospaced-digit alignment; proportional digits make 6,226,306,037,178
 * impossible to scan against 14,830,871,802. */
.gt-table-counts td:nth-child(2) {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  text-align: right;
}

/* ------------------------------------------------------------- figures ---- */

.gt-figure {
  margin: 1.6em 0;
  padding: 18px;
  background: var(--gt-panel);
  border: 1px solid var(--gt-rule);
  border-radius: 4px;
  text-align: center;
}

.gt-figure img {
  max-width: 100%;
  height: auto;
}

/* -------------------------------------------------------------- footer ---- */

.gt-footer {
  margin-top: 40px;
  padding-top: 18px;
  border-top: 1px solid var(--gt-rule);
  text-align: center;
  color: var(--gt-muted);
  font-size: 13px;
}

.gt-footer-links {
  margin-bottom: 14px;
}

.gt-footer-boinc { margin-bottom: 8px; }
.gt-footer-copy  { margin-bottom: 4px; }

/* --------------------------------------------------------------- small ---- */

@media (max-width: 767px) {
  .gt-hero {
    gap: 18px;
    padding-top: 14px;
  }
  .gt-hero-text h1 { font-size: 25px; }
  .gt-lead { font-size: 16px; }
  .gt-table th,
  .gt-table td { padding: 6px 8px; }
}

/* ------------------------------------------------- framework overrides ---- */

/* bootstrap.inc panel() defaults to class "panel-primary" — Bootstrap blue,
 * which fights the green used by the hero, links and figure. Retint only the
 * chrome; leave layout and the framework's other panel variants alone. */
.panel-primary {
  border-color: var(--gt-accent);
}

.panel-primary > .panel-heading {
  background-color: var(--gt-accent);
  border-color: var(--gt-accent);
  color: #ffffff;
}

@media (prefers-color-scheme: dark) {
  .panel-primary > .panel-heading { color: #10201a; }
}

/* Links. Bootstrap's light theme makes these blue; in dark mode BOINC's own
 * custom_dark.css sets `a:not(.btn){color:#EA9185}` — salmon. Both fight the
 * green identity.
 *
 * A bare `a` selector is NOT enough: custom_dark.css scores (0,1,1) and beats
 * it even though we load later. Match its selector shape exactly, including
 * :visited (it styles that too) and the :not(.btn) guard that keeps every
 * button's own colour intact. The navbar is safe either way —
 * `.nav.navbar-nav li a` outranks all of this.
 *
 * --gt-link is a deeper green than --gt-accent purely so inline links sit
 * slightly heavier than headings and figure strokes. Both clear WCAG AA for
 * body text; measured ratios are in docs/evidence/web-content/CONTRAST.txt. */
a:not(.btn),
a:visited:not(.btn) {
  color: var(--gt-link);
}

a:not(.btn):hover,
a:not(.btn):focus {
  color: var(--gt-link-hover);
}