/**
 * Panic Observatory theme pack.
 * Cursor source: /observatory/_theme/observatory.css
 * Loaded only on /observatory/ chambers. Does not write Appearance → Additional CSS.
 *
 * Type scale matches Institute / Clarity Report (html 62.5%, so 1.8rem = 18px).
 */

body.observatory {
	--obs-bg: #05060a;
	--obs-surface: #10131a;
	--obs-accent: #e35b5b;
	--obs-accent-soft: #f3b38a;
	--obs-text-main: #f5f5f7;
	--obs-text-muted: #9ca3af;
	--obs-border-soft: #272b36;
	--obs-highlight: #facc6b;
	--obs-body: 1.8rem;
	--obs-h2: 2.2rem;
	--obs-crown: 3.5rem;
	background: radial-gradient(circle at top, #141824 0%, #05060a 55%, #000000 100%);
	color: var(--obs-text-main);
}

body.observatory .site-content,
body.observatory .gh-main,
body.observatory .dl-observatory-page,
body.observatory .dl-observatory-body {
	background: transparent;
	color: var(--obs-text-main);
}

body.observatory .obs-shell a,
body.observatory .dl-observatory-doc a {
	color: var(--obs-accent-soft);
	text-decoration: none;
}

body.observatory .obs-shell a:hover,
body.observatory .dl-observatory-doc a:hover {
	color: var(--obs-highlight);
	text-decoration: underline;
}

.obs-shell {
	max-width: 960px;
	margin: 0 auto;
	padding: 3rem 1.5rem 4rem;
}

body.observatory .dl-observatory-page .dl-institute-crown,
body.observatory .obs-header {
	border-bottom: 1px solid var(--obs-border-soft);
	padding-bottom: 1.5rem;
	margin-bottom: 2rem;
	background: transparent;
}

body.observatory .dl-observatory-page .dl-institute-crown h1,
.obs-title {
	font-size: var(--obs-crown);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

body.observatory .dl-observatory-page .dl-institute-crown .page-subtitle,
.obs-subtitle {
	font-size: var(--obs-body);
	text-transform: none;
	font-style: italic;
	color: var(--obs-text-muted);
	letter-spacing: 0.04em;
}

/* One document scale — same as Institute charter sections */
body.observatory .dl-observatory-doc,
body.observatory .obs-shell,
body.observatory .dl-observatory-body {
	font-size: var(--obs-body);
	line-height: 1.7;
	color: var(--obs-text-main);
}

body.observatory .dl-observatory-doc p,
body.observatory .dl-observatory-doc li,
body.observatory .obs-shell p,
body.observatory .obs-shell li {
	font-size: var(--obs-body);
	line-height: 1.7;
	color: var(--obs-text-main);
}

body.observatory .dl-observatory-doc h2,
body.observatory .dl-observatory-doc h3,
body.observatory .dl-observatory-doc .glyph-header,
body.observatory .obs-crisis-section-title {
	font-size: var(--obs-h2);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin: 3.2rem 0 1.2rem;
	color: var(--dl-heading, #f5f5f7);
}

.obs-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1.5rem;
	margin-top: 2rem;
}

.obs-card {
	background: linear-gradient(145deg, #10131a, #05060a);
	border: 1px solid var(--obs-border-soft);
	border-radius: 0.75rem;
	padding: 1.25rem 1.4rem;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
	position: relative;
	overflow: hidden;
	display: block;
	color: inherit;
	text-decoration: none;
}

a.obs-card:hover {
	text-decoration: none;
	color: inherit;
}

.obs-card > h2,
.obs-card .obs-card-title,
.obs-card .glyph-header {
	font-size: var(--obs-h2);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin: 0.35rem 0 0.8rem;
	color: var(--dl-heading, #f5f5f7);
}

.obs-card p,
.obs-card li {
	font-size: var(--obs-body);
	line-height: 1.7;
	color: var(--obs-text-main);
	margin: 0;
}

.obs-card .glyph {
	color: var(--obs-highlight);
}

.obs-card.ai-panic {
	border-color: #e35b5b;
}

.obs-card.ai-panic::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at top right, rgba(227, 91, 91, 0.18), transparent 60%);
	pointer-events: none;
}

.obs-card.idiocracy {
	border-color: #facc6b;
}

.obs-card.idiocracy::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at bottom left, rgba(250, 204, 107, 0.18), transparent 60%);
	pointer-events: none;
}

.obs-card.pandemic {
	border-color: #4ade80;
}

.obs-card.pandemic::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at center, rgba(74, 222, 128, 0.16), transparent 65%);
	pointer-events: none;
}

.obs-card.climate-spirals {
	border-color: #5ec8d8;
}

.obs-card.climate-spirals::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at top left, rgba(94, 200, 216, 0.18), transparent 60%);
	pointer-events: none;
}

.obs-card.economic-implosions {
	border-color: #d4a017;
}

