/**
 * Broadcast Script - Public skin
 * Design system: "Declassified Briefing"
 *
 * A savage comedy podcast presented as a sober intelligence dossier: bureaucratic
 * form (monospace document-control, timecoded transcript entries, hairline rules)
 * carrying savage content. One accent (oxidized stamp red). System fonts only, so
 * there are zero font downloads (Core Web Vitals). Mobile-first; every value is a
 * design token so light/dark and future re-skins are a one-place change.
 *
 * @package Broadcast_Script
 * @version 3.2.0
 */

/* ============================================================
   1. Design tokens
   ============================================================ */
:root {

	/* Palette - light ("day desk"): aged manila + typewriter ink + stamp red. */
	--bs-paper:        #e9e2d0;
	--bs-paper-raised: #f3eee1;
	--bs-paper-sunk:   #e1d8c2;
	--bs-ink:          #1c1a17;
	--bs-ink-2:        #46413a;
	--bs-ink-3:        #5c5649;
	--bs-rule:         #c9bfa8;
	--bs-rule-strong:  #b3a888;
	--bs-stamp:        #a02c1c;
	--bs-stamp-ink:    #8a2417;
	--bs-stamp-wash:   rgba(160, 44, 28, 0.08);
	--bs-highlight:    #b8860b;

	/* Type: system stacks only. Identity comes from weight/tracking/case. */
	--bs-font-mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", menlo, consolas, "Liberation Mono", monospace;
	--bs-font-sans: -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif;

	/* Fluid type scale (min .. max across the viewport). */
	--bs-text-2xs:  clamp(0.66rem, 0.63rem + 0.15vw, 0.72rem);
	--bs-text-xs:   clamp(0.74rem, 0.70rem + 0.20vw, 0.82rem);
	--bs-text-sm:   clamp(0.84rem, 0.80rem + 0.20vw, 0.92rem);
	--bs-text-base: clamp(1.02rem, 0.97rem + 0.30vw, 1.14rem);
	--bs-text-lg:   clamp(1.16rem, 1.05rem + 0.55vw, 1.4rem);
	--bs-text-xl:   clamp(1.4rem, 1.15rem + 1.1vw, 1.95rem);
	--bs-text-2xl:  clamp(1.8rem, 1.35rem + 2.1vw, 2.9rem);

	--bs-leading-tight: 1.15;
	--bs-leading-snug:  1.35;
	--bs-leading-body:  1.68;

	/* Spacing scale. */
	--bs-space-1: 0.25rem;
	--bs-space-2: 0.5rem;
	--bs-space-3: 0.75rem;
	--bs-space-4: 1rem;
	--bs-space-5: 1.5rem;
	--bs-space-6: 2rem;
	--bs-space-7: 3rem;
	--bs-space-8: 4rem;

	--bs-measure: 68ch;        /* readable line length for body prose */
	--bs-radius: 3px;          /* dossier: near-square, not pill */
	--bs-border: 1px solid var(--bs-rule);
	--bs-border-strong: 1.5px solid var(--bs-ink);
	--bs-shadow: 0 1px 0 var(--bs-rule-strong), 0 2px 10px rgba(28, 26, 23, 0.06);

	--bs-transition: 160ms ease;
}

@media (prefers-color-scheme: dark) {

	:root {

		/* "Night desk": carbon-copy dark, warm off-white ink, brighter stamp. */
		--bs-paper:        #141210;
		--bs-paper-raised: #1e1a16;
		--bs-paper-sunk:   #100e0c;
		--bs-ink:          #ece4d2;
		--bs-ink-2:        #c1b7a3;
		--bs-ink-3:        #9a917e;
		--bs-rule:         #38332a;
		--bs-rule-strong:  #4b4436;
		--bs-stamp:        #d4553f;
		--bs-stamp-ink:    #e07a63;
		--bs-stamp-wash:   rgba(212, 85, 63, 0.12);
		--bs-highlight:    #d8a22a;
		--bs-shadow: 0 1px 0 var(--bs-rule-strong), 0 2px 12px rgba(0, 0, 0, 0.4);
	}
}

/* ============================================================
   2. Container + shared primitives
   ============================================================ */
