/* Lolarchiver redesign: top bar + left nav only (identical to the main/Twitter pages).
   Loaded AFTER the existing stylesheets so it overrides them.
   Nothing else on the page is touched. */

:root {
	--ink: #1c1c1c;
	--ink-soft: #545454;
	--ink-faint: #7f8896;
	--deep: #1c2f59;
	--deep2: #5e728d;
	--line: #dcdfe4;
	--line-strong: #b9bec7;
	--r-sm: 3px;
	--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;
	font-family: var(--sans);
}
.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;
	font-family: var(--mono);
}
.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; }
/* osint/css/custom.css declares `* { font-family: arial, sans-serif; }`, which targets
   nested nodes directly and defeats inheritance. Set the label font explicitly. */
.nv .lbl { overflow: hidden; text-overflow: ellipsis; font-family: var(--mono); }
.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; }

/* ---------------- Stacking ----------------
   Page modals ("Modules available", output card) declare a low z-index (10/12) in
   osint/css/custom.css, so the sticky top bar (z-index 30) would sit above their dim
   overlay. Lift the modals so they cover the whole viewport, top bar included. */
.search-modal { z-index: 1000 !important; }
.output-modal { z-index: 1001 !important; }

/* ---------- Compact icon rail (small screens) ----------
   A 236px sidebar leaves too little room on a phone, so below 860px the nav collapses
   to an icon rail. Row labels stay in the DOM (clipped, not removed) so screen readers
   still announce them. An opened category is a flyout, which is why nothing here clips
   overflow. The top bar sheds its tag and plain links so the key actions still fit. */
@media (max-width: 860px) {
	.lz-topbar { padding: 8px 12px; gap: .5rem; }
	.lz-brand b { font-size: 1rem; }
	.lz-brand .lz-tag { display: none; }
	.lz-topnav { gap: 3px; }
	.lz-topnav a { padding: 6px 9px; font-size: 10.5px; letter-spacing: .05em; }
	.lz-topnav a:not(.acct):not(.cta) { display: none; }

	.lz-sidebar {
		width: 68px;
		flex: 0 0 68px;
		padding: 6px 0 26px;
		height: auto;
		max-height: none;
		overflow: visible;
		z-index: 45;
	}
	.nv > li { position: relative; }

	.nv-group-label {
		margin: 7px 7px 0;
		padding: 8px 2px 4px;
		text-align: center;
		font-size: 8.5px;
		letter-spacing: .07em;
		line-height: 1.3;
		border-top: 1px solid var(--line);
	}
	.nv-group-label:first-child { margin-top: 0; padding-top: 4px; border-top: 0; }

	.nv-row, .nv summary { padding: 9px; gap: 0; justify-content: flex-start; }
	.nv .lbl {
		position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
		overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
	}
	.nv .caret { margin-left: auto; width: 11px; height: 11px; }

	.nv-sub {
		position: absolute; top: 0; left: 100%; z-index: 50;
		margin: 0 0 0 5px; padding: 5px; min-width: 162px;
		background: #ffffff; border: 1px solid var(--line-strong);
		border-radius: var(--r-sm); box-shadow: 0 16px 32px -18px rgba(20, 40, 80, .55);
	}
	.nv-sub a { padding: 6px 9px; font-size: 12px; white-space: nowrap; }
}