/*
 * Chaos Lab — chaoslabgame.ru
 *
 * One stylesheet, no framework, no webfonts, no third-party anything. The palette is the game's
 * own, copied from docs/ART_DIRECTION.md, so the site and the build look like the same object.
 * The register is municipal paperwork: hazard tape, clause numbers, dotted form leaders, stamps.
 */

:root {
	color-scheme: dark;

	--void: #090b0d;
	--charcoal: #17191c;
	--panel: #1b1e23;
	--panel-deep: #15171b;
	--line: #343a42;
	--olive: #4b4a32;
	--concrete: #8b8066;
	--ivory: #e7d7ae;
	--muted: #a99f85;
	--cyan: #46d9d2;
	--amber: #ffb02e;
	--lime: #c9ef55;
	--magenta: #e35fa8;

	--mono: ui-monospace, "Cascadia Mono", "Consolas", "DejaVu Sans Mono", "Liberation Mono", monospace;
	--gap: clamp(1.5rem, 4vw, 3rem);
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background-color: var(--charcoal);
	background-image:
		radial-gradient(120% 60% at 50% 0%, #1f2329 0%, var(--charcoal) 55%, var(--void) 100%);
	background-attachment: fixed;
	color: var(--ivory);
	font-family: var(--mono);
	font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
	line-height: 1.6;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.wrap {
	width: min(68rem, 100% - 2.5rem);
	margin-inline: auto;
}

/* ---------------------------------------------------------------- skip link */

.skip {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--amber);
	color: var(--void);
	font-weight: 700;
	padding: 0.6rem 1rem;
	z-index: 10;
}

.skip:focus {
	left: 0;
}

/* -------------------------------------------------------------- hazard tape */

.tape {
	height: 10px;
	border-block: 1px solid var(--void);
	background: repeating-linear-gradient(
		135deg,
		var(--amber) 0 14px,
		#141619 14px 28px
	);
}

.tape--quiet {
	height: 6px;
	background: repeating-linear-gradient(
		135deg,
		var(--olive) 0 10px,
		#141619 10px 20px
	);
}

/* ------------------------------------------------------------------- header */

.site-header {
	background: var(--panel-deep);
	border-bottom: 1px solid var(--line);
}

.site-header .wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem 1.5rem;
	padding-block: 0.9rem;
}

.brand {
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ivory);
	text-decoration: none;
	border-bottom: 2px solid var(--amber);
	padding-bottom: 2px;
}

.site-nav ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.25rem;
	margin: 0;
	padding: 0;
}

.site-nav a {
	color: var(--muted);
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.82em;
	border-bottom: 2px solid transparent;
	padding-bottom: 2px;
	transition: color 120ms linear, border-color 120ms linear;
}

.site-nav a:hover,
.site-nav a:focus-visible {
	color: var(--ivory);
	border-bottom-color: var(--cyan);
}

.site-nav a[aria-current="page"] {
	color: var(--cyan);
	border-bottom-color: var(--cyan);
}

.build-flag {
	margin-left: auto;
	font-size: 0.78em;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--concrete);
	border: 1px solid var(--line);
	padding: 0.15rem 0.5rem;
}

/* ------------------------------------------------------ language switch */

/*
 * Two links, one per language tree, on every page of both. The current language is the one
 * carrying aria-current, and it is marked by fill as well as colour so the state survives a
 * monochrome screen.
 */

.lang-switch ul {
	list-style: none;
	display: flex;
	margin: 0;
	padding: 0;
	border: 1px solid var(--line);
}

.lang-switch li + li {
	border-left: 1px solid var(--line);
}

.lang-switch a {
	display: block;
	color: var(--muted);
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.78em;
	padding: 0.15rem 0.5rem;
}

.lang-switch a:hover,
.lang-switch a:focus-visible {
	color: var(--ivory);
	background: var(--panel);
}

.lang-switch a[aria-current] {
	color: var(--void);
	background: var(--amber);
	font-weight: 700;
}

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

