/* ============================================================================
   Digisoul Prompt Library — Portal stylesheet (v0.4 layout overhaul)
   Heritage-Tech aesthetic, programme-agnostic.
   Per-programme DNA tokens loaded separately and scoped to
     [data-current-programme="..."]
   Mobile-first, ultrawide-aware, RTL-aware via logical properties.
   ============================================================================ */

/* ----- 0. Digisoul master brand defaults (sapphire blue + gold) ---------- */
/* These apply to .dgs-pl-portal regardless of whether a programme-specific
   token file has loaded yet — so cold loads / loading states always show the
   Digisoul brand, not a programme's fallback colours. Per-programme token
   files cascade ON TOP via their `[data-current-programme="X"]` selector.    */
.dgs-pl-portal {
	--canvas-deep:     #0A244A;  /* Deep Sapphire */
	--canvas-mid:      #0B2A55;
	--canvas-rich:     #0F3262;
	--prestige:        #C9A86E;  /* Muted Gold */
	--prestige-soft:   #E8C98A;
	--body-light:      #F7F7F7;  /* Alabaster */
	--ink-body-muted:  rgba(247,247,247,0.7);
	--ink-prestige-muted: rgba(201,168,110,0.7);
	--accent-primary:  #00716C;  /* Emerald Teal */
	--accent-amber:    #E8C98A;  /* Bright Gold */
	--accent-coral:    #FF8A73;
	--accent-rose:     #E6C0CB;
	--accent-pale:     #B6909D;
	--rule:            rgba(201,168,110,0.18);
	--rule-faint:      rgba(201,168,110,0.08);
	--grad-canvas:     radial-gradient(circle at 12% 8%, rgba(74,21,75,0.18) 0, transparent 35%), radial-gradient(circle at 88% 92%, rgba(0,113,108,0.10) 0, transparent 35%), #0A244A;
	--grid-bg:
		linear-gradient(rgba(15,50,98,0.35) 1px, transparent 1px),
		linear-gradient(90deg, rgba(15,50,98,0.35) 1px, transparent 1px);
	--grid-size:       56px 56px;
	--f-display:       'Playfair Display', Georgia, serif;
	--f-accent:        'Cormorant Garamond', Georgia, serif;
	--f-body:          'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
	--f-mono:          'IBM Plex Mono', 'Courier New', monospace;
	--f-ar-display:    'IBM Plex Sans Arabic', 'Cairo', sans-serif;
	--f-ar-body:       'Cairo', sans-serif;
}

/* ----- 1. Full-width break-out -------------------------------------------- */
/* The portal often sits inside a constrained theme container with a sidebar
   layout. These rules force it to occupy 100vw regardless of parent width.   */

body.dgs-pl-fullwidth #content-area,
body.dgs-pl-fullwidth .default-blog__grid,
body.dgs-pl-fullwidth .default-blog__area,
body.dgs-pl-fullwidth .container { max-width: 100% !important; }

body.dgs-pl-fullwidth .default-blog__sidebar,
body.dgs-pl-fullwidth aside.sidebar,
body.dgs-pl-fullwidth #sidebar,
body.dgs-pl-fullwidth .widget-area,
body.dgs-pl-fullwidth .secondary,
body.dgs-pl-fullwidth .left-sidebar .default-blog__sidebar { display: none !important; }

body.dgs-pl-fullwidth .default-blog__grid.left-sidebar { grid-template-columns: 1fr !important; }
body.dgs-pl-fullwidth .default-blog__area { padding-block: 0 !important; }
body.dgs-pl-fullwidth .arolax--page-details,
body.dgs-pl-fullwidth .default-blog__item-content { padding: 0 !important; max-width: none !important; }
body.dgs-pl-fullwidth .post-thumbnail,
body.dgs-pl-fullwidth .entry-header,
body.dgs-pl-fullwidth .breadcrumb-wrap,
body.dgs-pl-fullwidth .page-header { display: none !important; }