.ssg-script-container,
.ssg-archive-grid {
	box-sizing: border-box;
	max-width: 52rem;
	margin-inline: auto;
	padding: var(--bs-space-5) var(--bs-space-4) var(--bs-space-8);
	color: var(--bs-ink);
	font-family: var(--bs-font-sans);
	font-size: var(--bs-text-base);
	line-height: var(--bs-leading-body);
}

.ssg-script-container *,
.ssg-script-container *::before,
.ssg-script-container *::after {
	box-sizing: border-box;
}

.ssg-eyebrow,
.ssg-segment-time,
.ssg-segment-number,
.ssg-script-meta,
.ssg-toc-title,
.ssg-share-label {
	font-family: var(--bs-font-mono);
}

/* Screen-reader-only utility (used by the JS announcer). */
.ssg-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ============================================================
   3. Skip link + reading progress (body-level, JS-driven)
   ============================================================ */
.ssg-skip-to-content {
	position: fixed;
	top: -100%;
	left: var(--bs-space-4);
	z-index: 100000;
	padding: var(--bs-space-3) var(--bs-space-4);
	background: var(--bs-ink);
	color: var(--bs-paper);
	font-family: var(--bs-font-mono);
	font-size: var(--bs-text-sm);
	text-decoration: none;
	border-radius: var(--bs-radius);
	transition: top var(--bs-transition);
}

.ssg-skip-to-content:focus {
	top: var(--bs-space-4);
}

.ssg-reading-progress {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: transparent;
	z-index: 99998;
	pointer-events: none;
}

.ssg-reading-progress-bar {
	height: 100%;
	width: 0;
	background: var(--bs-stamp);
	transition: width 80ms linear;
}

/* ============================================================
   4. Header - the document-control masthead
   ============================================================ */
.ssg-script-header {
	margin-bottom: var(--bs-space-6);
	padding-bottom: var(--bs-space-5);
	border-bottom: var(--bs-border-strong);
}

.ssg-eyebrow {
	margin: 0 0 var(--bs-space-3);
	font-size: var(--bs-text-xs);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--bs-stamp-ink);
	font-weight: 600;
}

.ssg-eyebrow-mark {
	color: var(--bs-ink-3);
}

.ssg-script-title {
	margin: 0 0 var(--bs-space-4);
	font-family: var(--bs-font-sans);
	font-size: var(--bs-text-2xl);
	font-weight: 800;
	line-height: var(--bs-leading-tight);
	letter-spacing: -0.015em;
	color: var(--bs-ink);
	text-wrap: balance;
}

/* Meta row rendered as a monospace document-control strip. */
.ssg-script-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bs-space-2) var(--bs-space-5);
	font-size: var(--bs-text-xs);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--bs-ink-2);
}

.ssg-script-meta-item {
	display: inline-flex;
	align-items: center;
	gap: var(--bs-space-2);
}

.ssg-script-meta-icon,
.ssg-reading-time-icon {
	font-size: 1em;
	opacity: 0.75;
	filter: grayscale(1);
}

.ssg-script-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bs-space-2);
	margin-top: var(--bs-space-4);
}

.ssg-tag {
	display: inline-block;
	padding: 0.15em 0.6em;
	font-family: var(--bs-font-mono);
	font-size: var(--bs-text-2xs);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--bs-ink-2);
	background: var(--bs-paper-sunk);
	border: var(--bs-border);
	border-radius: var(--bs-radius);
}

/* ============================================================
   5. Table of contents - the "index"
   ============================================================ */
.ssg-toc {
	margin-bottom: var(--bs-space-6);
	padding: var(--bs-space-4) var(--bs-space-5);
	background: var(--bs-paper-raised);
	border: var(--bs-border);
	border-left: 3px solid var(--bs-stamp);
	border-radius: var(--bs-radius);
}

.ssg-toc-title {
	margin: 0 0 var(--bs-space-3);
	font-size: var(--bs-text-2xs);
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--bs-ink-3);
}

.ssg-toc-list {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: ssg-toc;
}

.ssg-toc-item {
	counter-increment: ssg-toc;
	margin: 0;
}

.ssg-toc-item + .ssg-toc-item {
	border-top: 1px dotted var(--bs-rule);
}

.ssg-toc-item-nested {
	padding-left: var(--bs-space-4);
}