h1,
h2,
h3 {
	line-height: 1.15;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin: 0 0 0.6rem;
}

h1 {
	font-size: clamp(2rem, 1.2rem + 4vw, 3.6rem);
	letter-spacing: -0.01em;
}

h2 {
	font-size: clamp(1.15rem, 1rem + 0.9vw, 1.6rem);
	color: var(--ivory);
}

h3 {
	font-size: 1rem;
	letter-spacing: 0.1em;
	color: var(--cyan);
}

p {
	margin: 0 0 1rem;
	max-width: 68ch;
}

a {
	color: var(--cyan);
	text-underline-offset: 3px;
}

a:hover {
	color: var(--lime);
}

:focus-visible {
	outline: 3px solid var(--cyan);
	outline-offset: 2px;
}

code,
kbd {
	font-family: var(--mono);
	background: var(--panel-deep);
	border: 1px solid var(--line);
	padding: 0.05em 0.35em;
	color: var(--lime);
	word-break: break-word;
}

kbd {
	color: var(--ivory);
	background: #23262c;
}

pre {
	background: var(--panel-deep);
	border: 1px solid var(--line);
	border-left: 3px solid var(--olive);
	padding: 1rem;
	overflow-x: auto;
	margin: 0 0 1rem;
}

pre code {
	background: none;
	border: 0;
	padding: 0;
	color: var(--ivory);
	white-space: pre;
}

.lede {
	font-size: clamp(1rem, 0.95rem + 0.45vw, 1.25rem);
	color: var(--ivory);
	max-width: 60ch;
}

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

.small {
	font-size: 0.85em;
}

/* --------------------------------------------------------------- structure */

main {
	flex: 1 0 auto;
	padding-block: var(--gap) calc(var(--gap) * 1.4);
	counter-reset: clause;
}

.clause {
	margin-top: var(--gap);
	padding-top: 1.4rem;
	border-top: 1px solid var(--line);
}

.clause > h2::before {
	counter-increment: clause;
	content: "§ " counter(clause) " ";
	color: var(--amber);
	font-weight: 400;
}

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

.hero {
	display: grid;
	gap: var(--gap);
	grid-template-columns: 1fr;
	align-items: start;
}

@media (min-width: 56rem) {
	.hero {
		grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
	}
}

.hero h1 span {
	display: block;
	color: var(--cyan);
}

.eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.28em;
	font-size: 0.78em;
	color: var(--concrete);
	margin-bottom: 0.8rem;
}

/* ------------------------------------------------------------------ panels */

.panel {
	background: linear-gradient(180deg, var(--panel), var(--panel-deep));
	border: 1px solid var(--line);
	padding: 1.1rem 1.2rem;
}

.panel--hazard {
	border-left: 4px solid var(--amber);
}

.panel--danger {
	border-left: 4px solid var(--magenta);
}

.panel--calm {
	border-left: 4px solid var(--cyan);
}

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

.panel h2,
.panel h3 {
	margin-top: 0;
}

.cards {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
	padding: 0;
	margin: 0;
	list-style: none;
}

.card {
	background: var(--panel-deep);
	border: 1px solid var(--line);
	border-top: 3px solid var(--olive);
	padding: 1rem;
}

.card h3 {
	margin-top: 0;
}

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

.card p {
	max-width: none;
}

/* ------------------------------------------------------- form-style specs */

.spec {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	margin: 0 0 1rem;
}

@media (min-width: 30rem) {
	.spec {
		grid-template-columns: minmax(9rem, max-content) 1fr;
	}
}

.spec dt {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.75em;
	color: var(--concrete);
	padding: 0.45rem 0.8rem 0.45rem 0;
	border-bottom: 1px dotted var(--line);
	align-self: center;
}

.spec dd {
	margin: 0;
	padding: 0.45rem 0;
	border-bottom: 1px dotted var(--line);
	color: var(--ivory);
}

/* ------------------------------------------------------------------ button */

.actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
	margin: 1.4rem 0 0.8rem;
}

