/* Chrome for httrack.com. Shares its palette with the documentation's
   html/doc.css in the httrack repo; the two fork on chrome, never on colour.

   Each var() is preceded by the literal it resolves to in light mode: a browser
   too old to parse the custom property drops that line and keeps the literal.
   The XP and Vista users the download page still serves are on such browsers. */

/* Keep byte-identical with the :root blocks in httrack's html/doc.css. */
:root {
	--field: #77b;
	--panel: #ccd;
	--accent: #99c;
	--ink: #111;
	--ink-soft: #444;
	--rule: #aab;
	--link: #00c;
	--link-hover: #c00;
	--code-bg: #e8e8f2;
	--chip: #dde;
	--shadow: rgba(0, 0, 0, .25);
}

@media (prefers-color-scheme: dark) {
	:root {
		--field: #171a2b;
		--panel: #22263a;
		--accent: #3b4066;
		--ink: #e6e6ee;
		--ink-soft: #a9adc4;
		--rule: #3b4066;
		--link: #9db4ff;
		--link-hover: #ff9d9d;
		--code-bg: #14172a;
		--chip: #2e3350;
		--shadow: rgba(0, 0, 0, .6);
	}
}

/* Site-only, kept out of the copied block. --ok marks the row matching the
   visitor's platform on the download page; --hairline separates the menu tabs,
   black in light mode as the table's cellspacing showed, and the field colour in
   dark, where black against it would not read. */