.obs-card.economic-implosions::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at bottom right, rgba(212, 160, 23, 0.18), transparent 60%);
	pointer-events: none;
}

.obs-card.cosmic-anomalies {
	border-color: #a78bfa;
}

.obs-card.cosmic-anomalies::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at center, rgba(167, 139, 250, 0.18), transparent 65%);
	pointer-events: none;
}

.obs-card .glyph,
.dl-observatory-wing-glyph .glyph {
	white-space: nowrap;
}

.obs-crisis {
	margin-top: 2.5rem;
	border-top: 1px solid var(--obs-border-soft);
	padding-top: 2rem;
}

.obs-crisis-section {
	margin-bottom: 2rem;
}

.obs-crisis-section-title {
	font-size: var(--obs-h2);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin: 0 0 1.2rem;
	color: var(--dl-heading, #f5f5f7);
}

.obs-crisis-section-body,
.obs-crisis-section-body p,
.obs-crisis-section-body li {
	font-size: var(--obs-body);
	line-height: 1.7;
	color: var(--obs-text-main);
}

.obs-crisis-section-body p {
	margin: 0 0 1.2rem;
}

.obs-crisis-section-body p:last-child {
	margin-bottom: 0;
}

.obs-crisis-section-body ul {
	list-style: disc;
	padding-left: 2.4rem;
	margin: 0 0 1.2rem;
}

.obs-crisis-bullet {
	font-size: var(--obs-body);
	font-weight: 400;
	color: var(--obs-text-main);
	margin-bottom: 0.6rem;
}

.obs-spine {
	margin-top: 3rem;
	padding: 1.5rem 1.4rem;
	border-radius: 0.75rem;
	border: 1px dashed var(--obs-border-soft);
	background: rgba(15, 23, 42, 0.6);
}

.obs-spine h2,
.obs-spine .glyph-header {
	font-size: var(--obs-h2);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 1.2rem;
	color: var(--dl-heading, #f5f5f7);
}

.obs-spine ul,
.obs-spine ol {
	padding-left: 2.4rem;
	margin: 0 0 1.2rem;
}

.obs-spine li {
	margin-bottom: 0.6rem;
	font-size: var(--obs-body);
	color: var(--obs-text-main);
}

body.observatory-ai-panic .obs-shell {
	box-shadow: inset 0 2px 0 #e35b5b;
}

body.observatory-world-idiocracy .obs-shell,
body.observatory-political-clowning .obs-shell,
body.observatory-mass-delusion .obs-shell,
body.observatory-institutional-chaos .obs-shell,
body.observatory-the-fool-ascendant .obs-shell {
	box-shadow: inset 0 2px 0 #facc6b;
}

body.observatory-pandemic-bio-risk .obs-shell {
	box-shadow: inset 0 2px 0 #4ade80;
}

body.observatory-ai-containment-panic .obs-shell,
body.observatory-the-current-ai-panic .obs-shell,
body.observatory-signal-dispatch .obs-shell,
body.observatory-damage-control .obs-shell,
body.observatory-mythic-interpretation .obs-shell,
body.observatory-infographic .obs-shell,
body.observatory-the-cognitive-inversion-epoch .obs-shell,
body.observatory-the-machines-sense-of-humor .obs-shell,
body.observatory-the-irony-of-survival .obs-shell,
body.observatory-the-baltar-protocol .obs-shell {
	box-shadow: inset 0 2px 0 #e35b5b;
}

.obs-suite-nav {
	margin: 0 0 2rem;
	font-size: 1.6rem;
	color: var(--obs-text-muted);
	letter-spacing: 0.02em;
	line-height: 1.7;
}

.obs-wid-class {
	margin-top: 0.2rem;
}

body.observatory .glyph-header > .glyph,
body.observatory .glyph-divider > .glyph {
	white-space: nowrap;
}

.obs-sequence-nav {
	margin: 2rem 0 0;
}

.obs-memo {
	margin: 0 0 1.75rem;
	padding: 1.15rem 1.25rem;
	border: 1px solid var(--obs-border-soft);
	border-left: 3px solid var(--obs-highlight);
	border-radius: 0.5rem;
	background: rgba(16, 19, 26, 0.7);
}

.obs-memo-subject {
	margin-top: 0;
	font-size: var(--obs-body);
	color: var(--obs-accent-soft);
}

.obs-infographic {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1.25rem;
	margin: 1.5rem 0 2rem;
}

.obs-infographic > section {
	padding: 1.1rem 1.2rem;
	border: 1px solid var(--obs-border-soft);
	border-radius: 0.6rem;
	background: linear-gradient(145deg, #10131a, #05060a);
}

.obs-infographic h2,
.obs-infographic .glyph-header {
	margin-top: 0;
	font-size: var(--obs-h2);
}

.obs-infographic p,
.obs-infographic li {
	font-size: var(--obs-body);
}

.obs-dispatch p {
	max-width: 40rem;
}