/* ascii.css — REV 1.8
   Per project set three values only:
     --bg  background
     --fg  foreground (dark on light, light on dark)
     --accent  state, focus, text — must clear 4.5:1 on --bg
   Mute and rule colors derive from currentColor, so they follow any theme.
   ASCII first: rules and dividers are literal characters. CSS lines are rare. */

@font-face {
	font-family: "Departure Mono";
	src: url("fonts/DepartureMono-Regular.woff2") format("woff2"),
		url("fonts/DepartureMono-Regular.woff") format("woff");
	font-display: swap;
}

:root {
	--bg: #FDFDFC;
	--fg: #1A1917;
	--accent: #A33F08;
	--font: "Departure Mono", ui-monospace, monospace;
	--space: 8px;
	color-scheme: light;
}

* { box-sizing: border-box; }

html { background: var(--bg); color: var(--fg); }

body {
	margin: 0 auto;
	padding: calc(var(--space) * 6) calc(var(--space) * 2);
	max-width: 74ch;
	font: 15px/1.5 var(--font);
	-webkit-font-smoothing: antialiased;
}

::selection { background: var(--fg); color: var(--bg); }

:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }

h1, h2, h3 {
	font-size: 15px;
	font-weight: 400;
	letter-spacing: .12em;
	text-transform: uppercase;
	margin: 0 0 var(--space);
}

h1 { font-size: 18px; letter-spacing: .18em; }

h2 { display: flex; align-items: baseline; gap: .6em; }
h2 b { font-weight: 400; color: color-mix(in srgb, currentColor 58%, transparent); }

/* Fill with real characters, never a border, so the rule is selectable. */
.rule {
	display: block;
	overflow: hidden;
	white-space: nowrap;
	color: color-mix(in srgb, currentColor 22%, transparent);
}
h2 .rule { flex: 1; }

p { margin: 0 0 var(--space); }

a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, currentColor 22%, transparent);
	text-underline-offset: 3px;
}
a:hover { background: var(--fg); color: var(--bg); text-decoration-color: transparent; }

.label {
	color: color-mix(in srgb, currentColor 58%, transparent);
	font-size: 13px;
	letter-spacing: .08em;
	text-transform: uppercase;
}

pre {
	margin: 0 0 var(--space);
	font: inherit;
	font-size: 13px;
	line-height: 1.35;
	overflow-x: auto;
}

table { border-collapse: collapse; width: 100%; font-size: 13px; text-align: left; }
th, td { padding: 2px 0; }
th {
	font-weight: 400;
	letter-spacing: .08em;
	text-transform: uppercase;
	border-bottom: 1px solid currentColor;
}
th:not(:last-child), td:not(:last-child) { padding-right: calc(var(--space) * 2); }

.notice {
	background: var(--fg);
	color: var(--bg);
	padding: var(--space) calc(var(--space) * 2);
	letter-spacing: .08em;
	text-transform: uppercase;
}

hr {
	border: 0;
	border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent);
	margin: calc(var(--space) * 4) 0;
}

.foot {
	margin: calc(var(--space) * 6) 0 0;
	padding-top: var(--space);
	border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent);
	color: color-mix(in srgb, currentColor 58%, transparent);
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
}

/* buttons — bracketed text, not boxes */
.btn {
	appearance: none;
	background: none;
	border: 0;
	padding: 2px 0;
	font: inherit;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: inherit;
	cursor: pointer;
}
.btn::before { content: "["; margin-right: .5em; }
.btn::after { content: "]"; margin-left: .5em; }
.btn::before, .btn::after { opacity: .55; }

.btn[aria-pressed]::before { content: "[ ]"; }
.btn[aria-pressed="true"]::before { content: "[x]"; }
.btn[aria-pressed]::after { content: ""; }

.btn:hover, .btn:focus-visible,
.btn[aria-current="page"],
.btn[aria-selected="true"],
.btn[aria-pressed="true"] {
	background: var(--fg);
	color: var(--bg);
}

.btn[aria-current="page"]:hover,
.btn[aria-selected="true"]:hover,
.btn[aria-pressed="true"]:hover {
	background: var(--bg);
	color: var(--fg);
	outline: 1px solid var(--fg);
	outline-offset: 1px;
}

/* inputs — underlined, never boxed */
.field { display: block; margin-bottom: calc(var(--space) * 1.5); }
.field > .label { display: block; margin-bottom: 4px; }

.input {
	display: block;
	width: 100%;
	padding: 6px 8px;
	background: color-mix(in srgb, var(--fg) 6%, var(--bg));
	border: 0;
	border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent);
	font: inherit;
	color: inherit;
	letter-spacing: .04em;
}
.input::placeholder { color: color-mix(in srgb, currentColor 45%, transparent); }
.input:focus-visible { outline: none; border-bottom-color: var(--accent); }
textarea.input { resize: vertical; min-height: 4em; }

.check { display: inline-flex; align-items: baseline; gap: .6em; cursor: pointer; }
.check input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.check::before { content: "[ ]"; opacity: .55; }
.check:has(input:checked)::before { content: "[x]"; opacity: 1; }
.check:focus-within { outline: 1px solid var(--accent); outline-offset: 2px; }

.select { position: relative; display: inline-block; }
.select select {
	appearance: none;
	padding: 6px 1.6em 6px 8px;
	background: color-mix(in srgb, var(--fg) 6%, var(--bg));
	border: 0;
	border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent);
	font: inherit;
	color: inherit;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.select::after {
	content: "▾";
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
}
.select select:focus-visible { outline: none; border-bottom-color: var(--accent); }
.select option { background: var(--bg); color: var(--fg); }

.cursor {
	color: var(--accent);
	animation: blink 2.4s steps(1) infinite;
}

@keyframes blink { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
	.cursor { animation: none; }
}

@media (max-width: 600px) {
	body { padding: calc(var(--space) * 3) calc(var(--space) * 2); font-size: 13px; }
}