/* engine.css - the look of the figures of the guides to the Internet and
 * to computing (engine-core.js): the scenes, the sliders and buttons
 * around them, the panels made of HTML, their tables and fields, and the
 * words in colour that tie the text to what the figures show. In light
 * and in dark, with the colours and fonts of the site. Adapted from the
 * engine of the guides "Por dentro da rede"; each guide adds its own
 * guide.css.
 *
 * A figure and its controls stand in a <div class="figure">, as wide as
 * the widest figure (54rem), or as the text with the class "narrow".
 */

:root {
	--ink: var(--text);
	--head: var(--text);
	--line: #dce2e4;
	--card: #fff;
	--card2: #eef2f3;
	--code: var(--code-bg);
	--link-h: var(--bar);
	--focus: var(--band);
	--knob-ring: var(--bg);
	--c-orange: #c45a14;
	--c-blue: #2c68c9;
	--c-amber: #a5760a;
	--c-green: #2a8a55;
	--c-red: #c73e3b;
	--c-purple: #7a4ec2;
	--c-pink: #bc3f85;
	--c-cyan: #128a9e;
	--c-teal: #0f7f77;
	--c-slate: #53687e;
	--s-orange: #ee8a3c;
	--s-blue: #3e7fdb;
	--s-amber: #e6ae33;
	--s-green: #3fa36d;
	--s-red: #dd5350;
	--s-purple: #8e63d2;
	--s-pink: #d65a9e;
	--s-cyan: #1ca3b8;
	--s-teal: #16968e;
	--s-slate: #5a6e84;
	--term-bg: #13202a;
	--term-ink: #cfe6e6;
	--ok: #2a8a55;
	--bad: #c73e3b;
	--sans: Helvetica, Verdana, Arial, "Liberation Sans", FreeSans, sans-serif;
	--mono: ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
	:root {
		--line: #3a4044;
		--card: #24282b;
		--card2: #2b3033;
		--c-orange: #f29b58;
		--c-blue: #74a4f2;
		--c-amber: #e9bb4e;
		--c-green: #62c48f;
		--c-red: #f07471;
		--c-purple: #ac89ec;
		--c-pink: #e57cb5;
		--c-cyan: #4bc3d6;
		--c-teal: #45c2b8;
		--c-slate: #98aabc;
		--term-bg: #0b1216;
		--ok: #62c48f;
		--bad: #f07471;
	}
}

/* Words in colour, as in the figures. */
.k-orange { color: var(--c-orange); font-weight: bold; }
.k-blue { color: var(--c-blue); font-weight: bold; }
.k-amber { color: var(--c-amber); font-weight: bold; }
.k-green { color: var(--c-green); font-weight: bold; }
.k-red { color: var(--c-red); font-weight: bold; }
.k-purple { color: var(--c-purple); font-weight: bold; }
.k-pink { color: var(--c-pink); font-weight: bold; }
.k-cyan { color: var(--c-cyan); font-weight: bold; }
.k-teal { color: var(--c-teal); font-weight: bold; }
.k-slate { color: var(--c-slate); font-weight: bold; }

.mono, .figure code {
	font-family: var(--mono);
	font-variant-numeric: tabular-nums;
}

/* The contents of a guide, after its opening. */
main > .toc {
	margin: 1.2em 0 .4em;
	padding: .8em 1.1em;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: var(--card);
}

.toc-title { font-weight: bold; margin-bottom: .3em; }
.toc ol { margin: 0; padding-left: 1.5em; columns: 2; column-gap: 2rem; }
.toc li { padding: .1em 0; break-inside: avoid; }
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; }

@media (max-width: 30em) {
	.toc ol { columns: 1; }
}

/* A figure: the scene, or the panel, and its controls; what is narrower
 * than the figure stands in its middle. */
main > .figure {
	max-width: 54rem;
}

main > .figure.narrow {
	max-width: var(--measure);
}

.figure > * {
	margin-left: auto;
	margin-right: auto;
}

/* Controls that a figure hides stay hidden, whatever their display. */
.figure [hidden] {
	display: none !important;
}

.fig {
	position: relative;
	width: 100%;
	max-width: var(--measure);
	aspect-ratio: var(--ar, 1.6);
	margin-top: 1.6em;
	margin-bottom: .4em;
	user-select: none;
	-webkit-user-select: none;
}

.fig.wide { max-width: none; }
.fig.square { aspect-ratio: 1; }

@media (max-width: 40em) {
	.fig { aspect-ratio: var(--arm, var(--ar, 1.6)); }
}

.fig-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	touch-action: pan-y;
}