.btn {
	display: inline-block;
	background: var(--amber);
	color: var(--void);
	border: 2px solid var(--void);
	box-shadow: 5px 5px 0 var(--void);
	padding: 0.75rem 1.3rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	text-decoration: none;
	transition: transform 120ms ease-out, box-shadow 120ms ease-out;
}

.btn:hover,
.btn:focus-visible {
	color: var(--void);
	transform: translate(3px, 3px);
	box-shadow: 2px 2px 0 var(--void);
}

.btn--ghost {
	background: transparent;
	color: var(--cyan);
	border-color: var(--cyan);
	box-shadow: 5px 5px 0 #0d1013;
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
	color: var(--lime);
	border-color: var(--lime);
}

.btn-note {
	color: var(--muted);
	font-size: 0.85em;
	max-width: 52ch;
}

/* ------------------------------------------------------------------- stamp */

.stamp {
	display: inline-block;
	border: 3px solid var(--magenta);
	color: var(--magenta);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	padding: 0.45rem 1rem;
	transform: rotate(-2.5deg);
	margin-bottom: 1rem;
}

.stamp--settled {
	border-color: var(--concrete);
	color: var(--concrete);
}

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

table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 1rem;
	font-size: 0.92em;
}

caption {
	text-align: left;
	color: var(--muted);
	font-size: 0.85em;
	padding-bottom: 0.5rem;
}

th,
td {
	border: 1px solid var(--line);
	padding: 0.5rem 0.65rem;
	text-align: left;
	vertical-align: top;
}

thead th {
	background: var(--panel-deep);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.8em;
	color: var(--concrete);
}

tbody th {
	color: var(--ivory);
	font-weight: 700;
}

.table-scroll {
	overflow-x: auto;
}

/* ------------------------------------------------------------------ legend */

.legend {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
	display: grid;
	gap: 0.5rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.legend li {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	border-bottom: 1px dotted var(--line);
	padding-bottom: 0.4rem;
}

.swatch {
	flex: 0 0 auto;
	width: 0.9rem;
	height: 0.9rem;
	border: 1px solid var(--void);
	transform: translateY(1px);
}

.swatch--ivory { background: var(--ivory); }
.swatch--cyan { background: var(--cyan); }
.swatch--amber { background: var(--amber); }
.swatch--lime { background: var(--lime); }
.swatch--magenta { background: var(--magenta); }
.swatch--brick { background: #9e3f32; }
.swatch--concrete { background: var(--concrete); }
.swatch--olive { background: var(--olive); }

/* -------------------------------------------------------------- step lists */

.steps {
	list-style: none;
	counter-reset: step;
	margin: 0 0 1rem;
	padding: 0;
	display: grid;
	gap: 0.75rem;
}

.steps li {
	counter-increment: step;
	border-left: 3px solid var(--cyan);
	background: var(--panel-deep);
	padding: 0.7rem 0.9rem;
}

.steps li::before {
	content: "0" counter(step);
	display: block;
	color: var(--amber);
	letter-spacing: 0.2em;
	font-size: 0.75em;
}

.steps li b {
	color: var(--ivory);
}

.plain {
	padding-left: 1.2rem;
}

.plain li {
	margin-bottom: 0.4rem;
	max-width: 68ch;
}

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

.site-footer {
	background: var(--panel-deep);
	border-top: 1px solid var(--line);
	padding-block: 1.6rem;
	color: var(--muted);
	font-size: 0.85em;
}

.site-footer ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.25rem;
	margin: 0 0 0.9rem;
	padding: 0;
}

.site-footer p {
	max-width: 74ch;
}

.footer-grid {
	display: grid;
	gap: 1rem var(--gap);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

/* --------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	.btn:hover,
	.btn:focus-visible {
		transform: none;
		box-shadow: 5px 5px 0 var(--void);
	}
}

@media (prefers-contrast: more) {
	:root {
		--muted: #d6c9a6;
		--concrete: #c2b593;
		--line: #6b7280;
	}
}