/*
##==============================================================================================================================================================================##
## BOXARR - Grabbers aggregator CS3 (LOOK stub)                                                                                                                                 ##
##  · Description:             Uniform grabber identity. SoT SVC_PALETTE distinct title/bg/trim; Queue faces + Fetcharr nests share --grabber-title/bg/trim.                                            ##
##  · Location:                /styles/grabbers/                                                                                                                                ##
##  · Last updated:            2026-09-29 @ 1800 EDT - Named Control grabber order + Cardarr→Kapowarr palette
##==============================================================================================================================================================================##
*/

/* Canonical Servarr Grabber order (Conner 2026-09-29) — same Add / Credentials / Servarr / Pipeline / Queue. */
@import url("/demo/styles/grabbers/sonarr.cs3?v=colorlock-1");
@import url("/demo/styles/grabbers/radarr.cs3?v=colorlock-1");
@import url("/demo/styles/grabbers/sportarr.cs3?v=colorlock-1");
@import url("/demo/styles/grabbers/youtubarr.cs3?v=colorlock-1");
@import url("/demo/styles/grabbers/lidarr.cs3?v=trim-title-2");
@import url("/demo/styles/grabbers/soularr.cs3?v=trim-title-2");
@import url("/demo/styles/grabbers/readarr.cs3?v=colorlock-1");
@import url("/demo/styles/grabbers/listenarr.cs3?v=colorlock-1");
@import url("/demo/styles/grabbers/kapowarr.cs3?v=colorlock-1");
@import url("/demo/styles/grabbers/romarr.cs3?v=colorlock-1");
@import url("/demo/styles/grabbers/questarr.cs3?v=colorlock-1");
@import url("/demo/styles/grabbers/whisparr.cs3?v=colorlock-1");

/* Face stubs retained (not in the named thirteen). Cardarr Prefer Copy Kapowarr palette (twin of comics/cards). */
@import url("/demo/styles/grabbers/prowlarr.cs3?v=colorlock-1");
@import url("/demo/styles/grabbers/bazarr.cs3?v=colorlock-1");
@import url("/demo/styles/grabbers/fetcharr.cs3?v=colorlock-1");