.ssg-toc-link {
	display: flex;
	gap: var(--bs-space-3);
	padding: var(--bs-space-2) 0;
	color: var(--bs-ink);
	text-decoration: none;
	font-size: var(--bs-text-sm);
	transition: color var(--bs-transition);
}

.ssg-toc-link::before {
	content: counter(ssg-toc, decimal-leading-zero);
	flex: none;
	font-family: var(--bs-font-mono);
	font-size: var(--bs-text-2xs);
	color: var(--bs-ink-3);
}

.ssg-toc-link:hover,
.ssg-toc-link.active {
	color: var(--bs-stamp-ink);
}

.ssg-toc-link.active::before {
	color: var(--bs-stamp);
}

/* ============================================================
   6. Share + print bar
   ============================================================ */
.ssg-share-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bs-space-2);
	margin-block: var(--bs-space-5);
	padding-block: var(--bs-space-3);
	border-top: var(--bs-border);
	border-bottom: var(--bs-border);
}

.ssg-share-label {
	margin-right: var(--bs-space-2);
	font-size: var(--bs-text-2xs);
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--bs-ink-3);
}

.ssg-share-btn,
.ssg-print-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--bs-space-2);
	min-height: 2.5rem;
	min-width: 2.5rem;
	justify-content: center;
	padding: var(--bs-space-2);
	color: var(--bs-ink-2);
	background: var(--bs-paper-raised);
	border: var(--bs-border);
	border-radius: var(--bs-radius);
	font-family: var(--bs-font-mono);
	font-size: var(--bs-text-xs);
	cursor: pointer;
	transition: color var(--bs-transition), background var(--bs-transition), border-color var(--bs-transition);
}

.ssg-print-btn {
	padding-inline: var(--bs-space-3);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.ssg-share-btn svg,
.ssg-print-btn svg {
	width: 1.05rem;
	height: 1.05rem;
	fill: currentcolor;
}

.ssg-share-btn:hover,
.ssg-print-btn:hover {
	color: var(--bs-paper-raised);
	background: var(--bs-stamp);
	border-color: var(--bs-stamp);
}

/* ============================================================
   7. Segments - timecoded transcript entries
   ============================================================ */
.ssg-script-content {
	display: flex;
	flex-direction: column;
	gap: var(--bs-space-5);
}

.ssg-script-content:focus {
	outline: none;
}

.ssg-segment {
	padding: var(--bs-space-5);
	background: var(--bs-paper-raised);
	border: var(--bs-border);
	border-radius: var(--bs-radius);
	box-shadow: var(--bs-shadow);
	scroll-margin-top: 5rem;
}

.ssg-segment-header {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: baseline;
	gap: var(--bs-space-2) var(--bs-space-3);
	margin-bottom: var(--bs-space-4);
	padding-bottom: var(--bs-space-3);
	border-bottom: 1px solid var(--bs-rule);
}

.ssg-segment-number {
	grid-row: span 2;
	align-self: center;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.4rem;
	padding: var(--bs-space-1) var(--bs-space-2);
	font-family: var(--bs-font-mono);
	font-size: var(--bs-text-sm);
	font-weight: 700;
	color: var(--bs-paper-raised);
	background: var(--bs-ink);
	border-radius: var(--bs-radius);
}

.ssg-segment-title {
	grid-column: 2;
	margin: 0;
	font-family: var(--bs-font-sans);
	font-size: var(--bs-text-lg);
	font-weight: 800;
	line-height: var(--bs-leading-snug);
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--bs-ink);
}

.ssg-segment-time {
	grid-column: 2;
	font-size: var(--bs-text-2xs);
	letter-spacing: 0.12em;
	color: var(--bs-stamp-ink);
}

.ssg-segment-time::before {
	content: "\005B"; /* [ */
}

.ssg-segment-time::after {
	content: "\005D"; /* ] */
}

/* Per-type left rule - a single accent at varying weight, not a rainbow. */
.ssg-segment-type-cold-open,
.ssg-segment-type-monologue { border-left: 3px solid var(--bs-stamp); }

.ssg-segment-type-bottom-line,
.ssg-segment-type-closing { border-left: 3px solid var(--bs-ink); }

.ssg-segment-type-situation,
.ssg-segment-type-assessment,
.ssg-segment-type-actors,
.ssg-segment-type-spin,
.ssg-segment-type-effects,
.ssg-segment-type-analysis,
.ssg-segment-type-online,
.ssg-segment-type-translation,
.ssg-segment-type-future { border-left: 3px solid var(--bs-rule-strong); }

