/* Container query (not a viewport media query) — this reflows based on <main>'s own available
   width, which is what actually matters here (a narrow browser window and a wide window with a
   docked sidebar/devtools panel both shrink <main> the same way; the viewport width wouldn't
   catch the second case). */
main {
	container-type: inline-size;
	container-name: decomp-page;
}

.decomp-layout {
	display: grid;
	grid-template-columns: 260px 1fr 320px;
	grid-template-areas: "sidebar main findings";
	gap: 1rem;
	align-items: start;
	margin-top: 1rem;
}
.decomp-layout.no-findings {
	grid-template-columns: 260px 1fr;
	grid-template-areas: "sidebar main";
}
.decomp-sidebar { grid-area: sidebar; }
.decomp-main { grid-area: main; }
.decomp-findings { grid-area: findings; }

/* Below 1200px of <main>'s own width, a third 320px column for findings crowds out the code
   viewer — move findings above the viewer instead (same column, stacked rows) rather than
   shrinking everything into an unreadable sliver. */
@container decomp-page (max-width: 1200px) {
	.decomp-layout {
		grid-template-columns: 260px 1fr;
		grid-template-areas:
			"sidebar findings"
			"sidebar main";
		grid-template-rows: auto 1fr;
	}
	.decomp-findings {
		max-height: 40vh;
	}
}

.decomp-sidebar-toggle {
	display: none;
}

.decomp-sidebar {
	border: 1px solid var(--border-color, #8883);
	border-radius: 6px;
	padding: .5rem;
	max-height: calc(100vh - 190px);
	overflow: auto;
	background: var(--clr-bg);
}

/* Real mobile viewport (not the <main>-relative container query above) — the sidebar's own
   260px column has no room to justify itself at all here, so it comes out of the grid entirely
   and becomes a full-screen overlay instead, opened/closed by a toggle that's always reachable. */
@media (max-width: 800px) {
	.decomp-layout,
	.decomp-layout.no-findings {
		grid-template-columns: 1fr;
		grid-template-areas:
			"findings"
			"main";
	}

	/* Two separate buttons, not one — "Close" belongs next to Collapse all inside the sidebar's
	   own controls row (only relevant while the overlay is open), "Classes" belongs next to the
	   download button in the main viewer (only relevant while it's closed, as the way back in).
	   #decomp-sidebar-close is shown by this rule and hidden along with the rest of the sidebar
	   when collapsed (see below); #decomp-sidebar-open is the opposite — hidden by default, only
	   shown via :has() when the sidebar actually is collapsed. */
	.decomp-sidebar-toggle {
		display: inline-flex;
	}
	#decomp-sidebar-open {
		display: none;
	}
	.decomp-layout:has(#decomp-sidebar.decomp-sidebar-collapsed) #decomp-sidebar-open {
		display: inline-flex;
	}

	.decomp-sidebar {
		position: fixed;
		top: var(--header-height, 0px);
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 90;
		max-height: none;
		margin: 0;
		border-radius: 0;
		overflow-y: auto;
	}
	/* Initially open — this class is only ever added by JS, on toggle (or on load, if a
	   permalink hash is opening straight into a file — see decompiled-browser.js). */
	.decomp-sidebar.decomp-sidebar-collapsed {
		display: none;
	}
}

