/* Sanctum Gold — the category sidebar of every game (v1.9.148, owner: "one category styling for
 * all games … mobile too"). D2R's sidebar (owner pick A7, 2026-10-02) is the one look: D2R
 * archives and the D4/POE2 hubs print the same markup (functions.php sg_cat_side_head +
 * sg_d2r_cat_node; the sg-d2r- class prefix is historical) and share this file and cats.js.
 * Change the category sidebar here, once, for every game. Moved unchanged from d2r.css. */

/* v1.9.40: mobile category toggle (mirrors the POE2 hub collapsible box);
 * hidden on desktop where the sidebar title shows instead. */
.sg-d2r-side-toggle{display:none}

.sg-d2r-side{
	background:var(--card);
	border:1px solid var(--border);
	border-radius:var(--radius);
	box-shadow:var(--card-shadow);
	padding:18px;
	position:sticky;
	top:92px;
}
.sg-d2r-side-title{
	font-family:var(--font-display);
	font-size:1.15rem;
	font-weight:700;
	letter-spacing:.05em;
	color:var(--text);
	margin:0 0 10px;
}
.sg-d2r-cats{
	list-style:none;
	margin:0 0 4px;
	padding:0;
	display:flex;
	flex-direction:column;
	gap:2px;
}
.sg-d2r-cat{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:8px;
	padding:8px 10px;
	border-radius:8px;
	border-left:3px solid transparent;
	color:var(--muted);
	font-size:.9rem;
	font-weight:600;
	text-decoration:none;
}
.sg-d2r-cat:hover{
	color:var(--text);
	background:var(--card2);
	text-decoration:none;
}
.sg-d2r-cat.is-active{
	color:var(--gold);
	background:rgba(194,65,12,.08);
	border-left-color:var(--gold);
}

/* v1.9.167: no product counts in the category list (owner 2026-10-18) */

/* v1.9.5 Runewords collapsible tree (Runewords > slot > runeword) */
.sg-d2r-catgroup{ list-style:none; }
/* v1.9.42: parent-category expander button (drill-down menu). Resets the UA
 * button chrome, then takes the .sg-d2r-cat row look. */
button.sg-d2r-cat{
	width:100%;
	background:none;
	border:0;
	border-left:3px solid transparent;
	cursor:pointer;
	font-family:inherit;
	font-size:.9rem;
	font-weight:600;
	text-align:left;
	color:var(--muted);
	appearance:none;
	-webkit-appearance:none;
}
.sg-d2r-cat-parent .sg-d2r-cat-name{ flex:1 1 auto; min-width:0; }
.sg-d2r-caretd{
	flex:0 0 auto;
	display:inline-flex; align-items:center; justify-content:center;
	width:26px; height:26px;
	color:var(--muted2);
}
.sg-d2r-caretd svg{ transition:transform .15s ease; }
.sg-d2r-catgroup.is-open > .sg-d2r-cat-parent .sg-d2r-caretd svg{ transform:rotate(180deg); }
.sg-d2r-catgroup > .sg-d2r-sublist{ display:none; }
.sg-d2r-catgroup.is-open > .sg-d2r-sublist{ display:flex; }
.sg-d2r-sublist{
	list-style:none;
	margin:2px 0 4px 9px; padding:2px 0 2px 9px;
	border-left:1px solid var(--border);
	display:flex; flex-direction:column; gap:2px;
}

