/* Lolarchiver redesign: top bar + left nav (identical to the main page) + results table.
   Loaded AFTER the existing stylesheets so it overrides them. */

:root {
	--ink: #1c1c1c;
	--ink-soft: #545454;
	--ink-faint: #7f8896;
	--deep: #1c2f59;
	--deep2: #5e728d;
	--steel: #4682b4;
	--accent-deep: #14539a;
	--line: #dcdfe4;
	--line-strong: #b9bec7;
	--panel: #ffffff;
	--r-sm: 3px;
	--r-md: 5px;
	--mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	--sans: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}

/* ---------------- Top bar ---------------- */
.lz-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 8px 22px;
	border-bottom: 1px solid var(--line);
	background: rgba(246, 247, 249, 0.9);
	backdrop-filter: blur(4px);
	position: sticky;
	top: 0;
	z-index: 30;
}
.lz-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.lz-brand:hover, .lz-brand:focus, .lz-brand:hover b, .lz-brand:hover .lz-tag { text-decoration: none !important; }
.lz-brand img { width: 26px; height: 26px; object-fit: contain; }
.lz-brand b {
	font-family: var(--sans);
	font-weight: 700;
	font-size: 1.08rem;
	text-transform: uppercase;
	letter-spacing: .045em;
	background: linear-gradient(95deg, #161616 0%, #223a66 50%, #3a63a2 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}
.lz-brand .lz-tag {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ink-faint);
	border: 1px solid var(--line);
	padding: 1px 6px;
	border-radius: var(--r-sm);
}
.lz-topnav { display: flex; gap: 4px; align-items: center; }
.lz-topnav a {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--ink-soft);
	text-decoration: none;
	padding: 6px 11px;
	border-radius: var(--r-sm);
	cursor: pointer;
	transition: background-color .14s ease, color .14s ease;
}
.lz-topnav a:hover { background: #e9eff7; color: var(--deep); text-decoration: none; }
.lz-topnav a.acct { border: 1px solid var(--line-strong); color: var(--deep); }
.lz-topnav a.acct:hover { border-color: var(--deep2); background: #eef3fa; }
.lz-topnav a.cta { color: #fff; background: var(--deep); border: 1px solid var(--deep); }
.lz-topnav a.cta:hover { background: #17264a; color: #fff; }

/* ---------------- Left nav ---------------- */
.lz-sidebar {
	width: 236px;
	flex: 0 0 236px;
	padding: 10px 14px 40px;
	border-right: 1px solid var(--line);
	position: sticky;
	top: 49px;
	height: calc(100vh - 49px);
	overflow-y: auto;
	background: transparent;
}
.nv { list-style: none; margin: 0; padding: 0; }
.nv > li { margin: 1px 0; }
.nv-group-label {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ink-faint);
	padding: 11px 10px 5px;
}
.nv-group-label:first-child { padding-top: 3px; }
.nv-row, .nv summary {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 10px;
	font-family: var(--mono);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #3a4658;
	text-decoration: none;
	border-left: 2px solid transparent;
	border-radius: 0 var(--r-sm) var(--r-sm) 0;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.nv-row:hover, .nv summary:hover,
.nv-row:focus-visible, .nv summary:focus-visible {
	background: #e9f1fb;
	color: var(--deep);
	border-left-color: var(--deep2);
	text-decoration: none;
}
.nv-row.active { background: #e4eefb; color: var(--deep); border-left-color: var(--deep); }
.nv-row img, .nv summary img { width: 16px; height: 16px; object-fit: contain; flex: 0 0 16px; }
.nv-row svg, .nv summary svg { width: 16px; height: 16px; flex: 0 0 16px; }
.nv .ico-blank { width: 16px; height: 16px; flex: 0 0 16px; display: inline-block; }
/* twitter/css/custom.css declares `* { font-family: arial, sans-serif; }`, which targets
   nested nodes directly and defeats inheritance. Set the nav fonts explicitly. */
.lz-topbar { font-family: var(--sans); }
.lz-sidebar { font-family: var(--mono); }
.nv .lbl { overflow: hidden; text-overflow: ellipsis; font-family: var(--mono); }
.nv .nv-group-label, .nv-group-label { font-family: var(--mono); }
.lz-brand b, .lz-brand .lz-tag, .lz-topnav a { font-family: var(--mono); }
.lz-brand b { font-family: var(--sans); }
.nv details > summary { list-style: none; }
.nv details > summary::-webkit-details-marker { display: none; }
.nv .caret { margin-left: auto; width: 12px; height: 12px; opacity: .45; transition: transform .2s ease, opacity .15s ease; }
.nv details[open] > summary .caret { transform: rotate(90deg); opacity: .8; }
.nv-sub { list-style: none; margin: 2px 0 6px; padding: 0 0 0 38px; }
.nv-sub a {
	display: block;
	padding: 5px 8px;
	font-family: var(--sans);
	font-size: 12.5px;
	letter-spacing: 0;
	text-transform: none;
	color: #6b7688;
	text-decoration: none;
	border-radius: var(--r-sm);
	transition: background-color .12s ease, color .12s ease;
}
.nv-sub a:hover { background: #eef4fb; color: var(--deep); text-decoration: none; }
.nv-sub a.active { color: var(--deep); background: #eef4fb; font-weight: 600; }
.nv-row.donate { color: #c0405a; }
.nv-row.donate:hover { background: #fdecef; border-left-color: #d9536c; color: #a52f46; }

/* ---------------- Results: category select ---------------- */
/* NOTE: twitter/css/custom.css targets #selectChangesCategory with
   `background-color/color/border-radius: !important`, so these must be !important
   too, otherwise the real search select does not match the example one. */
#selectChangesCategory, #exampleSelect {
	font-family: var(--mono);
	font-size: 11.5px;
	letter-spacing: .04em;
	color: #333 !important;
	background-color: #fff !important;
	border: 1px solid var(--line-strong) !important;
	border-radius: var(--r-sm) !important;
	padding: 8px 30px 8px 14px !important;
	height: auto !important;
	line-height: 1.5 !important;
	width: auto !important;
	min-width: 285px;
	text-align: center;
	text-align-last: center;
	-moz-text-align-last: center;
}
#selectChangesCategory option, #exampleSelect option { text-align: center; }
/* keep both selects visually identical: no Bootstrap focus glow */
#selectChangesCategory:focus, #exampleSelect:focus {
	outline: none;
	border-color: var(--deep2);
	box-shadow: none;
}
/* the example select is illustrative only, keep it looking enabled */
#exampleSelect:disabled { opacity: 1; color: #333; background-color: #fff; cursor: default; }

/* ---------------- Results: changelog table ---------------- */
.tableChangelog {
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
	border-collapse: collapse;
	font-family: var(--sans);
	font-size: 12.5px;
	background: #ffffff;
	border: 1px solid #c6c2dd !important;
	box-shadow: 0 12px 28px -22px rgba(20, 40, 80, .5);
}
.tableChangelog th {
	text-align: left;
	font-family: var(--mono);
	font-weight: 600;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: #4a5a6a !important;
	background: #f7f8fa;
	padding: 10px 14px;
	line-height: 1.4;
	border: 1px solid #e6e2ff;
	border-bottom: 1px solid #d8d3f0;
}
.tableChangelog td {
	padding: 10px 14px;
	text-align: left;
	font-size: 12.5px;
	color: var(--ink);
	border: 1px solid #efedff;
	background: #ffffff;
}
.tableChangelog tr:nth-child(odd) td { background: #ffffff; }
.tableChangelog tr:nth-child(even) td { background: #f6f5ff; }
.tableChangelog tr:hover td { background: #eaf1ff; transition: background-color .12s linear; }
.tableChangelog tr:hover { box-shadow: none; }

/* old / new / found-at emphasis, scoped to the change tables so the
   "search by old username" table (ID / Date / Link) is not affected */
#usernameChanges .tableChangelog td:nth-child(1),
#displayNameChanges .tableChangelog td:nth-child(1),
#bioDescChanges .tableChangelog td:nth-child(1),
#bioLocChanges .tableChangelog td:nth-child(1),
#bioWebChanges .tableChangelog td:nth-child(1),
#exampleChanges .tableChangelog td:nth-child(1) {
	color: #8a8a8a;
	text-decoration: line-through;
	text-decoration-color: #cfcfcf;
}
#usernameChanges .tableChangelog td:nth-child(2),
#displayNameChanges .tableChangelog td:nth-child(2),
#bioDescChanges .tableChangelog td:nth-child(2),
#bioLocChanges .tableChangelog td:nth-child(2),
#bioWebChanges .tableChangelog td:nth-child(2),
#exampleChanges .tableChangelog td:nth-child(2) {
	font-weight: 600;
	color: #16223c;
}
#usernameChanges .tableChangelog td:nth-child(3),
#displayNameChanges .tableChangelog td:nth-child(3),
#bioDescChanges .tableChangelog td:nth-child(3),
#bioLocChanges .tableChangelog td:nth-child(3),
#bioWebChanges .tableChangelog td:nth-child(3),
#exampleChanges .tableChangelog td:nth-child(3) {
	color: var(--ink-faint);
	font-family: var(--mono);
	font-size: 11px;
}

/* ---------------- Example (pre-search) table ---------------- */
.lz-example { position: relative; max-width: 800px; margin: 0 auto; }
.lz-example-stamp {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 3;
	font-family: var(--mono);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: #b8455e;
	border: 2px solid #b8455e;
	border-radius: 2px;
	padding: 3px 10px;
	transform: rotate(-7deg);
	opacity: .8;
	background: rgba(255, 255, 255, .88);
	pointer-events: none;
}
.lz-example-note {
	max-width: 800px;
	margin: 0 auto 10px;
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ink-faint);
	text-align: center;
}

/* Brutalist "private" marker for tier-gated nav entries (YouTube / Google / Microsoft) */
.nv-private {
	font-family: var(--mono);
	font-size: 7.5px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #c53a47;
	background: #fdeaec;
	border: 1px solid #f1b9c0;
	border-radius: 2px;
	padding: 1px 3px;
	margin-left: 5px;
	line-height: 1.5;
	flex: 0 0 auto;
}
.nv summary:has(.nv-private) .lbl,
.nv-row:has(.nv-private) .lbl { letter-spacing: .01em; }
body.content-container .nv-private { background: #fdeaec; border-color: #f1b9c0; }

/* Private tools (YouTube / Google / Microsoft) hidden until a valid tool-access token
   sets html.tools-unlocked (lolarchiver-account.js). The worker also enforces access. */
html:not(.tools-unlocked) .nv li:has(.nv-private) { display: none; }