/* ChronoDNS — zone browser.
 *
 * Direction: a strip-chart recorder. The archive's subject is time, so
 * the page is built around a horizontal axis and reads like plotter
 * paper: cool grey ground, ink-navy marks, amber for now, teal for
 * still-answering. Records are set in zone-file master format because
 * that is the notation this audience already reads fluently.
 *
 * No webfonts and no script. A public page should not make a request to
 * anyone else to render, and every position on the time axis is computed
 * server-side. */

:root {
	--paper:    #e6ebee;
	--paper-2:  #dde4e8;
	--paper-3:  #d2dbe0;
	--ink:      #16242e;
	--ink-soft: #556b77;
	--rule:     #afbdc5;
	--live:     #2c6e6a;
	--mark:     #b07708;
	--gone:     #8c8379;

	--mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
	--sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--gutter: 1.5rem;
	--rail-label: 15rem;
}

@media (prefers-color-scheme: dark) {
	:root {
		--paper:    #0e171d;
		--paper-2:  #142029;
		--paper-3:  #1b2a34;
		--ink:      #d7e3e9;
		--ink-soft: #8ca3af;
		--rule:     #2e4350;
		--live:     #5bb3a8;
		--mark:     #d9a238;
		--gone:     #7d7568;
	}
}

* { box-sizing: border-box; }

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

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font: 400 15px/1.55 var(--sans);
	/* Faint horizontal banding, like continuous-feed paper. Sits behind
	 * everything and is the only ornament on the page. */
	background-image: repeating-linear-gradient(
		to bottom,
		transparent 0 27px,
		color-mix(in srgb, var(--rule) 14%, transparent) 27px 28px
	);
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

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

.wrap {
	max-width: 76rem;
	margin: 0 auto;
	padding: 0 var(--gutter) 5rem;
}

/* ---- masthead ---------------------------------------------------- */

.top {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem var(--gutter);
	align-items: baseline;
	padding: 1.1rem 0 .9rem;
	border-bottom: 2px solid var(--ink);
	margin-bottom: 1.75rem;
}

.mark {
	font: 600 13px/1 var(--mono);
	letter-spacing: .22em;
	text-transform: uppercase;
	white-space: nowrap;
}
.mark .chrono { color: var(--mark); }

.tagline {
	font: 400 12px/1 var(--mono);
	color: var(--ink-soft);
	letter-spacing: .04em;
}

/* ---- search ------------------------------------------------------ */

/* Visually hidden, still announced. The search field's purpose is obvious
 * by sight from its placeholder; it is not obvious to a screen reader. */
.vh {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	clip-path: inset(50%);
	overflow: hidden;
	white-space: nowrap;
}

.find { display: flex; flex: 0 1 34rem; gap: .5rem; min-width: 0; margin-left: auto; }

.find input {
	flex: 1 1 auto;
	min-width: 0;
	padding: .5rem .65rem;
	font: 400 14px/1.2 var(--mono);
	color: var(--ink);
	background: var(--paper-2);
	border: 1px solid var(--rule);
	border-radius: 0;
}
.find input::placeholder { color: var(--ink-soft); }
.find input:focus { border-color: var(--ink); outline: none; background: var(--paper-3); }

.find button {
	padding: .5rem .9rem;
	font: 600 12px/1.2 var(--mono);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--paper);
	background: var(--ink);
	border: 1px solid var(--ink);
	border-radius: 0;
	cursor: pointer;
}
.find button:hover { background: var(--mark); border-color: var(--mark); color: #15202a; }

/* ---- headings and notes ------------------------------------------ */

.eyebrow {
	font: 600 11px/1 var(--mono);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--ink-soft);
	margin: 0 0 .6rem;
}

h1.subject {
	font: 400 clamp(1.5rem, 4.5vw, 2.3rem)/1.1 var(--mono);
	letter-spacing: -.02em;
	margin: 0 0 .45rem;
	overflow-wrap: anywhere;
}

.note {
	font-size: 13.5px;
	color: var(--ink-soft);
	margin: 0 0 1.5rem;
	max-width: 54ch;
}

.crumb {
	font: 400 12px/1 var(--mono);
	color: var(--ink-soft);
	margin: 0 0 1.4rem;
}
.crumb a { border-bottom: 1px solid var(--rule); }

/* ---- the rail: this page's one memorable element ----------------- */

.axis {
	position: relative;
	height: 1.35rem;
	margin-left: var(--rail-label);
	border-bottom: 1px solid var(--rule);
}
.axis span {
	position: absolute;
	bottom: .15rem;
	font: 400 10.5px/1 var(--mono);
	color: var(--ink-soft);
	letter-spacing: .06em;
	transform: translateX(-50%);
}
.axis span::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -.35rem;
	width: 1px;
	height: .3rem;
	background: var(--rule);
}