.fig.grab .fig-canvas { cursor: grab; }
.fig.grab .fig-canvas:active { cursor: grabbing; }
.fig.pointer .fig-canvas, .fig-canvas.pick { cursor: crosshair; }

.nogl {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	padding: 1em;
	text-align: center;
	color: var(--muted);
	font-size: .95em;
	border: 1px dashed var(--line);
	border-radius: 12px;
}

.fig-btn {
	position: absolute;
	bottom: 6px;
	width: 36px;
	height: 36px;
	padding: 0;
	display: grid;
	place-items: center;
	color: var(--ink);
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 9px;
	opacity: .85;
	cursor: pointer;
	transition: opacity .15s;
}

.fig-btn:hover { opacity: 1; }
.fig-btn svg { width: 18px; height: 18px; fill: currentColor; }
.fig-btn.play { left: 6px; }
.fig-btn.play .i-play { display: none; }
.fig-btn.play.paused .i-play { display: block; }
.fig-btn.play.paused .i-pause { display: none; }
.fig-btn.pos-left { left: 48px; }
.fig-btn.pos-right { right: 6px; }
/* the buttons at the top right: play or pause, and beside it start again */
.fig-btn.play.tr { left: auto; right: 6px; top: 6px; bottom: auto; }
.fig-btn.tr2 { left: auto; right: 48px; top: 6px; bottom: auto; }

/* The slider: a track and a knob in the colour of its class. */
.slider {
	max-width: 24rem;
	margin: .3em auto 1.3em;
	padding: 18px 20px;
	--sc: var(--s-slate);
}

.slider.active .sl-knob, .sl-knob:focus-visible {
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--sc) 30%, transparent);
}

.sl-track { position: relative; height: 4px; touch-action: pan-y; cursor: pointer; }
.sl-track::before { content: ""; position: absolute; inset: -18px -20px; }
.sl-fill, .sl-rest { position: absolute; top: 0; height: 4px; border-radius: 2px; background: var(--sc); }
.sl-fill { left: 0; }
.sl-rest { right: 0; opacity: .22; }

.sl-knob {
	position: absolute;
	top: 2px;
	width: 30px;
	height: 30px;
	margin: -15px 0 0 -15px;
	border-radius: 50%;
	background: var(--sc);
	border: 3px solid var(--knob-ring);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
	cursor: grab;
	touch-action: none;
	transition: box-shadow .15s;
}

.sl-knob:active { cursor: grabbing; }
.sl-knob:focus-visible { outline: none; }
.s-orange { --sc: var(--s-orange); }
.s-blue { --sc: var(--s-blue); }
.s-amber { --sc: var(--s-amber); }
.s-green { --sc: var(--s-green); }
.s-red { --sc: var(--s-red); }
.s-purple { --sc: var(--s-purple); }
.s-pink { --sc: var(--s-pink); }
.s-cyan { --sc: var(--s-cyan); }
.s-teal { --sc: var(--s-teal); }
.s-slate { --sc: var(--s-slate); }

/* Several controls in a row. */
.controls {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: .2em 1.4em;
	margin-top: .2em;
	margin-bottom: .6em;
}

.ctl {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 1 1 15rem;
	max-width: 22rem;
}

.ctl .slider { width: 100%; margin: 0; }
.ctl-lbl { margin-bottom: -6px; font-size: .92em; }

/* A switch. */
.toggle {
	display: inline-flex;
	align-items: center;
	gap: .55em;
	padding: .45em .95em;
	font: inherit;
	font-size: .95em;
	color: var(--ink);
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 999px;
	cursor: pointer;
}

.toggle:hover { border-color: var(--muted); }
.toggle .tg-box { position: relative; width: 30px; height: 18px; border-radius: 9px; background: var(--line); transition: background .15s; }

.toggle .tg-box::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--card);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
	transition: transform .15s;
}

.toggle[aria-pressed="true"] .tg-box { background: var(--s-red); }
.toggle[aria-pressed="true"] .tg-box::after { transform: translateX(12px); }

/* Buttons of which one is chosen. */
.seg-wrap { display: flex; justify-content: center; margin-top: 1.4em; }

.seg {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 3px;
	padding: 3px;
	background: var(--card2);
	border: 1px solid var(--line);
	border-radius: 11px;
}

.seg button {
	padding: .42em .95em;
	font: inherit;
	font-size: .95em;
	color: var(--ink);
	background: transparent;
	border: 0;
	border-radius: 8px;
	cursor: pointer;
}

