/* ============================================================================
   DTC Resource Library - "Precision Technical" restyle (DROP-IN)
   Same class names / DOM as assets/resource-library-frontend.js + the shortcode
   SSR, so this replaces assets/resource-library-frontend.css with no markup
   changes. Fonts loaded via @import for portability; prefer a proper
   wp_enqueue_style of the Google Fonts href in register_assets() for perf.
   ============================================================================ */
.rl-root,
#dtc-rl-root,
.rl-modal {
	/* Dark tactical theme - matches the portal news + product glass cards.
	   Scoped to the component rather than :root (0.9.67): this stylesheet now also
	   loads on the MAIN site behind ResourceFolderWidget, and --font-body /
	   --font-display / --font-mono are generic enough to collide with page CSS.
	   .rl-modal is in the list because the library SPA appends #dtc-rl-modal to
	   document.body, outside the root - it needs --rl-ease for its fade. */
	--rl-ink:        #0e2338;   /* header gradient */
	--rl-ink-2:      #17364f;
	--rl-accent:     #4094d1;
	--rl-accent-2:   #6ec1e4;
	--rl-accent-soft:rgba(64, 148, 209, 0.16);
	--rl-accent-line:rgba(64, 148, 209, 0.55);
	--rl-text:       #ffffff;
	--rl-muted:      #aac1d5;
	--rl-faint:      #86a1b8;
	--rl-surface:    #223a5c;   /* card / table base (glass gradient added on cards) */
	--rl-canvas:     #081422;   /* library backdrop */
	--rl-line:       rgba(64, 148, 209, 0.35);
	--rl-line-soft:  rgba(255, 255, 255, 0.09);
	--rl-hf:         #4094d1;
	--rl-lmr:        #9a5b2b;
	--rl-pdf:        #c23a1e;
	--rl-radius:     14px;
	--rl-radius-sm:  9px;
	--rl-ease:       cubic-bezier(0.16, 1, 0.3, 1);
	--font-display:  'Instrument Sans', sans-serif;
	--font-body:     'Instrument Sans', sans-serif;
	--font-mono:     'Instrument Sans', sans-serif;
}

/* ── Container ── */
.rl-root,
#dtc-rl-root {
	font-family: var(--font-body);
	color: var(--rl-text);
	/* Full-width dark band; the content column is capped at 1800px and centred
	   via horizontal padding (no wrapper markup needed). The band fills its
	   Elementor container - set that section to Full Width for edge-to-edge. */
	max-width: none;
	margin: 0;
	padding: clamp(22px, 3vw, 40px) max(clamp(16px, 4vw, 40px), calc((100% - 1800px) / 2));
	background: var(--rl-canvas);
	-webkit-font-smoothing: antialiased;
}
.rl-wrap { max-width: 1160px; margin: 0 auto; padding: 0 4px; }

/* ── Breadcrumb ── */
.rl-breadcrumb {
	font-family: var(--font-mono);
	font-size: 11.5px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--rl-faint);
	padding: 4px 0 14px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}
button.rl-breadcrumb__btn,
.rl-breadcrumb__btn,
.rl-breadcrumb a {
	-webkit-appearance: none !important; appearance: none !important;
	background: none !important; background-image: none !important; background-color: transparent !important;
	border: none !important; border-radius: 0 !important;
	padding: 0 !important; margin: 0 !important;
	box-shadow: none !important; text-shadow: none !important;
	font-family: inherit !important; font-size: inherit !important; font-weight: inherit !important;
	letter-spacing: inherit !important; text-transform: inherit !important; line-height: inherit !important;
	color: var(--rl-accent) !important; text-decoration: none !important; cursor: pointer !important;
	display: inline !important;
	transition: color 0.15s var(--rl-ease) !important;
}
button.rl-breadcrumb__btn:hover,
.rl-breadcrumb__btn:hover,
.rl-breadcrumb a:hover {
	color: var(--rl-accent-2) !important;
	background: none !important; background-image: none !important;
	text-decoration: underline !important;
}
.rl-breadcrumb__btn:hover { color: var(--rl-accent-2); }
.rl-breadcrumb__btn:focus-visible { outline: 2px solid var(--rl-accent); outline-offset: 2px; border-radius: 2px; }
.rl-breadcrumb__here { color: var(--rl-muted); }
.rl-breadcrumb__sep { margin: 0 8px; color: var(--rl-line); }

