/* Future Timeline Survival Guide
   A field manual for endings. Lichen-grey paper, slate ink; amber marks a
   threat, teal an opening. One memorable device: the fuse, showing how far
   an ending has burned from proposed to occurred. */

@font-face { font-family: 'Plex Cond'; src: url('/fonts/ibm-plex-sans-condensed-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Plex Cond'; src: url('/fonts/ibm-plex-sans-condensed-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Plex Cond'; src: url('/fonts/ibm-plex-sans-condensed-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Plex Cond'; src: url('/fonts/ibm-plex-sans-condensed-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Source Serif'; src: url('/fonts/source-serif-4-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Source Serif'; src: url('/fonts/source-serif-4-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Source Serif'; src: url('/fonts/source-serif-4-latin-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }

:root {
	--paper: #e7ebe4;
	--sheet: #f3f5f1;
	--ink: #1e292c;
	--ink-2: #4f5c58;
	--ink-3: #7b8781;
	--rule: #c6cdc4;
	--rule-2: #d8ddd5;
	--amber: #b97806;
	--amber-wash: #f2e3c2;
	--teal: #1d6f63;
	--teal-wash: #d3e6e0;
	--ember: #a3322a;
	--ember-wash: #f0d9d4;
	--focus: #2b5fd9;
	--violet: #6a5a9c;
	--violet-wash: #e3def0;
	--cond: 'Plex Cond', 'Arial Narrow', 'Roboto Condensed', system-ui, sans-serif;
	--serif: 'Source Serif', 'Iowan Old Style', Georgia, serif;
	--rail: 13.5rem;
	color-scheme: light;
}

@media (prefers-color-scheme: dark) {
	:root {
		--paper: #182023;
		--sheet: #1f292c;
		--ink: #e3e8e3;
		--ink-2: #a9b4ae;
		--ink-3: #7c8883;
		--rule: #34413f;
		--rule-2: #2a3537;
		--amber: #e0a63a;
		--amber-wash: #3b3220;
		--teal: #5bbfae;
		--teal-wash: #1c3633;
		--ember: #e07a6c;
		--ember-wash: #3c2522;
		--focus: #8fb0ff;
		--violet: #a89be0;
		--violet-wash: #2c2a3d;
		color-scheme: dark;
	}
}

* { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1rem/1.55 var(--serif); }
a { color: inherit; text-decoration-color: var(--ink-3); text-underline-offset: 0.18em; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
button, input, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }

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

.frame { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); min-height: 100vh; }
.rail { position: sticky; top: 0; height: 100vh; padding: 1.5rem 1rem 1.25rem 1.25rem; border-right: 1px solid var(--rule); display: flex; flex-direction: column; gap: 1.75rem; font-family: var(--cond); }
.mark { font: 700 1.3rem/1.05 var(--cond); letter-spacing: -0.01em; text-decoration: none; }
.mark small { display: block; font-weight: 500; font-size: 0.8rem; color: var(--ink-2); letter-spacing: 0; margin-top: 0.35rem; }
.nav { display: flex; flex-direction: column; gap: 0.15rem; }
.nav a { padding: 0.35rem 0.5rem; margin-left: -0.5rem; border-radius: 3px; text-decoration: none; font-size: 1.02rem; font-weight: 500; color: var(--ink-2); }
.nav a[aria-current='page'] { color: var(--ink); background: var(--sheet); box-shadow: inset 3px 0 0 var(--ink); }
.nav a:hover { color: var(--ink); }
.who { margin-top: auto; font-size: 0.88rem; color: var(--ink-2); line-height: 1.35; }
.who strong { display: block; color: var(--ink); font-weight: 600; }
.who button { margin-top: 0.5rem; }
.link-button { background: none; border: 0; padding: 0; text-decoration: underline; text-decoration-color: var(--ink-3); text-underline-offset: 0.18em; cursor: pointer; color: var(--ink-2); font-family: var(--cond); }

main { padding: 2rem clamp(1rem, 4vw, 3.25rem) 4rem; max-width: 74rem; width: 100%; }
.page-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
h1 { font: 600 clamp(1.9rem, 3.2vw, 2.6rem)/1.08 var(--cond); letter-spacing: -0.015em; margin: 0; max-width: 34ch; }
h2 { font: 600 1.25rem/1.2 var(--cond); margin: 2.25rem 0 0.75rem; }
h3 { font: 600 1.02rem/1.25 var(--cond); margin: 1.25rem 0 0.4rem; }
p { margin: 0 0 0.8rem; max-width: 68ch; }
.lede { font-size: 1.12rem; color: var(--ink-2); max-width: 62ch; }
.quiet { color: var(--ink-2); }
.small { font-size: 0.88rem; }
.cond { font-family: var(--cond); }
.num { font-family: var(--cond); font-variant-numeric: tabular-nums; }

/* ---------- controls ---------- */

.btn { font: 500 0.98rem/1 var(--cond); padding: 0.62rem 1rem; border-radius: 4px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); cursor: pointer; }
.btn:hover { filter: brightness(1.15); }
.btn.secondary { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn.secondary:hover { border-color: var(--ink-2); filter: none; }
.btn:disabled { opacity: 0.55; cursor: progress; }
.field { display: flex; flex-direction: column; gap: 0.3rem; font-family: var(--cond); font-size: 0.92rem; color: var(--ink-2); }
.field input, .field select, .filters input, .filters select { font: 400 1rem/1.3 var(--cond); padding: 0.5rem 0.6rem; border: 1px solid var(--rule); border-radius: 4px; background: var(--sheet); color: var(--ink); min-width: 0; }
.notice { font-family: var(--cond); padding: 0.65rem 0.85rem; border-left: 3px solid var(--ink-2); background: var(--sheet); margin: 0 0 1rem; max-width: 68ch; }
.notice.error { border-color: var(--ember); background: var(--ember-wash); }
.notice.good { border-color: var(--teal); background: var(--teal-wash); }

/* ---------- the fuse: an ending's place in its lifecycle ---------- */

.fuse { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; width: 7.5rem; height: 0.5rem; }
.fuse i { background: var(--rule); border-radius: 1px; }
.fuse i.lit { background: var(--ink-2); }
.fuse[data-kind='apocalypse'] i.lit { background: var(--ember); }
.fuse[data-kind='emergence'] i.lit { background: var(--teal); }
.fuse[data-off] i { background: transparent; border: 1px dashed var(--rule); }
.fuse.large { width: 100%; height: 0.8rem; gap: 3px; }
.fuse-labels { display: grid; grid-template-columns: repeat(5, 1fr); font: 500 0.78rem/1.2 var(--cond); color: var(--ink-3); margin-top: 0.35rem; }
.fuse-labels span.here { color: var(--ink); font-weight: 600; }

.status { font: 500 0.88rem/1 var(--cond); color: var(--ink-2); }
.kind { font: 500 0.82rem/1 var(--cond); padding: 0.2rem 0.4rem; border-radius: 3px; }
.kind.apocalypse { color: var(--ember); background: var(--ember-wash); }
.kind.emergence { color: var(--teal); background: var(--teal-wash); }
.conf { font: 500 0.82rem/1 var(--cond); color: var(--ink-2); white-space: nowrap; }
.conf b { display: inline-block; width: 0.42rem; height: 0.42rem; margin-right: 1px; border-radius: 50%; background: var(--rule); vertical-align: 0.06rem; }
.conf b.on { background: var(--ink); }

/* ---------- overview ---------- */

.ledger { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); margin: 0.5rem 0 1rem; }
.ledger div { padding: 0.9rem 1rem 0.9rem 0; }
.ledger dt { font: 500 0.88rem/1.2 var(--cond); color: var(--ink-2); }
.ledger dd { margin: 0.15rem 0 0; font: 600 2rem/1 var(--cond); font-variant-numeric: tabular-nums; }
.board { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 0 2.5rem; }
.stages { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; margin: 0.75rem 0 0.4rem; align-items: end; height: 6rem; }
.stages div { background: var(--ink-2); min-height: 2px; border-radius: 2px 2px 0 0; }
.stages-labels { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; font: 500 0.8rem/1.2 var(--cond); color: var(--ink-2); }
.stages-labels b { display: block; color: var(--ink); font-size: 1rem; font-variant-numeric: tabular-nums; }
.feed { list-style: none; padding: 0; margin: 0; }
.feed li { padding: 0.6rem 0; border-bottom: 1px solid var(--rule-2); font-size: 0.97rem; }
.feed .when { font: 400 0.82rem/1 var(--cond); color: var(--ink-3); display: block; margin-bottom: 0.2rem; }
.empty { color: var(--ink-2); font-style: italic; }

/* ---------- endings table ---------- */

.filters { display: flex; gap: 0.6rem; flex-wrap: wrap; margin: 0 0 1rem; align-items: center; }
.filters input[type='search'] { flex: 1 1 16rem; }
.count { font: 500 0.92rem/1 var(--cond); color: var(--ink-2); margin-left: auto; }
table { border-collapse: collapse; width: 100%; }
.endings th { font: 500 0.85rem/1.2 var(--cond); color: var(--ink-2); text-align: left; padding: 0 0.75rem 0.5rem 0; border-bottom: 1px solid var(--ink); }
.endings td { padding: 0.75rem 0.75rem 0.75rem 0; border-bottom: 1px solid var(--rule-2); vertical-align: top; }
.endings tr:hover td { background: color-mix(in srgb, var(--sheet) 70%, transparent); }
.endings .title a { font: 600 1.04rem/1.25 var(--cond); text-decoration: none; }
.endings .title a:hover { text-decoration: underline; }
.endings .code { font: 400 0.8rem/1 var(--cond); color: var(--ink-3); display: block; margin-top: 0.25rem; }
.endings .tags { font: 400 0.84rem/1.3 var(--cond); color: var(--ink-2); }
.people, .runs { display: block; overflow-x: auto; }
.endings .figs { font: 400 0.86rem/1.4 var(--cond); color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.endings .gaps { color: var(--amber); }

/* ---------- an ending ---------- */

.crumbs { font: 500 0.9rem/1 var(--cond); color: var(--ink-2); margin-bottom: 1rem; }
.event-grid { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: 2.75rem; align-items: start; }
.facts { position: sticky; top: 1.5rem; font-family: var(--cond); }
.facts dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.45rem 1rem; font-size: 0.95rem; }
.facts dt { color: var(--ink-2); }
.facts dd { margin: 0; font-variant-numeric: tabular-nums; }
.facts .unknown { color: var(--ink-3); font-style: italic; font-family: var(--serif); }
.horizon { display: grid; grid-template-columns: 3rem 1fr 3rem; gap: 0.35rem 0.6rem; align-items: center; font-size: 0.9rem; }
.horizon .bar { height: 0.55rem; background: var(--rule-2); border-radius: 2px; position: relative; overflow: hidden; }
.horizon .bar span { position: absolute; inset: 0 auto 0 0; background: var(--ink-2); }
.section-rule { border: 0; border-top: 1px solid var(--rule); margin: 1.75rem 0 0; }
.summary { font-size: 1.1rem; max-width: 62ch; }

.claims { list-style: none; margin: 0; padding: 0; }
.claim { padding: 0.85rem 0 0.9rem; border-bottom: 1px solid var(--rule-2); }
.claim-head { display: flex; gap: 0.75rem; align-items: baseline; flex-wrap: wrap; font-family: var(--cond); font-size: 0.85rem; color: var(--ink-2); margin-bottom: 0.25rem; }
.claim-text { margin: 0; }
.claim.superseded { opacity: 0.55; }
blockquote.quote { margin: 0.55rem 0 0; padding: 0.15rem 0 0.15rem 0.85rem; border-left: 2px solid var(--rule); font-size: 0.93rem; color: var(--ink-2); }
blockquote.quote a { text-decoration: none; }
blockquote.quote a:hover mark { text-decoration: underline; }
blockquote.quote cite { display: block; font: 400 0.8rem/1.3 var(--cond); font-style: normal; color: var(--ink-3); margin-top: 0.25rem; }
mark { background: var(--amber-wash); color: inherit; padding: 0 0.1em; border-radius: 2px; }

.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.signal { padding: 0.75rem 0.9rem; border-left: 3px solid var(--ink-2); background: var(--sheet); margin: 0 0 0.6rem; }
.signal.threat { border-color: var(--amber); }
.signal.opportunity { border-color: var(--teal); }
.signal .side { font: 600 0.85rem/1 var(--cond); }
.signal.threat .side { color: var(--amber); }
.signal.opportunity .side { color: var(--teal); }
.gap-list, .ind-list { margin: 0; padding-left: 1.1rem; }
.gap-list li, .ind-list li { margin: 0 0 0.45rem; }
.gap-list .plan { font: 500 0.8rem/1 var(--cond); color: var(--amber); margin-left: 0.35rem; }
.prediction { padding: 0.7rem 0; border-bottom: 1px solid var(--rule-2); }
.prediction .work { font: 600 1rem/1.25 var(--cond); }
.prediction .work em { font-family: var(--serif); font-weight: 600; }
.history { list-style: none; padding: 0; margin: 0; font-family: var(--cond); font-size: 0.9rem; }
.history li { padding: 0.3rem 0; color: var(--ink-2); }
.history b { color: var(--ink); font-weight: 600; }

/* ---------- source view ---------- */

.source-text { white-space: pre-wrap; font: 400 0.95rem/1.6 var(--serif); background: var(--sheet); padding: 1.25rem 1.4rem; border: 1px solid var(--rule); border-radius: 4px; max-height: 70vh; overflow: auto; max-width: 78ch; }
.source-text mark { background: var(--amber-wash); outline: 1px solid var(--amber); }

/* ---------- admin ---------- */

.people th, .runs th { font: 500 0.85rem/1.2 var(--cond); color: var(--ink-2); text-align: left; padding: 0 1rem 0.45rem 0; border-bottom: 1px solid var(--ink); white-space: nowrap; }
.people td, .runs td { font: 400 0.95rem/1.35 var(--cond); padding: 0.6rem 1rem 0.6rem 0; border-bottom: 1px solid var(--rule-2); vertical-align: top; font-variant-numeric: tabular-nums; }
.online { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--teal); margin-right: 0.35rem; }
.invite-form { display: grid; grid-template-columns: 1.2fr 1fr 8rem auto; gap: 0.6rem; align-items: end; max-width: 52rem; }
.invite-link { font: 400 0.9rem/1.4 var(--cond); word-break: break-all; background: var(--sheet); border: 1px solid var(--rule); padding: 0.6rem 0.75rem; border-radius: 4px; margin: 0.6rem 0 0; max-width: 52rem; }
.spark { display: flex; align-items: end; gap: 2px; height: 3.5rem; margin: 0.5rem 0 0.25rem; max-width: 40rem; }
.spark span { flex: 1; background: var(--ink-2); min-height: 1px; border-radius: 1px 1px 0 0; }
.spark-axis { display: flex; justify-content: space-between; font: 400 0.78rem/1 var(--cond); color: var(--ink-3); max-width: 40rem; }
.findings { font: 400 0.9rem/1.4 var(--cond); }
.findings li { margin-bottom: 0.3rem; }

/* ---------- sign-in ---------- */

.gate { min-height: 100vh; display: grid; place-items: center; padding: 2rem 1rem; }
.gate-card { width: min(31rem, 100%); }
.gate h1 { font-size: clamp(2.4rem, 7vw, 3.4rem); line-height: 0.98; max-width: none; margin-bottom: 1rem; }
.gate .fuse { width: 100%; height: 0.6rem; margin: 0 0 1.5rem; }
.gate .actions { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1.25rem; }
.gate .remember { display: flex; gap: 0.45rem; align-items: center; font: 400 0.92rem/1.2 var(--cond); color: var(--ink-2); margin-top: 1rem; }

.loading { font-family: var(--cond); color: var(--ink-2); padding: 2rem 0; }

/* ---------- the globe: a green phosphor screen, in either theme ---------- */

main.wide { max-width: 96rem; }
.watch {
	--g-bg: #020a06;
	--g-panel: #04130b;
	--g-line: #2fe07a;
	--g-dim: #15562f;
	--g-bright: #c4ffd8;
	--g-text: #a8f5c4;
	--g-text-2: #5fae7f;
	--g-ahead: #3fd0c8;
	--g-past: #e0a63a;
	--g-end: #ff7a5c;
	--g-deep: #010604;
	background:
		radial-gradient(ellipse at 30% 0%, rgba(47, 224, 122, 0.08), transparent 55%),
		repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.22) 0 1px, transparent 1px 3px),
		var(--g-bg);
	color: var(--g-text);
	border: 1px solid #0f3a22;
	border-radius: 6px;
	padding: 1.25rem clamp(0.9rem, 2vw, 1.6rem) 1rem;
	font-family: var(--cond);
	box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(47, 224, 122, 0.05);
	position: relative;
	overflow: hidden;
}
.watch :focus-visible { outline-color: var(--g-bright); }
.watch-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.g-eyebrow { font: 500 0.74rem/1.2 var(--cond); letter-spacing: 0.16em; text-transform: uppercase; color: var(--g-text-2); margin: 0 0 0.3rem; }
.g-title { font: 600 clamp(1.5rem, 2.6vw, 2.1rem)/1.05 var(--cond); color: var(--g-bright); text-shadow: 0 0 18px rgba(47, 224, 122, 0.45); margin: 0; }
.year-box { text-align: right; }
.year-big { display: block; font: 700 clamp(2.4rem, 5vw, 3.6rem)/0.9 var(--cond); font-variant-numeric: tabular-nums; color: var(--g-bright); text-shadow: 0 0 22px rgba(47, 224, 122, 0.55); letter-spacing: 0.02em; }
.year-tag { font: 500 0.78rem/1 var(--cond); letter-spacing: 0.14em; text-transform: uppercase; color: var(--g-text-2); }

.watch-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 1fr); gap: 1.25rem; align-items: start; }
.globe-wrap { position: relative; aspect-ratio: 1 / 1; max-height: 72vh; width: 100%; margin: 0 auto; }
.globe-canvas { width: 100%; height: 100%; display: block; }
.globe-hover { position: absolute; left: 50%; bottom: 0.4rem; transform: translateX(-50%); font: 600 0.9rem/1 var(--cond); letter-spacing: 0.08em; text-transform: uppercase; color: var(--g-bright); background: rgba(2, 10, 6, 0.75); border: 1px solid var(--g-dim); padding: 0.35rem 0.6rem; border-radius: 3px; pointer-events: none; }
.globe-hover:empty { display: none; }
.g-legend { position: absolute; top: 0.25rem; left: 0.25rem; display: flex; gap: 0.75rem; font: 500 0.72rem/1 var(--cond); letter-spacing: 0.12em; text-transform: uppercase; color: var(--g-text-2); }
.lg::before { content: ''; display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 1px; margin-right: 0.3rem; vertical-align: -0.05rem; }
.lg.now::before { background: var(--g-line); box-shadow: 0 0 6px var(--g-line); }
.lg.ahead::before { background: var(--g-ahead); }
.lg.ended::before { background: var(--g-past); }

.g-side { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }
.g-chips { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.g-chip, .g-btn { font: 500 0.82rem/1 var(--cond); letter-spacing: 0.08em; text-transform: uppercase; color: var(--g-text); background: transparent; border: 1px solid var(--g-dim); padding: 0.45rem 0.7rem; border-radius: 3px; cursor: pointer; }
.g-chip:hover, .g-btn:hover { border-color: var(--g-line); color: var(--g-bright); }
.g-chip[aria-pressed='true'] { background: rgba(47, 224, 122, 0.14); border-color: var(--g-line); color: var(--g-bright); }
.g-btn.small { padding: 0.3rem 0.5rem; font-size: 0.72rem; }
.pills { max-height: 26rem; overflow: auto; padding-right: 0.25rem; scrollbar-color: var(--g-dim) transparent; }
.pill-group { margin-bottom: 0.9rem; }
.g-h { font: 600 0.76rem/1 var(--cond); letter-spacing: 0.16em; text-transform: uppercase; color: var(--g-text-2); margin: 0 0 0.45rem; display: flex; gap: 0.5rem; align-items: baseline; }
.g-h b { color: var(--g-bright); font-weight: 600; }
.g-h2 { font: 600 1.25rem/1.15 var(--cond); color: var(--g-bright); margin: 0; }
.pill-row { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.pill { display: inline-flex; align-items: center; gap: 0.4rem; max-width: 100%; font: 500 0.86rem/1.15 var(--cond); color: var(--g-text); background: rgba(47, 224, 122, 0.04); border: 1px solid var(--g-dim); border-radius: 999px; padding: 0.32rem 0.65rem 0.32rem 0.5rem; cursor: pointer; text-align: left; transition: border-color 0.15s, background 0.15s, transform 0.15s; }
.pill:hover { border-color: var(--g-line); background: rgba(47, 224, 122, 0.1); }
.pill[aria-pressed='true'] { border-color: var(--g-bright); background: rgba(47, 224, 122, 0.2); color: var(--g-bright); box-shadow: 0 0 14px rgba(47, 224, 122, 0.35); }
.pill .dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; flex: none; background: var(--g-end); box-shadow: 0 0 6px var(--g-end); }
.pill.emergence .dot { background: var(--g-ahead); box-shadow: 0 0 6px var(--g-ahead); }
.pill.ahead, .pill.undated { color: var(--g-text-2); }
.pill.ended { border-style: dashed; color: var(--g-past); }
.pill-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pill-where { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--g-text-2); flex: none; }
.g-country { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
.g-global summary { font: 500 0.82rem/1.2 var(--cond); letter-spacing: 0.08em; text-transform: uppercase; color: var(--g-text-2); cursor: pointer; margin-bottom: 0.5rem; }
.g-empty, .g-note { color: var(--g-text-2); font: 400 0.9rem/1.4 var(--cond); margin: 0; }
.g-note { margin-top: 0.75rem; }

.g-card { border: 1px solid var(--g-dim); border-left: 3px solid var(--g-end); background: var(--g-panel); padding: 0.85rem 0.95rem; border-radius: 3px; animation: g-in 0.25s ease-out; }
.g-card.emergence { border-left-color: var(--g-ahead); }
.g-card .g-h2 { margin-bottom: 0.4rem; }
.g-small { font: 400 0.92rem/1.4 var(--serif); color: var(--g-text); margin: 0 0 0.7rem; }
.g-card .fuse i { background: #0d2a19; }
.g-card .fuse[data-kind='apocalypse'] i.lit { background: var(--g-end); }
.g-card .fuse[data-kind='emergence'] i.lit { background: var(--g-ahead); }
.g-labels { color: var(--g-text-2); }
.g-labels span.here { color: var(--g-bright); }
.g-facts { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 0.8rem; margin: 0.8rem 0; font-size: 0.9rem; }
.g-facts dt { color: var(--g-text-2); }
.g-facts dd { margin: 0; }
.g-dim { color: var(--g-text-2); }
.g-link { color: var(--g-bright); font-weight: 600; text-decoration-color: var(--g-line); }
.g-link::after { content: ' \2192'; }
@keyframes g-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.timebar { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: end; margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid #0f3a22; }
.time-controls { display: flex; gap: 0.35rem; padding-bottom: 1.35rem; }
.time-track { position: relative; }
.year-hist { display: flex; align-items: flex-end; gap: 1px; height: 2.6rem; }
.year-hist span { flex: 1; background: var(--g-dim); min-height: 1px; border-radius: 1px 1px 0 0; transition: background 0.2s; }
.year-hist span.on { background: var(--g-bright); box-shadow: 0 0 8px var(--g-line); }
.year-slider { width: 100%; margin: 0.3rem 0 0; accent-color: var(--g-line); background: transparent; }
.now-mark { position: absolute; top: -0.9rem; transform: translateX(-50%); font: 600 0.66rem/1 var(--cond); letter-spacing: 0.14em; text-transform: uppercase; color: var(--g-line); pointer-events: none; }
.now-mark::after { content: ''; display: block; width: 1px; height: 3.2rem; background: var(--g-line); opacity: 0.5; margin: 0.15rem auto 0; }
.time-ends { display: flex; justify-content: space-between; font: 400 0.72rem/1 var(--cond); color: var(--g-text-2); }

@media (max-width: 1000px) {
	.watch-grid { grid-template-columns: 1fr; }
	.globe-wrap { max-width: 34rem; }
	.pills { max-height: 22rem; }
	.g-detail { order: -1; }
	.timebar { grid-template-columns: 1fr; }
	.time-controls { padding-bottom: 0; order: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.g-card { animation: none; }
}

/* ---------- timeline, deep time and cascades (SVG) ---------- */

:root {
	--rel-causes: var(--ember);
	--rel-accelerates: var(--amber);
	--rel-enables: var(--teal);
	--rel-precondition: #5a6b9c;
	--rel-blocks: #7a4f8f;
	--rel-substitutes: #8a7a3a;
	--band-pre: #dfe4da;
	--band-hist: #e3e6dc;
	--band-now: #ece6d4;
	--band-fut: #dde6e2;
}
@media (prefers-color-scheme: dark) {
	:root {
		--rel-precondition: #9fb1e6;
		--rel-blocks: #c39ad6;
		--rel-substitutes: #cdbb76;
		--band-pre: #1c2427;
		--band-hist: #1e2628;
		--band-now: #262620;
		--band-fut: #1a2828;
	}
}

.tabs { display: flex; gap: 0.25rem; flex-wrap: wrap; border-bottom: 1px solid var(--rule); margin: 0 0 1rem; font-family: var(--cond); }
.tabs a { padding: 0.5rem 0.8rem 0.55rem; text-decoration: none; color: var(--ink-2); font-weight: 500; border-radius: 3px 3px 0 0; margin-bottom: -1px; border: 1px solid transparent; }
.tabs a b { font-weight: 500; color: var(--ink-3); margin-left: 0.4rem; font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.tabs a:hover { color: var(--ink); }
.tabs a[aria-current='page'] { color: var(--ink); background: var(--sheet); border-color: var(--rule); border-bottom-color: var(--sheet); box-shadow: inset 0 2px 0 var(--ink); }
.tl-lede { margin-bottom: 0.9rem; }
.tl-controls { display: flex; gap: 0.5rem 1.25rem; flex-wrap: wrap; align-items: center; font: 400 0.92rem/1.2 var(--cond); color: var(--ink-2); margin: 0 0 0.6rem; }
.tl-ctl { display: inline-flex; gap: 0.35rem; align-items: center; }
.tl-ctl select { font: 400 0.92rem/1.2 var(--cond); padding: 0.3rem 0.45rem; border: 1px solid var(--rule); border-radius: 4px; background: var(--sheet); color: var(--ink); }
.tl-zoom { text-decoration: none; padding: 0.2rem 0.45rem; border: 1px solid var(--rule); border-radius: 3px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.tl-zoom[aria-current='true'] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tl-legend { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; align-items: center; font: 400 0.82rem/1.2 var(--cond); color: var(--ink-2); margin: 0 0 0.75rem; }
.lg-item { display: inline-flex; align-items: center; gap: 0.25rem; white-space: nowrap; }
.lg-sep { width: 1px; height: 0.9rem; background: var(--rule); }
.lg-svg { flex: none; overflow: visible; }
.val-key { font-weight: 600; color: var(--ink-2); letter-spacing: 0.08em; }

.tl-scroll { overflow-x: auto; overflow-y: hidden; border: 1px solid var(--rule); border-radius: 4px; background: var(--sheet); max-width: 100%; overscroll-behavior-x: contain; }
.tl-inner { position: relative; }
.tl-svg { display: block; overflow: visible; }
.tl-lanes { position: absolute; inset: 0 auto 0 0; pointer-events: none; will-change: transform; }
.tl-lane-name { position: absolute; left: 0.5rem; font: 600 0.72rem/1 var(--cond); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; background: color-mix(in srgb, var(--sheet) 85%, transparent); padding: 0.15rem 0.3rem 0.15rem 0; }
.tl-lane-name b { font-weight: 500; color: var(--ink-3); margin-left: 0.35rem; letter-spacing: 0; }

.band { fill: transparent; }
.band.b-prehistoric { fill: var(--band-pre); }
.band.b-historical { fill: var(--band-hist); }
.band.b-now { fill: var(--band-now); }
.band.b-future { fill: var(--band-fut); }
.band.b-before { fill: var(--rule-2); opacity: 0.6; }
.band-label { font: 600 11px var(--cond); letter-spacing: 0.12em; text-transform: uppercase; fill: var(--ink-3); }
.lane-bg { fill: var(--ink); opacity: 0.025; }
.lane-rule { stroke: var(--rule); stroke-width: 1; }
.grid { stroke: var(--rule-2); stroke-width: 1; }
.grid.major { stroke: var(--rule); }
.tick { font: 500 11px var(--cond); fill: var(--ink-2); font-variant-numeric: tabular-nums; }
.nowline { stroke: var(--ink); stroke-width: 1.25; stroke-dasharray: 3 3; }
.now-label { font: 600 11px var(--cond); fill: var(--ink); }

.ev { --c: var(--ember); --w: var(--ember-wash); cursor: pointer; }
.ev.emergence { --c: var(--teal); --w: var(--teal-wash); }
.ev .dot { stroke-width: 1.5; fill: var(--c); stroke: var(--c); }
.ev .ring { fill: none; stroke: var(--c); stroke-width: 1.2; opacity: 0.7; }
.ev .win { stroke: var(--c); stroke-width: 5; stroke-linecap: round; opacity: 0.28; }
.ev.st-ahead .dot { fill: var(--w); }
.ev.st-proposed .dot { fill: var(--sheet); stroke-dasharray: 2 1.6; opacity: 0.75; }
.ev.st-proposed .win { opacity: 0.12; }
.ev.st-proposed .lab { fill: var(--ink-2); }
.ev.st-off .dot { fill: none; stroke: var(--ink-3); }
.ev .slash { stroke: var(--ink-3); stroke-width: 1.2; }
.ev .lab { font: 500 12px var(--cond); fill: var(--ink); }
.ev .val { fill: var(--ink-3); font-weight: 600; }
.ev .hit { fill: transparent; }
.ev:hover .lab, .ev:focus .lab { text-decoration: underline; }
.ev:hover .dot, .ev:focus .dot { stroke: var(--ink); stroke-width: 2; }
.ev:focus { outline: none; }
.ev:focus-visible .dot { stroke: var(--focus); stroke-width: 2.5; }
.ev.small .dot { stroke-width: 1; }

.edge { fill: none; stroke: var(--ink-3); stroke-width: 1.1; opacity: 0.55; }
.edge.guess { stroke-dasharray: 4 3; }
.edge.rel-causes { stroke: var(--rel-causes); }
.edge.rel-accelerates { stroke: var(--rel-accelerates); }
.edge.rel-enables { stroke: var(--rel-enables); }
.edge.rel-precondition { stroke: var(--rel-precondition); }
.edge.rel-blocks { stroke: var(--rel-blocks); }
.edge.rel-substitutes { stroke: var(--rel-substitutes); }
.arr path { fill: var(--ink-3); }
.arr.rel-causes path { fill: var(--rel-causes); }
.arr.rel-accelerates path { fill: var(--rel-accelerates); }
.arr.rel-enables path { fill: var(--rel-enables); }
.arr.rel-precondition path { fill: var(--rel-precondition); }
.arr.rel-blocks path { fill: var(--rel-blocks); }
.arr.rel-substitutes path { fill: var(--rel-substitutes); }
.tl-svg:not(.show-links) .edges { display: none; }
.tl-svg.hovering .edge { opacity: 0.12; }
.tl-svg.hovering .edge.on { opacity: 1; stroke-width: 1.8; }
.lg-svg .edge { opacity: 1; stroke-width: 1.6; }

.tl-undated summary, .tl-listbox summary { font: 600 1rem/1.3 var(--cond); cursor: pointer; margin: 1.25rem 0 0.5rem; }
.tl-chiplist { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.tl-chip { display: inline-block; font: 500 0.86rem/1.2 var(--cond); padding: 0.25rem 0.55rem; border-radius: 999px; border: 1px solid var(--rule); text-decoration: none; background: var(--sheet); }
.tl-chip.apocalypse { border-left: 3px solid var(--ember); }
.tl-chip.emergence { border-left: 3px solid var(--teal); }
.tl-chip.st-proposed { color: var(--ink-2); border-style: dashed; }
.tl-list { font: 400 0.92rem/1.35 var(--cond); }
.tl-list th { font-weight: 500; font-size: 0.82rem; color: var(--ink-2); text-align: left; padding: 0 0.75rem 0.4rem 0; border-bottom: 1px solid var(--ink); }
.tl-list td { padding: 0.4rem 0.75rem 0.4rem 0; border-bottom: 1px solid var(--rule-2); vertical-align: baseline; }
.tl-list td.num { white-space: nowrap; color: var(--ink-2); }
.tl-list tr.proposed a { color: var(--ink-2); }
.tl-list .val { color: var(--ink-3); font-weight: 600; }
.tl-list .kind { font-size: 0.72rem; }

/* cascade graph */
.cg-grid { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1.25rem; align-items: start; }
.cg-scroll { overflow: auto; border: 1px solid var(--rule); border-radius: 4px; background: var(--sheet); max-height: 78vh; }
.cg-svg { display: block; }
.cg-svg .lab { font-size: 11.5px; }
.cg-svg .lab.spare { display: none; }
.cg-svg .node:hover .lab.spare, .cg-svg .node:focus .lab.spare { display: inline; paint-order: stroke; stroke: var(--sheet); stroke-width: 3px; }
.cg-svg .edge { opacity: 0.6; }
.cg-svg.selecting .node { opacity: 0.18; }
.cg-svg.selecting .node.sel, .cg-svg.selecting .node.up, .cg-svg.selecting .node.down { opacity: 1; }
.cg-svg.selecting .node.up .lab.spare, .cg-svg.selecting .node.down .lab.spare, .cg-svg.selecting .node.sel .lab.spare { display: inline; paint-order: stroke; stroke: var(--sheet); stroke-width: 3px; }
.cg-svg.selecting .edge { opacity: 0.07; }
.cg-svg.selecting .edge.up, .cg-svg.selecting .edge.down { opacity: 1; stroke-width: 2.2; }
.cg-svg .node.sel .dot { stroke: var(--ink); stroke-width: 3; }
.cg-svg .node.sel .lab { font-weight: 700; }
.cg-panel { position: sticky; top: 1rem; font-family: var(--cond); background: var(--sheet); border: 1px solid var(--rule); border-radius: 4px; padding: 0.9rem 1rem 1rem; max-height: 78vh; overflow: auto; }
.cg-panel h2 { margin-top: 0; }
.cg-panel h3 { font-size: 0.95rem; margin-top: 1rem; }
.cg-eyebrow { font-size: 0.85rem; color: var(--ink-2); margin: 0 0 0.35rem; }
.cg-title { font-size: 1.3rem; margin: 0 0 0.6rem; }
.cg-status { margin: 0.35rem 0 0.6rem; }
.cg-links { list-style: none; padding: 0; margin: 0; }
.cg-link { padding: 0.45rem 0 0.5rem 0.6rem; border-left: 2px solid var(--rule); margin-bottom: 0.4rem; font-size: 0.92rem; }
.cg-link.rel-causes { border-color: var(--rel-causes); }
.cg-link.rel-accelerates { border-color: var(--rel-accelerates); }
.cg-link.rel-enables { border-color: var(--rel-enables); }
.cg-link.rel-precondition { border-color: var(--rel-precondition); }
.cg-link.rel-blocks { border-color: var(--rel-blocks); }
.cg-link.rel-substitutes { border-color: var(--rel-substitutes); }
.cg-rel { display: block; font-size: 0.78rem; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.06em; }
.cg-pick { font-family: var(--cond); font-size: 0.95rem; color: var(--ink); text-align: left; font-weight: 600; }
.cg-when { color: var(--ink-3); font-size: 0.85rem; }
.cg-why { font: 400 0.88rem/1.4 var(--serif); color: var(--ink-2); margin: 0.2rem 0 0; }
.cg-legend { margin-top: 0.5rem; }

/* dashboard */
.epoch-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; margin: 0.5rem 0 0.5rem; }
.epoch-cell { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.75rem 0.85rem 0.8rem; background: var(--sheet); border: 1px solid var(--rule); border-radius: 4px; text-decoration: none; font-family: var(--cond); }
.epoch-cell:hover { border-color: var(--ink-2); }
.epoch-name { font-weight: 600; font-size: 1.05rem; }
.epoch-span { font-size: 0.8rem; color: var(--ink-3); }
.epoch-total { font: 600 1.8rem/1 var(--cond); font-variant-numeric: tabular-nums; margin-top: 0.25rem; }
.epoch-bar { display: flex; height: 0.5rem; gap: 2px; margin: 0.35rem 0 0.15rem; }
.epoch-bar .seg { display: block; min-width: 3px; border-radius: 1px; background: var(--ink-2); }
.seg.st-proposed { background: transparent; border: 1px dashed var(--ink-3); }
.seg.st-plausible { background: var(--rule); }
.seg.st-likely { background: var(--amber); }
.seg.st-underway, .seg.st-lingering { background: var(--ember); opacity: 0.75; }
.seg.st-occurred { background: var(--ember); }
.seg.st-stalled, .seg.st-refuted, .seg.st-merged { background: transparent; border: 1px solid var(--rule); }
.epoch-counts { font-size: 0.78rem; color: var(--ink-2); line-height: 1.3; }
.dash .dash-block h2 { margin-top: 1.75rem; }
.move { font-family: var(--cond); color: var(--ink-2); }
.more { margin-top: 0.4rem; }
.movers { list-style: none; padding: 0; margin: 0; }
.movers li { display: grid; grid-template-columns: minmax(0, 1fr) 6rem 2.5rem; gap: 0.6rem; align-items: center; padding: 0.4rem 0; border-bottom: 1px solid var(--rule-2); font-size: 0.97rem; }
.mover-bar { height: 0.45rem; background: var(--rule-2); border-radius: 2px; position: relative; overflow: hidden; }
.mover-bar i { position: absolute; inset: 0 auto 0 0; background: var(--teal); }
.movers .num { text-align: right; color: var(--ink-2); }
.steps { margin: 0.6rem 0 0.8rem; padding-left: 1.2rem; font-family: var(--cond); }
.steps li { margin-bottom: 0.3rem; }
code { font: 400 0.9em/1.3 ui-monospace, 'SF Mono', Menlo, monospace; background: var(--sheet); border: 1px solid var(--rule); border-radius: 3px; padding: 0.05rem 0.3rem; }
.sync-form { grid-template-columns: minmax(0, 18rem) auto; justify-content: start; margin-bottom: 0.6rem; }
.valence-note { display: block; font: 400 0.85rem/1.35 var(--serif); color: var(--ink-2); margin-top: 0.15rem; }

/* news */
.news { list-style: none; padding: 0; margin: 0; }
.news-item { padding: 0.85rem 0 0.9rem; border-bottom: 1px solid var(--rule-2); }
.news-head { display: flex; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; align-items: baseline; }
.news-head .when { font: 400 0.82rem/1 var(--cond); color: var(--ink-3); }
.news-title { margin: 0.3rem 0 0.35rem; font: 600 1.04rem/1.3 var(--cond); overflow-wrap: anywhere; }
.news-title a { text-decoration: none; }
.news-title a:hover { text-decoration: underline; }
.outlet { display: inline-flex; flex-wrap: wrap; gap: 0.15rem 0.5rem; align-items: baseline; font: 500 0.85rem/1.2 var(--cond); }
.outlet b { font-weight: 600; padding: 0.12rem 0.4rem; border: 1px solid var(--rule); border-radius: 3px; background: var(--sheet); }
.o-dim { color: var(--ink-3); font-family: var(--cond); font-weight: 400; font-size: 0.85rem; }
.si { font: 600 0.75rem/1 var(--cond); padding: 0.15rem 0.35rem; border-radius: 3px; background: var(--rule-2); color: var(--ink-2); white-space: nowrap; }
.si.si-2 { background: var(--amber-wash); color: var(--amber); }
.si.si-3, .si.si-4 { background: var(--ember-wash); color: var(--ember); }
.touched { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.2rem; font: 400 0.92rem/1.3 var(--cond); }
.stance { font: 600 0.7rem/1 var(--cond); letter-spacing: 0.06em; text-transform: uppercase; padding: 0.15rem 0.3rem; border-radius: 2px; background: var(--teal-wash); color: var(--teal); }
.stance-contradicts .stance { background: var(--ember-wash); color: var(--ember); }
.stance-mentions .stance { background: var(--rule-2); color: var(--ink-2); }
.outlets td .o-dim { margin-left: 0.25rem; }
.outlets-box { margin: 0 0 1rem; }
.outlets-box summary { font: 600 1rem/1.3 var(--cond); cursor: pointer; margin-bottom: 0.5rem; }

@media (max-width: 1000px) {
	.cg-grid { grid-template-columns: 1fr; }
	.cg-panel { position: static; max-height: none; }
	.epoch-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
	.tl-legend .lg-sep { display: none; }
	.tabs a { padding: 0.45rem 0.55rem; }
	.sync-form { grid-template-columns: 1fr; }
	.movers li { grid-template-columns: minmax(0, 1fr) 4rem 2.2rem; }
}

/* ---------- narrow screens ---------- */

@media (max-width: 860px) {
	.frame { grid-template-columns: minmax(0, 1fr); }
	.rail { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; padding: 0.9rem 1rem; border-right: 0; border-bottom: 1px solid var(--rule); }
	.mark small { display: none; }
	.nav { flex-direction: row; flex-wrap: wrap; gap: 0.25rem; }
	.nav a[aria-current='page'] { box-shadow: inset 0 -2px 0 var(--ink); }
	.who { margin: 0 0 0 auto; }
	.who strong { display: inline; }
	main { padding: 1.25rem 1rem 3rem; }
	.event-grid { grid-template-columns: 1fr; gap: 1.5rem; }
	.facts { position: static; order: -1; }
	.endings thead { display: none; }
	.endings tr { display: grid; grid-template-columns: 1fr auto; gap: 0.25rem 0.75rem; padding: 0.75rem 0; border-bottom: 1px solid var(--rule-2); }
	.endings td { border: 0; padding: 0; }
	.endings td.title { grid-column: 1 / -1; }
	.invite-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (prefers-reduced-motion: no-preference) {
	.fuse i.now { animation: glow 2.4s ease-in-out infinite alternate; }
	@keyframes glow { from { filter: brightness(1); } to { filter: brightness(1.35); } }
}

.sync-line { font-family: var(--cond); color: var(--ink-2); margin: -0.25rem 0 1rem; }
.sync-line.warn { color: var(--ember); }

/* ---------- your radar: rings are time, wedges are parts of life ---------- */

.who strong a { text-decoration: none; }
.who strong a:hover, .who strong a[aria-current='page'] { text-decoration: underline; text-decoration-color: var(--ink-3); }
.k-threat { --k: var(--ember); --k-wash: var(--ember-wash); }
.k-jackpot { --k: var(--teal); --k-wash: var(--teal-wash); }
.k-disruption { --k: var(--violet); --k-wash: var(--violet-wash); }

.r-where { font: 500 0.95rem/1 var(--cond); color: var(--ink-2); margin: 0; }
.r-code { font: 600 0.95rem/1 var(--cond); letter-spacing: 0.06em; font-variant-numeric: tabular-nums; padding: 0.25rem 0.45rem; border: 1px solid var(--rule); border-radius: 3px; background: var(--sheet); color: var(--ink); }
.r-code.big { font-size: 1.15rem; display: inline-block; }
.r-summary { font: 500 1rem/1.35 var(--cond); color: var(--ink); margin: -0.25rem 0 1rem; }
.r-noplace { border-color: var(--amber); background: var(--amber-wash); max-width: none; }
.r-noplace a { font-weight: 600; }

.r-filters { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; padding: 0.7rem 0 0.8rem; margin: 0 0 1.25rem; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); font-family: var(--cond); }
.r-filters fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.9rem; min-width: 0; }
.r-filters legend { float: left; font: 600 0.78rem/1 var(--cond); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-right: 0.2rem; padding: 0; }
.r-filters select { font: 400 0.95rem/1.2 var(--cond); padding: 0.35rem 0.5rem; border: 1px solid var(--rule); border-radius: 4px; background: var(--sheet); color: var(--ink); max-width: 100%; }
.r-chk { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.95rem; cursor: pointer; white-space: nowrap; }
.r-chk input { margin: 0; accent-color: var(--ink); }
.r-chk .n { color: var(--ink-3); font-variant-numeric: tabular-nums; }

.r-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(21rem, 1fr); gap: 2.5rem; align-items: start; }
.r-left { min-width: 0; }
.r-stage { position: relative; }
.r-svg { display: block; width: 100%; height: auto; max-width: 47.5rem; margin: 0 auto; overflow: visible; }
.r-svg text { font-family: var(--cond); }
.r-undated { fill: var(--rule-2); stroke: var(--rule); stroke-dasharray: 3 3; }
.r-face { fill: var(--sheet); stroke: var(--rule); }
.r-ring { fill: none; stroke: var(--rule); }
.r-ring.outer { stroke-dasharray: 2 3; }
.r-now { fill: var(--amber-wash); stroke: var(--amber); stroke-opacity: 0.55; }
.r-spoke { stroke: var(--rule); }
.r-wedge-on { fill: var(--ink); fill-opacity: 0.06; }
.r-ringlab { font-size: 10.5px; font-weight: 500; fill: var(--ink-3); paint-order: stroke; stroke: var(--sheet); stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }
.r-ringlab.now { fill: var(--amber); font-weight: 600; stroke: var(--amber-wash); }
.r-arealab { font-size: 12px; font-weight: 600; fill: var(--ink-2); text-anchor: middle; letter-spacing: 0.02em; }
.r-arealab.on { fill: var(--ink); }
.r-you { fill: var(--ink); }
.r-youlab { fill: var(--paper); font-size: 11px; font-weight: 700; text-anchor: middle; letter-spacing: 0.06em; text-transform: uppercase; pointer-events: none; }
.r-sweep path { fill: var(--ink); }
.r-sweep-edge { stroke: var(--ink); stroke-opacity: 0.18; }
.r-sweep { pointer-events: none; animation: r-spin 16s linear infinite; }
@keyframes r-spin { to { transform: rotate(360deg); } }

.blip { cursor: pointer; outline: none; }
.blip .mk { fill: var(--k); stroke: var(--k); stroke-width: 1; stroke-linejoin: round; }
.blip.r-global .mk { fill: var(--sheet); stroke-width: 1.8; }
.blip.r-elsewhere .mk { fill: var(--sheet); stroke-width: 1; stroke-opacity: 0.7; }
.blip.unres { opacity: 0.55; }
.blip.unres .mk { stroke-dasharray: 2.2 1.6; fill-opacity: 0.35; }
.blip.unres.r-global .mk { fill-opacity: 1; }
.blip .halo { fill: none; stroke: var(--ink); stroke-width: 1.5; opacity: 0; }
.blip:hover .halo, .blip.hot .halo, .blip:focus-visible .halo { opacity: 0.45; }
.blip.sel .halo { opacity: 1; stroke-width: 2; }
.blip:hover, .blip.hot, .blip.sel, .blip:focus-visible { opacity: 1; }
.blip:focus-visible .halo { stroke: var(--focus); opacity: 1; }

.r-tip { position: absolute; z-index: 5; width: max-content; max-width: min(19rem, 90%); padding: 0.6rem 0.75rem; background: var(--ink); color: var(--paper); border-radius: 4px; font: 400 0.86rem/1.35 var(--cond); pointer-events: none; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18); display: flex; flex-direction: column; gap: 0.25rem; }
.r-tip strong { font-weight: 600; font-size: 0.95rem; line-height: 1.2; }
.r-tip-kind { color: var(--paper); opacity: 0.85; }
.r-tip .r-badge { background: var(--paper); }
.r-tip-why { opacity: 0.8; font-family: var(--serif); font-size: 0.82rem; }
.r-tip-unres { font-style: italic; opacity: 0.8; }

.r-glyph { flex: none; vertical-align: -0.2rem; overflow: visible; }
.r-glyph .mk { fill: var(--k); stroke: var(--k); stroke-width: 1.2; stroke-linejoin: round; }
.r-glyph.r-global .mk { fill: transparent; stroke-width: 1.6; }
.r-glyph.unres { opacity: 0.55; }
.r-glyph.unres .mk { stroke-dasharray: 2 1.5; fill-opacity: 0.35; }
.r-legend { list-style: none; padding: 0; margin: 0.75rem auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem 1.1rem; font: 400 0.86rem/1.2 var(--cond); color: var(--ink-2); max-width: 47.5rem; }
.r-legend li { display: inline-flex; align-items: center; gap: 0.35rem; }
.r-legend .r-glyph.k-jackpot { --k: var(--ink-2); }

.r-badge { display: inline-block; font: 600 0.74rem/1 var(--cond); letter-spacing: 0.06em; text-transform: uppercase; padding: 0.22rem 0.4rem; border-radius: 2px; color: var(--k); background: var(--k-wash); }
.r-reach { font: 500 0.82rem/1 var(--cond); color: var(--ink-2); }
.r-reach.r-local, .r-reach.r-national { color: var(--ink); font-weight: 600; }
.r-eta { font: 500 0.85rem/1 var(--cond); color: var(--ink-2); margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
.b-now .r-eta { color: var(--amber); font-weight: 600; }

.r-list { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); display: flex; flex-direction: column; min-width: 0; border-top: 2px solid var(--ink); }
.r-list-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.6rem 0 0.4rem; }
.r-list-head h2 { margin: 0; }
.r-count { font: 500 0.88rem/1 var(--cond); color: var(--ink-3); margin: 0; }
.r-list-items { overflow-y: auto; overscroll-behavior: contain; padding-right: 0.4rem; scrollbar-width: thin; }
.r-group h3 { position: sticky; top: 0; z-index: 1; background: var(--paper); margin: 0; padding: 0.7rem 0 0.35rem; font: 600 0.8rem/1 var(--cond); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); border-bottom: 1px solid var(--rule); display: flex; justify-content: space-between; }
.r-group.b-now h3 { color: var(--amber); }
.r-group-n { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.r-items { list-style: none; padding: 0; margin: 0; }
.r-item { padding: 0.6rem 0.6rem 0.65rem 0.7rem; border-bottom: 1px solid var(--rule-2); border-left: 3px solid var(--k); scroll-margin: 2.5rem 0 0.5rem; transition: background-color 0.2s; }
.r-item.unres { border-left-style: dashed; }
.r-item:hover { background: var(--sheet); }
.r-item.sel { background: var(--k-wash); box-shadow: inset 0 0 0 1px var(--k); }
.r-item-top { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.3rem; }
.r-title { display: block; font: 600 1rem/1.25 var(--cond); text-decoration: none; }
.r-title:hover { text-decoration: underline; }
.r-action { font-size: 0.9rem; margin: 0.25rem 0 0; color: var(--ink); }
.r-item-meta { display: flex; flex-wrap: wrap; gap: 0.25rem 0.4rem; margin-top: 0.35rem; font: 400 0.8rem/1.2 var(--cond); color: var(--ink-2); align-items: center; }
.r-area { padding: 0.12rem 0.4rem; border: 1px solid var(--rule); border-radius: 999px; }
.r-area.on { border-color: var(--ink-2); color: var(--ink); }
.r-like { font-variant-numeric: tabular-nums; }
.r-unres { font: italic 400 0.8rem/1.2 var(--serif); color: var(--ink-3); }

.r-safe { margin-top: 1.75rem; }
.r-safe h2 { margin-top: 0; }
.r-safe-grid { list-style: none; padding: 0; margin: 0.6rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); border-top: 1px solid var(--rule); }
.r-safe-cell { padding: 0.65rem 0.9rem 0.7rem 0; border-bottom: 1px solid var(--rule-2); display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.r-safe-name { font: 500 0.82rem/1.2 var(--cond); color: var(--ink-2); }
.r-safe-val { font: 600 1.2rem/1.15 var(--cond); font-variant-numeric: tabular-nums; }
.t-now .r-safe-val { color: var(--ember); }
.t-soon .r-safe-val { color: var(--amber); }
.t-clear .r-safe-val { color: var(--teal); font-size: 1.02rem; }
.r-safe-ev { font: 400 0.85rem/1.3 var(--cond); }

@media (max-width: 1099px) {
	.r-grid { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
	.r-list { position: static; max-height: none; }
	.r-list-items { overflow: visible; padding-right: 0; }
	.r-group h3 { top: 0; }
}
@media (max-width: 560px) {
	.r-filters { gap: 0.6rem; }
	.r-filters fieldset { width: 100%; }
	.r-arealab { font-size: 10.5px; }
	.r-ringlab { font-size: 9.5px; }
	.r-youlab { font-size: 9px; }
	.r-safe-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.r-safe-val { font-size: 1.05rem; }
}
@media (prefers-reduced-motion: reduce) {
	.r-sweep { display: none; }
	.r-item { transition: none; }
}

/* ---------- profile ---------- */

.pf-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; max-width: 62rem; }
.pf-grid h2 { margin-top: 0.5rem; }
.pf-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.85rem 1rem; max-width: 30rem; }
.pf-form .field:first-of-type { grid-column: 1 / -1; }
.pf-form .hint { font-size: 0.8rem; color: var(--ink-3); }
.pf-actions { grid-column: 1 / -1; display: flex; gap: 0.75rem; align-items: center; }
.pf-privacy { margin-top: 1rem; max-width: 30rem; }
.pf-card { border-top: 2px solid var(--ink); padding-top: 0.25rem; }
.pf-card.empty-card { border-top-color: var(--rule); color: var(--ink-2); }
.pf-facts { margin: 0.5rem 0 0.75rem; }
.pf-facts div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 1rem; padding: 0.55rem 0; border-bottom: 1px solid var(--rule-2); align-items: baseline; }
.pf-facts dt { font: 500 0.88rem/1.2 var(--cond); color: var(--ink-2); }
.pf-facts dd { margin: 0; font: 500 1rem/1.3 var(--cond); }
.pf-source { font-size: 0.92rem; color: var(--ink-2); padding-left: 0.75rem; border-left: 3px solid var(--teal); }
.pf-source.typed { border-left-color: var(--amber); }
.pf-links { font-family: var(--cond); }
.pf-links .link-button { font-size: 1rem; }
@media (max-width: 860px) {
	.pf-grid { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
	.pf-card { order: -1; }
}
.r-more { display: block; margin: 0.5rem 0 0.75rem 0.85rem; font-size: 0.92rem; }
.r-safe { margin-top: 2.5rem; border-top: 2px solid var(--ink); padding-top: 0.6rem; }
.r-safe-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1099px) { .r-safe-grid { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); } }
@media (max-width: 560px) { .r-safe-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.version-tag { font-family: var(--cond); font-size: 0.75rem; color: var(--ink-3); margin: 0.5rem 0 0; letter-spacing: 0.02em; }
.gate .version-tag { text-align: center; margin-top: 1.25rem; }