/* Segment body prose. */
.ssg-segment-content {
	font-size: var(--bs-text-base);
	line-height: var(--bs-leading-body);
	color: var(--bs-ink);
	max-width: var(--bs-measure);
}

.ssg-segment-content > * + * {
	margin-top: var(--bs-space-4);
}

.ssg-segment-content p { margin: 0; }

.ssg-segment-content strong { font-weight: 700; }

.ssg-segment-content a {
	color: var(--bs-stamp-ink);
	text-underline-offset: 0.15em;
	text-decoration-thickness: 1px;
}

.ssg-segment-content a:hover { text-decoration-thickness: 2px; }

.ssg-segment-content blockquote {
	margin: 0;
	padding: var(--bs-space-2) var(--bs-space-4);
	border-left: 3px solid var(--bs-rule-strong);
	color: var(--bs-ink-2);
	font-style: normal;
}

.ssg-segment-content ul,
.ssg-segment-content ol {
	margin: 0;
	padding-left: var(--bs-space-5);
}

.ssg-segment-content li + li { margin-top: var(--bs-space-2); }

/* Two-voice conversation: host B paragraphs get a subtle offset. */
.ssg-segment-content [data-host="b"] {
	padding-left: var(--bs-space-3);
	border-left: 2px solid var(--bs-stamp-wash);
	color: var(--bs-ink-2);
}

/* Per-segment audio players. */
.ssg-segment-audio {
	display: flex;
	flex-direction: column;
	gap: var(--bs-space-2);
	margin-bottom: var(--bs-space-4);
	padding: var(--bs-space-3);
	background: var(--bs-paper-sunk);
	border: var(--bs-border);
	border-radius: var(--bs-radius);
}

.ssg-segment-audio audio {
	width: 100%;
	height: 2.25rem;
}

/* ============================================================
   8. Companion blog section (SEO/voice-search answer nodes)
   ============================================================ */
.ssg-companion-blog-tldr {
	margin-top: var(--bs-space-5);
	padding: var(--bs-space-4);
	background: var(--bs-stamp-wash);
	border-left: 3px solid var(--bs-stamp);
	border-radius: var(--bs-radius);
	font-size: var(--bs-text-base);
}

.ssg-companion-blog-section-body { margin-top: var(--bs-space-3); }

/* ============================================================
   9. Footer + prev/next navigation
   ============================================================ */
.ssg-script-footer {
	margin-top: var(--bs-space-7);
	padding-top: var(--bs-space-5);
	border-top: var(--bs-border-strong);
}

.ssg-script-description {
	margin-bottom: var(--bs-space-5);
}

.ssg-text-muted {
	margin: 0;
	color: var(--bs-ink-2);
	font-size: var(--bs-text-sm);
}

.ssg-script-nav-links {
	display: grid;
	gap: var(--bs-space-3);
}

.ssg-script-nav-link {
	display: flex;
	flex-direction: column;
	gap: var(--bs-space-1);
	padding: var(--bs-space-4);
	text-decoration: none;
	background: var(--bs-paper-raised);
	border: var(--bs-border);
	border-radius: var(--bs-radius);
	transition: border-color var(--bs-transition), transform var(--bs-transition);
}

.ssg-script-nav-link:hover {
	border-color: var(--bs-stamp);
	transform: translateY(-1px);
}

.ssg-script-nav-label {
	font-family: var(--bs-font-mono);
	font-size: var(--bs-text-2xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bs-ink-3);
}

.ssg-script-nav-next { text-align: right; }

.ssg-script-nav-title {
	font-weight: 700;
	color: var(--bs-ink);
}

/* ============================================================
   10. Archive grid + cards
   ============================================================ */
.ssg-archive-grid {
	display: grid;
	gap: var(--bs-space-5);
}

.ssg-archive-card {
	padding: var(--bs-space-5);
	background: var(--bs-paper-raised);
	border: var(--bs-border);
	border-radius: var(--bs-radius);
	transition: border-color var(--bs-transition), transform var(--bs-transition);
}

.ssg-archive-card:hover {
	border-color: var(--bs-stamp);
	transform: translateY(-2px);
}

