/* Garleak design tokens. Source of truth for the static site: the build (garleak-site build)
   prepends this file to site/garleak_site/static/site.css and writes /static/garleak.css. Palette from DESIGN.md with the changes in
   design/NOTES.md: white page, cream moved to --panel, stage ramp v2.
   Contrast of every pair is recomputed by site/scripts/contrast.py; the table is in NOTES.md. */
:root {
  color-scheme: light;

  /* ground */
  --paper: #FFFFFF;      /* page background */
  --panel: #F6F3EA;      /* secondary ground: masthead strip, notices, bands */

  /* text */
  --ink: #1F1B14;        /* body text */
  --ink-soft: #5C5443;   /* metadata, secondary text */
  --bronze: #6E5218;     /* links and interactive text */
  --flag: #9A3B16;       /* gated, failed, contested */

  /* lines */
  --rule: #DCD3BE;       /* hairlines between rows; decorative, carries no meaning alone */
  --rule-strong: #8C8373; /* borders of form controls, which must reach 3:1 */

  /* identity and fills */
  --gold: #B8913F;       /* identity only: mark, header rule, active underline. Never text. */
  --gold-pale: #D9BE7E;  /* fills that carry no text (pct_original bars) */
  --gold-wash: #F0E8D2;  /* hover and highlight bands that do carry text */
  --flag-wash: #F4E4D9;  /* contest and deletion backgrounds */
  --ins: #EADFBF;        /* diff insertion background */

  /* stage ramp v2: one cool hue, monotone in luminance. Papers use a filled dot at T0-T4,
     sketches a ring at N0-N3 (same positions). Labels are always set in --ink. */
  --s0: #908B82;  /* T0 / N0. 3.05:1 on --paper, 2.8:1 on --gold-wash, accepted because the
                     numeral and label always carry the stage (DESIGN.md, ramp v2) */
  --s1: #5C8278;  /* T1 / N1 */
  --s2: #2F7565;  /* T2 / N2 */
  --s3: #006751;  /* T3 / N3 */
  --s4: #00583F;  /* T4 */

  --serif: "Source Serif 4", "Charis SIL", Georgia, "Times New Roman", serif;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* type scale (Bringhurst): 11 / 13 / 15 / 17 / 24 px */
}

/* SPDX-License-Identifier: AGPL-3.0-or-later
   Plain preprint-archive layout: system sans, black on white, blue links, dense listings.
   Garleak's own identity is the gold top band and the garlic mark; the stage colors
   (--s0 to --s4) come from design/tokens.css, which the build prepends to this file. */

