html {
	scrollbar-color: grey black;
	overflow-y: scroll;
}

body {
	background-color: black;
	color: white;
	max-width: 800px;
	margin: 0 auto;
	font-family: sans-serif;
	user-select: none;
}

::selection {
	color: var(--white);
	background: var(--hotdog);
}

/* ── UI colors ───────────────────────────────────────── */

:root {
	--white:       #ffffff;
	--dim:         #888888;
	--mid:         #c4c4c4;
	--link:        #4a9eff;
	--link-visited:#b47fff;
	--border:      #222222;
	--bg-hover:    #0d0d17;
	--empty:       #555555;
}

/* ── Tag filter bar ──────────────────────────────────── */

#tag-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	padding: 24px 0 28px;
	align-items: stretch;
}

.tag-filter {
	display: block;
	flex: 1;
	padding: 5px 11px;
	text-align: center;
	white-space: nowrap;
	font-size: 1rem;
	font-family: sans-serif;
	letter-spacing: 0.04em;
	text-transform: lowercase;
	background: black;
	border: 1px solid currentColor;
	border-radius: 0;
	cursor: pointer;
	transition: none;
	user-select: none;
}

.tag-filter:hover {
	background: currentColor;
}

.tag-filter:hover span {
	color: black;
}

.tag-filter[data-deactivated]:hover {
	background: black;
}

.tag-filter[data-deactivated]:hover span {
	color: inherit;
}

.tag-filter.active {
	background: currentColor;
	cursor: pointer;
}

.tag-filter.active span {
	color: black;
}

.tag-filter span {
	color: inherit;
	pointer-events: none;
}

/* ── Links list ──────────────────────────────────────── */

#links-list {
	display: flex;
	flex-direction: column;
}

.link-item {
	display: block;
	padding: 18px;
	text-decoration: none;
	cursor: ne-resize;
	transition: background 0.17s ease-out;
	margin-left: -18px;
	margin-right: -18px;
	text-shadow: 1px 1px 1px black;
}

@media (hover: hover) {
	.link-item:hover {
		background: var(--bg-hover);
	}
}

.link-title {
	font-size: 1.35rem;
	font-weight: bold;
	color: var(--white);
	margin-bottom: 8px;
}

.link-url {
	font-size: 1.02rem;
	color: var(--link);
	margin-bottom: 5px;
	word-break: break-all;
}

.link-item:visited .link-url {
	color: var(--link-visited);
}

.link-description {
	font-size: 1.02rem;
	color: var(--dim);
	margin-bottom: 8px;
	line-height: 1.45;
}

.link-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.link-tag {
	font-size: 0.92rem;
	letter-spacing: 0.05em;
	text-transform: lowercase;
}

/* ── Empty state ─────────────────────────────────────── */

#empty-state {
	display: none;
	color: var(--dim);
	font-size: 1.02rem;
	padding: 40px 0;
	text-align: center;
}

/* ── Responsive ──────────────────────────────────────── */

@media (max-width: 830px) {
	#tag-bar, #links-list {
		margin-left: 15px;
		margin-right: 15px;
	}
	.link-item {
		margin-left: -15px;
		margin-right: -15px;
	}
	body {
		max-width: 100%;
	}
}