/* ARRL Band Plan — front-end styles
   Everything is scoped under .arbp so it won't fight the active theme. */

.arbp,
.arbp *,
.arbp *::before,
.arbp *::after { box-sizing: border-box; }

.arbp {
	/* Mode color key (shared across themes) */
	--m-cw:     #f6b53c;
	--m-phone:  #ff7a5c;
	--m-data:   #4ea3ff;
	--m-fm:     #a982ff;
	--m-beacon: #ff5fa2;
	--m-sat:    #2ad4a7;
	--m-image:  #e0c93f;
	--m-exp:    #8f9bab;
	--m-other:  #6b7785;

	--arbp-accent: #2bd4a7;
	--arbp-allow: #34c77d;   /* "you may operate here" highlight */
	--mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", "Fira Code", "Cascadia Code", Menlo, Consolas, monospace;
	--sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	font-family: var(--sans);
	line-height: 1.45;
	color: var(--text);
	background: var(--bg);
	border-radius: 14px;
	padding: clamp(16px, 3vw, 28px);
	max-width: 100%;
	-webkit-font-smoothing: antialiased;
}

/* ---- Themes ---------------------------------------------------------- */
.arbp--dark {
	--bg: #0e1419; --panel: #151d26; --panel-2: #1b2531;
	--line: #26323f; --line-soft: #1d2733;
	--text: #e7eef4; --muted: #8b97a5; --strong: #ffffff;
	--track: #0a0f14;
}
.arbp--light {
	--bg: #f6f9fb; --panel: #ffffff; --panel-2: #eef3f7;
	--line: #e0e8ee; --line-soft: #eef3f7;
	--text: #15202b; --muted: #5b6976; --strong: #0a1219;
	--track: #eef3f7;
}
.arbp--auto {
	--bg: #f6f9fb; --panel: #ffffff; --panel-2: #eef3f7;
	--line: #e0e8ee; --line-soft: #eef3f7;
	--text: #15202b; --muted: #5b6976; --strong: #0a1219;
	--track: #eef3f7;
}
@media (prefers-color-scheme: dark) {
	.arbp--auto {
		--bg: #0e1419; --panel: #151d26; --panel-2: #1b2531;
		--line: #26323f; --line-soft: #1d2733;
		--text: #e7eef4; --muted: #8b97a5; --strong: #ffffff;
		--track: #0a0f14;
	}
}

/* ---- Button reset ---------------------------------------------------- */
/* Host themes (e.g. Twenty Fourteen) style raw <button> elements with their
   own background, box-shadow and text-shadow — including on :hover/:focus/
   :active. Neutralize that chrome here so our component styles fully control
   the look. These properties are never set meaningfully by our components,
   so this is safe at any specificity. Per-component background/color are
   handled in their own rules below (across every interaction state). */
.arbp button,
.arbp button:hover,
.arbp button:focus,
.arbp button:active {
	-webkit-appearance: none;
	appearance: none;
	background-image: none;
	box-shadow: none;
	text-shadow: none;
	text-transform: none;
}

/* ---- Masthead -------------------------------------------------------- */
.arbp__masthead { margin-bottom: 18px; }
.arbp__eyebrow {
	display: inline-block;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--arbp-accent);
	margin-bottom: 6px;
}
.arbp__title-wrap { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.arbp__title {
	margin: 0;
	font-size: clamp(22px, 4vw, 32px);
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--strong);
	line-height: 1.05;
}
.arbp__callsign {
	font-family: var(--mono);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--arbp-accent);
	border: 1px solid color-mix(in srgb, var(--arbp-accent) 45%, transparent);
	background: color-mix(in srgb, var(--arbp-accent) 12%, transparent);
	padding: 3px 9px;
	border-radius: 999px;
}
.arbp__toggles { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; align-self: center; }
/* When the heading is shown, drop the toggles onto their own line below it. */
.arbp__title-wrap--stacked .arbp__toggles { flex-basis: 100%; align-self: stretch; margin-top: 2px; }
.arbp__intro {
	margin: 10px 0 0;
	color: var(--muted);
	font-size: 14.5px;
	max-width: 60ch;
}