html, body { margin: 0; background: #fff; color: #000; }
body { font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif; font-size: 16px; line-height: normal; }
a { color: #0000ee; text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid #0000ee; outline-offset: 1px; }
img { max-width: 100%; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; background: #fff; padding: 4px 8px; }
.skip:focus { left: 8px; top: 8px; }
.mono, code, pre { font-family: Menlo, Consolas, "Courier New", monospace; }

/* top band */
.top { background: var(--gold, #B8913F); min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: 0 1em; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 8px; color: #1F1B14; font-size: 22px; font-weight: bold; }
.brand:hover { text-decoration: none; }
.brand img { width: 34px; height: 34px; mix-blend-mode: multiply; }
.toplinks { display: flex; align-items: center; gap: 1.2em; font-size: 14px; }
.toplinks a { color: #1F1B14; }
.toplinks input { font: inherit; font-size: 13px; padding: 2px 4px; border: 1px solid #8C8373; width: 12em; background: #fff; color: #000; }
.subheader { background: #eee; padding: 4px 1em; font-size: 14.4px; font-weight: bold; }
.subheader a { color: #000; }
.banner { background: #fff4d6; border-bottom: 1px solid #e3d3a4; padding: 4px 1em; font-size: 13px; margin: 0; }

main { padding: 0 1em 2em 1em; }
h1 { font-size: 25.9px; margin: 18px 0 14px; }
h2 { font-size: 21.6px; margin: 18px 0 8px; }
h3 { font-size: 15.2px; margin: 16px 0 8px; }
p, li { font-size: 14.4px; }
ul { padding-left: 40px; }
.small { font-size: 13px; }
.muted { color: #555; }
.fail { color: #9A3B16; font-weight: bold; }

/* home */
.intro { max-width: 34em; margin: 14px 0; }
.box { border: 1px solid #ddd; padding: 6px 10px; max-width: 34em; font-size: 14.4px; margin: 10px 0 16px; }
.cats li { margin: 2px 0; }

/* stage glyphs: filled dot for papers, ring for sketches */
.s0 { --st: var(--s0, #908B82); } .s1 { --st: var(--s1, #5C8278); } .s2 { --st: var(--s2, #2F7565); }
.s3 { --st: var(--s3, #006751); } .s4 { --st: var(--s4, #00583F); }
.dot, .ring { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; vertical-align: 0; }
.dot { background: var(--st); }
.ring { box-sizing: border-box; border: 2px solid var(--st); }

/* listings */
dl.articles { margin: 0 0 12px; }
dl.articles dt { font-size: 13px; margin-top: 14px; }
dl.articles dt a:not([href]) { color: #000; }
dl.articles dd { margin-left: 40px; font-size: 13px; }
.list-title { font-size: 18px; font-weight: bold; line-height: 1.2; }
.list-title a { color: #000; }
.list-authors { font-size: 14.3px; margin-top: 2px; }
.list-comments, .list-subjects { font-size: 11.7px; margin-top: 2px; }
.primary-subject { font-weight: bold; }
dd p.abstract { font-size: 13px; line-height: 1.3; margin: 10px 0 0; max-width: 60em; }

/* abs page */
.abs-page { display: flex; gap: 24px; align-items: flex-start; }
.leftcolumn { flex: 1; min-width: 0; }
.extra-services { width: 260px; flex: none; font-size: 14.4px; padding-top: 10px; }
.full-text { border-left: 5.5px solid #ddd; padding: 6px 14px; margin-bottom: 14px; }
.full-text h2 { font-size: 22px; margin: 0 0 4px; }
.full-text ul, .extra-services ul { list-style: none; padding-left: 12px; margin: 0 0 8px; }
.extra-services li { font-size: 14.4px; }
.extra-services h3 { font-size: 14.4px; font-weight: normal; margin: 10px 0 2px; }
.dateline { font-size: 11.7px; font-style: italic; margin: 10px 0 4px; }
h1.title { font-size: 23.3px; line-height: 1.2; margin: 4px 0 12px; }
.authors { font-size: 15.5px; }
.notpr { font-size: 12px; color: #555; margin: 6px 0 0; }
blockquote.abstract { font-size: 13.6px; line-height: 1.55; margin: 16px 40px; }
.metatable table { border-collapse: collapse; font-size: 12.3px; }
.metatable td { padding: 1px 0; vertical-align: top; }
.metatable td.label { padding-right: 6.5px; white-space: nowrap; }
.history { font-size: 13px; line-height: 1.5; }
.history h2 { font-size: 16px; margin: 20px 0 4px; }
.history p { font-size: 13px; margin: 0 0 3px; }
.history .note { color: #555; }

/* diffs */
.diffbody { font-size: 14.4px; line-height: 1.6; max-width: 50em; }
ins { background: #dcf5dc; text-decoration: none; }
del { background: #fbe0dc; color: #7a2a12; }

/* blog */
ul.posts { padding-left: 20px; }
ul.posts li { margin: 6px 0; }
.blogbody p, .blogbody li { font-size: 15px; line-height: 1.55; }
.blogbody { max-width: 42em; }

/* plain pages */
.prose { max-width: 50em; }
table.plain { border-collapse: collapse; font-size: 14px; margin: 6px 0 12px; }
table.plain th, table.plain td { text-align: left; padding: 3px 12px 3px 0; border-bottom: 1px solid #ddd; vertical-align: top; }
pre { background: #f5f5f5; padding: 8px 10px; font-size: 13px; overflow-x: auto; }
.nf { text-align: center; padding: 40px 1em; }

footer.foot { background: #f9f7f7; border-top: 1px solid #eee; padding: 10px 1em 16px; font-size: 13px; }
footer.foot p { font-size: 13px; margin: 4px 0; }
footer.foot a { margin-right: 1em; }

@media (max-width: 760px) {
  .abs-page { flex-direction: column; }
  .extra-services { width: auto; }
  dl.articles dd { margin-left: 16px; }
  blockquote.abstract { margin: 12px 0; }
}