/* Four Letter Records — the re-skin for pages the product repos publish (Artemis manual, Artemis setup guide,
   ZEROPOINT manual). serve.py serves those files untouched on disk but, on the way out, puts flr.css in front of
   their own <style>, this file after it, the site header after <body> and the footer before </body>, and adds
   class="doc doc-<product>" to <body>. Their own CSS keeps the layout of the content; this file
   (1) recolours it through their own variables, (2) repairs the site header/footer where their bare selectors
   (header, .wrap, h3, ul, p, a) reach them, (3) undoes flr.css rules that collide with their class names. */

/* 1 ── their variables, recoloured: bone on black, the product's own accent */
body.doc {
  --bg: var(--ink-0); --paper: var(--ink-0); --panel: var(--raised); --line: var(--rule);
  --ink: var(--bone); --mid: var(--bone-dim); --soft: var(--bone-faint);
  --amber: var(--accent); --blue: var(--bone); --code: var(--bone);
  --ink-0: #060606; --rule: #2A2620;
  background: #060606; color: #EAE0CE; font-family: var(--f-sans);
}
/* their --ink is the text colour; the site's --ink is the ground. Inside the header and footer it is the ground again. */
body.doc .site-head, body.doc .site-foot, body.doc .skip { --ink: #060606; }
html:has(body.doc) { background: #060606; }
body.doc-artemis { --accent: #FFB020; }
body.doc-zeropoint { --accent: #FF2A1C; --red: #FF6A5C; --green: #7FCF8F; }
/* their old purple marble clouds + glow (Artemis manual) */
body.doc::before { content: none !important; }
body.doc .edge-glow { display: none !important; }
/* the old in-page site nav, if a page still carries one (hidden; serve.py also strips it) */
body.doc .fnav { display: none !important; }

/* their content column clears the fixed header */
body.doc > .wrap { padding-top: calc(var(--head-h) + var(--s7)); padding-bottom: var(--s8); }

/* headings in the brand face: Helvetica Bold, tracked caps for h1/h2 */
body.doc > .wrap h1, body.doc > .wrap .mast h1 { font: 700 clamp(2.25rem, 1.4rem + 3.4vw, 4rem)/1.04 var(--f-sans) !important;
  letter-spacing: .08em; text-transform: uppercase; color: var(--bone); }
body.doc > .wrap h2 { font-family: var(--f-sans) !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: .12em; color: var(--bone); }
body.doc > .wrap h3, body.doc > .wrap h4 { font-family: var(--f-sans); color: var(--bone); }
body.doc > .wrap h2 .n { color: var(--accent); }
body.doc > .wrap a { color: var(--bone); text-decoration-color: var(--bone-faint); }
body.doc > .wrap a:hover { text-decoration-color: currentColor; }
body.doc > .wrap > header, body.doc > .wrap > .mast { border-bottom: 1px solid var(--rule); }
body.doc > .wrap .brand { color: var(--accent); }

/* panels, notes, code: no purple, no paper */
body.doc > .wrap .toc, body.doc > .wrap .note { border-radius: 2px; }
body.doc > .wrap .toc a:hover { color: var(--accent); }
body.doc > .wrap .note.warn { background: rgba(255, 106, 92, .08); }
body.doc > .wrap .note.key { background: rgba(127, 207, 143, .07); }
body.doc > .wrap code, body.doc > .wrap .mono { background: var(--raised); border: 1px solid var(--rule); color: var(--bone); }
body.doc > .wrap pre, body.doc > .wrap .flow { background: var(--raised); color: var(--bone-dim); border: 1px solid var(--rule);
  border-radius: 2px; margin: 1.1rem 0; }
body.doc > .wrap .flow .hi { color: var(--accent); }
body.doc > .wrap .flow .dim { color: var(--bone-faint); }
body.doc > .wrap th { border-bottom-color: var(--bone-faint); }
body.doc > .wrap kbd { border-radius: 2px; }
/* setup guide: the numbered step cards */
body.doc > .wrap ol > li { border-radius: 2px; }
body.doc > .wrap ol > li::before { color: var(--ink-0); }

/* 3 ── flr.css rules that share a class name with their content */
body.doc > .wrap .lead { max-width: none; color: var(--bone-dim); }
body.doc > .wrap .meta { display: block; padding: 0; }
body.doc > .wrap p, body.doc > .wrap li { max-width: none; }

/* 2 ── the site header and footer, repaired where their bare selectors reach them */
body.doc header.site-head { padding: 0 var(--gutter); margin: 0; border-bottom: 1px solid var(--rule); }
body.doc .site-head a, body.doc .site-foot a { text-decoration: none; }
body.doc .site-head .nav a { color: var(--bone-dim); }
body.doc .site-head .nav a:hover, body.doc .site-head .nav a[aria-current="page"] { color: var(--bone); }
body.doc .site-head .lockup { color: var(--bone); }
body.doc .site-foot .wrap { max-width: 1240px; padding: 0; margin: 0 auto; }
body.doc .site-foot h3 { font: 700 11px/1.3 var(--f-sans); letter-spacing: .2em; text-transform: uppercase;
  color: var(--bone-faint); margin: 0 0 var(--s3); }
body.doc .site-foot ul { margin: 0; padding: 0; list-style: none; color: inherit; }
body.doc .site-foot li { margin: 0; }
body.doc .site-foot li + li { margin-top: var(--s2); }
body.doc .site-foot li a { color: var(--bone-dim); }
body.doc .site-foot p { margin: 0; }
body.doc .site-foot .legal a { color: var(--bone-dim); }