.ssg-archive-card-title {
	margin: 0 0 var(--bs-space-3);
	font-size: var(--bs-text-lg);
	font-weight: 800;
	line-height: var(--bs-leading-snug);
}

.ssg-archive-card-title a {
	color: var(--bs-ink);
	text-decoration: none;
}

.ssg-archive-card-title a:hover { color: var(--bs-stamp-ink); }

.ssg-archive-card-excerpt {
	margin: 0 0 var(--bs-space-3);
	color: var(--bs-ink-2);
}

.ssg-archive-card-meta {
	display: flex;
	gap: var(--bs-space-2);
	font-family: var(--bs-font-mono);
	font-size: var(--bs-text-2xs);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--bs-ink-3);
}

.ssg-no-scripts {
	padding: var(--bs-space-6);
	text-align: center;
	color: var(--bs-ink-2);
}

/* ============================================================
   11. Toast notification (JS copy feedback)
   ============================================================ */
.ssg-notification {
	position: fixed;
	bottom: var(--bs-space-5);
	left: 50%;
	transform: translateX(-50%);
	z-index: 99999;
	padding: var(--bs-space-3) var(--bs-space-5);
	color: var(--bs-paper-raised);
	font-family: var(--bs-font-mono);
	font-size: var(--bs-text-sm);
	border-radius: var(--bs-radius);
	box-shadow: 0 4px 18px rgba(28, 26, 23, 0.25);
	animation: ssgFadeIn 0.3s ease-out;
}

.ssg-notification-success { background: #2f6b3a; }

.ssg-notification-error   { background: var(--bs-stamp); }

@keyframes ssgFadeIn {

	from { opacity: 0; transform: translate(-50%, 10px); }

	to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ============================================================
   12. Focus visibility (keyboard) - brand-consistent, high-contrast
   ============================================================ */
.ssg-script-container a:focus-visible,
.ssg-script-container button:focus-visible,
.ssg-archive-grid a:focus-visible,
.ssg-skip-to-content:focus-visible,
#ssg-main-content:focus-visible {
	outline: 3px solid var(--bs-stamp);
	outline-offset: 2px;
	border-radius: 2px;
}

/* ============================================================
   13. Responsive - mobile-first; enhance upward
   ============================================================ */
@media screen and (min-width: 48em) {

	.ssg-script-container,
	.ssg-archive-grid {
		padding-inline: var(--bs-space-6);
	}

	.ssg-segment { padding: var(--bs-space-6); }

	.ssg-script-nav-links {
		grid-template-columns: 1fr 1fr;
	}

	.ssg-archive-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (min-width: 75em) {

	.ssg-archive-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ============================================================
   14. Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {

	.ssg-script-container *,
	.ssg-reading-progress-bar,
	.ssg-notification {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}
}

/* ============================================================
   15. High contrast / forced colors
   ============================================================ */
@media (prefers-contrast: more) {

	:root {
		--bs-ink-2: var(--bs-ink);
		--bs-ink-3: var(--bs-ink);
		--bs-rule: var(--bs-ink);
	}

	.ssg-segment,
	.ssg-toc,
	.ssg-share-btn,
	.ssg-print-btn { border-width: 1.5px; }
}

@media (forced-colors: active) {

	.ssg-segment-number { border: 1px solid; }

	.ssg-reading-progress-bar { background: Highlight; }

	.ssg-share-btn:hover,
	.ssg-print-btn:hover { forced-color-adjust: none; }
}

/* ============================================================
   16. Print - clean dossier printout
   ============================================================ */
@media print {

	.ssg-reading-progress,
	.ssg-skip-to-content,
	.ssg-share-bar,
	.ssg-toc,
	.ssg-script-nav,
	.ssg-segment-audio,
	.ssg-notification { display: none !important; }

	.ssg-script-container {
		max-width: none;
		padding: 0;
		color: #000;
		font-size: 11pt;
	}

	.ssg-segment {
		background: none;
		border: none;
		border-left: 2pt solid #000;
		box-shadow: none;
		padding: 0 0 0 12pt;
		break-inside: avoid;
	}

	.ssg-segment-number { background: none; color: #000; border: 1pt solid #000; }

	.ssg-script-title { color: #000; }

	a { color: #000; text-decoration: underline; }
}