.seg button:hover { background: color-mix(in srgb, var(--card) 60%, transparent); }
.seg button.on { background: var(--card); box-shadow: 0 1px 3px rgba(0, 0, 0, .14); font-weight: bold; }

/* Panels: figures made of HTML. */
.panel {
	max-width: 40rem;
	margin-top: 1.4em;
	margin-bottom: .6em;
	padding: 1.1em 1.2em;
	font-size: 1rem;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 14px;
}

.panel.wide { max-width: 52rem; }
.panel.slim { padding: .9em 1em; margin-top: .4em; }
.figure p { margin: 0; padding: .62em 0; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.row-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: .6em 1em; }

/* A field: a word, and the box where it is typed. */
.field { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .6em; }
.field > span:first-child { font-size: .9em; color: var(--muted); }

.field input {
	width: 13.5rem;
	max-width: 100%;
	padding: .4em .6em;
	font-family: var(--mono);
	font-size: 1.05em;
	color: var(--head);
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: 8px;
}

.field input:focus { outline: none; border-color: var(--s-blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--s-blue) 25%, transparent); }
.field.wide { display: flex; }
.field.wide input { width: 100%; flex: 1 1 18rem; }
.field input.bad { border-color: var(--bad); }
.field-msg { font-size: .88em; color: var(--bad); }

/* Chips: short choices, as in a list of examples. */
.chips { display: flex; flex-wrap: wrap; gap: .4em; }

.chip {
	padding: .28em .7em;
	font-family: var(--mono);
	font-size: .88em;
	color: var(--ink);
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: 999px;
	cursor: pointer;
}

.chip:hover { border-color: var(--muted); }
.chip.on { background: color-mix(in srgb, var(--link) 15%, var(--card)); border-color: var(--link); color: var(--head); }

.btn {
	padding: .45em .85em;
	font: inherit;
	font-size: .95em;
	color: var(--head);
	background: var(--card2);
	border: 1px solid var(--line);
	border-radius: 9px;
	cursor: pointer;
}

.btn:hover { background: color-mix(in srgb, var(--card2) 70%, var(--line)); }
.btn-row { display: flex; flex-wrap: wrap; gap: .45em; margin-bottom: .8em; }
.muted, .dim { color: var(--muted); }
.note { margin: .2em 0; font-size: .97em; line-height: 1.5; color: var(--ink); }
.note.ok { color: var(--ok); }
.note.bad { color: var(--bad); }

/* Tables in the panels, without the borders and colours of the tables of
 * the text. */
.figure table { display: table; margin: 0; }
.figure th, .figure td { border: 0; vertical-align: middle; }
.figure th { color: inherit; background: none; }
.figure tbody tr:nth-child(even) td { background: none; }
.figure code { padding: 0; font-size: inherit; background: none; border-radius: 0; }
.rt { border-collapse: collapse; width: 100%; font-size: .95em; }
.rt th { padding: .35em .6em; text-align: left; font-weight: bold; font-size: .82rem; color: var(--muted); border-bottom: 1px solid var(--line); white-space: nowrap; }
.rt td { padding: .42em .6em; border-bottom: 1px solid var(--line); white-space: nowrap; }
.rt tr:last-child td { border-bottom: 0; }
.rt td.mono, .rt .mono { font-family: var(--mono); font-size: .92em; }
.rt td b { color: var(--head); }
/* a table of comparison, which scrolls sideways on narrow screens */
.cmp { min-width: 36rem; }
.cmp td:first-child { font-weight: bold; color: var(--head); }
.cmp td { white-space: normal; min-width: 7rem; }

.legend { display: flex; flex-wrap: wrap; justify-content: center; gap: .3em 1em; margin-top: .5em; font-size: .9em; color: var(--ink); }
.legend .lg { display: inline-flex; align-items: center; gap: .4em; }
.legend i { display: inline-block; width: .85rem; height: .85rem; border-radius: 3px; }

/* Code, and what a terminal shows. */
main > pre.code {
	max-width: 40rem;
	margin: 1em 0;
	padding: .9em 1em;
	font: .84rem/1.6 var(--mono);
	color: var(--term-ink);
	background: var(--term-bg);
	border: 0;
	border-radius: 12px;
	overflow-x: auto;
	white-space: pre;
	tab-size: 4;
}

pre.code code { font: inherit; background: none; padding: 0; color: inherit; }
pre.code .c { color: #8faab3; font-style: italic; }
pre.code .s { color: #f2c98a; }
pre.code .k { color: #7fd8e4; }
pre.code .n { color: #cdaef7; }

@media (max-width: 40em) {
	.panel { padding: .9em .8em; }
}