:root { --ok: #cfc; --hairline: #000; }
@media (prefers-color-scheme: dark) { :root { --ok: #24422c; --hairline: #171a2b; } }

/* Headings and chrome only, so one weight and the latin subset are enough.
   A browser without it falls through to the body stack. SIL OFL, see
   fonts/LeagueSpartan-OFL.txt. */
@font-face {
	font-family: "League Spartan";
	src: url(/fonts/league-spartan-700-latin.woff2) format("woff2");
	font-weight: 700;
	font-display: swap;
}

/* Trebuchet and Verdana sit after the system faces rather than ahead of them:
   they are 1996 fonts, and only Linux ever fell past them. */
:root {
	--body-font: system-ui, -apple-system, "Segoe UI", Roboto, "Trebuchet MS", Verdana, sans-serif;
	--display-font: "League Spartan", system-ui, -apple-system, "Segoe UI", Roboto, "Trebuchet MS", sans-serif;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	padding: 0 1rem 3rem;
	background: #77b;
	background: var(--field);
	color: #111;
	color: var(--ink);
	font: 1em/1.6 "Trebuchet MS", Verdana, system-ui, -apple-system, "Segoe UI", sans-serif;
	font-family: var(--body-font);
	overflow-wrap: break-word;
}

/* ---- page frame ---- */

.masthead, .wrap, .sitenav, .sitefooter { max-width: 68rem; margin-left: auto; margin-right: auto; }

.masthead { padding: .6rem 0 0; }

/* Take back the whitespace the SVG carries around the letters, restoring the old bitmap's spacing. */
.masthead img { display: block; max-width: 100%; height: auto; margin: -1.7px 0 -1.1px; }

.masthead .tagline {
	background: #000;
	color: #fff;
	font-family: var(--display-font);
	font-weight: 700;
	/* A one-line label has no use for the body's prose leading. */
	line-height: 1;
	padding: .3rem .4rem;
	/* No margin, unlike doc.css: on the site the bar sits against the wordmark,
	   as the tables it replaced did. */
}

.masthead .tagline a { color: #fff; text-decoration: none; }
.masthead .tagline a:hover { text-decoration: underline; }

.wrap {
	background: #ccd;
	background: var(--panel);
	border-bottom: 6px solid #000;
	padding: 1.5rem;
	/* Keep a floated screenshot inside the panel, as the table cell used to. */
	display: flow-root;
	/* The rings the 2007 pages carried. Transparent, so it rides on --panel. */
	background-image: url(/images/bg_rings.svg);
	background-repeat: no-repeat;
	background-position: top right;
}

@media (prefers-color-scheme: dark) {
	/* Rings dropped, not inverted: their lavender is a light-panel tone. */
	.wrap { background-image: none; }

	/* The wordmark is black on transparent, and all but vanishes on the dark field. */
	.masthead img { filter: invert(1); }
}

.sitefooter {
	/* No margin and no prose leading: the chicklet sits on the panel's black
	   edge, as the table it replaced did. */
	/* No colour: body's --ink inherits. doc.css's near-white read 3.6:1 here. */
	font-size: .8em;
	line-height: 1.3;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
}

@media (prefers-color-scheme: dark) { .sitefooter { color: var(--ink-soft); } }

/* ---- navigation ---- */

/* Tabs are blocks first: a browser without flexbox stacks them, still legible. */
.sitenav a, .sitenav .current {
	display: block;
	/* A one-line label has no use for the body's prose leading. */
	line-height: 1.2;
	padding: .3rem .5rem;
	text-align: center;
	font-family: var(--display-font);
	font-weight: 700;
	text-decoration: none;
	background: #99c;
	background: var(--accent);
	color: #111;
	color: var(--ink);
}

/* The tagline bar, the menus and the panel stack flush, as the tables they
   replaced did. The 1px separation runs both ways, as one table with
   cellspacing="1" gave between tabs and between its two rows alike. */
.sitenav { display: flex; flex-wrap: wrap; gap: 1px; background: #000; background: var(--hairline); }
.sitenav + .sitenav { border-top: 1px solid #000; border-top-color: var(--hairline); }
.sitenav a, .sitenav .current { flex: 1 1 8rem; }

.sitenav a:hover { background: var(--chip); color: var(--ink); }
.sitenav .current { background: #ccd; background: var(--panel); }

/* The Information strip reads as subordinate to the row above it. */
.sitenav.sub a, .sitenav.sub .current { font-weight: normal; font-size: .92em; }

/* ---- typography ---- */

/* h1 and h2 only: h3 and h4 sit inside prose, where the body face reads better. */
h1, h2 { font-family: var(--display-font); font-weight: 700; }

h1 { font-size: 1.9em; margin: 0 0 .3em; line-height: 1.2; }
/* No underline and a paragraph's gap above, unlike doc.css: these are short
   sections inside one panel, not the headings of a long document. */
h2 { font-size: 1.45em; margin: 1em 0 0; }
h3 { font-size: 1.15em; margin: 2em 0 .4em; }
h4 { font-size: 1.05em; margin: 1.6em 0 .3em; }
h2:first-child, h1 + h2 { margin-top: 0; }

p { margin: 0 0 1em; }

/* The old sheet's `body, td` shorthand kept cells at normal; prose leading pulls
   the 2001 tables apart and breaks the forum's 20px tree gifs. */
td, th { line-height: normal; }

a { color: #00c; color: var(--link); }
a:hover { color: #c00; color: var(--link-hover); }

code, kbd, pre {
	font-family: ui-monospace, "Cascadia Mono", Consolas, "DejaVu Sans Mono", monospace;
	font-size: .9em;
}

code, kbd { background: var(--code-bg); padding: .1em .35em; border-radius: 3px; }

pre {
	overflow-x: auto;
	max-width: 100%;
	padding: .7rem;
	background: var(--code-bg);
	border-left: 3px solid var(--accent);
}

/* Tighter than doc.css: on the site a rule separates blocks inside one page. */
hr { height: 1px; border: 0; background: #000; background: var(--rule); margin: .5em 0 1em; }

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

.note {
	margin: 0 0 1em;
	padding: .7rem 1rem;
	border-left: 4px solid var(--accent);
	background: var(--chip);
	font-size: .95em;
}

.note > :last-child { margin-bottom: 0; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; background: var(--panel); padding: .5rem; z-index: 10; }

/* ---- hooks the page content still uses ---- */

.hide { display: none; }
/* Same treatment as the guide's screenshots, without its click-to-zoom. */
figure { margin: 0 0 1.5em; text-align: center; }
figure img { border: 1px solid #aab; border-color: var(--rule); background: #fff; box-shadow: 0 2px 8px var(--shadow); }
figcaption { margin-top: .5em; font-size: .88em; color: #445; color: var(--ink-soft); }

.imgLeft { float: left; margin: 0 10px 10px 0; }
.imgRight { float: right; margin: 0 0 10px 10px; }

.tblRegular { border-collapse: collapse; width: 100%; margin: 0 0 1em; }
.tblRegular td, .tblRegular th {
	/* .4em is the old sheet's 6px; .5em loosened the four-line download cells. */
	padding: .4em .6em;
	border: 1px solid #99c;
	border-color: var(--rule);
	vertical-align: top;
	text-align: left;
}
.tblHeaderColor, .tblHeaderColor td, .tblHeaderColor th { background: #99c; background: var(--accent); font-weight: bold; }
.tblNoBorder td { border: 0; }

/* The row matching the visitor's platform, in place of a hard-coded bgcolor. */
.recommended td { background: #cfc; background: var(--ok); }

/* Narrow screens scroll the download tables rather than the page. */
@media (max-width: 46rem) {
	.tblRegular { display: block; overflow-x: auto; }
}

@media print {
	body { background: #fff; }
	.sitenav { display: none; }
	.wrap { border: 0; }
}