.grabber-face
{
	border: 1px solid var(--borderColor, #555);
	border-radius: 8px;
	overflow: hidden;
	background: var(--grabber-bg, transparent);
}

.grabber-face-head
{
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.4rem 0.5rem;
	font-weight: 650;
	font-size: 0.85rem;
}

.grabber-face-body { padding: 0.45rem; font-size: 0.78rem; }
.grabber-face-status { font-size: 0.75rem; padding: 0.2rem 0.5rem 0.45rem; }
.grabber-face-trim { border-left: 3px solid var(--grabber-trim, #555); }
.grabber-face-label { min-width: 3.5rem; display: inline-block; opacity: 0.85; }

.grabber-color-queue
{
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-top: 0.5rem;
	container-type: inline-size;
	container-name: grabber-color-queue;
}

.grabber-order-note
{
	margin: 0.35rem 0 0.5rem;
	font-size: 0.78rem;
	line-height: 1.35;
	opacity: 0.9;
}

.grabber-stack
{
	border: 1px solid var(--borderColor, #555);
	border-radius: 8px;
	overflow: hidden;
	background: color-mix(in srgb, var(--panelFill, #222) 88%, #000);
}

.grabber-stack > .svc-nest-head
{
	display: flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.4rem 0.55rem;
	font-weight: 650;
	font-size: 0.88rem;
	border-bottom: 1px solid var(--borderColor, #555);
}

.grabber-stack > .svc-nest-head .side-card-ico
{
	flex: 0 0 auto;
}

.grabber-stack > .svc-nest-head .fold-chev
{
	margin-left: auto;
}

.grabber-stack-body
{
	padding: 0.45rem 0.55rem 0.55rem;
}

.grabber-stack[data-fold="up"] > .grabber-stack-body,
.grabber-stack.is-folded > .grabber-stack-body
{
	display: none;
}

.grabber-color-table
{
	width: 100%;
	border-collapse: collapse;
	font-size: 0.8rem;
	table-layout: auto;
}

.grabber-color-table th,
.grabber-color-table td
{
	border: 1px solid var(--borderColor, #555);
	padding: 0.4rem 0.5rem;
	vertical-align: middle;
	text-align: left;
}

.grabber-color-table thead th
{
	background: color-mix(in srgb, var(--panelFill, #222) 80%, #000);
	font-weight: 650;
}

.grabber-color-table code { font-size: 0.72rem; margin-left: 0.35rem; }

.grabber-color-table .swatch
{
	display: inline-block;
	width: 1.1rem;
	height: 1.1rem;
	border-radius: 3px;
	border: 1px solid #888;
	vertical-align: middle;
}

.grabber-color-table .swatch-title { background: var(--swatch-title); }
.grabber-color-table .swatch-bg { background: var(--swatch-bg); }
.grabber-color-table .swatch-trim { background: var(--swatch-trim); }

.grabber-color-table .grabber-face { min-width: 10rem; max-width: 14rem; }

/* Face sample drops when the table host is too narrow; Grabber / Title / BG / Trim reflow. */
.grabber-color-table .col-face-sample
{
	width: 12rem;
}

@container grabber-color-queue (max-width: 52rem)
{
	.grabber-color-table .col-face-sample
	{
		display: none;
	}
}

.grabber-color-queue.is-order-violation,
.grabber-stack.is-order-violation
{
	outline: 2px solid #ff5555;
	outline-offset: 2px;
}

/*
##==============================================================================================================================================================================##
## Identity host — any [data-grabber] (Queue row / Queue face / Fetcharr nest) gets title / bg / trim. Hex lives only in styles/grabbers/<name>.cs3 :root.                      ##
##==============================================================================================================================================================================##
*/

[data-grabber="sonarr" i],
.is-grabber-Sonarr
{
	--grabber-title: var(--grabber-Sonarr-title);
	--grabber-bg: var(--grabber-Sonarr-bg);
	--grabber-trim: var(--grabber-Sonarr-trim);
}

[data-grabber="radarr" i],
.is-grabber-Radarr
{
	--grabber-title: var(--grabber-Radarr-title);
	--grabber-bg: var(--grabber-Radarr-bg);
	--grabber-trim: var(--grabber-Radarr-trim);
}

[data-grabber="sportarr" i],
.is-grabber-Sportarr
{
	--grabber-title: var(--grabber-Sportarr-title);
	--grabber-bg: var(--grabber-Sportarr-bg);
	--grabber-trim: var(--grabber-Sportarr-trim);
}

[data-grabber="youtubarr" i],
.is-grabber-Youtubarr
{
	--grabber-title: var(--grabber-Youtubarr-title);
	--grabber-bg: var(--grabber-Youtubarr-bg);
	--grabber-trim: var(--grabber-Youtubarr-trim);
}

[data-grabber="lidarr" i],
.is-grabber-Lidarr
{
	--grabber-title: var(--grabber-Lidarr-title);
	--grabber-bg: var(--grabber-Lidarr-bg);
	--grabber-trim: var(--grabber-Lidarr-trim);
}

[data-grabber="soularr" i],
.is-grabber-Soularr
{
	--grabber-title: var(--grabber-Soularr-title);
	--grabber-bg: var(--grabber-Soularr-bg);
	--grabber-trim: var(--grabber-Soularr-trim);
}

[data-grabber="readarr" i],
.is-grabber-Readarr
{
	--grabber-title: var(--grabber-Readarr-title);
	--grabber-bg: var(--grabber-Readarr-bg);
	--grabber-trim: var(--grabber-Readarr-trim);
}

[data-grabber="listenarr" i],
.is-grabber-Listenarr
{
	--grabber-title: var(--grabber-Listenarr-title);
	--grabber-bg: var(--grabber-Listenarr-bg);
	--grabber-trim: var(--grabber-Listenarr-trim);
}

[data-grabber="kapowarr" i],
.is-grabber-Kapowarr,
[data-grabber="cardarr" i],
.is-grabber-Cardarr
{
	--grabber-title: var(--grabber-Kapowarr-title);
	--grabber-bg: var(--grabber-Kapowarr-bg);
	--grabber-trim: var(--grabber-Kapowarr-trim);
}

[data-grabber="questarr" i],
.is-grabber-Questarr
{
	--grabber-title: var(--grabber-Questarr-title);
	--grabber-bg: var(--grabber-Questarr-bg);
	--grabber-trim: var(--grabber-Questarr-trim);
}

[data-grabber="romarr" i],
.is-grabber-Romarr
{
	--grabber-title: var(--grabber-Romarr-title);
	--grabber-bg: var(--grabber-Romarr-bg);
	--grabber-trim: var(--grabber-Romarr-trim);
}

[data-grabber="whisparr" i],
.is-grabber-Whisparr
{
	--grabber-title: var(--grabber-Whisparr-title);
	--grabber-bg: var(--grabber-Whisparr-bg);
	--grabber-trim: var(--grabber-Whisparr-trim);
}

[data-grabber="prowlarr" i],
.is-grabber-Prowlarr
{
	--grabber-title: var(--grabber-Prowlarr-title);
	--grabber-bg: var(--grabber-Prowlarr-bg);
	--grabber-trim: var(--grabber-Prowlarr-trim);
}

[data-grabber="bazarr" i],
.is-grabber-Bazarr
{
	--grabber-title: var(--grabber-Bazarr-title);
	--grabber-bg: var(--grabber-Bazarr-bg);
	--grabber-trim: var(--grabber-Bazarr-trim);
}

[data-grabber="fetcharr" i],
.is-grabber-Fetcharr
{
	--grabber-title: var(--grabber-Fetcharr-title);
	--grabber-bg: var(--grabber-Fetcharr-bg);
	--grabber-trim: var(--grabber-Fetcharr-trim);
}

.grabber-color-row
{
	--swatch-title: var(--grabber-title);
	--swatch-bg: var(--grabber-bg);
	--swatch-trim: var(--grabber-trim);
	background: color-mix(in srgb, var(--grabber-bg) 88%, #000);
	color: var(--grabber-title);
}

.grabber-color-row th,
.grabber-color-row td
{
	border-color: color-mix(in srgb, var(--grabber-trim) 55%, #555);
	color: var(--grabber-title);
}

.grabber-color-row .grabber-name
{
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
}

.grabber-color-row .grabber-name .svc-icon,
.grabber-color-row .grabber-name .svc-icon svg,
.grabber-color-row .grabber-name .svc-icon .svc-family-svg
{
	width: 48px;
	height: 48px;
	min-width: 48px;
	min-height: 48px;
	flex: 0 0 48px;
}

.grabber-color-row code
{
	color: var(--grabber-title);
}

/*
##==============================================================================================================================================================================##
## Fetcharr nest chrome — same tokens as Queue .grabber-face / .grabber-face-trim. No per-nest hex.                                                                              ##
##==============================================================================================================================================================================##
*/

.fetch-grabber-nest
{
	border-color: color-mix(in srgb, var(--grabber-trim) 55%, var(--gold, #cca37f));
	border-left: 3px solid var(--grabber-trim);
	background: color-mix(in srgb, var(--grabber-bg) 80%, transparent);
	box-shadow: none;
}

.fetch-grabber-nest > .fetch-step-head
{
	color: var(--grabber-title);
	background: var(--grabber-bg);
	border-bottom: 1px solid var(--grabber-trim);
}

.fetch-grabber-nest > .fetch-step-head .fetch-grabber-name,
.fetch-grabber-nest .grabber-face-label
{
	color: var(--grabber-title);
}

/* MURDERBOT / constitution §30.6 / WILL-NOT 8. FetcharrBuildGP ONLY.
   Grabber-format = domain grabber nests + Fetcharr "What this step does" (.fetch-explain-nest)
   on every pipeline step. Glyph = pack #grabber-cheverons (explain = fetcharr mark). 18x18.
   Do NOT plaque, mask, tint, currentColor, or swap to pack #down.
   Gold folds stay on master / step / Servarr only — explain is grabber-format now.
   Pack art is #up-in-box. Inner svg 180deg so boxarr.cs3 #down fold rotates still apply.
   Touch this and Murderbot will get you. */
.fetch-grabber-nest > .fetch-step-head .fold-chev,
.fetch-explain-nest > .fetch-step-head .fold-chev,
#tab-fetcharr .fetch-grabber-nest[data-grabber] > .fetch-step-head .fold-chev,
#tab-fetcharr .fetch-explain-nest > .fetch-step-head .fold-chev,
#tab-fetcharr .fetch-steps .fetch-explain-nest > .fetch-step-head .fold-chev,
#fetcharr-step-light [data-grabber] .fold-chev,
#fetcharr-step-light [data-light-dl] .fold-chev
{
	width: 18px !important;
	height: 18px !important;
	min-width: 18px !important;
	min-height: 18px !important;
	flex: 0 0 18px !important;
	padding: 0;
	border: none !important;
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
	box-sizing: border-box;
	color: unset !important;
	fill: unset !important;
}

.fetch-grabber-nest > .fetch-step-head .fold-chev .ui-ico,
.fetch-grabber-nest > .fetch-step-head .fold-chev .ui-ico-chevron,
.fetch-explain-nest > .fetch-step-head .fold-chev .ui-ico,
.fetch-explain-nest > .fetch-step-head .fold-chev .ui-ico-chevron,
#tab-fetcharr .fetch-grabber-nest[data-grabber] > .fetch-step-head .fold-chev .ui-ico,
#tab-fetcharr .fetch-grabber-nest[data-grabber] > .fetch-step-head .fold-chev .ui-ico-chevron,
#tab-fetcharr .fetch-explain-nest > .fetch-step-head .fold-chev .ui-ico,
#tab-fetcharr .fetch-explain-nest > .fetch-step-head .fold-chev .ui-ico-chevron,
#tab-fetcharr .fetch-steps .fetch-explain-nest > .fetch-step-head .fold-chev .ui-ico,
#tab-fetcharr .fetch-steps .fetch-explain-nest > .fetch-step-head .fold-chev .ui-ico-chevron,
#fetcharr-step-light [data-grabber] .fold-chev .ui-ico,
#fetcharr-step-light [data-grabber] .fold-chev .ui-ico-chevron,
#fetcharr-step-light [data-light-dl] .fold-chev .ui-ico,
#fetcharr-step-light [data-light-dl] .fold-chev .ui-ico-chevron
{
	width: 18px !important;
	height: 18px !important;
	min-width: 18px !important;
	min-height: 18px !important;
	color: unset !important;
	background: none !important;
	background-color: transparent !important;
	-webkit-mask: none !important;
	mask: none !important;
}

.fetch-grabber-nest > .fetch-step-head .fold-chev .ui-ico-svg,
.fetch-explain-nest > .fetch-step-head .fold-chev .ui-ico-svg,
#tab-fetcharr .fetch-grabber-nest[data-grabber] > .fetch-step-head .fold-chev .ui-ico-svg,
#tab-fetcharr .fetch-explain-nest > .fetch-step-head .fold-chev .ui-ico-svg,
#tab-fetcharr .fetch-steps .fetch-explain-nest > .fetch-step-head .fold-chev .ui-ico-svg,
#fetcharr-step-light [data-grabber] .fold-chev .ui-ico-svg,
#fetcharr-step-light [data-light-dl] .fold-chev .ui-ico-svg
{
	width: 100% !important;
	height: 100% !important;
	opacity: 1 !important;
	background: none !important;
	fill: unset !important;
	color: unset !important;
	transform: rotate(180deg);
	transform-origin: center;
}

.fetch-grabber-nest > .fetch-step-head .fold-chev .ui-ico-svg use,
.fetch-explain-nest > .fetch-step-head .fold-chev .ui-ico-svg use,
#tab-fetcharr .fetch-grabber-nest[data-grabber] > .fetch-step-head .fold-chev .ui-ico-svg use,
#tab-fetcharr .fetch-explain-nest > .fetch-step-head .fold-chev .ui-ico-svg use,
#tab-fetcharr .fetch-steps .fetch-explain-nest > .fetch-step-head .fold-chev .ui-ico-svg use,
#fetcharr-step-light [data-grabber] .fold-chev .ui-ico-svg use,
#fetcharr-step-light [data-light-dl] .fold-chev .ui-ico-svg use
{
	fill: unset !important;
	color: unset !important;
}

/* Grabber-format left ico: explain was 1.15rem vs grabber 1.05rem — made the Fetcharr chev look smaller. */
.fetch-explain-nest > .fetch-step-head .svc-icon,
#tab-fetcharr .fetch-explain-nest > .fetch-step-head .svc-icon
{
	width: 1.05rem;
	height: 1.05rem;
	flex: 0 0 1.05rem;
}