/* ── Header: dark command strip ── */
.rl-header {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	padding: 28px 30px;
	margin-bottom: 22px;
	border: none;
	border-radius: var(--rl-radius);
	background:
		radial-gradient(120% 140% at 100% 0%, rgba(26, 134, 179, 0.28), transparent 60%),
		linear-gradient(135deg, var(--rl-ink) 0%, var(--rl-ink-2) 100%);
	box-shadow: 0 14px 40px -18px rgba(14, 31, 46, 0.55);
}
/* faint technical grid texture */
.rl-header::before {
	content: "";
	position: absolute; inset: 0;
	background-image:
		linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
	background-size: 26px 26px;
	-webkit-mask-image: radial-gradient(120% 120% at 90% 0%, #000 0%, transparent 70%);
	mask-image: radial-gradient(120% 120% at 90% 0%, #000 0%, transparent 70%);
	pointer-events: none;
}
/* accent hairline at top */
.rl-header::after {
	content: "";
	position: absolute; top: 0; left: 0; right: 0; height: 3px;
	background: linear-gradient(90deg, var(--rl-accent-2), transparent 70%);
}
.rl-header__left { position: relative; z-index: 1; min-width: 0; }
.rl-header .rl-header__title,
h2.rl-header__title {
	font-family: var(--font-display) !important;
	font-size: 30px !important;
	font-weight: 600 !important;
	color: #fff !important;
	text-transform: none !important;
	letter-spacing: -0.02em !important;
	margin: 0 0 6px !important;
	line-height: 1.1 !important;
}
.rl-header__subtitle {
	font-family: var(--font-body);
	font-size: 14px;
	color: #9fb4c4;
	margin: 0;
	max-width: 52ch;
}
.rl-header__count {
	position: relative; z-index: 1;
	flex-shrink: 0;
	display: inline-flex; align-items: center; gap: 7px;
	padding: 6px 13px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 7px;
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: #cfe0ec;
	white-space: nowrap;
}
.rl-header__count::before {
	content: ""; width: 6px; height: 6px; border-radius: 50%;
	background: #38d39f; box-shadow: 0 0 0 3px rgba(56, 211, 159, 0.2);
}

/* ── Search ── */
.rl-search { margin-bottom: 26px; }
.rl-search__wrap {
	display: flex; align-items: center;
	max-width: 560px;
	background: var(--rl-surface) !important;
	border: 1px solid var(--rl-line) !important;
	border-radius: 10px !important;
	box-shadow: 0 1px 2px rgba(14, 31, 46, 0.04) !important;
	transition: border-color 0.15s var(--rl-ease), box-shadow 0.15s var(--rl-ease);
	overflow: hidden;
}
.rl-search__wrap:focus-within {
	border-color: var(--rl-accent) !important;
	box-shadow: 0 0 0 3px var(--rl-accent-soft) !important;
}
.rl-search__icon { flex-shrink: 0; margin: 0 0 0 14px; color: var(--rl-faint); pointer-events: none; }
.rl-search__input {
	flex: 1 !important; min-width: 0 !important;
	padding: 12px 12px !important;
	border: none !important; border-radius: 0 !important;
	background: transparent !important; background-image: none !important;
	box-shadow: none !important;
	font-family: var(--font-body) !important; font-size: 14.5px !important; color: var(--rl-text) !important;
	outline: none !important;
}
.rl-search__input::placeholder { color: var(--rl-faint); }
.rl-search__clear {
	-webkit-appearance: none; appearance: none;
	background: none; border: none; padding: 0 13px 0 4px;
	display: flex; align-items: center; color: var(--rl-faint); cursor: pointer;
	transition: color 0.12s;
}
.rl-search__clear:hover { color: var(--rl-text); }
.rl-search__clear:focus-visible { outline: 2px solid var(--rl-accent); outline-offset: 2px; border-radius: 4px; }
.rl-search__clear[hidden] { display: none; }

/* ── Tile grid ── */
.rl-categories {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
	gap: 14px;
	margin-bottom: 44px;
}
button.rl-cat-tile {
	-webkit-appearance: none !important; appearance: none !important;
	background: var(--rl-surface) !important;
	background-image: none !important;
	border: 1px solid var(--rl-line) !important;
	font-family: inherit !important; font-size: inherit !important;
	color: var(--rl-text) !important; text-align: left !important;
	box-shadow: none !important;
	text-shadow: none !important;
}
.rl-cat-tile {
	position: relative !important;
	display: flex !important; flex-direction: column !important; gap: 10px !important;
	padding: 17px !important;
	background: #223a5c linear-gradient(90deg, rgba(64, 148, 209, 0.14) 0%, rgba(34, 58, 92, 0.14) 100%) !important;
	-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
	border: 1px solid #4094d1 !important;
	border-radius: var(--rl-radius) !important;
	text-decoration: none !important;
	cursor: pointer !important;
	overflow: hidden !important;
	box-shadow: none !important;
	color: var(--rl-text) !important;
	transition: transform 0.22s var(--rl-ease), border-color 0.22s var(--rl-ease), box-shadow 0.22s var(--rl-ease) !important;
	/* staggered entrance */
	opacity: 0;
	animation: rl-tile-in 0.5s var(--rl-ease) forwards;
}
.rl-cat-tile::before {
	content: "" !important; position: absolute !important; left: 0 !important; top: 0 !important; bottom: 0 !important; width: 3px !important;
	background: var(--rl-accent) !important;
	transform: scaleY(0) !important; transform-origin: top !important;
	transition: transform 0.24s var(--rl-ease) !important;
}
.rl-cat-tile:hover {
	transform: translateY(-3px) !important;
	border-color: #6ec1e4 !important;
	box-shadow: 0 20px 44px rgba(3, 12, 24, 0.55) !important;
}
.rl-cat-tile:hover::before { transform: scaleY(1); }
.rl-cat-tile:focus-visible { outline: 2px solid var(--rl-accent); outline-offset: 2px; }
.rl-cat-tile:nth-child(1){animation-delay:.01s}.rl-cat-tile:nth-child(2){animation-delay:.04s}
.rl-cat-tile:nth-child(3){animation-delay:.07s}.rl-cat-tile:nth-child(4){animation-delay:.10s}
.rl-cat-tile:nth-child(5){animation-delay:.13s}.rl-cat-tile:nth-child(6){animation-delay:.16s}
.rl-cat-tile:nth-child(7){animation-delay:.19s}.rl-cat-tile:nth-child(8){animation-delay:.22s}
.rl-cat-tile:nth-child(n+9){animation-delay:.24s}
@keyframes rl-tile-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.rl-cat-tile__icon {
	width: 42px; height: 42px;
	background: var(--rl-accent-soft);
	border-radius: 10px;
	display: flex; align-items: center; justify-content: center;
	color: var(--rl-accent);
	flex-shrink: 0;
	transition: background 0.2s var(--rl-ease), color 0.2s var(--rl-ease);
}
.rl-cat-tile:hover .rl-cat-tile__icon { background: var(--rl-accent); color: #fff; }
.rl-cat-tile--vimeo .rl-cat-tile__icon { background: rgba(26, 183, 234, 0.10); color: #159fce; }
.rl-cat-tile--vimeo:hover .rl-cat-tile__icon { background: #159fce; color: #fff; }
.rl-cat-tile--single-doc .rl-cat-tile__icon { background: rgba(226, 123, 46, 0.10); color: #d9772b; }
.rl-cat-tile--single-doc:hover .rl-cat-tile__icon { background: #d9772b; color: #fff; }
.rl-cat-tile--vimeo.rl-cat-tile:hover::before,
.rl-cat-tile--single-doc.rl-cat-tile:hover::before { background: currentColor; }

.rl-cat-tile__name {
	font-family: var(--font-display) !important;
	font-size: 15px !important; font-weight: 600 !important; line-height: 1.3 !important;
	color: var(--rl-text) !important; flex: 1 !important;
	letter-spacing: -0.01em !important;
	text-transform: none !important;   /* show the stored (mixed) case rather than inheriting UPPERCASE */
	white-space: normal !important;
	word-wrap: break-word !important;
	overflow-wrap: break-word !important;
	overflow: visible !important;
	text-overflow: unset !important;
}
/* File count as a chip - mirrors the header's "N files" pill and the news card date chip. */
.rl-cat-tile__count {
	align-self: flex-start !important;
	display: inline-flex !important; align-items: center !important;
	font-family: var(--font-body) !important;
	font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0 !important;
	font-variant-numeric: tabular-nums;
	color: #eaf4fb !important;
	background: rgba(64, 148, 209, 0.5) !important;
	border: 1px solid #4094d1 !important;
	border-radius: 999px !important;
	padding: 3px 10px !important;
	text-transform: none !important;
}
.rl-cat-tile__arrow {
	position: static !important;
	align-self: flex-start;
	color: rgba(255, 255, 255, 0.5) !important;   /* visible at rest, not only on hover */
	transition: color 0.2s var(--rl-ease), transform 0.2s var(--rl-ease);
}
.rl-cat-tile:hover .rl-cat-tile__arrow { color: var(--rl-accent-2) !important; }
.rl-cat-tile:hover .rl-cat-tile__arrow { color: var(--rl-accent); transform: translateX(4px); }

/* ── File table ── */
.rl-file-table-wrap { margin-bottom: 48px; }
.rl-file-table-title {
	font-family: var(--font-display);
	font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
	color: var(--rl-muted);
	margin: 4px 0 14px;
	display: flex; align-items: center; gap: 10px;
}
.rl-file-table-title::after { content: ""; flex: 1; height: 1px; background: var(--rl-line-soft); }
.rl-file-table {
	width: 100%; border-collapse: collapse;
	background: var(--rl-surface);
	border: 1px solid var(--rl-line);
	border-radius: var(--rl-radius);
	overflow: hidden;
}
.rl-file-table th {
	font-family: var(--font-mono);
	font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
	color: var(--rl-faint);
	text-align: left;
	padding: 13px 16px;
	background: rgba(64, 148, 209, 0.08);
	border-bottom: 1px solid var(--rl-line);
}
.rl-file-table td {
	font-family: var(--font-body);
	font-size: 13.5px; color: var(--rl-text);
	padding: 13px 16px;
	border-bottom: 1px solid var(--rl-line-soft);
	vertical-align: middle;
}
.rl-file-table tbody tr { transition: background 0.12s; }
.rl-file-table tbody tr:hover td { background: var(--rl-accent-soft); }
.rl-file-table tr:last-child td { border-bottom: none; }
.rl-file-table tr[hidden] { display: none; }

/* file title cell */
.rl-file-title { display: flex; align-items: flex-start; gap: 11px; }
.rl-file-title__kind {
	flex-shrink: 0;
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 38px; padding: 3px 6px;
	background: var(--rl-canvas);
	border-radius: 5px;
	font-family: var(--font-mono);
	font-size: 9.5px; font-weight: 600; letter-spacing: 0.06em;
	color: var(--rl-muted);
	margin-top: 1px;
}
.rl-file-title__kind.pdf         { background: rgba(194, 58, 30, 0.10);  color: var(--rl-pdf); }
.rl-file-title__kind.compressed  { background: rgba(154, 91, 43, 0.12);  color: #9a5b2b; }
.rl-file-title__kind.powerpoint  { background: rgba(214, 122, 46, 0.12); color: #c9701f; }
.rl-file-title__kind.excel       { background: rgba(30, 138, 76, 0.12);  color: #1f8a4c; }
.rl-file-title__kind.word        { background: rgba(31, 90, 140, 0.12);  color: #1f5a8c; }
.rl-file-title__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rl-file-title__name {
	font-weight: 500; color: var(--rl-text);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 48ch;
}
.rl-file-table__path { font-family: var(--font-mono); font-size: 11px; color: var(--rl-faint); }

.rl-file-table__type {
	font-family: var(--font-mono);
	font-size: 11px; color: var(--rl-muted);
	text-transform: uppercase; letter-spacing: 0.04em;
}
.rl-file-table__date,
.rl-file-table__size {
	font-family: var(--font-mono);
	font-size: 12px; color: var(--rl-muted);
	white-space: nowrap;
}

.rl-file-table__tag {
	display: inline-block; padding: 3px 8px;
	border-radius: 5px;
	font-family: var(--font-mono);
	font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
	background: var(--rl-accent-soft); color: var(--rl-accent);
}
.rl-file-table__tag--HF  { background: rgba(18, 101, 138, 0.12); color: var(--rl-hf); }
.rl-file-table__tag--LMR { background: rgba(154, 91, 43, 0.13);  color: var(--rl-lmr); }

/* Matches the portal news-card button (.dtc-nc__btn): accent gradient, blue
   border, uppercase white label, soft glow. Scaled down for a table cell.
   !important throughout - it's an <a>, and the portal Elementor kit styles
   anchors (color, background) and would otherwise win (see landmine #3). */
.rl-download-btn {
	display: inline-flex !important; align-items: center !important; gap: 8px !important;
	padding: 0 16px !important; line-height: 32px !important;
	background: linear-gradient(135deg, rgba(64, 148, 209, 0.35) 0%, rgba(37, 37, 37, 0.25) 100%) !important;
	background-image: linear-gradient(135deg, rgba(64, 148, 209, 0.35) 0%, rgba(37, 37, 37, 0.25) 100%) !important;
	color: #fff !important;
	border: 1px solid #4094d1 !important;
	border-radius: 4px !important;
	font-family: var(--font-body) !important; font-size: 12.5px !important; font-weight: 700 !important;
	text-transform: uppercase !important; letter-spacing: 0.02em !important;
	text-decoration: none !important; white-space: nowrap !important; cursor: pointer !important;
	box-shadow: 0 0 30px 0 rgba(64, 148, 209, 0.4) !important;
	transition: filter 0.2s ease, transform 0.16s var(--rl-ease) !important;
}
.rl-download-btn:hover { filter: brightness(1.15) !important; transform: translateY(-1px) !important; color: #fff !important; }
.rl-download-btn:focus-visible { outline: 2px solid #6ec1e4 !important; outline-offset: 2px !important; }
.rl-download-btn svg { flex-shrink: 0; }
.rl-download-btn--unavailable {
	background: rgba(255, 255, 255, 0.05) !important;
	background-image: none !important;
	color: var(--rl-faint) !important;
	border-color: var(--rl-line) !important;
	box-shadow: none !important; cursor: default !important;
}
.rl-download-btn--unavailable:hover { filter: none !important; transform: none !important; }

/* ── Vimeo modal ── */
.rl-modal { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.2s var(--rl-ease); }
.rl-modal--open { opacity: 1; }
.rl-modal__backdrop { position: absolute; inset: 0; background: rgba(8, 18, 32, 0.78); backdrop-filter: blur(2px); }
.rl-modal__box { position: relative; z-index: 1; width: min(940px, 96vw); background: #000; border-radius: 12px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,0.5); }
.rl-modal__close { -webkit-appearance: none; appearance: none; border: none; position: absolute; top: 10px; right: 10px; z-index: 2; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.15); color: #fff; cursor: pointer; transition: background 0.15s; }
.rl-modal__close:hover { background: rgba(255,255,255,0.32); }
.rl-modal__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.rl-modal__video { position: relative; padding-bottom: 56.25%; height: 0; }
.rl-modal__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }

/* ── Empty state ── */
.rl-empty {
	padding: 56px 0; text-align: center;
	font-family: var(--font-body); font-size: 15px; color: var(--rl-muted);
	display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.rl-empty svg { color: var(--rl-line); }

/* ── Responsive ── */
@media (min-width: 641px) { .rl-hide-mobile { display: table-cell; } }
@media (max-width: 640px) {
	.rl-categories { grid-template-columns: 1fr 1fr; gap: 10px; }
	.rl-hide-mobile { display: none; }
	.rl-header { padding: 22px; flex-wrap: wrap; align-items: flex-start; }
	.rl-header .rl-header__title, h2.rl-header__title { font-size: 23px !important; }
	.rl-file-title__name { max-width: 24ch; }
	.rl-file-table th, .rl-file-table td { padding: 11px 12px; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
	.rl-cat-tile { animation: none; opacity: 1; }
	.rl-cat-tile, .rl-cat-tile__icon, .rl-cat-tile__arrow, .rl-download-btn { transition: none; }
}

/* ── Bulk multi-select download ── */
.rl-file-table__select {
	width: 40px;
	text-align: center;
	padding-left: 6px; padding-right: 6px;
}
.rl-file-check, .rl-check-all {
	width: 16px; height: 16px;
	accent-color: var(--rl-accent);
	cursor: pointer;
	vertical-align: middle;
}
.rl-bulk-bar {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 14px;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--rl-line);
}
.rl-bulk-count {
	font-family: var(--font-body);
	font-size: 12.5px;
	color: var(--rl-muted);
}
.rl-bulk-btn {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 0 20px; line-height: 38px;
	background: linear-gradient(135deg, rgba(64, 148, 209, 0.45) 0%, rgba(37, 37, 37, 0.3) 100%);
	color: #fff;
	border: 1px solid #4094d1;
	border-radius: 4px;
	font-family: var(--font-body); font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em;
	white-space: nowrap; cursor: pointer;
	box-shadow: 0 0 40px 0 rgba(64, 148, 209, 0.45);
	transition: filter 0.2s ease, transform 0.16s var(--rl-ease);
}
.rl-bulk-btn:hover:not(:disabled) {
	filter: brightness(1.15);
	transform: translateY(-1px);
}
.rl-bulk-btn:focus-visible { outline: 2px solid #6ec1e4; outline-offset: 2px; }
.rl-bulk-btn:disabled {
	background: rgba(255, 255, 255, 0.06);
	border-color: var(--rl-line);
	color: var(--rl-faint);
	cursor: not-allowed;
	box-shadow: none; transform: none;
}
@media (prefers-reduced-motion: reduce) {
	.rl-bulk-btn { transition: none; }
}

/* ── Video list (resource_video folders) ── */
.rl-video-list {
	display: flex;
	flex-direction: column;
	gap: 32px;
	margin-top: 8px;
}
.rl-video__title {
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 600;
	color: var(--rl-text);
	margin: 0 0 12px;
}
.rl-video__frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: var(--rl-radius-sm);
	overflow: hidden;
	box-shadow: 0 8px 26px rgba(14, 31, 46, 0.12);
}
.rl-video__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ══ Resource Folder widget (ResourceFolderWidget, 0.9.67) ══════════════════
   The widget mounts on .rl-root with NO id - two instances on one page would
   otherwise emit duplicate ids. Every folder in the subtree is server-rendered
   as its own panel and the drill-down script only toggles them. */
.rl-folder-panel[hidden],
.rl-folder-results[hidden],
.rl-folder-views[hidden] { display: none !important; }
.rl-root--folder .rl-breadcrumb { min-height: 24px; }

/* ── Light variant ──────────────────────────────────────────────────────────
   Sits inside the page's normal content column instead of painting a full-bleed
   band, so it can drop onto an ordinary Elementor section. The header strip and
   the accent stay dark on purpose: --rl-accent and the type/tag colours are
   what make the two variants read as the same component.
   These carry !important and extra specificity because the base rules they
   override already carry !important (tuned against the portal's Elementor kit,
   landmine #3) - and the main site's kit is a different fight again. */
.rl-root--light {
	--rl-canvas:    transparent;
	--rl-surface:   #ffffff;
	--rl-text:      #0e2338;
	--rl-muted:     #47607a;
	--rl-faint:     #64809a;
	--rl-line-soft: rgba(14, 35, 56, 0.12);
	--rl-line:      rgba(64, 148, 209, 0.30);
	background: transparent;
	/* Drop the full-bleed centring trick - the page column already does this. */
	padding: clamp(18px, 2.4vw, 32px) 0;
}

/* Tiles: dark glass -> light card. */
.rl-root--light .rl-cat-tile,
.rl-root--light button.rl-cat-tile {
	background: #ffffff !important;
	background-image: none !important;
	border: 1px solid rgba(14, 35, 56, 0.14) !important;
	box-shadow: 0 1px 2px rgba(14, 31, 46, 0.06) !important;
}
.rl-root--light .rl-cat-tile:hover {
	border-color: var(--rl-accent) !important;
	box-shadow: 0 14px 30px -16px rgba(14, 31, 46, 0.35) !important;
}
.rl-root--light .rl-cat-tile__name  { color: var(--rl-text) !important; }
.rl-root--light .rl-cat-tile__count { color: var(--rl-muted) !important; }
.rl-root--light .rl-cat-tile__icon  { background: rgba(64, 148, 209, 0.10); color: var(--rl-accent); }
/* The base rule hardcodes rgba(255,255,255,0.5) rather than reading a token, so
   on a white tile the chevron was white on white. Remap it here; hover still
   resolves to --rl-accent from the shared rule. */
.rl-root--light .rl-cat-tile__arrow { color: var(--rl-faint) !important; }
.rl-root--light .rl-cat-tile:hover .rl-cat-tile__arrow { color: var(--rl-accent) !important; }

/* Search field. */
.rl-root--light .rl-search__wrap {
	background: #ffffff !important;
	border: 1px solid rgba(14, 35, 56, 0.16) !important;
}
.rl-root--light .rl-search__input {
	color: var(--rl-text) !important;
	background: #ffffff !important;
	border: 1px solid rgba(14, 35, 56, 0.16) !important;
}
.rl-root--light .rl-search__input::placeholder { color: var(--rl-faint) !important; }
.rl-root--light .rl-search__clear { color: rgba(14, 35, 56, 0.45) !important; }
.rl-root--light .rl-search__clear:hover { color: var(--rl-text) !important; }

/* Breadcrumb. */
.rl-root--light .rl-breadcrumb__btn  { color: var(--rl-muted) !important; }
.rl-root--light .rl-breadcrumb__btn:hover { color: var(--rl-accent) !important; }
.rl-root--light .rl-breadcrumb__here { color: var(--rl-text) !important; }

/* File table: the zebra/hover washes are white-on-dark in the base theme. */
.rl-root--light .rl-file-table { background: #ffffff !important; }
.rl-root--light .rl-file-table thead th { color: var(--rl-muted) !important; border-bottom-color: rgba(14, 35, 56, 0.14) !important; }
.rl-root--light .rl-file-table tbody tr { background: transparent !important; border-bottom: 1px solid rgba(14, 35, 56, 0.08) !important; }
.rl-root--light .rl-file-table tbody tr:hover { background: rgba(64, 148, 209, 0.06) !important; }
.rl-root--light .rl-file-table td { color: var(--rl-text) !important; }
.rl-root--light .rl-file-table__date,
.rl-root--light .rl-file-table__size { color: var(--rl-muted) !important; }
.rl-root--light .rl-file-table-title { color: var(--rl-text) !important; }
.rl-root--light .rl-empty { color: var(--rl-muted) !important; }

/* ── Seven columns at 320px ─────────────────────────────────────────────────
   The table is the real risk on a phone. Let it scroll inside its own wrapper
   rather than forcing the page body to scroll horizontally - but shed columns
   before it comes to that, so the common case needs no sideways scrolling.

   Keyed off the per-column classes FolderRenderer emits, NOT :nth-child. The
   public widget drops the multi-select column, so every positional index shifts
   by one there and an nth-child rule hides the wrong column silently.

   Shed order is by how much each column earns its width. Type and Tag go first:
   inside one folder they are near-constant (every row in Compliance Documents /
   HF reads COMPLIANCE / HF). Date and Size go next - Date is blank on 9 of the
   33 compliance docs, so it is the least reliable of the pair. Title and
   Download always survive: they are the entire job of the table. */
.rl-file-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 640px) {
	.rl-root--folder .rl-file-table { min-width: 0; }
	.rl-root--folder .rl-file-table .rl-file-table__type-col,
	.rl-root--folder .rl-file-table .rl-file-table__tag-col { display: none; }
	.rl-root--folder .rl-file-table__title { white-space: normal; overflow-wrap: break-word; }
}
@media (max-width: 420px) {
	.rl-root--folder .rl-file-table .rl-file-table__date,
	.rl-root--folder .rl-file-table .rl-file-table__size { display: none; }
	/* Title + Download only. Give the title room to breathe rather than
	   wrapping to one word per line, which is what 7 columns did at 320. */
	.rl-root--folder .rl-file-table th,
	.rl-root--folder .rl-file-table td { padding: 12px 10px; }
	.rl-root--folder .rl-file-table__title { font-size: 14px; line-height: 1.45; }
}

/* Touch targets: the download control is the one thing a phone visitor is here
   to hit, and the desktop button is under the 44px WCAG target. */
@media (max-width: 640px) {
	.rl-root--folder .rl-download-btn {
		min-height: 44px;
		padding-top: 0; padding-bottom: 0;
		justify-content: center;
	}
}