/* ----- 2. Portal root: full-bleed inside the page content ----------------- */
.dgs-pl-portal {
	/* break out of any constrained parent and stretch to viewport width */
	position: relative;
	inline-size: 100vw;
	margin-inline: calc(50% - 50vw);
	max-inline-size: none;

	font-family: var(--f-body, system-ui, sans-serif);
	color: var(--body-light, #F7F7F7);
	background: var(--grad-canvas, #0A244A);
	min-block-size: 100vh;
	padding-block: clamp(20px, 3vw, 56px);
	padding-inline: clamp(16px, 4vw, 64px);
	line-height: 1.6;
	letter-spacing: 0.005em;
	overflow: hidden;
	isolation: isolate;
	box-sizing: border-box;
}

/* Background motif: subtle grid texture from design tokens */
.dgs-pl-portal::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: var(--grid-bg, none);
	background-size: var(--grid-size, 56px 56px);
	opacity: 0.12;
	z-index: -1;
	pointer-events: none;
}

/* ----- 3. Inner constrainer for readable line lengths --------------------- */
.dgs-pl-portal > .dgs-pl-header,
.dgs-pl-portal > .dgs-pl-body {
	max-inline-size: 1680px;       /* readable on 27" 4K + ultrawide */
	margin-inline: auto;
	inline-size: 100%;
}

.dgs-pl-portal,
.dgs-pl-portal * { box-sizing: border-box; }

/* ----- 4. Header --------------------------------------------------------- */
.dgs-pl-header {
	display: flex;
	flex-direction: column;
	gap: clamp(16px, 2vw, 28px);
	margin-block-end: clamp(20px, 3vw, 40px);
	padding-block-end: clamp(16px, 2vw, 28px);
	border-block-end: 1px solid var(--rule, rgba(201,168,110,0.18));
}

.dgs-pl-header__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.dgs-pl-header h1 {
	font-family: var(--f-display, Georgia, serif);
	font-weight: 600;
	font-size: clamp(22px, 2.6vw, 40px);
	color: var(--prestige, #C9A86E);
	margin: 0;
	letter-spacing: -0.01em;
	line-height: 1.1;
}

.dgs-pl-header__meta {
	display: flex;
	align-items: center;
	gap: 16px;
	font-size: 14px;
	color: var(--ink-body-muted, rgba(255,255,255,0.6));
	flex-wrap: wrap;
}

.dgs-pl-lang-toggle {
	display: inline-flex;
	border: 1px solid var(--rule, rgba(201,168,110,0.22));
	border-radius: 999px;
	overflow: hidden;
	background: transparent;
}

.dgs-pl-lang-toggle button {
	padding: 6px 14px;
	background: transparent;
	border: 0;
	color: var(--ink-body-muted, rgba(255,255,255,0.6));
	cursor: pointer;
	font-family: inherit;
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	transition: color 160ms ease, background 160ms ease;
}

.dgs-pl-lang-toggle button.is-active {
	background: var(--prestige, #C9A86E);
	color: var(--canvas-deep, #0A244A);
}

/* ----- Anonymous visitor: sign-in button + marketing banner ----- */
.dgs-pl-signin-btn {
	background: var(--prestige, #C9A86E) !important;
	color: var(--canvas-deep, #0A244A) !important;
	padding: 8px 18px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-decoration: none;
	border: 0;
	transition: background 160ms ease, transform 160ms ease;
}
.dgs-pl-signin-btn:hover {
	background: var(--accent-amber, #E8C98A) !important;
	transform: translateY(-1px);
}

.dgs-pl-anon-banner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	padding: 14px 18px;
	background: linear-gradient(90deg, rgba(201,168,110,0.12), rgba(201,168,110,0.04));
	border: 1px solid var(--rule, rgba(201,168,110,0.28));
	border-radius: 12px;
	margin-block: 8px 4px;
	font-size: 14px;
	color: var(--body-light, #F7F7F7);
}
.dgs-pl-anon-banner strong {
	color: var(--prestige, #C9A86E);
	font-weight: 700;
}
.dgs-pl-anon-banner span { color: var(--ink-body-muted, rgba(247,247,247,0.78)); }
.dgs-pl-anon-banner .dgs-pl-banner-link {
	margin-inline-start: auto;
	color: var(--prestige, #C9A86E);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}
.dgs-pl-anon-banner .dgs-pl-banner-link:hover { color: var(--accent-amber, #E8C98A); }

/* Light-theme variants */
.dgs-pl-portal[data-theme="light"] .dgs-pl-anon-banner {
	background: linear-gradient(90deg, rgba(10,36,74,0.05), rgba(10,36,74,0.02));
	border-color: rgba(10,36,74,0.14);
	color: #06182F;
}
.dgs-pl-portal[data-theme="light"] .dgs-pl-anon-banner span { color: rgba(6,24,47,0.72); }

/* Offer card kind=signin / kind=enroll: distinguish from paid cards */
.dgs-pl-offer__price--free {
	color: var(--accent-primary, #00716C) !important;
	font-size: clamp(18px, 1.5vw, 22px) !important;
}
.dgs-pl-offer--signin .dgs-pl-offer__price--free { color: var(--prestige, #C9A86E) !important; }
.dgs-pl-offer--enroll .dgs-pl-offer__price--free { color: var(--accent-primary, #00716C) !important; }

.dgs-pl-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.dgs-pl-tab {
	display: inline-flex;
	flex-direction: column;
	gap: 4px;
	padding: 12px 20px;
	border: 1px solid var(--rule, rgba(201,168,110,0.22));
	border-radius: 12px;
	background: rgba(255,255,255,0.025);
	color: var(--body-light, #F7F7F7);
	cursor: pointer;
	font-family: inherit;
	font-weight: 500;
	font-size: 14px;
	text-align: start;
	transition: transform 200ms ease, background 200ms ease, border-color 200ms ease;
}

.dgs-pl-tab:hover,
.dgs-pl-tab:focus-visible {
	background: rgba(217,181,128,0.06);
	border-color: var(--prestige, #C9A86E);
	transform: translateY(-1px);
	outline: none;
}

.dgs-pl-tab.is-active {
	background: var(--prestige, #C9A86E);
	color: var(--canvas-deep, #0A244A);
	border-color: var(--prestige, #C9A86E);
}

.dgs-pl-tab__label {
	font-weight: 600;
	letter-spacing: 0.005em;
}

.dgs-pl-tab__expiry {
	font-size: 11px;
	letter-spacing: 0.05em;
	opacity: 0.7;
	text-transform: uppercase;
}

/* ----- 5. Controls bar (search + filters + sort) ------------------------- */
.dgs-pl-controls {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	gap: 12px;
	align-items: center;
	margin-block-end: clamp(16px, 2vw, 28px);
}

@media (max-width: 720px) {
	.dgs-pl-controls { grid-template-columns: 1fr; }
}

.dgs-pl-search { position: relative; }

.dgs-pl-search input {
	inline-size: 100%;
	padding: 12px 16px 12px 44px;
	background: rgba(255,255,255,0.04);
	border: 1px solid var(--rule, rgba(201,168,110,0.22));
	border-radius: 10px;
	color: var(--body-light, #F7F7F7) !important;
	font-family: inherit;
	font-size: 15px;
	transition: border-color 160ms ease, background 160ms ease;
}

.dgs-pl-portal[dir="rtl"] .dgs-pl-search input { padding: 12px 44px 12px 16px; }

.dgs-pl-search input::placeholder { color: var(--ink-body-muted, rgba(255,255,255,0.45)); }

.dgs-pl-search input:focus {
	border-color: var(--prestige, #C9A86E);
	background: rgba(217,181,128,0.04);
	outline: none;
}

.dgs-pl-search::before {
	content: '';
	position: absolute;
	inset-inline-start: 16px;
	inset-block-start: 50%;
	transform: translateY(-50%);
	inline-size: 14px;
	block-size: 14px;
	border: 2px solid var(--prestige, #C9A86E);
	border-radius: 50%;
}

.dgs-pl-search::after {
	content: '';
	position: absolute;
	inset-inline-start: 28px;
	inset-block-start: 50%;
	inline-size: 6px;
	block-size: 2px;
	background: var(--prestige, #C9A86E);
	transform: translateY(-50%) rotate(45deg);
}

.dgs-pl-filter,
.dgs-pl-sort {
	padding: 12px 14px;
	background: rgba(255,255,255,0.04);
	border: 1px solid var(--rule, rgba(201,168,110,0.22));
	border-radius: 10px;
	/* Use !important to defeat the WP theme's <select> color rules. */
	color: var(--body-light, #F7F7F7) !important;
	font-family: inherit;
	font-size: 14px;
	cursor: pointer;
	min-inline-size: 160px;
	/* Render the dropdown chevron in the prestige colour */
	appearance: none;
	-webkit-appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--prestige, #C9A86E) 50%), linear-gradient(135deg, var(--prestige, #C9A86E) 50%, transparent 50%);
	background-position: calc(100% - 18px) center, calc(100% - 12px) center;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-inline-end: 36px;
}

/* Dropdown options open as a system menu — give them a readable light surface */
.dgs-pl-filter option,
.dgs-pl-sort option {
	color: #0A244A !important;
	background: #F7F7F7 !important;
}

.dgs-pl-portal[dir="rtl"] .dgs-pl-filter,
.dgs-pl-portal[dir="rtl"] .dgs-pl-sort {
	background-position: 18px center, 12px center;
	padding-inline-end: 14px;
	padding-inline-start: 36px;
}

.dgs-pl-filter:focus,
.dgs-pl-sort:focus { border-color: var(--prestige, #C9A86E); outline: none; }

.dgs-pl-results-count {
	font-size: 13px;
	color: var(--ink-body-muted, rgba(255,255,255,0.55));
	margin-block-end: 16px;
	font-family: var(--f-mono, monospace);
	letter-spacing: 0.05em;
}

/* ----- 6. Grid of prompt cards ------------------------------------------ */
.dgs-pl-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
	gap: clamp(14px, 1.2vw, 20px);
}

/* Ultrawide: cap card max width so the grid scales nicely past 2K */
@media (min-width: 2400px) {
	.dgs-pl-grid { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
}

.dgs-pl-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 18px;
	background: rgba(255,255,255,0.03);
	border: 1px solid var(--rule, rgba(217,181,128,0.12));
	border-radius: 14px;
	color: inherit;
	cursor: pointer;
	transition: transform 220ms ease, background 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
	min-block-size: 160px;
	position: relative;
	overflow: hidden;
}

.dgs-pl-card:hover,
.dgs-pl-card:focus-within {
	background: rgba(217,181,128,0.04);
	border-color: rgba(217,181,128,0.4);
	transform: translateY(-2px);
	box-shadow: 0 12px 32px -16px rgba(0,0,0,0.5);
}

.dgs-pl-card__pid {
	font-family: var(--f-mono, monospace);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--prestige, #C9A86E);
	opacity: 0.75;
}

.dgs-pl-card__title {
	font-family: var(--f-accent, Georgia, serif);
	font-size: clamp(16px, 1.2vw, 18px);
	font-weight: 500;
	color: var(--body-light, #F7F7F7);
	line-height: 1.3;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.dgs-pl-card__excerpt {
	font-size: 13px;
	color: var(--ink-body-muted, rgba(255,255,255,0.65));
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.dgs-pl-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-block-start: auto;
	padding-block-start: 10px;
	border-block-start: 1px solid var(--rule-faint, rgba(255,255,255,0.06));
}

/* ----- Locked cards (preview mode for non-entitled programmes) ----- */
.dgs-pl-card--locked {
	position: relative;
	opacity: 0.92;
}
.dgs-pl-card--locked .dgs-pl-card__excerpt {
	filter: blur(3px);
	user-select: none;
	pointer-events: none;
}
.dgs-pl-card--locked::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.18) 100%);
	pointer-events: none;
	border-radius: 14px;
}
.dgs-pl-card__lock {
	position: absolute;
	inset-block-end: 14px;
	inset-inline-start: 14px;
	inset-inline-end: 14px;
	padding: 6px 12px;
	background: var(--prestige, #C9A86E);
	color: var(--canvas-deep, #0A244A) !important;
	border-radius: 8px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	z-index: 2;
}
.dgs-pl-card--locked:hover { transform: translateY(-2px); }
.dgs-pl-card--locked:hover .dgs-pl-card__lock {
	background: var(--accent-amber, #E8C98A);
}

/* Locked tabs */
.dgs-pl-tab.is-locked {
	opacity: 0.72;
	border-style: dashed;
}
.dgs-pl-tab.is-locked .dgs-pl-lock { margin-inline-end: 4px; }
.dgs-pl-tab.is-locked:hover { opacity: 1; border-style: solid; }

.dgs-pl-chip {
	display: inline-block;
	padding: 3px 10px;
	background: rgba(217,181,128,0.08);
	color: var(--prestige, #C9A86E);
	border: 1px solid var(--rule-faint, rgba(217,181,128,0.18));
	border-radius: 999px;
	font-size: 11px;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

.dgs-pl-chip--complexity-beginner    { background: rgba(108, 175, 109, 0.12); color: #93D294; border-color: rgba(108, 175, 109, 0.32); }
.dgs-pl-chip--complexity-intermediate{ background: rgba(245, 181, 71, 0.12);  color: var(--accent-amber, #E8C98A); border-color: rgba(245, 181, 71, 0.32); }
.dgs-pl-chip--complexity-advanced    { background: rgba(255, 122, 107, 0.12); color: var(--accent-coral, #FF8A73); border-color: rgba(255, 122, 107, 0.32); }

/* ----- 7. Modal ---------------------------------------------------------- */
.dgs-pl-modal {
	position: fixed;
	inset: 0;
	background: rgba(10, 5, 10, 0.78);
	backdrop-filter: blur(8px);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 100000;
	padding: clamp(12px, 4vw, 48px);
	animation: dgs-fade-in 200ms ease;
}

.dgs-pl-modal.is-open { display: flex; }
@keyframes dgs-fade-in { from { opacity: 0; } to { opacity: 1; } }

.dgs-pl-modal__dialog {
	inline-size: min(1040px, 100%);
	max-block-size: 90vh;
	display: flex;
	flex-direction: column;
	background: var(--canvas-mid, #0B2A55);
	border: 1px solid var(--rule, rgba(201,168,110,0.18));
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 40px 80px -20px rgba(0,0,0,0.6);
	animation: dgs-slide-up 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes dgs-slide-up { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.dgs-pl-modal__header {
	padding: 22px 26px;
	border-block-end: 1px solid var(--rule, rgba(255,255,255,0.08));
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
}

.dgs-pl-modal__title {
	font-family: var(--f-display, serif);
	font-size: clamp(18px, 1.8vw, 24px);
	font-weight: 600;
	color: var(--prestige, #C9A86E);
	margin: 0;
	line-height: 1.25;
}

.dgs-pl-modal__close {
	background: transparent;
	border: 1px solid var(--rule, rgba(255,255,255,0.18));
	border-radius: 50%;
	inline-size: 36px;
	block-size: 36px;
	font-size: 22px;
	cursor: pointer;
	/* Theme bleed-through can turn this black; force the prestige colour. */
	color: var(--prestige, #C9A86E) !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: all 160ms ease;
	flex-shrink: 0;
	padding: 0;
	line-height: 1;
}

.dgs-pl-modal__close:hover {
	background: var(--accent-coral, #FF8A73);
	border-color: var(--accent-coral, #FF8A73);
	color: var(--canvas-deep, #0A244A) !important;
}

.dgs-pl-modal__body {
	padding: 22px 26px;
	/* The body is the primary scroll container so everything (chips, excerpt,
	   prompt code) scrolls together as one flow, not in nested boxes. */
	overflow-y: auto;
	overflow-x: hidden;
	flex: 1 1 auto;
	min-block-size: 0;
	color: var(--body-light, #F7F7F7);
	-webkit-overflow-scrolling: touch;
}

.dgs-pl-modal__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-block-end: 16px;
}

.dgs-pl-modal__excerpt {
	font-size: 14px;
	color: var(--ink-body-muted, rgba(255,255,255,0.7));
	margin-block-end: 18px;
	padding-inline-start: 14px;
	border-inline-start: 2px solid var(--prestige, #C9A86E);
	font-style: italic;
}

.dgs-pl-modal__prompt {
	background: var(--canvas-deep, #0A244A);
	border: 1px solid var(--rule, rgba(255,255,255,0.08));
	border-radius: 10px;
	padding: 22px 24px;
	font-family: var(--f-body, system-ui, sans-serif);
	font-size: 14px;
	line-height: 1.7;
	color: var(--body-light, #F7F7F7) !important;
}

/* ----- Rendered markdown styling ----- */
.dgs-pl-md h1, .dgs-pl-md h2, .dgs-pl-md h3, .dgs-pl-md h4, .dgs-pl-md h5, .dgs-pl-md h6 {
	font-family: var(--f-display, Georgia, serif);
	font-weight: 600;
	color: var(--prestige, #C9A86E);
	margin-block: 1.2em 0.5em;
	line-height: 1.3;
}
.dgs-pl-md h1 { font-size: 22px; }
.dgs-pl-md h2 { font-size: 19px; }
.dgs-pl-md h3 { font-size: 17px; letter-spacing: 0.02em; }
.dgs-pl-md h4, .dgs-pl-md h5, .dgs-pl-md h6 { font-size: 15px; }
.dgs-pl-md p { margin: 0 0 1em; }
.dgs-pl-md strong { font-weight: 700; color: var(--prestige, #C9A86E); }
.dgs-pl-md em { font-style: italic; color: var(--body-light, #F7F7F7); opacity: 0.95; }
.dgs-pl-md del { color: var(--ink-body-muted, rgba(255,255,255,0.5)); }
.dgs-pl-md ul, .dgs-pl-md ol { margin: 0 0 1em; padding-inline-start: 1.4em; }
.dgs-pl-md li { margin-block-end: 0.35em; }
.dgs-pl-md li::marker { color: var(--prestige, #C9A86E); }
.dgs-pl-md a {
	color: var(--accent-amber, #E8C98A);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.dgs-pl-md a:hover { color: var(--prestige, #C9A86E); }
.dgs-pl-md blockquote {
	margin: 1em 0;
	padding: 12px 18px;
	border-inline-start: 3px solid var(--prestige, #C9A86E);
	background: rgba(217,181,128,0.04);
	color: var(--ink-body-muted, rgba(255,255,255,0.78));
	font-style: italic;
}
.dgs-pl-md hr {
	border: 0;
	border-block-start: 1px solid var(--rule, rgba(201,168,110,0.18));
	margin: 1.4em 0;
}
.dgs-pl-md .dgs-pl-md-code,
.dgs-pl-md code {
	font-family: var(--f-mono, monospace);
	font-size: 0.92em;
	background: rgba(0,0,0,0.28);
	color: var(--prestige, #C9A86E);
	padding: 2px 6px;
	border-radius: 4px;
}
.dgs-pl-md .dgs-pl-md-pre {
	background: rgba(0,0,0,0.32);
	border: 1px solid var(--rule, rgba(217,181,128,0.16));
	border-radius: 8px;
	padding: 14px 16px;
	margin: 1em 0;
	overflow-x: auto;
	font-family: var(--f-mono, monospace);
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--body-light, #F7F7F7);
}
.dgs-pl-md .dgs-pl-md-pre code {
	background: transparent;
	color: inherit;
	padding: 0;
	font-size: inherit;
}
.dgs-pl-md .dgs-pl-md-table {
	width: 100%;
	border-collapse: collapse;
	margin: 1em 0;
	font-size: 13px;
}
.dgs-pl-md .dgs-pl-md-table th,
.dgs-pl-md .dgs-pl-md-table td {
	padding: 8px 12px;
	border: 1px solid var(--rule, rgba(217,181,128,0.16));
	text-align: start;
	vertical-align: top;
}
.dgs-pl-md .dgs-pl-md-table th {
	background: rgba(217,181,128,0.08);
	color: var(--prestige, #C9A86E);
	font-weight: 600;
}
.dgs-pl-md .dgs-pl-md-table tr:nth-child(even) td {
	background: rgba(255,255,255,0.02);
}

.dgs-pl-modal__actions {
	padding: 14px 26px;
	border-block-start: 1px solid var(--rule, rgba(255,255,255,0.08));
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	background: rgba(0,0,0,0.18);
}

/* ----- 8. Buttons -------------------------------------------------------- */
.dgs-pl-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	background: transparent;
	border: 1px solid var(--rule, rgba(201,168,110,0.22));
	border-radius: 8px;
	color: var(--body-light, #F7F7F7) !important;
	cursor: pointer;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	transition: all 160ms ease;
	text-decoration: none;
}

.dgs-pl-btn:hover {
	background: rgba(217,181,128,0.08);
	border-color: var(--prestige, #C9A86E);
	color: var(--body-light, #F7F7F7) !important;
}

.dgs-pl-btn--primary {
	background: var(--prestige, #C9A86E);
	color: var(--canvas-deep, #0A244A) !important;
	border-color: var(--prestige, #C9A86E);
}

.dgs-pl-btn--primary:hover {
	background: var(--accent-amber, #E8C98A);
	border-color: var(--accent-amber, #E8C98A);
	color: var(--canvas-deep, #0A244A) !important;
}

/* ----- 9. Loading / empty states ----------------------------------------- */
.dgs-pl-loading,
.dgs-pl-empty-state {
	text-align: center;
	padding: clamp(40px, 6vw, 80px) 20px;
	color: var(--ink-body-muted, rgba(255,255,255,0.6));
	font-size: 15px;
}

.dgs-pl-loading::after {
	content: '';
	display: inline-block;
	inline-size: 14px;
	block-size: 14px;
	margin-inline-start: 10px;
	border: 2px solid var(--rule, rgba(217,181,128,0.4));
	border-block-start-color: var(--prestige, #C9A86E);
	border-radius: 50%;
	animation: dgs-spin 800ms linear infinite;
	vertical-align: middle;
}

@keyframes dgs-spin { to { transform: rotate(360deg); } }

/* ----- 10. Pagination ---------------------------------------------------- */
.dgs-pl-pagination {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-block-start: 32px;
	flex-wrap: wrap;
}

.dgs-pl-pagination button {
	padding: 8px 14px;
	background: rgba(255,255,255,0.04);
	border: 1px solid var(--rule, rgba(201,168,110,0.22));
	border-radius: 8px;
	color: var(--body-light, #F7F7F7) !important;
	cursor: pointer;
	font-family: inherit;
	font-size: 13px;
	min-inline-size: 40px;
}

.dgs-pl-pagination button:hover:not(:disabled) { border-color: var(--prestige, #C9A86E); }
.dgs-pl-pagination button:disabled { opacity: 0.4; cursor: not-allowed; }
.dgs-pl-pagination button.is-active {
	background: var(--prestige, #C9A86E);
	color: var(--canvas-deep, #0A244A);
	border-color: var(--prestige, #C9A86E);
}

/* ----- 11. Paywall ------------------------------------------------------- */
.dgs-pl-paywall {
	text-align: center;
	padding: clamp(40px, 6vw, 80px) 24px;
	max-inline-size: 640px;
	margin-inline: auto;
}

.dgs-pl-paywall__title {
	font-family: var(--f-display, serif);
	font-size: clamp(24px, 3.5vw, 40px);
	font-weight: 600;
	color: var(--prestige, #C9A86E);
	margin: 0 0 16px;
	line-height: 1.2;
}

.dgs-pl-paywall__body {
	font-size: 16px;
	color: var(--ink-body-muted, rgba(255,255,255,0.7));
	margin: 0 0 32px;
	line-height: 1.6;
}

.dgs-pl-paywall__price {
	font-family: var(--f-display, serif);
	font-size: clamp(36px, 5vw, 56px);
	color: var(--prestige, #C9A86E);
	margin: 24px 0;
	letter-spacing: -0.02em;
}

.dgs-pl-paywall__price small { font-size: 16px; opacity: 0.7; letter-spacing: 0.05em; }

.dgs-pl-paywall__cta {
	display: inline-block;
	padding: 14px 32px;
	background: var(--prestige, #C9A86E);
	color: var(--canvas-deep, #0A244A);
	border: 0;
	border-radius: 10px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-decoration: none;
	cursor: pointer;
	transition: transform 200ms ease, background 200ms ease;
}

.dgs-pl-paywall__cta:hover {
	background: var(--accent-amber, #E8C98A);
	transform: translateY(-1px);
}

/* ----- 11b. Forms (new-prompt submit + issue report) ------------------- */
.dgs-pl-form { display: flex; flex-direction: column; gap: 14px; }
.dgs-pl-form label {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 13px;
	font-weight: 500;
	color: var(--prestige, #C9A86E);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.dgs-pl-form input[type="text"],
.dgs-pl-form input[type="search"],
.dgs-pl-form textarea,
.dgs-pl-form select {
	padding: 10px 12px;
	background: rgba(255,255,255,0.04);
	border: 1px solid var(--rule, rgba(201,168,110,0.22));
	border-radius: 8px;
	color: var(--body-light, #F7F7F7) !important;
	font-family: inherit;
	font-size: 14px;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	resize: vertical;
}
.dgs-pl-form textarea {
	font-family: var(--f-mono, monospace);
	min-block-size: 120px;
	line-height: 1.5;
}
.dgs-pl-form input:focus,
.dgs-pl-form textarea:focus,
.dgs-pl-form select:focus {
	border-color: var(--prestige, #C9A86E);
	outline: none;
	background: rgba(217,181,128,0.04);
}
.dgs-pl-form select option { color: #0A244A !important; background: #F7F7F7 !important; }
.dgs-pl-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
@media (max-width: 600px) {
	.dgs-pl-form__row { grid-template-columns: 1fr; }
}
.dgs-pl-form__actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-block-start: 8px;
}
.dgs-pl-form__hint {
	color: var(--ink-body-muted, rgba(255,255,255,0.6));
	font-size: 12px;
	margin: 0;
}
.dgs-pl-suggest { font-weight: 600; white-space: nowrap; }

/* ----- 11c. Paywall — tiered upsell modal -------------------------------- */
.dgs-pl-paywall-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 14px;
	margin-block-start: 16px;
}
.dgs-pl-offer {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 24px 22px;
	background: rgba(255,255,255,0.04);
	border: 1px solid var(--rule, rgba(201,168,110,0.18));
	border-radius: 14px;
	text-decoration: none !important;
	color: inherit;
	transition: transform 220ms ease, background 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}
.dgs-pl-offer:hover {
	transform: translateY(-2px);
	background: rgba(217,181,128,0.06);
	border-color: var(--prestige, #C9A86E);
	box-shadow: 0 16px 40px -16px rgba(0,0,0,0.5);
}
.dgs-pl-offer.is-recommended {
	background: rgba(217,181,128,0.08);
	border-color: var(--prestige, #C9A86E);
}
.dgs-pl-offer__badge {
	position: absolute;
	inset-block-start: -10px;
	inset-inline-end: 18px;
	padding: 4px 10px;
	background: var(--prestige, #C9A86E);
	color: var(--canvas-deep, #0A244A);
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.dgs-pl-offer__label {
	font-family: var(--f-display, serif);
	font-size: clamp(18px, 1.6vw, 22px);
	font-weight: 600;
	color: var(--prestige, #C9A86E);
	margin: 0;
}
.dgs-pl-offer__sublabel {
	font-size: 13px;
	color: var(--ink-body-muted, rgba(255,255,255,0.65));
	margin: 0;
}
.dgs-pl-offer__price {
	font-family: var(--f-display, serif);
	font-size: clamp(28px, 3vw, 38px);
	color: var(--prestige, #C9A86E);
	font-weight: 600;
	letter-spacing: -0.01em;
	display: flex;
	align-items: baseline;
	gap: 10px;
}
.dgs-pl-offer__price small {
	font-size: 13px;
	color: var(--ink-body-muted, rgba(255,255,255,0.65));
	font-weight: 400;
}
.dgs-pl-offer__original {
	font-size: 16px;
	color: var(--ink-body-muted, rgba(255,255,255,0.5));
	text-decoration: line-through;
	font-weight: 400;
}
.dgs-pl-offer__founder {
	display: inline-block;
	padding: 4px 10px;
	background: var(--accent-amber, #E8C98A);
	color: var(--canvas-deep, #0A244A);
	border-radius: 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	width: max-content;
}
.dgs-pl-offer .dgs-pl-btn {
	margin-block-start: auto;
}
.dgs-pl-portal[data-theme="light"] .dgs-pl-offer,
.dgs-pl-modal[data-theme="light"] .dgs-pl-offer {
	background: #FFFFFF;
	border-color: rgba(26, 8, 16, 0.12);
}
.dgs-pl-portal[data-theme="light"] .dgs-pl-offer.is-recommended,
.dgs-pl-modal[data-theme="light"] .dgs-pl-offer.is-recommended {
	background: #FBF7F1;
	border-color: var(--accent-primary, #00716C);
}

/* ----- 12. Favourite + toast -------------------------------------------- */
.dgs-pl-fav {
	background: transparent;
	border: 0;
	cursor: pointer;
	color: var(--ink-body-muted, rgba(255,255,255,0.4));
	font-size: 22px;
	padding: 0;
	transition: color 160ms ease, transform 160ms ease;
}
.dgs-pl-fav:hover { transform: scale(1.15); }
.dgs-pl-fav.is-fav { color: var(--accent-amber, #E8C98A); }

.dgs-pl-toast {
	position: fixed;
	inset-block-end: 24px;
	inset-inline-start: 50%;
	transform: translateX(-50%);
	background: var(--canvas-mid, #0B2A55);
	color: var(--prestige, #C9A86E);
	border: 1px solid var(--prestige, #C9A86E);
	padding: 12px 24px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 500;
	box-shadow: 0 16px 40px -12px rgba(0,0,0,0.5);
	opacity: 0;
	pointer-events: none;
	transition: opacity 200ms ease, transform 240ms ease;
	z-index: 100001;
}

.dgs-pl-toast.is-visible {
	opacity: 1;
	transform: translateX(-50%) translateY(-6px);
}

/* ----- 12b. Filter drawer + active chips -------------------------------- */
.dgs-pl-filter-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 18px;
	background: rgba(255,255,255,0.04);
	border: 1px solid var(--rule, rgba(201,168,110,0.22));
	border-radius: 10px;
	color: var(--body-light, #F7F7F7) !important;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: all 160ms ease;
}
.dgs-pl-filter-toggle:hover {
	background: rgba(217,181,128,0.08);
	border-color: var(--prestige, #C9A86E);
}
.dgs-pl-filter-toggle[aria-expanded="true"] {
	background: rgba(217,181,128,0.1);
	border-color: var(--prestige, #C9A86E);
}
.dgs-pl-filter-toggle__icon {
	width: 14px;
	height: 14px;
	display: inline-block;
	border-block-start: 2px solid var(--prestige, #C9A86E);
	border-block-end: 2px solid var(--prestige, #C9A86E);
	box-sizing: border-box;
	position: relative;
}
.dgs-pl-filter-toggle__icon::before,
.dgs-pl-filter-toggle__icon::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--prestige, #C9A86E);
}
.dgs-pl-filter-toggle__icon::before { top: 3px; }
.dgs-pl-filter-toggle__icon::after  { top: 7px; }
.dgs-pl-filter-toggle__count {
	color: var(--accent-amber, #E8C98A);
	font-weight: 600;
	font-size: 12px;
}

.dgs-pl-filters-drawer {
	margin-block-end: 16px;
	padding: 18px 22px;
	background: rgba(217,181,128,0.04);
	border: 1px solid var(--rule, rgba(217,181,128,0.16));
	border-radius: 14px;
	animation: dgs-fade-in 200ms ease;
}
.dgs-pl-filters-drawer[hidden] { display: none; }
.dgs-pl-filters-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 14px;
}
.dgs-pl-filter-group label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--prestige, #C9A86E);
	margin-block-end: 6px;
}
.dgs-pl-filter-group__count {
	color: var(--ink-body-muted, rgba(255,255,255,0.55));
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}
.dgs-pl-filter-group select {
	width: 100%;
	padding: 10px 12px;
	background: rgba(255,255,255,0.04);
	border: 1px solid var(--rule, rgba(201,168,110,0.22));
	border-radius: 8px;
	color: var(--body-light, #F7F7F7) !important;
	font-family: inherit;
	font-size: 13px;
}
.dgs-pl-filter-group select option { color: #0A244A !important; background: #F7F7F7 !important; }
.dgs-pl-filter-group .dgs-pl-btn {
	width: 100%;
	justify-content: center;
}
.dgs-pl-filter-group .dgs-pl-btn.is-active {
	background: var(--prestige, #C9A86E);
	color: var(--canvas-deep, #0A244A) !important;
	border-color: var(--prestige, #C9A86E);
}

.dgs-pl-active-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-block-end: 16px;
}
.dgs-pl-active-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 8px 4px 12px;
	background: var(--prestige, #C9A86E);
	color: var(--canvas-deep, #0A244A);
	border-radius: 999px;
	font-size: 12px;
	font-weight: 500;
}
.dgs-pl-active-chip button {
	background: transparent;
	border: 0;
	color: inherit;
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
	padding: 0 4px;
	opacity: 0.8;
}
.dgs-pl-active-chip button:hover { opacity: 1; }

/* ----- 12c. Theme toggle ------------------------------------------------ */
.dgs-pl-theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 64px;
	height: 32px;
	padding: 0;
	border: 1px solid var(--rule, rgba(201,168,110,0.22));
	border-radius: 999px;
	background: transparent;
	cursor: pointer;
	font-size: 14px;
	color: var(--prestige, #C9A86E);
}
.dgs-pl-theme-toggle__sun  { opacity: 0.5; }
.dgs-pl-theme-toggle__moon { opacity: 1; }
.dgs-pl-portal[data-theme="light"] .dgs-pl-theme-toggle__sun  { opacity: 1; }
.dgs-pl-portal[data-theme="light"] .dgs-pl-theme-toggle__moon { opacity: 0.4; }

/* ----- 12d. LIGHT-MODE THEME ------------------------------------------- */
/* When [data-theme="light"] is set on the portal (and propagated to modals),
   swap the canvas + ink palettes so the bg is bright. Programme accent colours
   (--accent-primary etc.) survive — we just promote them in place of --prestige
   so headings still pop in the programme's DNA hue.
   Specificity (0,2,0) beats the per-programme token block (0,1,0). */
.dgs-pl-portal[data-theme="light"],
.dgs-pl-modal[data-theme="light"] {
	--canvas-deep:    #FFFFFF;
	--canvas-mid:     #F7F7F7;
	--canvas-rich:    #FFFFFF;
	--body-light:     #0A244A;
	--prestige:       var(--accent-primary, #00716C);
	--prestige-soft:  var(--accent-primary, #00716C);
	--ink-body-muted: rgba(26, 8, 16, 0.62);
	--rule:           rgba(26, 8, 16, 0.14);
	--rule-faint:     rgba(26, 8, 16, 0.06);
	color: #0A244A;
}
.dgs-pl-portal[data-theme="light"] {
	background: #FFFFFF !important;
}
.dgs-pl-portal[data-theme="light"]::before { opacity: 0.05; }
.dgs-pl-portal[data-theme="light"] .dgs-pl-card {
	background: #FFFFFF;
	border-color: rgba(26, 8, 16, 0.1);
	box-shadow: 0 2px 8px -4px rgba(26, 8, 16, 0.06);
}
.dgs-pl-portal[data-theme="light"] .dgs-pl-card:hover {
	background: #FBF7F1;
	border-color: var(--accent-primary, #00716C);
	box-shadow: 0 12px 32px -16px rgba(26, 8, 16, 0.18);
}
.dgs-pl-portal[data-theme="light"] .dgs-pl-card__title,
.dgs-pl-portal[data-theme="light"] .dgs-pl-card__excerpt {
	color: #0A244A;
}
.dgs-pl-portal[data-theme="light"] .dgs-pl-card__pid,
.dgs-pl-portal[data-theme="light"] h1,
.dgs-pl-portal[data-theme="light"] .dgs-pl-results-count {
	color: var(--accent-primary, #00716C);
}
.dgs-pl-portal[data-theme="light"] .dgs-pl-chip {
	background: rgba(26, 8, 16, 0.04);
	color: var(--accent-primary, #00716C);
	border-color: rgba(26, 8, 16, 0.08);
}
.dgs-pl-portal[data-theme="light"] .dgs-pl-tab {
	background: #FFFFFF;
	color: #0A244A;
	border-color: rgba(26, 8, 16, 0.12);
}
.dgs-pl-portal[data-theme="light"] .dgs-pl-tab.is-active {
	background: var(--accent-primary, #00716C);
	color: #FFFFFF;
	border-color: var(--accent-primary, #00716C);
}
.dgs-pl-portal[data-theme="light"] .dgs-pl-filter-toggle,
.dgs-pl-portal[data-theme="light"] .dgs-pl-filters-drawer,
.dgs-pl-portal[data-theme="light"] .dgs-pl-filter-group select,
.dgs-pl-portal[data-theme="light"] .dgs-pl-search input,
.dgs-pl-portal[data-theme="light"] .dgs-pl-sort,
.dgs-pl-portal[data-theme="light"] .dgs-pl-pagination button {
	background: #FFFFFF !important;
	border-color: rgba(26, 8, 16, 0.12);
	color: #0A244A !important;
}
.dgs-pl-portal[data-theme="light"] .dgs-pl-filter-group select option,
.dgs-pl-portal[data-theme="light"] .dgs-pl-sort option {
	color: #0A244A !important; background: #FFFFFF !important;
}
.dgs-pl-portal[data-theme="light"] .dgs-pl-search input::placeholder {
	color: rgba(26,8,16,0.45);
}

/* Modal in light mode */
.dgs-pl-modal[data-theme="light"] { background: rgba(255, 250, 245, 0.75); }
.dgs-pl-modal[data-theme="light"] .dgs-pl-modal__dialog {
	background: #FFFFFF;
	border-color: rgba(26, 8, 16, 0.12);
	box-shadow: 0 40px 80px -20px rgba(26, 8, 16, 0.18);
}
.dgs-pl-modal[data-theme="light"] .dgs-pl-modal__title,
.dgs-pl-modal[data-theme="light"] .dgs-pl-md h1,
.dgs-pl-modal[data-theme="light"] .dgs-pl-md h2,
.dgs-pl-modal[data-theme="light"] .dgs-pl-md h3,
.dgs-pl-modal[data-theme="light"] .dgs-pl-md strong,
.dgs-pl-modal[data-theme="light"] .dgs-pl-md a {
	color: var(--accent-primary, #00716C) !important;
}
.dgs-pl-modal[data-theme="light"] .dgs-pl-modal__body,
.dgs-pl-modal[data-theme="light"] .dgs-pl-modal__prompt,
.dgs-pl-modal[data-theme="light"] .dgs-pl-md {
	background: #FFFFFF;
	color: #0A244A !important;
}
.dgs-pl-modal[data-theme="light"] .dgs-pl-modal__prompt {
	background: #FBF7F1;
	border-color: rgba(26, 8, 16, 0.08);
}
.dgs-pl-modal[data-theme="light"] .dgs-pl-md code,
.dgs-pl-modal[data-theme="light"] .dgs-pl-md .dgs-pl-md-pre {
	background: rgba(26, 8, 16, 0.05);
	color: #0A244A;
}
.dgs-pl-modal[data-theme="light"] .dgs-pl-modal__close {
	color: #0A244A !important;
	border-color: rgba(26, 8, 16, 0.18);
}

/* ----- 13. Responsive breakpoints ---------------------------------------- */

/* Mobile: tighten spacing, stack the language toggle below the title */
@media (max-width: 640px) {
	.dgs-pl-portal {
		padding-block: 20px;
		padding-inline: 14px;
	}
	.dgs-pl-header__top {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}
	.dgs-pl-tabs { width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-block-end: 4px; }
	.dgs-pl-tab { flex-shrink: 0; }
	.dgs-pl-grid { grid-template-columns: 1fr; }
	.dgs-pl-modal { padding: 0; }
	.dgs-pl-modal__dialog { border-radius: 0; max-block-size: 100vh; inline-size: 100%; }
}

/* Tablet → small desktop: 2-column grid */
@media (min-width: 641px) and (max-width: 1023px) {
	.dgs-pl-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Ultrawide: cap line lengths inside the hero header but let the grid breathe */
@media (min-width: 1920px) {
	.dgs-pl-portal {
		padding-inline: clamp(48px, 6vw, 120px);
	}
}

/* Ultrawide+ (3440+) — additional column density */
@media (min-width: 3000px) {
	.dgs-pl-grid {
		grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
	}
	.dgs-pl-portal > .dgs-pl-header,
	.dgs-pl-portal > .dgs-pl-body { max-inline-size: 2400px; }
}

/* Print: hide noise */
@media print {
	.dgs-pl-modal, .dgs-pl-toast, .dgs-pl-controls, .dgs-pl-pagination { display: none !important; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.dgs-pl-portal *, .dgs-pl-portal *::before, .dgs-pl-portal *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* =====================================================================
   v0.10.2 — Accessibility, focus-visible, mobile responsiveness, skip-link
   ===================================================================== */

/* Skip link — visible only when focused (keyboard navigation) */
.dgs-pl-skip-link {
	position: absolute;
	top: -50px;
	left: 16px;
	background: #0A244A;
	color: #fff;
	padding: 12px 18px;
	z-index: 99999;
	border-radius: 0 0 8px 8px;
	text-decoration: none;
	font-weight: 600;
	transition: top 120ms ease;
}
.dgs-pl-skip-link:focus { top: 0; outline: 3px solid #C9A86E; outline-offset: 2px; }

/* Global focus-visible styles — keyboard users need to see what's focused */
.dgs-pl-portal :focus-visible {
	outline: 3px solid #C9A86E;
	outline-offset: 2px;
	border-radius: 4px;
}
.dgs-pl-portal button:focus-visible,
.dgs-pl-portal a:focus-visible,
.dgs-pl-portal [role="button"]:focus-visible,
.dgs-pl-card:focus-visible {
	outline: 3px solid #C9A86E;
	outline-offset: 3px;
}
/* Higher-contrast focus inside modal */
.dgs-pl-modal :focus-visible {
	outline: 3px solid #C9A86E;
	outline-offset: 2px;
}

/* Reduced motion — respect user preference */
@media (prefers-reduced-motion: reduce) {
	.dgs-pl-portal *,
	.dgs-pl-portal *::before,
	.dgs-pl-portal *::after {
		animation-duration: 0.001s !important;
		transition-duration: 0.001s !important;
	}
}

/* Mobile responsive — < 768px tweaks */
@media (max-width: 768px) {
	.dgs-pl-portal { padding: 12px; }
	.dgs-pl-header__top {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}
	.dgs-pl-header__meta { flex-wrap: wrap; gap: 10px; }
	.dgs-pl-header h1 { font-size: 22px !important; line-height: 1.25; }
	.dgs-pl-tabs {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
		padding-bottom: 6px;
		margin: 0 -12px;
		padding-left: 12px;
		padding-right: 12px;
	}
	.dgs-pl-tab { white-space: nowrap; flex: 0 0 auto; }
	.dgs-pl-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
	.dgs-pl-card { padding: 14px !important; }
	.dgs-pl-card__title { font-size: 15px !important; line-height: 1.35; }
	.dgs-pl-search input,
	.dgs-pl-sort,
	.dgs-pl-filter-toggle { width: 100%; box-sizing: border-box; }
	.dgs-pl-toolbar { flex-direction: column; align-items: stretch; gap: 8px; }
	.dgs-pl-modal { max-width: 100% !important; width: 100% !important; height: 100% !important; max-height: 100% !important; border-radius: 0 !important; }
	.dgs-pl-paywall .dgs-pl-offer-card,
	.dgs-pl-offer-card { width: 100% !important; }
	.dgs-pl-anon-banner {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}
}

/* Very small screens — < 380px */
@media (max-width: 380px) {
	.dgs-pl-header h1 { font-size: 18px !important; }
	.dgs-pl-card__title { font-size: 14px !important; }
	.dgs-pl-modal__body { padding: 14px !important; font-size: 14px; }
}

/* High contrast / forced colors mode */
@media (forced-colors: active) {
	.dgs-pl-card { border: 1px solid CanvasText; }
	.dgs-pl-btn,
	.dgs-pl-tab { border: 1px solid CanvasText; }
}

/* Error & empty states — always reachable to screen readers */
.dgs-pl-empty,
.dgs-pl-error {
	padding: 48px 24px;
	text-align: center;
	border-radius: 8px;
	margin: 24px 0;
}
.dgs-pl-empty {
	background: rgba(10,36,74,0.04);
	border: 1px dashed rgba(10,36,74,0.2);
	color: #0A244A;
}
.dgs-pl-error {
	background: rgba(220,53,69,0.06);
	border: 1px solid rgba(220,53,69,0.3);
	color: #6F1D1B;
}
.dgs-pl-empty__icon,
.dgs-pl-error__icon { font-size: 36px; display: block; margin-bottom: 12px; }
.dgs-pl-empty__title,
.dgs-pl-error__title { font-size: 18px; font-weight: 600; margin-bottom: 6px; }
.dgs-pl-error__retry {
	margin-top: 14px;
	display: inline-block;
	background: #0A244A;
	color: #fff;
	padding: 10px 18px;
	border-radius: 6px;
	border: 0;
	cursor: pointer;
	font-weight: 600;
}