.decomp-sidebar-controls {
	display: flex;
	gap: .5rem;
	margin-bottom: .5rem;
	position: sticky;
	top: 0;
	z-index: 1;
	background: var(--clr-bg);
	padding-bottom: .5rem;
}
.decomp-sidebar-controls input {
	flex: 1;
	min-width: 0;
}
.decomp-file-group {
	margin-bottom: .4rem;
}
.decomp-file-group summary {
	cursor: pointer;
	font-weight: 600;
	word-break: break-all;
}
.decomp-ns-body {
	display: flex;
	flex-direction: column;
	margin: .25rem 0 .25rem .75rem;
}
.decomp-ns-group {
	margin-bottom: .1rem;
}
.decomp-ns-group summary {
	cursor: pointer;
	opacity: .8;
	word-break: break-all;
}
.decomp-type-link {
	display: block;
	padding: .1rem .3rem;
	margin: 0 -.3rem;
	border-radius: 3px;
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.decomp-type-link.active {
	background: rgba(128, 128, 128, .18);
	font-weight: 600;
}
.decomp-search-snippet {
	font-size: .8em;
	opacity: .75;
	font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
	white-space: pre;
	overflow: hidden;
	text-overflow: ellipsis;
}

.decomp-main {
	min-width: 0;
}
.decomp-main-search {
	margin-bottom: .5rem;
	display: flex;
	gap: .5rem;
	align-items: center;
}
.decomp-main-search input {
	flex: 1;
	min-width: 0;
	box-sizing: border-box;
}
.decomp-download-all {
	flex: 0 0 auto;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: .3em;
	font-size: .8em;
	padding: .25em .55em;
	border: 1px solid var(--border-color, #8883);
	border-radius: 4px;
	text-decoration: none;
	color: inherit;
	background: var(--clr-bg);
}
.decomp-download-all:hover {
	background: rgba(128, 128, 128, .08);
}
.decomp-download-all svg {
	flex: 0 0 auto;
}
#decomp-search-results {
	border: 1px solid var(--border-color, #8883);
	border-radius: 6px;
	padding: .5rem;
	margin-bottom: .5rem;
	max-height: 40vh;
	overflow: auto;
}
#decomp-search-results ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
#decomp-search-results li {
	padding: .3rem 0;
	border-bottom: 1px solid var(--border-color, #8883);
	cursor: pointer;
}
#decomp-search-results li:last-child {
	border-bottom: none;
}
.decomp-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: .2rem;
	border-bottom: 1px solid var(--border-color, #8883);
	margin-bottom: .5rem;
}
.decomp-tab {
	display: flex;
	align-items: center;
	gap: .4rem;
	padding: .3rem .6rem;
	border: 1px solid var(--border-color, #8883);
	border-bottom: none;
	border-radius: 4px 4px 0 0;
	background: transparent;
	cursor: pointer;
	font: inherit;
	color: inherit;
}
.decomp-tab.active {
	background: rgba(128, 128, 128, .12);
	font-weight: 600;
}
.decomp-tab-close {
	opacity: .6;
}
.decomp-tab-close:hover {
	opacity: 1;
}
.decomp-tabpane {
	display: none;
}
.decomp-tabpane.active {
	display: block;
}
.decomp-code {
	font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
	font-size: .85rem;
	overflow: auto;
	max-height: 80vh;
	border: 1px solid var(--border-color, #8883);
	border-radius: 6px;
}
.decomp-line {
	display: flex;
	white-space: pre-wrap;
	word-break: break-word;
}
.decomp-line:hover {
	background: rgba(128, 128, 128, .08);
}
.decomp-lineno {
	flex: 0 0 auto;
	width: 3.5em;
	text-align: right;
	padding-right: .75em;
	opacity: .45;
	user-select: none;
	cursor: pointer;
	color: inherit;
	text-decoration: none;
}
.decomp-lineno:hover {
	opacity: .8;
	text-decoration: underline;
}
.decomp-line code {
	flex: 1;
	border: none;
}
.decomp-line-flash {
	animation: decomp-flash 1.5s ease-out;
}
@keyframes decomp-flash {
	from { background: rgba(255, 220, 0, .35); }
	to   { background: transparent; }
}

.decomp-tabpanes {
	background: var(--clr-bg);
}

.decomp-findings-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
}
.decomp-findings-header h2 {
	margin: 0;
}
#decomp-findings-list {
	padding: 0;
}
.decomp-findings {
	border: 1px solid var(--border-color, #8883);
	border-radius: 6px;
	padding: .5rem;
	max-height: 80vh;
	overflow: auto;
	background: var(--clr-bg);
}
.decomp-finding {
	list-style: none;
	padding: .4rem;
	margin-bottom: .4rem;
	border-radius: 4px;
	border-left: 3px solid #8886;
}
.decomp-finding--sev2 {
	border-left-color: #e05252;
}
.decomp-finding--sev1 {
	border-left-color: #e0a952;
}
.decomp-finding-evidence {
	font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
	font-size: .8em;
	opacity: .85;
	word-break: break-all;
}
.decomp-finding-occurrence {
	cursor: pointer;
	border-radius: 3px;
	padding: .1rem .2rem;
	margin: .1rem -.2rem;
}
.decomp-finding-occurrence:hover {
	background: rgba(128, 128, 128, .12);
}
.decomp-finding-toggle {
	display: block;
	margin-top: .2rem;
	background: none;
	border: none;
	padding: 0;
	font: inherit;
	font-size: .78em;
	text-decoration: underline;
	cursor: pointer;
	opacity: .8;
	color: inherit;
}
.decomp-finding-occurrences {
	list-style: none;
	margin: .3rem 0 0;
	padding: .3rem 0 0 .5rem;
	border-top: 1px dashed #8884;
}
.decomp-finding-occurrences li {
	margin-bottom: .2rem;
}

.decomp-toast {
	position: fixed;
	transform: translate(-50%, calc(-100% - 1em));
	background: #222;
	color: #fff;
	padding: .3rem .6rem;
	border-radius: 4px;
	font-size: .8rem;
	pointer-events: none;
	z-index: 9999;
}
.decomp-empty, .decomp-loading, .decomp-error {
	opacity: .7;
	padding: 1rem;
}

.decomp-usages-overlay {
	position: fixed;
	transform: translate(-10%, calc(-100% - 1em));
	width: 22rem;
	max-height: 20rem;
	overflow: auto;
	background: var(--clr-bg, #222);
	color: inherit;
	border: 1px solid var(--border-color, #8883);
	border-radius: 6px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .3);
	z-index: 9999;
	font-size: .85rem;
}
/* Anchored above the click point by default (reads naturally most of the time) — but for a
   click near the top of the viewport, that pushes the overlay's own top edge above the browser
   window entirely. decompiled-browser.js measures this after render and swaps to this modifier
   (below the click point instead) when it doesn't fit above. */
.decomp-usages-overlay--below {
	transform: translate(-10%, 1em);
}
.decomp-usages-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: .4rem .6rem;
	font-weight: 600;
	border-bottom: 1px solid var(--border-color, #8883);
}
.decomp-usages-close {
	background: none;
	border: none;
	font-size: 1rem;
	cursor: pointer;
	color: inherit;
	opacity: .7;
	padding: 0 .2rem;
}
.decomp-usages-close:hover {
	opacity: 1;
}
.decomp-usages-body ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.decomp-usages-body li {
	padding: .35rem .6rem;
	border-bottom: 1px solid var(--border-color, #8883);
	cursor: pointer;
}
.decomp-usages-body li:last-child {
	border-bottom: none;
}
.decomp-usages-body li:hover {
	background: rgba(128, 128, 128, .12);
}