.rail { list-style: none; margin: 0; padding: 0; }

.rail li {
	display: grid;
	grid-template-columns: var(--rail-label) 1fr;
	align-items: center;
	gap: 0 .75rem;
	min-height: 1.75rem;
}
.rail li:hover { background: var(--paper-2); }

.rail .name {
	font: 400 12.5px/1.3 var(--mono);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	direction: rtl;      /* keep the distinctive tail of long names visible */
	text-align: left;
}
.rail .name a { direction: ltr; unicode-bidi: embed; }

.span {
	position: relative;
	height: .95rem;
	/* The gridline the bar sits on, so an empty row still reads as a row. */
	background: linear-gradient(to bottom, transparent 46%, var(--paper-3) 46% 54%, transparent 54%);
}

.span b {
	position: absolute;
	top: .18rem;
	height: .6rem;
	min-width: 2px;
	background: var(--gone);
	border-radius: 0;
}
.span b.live { background: var(--live); }
/* The leading edge of a live span is the only thing on the page allowed
 * to be amber: it marks "still true as of now". */
.span b.live::after {
	content: "";
	position: absolute;
	right: -1px;
	top: -.18rem;
	width: 2px;
	height: .96rem;
	background: var(--mark);
}

.meta {
	font: 400 11px/1 var(--mono);
	color: var(--ink-soft);
	white-space: nowrap;
}

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

.legend {
	display: flex;
	flex-wrap: wrap;
	gap: .3rem 1.25rem;
	margin: 1.1rem 0 0;
	padding-top: .8rem;
	border-top: 1px solid var(--rule);
	font: 400 11.5px/1.4 var(--mono);
	color: var(--ink-soft);
}
.legend i {
	display: inline-block;
	width: 1.6rem;
	height: .45rem;
	margin-right: .4rem;
	vertical-align: .05rem;
}
.legend .sw-live { background: var(--live); }
.legend .sw-gone { background: var(--gone); }
.legend .sw-now  { background: var(--mark); width: 2px; height: .8rem; }

/* ---- record listing (zone-file master format) -------------------- */

.records {
	margin: 0;
	overflow-x: auto;
	border-top: 1px solid var(--rule);
}

.records table {
	width: 100%;
	border-collapse: collapse;
	font: 400 12.5px/1.5 var(--mono);
	white-space: pre;
}
.records th {
	font-weight: 600;
	font-size: 10.5px;
	letter-spacing: .16em;
	text-transform: uppercase;
	text-align: left;
	color: var(--ink-soft);
	padding: .55rem .9rem .5rem 0;
	border-bottom: 1px solid var(--rule);
	white-space: nowrap;
}
.records td {
	padding: .22rem .9rem .22rem 0;
	vertical-align: top;
}
.records tbody tr:nth-child(even) { background: var(--paper-2); }
.records .t { color: var(--mark); font-weight: 600; }
.records .ttl { color: var(--ink-soft); }
.records .rd { white-space: pre-wrap; overflow-wrap: anywhere; }
.records .when { color: var(--ink-soft); white-space: nowrap; }
.records .src { color: var(--ink-soft); }

/* ---- search results --------------------------------------------- */

.hits { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.hits li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .25rem .9rem;
	padding: .55rem 0;
	border-bottom: 1px solid var(--paper-3);
}
.hits li:hover { background: var(--paper-2); }
.hits .apex { font: 400 14px/1.3 var(--mono); overflow-wrap: anywhere; }
.hits .count { font: 600 12px/1 var(--mono); color: var(--mark); }

/* ---- empty / truncated ------------------------------------------ */

.empty {
	padding: 2.5rem 0;
	border-top: 1px solid var(--rule);
	color: var(--ink-soft);
	max-width: 56ch;
}

.cut {
	margin: 1.1rem 0 0;
	font: 400 11.5px/1.5 var(--mono);
	color: var(--ink-soft);
}

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

.lede {
	max-width: 58ch;
	font-size: 16px;
	margin: 0 0 1.6rem;
}
.lede strong { font-weight: 600; }

.examples { font: 400 12.5px/2 var(--mono); margin: 0 0 1rem; }
.examples a { border-bottom: 1px solid var(--rule); }
.examples span { color: var(--ink-soft); }

.foot {
	margin-top: 3rem;
	padding-top: .9rem;
	border-top: 1px solid var(--rule);
	font: 400 11.5px/1.6 var(--mono);
	color: var(--ink-soft);
}

@media (max-width: 46rem) {
	:root { --rail-label: 7.5rem; --gutter: 1rem; }
	.rail .name { font-size: 11.5px; }
	.meta { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	* { animation: none !important; transition: none !important; }
}