/* stylelint-disable -- Migrated parity CSS: keep cascade, selector order, and declarations visually identical. */
.scds-reference-toggle {
	position: sticky;
	top: 32px;
	z-index: 100;
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	padding: 12px 18px 0;
	pointer-events: none;
}
.scds-reference-toggle button {
	min-height: 34px;
	padding: 7px 13px;
	border: 1px solid var(--hairline-strong, #cdd0d4);
	border-radius: var(--r-pill, 999px);
	background: rgba(255, 255, 255, 0.84);
	color: var(--text, #2c3338);
	font: 600 12px/1 var(--font, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
	box-shadow: var(--shadow-card, 0 1px 2px rgba(16,24,40,.06));
	cursor: pointer;
	pointer-events: auto;
}
.scds-reference-toggle button.is-active {
	border-color: var(--brand, #3858e9);
	background: var(--brand, #3858e9);
	color: var(--on-brand, #fff);
}
.scds-reference--all .shell {
	display: block;
}
.scds-reference--all .sidebar,
.scds-reference--all .topbar {
	display: none;
}
.scds-reference--all .content {
	max-width: 1120px;
}
.scds-selectionbar {
	max-width: 1000px;
	width: calc(100% - 36px);
	margin: 14px auto 0;
	padding: 10px 12px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	border: 1px solid var(--glass-brd, rgba(255,255,255,.58));
	border-radius: var(--r-md, 16px);
	background: var(--glass-bg, rgba(255,255,255,.66));
	-webkit-backdrop-filter: var(--glass-blur, blur(16px));
	backdrop-filter: var(--glass-blur, blur(16px));
	box-shadow: inset 0 1px 0 rgba(255,255,255,.6), var(--shadow-card, 0 1px 2px rgba(16,24,40,.06));
}
.scds-reference--all .scds-selectionbar {
	max-width: 1120px;
}
.scds-selectionbar-count {
	margin-right: auto;
	color: var(--text-muted, #505a68);
	font: 600 12.5px/1.2 var(--font, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
.scds-reference .hero {
	background: var(--surface, #fff);
	box-shadow: none;
}
.scds-reference .hero .shine {
	display: none;
}
.scds-reference .card,
.scds-reference .card.glassy,
.scds-reference .metric,
.scds-reference .metric-trend,
.scds-reference .metric-tile,
.scds-reference .table-card,
.scds-selectionbar {
	box-shadow: none;
}
.scds-reference .badge {
	white-space: nowrap;
	max-width: 100%;
	overflow-wrap: anywhere;
}
.scds-reference .card {
	max-width: none;
}
.scds-reference,
.scds-reference *,
.scds-reference *::before,
.scds-reference *::after {
	box-sizing: border-box;
}
.scds-reference .grid > *,
.scds-reference .card,
.scds-reference .table-card,
.scds-reference .chart-wrap,
.scds-reference .notice,
.scds-reference .callout,
.scds-reference .inspector,
.scds-reference .cal {
	min-width: 0;
}
.scds-reference .token-note,
.scds-reference code,
.scds-reference .t-sub,
.scds-reference .id,
.scds-reference .t-name,
.scds-reference .subhead,
.scds-reference .notice p,
.scds-reference .callout p,
.scds-reference .ft,
.scds-reference .d,
.scds-reference .sub,
.scds-reference .nm,
.scds-reference .channel {
	overflow-wrap: anywhere;
	word-break: normal;
}
.scds-reference .scds-surface-grid {
	margin-top: var(--s-5, 24px);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
	align-items: stretch;
}
.scds-reference .scds-surface-card {
	overflow: hidden;
}
.scds-reference .grid,
.scds-reference .scds-skeleton-grid {
	max-width: 100%;
	min-width: 0;
}
.scds-reference .scds-skeleton-grid {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 600px), 1fr));
}
.scds-reference .scds-skeleton-grid > *,
.scds-reference .scds-surface-grid > * {
	min-width: 0;
}
.scds-reference .row-actions,
.scds-reference .rt .row-actions {
	position: static !important;
	left: auto !important;
	transform: none !important;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	gap: 6px;
	min-width: 0;
}
.scds-reference .row-actions form,
.scds-reference .rt .row-actions form {
	display: inline-flex;
	margin: 0;
	min-width: 0;
}
.scds-reference .row-actions .btn,
.scds-reference .rt .row-actions .btn {
	flex: 0 0 auto;
	white-space: nowrap;
}
.scds-reference .rt td[data-label="Actions"] {
	width: 1%;
	white-space: normal;
}
.scds-reference .chart-wrap canvas {
	display: block;
	max-width: 100% !important;
	width: 100% !important;
}
.scds-reference .health-mini,
.scds-reference .health-hero,
.scds-reference .notif-row,
.scds-reference .pref-row,
.scds-reference .applies-row,
.scds-reference .restore-card,
.scds-reference .picker-row,
.scds-reference .safety-row,
.scds-reference .perm-block,
.scds-reference .compat-row {
	min-width: 0;
}
.scds-reference .health-mini > div,
.scds-reference .health-hero > div,
.scds-reference .notif-row > div:not(.notif-ic):not(.meta),
.scds-reference .picker-row > div,
.scds-reference .pref-row .pr-main,
.scds-reference .applies-row > div,
.scds-reference .restore-card > div:not(.rc-ic),
.scds-reference .perm-block > div:not(.pb-ic),
.scds-reference .compat-row .cr-main {
	min-width: 0;
}
.scds-reference .stepper {
	flex-wrap: wrap;
	gap: 8px;
	min-width: 0;
}
.scds-reference .wstep {
	min-width: 0;
}
.scds-reference .wstep .lbl {
	overflow-wrap: anywhere;
}
.scds-reference .rank-row {
	grid-template-columns: minmax(0, 120px) minmax(0, 1fr) minmax(28px, 36px);
}
.scds-reference .rank-row .lbl,
.scds-reference .meter-row .k,
.scds-reference .insp-kv .k,
.scds-reference .insp-kv .v {
	min-width: 0;
	overflow-wrap: anywhere;
}
.scds-reference .diff-row > div {
	min-width: 0;
	overflow-wrap: anywhere;
}
.scds-reference .cal-nav button {
	min-width: 36px;
	min-height: 36px;
}
.scds-reference .cal-event {
	display: block;
	width: 100%;
	min-height: 36px;
	border: 0;
	text-align: left;
	font-family: var(--font, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
	white-space: normal;
	overflow-wrap: anywhere;
	line-height: 1.25;
}
.scds-reference .kebab,
.scds-reference .fchip {
	min-height: 36px;
}
.scds-reference .switch {
	width: 52px;
	height: 36px;
}
.scds-reference .switch::after {
	width: 32px;
	height: 32px;
}
.scds-reference .switch.on::after {
	transform: translateX(16px);
}
.scds-reference #raw-metadata-confirm {
	min-width: 36px;
	min-height: 36px;
}
.scds-reference section.view > label input[type="checkbox"] {
	width: 36px;
	height: 36px;
}
.scds-reference .btn.tiny,
.scds-reference-toggle button,
.scds-selectionbar .btn.tiny,
.scds-reference .pager button,
.scds-reference .seg button,
.scds-reference .btn-toolbar button {
	min-height: 36px;
}