/* Masthead toggles (color-blind mode + light/dark theme) share one look */
.arbp__cvd,
.arbp__theme {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	align-self: center;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.03em;
	color: var(--muted);
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 4px 9px 4px 10px;
	cursor: pointer;
	transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.arbp__cvd:hover,
.arbp__theme:hover { color: var(--text); border-color: var(--muted); }
.arbp__cvd:focus-visible,
.arbp__theme:focus-visible { outline: 2px solid var(--arbp-accent); outline-offset: 2px; }
.arbp__cvd-icon,
.arbp__theme-icon { flex: none; }
.arbp__cvd-label,
.arbp__theme-label { white-space: nowrap; }
.arbp__cvd-knob,
.arbp__theme-knob {
	position: relative;
	width: 22px; height: 12px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--muted) 42%, transparent);
	flex: none;
	transition: background .15s ease;
}
.arbp__cvd-knob::before,
.arbp__theme-knob::before {
	content: "";
	position: absolute; top: 1px; left: 1px;
	width: 10px; height: 10px;
	border-radius: 50%;
	background: var(--strong);
	transition: transform .15s ease;
}
.arbp__cvd[aria-checked="true"],
.arbp__theme[aria-checked="true"] {
	color: var(--strong);
	border-color: color-mix(in srgb, var(--arbp-accent) 60%, var(--line));
	background: color-mix(in srgb, var(--arbp-accent) 14%, var(--panel));
}
.arbp__cvd[aria-checked="true"] .arbp__cvd-knob,
.arbp__theme[aria-checked="true"] .arbp__theme-knob { background: var(--arbp-accent); }
.arbp__cvd[aria-checked="true"] .arbp__cvd-knob::before,
.arbp__theme[aria-checked="true"] .arbp__theme-knob::before { transform: translateX(10px); background: #06120e; }

/* ---- Toolbar --------------------------------------------------------- */
.arbp__toolbar {
	display: flex;
	gap: 14px;
	align-items: center;
	flex-wrap: wrap;
	margin: 18px 0 10px;
}
.arbp__search { flex: 1 1 280px; position: relative; }
.arbp__search::before {
	content: "";
	position: absolute; left: 13px; top: 50%;
	width: 14px; height: 14px; transform: translateY(-50%);
	background:
		radial-gradient(circle at 6px 6px, transparent 3.4px, var(--muted) 3.6px 4.6px, transparent 4.8px);
	-webkit-mask: none;
	opacity: .8;
	pointer-events: none;
}
.arbp__search-input {
	width: 100%;
	font-family: var(--mono);
	font-size: 13.5px;
	color: var(--text);
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 11px 14px 11px 34px;
	outline: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.arbp__search-input::placeholder { color: var(--muted); }
.arbp__search-input:focus {
	border-color: var(--arbp-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--arbp-accent) 22%, transparent);
}

.arbp__filters { display: flex; gap: 8px; flex-wrap: wrap; }
.arbp__chip {
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 0.04em;
	color: var(--muted);
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 7px 13px;
	cursor: pointer;
	transition: all .14s ease;
}
.arbp__chip:hover,
.arbp__chip:focus,
.arbp__chip:active { background: var(--panel); }
.arbp__chip:focus-visible { outline: 2px solid var(--arbp-accent); outline-offset: 2px; }
.arbp__chip:hover { color: var(--text); border-color: var(--muted); }
.arbp__chip.is-active,
.arbp__chip.is-active:hover,
.arbp__chip.is-active:focus,
.arbp__chip.is-active:active {
	color: #06120e;
	background: var(--arbp-accent);
	border-color: var(--arbp-accent);
	font-weight: 600;
}
.arbp--dark .arbp__chip.is-active,
.arbp--auto .arbp__chip.is-active { color: #06120e; }

/* ---- Legend ---------------------------------------------------------- */
.arbp__legend {
	list-style: none;
	display: flex; flex-wrap: wrap; gap: 6px 16px;
	padding: 12px 14px;
	margin: 0 0 16px;
	background: var(--panel);
	border: 1px solid var(--line-soft);
	border-radius: 10px;
	font-size: 12px;
	color: var(--muted);
}
.arbp__legend-item { display: inline-flex; align-items: center; gap: 7px; }
.arbp__swatch { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.arbp__swatch--cw { background: var(--m-cw); }
.arbp__swatch--phone { background: var(--m-phone); }
.arbp__swatch--data { background: var(--m-data); }
.arbp__swatch--fm { background: var(--m-fm); }
.arbp__swatch--beacon { background: var(--m-beacon); }
.arbp__swatch--sat { background: var(--m-sat); }
.arbp__swatch--image { background: var(--m-image); }
.arbp__swatch--exp { background: var(--m-exp); }
.arbp__swatch--other { background: var(--m-other); }

/* ---- Band cards ------------------------------------------------------ */
.arbp__bands { display: flex; flex-direction: column; gap: 10px; }
.arbp__band {
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 12px;
	overflow: hidden;
	transition: border-color .15s ease;
}
.arbp__band.is-open { border-color: color-mix(in srgb, var(--arbp-accent) 55%, var(--line)); }
.arbp__band[hidden] { display: none; }

.arbp__band-head {
	display: grid;
	grid-template-columns: auto 1fr auto auto auto auto;
	align-items: center;
	gap: 12px;
	width: 100%;
	text-align: left;
	background: transparent;
	border: 0;
	cursor: pointer;
	padding: 16px 18px;
	color: var(--text);
	font-family: var(--sans);
}
.arbp__band-head:hover,
.arbp__band-head:focus,
.arbp__band-head:active {
	background: transparent;
	color: var(--text);
}
.arbp--compact .arbp__band-head { padding: 11px 16px; }
.arbp__band-head:focus-visible {
	outline: 2px solid var(--arbp-accent);
	outline-offset: -3px;
}
.arbp__band-cat {
	font-family: var(--mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 4px 8px;
	border-radius: 6px;
	white-space: nowrap;
	border: 1px solid transparent;
}
.arbp__band-cat--mf  { color: #c9a227; background: rgba(201,162,39,.13); border-color: rgba(201,162,39,.3); }
.arbp__band-cat--hf  { color: var(--m-data); background: color-mix(in srgb, var(--m-data) 13%, transparent); border-color: color-mix(in srgb, var(--m-data) 32%, transparent); }
.arbp__band-cat--vhf { color: var(--m-sat); background: color-mix(in srgb, var(--m-sat) 13%, transparent); border-color: color-mix(in srgb, var(--m-sat) 32%, transparent); }
.arbp__band-cat--uhf { color: var(--m-fm); background: color-mix(in srgb, var(--m-fm) 14%, transparent); border-color: color-mix(in srgb, var(--m-fm) 32%, transparent); }
.arbp__band-cat--shf { color: var(--m-beacon); background: color-mix(in srgb, var(--m-beacon) 13%, transparent); border-color: color-mix(in srgb, var(--m-beacon) 32%, transparent); }

.arbp__band-name { font-size: 17px; font-weight: 700; color: var(--strong); min-width: 0; }
.arbp--compact .arbp__band-name { font-size: 15px; }
.arbp__band-range { font-family: var(--mono); font-size: 13px; color: var(--muted); white-space: nowrap; }
.arbp__band-count {
	font-family: var(--mono); font-size: 11px; color: var(--muted);
	white-space: nowrap; opacity: .8;
}
.arbp__caret { color: var(--muted); transition: transform .2s ease; flex: none; }
.arbp__band.is-open .arbp__caret { transform: rotate(180deg); color: var(--arbp-accent); }

/* ---- Signature: the spectrum strip ----------------------------------- */
.arbp__spectrum {
	position: relative;
	height: 44px;
	margin: 0 18px 14px;
	background: var(--track);
	border: 1px solid var(--line-soft);
	border-radius: 8px;
	background-image:
		repeating-linear-gradient(90deg, transparent, transparent 9.9%, color-mix(in srgb, var(--muted) 16%, transparent) 10%, color-mix(in srgb, var(--muted) 16%, transparent) calc(10% + 1px));
	overflow: hidden;
}
.arbp--compact .arbp__spectrum { height: 34px; }
.arbp__seg {
	position: absolute;
	top: 6px; bottom: 16px;
	min-width: 2px;
	border-radius: 3px;
	background: var(--m-other);
	opacity: .9;
	transition: transform .12s ease, opacity .12s ease, box-shadow .12s ease;
	cursor: default;
}
.arbp--compact .arbp__spectrum .arbp__seg { bottom: 12px; }
.arbp__seg.is-tick { top: 4px; bottom: 14px; border-radius: 1px; opacity: 1; }
.arbp__seg:hover {
	opacity: 1;
	transform: scaleY(1.12);
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--strong) 30%, transparent);
	z-index: 4;
}
/* When color-by-mode is off, paint everything in the accent */
.arbp[data-color="0"] .arbp__seg { background: var(--arbp-accent) !important; }
.arbp[data-color="0"] .arbp__dot { background: var(--arbp-accent) !important; }

.arbp__seg--cw { background: var(--m-cw); }
.arbp__seg--phone { background: var(--m-phone); }
.arbp__seg--data { background: var(--m-data); }
.arbp__seg--fm { background: var(--m-fm); }
.arbp__seg--beacon { background: var(--m-beacon); }
.arbp__seg--sat { background: var(--m-sat); }
.arbp__seg--image { background: var(--m-image); }
.arbp__seg--exp { background: var(--m-exp); }
.arbp__seg--other { background: var(--m-other); }

.arbp__seg[data-tip]:hover::after {
	content: attr(data-tip);
	position: absolute;
	left: 50%; bottom: calc(100% + 6px);
	transform: translateX(-50%);
	white-space: nowrap;
	max-width: 60vw;
	overflow: hidden; text-overflow: ellipsis;
	font-family: var(--mono); font-size: 11px;
	color: var(--strong);
	background: var(--panel-2);
	border: 1px solid var(--line);
	padding: 5px 8px; border-radius: 6px;
	box-shadow: 0 6px 20px rgba(0,0,0,.25);
	pointer-events: none; z-index: 6;
}
.arbp__scale {
	position: absolute; inset: auto 8px 3px;
	display: flex; justify-content: space-between;
	font-family: var(--mono); font-size: 9.5px; color: var(--muted);
	pointer-events: none;
}

/* ---- Band body / table ----------------------------------------------- */
.arbp__band-body { padding: 0 18px 18px; }
.arbp__band-body[hidden] { display: none; }

.arbp__table { width: 100%; border-collapse: collapse; font-size: 14px; }
.arbp__table thead th {
	text-align: left;
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
	font-weight: 600;
	padding: 6px 10px;
	border-bottom: 1px solid var(--line);
}
.arbp__row td {
	padding: 9px 10px;
	border-bottom: 1px solid var(--line-soft);
	vertical-align: top;
}
.arbp--compact .arbp__row td { padding: 6px 10px; }
.arbp__row:last-child td { border-bottom: 0; }
.arbp__row:hover td { background: color-mix(in srgb, var(--arbp-accent) 6%, transparent); }
.arbp__row[hidden] { display: none; }

.arbp__freq {
	font-family: var(--mono);
	font-size: 13px;
	color: var(--strong);
	white-space: nowrap;
	width: 1%;
}
.arbp__dot {
	display: inline-block;
	width: 14px; height: 14px;
	border-radius: 50%;
	margin-right: 10px;
	vertical-align: -2px;
	background: var(--m-other);
	border: 1px solid color-mix(in srgb, var(--strong) 18%, transparent);
}
.arbp__dot--cw { background: var(--m-cw); }
.arbp__dot--phone { background: var(--m-phone); }
.arbp__dot--data { background: var(--m-data); }
.arbp__dot--fm { background: var(--m-fm); }
.arbp__dot--beacon { background: var(--m-beacon); }
.arbp__dot--sat { background: var(--m-sat); }
.arbp__dot--image { background: var(--m-image); }
.arbp__dot--exp { background: var(--m-exp); }
.arbp__dot--other { background: var(--m-other); }

.arbp__use { color: var(--text); }
.arbp__comment {
	display: block;
	font-size: 12px;
	color: var(--muted);
	margin-top: 2px;
	font-style: italic;
}

/* ---- Notes ----------------------------------------------------------- */
.arbp__notes {
	margin-top: 14px;
	padding: 12px 14px;
	background: var(--panel-2);
	border-left: 3px solid var(--arbp-accent);
	border-radius: 0 8px 8px 0;
}
.arbp__notes-label {
	display: block;
	font-family: var(--mono);
	font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
	color: var(--arbp-accent);
	margin-bottom: 6px;
}
.arbp__notes ul { margin: 0; padding-left: 18px; }
.arbp__notes li { font-size: 13px; color: var(--muted); margin: 4px 0; }
.arbp__notes a { color: var(--arbp-accent); word-break: break-word; }

/* ---- Color-blind mode ------------------------------------------------ */
/* Engaged via the masthead toggle (adds .arbp--cvd). Two reinforcing layers:
   (1) a CVD-safe, high-contrast palette (Okabe–Ito based), and
   (2) a distinct TEXTURE per mode, so allocations stay distinguishable even
   with full color blindness — pattern, not hue, carries the meaning.
   We set only background-image here; the background-color keeps coming from
   the --m-* custom properties, so both layers compose cleanly. */
.arbp--cvd {
	--m-cw:     #e69f00;
	--m-phone:  #d55e00;
	--m-data:   #0072b2;
	--m-fm:     #cc79a7;
	--m-beacon: #f0e442;
	--m-sat:    #009e73;
	--m-image:  #56b4e9;
	--m-exp:    #9a9a9a;
	--m-other:  #525a63;
}
.arbp--cvd .arbp__seg,
.arbp--cvd .arbp__dot { background-repeat: repeat; background-position: 0 0; }

.arbp--cvd .arbp__seg--cw,
.arbp--cvd .arbp__swatch--cw,
.arbp--cvd .arbp__dot--cw,
.arbp--cvd .arbp__pseg--cw,
.arbp--cvd .arbp__pseg--mcw {
	background-image: repeating-linear-gradient(45deg, rgba(0,0,0,.55) 0 2px, transparent 2px 5px);
}
.arbp--cvd .arbp__seg--phone,
.arbp--cvd .arbp__swatch--phone,
.arbp--cvd .arbp__dot--phone,
.arbp--cvd .arbp__pseg--phone {
	background-image: repeating-linear-gradient(90deg, rgba(0,0,0,.55) 0 2px, transparent 2px 5px);
}
.arbp--cvd .arbp__seg--data,
.arbp--cvd .arbp__swatch--data,
.arbp--cvd .arbp__dot--data,
.arbp--cvd .arbp__pseg--data {
	background-image: repeating-linear-gradient(0deg, rgba(0,0,0,.5) 0 2px, transparent 2px 5px);
}
.arbp--cvd .arbp__seg--fm,
.arbp--cvd .arbp__swatch--fm,
.arbp--cvd .arbp__dot--fm {
	background-image:
		repeating-linear-gradient(45deg, rgba(0,0,0,.5) 0 2px, transparent 2px 5px),
		repeating-linear-gradient(-45deg, rgba(0,0,0,.5) 0 2px, transparent 2px 5px);
}
.arbp--cvd .arbp__seg--beacon,
.arbp--cvd .arbp__swatch--beacon,
.arbp--cvd .arbp__dot--beacon {
	background-image: radial-gradient(rgba(0,0,0,.6) 1.4px, transparent 1.6px);
	background-size: 6px 6px;
}
.arbp--cvd .arbp__seg--sat,
.arbp--cvd .arbp__swatch--sat,
.arbp--cvd .arbp__dot--sat {
	background-image:
		repeating-linear-gradient(0deg, rgba(0,0,0,.45) 0 2px, transparent 2px 5px),
		repeating-linear-gradient(90deg, rgba(0,0,0,.45) 0 2px, transparent 2px 5px);
}
.arbp--cvd .arbp__seg--image,
.arbp--cvd .arbp__swatch--image,
.arbp--cvd .arbp__dot--image,
.arbp--cvd .arbp__pseg--image {
	background-image: repeating-linear-gradient(-45deg, rgba(0,0,0,.5) 0 2px, transparent 2px 5px);
}
.arbp--cvd .arbp__seg--exp,
.arbp--cvd .arbp__swatch--exp,
.arbp--cvd .arbp__dot--exp {
	background-image: repeating-linear-gradient(45deg, rgba(0,0,0,.5) 0 1px, transparent 1px 3px);
}
/* 'other' deliberately stays solid — the textureless baseline. */

/* In CVD mode the legend swatch and the table dot share one look — same size,
   shape, border and texture — so a row's marker reads directly against the key. */
.arbp--cvd .arbp__swatch,
.arbp--cvd .arbp__dot {
	width: 17px; height: 17px;
	border-radius: 4px;
	border: 1px solid color-mix(in srgb, var(--strong) 30%, transparent);
	background-repeat: repeat;
}
.arbp--cvd .arbp__dot {
	margin-right: 11px;
	vertical-align: -4px;
}

/* ---- License privileges ("Where can I operate?") -------------------- */
.arbp__license { margin: 2px 0 18px; }
.arbp__license-q {
	display: block;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 8px;
}
.arbp__lic-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.arbp__lic-btn {
	font-family: var(--sans);
	font-size: 12.5px;
	color: var(--text);
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 7px 12px;
	cursor: pointer;
	transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.arbp__lic-btn:hover { border-color: var(--muted); }
.arbp__lic-btn:focus-visible { outline: 2px solid var(--arbp-accent); outline-offset: 2px; }
.arbp__lic-btn.is-active {
	background: var(--arbp-accent);
	border-color: var(--arbp-accent);
	color: #06120e;
	font-weight: 600;
}
.arbp__license-info {
	margin: 11px 0 0;
	max-width: 72ch;
	font-size: 13px;
	color: var(--muted);
	border-left: 3px solid var(--arbp-accent);
	padding-left: 11px;
}

/* Privilege badge in the band head */
.arbp__priv-badge {
	justify-self: end;
	font-family: var(--mono);
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 4px 7px;
	border-radius: 5px;
	white-space: nowrap;
}
.arbp__priv-badge--full    { color: #06120e; background: var(--arbp-allow); }
.arbp__priv-badge--partial { color: #2a1d00; background: #f1b13c; }
.arbp__priv-badge--none    { color: #fff;    background: #9a4040; }

/* When a class is selected, fade the base spectrum so the privilege
   overlay (where you may transmit) reads clearly on top. */
.arbp--lic .arbp__spectrum > .arbp__seg { opacity: .26; }
.arbp--lic .arbp__band.is-priv-none { opacity: .5; }

.arbp__priv-overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 3;
}
.arbp__pseg {
	position: absolute;
	top: 2px; bottom: 16px;
	min-width: 2px;
	border-radius: 3px;
	background: var(--m-other);
	border: 1px solid color-mix(in srgb, var(--strong) 38%, transparent);
	box-shadow: 0 0 0 1.5px var(--panel);
	background-repeat: repeat;
}
.arbp__pseg--cw    { background-color: var(--m-cw); }
.arbp__pseg--mcw   { background-color: var(--m-cw); }
.arbp__pseg--data  { background-color: var(--m-data); }
.arbp__pseg--phone { background-color: var(--m-phone); }
.arbp__pseg--image { background-color: var(--m-image); }
.arbp__pseg--fm    { background-color: var(--m-fm); }
.arbp__pseg--other { background-color: var(--m-other); }

/* Per-row privilege emphasis inside the table */
.arbp--lic .arbp__row.is-priv-out td { opacity: .4; }
.arbp--lic .arbp__row.is-priv-in .arbp__freq { box-shadow: inset 3px 0 0 var(--arbp-allow); }

/* Privilege detail block (range + permitted modes) */
.arbp__priv-detail {
	margin-top: 12px;
	padding: 12px 14px;
	background: var(--panel);
	border: 1px solid var(--line);
	border-left: 3px solid var(--arbp-allow);
	border-radius: 8px;
}
.arbp__priv-detail-h {
	margin: 0 0 8px;
	font-family: var(--sans);
	font-size: 12px;
	font-weight: 600;
	color: var(--strong);
}
.arbp__priv-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.arbp__priv-list li { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.arbp__priv-range { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--text); min-width: 150px; }
.arbp__priv-modes { display: flex; gap: 10px; flex-wrap: wrap; }
.arbp__mchip { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.arbp__mchip .arbp__swatch { width: 11px; height: 11px; }
.arbp--cvd .arbp__mchip .arbp__swatch { width: 14px; height: 14px; }
.arbp__priv-none { margin: 0; color: var(--muted); font-size: 13px; }

/* ---- Misc ------------------------------------------------------------ */
.arbp__empty {
	text-align: center; color: var(--muted);
	font-family: var(--mono); font-size: 13px;
	padding: 28px 0;
}
.arbp__foot {
	margin-top: 18px;
	padding-top: 14px;
	border-top: 1px solid var(--line-soft);
	font-size: 12px; color: var(--muted);
}
.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px;
	overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap;
}

/* ---- Responsive ------------------------------------------------------ */
@media (max-width: 760px) {
	.arbp__band-head {
		grid-template-columns: auto 1fr auto auto;
		grid-template-areas:
			"cat name badge caret"
			"range range count count";
		row-gap: 7px;
		column-gap: 10px;
	}
	.arbp__band-cat { grid-area: cat; }
	.arbp__band-name { grid-area: name; }
	.arbp__priv-badge { grid-area: badge; justify-self: end; }
	.arbp__caret { grid-area: caret; }
	.arbp__band-range { grid-area: range; white-space: normal; }
	.arbp__band-count { grid-area: count; text-align: right; }
	.arbp__spectrum { margin-left: 14px; margin-right: 14px; }
}

@media (prefers-reduced-motion: reduce) {
	.arbp *, .arbp *::before, .arbp *::after {
		transition: none !important; animation: none !important;
	}
}