@font-face {
	font-family: "Maple Mono";
	src: url("../fonts/maple/maple-mono-latin-100-normal.woff2") format("woff2");
	font-weight: 100;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Maple Mono";
	src: url("../fonts/maple/maple-mono-latin-100-italic.woff2") format("woff2");
	font-weight: 100;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Maple Mono";
	src: url("../fonts/maple/maple-mono-latin-200-normal.woff2") format("woff2");
	font-weight: 200;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Maple Mono";
	src: url("../fonts/maple/maple-mono-latin-200-italic.woff2") format("woff2");
	font-weight: 200;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Maple Mono";
	src: url("../fonts/maple/maple-mono-latin-300-normal.woff2") format("woff2");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Maple Mono";
	src: url("../fonts/maple/maple-mono-latin-300-italic.woff2") format("woff2");
	font-weight: 300;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Maple Mono";
	src: url("../fonts/maple/maple-mono-latin-400-normal.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Maple Mono";
	src: url("../fonts/maple/maple-mono-latin-400-italic.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Maple Mono";
	src: url("../fonts/maple/maple-mono-latin-500-normal.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Maple Mono";
	src: url("../fonts/maple/maple-mono-latin-500-italic.woff2") format("woff2");
	font-weight: 500;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Maple Mono";
	src: url("../fonts/maple/maple-mono-latin-600-normal.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Maple Mono";
	src: url("../fonts/maple/maple-mono-latin-600-italic.woff2") format("woff2");
	font-weight: 600;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Maple Mono";
	src: url("../fonts/maple/maple-mono-latin-700-normal.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Maple Mono";
	src: url("../fonts/maple/maple-mono-latin-700-italic.woff2") format("woff2");
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Maple Mono";
	src: url("../fonts/maple/maple-mono-latin-800-normal.woff2") format("woff2");
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Maple Mono";
	src: url("../fonts/maple/maple-mono-latin-800-italic.woff2") format("woff2");
	font-weight: 800;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Lora";
	src: url("../fonts/lora/lora-latin-400-normal.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Lora";
	src: url("../fonts/lora/lora-latin-400-italic.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Lora";
	src: url("../fonts/lora/lora-latin-500-normal.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Lora";
	src: url("../fonts/lora/lora-latin-500-italic.woff2") format("woff2");
	font-weight: 500;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Lora";
	src: url("../fonts/lora/lora-latin-600-normal.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Lora";
	src: url("../fonts/lora/lora-latin-600-italic.woff2") format("woff2");
	font-weight: 600;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Lora";
	src: url("../fonts/lora/lora-latin-700-normal.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Lora";
	src: url("../fonts/lora/lora-latin-700-italic.woff2") format("woff2");
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}

/*
===============================================================================
Design Tokens
===============================================================================
*/

:root {
	color-scheme: dark;

	/* COLORS */
	--bg: hsla(240, 6%, 10%, 1);
	--text-fg-100: hsl(0 0 50%);
	--text-fg-200: hsl(0 0 60%);
	--text-fg-300: hsl(0 0 90%);
	--text-accent: hsl(185 75% 40%);
	--text-accent-hover: hsl(185 75% 55%);
	--border-muted: hsl(0 0% 36%);
	--border-soft: hsl(0 0% 36% / 0.42);

	/* FONTS */
	--font-sans: "Inter", sans-serif;
	--font-serif: "Lora", Georgia, serif;
	--font-mono: "Maple Mono", "Cascadia Code", monospace;

	/* FONT WEIGHTS */
	--font-weight-thin: 100;
	--font-weight-extra-light: 200;
	--font-weight-light: 300;
	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;
	--font-weight-extra-bold: 800;
	--font-weight-black: 900;

	/* FONT SIZES */
	--text-xs: 0.75rem;
	--text-sm: 0.875rem;
	--text-base: 1rem;
	--text-lg: 1.125rem;
	--text-xl: 1.25rem;
	--text-2xl: 1.5rem;
	--text-3xl: 1.875rem;
	--text-4xl: 2.25rem;
	--text-5xl: 3rem;
	--text-6xl: 3.75rem;
	--text-7xl: 4.5rem;

	/* SPACES */
	--space-0: 0;
	--space-px: 1px;
	--space-0_5: 0.125rem;
	--space-1: 0.25rem;
	--space-1_5: 0.375rem;
	--space-2: 0.5rem;
	--space-2_5: 0.625rem;
	--space-3: 0.75rem;
	--space-3_5: 0.875rem;
	--space-4: 1rem;
	--space-5: 1.25rem;
	--space-6: 1.5rem;
	--space-7: 1.75rem;
	--space-8: 2rem;
	--space-9: 2.25rem;
	--space-10: 2.5rem;
	--space-11: 2.75rem;
	--space-12: 3rem;
	--space-14: 3.5rem;
	--space-16: 4rem;
}

/*
===============================================================================
Base
===============================================================================
*/

*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
}

body {
	min-height: 100vh;
	background: var(--bg);
	color: var(--text-fg-300);
	font-family: var(--font-sans);
}

a {
	color: inherit;
	width: fit-content;
}

/*
===============================================================================
Container
===============================================================================
*/

.container {
	--container-max-width: 60rem;
	--container-padding-inline: var(--space-4);
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--container-max-width);
	margin-inline: auto;
	padding-inline: var(--container-padding-inline);
}

.breakout {
	--container-max-width: 92rem;
}

@media (min-width: 48rem) {
	.container {
		--container-padding-inline: var(--space-6);
	}
}

@media (min-width: 64rem) {
	.container {
		--container-padding-inline: var(--space-8);
	}
}

/*
===============================================================================
Resources Header
===============================================================================
*/

.resources-main {
	padding-top: var(--space-5);
	padding-bottom: var(--space-8);
}

.resources-header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-8);
	margin-bottom: var(--space-16);
}

.resources-copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-4);
}

.resources-title {
	color: var(--text-fg-300);
	font-family: var(--font-serif);
	font-size: var(--text-5xl);
	font-weight: var(--font-weight-semibold);
	line-height: 1.02;
	letter-spacing: -0.03em;
	filter: url(#dry-ink);
}

.resources-dek {
	max-width: 40rem;
	color: var(--text-fg-300);
	font-family: var(--font-serif);
	font-size: var(--text-base);
	font-weight: var(--font-weight-semibold);
	line-height: 1.45;
}

.resources-meta {
	max-width: 40rem;
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: var(--space-2);
	row-gap: var(--space-1);
	color: var(--text-fg-200);
	font-family: var(--font-sans);
	font-weight: var(--font-weight-regular);
	font-size: var(--text-xs);
}

.resources-meta-segment {
	display: inline-flex;
	align-items: baseline;
	gap: 0.28rem;
}

.resources-meta-separator {
	color: var(--text-fg-100);
	margin-inline: 0.1rem;
}

.resources-meta-value {
	display: inline-block;
	color: var(--text-fg-300);
	font-weight: var(--font-weight-regular);
}

/*
===============================================================================
Main Table
===============================================================================
*/

/*
	The table is always conceptually three regions:
	1. left rail
	2. center content
	3. right rail

	On desktop:
	- left and right stay fixed-width
	- only the center column flexes

	On smaller screens:
	- the center becomes the only in-flow column
	- the left rail becomes an in-table slide-out panel
	- the right rail becomes an off-canvas panel that sits outside by default
*/

.main-table {
	/*
		These custom properties define the side rail widths once in one place.
		Desktop uses the fixed rem values below.
		The responsive breakpoint overrides them with viewport-aware widths.
	*/
	--left-panel-width: 14rem;
	--right-panel-width: 18.5rem;

	position: relative;
	display: grid;

	/*
		Only the middle track is flexible.
		This is the core desktop behavior you wanted:
		the edges do not shrink, the center does.
	*/
	grid-template-columns: var(--left-panel-width) minmax(0, 1fr) var(--right-panel-width);
	border-top: 1px solid var(--border-soft);
	margin-bottom: var(--space-16);
}

.main-table.is-detail-closed {
	--right-panel-width: 0rem;
}

.main-table.is-builder-mode {
	border-top: 0;
}

.main-table.is-builder-mode::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: var(--right-panel-width);
	height: 1px;
	background: var(--border-soft);
	z-index: 2;
}

.main-table > * {
	/*
		Temporary structural height so the shell is visible while the content
		is still empty.
	*/
	min-height: 34rem;
}

.main-table > * + * {
	/*
		Desktop vertical dividers between:
		- left rail and center
		- center and right rail
	*/
	border-left: 1px solid var(--border-soft);
}

.main-table.is-builder-mode > aside {
	border-left: 0;
}

.main-table.is-detail-closed > aside {
	display: none;
}

.panel-scrim {
	display: none;
}

.ui-icon-sprite {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
	pointer-events: none;
}

.icon {
	display: block;
	width: 1em;
	height: 1em;
	flex: 0 0 auto;
}

.panel-toggle {
	/*
		Hidden on desktop because the left panel is already visible there.
		It only appears once the left rail becomes an off-canvas panel.
	*/
	display: none;
	appearance: none;
	-webkit-appearance: none;
	position: relative;
	width: 2.25rem;
	height: 2.25rem;
	background: transparent;
	border: 0;
	box-shadow: none;
	color: var(--text-fg-300);
	cursor: pointer;
}

.panel-toggle .icon-menu {
	width: 1.15rem;
	height: 1.15rem;
}

/*
	Left rail contents:
	- topic tree
	- footer divider
	- build-folder helper block

	This stays scoped to the first column only. The center and right panels
	are still empty shells for now.
*/

.topic-panel {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: var(--space-8);
	padding: var(--space-4) var(--space-4) var(--space-3);
	font-family: var(--font-sans);
}

.topic-tree,
.topic-tree ul {
	list-style: none;
}

.topic-tree {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.topic-branch {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.topic-branch-head {
	position: relative;
	display: flex;
	align-items: baseline;
	gap: 0;
}

.topic-tree ul {
	margin-top: var(--space-1);
	margin-left: var(--space-4);
	padding-left: var(--space-3);
	border-left: 1px solid var(--border-soft);
}

.topic-node,
.topic-leaf {
	appearance: none;
	-webkit-appearance: none;
	display: flex;
	align-items: baseline;
	gap: var(--space-2);
	width: 100%;
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
	color: var(--text-fg-300);
	font-family: inherit;
	font-size: 0.84rem;
	line-height: 1.45;
	text-align: left;
	cursor: pointer;
}

.topic-node {
	justify-content: space-between;
}

.topic-toggle {
	appearance: none;
	-webkit-appearance: none;
	position: absolute;
	left: -1rem;
	top: 0.1rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 0.85rem;
	height: 0.85rem;
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
	color: var(--text-fg-200);
	cursor: pointer;
}

.topic-toggle::before {
	content: "";
	position: absolute;
	inset: -0.35rem;
}

.topic-toggle .icon-chevron {
	width: 0.72rem;
	height: 0.72rem;
	transition: transform 140ms ease;
}

.topic-toggle[aria-expanded="true"] .icon-chevron {
	transform: rotate(90deg);
}

.topic-node > :last-child,
.topic-leaf {
	color: inherit;
}

.topic-node.is-selected,
.topic-leaf.is-selected {
	color: var(--text-accent);
}

.topic-branch:not(.is-open) > .topic-tree {
	display: none;
}

.topic-toggle:hover,
.topic-toggle:focus-visible,
.topic-leaf:hover,
.topic-leaf:focus-visible,
.topic-node:hover,
.topic-node:focus-visible {
	color: var(--text-accent);
	outline: none;
}

.topic-panel-footer {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-3);
	padding-top: var(--space-4);
	border-top: 1px solid var(--border-soft);
}

.topic-panel-footer[hidden] {
	display: none;
}

.shared-folder-summary {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	margin-bottom: calc(var(--space-8) * -1 + var(--space-4));
	padding-bottom: var(--space-4);
	border-bottom: 1px solid var(--border-soft);
}

.shared-folder-eyebrow {
	color: var(--text-fg-100);
	font-size: 0.66rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.shared-folder-title {
	margin: 0;
	color: var(--text-fg-400);
	font-family: var(--font-serif);
	font-size: 1.15rem;
	line-height: 1.2;
}

.build-folder {
	appearance: none;
	-webkit-appearance: none;
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
	color: var(--text-accent);
	font-family: var(--font-sans);
	font-size: 0.72rem;
	text-align: left;
	cursor: pointer;
}

.build-folder .icon-folder {
	width: 0.76rem;
	height: 0.76rem;
}

/*
	Middle panel:
	- fake table header
	- stacked rows rendered as a four-column grid
	- the first column holds the actual title, blurb, and topic crumbs

	Right panel:
	- static detail card for the currently selected resource
	- slightly larger type than the left topic tree so it reads as primary content
*/

.resource-table {
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow-x: auto;
}

.resource-toolbar-shell {
	--left-panel-width: 14rem;
	--right-panel-width: 18.5rem;

	display: grid;
	grid-template-columns: var(--left-panel-width) minmax(0, 1fr) var(--right-panel-width);
	align-items: center;
}

.resource-toolbar-spacer {
	min-width: 0;
}

.resource-table-toolbar {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: 0 var(--space-4) var(--space-3) 0;
}

.resource-toolbar-actions {
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--space-4);
	flex: 0 0 auto;
}

.resource-search {
	flex: 1 1 auto;
	min-width: 0;
}

.resource-search input {
	width: 100%;
	padding: 0.5rem 0.6rem 0.5rem 0.45rem;
	background: transparent;
	border: 1px solid var(--border-soft);
	border-radius: 0.18rem;
	color: var(--text-fg-300);
	font: inherit;
	font-size: 0.76rem;
	line-height: 1.2;
	height: 2rem;
}

.resource-search input:focus {
	outline: none;
	border-color: var(--text-accent);
}

.resource-clear-filter {
	appearance: none;
	-webkit-appearance: none;
	flex: 0 0 auto;
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
	color: var(--text-accent);
	font: inherit;
	font-size: 0.72rem;
	line-height: 1.2;
	cursor: pointer;
}

.resource-export-json {
	appearance: none;
	-webkit-appearance: none;
	flex: 0 0 auto;
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
	color: var(--text-accent);
	font: inherit;
	font-size: 0.72rem;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
}

.resource-clear-filter:hover,
.resource-clear-filter:focus-visible,
.resource-export-json:hover,
.resource-export-json:focus-visible {
	color: var(--text-accent-hover);
	text-decoration: underline;
	outline: none;
}

.resource-table-head,
.resource-row {
	display: grid;
	min-width: 700px;
	grid-template-columns: minmax(0, 1fr) 5.25rem 6.25rem 5.75rem;
	column-gap: 1.125rem;
}

.main-table.is-builder-mode .resource-table-head,
.main-table.is-builder-mode .resource-row {
	grid-template-columns: 1.15rem minmax(0, 1fr) 5.25rem 6.25rem 5.75rem;
}

.resource-table-head {
	padding: var(--space-3) var(--space-5);
	color: var(--text-fg-100);
	font-size: 0.66rem;
	letter-spacing: 0.04em;
	align-items: center;
}

.resource-select-all,
.resource-row-select {
	display: none;
	align-items: center;
	justify-content: center;
	width: 1.15rem;
	height: 1.15rem;
	cursor: pointer;
}

[data-sort-key] {
	-webkit-user-select: none;
	user-select: none;
	cursor: pointer;
}

.main-table.is-builder-mode .resource-select-all,
.main-table.is-builder-mode .resource-row-select {
	display: inline-flex;
}

.resource-select-all input,
.resource-row-select input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.resource-select-all span,
.resource-row-select span {
	width: 0.82rem;
	height: 0.82rem;
	border: 1px solid var(--border-muted);
	border-radius: 0.08rem;
	background: transparent;
	transition:
		border-color 140ms ease,
		background-color 140ms ease;
}

.resource-select-all input:checked + span,
.resource-row-select input:checked + span {
	background: var(--text-accent);
	border-color: var(--text-accent);
}

.resource-select-all input:indeterminate + span {
	background: linear-gradient(var(--text-accent), var(--text-accent)) center / 0.45rem 1px no-repeat;
	border-color: var(--text-accent);
}

.resource-table-body {
	display: flex;
	flex-direction: column;
	max-height: min(62rem, calc(100vh - 16rem));
	overflow-y: auto;
}

.resource-row {
	padding: var(--space-3) var(--space-5);
	background: transparent;
	cursor: pointer;
}

.resource-row:nth-child(odd) {
	background: hsl(0 0 100% / 0.018);
}

.resource-row:nth-child(even) {
	background: transparent;
}

.resource-row.is-active {
	cursor: default;
}

.main-table.is-builder-mode .resource-row,
.main-table.is-builder-mode .resource-row.is-active {
	cursor: pointer;
}

.resource-row.is-active > div,
.resource-row.is-active > p,
.resource-row.is-active .resource-row-description,
.resource-row.is-active .resource-row-kind,
.resource-row.is-active .resource-row-added,
.resource-row.is-active .resource-row-source,
.resource-row.is-active .resource-row-topics,
.resource-row.is-active .resource-row-topics span,
.resource-row.is-active .resource-row-topics a {
	cursor: text;
}

.main-table.is-builder-mode .resource-row.is-active > div,
.main-table.is-builder-mode .resource-row.is-active > p,
.main-table.is-builder-mode .resource-row.is-active .resource-row-description,
.main-table.is-builder-mode .resource-row.is-active .resource-row-kind,
.main-table.is-builder-mode .resource-row.is-active .resource-row-added,
.main-table.is-builder-mode .resource-row.is-active .resource-row-source,
.main-table.is-builder-mode .resource-row.is-active .resource-row-topics,
.main-table.is-builder-mode .resource-row.is-active .resource-row-topics span,
.main-table.is-builder-mode .resource-row.is-active .resource-row-topics a {
	cursor: pointer;
}

.resource-row:hover,
.resource-row:focus-visible,
.resource-row.is-active {
	background: hsl(0 0 100% / 0.05);
}

.main-table.is-builder-mode .resource-row.is-active {
	background: transparent;
}

.main-table.is-builder-mode .resource-row.is-picked {
	background: hsl(0 0 100% / 0.055);
}

.resource-row > div,
.resource-row > p {
	min-width: 0;
}

.resource-row > div {
	display: flex;
	flex-direction: column;
	gap: 0.38rem;
}

.resource-row-title {
	color: var(--text-accent);
	font-family: var(--font-serif);
	font-size: 0.95rem;
	font-weight: var(--font-weight-semibold);
	line-height: 1.25;
	text-decoration: none;
	cursor: pointer;
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
}

.resource-row a:hover,
.resource-row a:focus-visible,
.resource-detail a:hover,
.resource-detail a:focus-visible {
	color: var(--text-accent-hover);
	text-decoration: underline;
}

.resource-row-description {
	color: var(--text-fg-300);
	font-size: 0.73rem;
	line-height: 1.35;
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.resource-row-topics {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.15rem 0.35rem;
	font-size: 0.65rem;
	line-height: 1.35;
}

.resource-row-topics a {
	color: var(--text-accent);
	font-family: var(--font-sans);
	font-size: inherit;
	font-weight: var(--font-weight-medium);
	text-decoration: none;
	cursor: pointer;
}

.resource-row-topics span {
	color: var(--text-fg-200);
}

.resource-row-topics a:hover,
.resource-row-topics a:focus-visible {
	text-decoration: underline;
}

.main-table.is-builder-mode .resource-row-title,
.main-table.is-builder-mode .resource-row-topics a {
	cursor: pointer;
}

.resource-row > p {
	color: var(--text-fg-200);
	font-size: 0.8rem;
	line-height: 1.35;
}

.resource-row-kind {
	text-transform: capitalize;
}

.resource-detail {
	display: flex;
	flex-direction: column;
	padding: var(--space-4) var(--space-5) var(--space-5);
}

.main-table.is-builder-mode .resource-detail {
	padding: var(--space-3) var(--space-3) var(--space-3);
}

.resource-detail-panel,
.folder-builder-panel {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

.main-table.is-builder-mode .resource-detail-panel {
	display: none;
}

.folder-builder-panel {
	display: none;
}

.main-table.is-builder-mode .folder-builder-panel {
	display: flex;
	padding-top: 0;
}

.resource-detail-head {
	position: relative;
	display: flex;
	align-items: flex-start;
	padding-right: 1.25rem;
}

.resource-detail h2 {
	color: var(--text-accent);
	font-family: var(--font-serif);
	font-size: 1.5rem;
	font-weight: var(--font-weight-semibold);
	line-height: 1.1;
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.resource-detail-close {
	appearance: none;
	-webkit-appearance: none;
	position: absolute;
	top: 50%;
	right: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.25rem;
	height: 1.25rem;
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
	color: var(--text-fg-200);
	transform: translateY(-50%);
	cursor: pointer;
}

.resource-detail-close .icon-close {
	width: 1rem;
	height: 1rem;
}

.resource-detail dl,
.resource-detail section {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.resource-detail dl > div {
	display: grid;
	grid-template-columns: 3.1rem minmax(0, 1fr);
	gap: var(--space-2);
	align-items: baseline;
}

.resource-detail dt,
.resource-detail h3 {
	color: var(--text-fg-100);
	font-size: 0.62rem;
	font-weight: var(--font-weight-medium);
	letter-spacing: 0.04em;
}

.resource-detail dd,
.resource-detail p,
.resource-detail a {
	color: var(--text-fg-300);
	font-size: 0.8rem;
	line-height: 1.45;
	text-decoration: none;
	margin: 0;
}

.resource-detail dd > a,
.resource-detail-topics a {
	color: var(--text-accent);
}

.resource-detail-topics {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.2rem 0.35rem;
}

.resource-detail-topics span {
	color: var(--text-fg-200);
}

.resource-detail section a {
	color: var(--text-accent);
	display: block;
}

.resource-detail section.resource-detail-related {
	display: flex;
	flex-direction: column;
	row-gap: 0.25rem;
}

.resource-detail > p:last-child a {
	color: var(--text-accent);
	font-size: 0.75rem;
	font-weight: var(--font-weight-medium);
}

.resource-detail > p:last-child span {
	font-family: var(--font-mono);
}

.folder-builder-head {
	position: relative;
	display: flex;
	align-items: flex-start;
	padding-right: 1.25rem;
}

.folder-builder-head h2 {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--text-accent);
	font-family: var(--font-serif);
	font-size: 1.25rem;
	font-weight: var(--font-weight-semibold);
	line-height: 1.15;
}

.folder-builder-head .icon-folder {
	width: 0.86rem;
	height: 0.86rem;
	margin-top: 0.08rem;
}

.folder-builder-box {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	padding: var(--space-3);
	border: 1px solid var(--border-soft);
	border-radius: 0.22rem;
	background: hsl(240 7% 12% / 0.9);
}

.folder-builder-field {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.folder-builder-field > span,
.folder-builder-section h3 {
	color: var(--text-fg-100);
	font-size: 0.62rem;
	font-weight: var(--font-weight-medium);
	letter-spacing: 0.04em;
}

.folder-builder-field input {
	width: 100%;
	padding: 0.34rem 0.55rem;
	background: transparent;
	border: 1px solid var(--border-muted);
	border-radius: 0.22rem;
	color: var(--text-fg-300);
	font: inherit;
	font-size: var(--text-sm);
	line-height: 1.2;
	height: 2rem;
}

.folder-builder-field input:focus {
	outline: none;
	border-color: var(--text-accent);
}

.folder-builder-section {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.folder-builder-box > .folder-builder-section:last-child {
	padding-top: var(--space-1);
}

.folder-builder-section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-3);
}

.folder-builder-clear-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.folder-builder-clear-wrap.is-confirming .folder-builder-clear {
	display: none;
}

.folder-builder-clear {
	appearance: none;
	-webkit-appearance: none;
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--text-accent);
	font: inherit;
	font-size: 0.72rem;
	cursor: pointer;
}

.folder-builder-clear-confirm {
	position: static;
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	white-space: nowrap;
}

.folder-builder-clear-confirm[hidden] {
	display: none;
}

.folder-builder-clear-confirm > span {
	color: var(--text-fg-100);
	font-size: 0.68rem;
	line-height: 1.2;
}

.folder-builder-clear-confirm-yes,
.folder-builder-clear-confirm-no {
	appearance: none;
	-webkit-appearance: none;
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
	font: inherit;
	font-size: 0.68rem;
	line-height: 1.2;
	cursor: pointer;
}

.folder-builder-clear-confirm-yes {
	color: var(--text-accent);
}

.folder-builder-clear-confirm-no {
	color: var(--text-fg-200);
}

.folder-builder-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	list-style: none;
	margin: 0;
	padding: 0;
}

.folder-builder-item {
	position: relative;
	display: grid;
	grid-template-columns: 0.8rem minmax(0, 1fr) auto;
	align-items: start;
	gap: var(--space-2);
	padding: 0.28rem 0.34rem;
	border-radius: 0.22rem;
	transition:
		background-color 140ms ease,
		opacity 140ms ease;
}

.folder-builder-item.is-dragging {
	opacity: 0.35;
}

.folder-builder-item.is-drop-before::before,
.folder-builder-item.is-drop-after::after {
	content: "";
	position: absolute;
	left: 0.15rem;
	right: 0.15rem;
	height: 1px;
	background: var(--text-accent);
	box-shadow: 0 0 0.35rem hsl(185 75% 40% / 0.35);
}

.folder-builder-item.is-drop-before::before {
	top: -0.2rem;
}

.folder-builder-item.is-drop-after::after {
	bottom: -0.2rem;
}

.folder-builder-drag-image {
	display: grid;
	grid-template-columns: 0.8rem minmax(0, 1fr) auto;
	align-items: start;
	gap: var(--space-2);
	padding: 0.28rem 0.34rem;
	border: 1px solid hsl(185 75% 40% / 0.35);
	border-radius: 0.22rem;
	background: hsl(185 75% 40% / 0.14);
	box-shadow: 0 0.45rem 1.2rem hsl(0 0 0 / 0.28);
	color: var(--text-fg-300);
}

.folder-builder-handle {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 0.8rem;
	height: 1rem;
	margin-top: 0.08rem;
	color: var(--text-fg-100);
	cursor: grab;
}

.folder-builder-handle:active {
	cursor: grabbing;
}

.folder-builder-handle .icon-grip {
	width: 0.72rem;
	height: 0.72rem;
	opacity: 0.78;
}

.folder-builder-item-copy {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.12rem;
}

.folder-builder-item-title {
	color: var(--text-accent);
	font-size: 0.76rem;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.folder-builder-item-source {
	color: var(--text-fg-100);
	font-size: 0.68rem;
	line-height: 1.3;
}

.folder-builder-remove {
	appearance: none;
	-webkit-appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--text-fg-100);
	cursor: pointer;
}

.folder-builder-remove .icon-close {
	width: 0.72rem;
	height: 0.72rem;
}

.folder-builder-copy-text {
	color: var(--text-fg-100);
}

.folder-builder-copy {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.22rem;
	padding: 0.42rem 0.7rem;
	background: transparent;
	border: 1px solid var(--text-accent);
	border-radius: 0.22rem;
	color: var(--text-accent);
	font: inherit;
	font-size: 0.8rem;
	line-height: 1.2;
	cursor: pointer;
}

.folder-builder-copy .icon-link {
	width: 0.84rem;
	height: 0.84rem;
}

.folder-builder-copy[data-copy-state="copied"] .icon-link,
.folder-builder-copy[data-copy-state="error"] .icon-link {
	display: none;
}

.folder-builder-export-json {
	appearance: none;
	-webkit-appearance: none;
	align-self: center;
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
	color: var(--text-accent);
	font: inherit;
	font-size: 0.72rem;
	line-height: 1.2;
	text-decoration: underline;
	text-underline-offset: 0.08em;
	cursor: pointer;
}

.folder-builder-export-json:hover,
.folder-builder-export-json:focus-visible {
	color: var(--text-accent-hover);
	outline: none;
}

/*
===============================================================================
Footer
===============================================================================
*/

.footer {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--space-6);
	padding-top: var(--space-8);
	padding-bottom: var(--space-10);
	color: var(--text-fg-200);
	font-family: var(--font-serif);
	font-size: var(--text-sm);
	font-weight: var(--font-weight-medium);
}

.footer > p {
	flex: none;
	white-space: nowrap;
}

.footer > div {
	min-width: 0;
}

.footer a {
	color: var(--text-fg-200);
	text-decoration: none;
}

.footer a:hover,
.footer a:focus-visible {
	color: var(--text-accent);
	text-decoration: underline;
}

/*
===============================================================================
Utilities
===============================================================================
*/

.print-filter-defs {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

/*
===============================================================================
Responsive
===============================================================================
*/

@media (max-width: 700px) {
	.resources-main {
		padding-top: var(--space-4);
		padding-bottom: var(--space-6);
	}

	.resources-header {
		margin-bottom: var(--space-10);
	}

	.resources-title {
		font-size: var(--text-4xl);
	}

	.footer {
		font-size: var(--text-xs);
	}
}

@media (max-width: 960px) {
	.resource-toolbar-shell {
		--left-panel-width: min(85vw, 18rem);
		--right-panel-width: min(85vw, 20rem);
		grid-template-columns: minmax(0, 1fr);
	}

	.resource-toolbar-shell > :not(.resource-table-toolbar) {
		display: none;
	}

	.main-table {
		/*
			Side rails become overlay panels here, so their widths switch to
			viewport-aware values. The table itself collapses to a single
			in-flow column: the center panel.
		*/
		--left-panel-width: min(85vw, 18rem);
		--right-panel-width: min(85vw, 20rem);
		grid-template-columns: minmax(0, 1fr);
		margin-bottom: var(--space-12);

		/*
			Critical for the left panel push behavior:
			when the center panel shifts right, anything that exceeds the table
			bounds gets clipped instead of creating horizontal page scroll.
		*/
		overflow-x: hidden;
	}

	.main-table > * + * {
		/*
			The desktop dividers no longer apply once the layout stops being
			three inline columns. Each mobile panel manages its own borders.
		*/
		border-left: 0;
	}

	.main-table > :nth-child(2) {
		/*
			This is the center panel.
			It stays in normal flow while the left panel pushes it sideways.
			That shift is what makes the left panel feel attached to the table
			instead of floating independently over the full page.
		*/
		position: relative;
		z-index: 1;
		min-height: 34rem;
		transition: transform 220ms ease;
	}

	.main-table > :nth-child(2)::after {
		/*
			Local table overlay.
			We attach it to the center panel instead of the whole page so the
			dimming effect only belongs to the table area.
		*/
		content: "";
		position: absolute;
		inset: 0;
		background: hsl(0 0 0 / 0.28);
		opacity: 0;
		pointer-events: none;
		transition: opacity 220ms ease;
	}

	.main-table > :first-child,
	.main-table > aside {
		/*
			Both side panels stop participating in the grid and become absolutely
			positioned inside `.main-table`.

			Key point:
			- `absolute`, not `fixed`
			- so they are scoped to the table box rather than the viewport
		*/
		position: absolute;
		top: 0;
		bottom: 0;
		z-index: 20;
		min-height: 100%;
		background: var(--bg);
		border-top: 1px solid var(--border-soft);
		transition: transform 220ms ease;
	}

	.panel-scrim {
		appearance: none;
		-webkit-appearance: none;
		position: absolute;
		inset: 0;
		z-index: 15;
		display: block;
		padding: 0;
		background: hsl(0 0 0 / 0.28);
		border: 0;
		box-shadow: none;
		opacity: 0;
		pointer-events: none;
		transition: opacity 220ms ease;
	}

	.main-table > :first-child {
		/*
			Left panel starts just outside the table on the left.
			When opened, it slides to `translateX(0)`.
		*/
		left: 0;
		width: var(--left-panel-width);
		border-right: 1px solid var(--border-soft);
		transform: translateX(-100%);
	}

	.main-table > aside {
		/*
			Right panel is intentionally pushed outside the screen by default.
			We are not wiring its trigger yet, but the off-canvas default state
			is already in place.
		*/
		right: 0;
		width: var(--right-panel-width);
		border-right: 0;
		border-left: 1px solid var(--border-soft);
		transform: translateX(calc(100% + 1rem));
	}

	body.is-left-panel-open .main-table > :first-child {
		/* Slide the left panel into the table area. */
		transform: translateX(0);
	}

	body.is-left-panel-open .main-table > :nth-child(2) {
		/*
			This is the "push" behavior you asked for.
			The center panel moves by exactly the left panel width, so the left
			panel feels like it displaces the table content rather than floating
			loosely above it.
		*/
		transform: translateX(var(--left-panel-width));
	}

	body.is-left-panel-open .main-table > :nth-child(2)::after {
		/* Turn on the local dim overlay only while the left panel is open. */
		opacity: 1;
	}

	body.is-right-panel-open .main-table > aside {
		transform: translateX(0);
	}

	body.is-right-panel-open .main-table > :nth-child(2)::after {
		opacity: 1;
	}

	body.is-mobile-panel-open .main-table > .panel-scrim {
		opacity: 1;
		pointer-events: auto;
	}

	body.is-left-panel-open .main-table > :first-child,
	body.is-right-panel-open .main-table > aside {
		z-index: 25;
	}

	.panel-toggle {
		/* Mobile/tablet only: this is the temporary trigger for the left panel. */
		display: inline-block;
		flex: 0 0 auto;
	}

	.resource-table-head,
	.resource-row {
		grid-template-columns: minmax(0, 1fr) 4.5rem 5.5rem 5rem;
	}

	.resource-table-toolbar {
		gap: var(--space-2);
		padding: 0 var(--space-3) var(--space-3) 0;
	}

	.main-table.is-builder-mode .resource-table-head,
	.main-table.is-builder-mode .resource-row {
		grid-template-columns: 1.15rem minmax(0, 1fr) 4.5rem 5.5rem 5rem;
	}
}

@media (max-width: 375px) {
	.navbar-list {
		gap: var(--space-3);
		flex-wrap: wrap;
	}

	.resources-dek {
		font-size: var(--text-sm);
	}

	.resource-table-toolbar {
		padding: 0 var(--space-3) var(--space-2) 0;
	}

	.resource-table-head,
	.resource-row {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--space-1);
	}

	.main-table.is-builder-mode .resource-table-head,
	.main-table.is-builder-mode .resource-row {
		grid-template-columns: 1.15rem minmax(0, 1fr);
	}

	.resource-table-head > span:not(:nth-child(2)) {
		display: none;
	}

	.resource-table-head .resource-select-all {
		display: none;
	}

	.main-table.is-builder-mode .resource-table-head .resource-select-all {
		display: inline-flex;
	}

	.resource-row > p {
		display: none;
	}

	.footer {
		font-size: 10px !important;
	}
}