/*
 * GIF Category Nav
 *
 * Depth is shown by a guide line rather than indentation alone: in a sidebar
 * that is only ~280px wide, four levels of padding would leave no room for the
 * names, which are the point.
 */

.gcn {
	--gcn-ink: #1d2327;
	--gcn-muted: #6b7280;
	--gcn-rule: #e3e5e8;
	--gcn-accent: #c0392b;
	--gcn-hover: #f6f7f8;

	font-size: 14px;
	line-height: 1.4;
}

.gcn__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Nested levels get the guide line, the top level does not. */
.gcn__item .gcn__list {
	border-left: 1px solid var(--gcn-rule);
	margin-left: 10px;
	padding-left: 4px;
}

.gcn__row {
	align-items: center;
	border-radius: 3px;
	display: flex;
	gap: 2px;
}

.gcn__row:hover {
	background: var(--gcn-hover);
}

.gcn__toggle {
	background: none;
	border: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 22px;
	padding: 0;
	width: 20px;
	flex: 0 0 20px;
}

.gcn__spacer {
	flex: 0 0 20px;
}

/* Chevron drawn with borders — no icon font, no extra request. */
.gcn__chevron {
	border-right: 1.5px solid var(--gcn-muted);
	border-bottom: 1.5px solid var(--gcn-muted);
	display: block;
	height: 6px;
	transform: rotate(-45deg);
	transition: transform .15s ease;
	width: 6px;
}

.gcn__item.is-open > .gcn__row .gcn__chevron {
	transform: rotate(45deg);
}

.gcn__link {
	align-items: baseline;
	color: var(--gcn-ink);
	display: flex;
	flex: 1 1 auto;
	gap: 6px;
	justify-content: space-between;
	padding: 3px 6px 3px 0;
	text-decoration: none;
}

.gcn__link:hover .gcn__name {
	text-decoration: underline;
}

.gcn__name {
	overflow-wrap: anywhere;
}

.gcn__count {
	color: var(--gcn-muted);
	flex: 0 0 auto;
	font-size: 11px;
	font-variant-numeric: tabular-nums;
}

/* Current page, and the chain leading to it. */
.gcn__item.is-current > .gcn__row {
	background: var(--gcn-hover);
	box-shadow: inset 2px 0 0 var(--gcn-accent);
}

.gcn__item.is-current > .gcn__row .gcn__link {
	color: var(--gcn-accent);
	font-weight: 600;
}

.gcn__item.is-ancestor > .gcn__row .gcn__link {
	font-weight: 600;
}

/* Collapsed branches. Rendered in the HTML, hidden here, so the markup stays
   complete for crawlers and for anyone without JavaScript. */
.gcn__item--parent:not(.is-open) > .gcn__list {
	display: none;
}

/* Filter box */

.gcn__search {
	margin-bottom: 8px;
}

.gcn__filter {
	border: 1px solid var(--gcn-rule);
	border-radius: 3px;
	box-sizing: border-box;
	font-size: 13px;
	padding: 5px 8px;
	width: 100%;
}

.gcn__filter:focus {
	border-color: var(--gcn-accent);
	outline: none;
}

.gcn__empty {
	color: var(--gcn-muted);
	font-size: 13px;
	margin: 4px 0;
}

/* While filtering, the guide lines add noise without adding meaning. */
.gcn.is-filtering .gcn__item .gcn__list {
	border-left-color: transparent;
}

.gcn__sr {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	width: 1px;
	word-wrap: normal;
}

@media (prefers-reduced-motion: reduce) {
	.gcn__chevron {
		transition: none;
	}
}

/* Block wrapper */

.gcn-block__title {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0 0 10px;
}