/* phones (≤900px): the category box (collapsible, the pick's name when closed; two columns) */
@media (max-width:900px){
	.sg-d2r-side{ min-width:0; }
	.sg-d2r-side{ position:static; border:1px solid var(--border); border-radius:14px; padding:12px; background:var(--surface); box-shadow:none; }
	/* v1.9.40: mobile categories mirror the POE2 "Select Category" box —
	 * collapsible via the header toggle, selected name shown when collapsed,
	 * orange-to-red border while a category is selected. */
	.sg-d2r-side-title{ display:none; }
	.sg-d2r-side-toggle{
		display:flex;justify-content:space-between;align-items:center;gap:8px;
		width:100%;margin:0 0 12px;padding:0;
		background:none;border:0;appearance:none;-webkit-appearance:none;cursor:pointer;
		font-family:var(--font-body);
		font-size:clamp(.82rem,3.6vw,.95rem);
		font-weight:600;
		color:var(--muted);
		text-align:left;
	}
	.sg-d2r-side-chev{display:inline-block;transition:transform .2s;color:var(--muted);font-size:1.3rem;line-height:1}
	.sg-d2r-side.is-collapsed .sg-d2r-side-chev{transform:rotate(-90deg)}
	.sg-d2r-side.is-collapsed .sg-d2r-cats{display:none}
	.sg-d2r-side.has-selection{
		border:2px solid transparent;
		background:
			linear-gradient(rgba(249,115,22,.10),rgba(249,115,22,.10)) padding-box,
			linear-gradient(var(--surface),var(--surface)) padding-box,
			linear-gradient(135deg,#f97316,#ef4444) border-box;
	}
	/* v1.9.41: the selected category name reads as selected — strong text,
	 * not muted — with an orange chevron. */
	.sg-d2r-side.has-selection .sg-d2r-side-toggle{ color:var(--text); }
	.sg-d2r-side.has-selection .sg-d2r-side-toggle-label{ font-weight:700; }
	.sg-d2r-side.has-selection .sg-d2r-side-chev{ color:#f97316; }
	.sg-d2r-cats{
		display:grid;
		grid-template-columns:1fr 1fr;
		gap:10px 14px;
		overflow:visible;
		padding-bottom:0;
	}
	.sg-d2r-cats > li{ min-width:0; }
	.sg-d2r-cat{
		display:flex;
		align-items:center;
		justify-content:flex-start;
		gap:8px;
		padding:0;
		min-height:30px;
		border:0;
		border-radius:0;
		background:none;
		color:var(--text);
		font-size:clamp(.8rem,3.6vw,.92rem);
		font-weight:400;
		line-height:1.3;
		white-space:normal;
	}
	/* Darren 2026-09-26: Remove checkbox styling - doesn't make sense */
	.sg-d2r-cat::before{
		display:none;
	}
	.sg-d2r-cat:hover{ color:var(--text); background:none; }
	.sg-d2r-cat .sg-d2r-cat-name{
		flex:1 1 auto;
		min-width:0;
		overflow:hidden;
		text-overflow:ellipsis;
		white-space:nowrap;
	}
	.sg-d2r-cat.is-active{
		color:var(--gold); /* v1.9.158 (review): was #ef4444, 3.18:1 light / 4.16:1 dark when the box is open */
		font-weight:700;
		background:none;
		border-left-color:transparent;
		border-bottom-color:transparent;
	}
		.sg-d2r-cat.is-active::before{
		display:none;
	}
	/* Darren 2026-09-26: Expanded category stays in its grid column, does not
	 * move or span. Sublist appears below within the same column. */
	.sg-d2r-catgroup.is-open{ grid-column:auto; }
	/* v1.9.42: parent expander buttons — no checkbox square, keep the caret;
	 * button reset values follow the mobile row values. */
	.sg-d2r-cat-parent::before{ display:none; }
	button.sg-d2r-cat{
		border:0;
		font-size:clamp(.8rem,3.6vw,.92rem);
		font-weight:400;
		color:var(--text);
	}
}

/* --- v1.9.126 desktop sidebar (owner pick "A7": path rail + chips) ------------------------
 * Desktop only (min-width:901px); the mobile category box above is unchanged. The new header
 * controls are hidden on mobile; since v1.9.159 the short labels show at every width (below). */
.sg-d2r-side-head .sg-d2r-collapse,.sg-d2r-filter,.sg-d2r-filter-none{ display:none; }
/* v1.9.159 (owner): the short label inside a group at every width (it was desktop only; phones showed the full name) */
.sg-d2r-cat-full{ display:none; }
.sg-d2r-side{ --sg-side-hl:#fff1e7; --sg-side-empty:#9a9893; }
[data-theme="dark"] .sg-d2r-side{ --sg-side-hl:rgba(249,115,22,.14); --sg-side-empty:#5f5650; }
@media (min-width:901px){
	.sg-d2r-side{
		padding:16px;
		border-radius:12px;
		display:flex; flex-direction:column; gap:12px;
		/* v1.9.160 (S160-4): below the sticky header whatever its height (it carries the search row at 861–1099px) */
		top:calc(var(--sg-header-h, 66px) + 26px);
		max-height:calc(100vh - var(--sg-header-h, 66px) - 44px); /* never taller than the screen: the list scrolls inside */
	}
	.sg-d2r-side-head{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
	.sg-d2r-side-head .sg-d2r-side-title{ margin:0; font-size:1.25rem; letter-spacing:.06em; text-transform:uppercase; }
	.sg-d2r-side-head .sg-d2r-collapse{
		display:inline; background:none; border:0; padding:4px 0; cursor:pointer;
		font:inherit; font-size:.75rem; font-weight:600; color:var(--gold);
	}
	.sg-d2r-side-head .sg-d2r-collapse:hover{ color:var(--gold-hover); text-decoration:underline; }
	.sg-d2r-filter{
		display:flex; align-items:center; gap:8px; height:38px; padding:0 12px;
		border:1px solid var(--border); border-radius:9px; background:var(--bg2); color:var(--muted2);
	}
	.sg-d2r-filter:focus-within{ border-color:var(--gold-light); box-shadow:0 0 0 3px rgba(249,115,22,.15); }
	.sg-d2r-filter input{ border:0; outline:none; background:transparent; font:inherit; font-size:.875rem; color:var(--text); width:100%; min-width:0; }
	.sg-d2r-filter-none:not([hidden]){ display:block; margin:0; font-size:.8rem; color:var(--muted2); }
	.sg-d2r-cats{ overflow-y:auto; min-height:0; margin:0; padding-right:2px; gap:1px; }
	.sg-d2r-oos-form{ flex-shrink:0; padding-top:10px; border-top:1px solid var(--border); }

	/* rows: plain counts, short labels; the arrow sits left of the name (closed ›, open ⌄) so
	 * every count lines up on the right */
	.sg-d2r-cat, button.sg-d2r-cat{ padding:6px 8px 6px 36px; min-height:32px; box-sizing:border-box; font-size:.875rem; font-weight:500; color:var(--muted); border-left:0; border-radius:8px; position:relative; }
	button.sg-d2r-cat-parent{ padding-left:8px; justify-content:flex-start; }
	.sg-d2r-cat-parent .sg-d2r-caretd{ order:-1; width:14px; height:14px; margin-right:6px; }
	.sg-d2r-cat-parent .sg-d2r-cat-name{ flex:1 1 auto; }
	.sg-d2r-cat-parent .sg-d2r-caretd svg{ transform:rotate(-90deg); }
	.sg-d2r-catgroup.is-open > .sg-d2r-cat-parent .sg-d2r-caretd svg{ transform:rotate(0deg); }
	.sg-d2r-filter input{ height:36px; }
	.sg-d2r-cat-full{ display:none; }
	.sg-d2r-cat-short{ display:inline; }

	/* the current path: highlighted top row, orange rail on its open sub-lists */
	.sg-d2r-cats > .sg-d2r-catgroup.is-path > .sg-d2r-cat-parent{ background:var(--sg-side-hl); color:var(--gold); font-weight:700; }
	.sg-d2r-sublist .sg-d2r-catgroup.is-path > .sg-d2r-cat-parent{ color:var(--gold); font-weight:700; }
	.sg-d2r-catgroup.is-path > .sg-d2r-cat-parent .sg-d2r-caretd{ color:var(--gold); }
	.sg-d2r-sublist{ margin:2px 0 6px 10px; padding:2px 0 2px 8px; border-left:1px solid var(--border); }
	.sg-d2r-catgroup.is-path > .sg-d2r-sublist{ border-left:3px solid var(--gold-light); }
	.sg-d2r-cat.is-active{ background:var(--sg-side-hl); color:var(--gold); font-weight:700; border-left:0; box-shadow:inset 0 0 0 1px var(--border-gold); }

	/* long leaf lists: two-column chips in a short scrolling box */
	.sg-d2r-sublist--chips{
		display:none; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px;
		max-height:320px; overflow-y:auto; align-content:start;
		margin:6px 0 8px 8px; padding:0; border-left:0 !important;
	}
	.sg-d2r-catgroup.is-open > .sg-d2r-sublist--chips{ display:grid; }
	.sg-d2r-sublist--chips > li{ min-width:0; }
	.sg-d2r-sublist--chips .sg-d2r-cat{
		gap:4px; padding:6px 8px; min-height:0; border-radius:7px; font-size:.8rem; font-weight:600;
		background:var(--bg2); color:var(--text); min-width:0;
	}
	.sg-d2r-sublist--chips .sg-d2r-cat .sg-d2r-cat-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
	.sg-d2r-sublist--chips .sg-d2r-cat:hover{ background:var(--sg-side-hl); color:var(--gold); }
	.sg-d2r-sublist--chips .sg-d2r-cat.is-active{ background:#ea580c; color:#ffffff; box-shadow:none; }

	/* the filter hides what does not match */
	.sg-d2r-cats .is-filtered-out{ display:none !important; }
}

/* v1.9.147/148 (owner: "it should be like d2r"): a top-level group whose sub-categories are chips
 * (D4 Uniques, Aspects) carries the path rail itself — nested chips sit inside a railed group */
@media (min-width:901px){
	.sg-d2r-cats > .sg-d2r-catgroup.is-path.is-open > .sg-d2r-sublist--chips{ margin-left:10px; padding-left:8px; border-left:3px solid var(--gold-light) !important; }
}