:root {
	--bg: #0b0c10;
	--panel: #111319;
	--muted: #aab2bf;
	--text: #e6edf3;
	--accent: #8be9fd;
	--danger: #ff6b6b;
	--line: #2a2f3a;
	--green: #50fa7b;
	--header-h: 48px;
	--footer-h: 36px;
}
/* When there is no footer (no visible pages), collapse reserved space */
body.no-footer { --footer-h: 0px; }

* { box-sizing: border-box; }
html, body {
	margin: 0;
	padding: 0;
	background: var(--bg);
	color: var(--text);
	font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
	line-height: 1.5;
	scroll-behavior: smooth;
}
/* Prevent layout shift when page scrollbar appears/disappears during filtering */
html { overflow-y: scroll; scrollbar-gutter: stable; }
@media (prefers-reduced-motion: reduce) {
	html, body { scroll-behavior: auto; }
}
/* Reserve space for fixed header and footer */
body { padding-bottom: var(--footer-h); padding-top: var(--header-h); }
/* In admin mode, no public header/footer occupy space */
body.admin-mode { padding-top: 0; padding-bottom: 0; }
body.admin-mode .container { padding-top: 0; }

.container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 16px;
}

/* Layout with sidebar */
.layout {
    display: grid;
    grid-template-columns: 220px 1fr 220px;
    gap: 16px;
}
/* With fixed sidebars, expand timeline to full center width and pad for sidebars */
@media (min-width: 841px) {
    .layout {
        grid-template-columns: 1fr; /* center only; sidebars are fixed */
        padding-left: calc(220px + 16px);
        padding-right: calc(220px + 16px);
    }
}
@media (max-width: 840px) {
	.layout {
		grid-template-columns: 1fr;
	}
	/* Hide sidebars entirely on mobile */
	.sidebar, .sidebar-right { display: none !important; }
	/* Ensure no leftover reserved padding from desktop layout */
	.layout { padding-left: 12px; padding-right: 12px; }
}
.sidebar {
    position: fixed;
    top: calc(var(--header-h) + 8px);
    width: 220px;
    left: max(16px, calc((100vw - 1280px) / 2 + 16px));
    align-self: start;
}
.sidebar-right {
    position: fixed;
    top: calc(var(--header-h) + 8px);
    width: 220px;
    right: max(16px, calc((100vw - 1280px) / 2 + 16px));
    align-self: start;
}
/* Right sidebar sections (streamers/tags): JS will set precise max-heights per section */
.sidebar-right .sidebar-inner { max-height: none; overflow: auto; }
.sidebar-inner {
    position: static;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 12px;
    overflow-y: auto; /* vertical scroll within max-height set by JS */
    overflow-x: hidden; /* prevent horizontal scrollbar from long items */
    /* bottom padding matches top */
    padding-bottom: 12px;
}
.sidebar-title {
	margin: 0 0 8px 0;
	font-size: 16px;
	color: var(--muted);
}
.sidebar-title-row { display: flex; align-items: center; justify-content: space-between; margin: 0 0 8px 0; }
.sidebar-clear {
	background: transparent;
	border: 1px solid var(--line);
	color: var(--muted);
	border-radius: 8px;
	padding: 4px 8px;
	cursor: pointer;
	font-size: 12px;
}
.sidebar-clear:hover { color: var(--text); border-color: #343a46; }
.month-nav {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 6px;
}
.month-nav a {
	color: var(--text);
	text-decoration: none;
}
.month-nav a:hover { color: var(--accent); }
.month-label {
	color: var(--text);
	font-weight: 600;
}
.month-nav .count {
	color: var(--muted);
	font-size: 12px;
	margin-left: 6px;
}
.month-nav .empty { color: var(--muted); }
.streamer-filter {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px;
}
.streamer-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: auto;
    max-width: 75%;
    padding: 8px 10px;
    text-decoration: none;
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #0f111a;
}
.streamer-pill:hover { border-color: #343a46; }
.streamer-pill.active { background: #1a1d2a; border-color: var(--accent); }
.streamer-icon { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.streamer-name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pill-row { display: flex; align-items: center; gap: 6px; }
.pill-count { color: var(--muted); font-size: 12px; line-height: 1; }
.pill-count--streamer { font-size: 12px; }
.pill-count--tag { font-size: 10px; position: relative; top: -4px; margin-left: 1px; vertical-align: super; }
/* Make tag counts sit tighter to their pills */
.tag-filter .pill-row { gap: 2px; }
.pill-count--tag { top: -5px; margin-left: 0; }

/* Tags filter - compact, dim, square chips that can share a line */
.tag-filter {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.tag-filter li { margin: 0; padding: 0; }
.tag-pill {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	color: var(--muted);
	border: 1px solid var(--line);
	background: #0f111a;
	border-radius: 4px; /* squarer chips */
	padding: 2px 6px; /* compact */
	font-size: 12px; /* smaller to fit multiple per line */
	line-height: 1.2;
	max-width: 100%;
}
.tag-name {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-transform: lowercase;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	font-size: 11px;
}
.tag-pill:hover { border-color: #343a46; color: var(--text); }
.tag-pill.active {
	color: var(--text);
	border-color: var(--accent);
	background: #1a1d2a;
}

/* Nested per-event links under each month */
.event-nav {
	list-style: none;
	margin: 6px 0 8px 10px;
	padding-left: 10px;
	border-left: 1px solid var(--line);
	display: grid;
	gap: 4px;
}
.event-nav { overflow-x: hidden; }
.event-nav li { line-height: 1.3; min-width: 0; }
.event-nav a {
	color: var(--muted);
	text-decoration: none;
	font-size: 13px;
	display: block;           /* occupy full row width */
	max-width: 100%;
	width: 100%;
	white-space: nowrap;      /* keep on a single line */
	overflow: hidden;         /* prevent horizontal scroll */
	text-overflow: ellipsis;  /* cut off long text with ellipsis */
}
.event-nav a:hover { color: var(--accent); }

.site-header, .site-footer {
	background: var(--panel);
	border-bottom: 1px solid var(--line);
}
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 60;
	height: var(--header-h);
	display: flex;
	align-items: center;
}
.site-header .container {
	height: 100%;
	padding-top: 8px;
	padding-bottom: 8px;
	display: flex;
	align-items: center;
}
.header-inner {
	display: flex;
	align-items: center;
	gap: 16px;
	justify-content: space-between;
}
.site-title { font-size: 18px; margin: 0; }
.site-title a { color: var(--text); text-decoration: none; }
.site-header .site-tagline {
	margin: 0;
	color: var(--muted);
	font-size: 12px;
	line-height: 1.2;
	flex: 1 1 auto;
	min-width: 0; /* allow ellipsis in flex container */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
@media (max-width: 700px) {
	.header-inner { flex-direction: column; align-items: flex-start; gap: 6px; }
}
.site-footer { border-top: 1px solid var(--line); border-bottom: none; }
.site-footer {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 50;
	height: var(--footer-h);
	display: flex;
	align-items: center;
}
.footer-inner { font-size: 12px; }
.footer-inner .footer-list { margin: 0; display: inline-flex; align-items: center; line-height: 1; }
.footer-inner a { color: var(--muted); text-decoration: none; }
.footer-inner a:hover { color: var(--text); }
.footer-inner .social-x { display: inline-flex; align-items: center; line-height: 0; }
.footer-inner .social-x svg { width: 12px; height: 12px; display: inline-block; vertical-align: middle; position: relative; top: 2px; }

/* Even dot separators between footer items; not part of links */
.footer-inner .footer-item + .footer-item::before {
	content: " \2022 "; /* bullet dot */
	margin: 0 8px;
	color: var(--muted);
	text-decoration: none;
	pointer-events: none;
}
.site-title a {
	color: var(--text);
	text-decoration: none;
}
.site-tagline {
	color: var(--muted);
	margin: 6px 0 0 0;
	max-width: 70ch;
}
.site-nav a {
	margin-left: 16px;
	color: var(--muted);
	text-decoration: none;
}
.site-nav a:hover { color: var(--text); }

.section-title {
	margin: 8px 0 16px 0;
}

/* Mobile refinements */
@media (max-width: 700px) {
	/* reduce horizontal padding when sidebars stack */
	.layout { padding-left: 12px; padding-right: 12px; }
	.container { padding: 12px; }
	/* card compaction */
	.timeline-card { padding: 12px; }
	/* stack title above meta for narrow viewports */
	.timeline-card-header { display: grid; grid-template-columns: 1fr; row-gap: 6px; }
	.timeline-card-header .timeline-meta { justify-content: flex-start; }
	/* prevent long pills from overflowing */
	.streamer-pill, .tag-pill { font-size: 13px; }
	/* keep month headers tight */
	.timeline-month { margin-top: 8px; }
}

.flash-list {
	list-style: none;
	margin: 8px 0;
	padding: 0;
}
.flash {
	padding: 10px 12px;
	border-radius: 8px;
	background: #1e2130;
}
.flash-container { padding: 6px 0; }
.flash-success { border: 1px solid var(--green); }
.flash-error { border: 1px solid var(--danger); }

/* Timeline */
.timeline {
	padding: 0 0 24px 0;
}
.timeline-month {
	margin: 12px 0;
	color: var(--muted);
	font-weight: 600;
	letter-spacing: 0.2px;
	position: sticky;
	top: var(--header-h);
	z-index: 3;
	background: linear-gradient(var(--bg), rgba(11, 12, 16, 0.85));
	backdrop-filter: blur(2px);
	border-bottom: 1px solid var(--line);
	padding: 8px 6px;
}
.timeline-month:first-of-type {
	margin-top: 0;
}
.timeline-list {
	position: relative;
	margin-left: 12px;
}
.timeline-list::before {
	content: "";
	position: absolute;
	left: 12px;
	top: 0;
	bottom: 0;
	width: 2px;
	background: var(--line);
	z-index: 0;
}
/* Timeline CTA */
.timeline-cta {
	margin: 6px 0 16px 0;
	font-size: 20px;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	color: var(--text);
	text-align: center;
	width: 100%;
}
.timeline-cta::before,
.timeline-cta::after { content: ""; height: 1px; background: var(--line); flex: 1 1 0; min-width: 24px; }
.timeline-cta::before { margin-right: 12px; }
.timeline-cta::after { margin-left: 12px; }
.timeline-cta .cta-x { color: var(--text); text-decoration: none; display: inline-flex; align-items: center; }
.timeline-cta .cta-x:hover { color: var(--muted); }
.timeline-cta .cta-x svg { width: 20px; height: 20px; position: relative; top: 1px; margin-left: 6px; }
.timeline-item {
	display: grid;
	grid-template-columns: 24px 1fr;
	gap: 12px;
	margin-bottom: 24px;
	position: relative;
}
.timeline-dot { width: 20px; height: 20px; margin-left: 2px; margin-top: 6px; display: block; position: relative; z-index: 2; }
.timeline-dot::after { content: "🤡"; font-size: 16px; line-height: 20px; display: block; text-align: center; }
.timeline-card {
	position: relative;
	z-index: 1;
}
.timeline-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 14px;
    /* Remove transitions to avoid flicker on initial paint */
    transition: none;
    box-shadow: 0 1px 0 rgba(0,0,0,0.2);
}
.timeline-card-header {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto; /* title grows/wraps, right meta stays auto width */
	grid-template-rows: auto;                   /* single row; right meta stacks internally */
	column-gap: 12px;
	align-items: start;
	margin-bottom: 8px;
}
.timeline-streamer { margin: 2px 0 6px 0; }
.timeline-meta { grid-column: 2; display: flex; flex-direction: column; align-items: end; gap: 2px; }
.streamer-inline { color: var(--text); font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.streamer-inline-icon { width: 16px; height: 16px; border-radius: 50%; object-fit: cover; }
.event-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px 0; justify-content: flex-end; }
.event-tags .tag-chip {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: #0f111a;
	padding: 1px 6px;
}
.event-tags .tag-name {
	text-transform: lowercase;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	font-size: 11px;
	color: var(--muted);
}
.timeline-card:hover {
    /* Keep position stable on hover; only accentuate shadow */
    transform: none;
    box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}
.timeline-title {
	margin: 0;
	font-size: 18px;
	grid-column: 1;      /* first column */
}
.timeline-title a {
	color: var(--text);
	text-decoration: none;
	/* allow wrapping to multiple lines without forcing date to wrap */
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
	display: inline;
}
.timeline-title a:hover { text-decoration: none; }
.timeline-date {
	color: var(--muted);
	font-size: 14px;
	white-space: nowrap; /* keep date on a single line */
	align-self: start;
}
.timeline-video { margin: 8px 0 8px 0; }
.timeline-text { color: var(--muted); margin: 6px 0; }
.timeline-link a { color: var(--accent); text-decoration: none; }
.timeline-link a:hover { text-decoration: none; }
.timeline-original {
	font-size: 12px;
	color: var(--muted);
	margin: 6px 0 0 0;
	overflow-wrap: anywhere;
}
.mono-url {
	color: var(--muted);
	text-decoration: none;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.mono-url:hover { color: var(--text); text-decoration: none; }

/* Ensure a consistent bottom space inside each card without affecting other elements */
.timeline-body { padding-bottom: 0; }
.timeline-body > :last-child { margin-bottom: 0; }

/* Actions row: Copy Link + original clip id inline */
.body-actions {
	display: flex;
	align-items: center;   /* vertical centering */
	gap: 10px;
	flex-wrap: wrap;
}
.timeline-original-inline {
	font-size: 12px;
	color: var(--muted);
}

.video-embed iframe, .video-embed video {
	width: 100%;
	height: 100%;
	max-width: none;
	border-radius: 8px;
	object-fit: cover;
}

/* Enforce Twitch-like 16:9 aspect for all players */
.video-embed {
	aspect-ratio: 16 / 9;
	width: 100%;
	max-width: 960px;
}

/* Event detail */
.event-header {
	margin-bottom: 12px;
}
.event-title { margin: 0 0 4px 0; }
.event-date { color: var(--muted); }
.event-video { margin: 12px 0; }
.event-permalink { color: var(--muted); }
.event-permalink a { color: var(--accent); text-decoration: none; }
.event-permalink a:hover { text-decoration: none; }

/* Admin */
.admin-header {
	display: flex;
	justify-content: space-between;
	align-items: center; /* center title and actions vertically */
}
.admin-actions-bar { display: flex; gap: 8px; align-items: center; } /* legacy */
.admin-titlebar { display: inline-flex; gap: 10px; align-items: center; }
.admin-navwrap { display: flex; justify-content: flex-end; align-items: center; }
.admin a, .admin-table a { color: var(--text); text-decoration: none; }
.admin a:visited, .admin-table a:visited { color: var(--text); }
.admin a:hover, .admin-table a:hover { color: var(--accent); text-decoration: none; }
.admin-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 8px;
	overflow: hidden;
}
.admin-table th, .admin-table td {
	border-bottom: 1px solid var(--line);
	padding: 10px 12px;
	text-align: left;
	vertical-align: middle;
}
/* Avoid inner bottom border overlapping the rounded table border */
.admin-table tbody tr:last-child td {
	border-bottom: none;
}
/* Header Actions should remain left-aligned */
.admin-table thead th:last-child { text-align: left; }
/* Make 'Created' column wide enough to avoid wrapping (3rd column) */
.admin-table th:nth-child(3),
.admin-table td:nth-child(3) {
	width: 220px;
	white-space: nowrap;
}
/* Standardize column alignment across admin tables */
.admin-table th:first-child, .admin-table td:first-child { /* ID column */
	text-align: right;
	color: var(--muted);
	width: 72px;
	white-space: nowrap;
}
.admin-table th:last-child, .admin-table td:last-child { /* Actions column */
	text-align: left;
	width: 180px;
	white-space: nowrap;
}
/* Empty-state cells should align left like main page */
.admin-table td.empty, .admin-table td.admin-empty {
	text-align: left;
	color: var(--muted);
}
/* Consistent compact buttons in admin tables */
.admin-table .button,
.admin-table .button-secondary,
.admin-table .button-danger {
	padding: 6px 10px;
	font-size: 13px;
	border-radius: 8px;
	line-height: 1.2;
}
.admin-table .button-secondary:hover { border-color: var(--accent); color: var(--text); }
.admin-table .button-danger:hover { opacity: 0.9; }

/* Admin nav */
.admin-nav {
	display: inline-flex;
	gap: 20px;
	margin: 0;
	justify-content: center;
	flex-wrap: wrap;
	padding: 8px 12px;
	border-left: 1px solid var(--line);
	border-right: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	background: var(--panel);
}
.admin-nav a {
	display: inline-block;
	padding: 8px 6px;
	font-size: 14px;
	color: var(--text);
	text-decoration: none;
	border-bottom: 2px solid transparent;
}
.admin-nav a:hover {
	color: var(--accent);
	border-bottom-color: var(--accent);
	text-decoration: none;
}
/* Admin top navigation bar sits at the very top, attached to the page */
.admin-topnav {
	position: sticky;
	top: 0;
	z-index: 80;
	background: transparent;
	border-bottom: none;
	display: flex;
	justify-content: center;
	margin: 0 0 12px 0;
	padding: 0;
}
/* Dimmer primary for admin \"New\" buttons */
.admin .button.admin-new { background: #3aa6bd; color: #ffffff; }
.admin .button.admin-new:hover { background: #349fb2; color: #ffffff; }
.admin-actions {
	display: flex;
	gap: 8px;
}
.button {
	display: inline-block;
	padding: 8px 12px;
	background: var(--accent);
	color: #ffffff;
	border: none;
	border-radius: 8px;
	text-decoration: none;
	cursor: pointer;
	font-weight: 600;
	font: inherit;
}
.button-secondary {
	background: #0f111a; /* subtle panel-like bg so it resembles primary */
	color: var(--text);
	border: 1px solid var(--line);
}
.button-secondary:hover { border-color: var(--accent); background: #141827; }
.button-danger {
	background: var(--danger);
	color: white;
}
form { margin: 0; }

/* Copy link feedback */
/* Copy link flash feedback - fade in then out */
.button-secondary.copy-lit { animation: copyFlash 900ms ease-in-out; }
.button.copy-lit { animation: copyFlashPrimary 900ms ease-in-out; }

@keyframes copyFlash {
	0% {
		background: transparent;
		color: var(--text);
	}
	20%, 80% {
		background: var(--accent);
		color: #0b0c10;
	}
	100% {
		background: transparent;
		color: var(--text);
	}
}
@keyframes copyFlashPrimary {
	0% {
		background: var(--accent);
		color: #0b0c10;
	}
	20%, 80% {
		/* keep same background; just a subtle fade handled by animation timing */
	}
	100% {
		background: var(--accent);
		color: #0b0c10;
	}
}

.form {
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 16px;
	max-width: 720px;
}
.form-field {
	display: grid;
	gap: 6px;
	margin-bottom: 12px;
}
.form-field input, .form-field textarea {
	background: #0f111a;
	color: var(--text);
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 10px 12px;
	font: inherit;
}
.form-actions {
	display: flex;
	gap: 8px;
}
.either-or-group {
	border: 1px dashed var(--line);
	border-radius: 10px;
	padding: 12px;
	margin-bottom: 12px;
	background: transparent;
}


/* Modal */
.modal {
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(0,0,0,0.6);
	z-index: 100;
	display: none;
	align-items: center;
	justify-content: center;
}
.modal.show { display: flex; }
.modal-dialog {
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 12px;
	max-width: 720px;
	width: calc(100% - 32px);
	max-height: calc(100vh - 120px);
	overflow: auto;
	box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 10px;
	border-bottom: 1px solid var(--line);
}
.modal-header h3 { margin: 0; font-size: 16px; line-height: 1.2; }
.modal-body { padding: 14px; }
.modal-close {
	background: transparent;
	border: none;
	color: var(--muted);
	font-size: 18px;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	transition: color .15s ease;
}
.modal-close:hover { color: var(--text); }