/* FileDeck frontend styles */

/* ---------------------------------------------------------------------------
   Design tokens. Every visual dimension routes through a --fdk-* custom
   property, so a theme or user can restyle FileDeck across the board with a
   handful of variables. Overriding a token restyles every rule that reads it
   — even the !important download-button colours, because the token is the
   value. Defaults below
   match the classic FileDeck look; the "Match my theme" / "Dark" presets and
   the Display settings just re-point these variables.
   --------------------------------------------------------------------------- */
.filedeck,
.fdk-single-download,
.fdk-ask,
.fdk-submit-form,
.fdk-login-form,
.fdk-unlock-form,
.fdk-standalone-search,
.fdk-subscribe {
	--fdk-accent: #1e40af;          /* links, buttons, active states           */
	--fdk-accent-contrast: #fff;    /* text/icons on an accent fill            */
	--fdk-ink: #0f172a;             /* primary text                            */
	--fdk-muted: #64748b;           /* secondary text, meta                    */
	--fdk-surface: #fff;            /* cards, controls, buttons                */
	--fdk-surface-2: #f8fafc;       /* header row, tints, hovers               */
	--fdk-border: #e2e8f0;          /* every hairline                          */
	--fdk-danger: #b3261e;          /* errors                                  */
	--fdk-danger-bg: #fef2f2;
	--fdk-danger-border: #fecaca;
	--fdk-success: #00a32a;
	--fdk-radius: 8px;              /* cards, folders, modals                  */
	--fdk-radius-sm: 6px;           /* controls, buttons, pages                */
	--fdk-radius-lg: 12px;          /* the table card, the Ask panel           */
	--fdk-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
	--fdk-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.18);
	--fdk-row-y: 0.6em;             /* table row density (vertical)            */
	--fdk-row-x: 0.75em;            /* table row density (horizontal)          */
	--fdk-font: inherit;            /* inherits your theme's font by default   */
	color-scheme: light;
	/* Route body text through the ink token so a dark scheme / custom text
	   colour flips every cell (summary, date, size…), not just the title. The
	   default #0f172a matches what most themes already use, so the classic
	   light look is unchanged; the font still inherits from the theme. */
	color: var(--fdk-ink);
}

.filedeck { margin: 1.5em 0; font-family: var(--fdk-font); }

/* Results scroll region. Only the ROWS scroll when a library height is set —
   the controls strip and the pagination footer stay put, because a search box
   that scrolls out of reach is a worse library than an unbounded one.

   Without a height this wrapper declares no overflow AT ALL, deliberately: any
   value other than visible creates a scrollport, and that would break the
   viewport-sticky table header on every default library. */
.fdk-scroll { min-width: 0; }

.fdk-scroll-fixed {
	max-height: var(--fdk-library-height);
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* Infinite scroll's watch point. Not zero-height: a zero-area element is not
   reliably reported as intersecting. */
.fdk-scroll-end { height: 1px; }

/* Table libraries render as a self-contained card: controls strip on top,
   rows in the middle, pagination footer. Grid and folder layouts keep their
   own framing (cards / collapsible sections), so this is table-only.

   Overflow: a many-column table can be wider than the card, so the safe
   default is a horizontal scrollbar — clipping would hide whole columns.
   But a scroll container also disables the viewport-sticky header, so when
   JS measures that the table fits (the common case) it adds .fdk-fits and
   the card switches to overflow: clip — which, unlike hidden, does NOT
   create a scrollport, so the sticky header keeps working. */
.filedeck[data-layout="table"] {
	border: 1px solid var(--fdk-border);
	border-radius: var(--fdk-radius-lg);
	background: var(--fdk-surface);
	box-shadow: var(--fdk-shadow);
	overflow-x: auto;
}

.filedeck[data-layout="table"].fdk-fits {
	overflow: hidden;
	overflow: clip;
}

.filedeck[data-layout="table"] .fdk-controls {
	margin-bottom: 0;
	padding: 0.75em 1em;
	border-bottom: 1px solid var(--fdk-border);
}

.filedeck[data-layout="table"] .fdk-table th:first-child,
.filedeck[data-layout="table"] .fdk-table td:first-child {
	padding-left: 1em;
}

.filedeck[data-layout="table"] .fdk-table th:last-child,
.filedeck[data-layout="table"] .fdk-table td:last-child {
	padding-right: 1em;
}

.filedeck[data-layout="table"] .fdk-table tbody tr:last-child td {
	border-bottom: 0;
}

.filedeck[data-layout="table"] .fdk-bulkbar {
	margin: 0.75em 1em 0;
}

.filedeck[data-layout="table"] .fdk-empty {
	padding: 1em;
}

.filedeck[data-layout="table"] .fdk-pagination {
	margin-top: 0;
	padding: 0.75em 1em;
	border-top: 1px solid var(--fdk-border);
}

/* Every FileDeck frontend surface is a light-surface component. Pin the color
   scheme on each shortcode root so native controls — <select> option popups
   especially, plus checkboxes and date pickers — render light even when the
   visitor's OS is in dark mode. Without this, a dark-mode device draws the
   dropdown list as an unstyled dark menu over the light UI. */
.filedeck,
.fdk-submit-form,
.fdk-login-form,
.fdk-unlock-form,
.fdk-standalone-search,
.fdk-subscribe,
.fdk-ask {
	color-scheme: light;
}

/* Every text field adopts the surface + ink tokens, so it stays legible when a
   preset or the Dark scheme flips the surface (native inputs would otherwise
   render as raw browser grey). In the default light theme these resolve to the
   same #fff / ink the fields already showed, so nothing changes. */
.filedeck input,
.filedeck select,
.filedeck textarea,
.fdk-submit-form input,
.fdk-submit-form select,
.fdk-submit-form textarea,
.fdk-login-form input,
.fdk-unlock-form input,
.fdk-standalone-search input,
.fdk-lead-form input,
.fdk-subscribe input,
.fdk-subscribe select {
	background: var(--fdk-surface);
	color: var(--fdk-ink);
}

/* Controls */
.fdk-controls {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75em;
	align-items: center;
	margin-bottom: 1em;
}

.fdk-search-field {
	position: relative;
	display: inline-flex;
	flex: 1 1 220px;
	max-width: 360px;
}

.fdk-search {
	flex: 1 1 auto;
	width: 100%;
	padding: 0.5em 0.75em 0.5em 2.2em;
	border: 1px solid var(--fdk-border);
	border-radius: var(--fdk-radius-sm);
	font-size: 0.95em;
}

/* Theme-proof the icon gutter: a theme's `input[type="search"] { padding }`
   rule (0,1,1) outweighs the single class above (0,1,0), which pushed the
   placeholder under the icon on a customer site. Restate the gutter at
   ancestor-scoped specificity so generic input resets can't collapse it. */
.filedeck .fdk-search-field .fdk-search {
	padding-left: 2.2em;
}

.fdk-search-icon {
	position: absolute;
	top: 50%;
	left: 0.7em;
	transform: translateY(-50%);
	color: var(--fdk-muted);
	pointer-events: none;
}

/* In-flight indicator: content/semantic (inline mode) or the library fetch
   (server mode) runs after the instant local filter, so show a spinner while
   the deeper results are still on their way in. */
.fdk-search-field.is-searching .fdk-search {
	padding-right: 2.1em;
}

.fdk-search-spin {
	position: absolute;
	top: 50%;
	right: 0.7em;
	width: 14px;
	height: 14px;
	margin-top: -7px;
	border: 2px solid var(--fdk-border);
	border-top-color: var(--fdk-accent, #1e40af);
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

.fdk-search-field.is-searching .fdk-search-spin {
	opacity: 1;
	animation: fdk-spin 0.7s linear infinite;
}

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

@media ( prefers-reduced-motion: reduce ) {
	.fdk-search-field.is-searching .fdk-search-spin {
		animation: none;
	}
}

.fdk-page-length {
	padding: 0.45em 0.5em;
	border: 1px solid var(--fdk-border);
	border-radius: var(--fdk-radius-sm);
	font-size: 0.95em;
	background: var(--fdk-surface);
	color: inherit;
}

/* ---- Multi-select filter controls ---------------------------------------
   A <details> disclosure: the summary is the closed control, the panel holds
   the checkboxes.

   The panel is IN FLOW, not absolutely positioned, and that is deliberate. A
   table library is a card with overflow-x:auto — and overflow:clip once JS
   measures that the table fits — so an absolutely positioned panel would be
   clipped by its own container on the common path. In-flow costs a little
   layout shift on open and cannot be cut off. */
.fdk-multi {
	position: relative;
	align-self: flex-start;
	font-size: 0.95em;
}

.fdk-multi-toggle {
	display: flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.45em 0.6em;
	border: 1px solid var(--fdk-border);
	border-radius: var(--fdk-radius-sm);
	background: var(--fdk-surface);
	color: inherit;
	cursor: pointer;
	list-style: none;
	white-space: nowrap;
}

.fdk-multi-toggle::-webkit-details-marker { display: none; }

.fdk-multi-toggle::after {
	content: "";
	width: 0.45em;
	height: 0.45em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-0.1em, -0.1em);
	opacity: 0.55;
}

.fdk-multi[open] > .fdk-multi-toggle::after {
	transform: rotate(-135deg) translate(-0.15em, -0.15em);
}

.fdk-multi.has-selection > .fdk-multi-toggle {
	border-color: var(--fdk-accent);
	box-shadow: inset 0 0 0 1px var(--fdk-accent);
}

.fdk-multi-toggle:focus-visible {
	outline: 2px solid var(--fdk-accent);
	outline-offset: 2px;
}

.fdk-multi-panel {
	margin-top: 0.35em;
	padding: 0.35em;
	border: 1px solid var(--fdk-border);
	border-radius: var(--fdk-radius-sm);
	background: var(--fdk-surface);
	box-shadow: var(--fdk-shadow);
	max-height: 16em;
	overflow-y: auto;
	min-width: 12em;
}

/* OVERLAY, via the top layer. An earlier version left the panel in flow and
   accepted the layout shift, on the grounds that a table library is a card with
   overflow-x:auto (overflow:clip once JS measures the table fits) and an
   absolutely positioned panel would be clipped by its own container. That was
   true, and the shift was much worse than "a little": opening a filter pushed
   the whole table down the page.

   position:absolute cannot solve it — with filter_position="headings" the panel
   sits inside <thead> inside .fdk-table inside .fdk-scroll inside the card, so
   there are several clipping ancestors, and any of them can also be a transform
   containing block once a theme gets involved. The top layer is outside all of
   it: no ancestor overflow, z-index or transform can reach it.

   The `popover` attribute is added by JS, never by the markup — a browser that
   knows the attribute hides the element until it is shown, so hard-coding it
   would leave the panel invisible wherever the script did not run. Without JS,
   or on a browser without the API, none of this applies and the panel stays in
   flow exactly as before. */
.fdk-multi-panel:popover-open {
	position: fixed;
	margin: 0;
	inset: auto;
	border-color: var(--fdk-border);
}

/* The popover's own backdrop would dim the page behind a filter dropdown. */
.fdk-multi-panel::backdrop {
	background: transparent;
}

.fdk-multi-opt {
	display: flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.3em 0.4em;
	border-radius: 4px;
	cursor: pointer;
}

.fdk-multi-opt:hover { background: var(--fdk-surface-2); }

.fdk-multi-opt[hidden] { display: none; }

.fdk-multi-name { flex: 1 1 auto; }

.fdk-multi-count {
	color: var(--fdk-muted);
	font-size: 0.85em;
	font-variant-numeric: tabular-nums;
}

/* Heading-row filters. The controls are the same elements as in the bar
   above — only the mount point differs — so they need placement, not restyling.
   vertical-align: top keeps a row of controls aligned when one of them is open
   and therefore much taller than its neighbours. */
.fdk-filter-row td {
	padding: 0.4em 0.75em 0.6em;
	vertical-align: top;
	background: var(--fdk-surface);
	border-bottom: 1px solid var(--fdk-border);
}

.fdk-filter-row .fdk-multi { font-size: 0.9em; }

/* ---- Active filter chips ------------------------------------------------ */
.fdk-active {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4em;
	margin-bottom: 0.85em;
}

.fdk-active[hidden] { display: none; }

.fdk-active-label {
	color: var(--fdk-muted);
	font-size: 0.85em;
}

.fdk-active-chips {
	display: contents;
}

/* The pill shape is shared: an active-filter chip is a <button>, but the same
   class also labels things that are not removable — "AI tier" beside a setting
   in wp-admin, and the marketing theme's feature pills. Only the button gets
   the affordances below. */
.fdk-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	padding: 0.2em 0.5em;
	border: 1px solid var(--fdk-border);
	border-radius: 999px;
	background: var(--fdk-surface-2);
	color: inherit;
	font-size: 0.85em;
}

button.fdk-chip { cursor: pointer; }

/* The × is decorative — the accessible name is on the button itself.
   Scoped to button.fdk-chip deliberately: unscoped, it put a "remove" cross on
   every static label sharing the class, which read as a dismissible filter the
   visitor was supposed to clear. */
button.fdk-chip::after {
	content: "\00d7";
	font-size: 1.15em;
	line-height: 1;
	opacity: 0.6;
}

button.fdk-chip:hover { border-color: var(--fdk-accent); }

button.fdk-chip:hover::after { opacity: 1; }

.fdk-active-clear {
	padding: 0.2em 0.4em;
	border: 0;
	background: none;
	color: var(--fdk-muted);
	font-size: 0.85em;
	text-decoration: underline;
	cursor: pointer;
}

/* ---- Multi-column sort rank --------------------------------------------
   aria-sort carries direction but has no way to say "second". Without this
   badge three sorted columns look like three unrelated ones. */
.fdk-sort-rank {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.25em;
	height: 1.25em;
	margin-left: 0.35em;
	padding: 0 0.25em;
	border-radius: 999px;
	background: var(--fdk-accent);
	color: #fff;
	font-size: 0.7em;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.fdk-facet-range {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	font-size: 0.9em;
	color: var(--fdk-muted);
}

.fdk-facet-range .fdk-facet-range-label {
	font-weight: 600;
}

.fdk-facet-range input {
	width: 8em;
	padding: 0.4em 0.5em;
	border: 1px solid var(--fdk-border);
	border-radius: 4px;
	font-size: 0.95em;
	background: var(--fdk-surface);
	color: inherit;
}

.fdk-count {
	color: var(--fdk-muted);
	font-size: 0.85em;
	margin-left: auto;
}

/* Table */
.fdk-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95em;
}

.fdk-table th,
.fdk-table td {
	padding: var(--fdk-row-y, 0.6em) var(--fdk-row-x, 0.75em);
	text-align: left;
	border-bottom: 1px solid var(--fdk-border);
	vertical-align: middle;
}

.fdk-table thead th {
	position: sticky;
	/* WordPress sets this var on the frontend when the admin bar shows, so the
	   sticky header lands below it for logged-in visitors. */
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 2;
	padding-top: 0.55em;
	padding-bottom: 0.55em;
	border-bottom: 1px solid var(--fdk-border);
	background: var(--fdk-surface-2);
	color: var(--fdk-muted);
	font-size: 0.78em;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}

.fdk-table th.fdk-sortable[aria-sort="ascending"],
.fdk-table th.fdk-sortable[aria-sort="descending"] {
	color: var(--fdk-accent);
}

.fdk-table th.fdk-sortable {
	cursor: pointer;
	user-select: none;
}

.fdk-table th.fdk-sortable::after {
	content: "\2195";
	opacity: 0.35;
	margin-left: 0.35em;
	font-size: 0.85em;
}

.fdk-table th.fdk-sortable[aria-sort="ascending"]::after {
	content: "\2191";
	opacity: 1;
}

.fdk-table th.fdk-sortable[aria-sort="descending"]::after {
	content: "\2193";
	opacity: 1;
}

.fdk-table tbody tr {
	transition: background-color 0.12s ease;
}

.fdk-table tbody tr:hover {
	background: rgba(30, 64, 175, 0.06);
	background: color-mix(in srgb, var(--fdk-accent) 6%, transparent);
}

/* Title is the row's hero: ink, weight, no underline until hover. */
.fdk-table td[data-col="title"] a {
	color: var(--fdk-ink, #0f172a);
	font-weight: 600;
	text-decoration: none;
}

.fdk-table td[data-col="title"] a:hover {
	color: var(--fdk-accent);
	text-decoration: underline;
}

/* Categories are quiet pills, not competing links. */
.fdk-cat {
	display: inline-block;
	padding: 0.1em 0.7em;
	margin: 0.1em 0.15em 0.1em 0;
	border: 1px solid var(--fdk-border);
	border-radius: 999px;
	background: var(--fdk-surface);
	color: var(--fdk-muted);
	font-size: 0.85em;
	white-space: nowrap;
	text-decoration: none;
}

a.fdk-cat:hover {
	border-color: var(--fdk-accent);
	color: var(--fdk-accent);
}

/* Grid */
.fdk-grid {
	display: grid;
	grid-template-columns: repeat(var(--fdk-grid-cols, auto-fill), minmax(230px, 1fr));
	gap: 1em;
}

.fdk-card {
	border: 1px solid var(--fdk-border);
	border-radius: var(--fdk-radius);
	padding: 1em;
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	background: var(--fdk-surface);
}

/* An explicit `display` beats the user agent's [hidden] { display: none }, so
   every card stayed on screen while search, filtering and the pager set hidden
   on it: the result count and pager updated correctly and the grid did not, and
   "No documents found." rendered above a full, unfiltered grid. Same shape as
   the .fdk-table tr[hidden] rule further down. Any component that sets its own
   display and is toggled via [hidden] needs one of these. */
.fdk-card[hidden] {
	display: none;
}

.fdk-card-title {
	font-size: 1.05em;
	margin: 0;
	line-height: 1.3;
}

.fdk-card-excerpt {
	font-size: 0.88em;
	color: var(--fdk-muted);
	margin: 0;
}

.fdk-card-meta {
	display: flex;
	gap: 0.5em;
	align-items: center;
	font-size: 0.82em;
	color: var(--fdk-muted);
	margin: 0;
}

.fdk-card .fdk-dl {
	margin-top: auto;
	align-self: flex-start;
}

/* Tile thumbnails: featured image, image files, or a PDF first-page preview.
   Small by default (safe inside a table cell); full-bleed inside a grid card. */
.fdk-tile-thumb {
	display: block;
	width: 48px;
	height: 48px;
	object-fit: cover;
	object-position: top center;
	border-radius: 4px;
	border: 1px solid var(--fdk-border);
	background: var(--fdk-surface);
}

/* Featured-image lightbox link wrapping a tile thumb */
.fdk-img-zoom {
	display: inline-block;
	line-height: 0;
	cursor: zoom-in;
}

/* wrap="0": truncate every cell to a single line so each document is one row */
.fdk-nowrap .fdk-table td {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 32ch;
}

.fdk-card-image {
	margin: -1em -1em 0.25em;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 8px 8px 0 0;
	border-bottom: 1px solid var(--fdk-border);
	background: var(--fdk-surface-2);
}

.fdk-card-image .fdk-tile-thumb {
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: 0;
}

/* Gallery: the thumbnail is the object, not an accessory. Wider tracks than the
   grid, a taller image plate, and chrome trimmed back to title + one action. */
.fdk-gallery {
	display: grid;
	grid-template-columns: repeat(var(--fdk-grid-cols, auto-fill), minmax(260px, 1fr));
	gap: 1.25em;
}

.fdk-card--gallery {
	padding: 0 0 0.9em;
	overflow: hidden;
}

.fdk-card--gallery .fdk-card-image {
	margin: 0 0 0.7em;
	aspect-ratio: 3 / 4;
	border-radius: 8px 8px 0 0;
}

.fdk-card--gallery .fdk-card-title,
.fdk-card--gallery .fdk-card-excerpt,
.fdk-card--gallery .fdk-card-meta,
.fdk-card--gallery .fdk-card-actions {
	padding-inline: 0.9em;
}

.fdk-card--gallery .fdk-card-title {
	font-size: 1em;
	/* Two lines, then ellipsis — ragged tile heights are what make a gallery
	   look untidy, and the full title is still on the document page. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.fdk-card--gallery .fdk-card-excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Thumbnail-less documents still get a tile, so the gallery stays even. */
.fdk-card-image--plate {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(160deg, var(--fdk-surface-2), var(--fdk-surface-2));
}

.fdk-plate-glyph {
	font-size: 1.5em;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--fdk-muted);
	opacity: 0.75;
}

/* In-document hit: "Found on page 7" under a matching title. Quiet until
   hovered — it appears mid-search and shouldn't shout over the title. */
.fdk-hit {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	margin: 0.25em 0 0;
	padding: 0.1em 0.5em;
	border: 1px solid var(--fdk-border);
	border-radius: 999px;
	background: var(--fdk-surface);
	color: var(--fdk-muted);
	font: inherit;
	font-size: 0.78em;
	line-height: 1.6;
	cursor: pointer;
	transition: border-color 0.12s ease, color 0.12s ease;
}

.fdk-hit::before {
	content: "\21B5";
	font-size: 0.95em;
	opacity: 0.7;
}

.fdk-hit:hover,
.fdk-hit:focus-visible {
	border-color: var(--fdk-accent);
	color: var(--fdk-accent);
}

.fdk-table td[data-col="title"] .fdk-hit {
	display: flex;
	width: fit-content;
}

/* Third-party form gate: the site owner's form renders inside the dialog, so
   only give it room and keep our own chrome out of its way. */
.fdk-formgate-form {
	max-height: 60vh;
	overflow-y: auto;
}

.fdk-formgate-msg {
	margin-top: 0.6em;
	color: var(--fdk-danger);
	font-size: 0.9em;
}

/* Terms-agreement gate */
.fdk-terms-text {
	font-size: 0.95em;
	color: var(--fdk-ink);
	max-height: 40vh;
	overflow-y: auto;
	margin-bottom: 1em;
}

.fdk-terms-text p { margin: 0 0 0.75em; }

.fdk-terms-agree {
	display: flex;
	align-items: flex-start;
	gap: 0.5em;
	margin-bottom: 0.9em;
	font-size: 0.95em;
	cursor: pointer;
}

.fdk-terms-agree input { margin-top: 0.25em; flex: none; }

.fdk-terms-msg {
	margin-top: 0.6em;
	color: var(--fdk-danger);
	font-size: 0.9em;
}

/* Badges & buttons */
.fdk-badge {
	display: inline-block;
	padding: 0.15em 0.5em;
	border-radius: 4px;
	background: rgba(30, 64, 175, 0.08);
	background: color-mix(in srgb, var(--fdk-accent) 8%, transparent);
	color: var(--fdk-accent);
	font-size: 0.78em;
	font-weight: 600;
	letter-spacing: 0.02em;
}

/* Outlined at rest so 50 rows don't become a solid blue stripe; fills on
   hover so the primary action still asserts itself. */
.fdk-dl-button {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.4em 0.9em;
	background: var(--fdk-surface);
	color: var(--fdk-accent, #1e40af) !important;
	border: 1px solid rgba(30, 64, 175, 0.4);
	border: 1px solid color-mix(in srgb, var(--fdk-accent, #1e40af) 40%, var(--fdk-surface));
	border-radius: var(--fdk-radius-sm);
	text-decoration: none;
	font-size: 0.88em;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.fdk-dl-button:hover {
	background: var(--fdk-accent, #1e40af);
	border-color: var(--fdk-accent, #1e40af);
	color: var(--fdk-accent-contrast) !important;
}

/* The lead-capture modal's submit is the one genuinely primary CTA — solid. */
.fdk-lead-form .fdk-dl-button {
	justify-content: center;
	background: var(--fdk-accent, #1e40af);
	border-color: var(--fdk-accent, #1e40af);
	color: var(--fdk-accent-contrast) !important;
}

.fdk-lead-form .fdk-dl-button:hover {
	opacity: 0.9;
}

.fdk-dl-icon-only {
	font-size: 1.1em;
	text-decoration: none;
}

/* Icon-only button: square it off so a narrow download column stays narrow. */
.fdk-dl-button-icon-only {
	padding: 0.4em 0.6em;
	gap: 0;
}

/* Icon + text as a plain link, for designs where a button is too heavy. */
.fdk-dl-icon-text {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
}

/* Pagination */
.fdk-pagination {
	display: flex;
	gap: 0.35em;
	margin-top: 1em;
	flex-wrap: wrap;
}

.fdk-pagination:empty {
	display: none;
}

.fdk-page {
	padding: 0.35em 0.75em;
	border: 1px solid var(--fdk-border);
	border-radius: var(--fdk-radius-sm);
	background: var(--fdk-surface);
	cursor: pointer;
	font-size: 0.9em;
	font-family: inherit;
}

.fdk-page.is-active {
	background: var(--fdk-accent);
	border-color: var(--fdk-accent);
	color: var(--fdk-accent-contrast);
}

/* Previous/Next, and the ellipsis standing in for the pages the window drops.
   The gap is deliberately not a .fdk-page — the delegated click handler keys
   off that class, and a gap is not a destination. */
.fdk-page[disabled] {
	opacity: 0.45;
	cursor: default;
}

.fdk-page-gap {
	padding: 0.35em 0.35em;
	color: var(--fdk-muted);
	font-size: 0.9em;
	user-select: none;
}

.fdk-empty {
	color: var(--fdk-muted);
	font-style: italic;
	padding: 1em 0;
}

/* The optional empty-state CTA: quietly styled but unmistakably a link. */
.filedeck .fdk-empty-link {
	color: var(--fdk-accent, #1e40af);
	font-style: normal;
	text-decoration: underline;
}

/* Folders layout */
.fdk-folders {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
}

.fdk-folder {
	border: 1px solid var(--fdk-border);
	border-radius: var(--fdk-radius);
	overflow: hidden;
}

.fdk-folder summary {
	cursor: pointer;
	padding: 0.75em 1em;
	font-weight: 600;
	background: rgba(30, 64, 175, 0.04);
	background: color-mix(in srgb, var(--fdk-accent) 4%, transparent);
	list-style: none;
	display: flex;
	align-items: center;
	gap: 0.5em;
}

.fdk-folder summary::-webkit-details-marker {
	display: none;
}

.fdk-folder[open] summary {
	border-bottom: 1px solid var(--fdk-border);
}

.fdk-folder-count {
	margin-left: auto;
	background: rgba(30, 64, 175, 0.08);
	background: color-mix(in srgb, var(--fdk-accent) 8%, transparent);
	color: var(--fdk-accent);
	border-radius: 10px;
	padding: 0.1em 0.6em;
	font-size: 0.8em;
}

.fdk-folder-body {
	padding: 0 1em 1em;
}

/* Bulk bar */
.fdk-bulkbar[hidden] {
	display: none;
}

.fdk-bulkbar {
	display: flex;
	align-items: center;
	gap: 1em;
	padding: 0.6em 1em;
	margin-bottom: 0.75em;
	background: rgba(30, 64, 175, 0.06);
	background: color-mix(in srgb, var(--fdk-accent) 6%, transparent);
	border: 1px solid var(--fdk-border);
	border-radius: var(--fdk-radius-sm);
	font-size: 0.9em;
}

/* Modals (preview + lead capture) */
.fdk-modal {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 99999;
	padding: 1em;
}

.fdk-modal[hidden] {
	display: none;
}

.fdk-modal-box {
	background: var(--fdk-surface);
	border-radius: var(--fdk-radius);
	padding: 1.5em;
	max-width: 420px;
	width: 100%;
	position: relative;
	max-height: 90vh;
	overflow: auto;
}

.fdk-modal-wide {
	max-width: 900px;
}

.fdk-modal-close {
	position: absolute;
	top: 0.4em;
	right: 0.6em;
	background: none;
	border: none;
	font-size: 1.6em;
	line-height: 1;
	cursor: pointer;
	color: var(--fdk-muted);
}

.fdk-preview-body iframe {
	width: 100%;
	height: 70vh;
	border: none;
}

.fdk-preview-body img,
.fdk-preview-body video {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
}

.fdk-preview-body audio {
	width: 100%;
}

body.fdk-modal-open {
	overflow: hidden;
}

.fdk-preview-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	background: none;
	border: 1px solid var(--fdk-border);
	border-radius: var(--fdk-radius-sm);
	padding: 0.35em 0.7em;
	cursor: pointer;
	font-size: 0.85em;
	font-family: inherit;
	color: inherit;
	white-space: nowrap;
	transition: border-color 0.12s ease, color 0.12s ease;
}

.fdk-preview-btn:hover {
	border-color: var(--fdk-accent);
	color: var(--fdk-accent);
}

/* Lead form */
.fdk-lead-form {
	display: flex;
	flex-direction: column;
	gap: 0.75em;
}

.fdk-lead-form input {
	padding: 0.55em 0.75em;
	border: 1px solid var(--fdk-border);
	border-radius: 4px;
	font-size: 0.95em;
}

/* Unlock form */
.fdk-unlock-form {
	max-width: 380px;
	padding: 1.5em;
	border: 1px solid var(--fdk-border);
	border-radius: var(--fdk-radius);
	display: flex;
	flex-direction: column;
	gap: 0.75em;
}

.fdk-unlock-form input[type="password"] {
	padding: 0.55em 0.75em;
	border: 1px solid var(--fdk-border);
	border-radius: 4px;
}

/* Standalone search */
.fdk-standalone-search {
	display: flex;
	gap: 0.5em;
	max-width: 480px;
}

.fdk-standalone-search input {
	flex: 1;
	padding: 0.5em 0.75em;
	border: 1px solid var(--fdk-border);
	border-radius: 4px;
}

/* Misc */
.fdk-lock {
	opacity: 0.75;
}

.filedeck input[type="checkbox"] {
	accent-color: var(--fdk-accent);
}

.filedeck a:focus-visible,
.filedeck button:focus-visible,
.filedeck input:focus-visible,
.filedeck select:focus-visible,
.filedeck th.fdk-sortable:focus-visible {
	outline: 2px solid var(--fdk-accent);
	outline-offset: 1px;
}

.fdk-card-actions {
	display: flex;
	gap: 0.5em;
	align-items: center;
	margin-top: auto;
}

/* Responsive table: stacked cards on phones (no awkward horizontal scroll).
   Each row becomes a card; each cell shows its column name (from data-label)
   with the value on the right. Title + download button span full width. */
@media (max-width: 600px) {
	.filedeck {
		overflow-x: visible;
	}

	/* Rows become standalone cards on phones, so the outer card wrapper (and
	   its edge paddings/borders) comes off — a card of cards reads wrong. */
	.filedeck[data-layout="table"],
	.filedeck[data-layout="table"].fdk-fits {
		border: 0;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
		overflow: visible;
	}

	.filedeck[data-layout="table"] .fdk-controls {
		padding: 0;
		border-bottom: 0;
		margin-bottom: 1em;
	}

	.filedeck[data-layout="table"] .fdk-table td:first-child {
		padding-left: 0;
	}

	.filedeck[data-layout="table"] .fdk-table td:last-child {
		padding-right: 0;
	}

	.filedeck[data-layout="table"] .fdk-bulkbar {
		margin: 0 0 0.75em;
	}

	.filedeck[data-layout="table"] .fdk-empty {
		padding: 1em 0;
	}

	.filedeck[data-layout="table"] .fdk-pagination {
		padding: 0;
		border-top: 0;
		margin-top: 1em;
	}

	.fdk-table {
		min-width: 0;
		display: block;
		font-size: 1em;
	}

	/* Hide the HEADER ROW, not the whole <thead>. Clipping the thead also
	   clipped the heading-filter row inside it, so turning on
	   filter_position="headings" silently removed every filter on a phone —
	   the one thing that mount point promises never to do. */
	.fdk-table thead tr:not(.fdk-filter-row) {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	/* With the cards restacked there are no columns to sit under, so the
	   filters become an ordinary wrapped row above them — the same place the
	   default bar would have put them. */
	.fdk-table thead,
	.fdk-filter-row,
	.fdk-filter-row td {
		display: block;
	}

	.fdk-filter-row {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5em;
		margin-bottom: 1em;
	}

	.fdk-filter-row td {
		padding: 0;
		border: 0;
		background: none;
	}

	/* A column with no filter would otherwise leave a gap in the row. */
	.fdk-filter-row td:empty {
		display: none;
	}

	.fdk-table tbody,
	.fdk-table tr,
	.fdk-table td {
		display: block;
	}

	/* Keep paginated-away rows hidden: the display:block above would otherwise
	   override the [hidden] attribute the pager sets, showing every row on
	   phones (a long scroll) even though desktop paginates correctly. */
	.fdk-table tr[hidden] {
		display: none;
	}

	.fdk-table tr {
		border: 1px solid var(--fdk-border);
		border-radius: 10px;
		padding: 0.75em 0.9em;
		margin-bottom: 0.75em;
		background: var(--fdk-surface);
		box-shadow: var(--fdk-shadow);
	}

	.fdk-table tbody tr:hover {
		background: var(--fdk-surface);
	}

	.fdk-table td {
		border: none;
		padding: 0.3em 0;
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		gap: 1.5em;
		text-align: right;
	}

	/* Column name label on the left of each row. */
	.fdk-table td::before {
		content: attr(data-label);
		font-weight: 600;
		color: var(--fdk-muted, #64748b);
		text-align: left;
		flex: 0 0 auto;
	}

	/* Title leads the card: full width, prominent, no label. */
	.fdk-table td[data-col="title"] {
		display: block;
		text-align: left;
		font-size: 1.08em;
		font-weight: 650;
		padding-bottom: 0.4em;
		margin-bottom: 0.2em;
		border-bottom: 1px solid var(--fdk-border);
	}
	.fdk-table td[data-col="title"]::before {
		display: none;
	}

	/* Download + select + preview + image span full width, no label. */
	.fdk-table td[data-col="link"],
	.fdk-table td[data-col="preview"],
	.fdk-table td[data-col="select"],
	.fdk-table td[data-col="image"] {
		display: block;
		text-align: left;
	}
	.fdk-table td[data-col="link"]::before,
	.fdk-table td[data-col="preview"]::before,
	.fdk-table td[data-col="select"]::before,
	.fdk-table td[data-col="image"]::before {
		display: none;
	}

	.fdk-table td[data-col="link"] {
		margin-top: 0.5em;
	}

	/* Empty cells shouldn't render a lonely label. */
	.fdk-table td:empty {
		display: none;
	}
}

/* Fixed grid columns never overflow small screens: drop the author's explicit
   column count and let the tracks reflow. Gallery keeps a narrower floor than
   its desktop 260px so two tiles still fit side by side on a phone. */
@media (max-width: 700px) {
	.fdk-grid {
		grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	}

	.fdk-gallery {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		gap: 0.9em;
	}
}

/* Page-length dropdown */
.fdk-page-length {
	padding: 0.45em 0.6em;
	border: 1px solid var(--fdk-border);
	border-radius: var(--fdk-radius-sm);
	background: var(--fdk-surface);
}

/* Single document page */
.fdk-single-download {
	/* This block renders on the single-document page, outside any .filedeck
	   wrapper, so it defines the brand vars itself — without them the button
	   background is empty and its #fff label is invisible. */
	display: flex;
	align-items: center;
	gap: 1em;
	margin-top: 1.5em;
	padding: 1em;
	border: 1px solid var(--fdk-border);
	border-radius: var(--fdk-radius);
	background: rgba(30, 64, 175, 0.04);
	background: color-mix(in srgb, var(--fdk-accent) 4%, transparent);
}

.fdk-single-download .fdk-single-meta {
	display: flex;
	align-items: center;
	gap: 0.75em;
	margin: 0;
}

/* Frontend submission form */
.fdk-submit-form label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.25em;
}

.fdk-submit-form input[type="text"],
.fdk-submit-form textarea,
.fdk-submit-form select {
	width: 100%;
	max-width: 480px;
	padding: 0.5em 0.65em;
	border: 1px solid var(--fdk-border);
	border-radius: var(--fdk-radius-sm);
}

.fdk-submit-form .fdk-required {
	color: var(--fdk-danger);
}

.fdk-submit-success {
	padding: 0.75em 1em;
	border-left: 4px solid var(--fdk-success);
	background: color-mix(in srgb, var(--fdk-success) 12%, transparent);
}

.fdk-submit-error {
	padding: 0.75em 1em;
	border-left: 4px solid var(--fdk-danger);
	background: color-mix(in srgb, var(--fdk-danger) 12%, transparent);
}

/* Login form */
.fdk-login-form form {
	max-width: 360px;
}

.fdk-login-form input[type="text"],
.fdk-login-form input[type="password"] {
	width: 100%;
	padding: 0.5em 0.65em;
	border: 1px solid var(--fdk-border);
	border-radius: var(--fdk-radius-sm);
}

/* ---- R1: shareable views, hover cards, QR ---- */
/* Ancestor-scoped + explicit: theme `button` rules at (0,1,1) beat a single
   class, which inflated this into a fake primary CTA on a customer theme. A
   quiet secondary look, stated outright so themes can't dress it up. */
.filedeck .fdk-copy-link {
	cursor: pointer;
	border: 1px solid var(--fdk-border, #d1d5db);
	background: var(--fdk-surface);
	color: var(--fdk-ink, #0f172a);
	border-radius: var(--fdk-radius-sm);
	padding: 6px 12px;
	font: inherit;
	font-size: 0.85em;
	font-weight: 400;
	line-height: 1.2;
	min-height: 0;
	width: auto;
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
}
.filedeck .fdk-copy-link:hover { border-color: var(--fdk-accent, #1e40af); }
/* Only shown once a search/filter is active — stated at the same specificity
   as the block above, because a theme `button { display: inline-block }` rule
   outranks the UA [hidden] default and would put it back on every library. */
.filedeck .fdk-copy-link[hidden] { display: none; }

/* Admin-only banner when a library still shows the sample documents; kept
   deliberately conspicuous (same amber in dark scheme — it is a to-do, not
   décor), and absent from anonymous output entirely. */
.filedeck .fdk-sample-notice {
	margin: 0 0 1em;
	padding: 0.65em 0.9em;
	border: 1px solid #f59e0b;
	border-radius: var(--fdk-radius-sm);
	background: #fef3c7;
	color: #78350f;
	font-size: 0.9em;
}
.filedeck .fdk-sample-notice a {
	color: inherit;
	text-decoration: underline;
}

.fdk-hovercard {
	position: fixed;
	z-index: 99998;
	max-width: 280px;
	background: var(--fdk-surface);
	color: var(--fdk-ink, #0f172a);
	border: 1px solid var(--fdk-border, #e2e8f0);
	border-radius: 10px;
	box-shadow: var(--fdk-shadow-lg);
	padding: 10px;
	display: flex;
	gap: 10px;
	pointer-events: none;
}
.fdk-hovercard .fdk-hc-thumb {
	flex: 0 0 auto;
	width: 64px;
	height: 64px;
	overflow: hidden;
	border-radius: var(--fdk-radius-sm);
	background: var(--fdk-surface-2);
}
.fdk-hovercard .fdk-hc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fdk-hovercard .fdk-hc-title { font-weight: 600; line-height: 1.3; margin-bottom: 3px; }
.fdk-hovercard .fdk-hc-meta { color: var(--fdk-muted); font-size: 12px; }

/* Same trap as .fdk-card[hidden]: the display:flex above defeated the [hidden]
   attribute hideCard() sets, so the hover preview could never be dismissed —
   and because it is pointer-events:none it could not be clicked away either,
   leaving it stuck on screen until reload. */
.fdk-hovercard[hidden] {
	display: none;
}

.fdk-qr { display: inline-block; }
.fdk-qr .fdk-qr-img { line-height: 0; }
.fdk-qr .fdk-qr-dl { margin-top: 8px; }

/* --- Ask this library (R5) ------------------------------------------------ */
/* --- Ask this library: chat UI ------------------------------------------- */
.fdk-ask {
	/* Rendered standalone (outside any .filedeck wrapper), so it defines its
	   own brand vars; a theme can override --fdk-accent on .fdk-ask. */
	margin: 1.5em 0;
}
.fdk-ask-chat {
	display: flex; flex-direction: column;
	max-width: 640px; background: var(--fdk-surface);
	border: 1px solid var(--fdk-border); border-radius: var(--fdk-radius-lg);
	box-shadow: var(--fdk-shadow);
	overflow: hidden;
}
.fdk-ask-bar {
	display: flex; align-items: center; gap: 10px;
	padding: 10px 14px; border-bottom: 1px solid var(--fdk-border);
}
.fdk-ask-mark {
	flex: 0 0 auto; width: 28px; height: 28px;
	display: grid; place-items: center;
	border-radius: var(--fdk-radius);
	color: var(--fdk-accent);
	background: rgba(30, 64, 175, 0.08);
	background: color-mix(in srgb, var(--fdk-accent) 8%, transparent);
}
.fdk-ask-heading { display: block; font-weight: 600; line-height: 1.25; }
.fdk-ask-subline {
	display: block; font-size: 12px; line-height: 1.4;
	color: var(--fdk-muted); font-weight: 400;
}
.fdk-ask-thread {
	flex: 1 1 auto; min-height: 180px; max-height: 440px; overflow-y: auto;
	padding: 16px; display: flex; flex-direction: column; gap: 12px;
	scroll-behavior: smooth;
}
.fdk-ask-empty {
	margin: auto; width: 100%; text-align: center;
	color: var(--fdk-muted); font-size: 14px; line-height: 1.5;
}
.fdk-ask-empty p { max-width: 42ch; margin: 0 auto 14px; }
.fdk-ask-suggest { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.fdk-ask-chip {
	padding: 7px 14px; font: inherit; font-size: 13.5px; cursor: pointer;
	color: var(--fdk-accent); background: var(--fdk-surface);
	border: 1px solid var(--fdk-border); border-radius: 999px; line-height: 1.3;
	transition: border-color .12s ease, background .12s ease;
}
.fdk-ask-chip:hover { border-color: var(--fdk-accent); background: var(--fdk-surface-2); }
.fdk-ask-msg {
	max-width: 88%; padding: 10px 14px; border-radius: 14px;
	font-size: 15px; line-height: 1.55; overflow-wrap: anywhere;
	animation: fdk-ask-in 0.16s ease-out;
}
@keyframes fdk-ask-in {
	from { opacity: 0; transform: translateY(4px); }
	to { opacity: 1; transform: none; }
}
.fdk-ask-msg.is-user {
	align-self: flex-end; background: var(--fdk-accent); color: var(--fdk-accent-contrast);
	border-bottom-right-radius: 4px;
}
.fdk-ask-msg.is-bot {
	align-self: flex-start; background: var(--fdk-surface-2); color: var(--fdk-ink, #0f172a);
	border-bottom-left-radius: 4px;
}
/* An answer with no citations couldn't be grounded in the library — show it
   empty-handed (dashed outline) rather than dressed like a sourced answer. */
.fdk-ask-msg.is-unsourced {
	background: var(--fdk-surface);
	border: 1px dashed var(--fdk-border);
}
.fdk-ask-msg.is-error {
	background: var(--fdk-danger-bg);
	border: 1px solid var(--fdk-danger-border);
}
.fdk-ask-msg .fdk-ask-text p { margin: 0 0 .6em; }
.fdk-ask-msg .fdk-ask-text > :last-child { margin-bottom: 0; }
.fdk-ask-msg .fdk-ask-list { margin: 0 0 .6em; padding-left: 1.25em; }
.fdk-ask-msg .fdk-ask-list li { margin: .15em 0; }
.fdk-ask-msg .fdk-ask-text strong { font-weight: 600; }
.fdk-ask-error { color: var(--fdk-danger); margin: 0; }
.fdk-ask-sources {
	margin-top: 10px; padding-top: 8px;
	border-top: 1px solid rgba(15, 23, 42, 0.08);
}
.fdk-ask-sources-label {
	display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
	color: var(--fdk-muted); margin-bottom: 6px;
}
.fdk-ask-source-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fdk-ask-src {
	display: inline-block; max-width: 220px; padding: 3px 10px;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	font-size: 13px; line-height: 1.4;
	background: var(--fdk-surface); border: 1px solid var(--fdk-border); border-radius: 999px;
	color: var(--fdk-accent); text-decoration: none;
}
/* Document glyph via mask so it inherits the chip's link color. */
.fdk-ask-src::before {
	content: "";
	display: inline-block;
	width: 12px; height: 12px;
	margin-right: 5px;
	vertical-align: -1px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2.5h7l5 5V21.5H6z'/%3E%3Cpath d='M13 2.5V8h5'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2.5h7l5 5V21.5H6z'/%3E%3Cpath d='M13 2.5V8h5'/%3E%3C/svg%3E") no-repeat center / contain;
}
.fdk-ask-src:hover { border-color: var(--fdk-accent); }
.fdk-ask-typing { display: inline-flex; gap: 4px; padding: 4px 2px; }
.fdk-ask-typing span {
	width: 7px; height: 7px; border-radius: 50%; background: var(--fdk-muted);
	opacity: .5; animation: fdk-ask-bounce 1.2s infinite ease-in-out;
}
.fdk-ask-typing span:nth-child(2) { animation-delay: .2s; }
.fdk-ask-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes fdk-ask-bounce { 0%,80%,100% { transform: translateY(0); opacity: .4; } 40% { transform: translateY(-4px); opacity: .9; } }
.fdk-ask-composer {
	display: flex; align-items: flex-end; gap: 8px;
	padding: 10px; border-top: 1px solid var(--fdk-border); background: var(--fdk-surface);
}
.fdk-ask-input {
	flex: 1 1 auto; resize: none; max-height: 140px; overflow-y: auto;
	padding: 10px 12px; font: inherit; font-size: 15px; line-height: 1.4;
	border: 1px solid var(--fdk-border); border-radius: 10px; background: var(--fdk-surface);
}
.fdk-ask-input:focus { outline: 2px solid var(--fdk-accent); outline-offset: 1px; }
.fdk-ask-send {
	flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center;
	color: var(--fdk-accent-contrast); background: var(--fdk-accent); border: 0; border-radius: 50%;
	cursor: pointer; transition: opacity .15s ease;
}
.fdk-ask-send:hover { opacity: .9; }
.fdk-ask-send:disabled { opacity: .5; cursor: default; }
.fdk-ask-disclaimer {
	margin: 0; padding: 12px 16px 14px; font-size: 12px; line-height: 1.5;
	color: var(--fdk-muted); border-top: 1px solid var(--fdk-border);
}
.fdk-ask-disabled { padding: 12px; border: 1px dashed var(--fdk-border); border-radius: var(--fdk-radius); color: var(--fdk-muted); }
/* The Ask widget renders standalone (outside .filedeck), so it needs its own
   focus-visible treatment — the library-scoped rule doesn't reach it. */
.fdk-ask a:focus-visible,
.fdk-ask button:focus-visible,
.fdk-ask textarea:focus-visible {
	outline: 2px solid var(--fdk-accent);
	outline-offset: 1px;
}
@media (prefers-reduced-motion: reduce) {
	.fdk-ask-typing span { animation: none; }
	.fdk-ask-msg { animation: none; }
	.fdk-ask-thread { scroll-behavior: auto; }
}

/* --- Related documents (R5) ----------------------------------------------- */
.fdk-related { margin: 1.5em 0; padding-top: 1em; border-top: 1px solid var(--fdk-border); }
.fdk-related-title { margin: 0 0 .5em; font-size: 1.1em; }
.fdk-related-list { margin: 0; padding-left: 1.3em; }
.fdk-related-list li { margin: 3px 0; }

/* --- Change subscriptions (R6) -------------------------------------------- */
.fdk-subscribe { margin: 1.5em 0; }
.fdk-subscribe-heading { margin: 0 0 .5em; font-size: 1.15em; }
.fdk-subscribe-row { display: flex; flex-wrap: wrap; gap: 8px; }
.fdk-subscribe-email { flex: 1 1 12em; padding: 10px 12px; font-size: 15px; border: 1px solid var(--fdk-border); border-radius: var(--fdk-radius); }
.fdk-subscribe-scope { padding: 10px 12px; font-size: 15px; border: 1px solid var(--fdk-border); border-radius: var(--fdk-radius); }
.fdk-subscribe-email:focus, .fdk-subscribe-scope:focus { outline: 2px solid var(--fdk-accent); outline-offset: 1px; }
.fdk-subscribe-submit { padding: 10px 18px; font-size: 15px; cursor: pointer; color: var(--fdk-accent-contrast); background: var(--fdk-accent); border: 1px solid var(--fdk-accent); border-radius: var(--fdk-radius); }
.fdk-subscribe-submit:disabled { opacity: .6; cursor: default; }
.fdk-subscribe-msg { margin-top: 8px; font-size: 14px; color: var(--fdk-muted); }
.fdk-subscribe-msg:empty { margin-top: 0; }

/* --- Client areas ([filedeck_my_documents]) -------------------------------- */
.fdk-clients-area { margin: 0 0 2.5em; }
.fdk-clients-title { margin: 0 0 .25em; font-size: 1.35em; color: var(--fdk-ink); }
.fdk-clients-desc { margin: 0 0 1em; color: var(--fdk-muted); }
.fdk-clients-empty { color: var(--fdk-muted); }
.fdk-clients-upload { margin-top: 1em; }
.fdk-clients-upload > summary { cursor: pointer; font-weight: 600; color: var(--fdk-accent); }
.fdk-clients-upload[open] > summary { margin-bottom: .75em; }

/* --- Inline document embed ([filedeck_embed] / filedeck/embed / Elementor) -- */
.fdk-embed { margin: 0 0 1.5em; padding: 0; border: 0; }
.fdk-embed-frame {
	position: relative;
	width: 100%;
	overflow: hidden;
	border: 1px solid var(--fdk-border);
	border-radius: var(--fdk-radius-sm);
	background: var(--fdk-surface-2);
}
.fdk-embed-media {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}
.fdk-embed-image .fdk-embed-frame { display: flex; align-items: center; justify-content: center; }
.fdk-embed-image .fdk-embed-media { width: auto; max-width: 100%; height: 100%; object-fit: contain; }
.fdk-embed-audio .fdk-embed-frame { height: auto !important; padding: .75em; background: transparent; }
.fdk-embed-audio .fdk-embed-media { height: auto; }
.fdk-embed-video .fdk-embed-media { object-fit: contain; background: #000; }
.fdk-embed-caption { margin: .5em 0 0; font-size: .9em; color: var(--fdk-muted); text-align: center; }
.fdk-embed-locked,
.fdk-embed-fallback { padding: 1em; border: 1px dashed var(--fdk-border); border-radius: var(--fdk-radius-sm); }
.fdk-embed-locked .fdk-lock { color: var(--fdk-muted); }
.fdk-embed { max-width: 100%; }
.fdk-embed-fs {
	position: absolute;
	top: .5em;
	right: .5em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2em;
	height: 2em;
	padding: 0;
	border: 1px solid var(--fdk-border);
	border-radius: var(--fdk-radius-sm);
	background: var(--fdk-surface, #fff);
	color: var(--fdk-muted);
	cursor: pointer;
	opacity: .75;
	transition: opacity .15s ease;
}
.fdk-embed-fs:hover,
.fdk-embed-fs:focus-visible { opacity: 1; color: var(--fdk-accent); }
.fdk-embed-frame:fullscreen { border: 0; border-radius: 0; background: var(--fdk-surface, #fff); }
.fdk-embed-frame:fullscreen .fdk-embed-media { height: 100%; }
.fdk-embed-bar { margin-top: .5em; text-align: right; }

/* Popup embed (mode="popup", Pro): trigger button + <dialog>. */
.fdk-embed-popup { display: inline-block; }
.fdk-embed-dialog {
	width: min(960px, 92vw);
	max-height: 92vh;
	padding: 2.25em .75em .75em;
	border: 1px solid var(--fdk-border);
	border-radius: var(--fdk-radius-sm);
	background: var(--fdk-surface, #fff);
}
.fdk-embed-dialog::backdrop { background: rgba(15, 23, 42, .55); }
.fdk-embed-dialog .fdk-embed-frame { height: min(70vh, 100%); }
.fdk-embed-dialog-close {
	position: absolute;
	top: .4em;
	right: .5em;
	width: 1.8em;
	height: 1.8em;
	padding: 0;
	border: 0;
	border-radius: var(--fdk-radius-sm);
	background: transparent;
	color: var(--fdk-muted);
	font-size: 1em;
	line-height: 1;
	cursor: pointer;
}
.fdk-embed-dialog-close:hover { color: var(--fdk-accent); }

/* Self-hosted PDF viewer (engine="pdfjs", Pro). */
.fdk-pdfjs { display: flex; flex-direction: column; height: 100%; }
.fdk-pdfjs-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .35em;
	padding: .4em .5em;
	border-bottom: 1px solid var(--fdk-border);
	background: var(--fdk-surface, #fff);
	font-size: .85em;
}
.fdk-pdfjs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.9em;
	height: 1.9em;
	padding: 0;
	border: 1px solid var(--fdk-border);
	border-radius: var(--fdk-radius-sm);
	background: var(--fdk-surface, #fff);
	color: var(--fdk-muted);
	cursor: pointer;
}
.fdk-pdfjs-btn:hover,
.fdk-pdfjs-btn:focus-visible { color: var(--fdk-accent); }
.fdk-pdfjs-pages { min-width: 3.5em; text-align: center; color: var(--fdk-muted); }
.fdk-pdfjs-zoom { display: inline-flex; align-items: center; gap: .35em; margin-left: .5em; }
.fdk-pdfjs-zoomlabel { min-width: 3em; text-align: center; color: var(--fdk-muted); }
.fdk-pdfjs-find { display: inline-flex; align-items: center; gap: .35em; margin-left: auto; }
.fdk-pdfjs-findinput { max-width: 11em; padding: .25em .5em; border: 1px solid var(--fdk-border); border-radius: var(--fdk-radius-sm); font-size: 1em; }
.fdk-pdfjs-findcount { color: var(--fdk-muted); white-space: nowrap; }
.fdk-pdfjs-pageswrap { flex: 1; overflow: auto; padding: .75em 0; }
.fdk-pdfjs .fdk-pdf-page { position: relative; margin: 0 auto .75em; box-shadow: 0 1px 4px rgba(15, 23, 42, .18); }
.fdk-pdfjs .fdk-pdf-page canvas { display: block; }
.fdk-pdfjs .textLayer .fdk-find-hit { background: rgba(250, 204, 21, .45); border-radius: 2px; }
.fdk-pdf-loading { padding: 1em; color: var(--fdk-muted); text-align: center; }

/* Print isolation: the viewer's Print button flags the page, and only the
   embed prints. visibility (not display) — a hidden ancestor's descendants
   can be made visible again, which display:none does not allow. */
@media print {
	.fdk-printing body * { visibility: hidden !important; }
	.fdk-printing .fdk-print-target,
	.fdk-printing .fdk-print-target * { visibility: visible !important; }
	.fdk-printing .fdk-print-target { position: absolute; top: 0; left: 0; width: 100%; }
	.fdk-printing .fdk-print-target .fdk-pdfjs-bar,
	.fdk-printing .fdk-print-target .fdk-embed-fs,
	.fdk-printing .fdk-print-target .fdk-embed-bar { display: none !important; }
	.fdk-printing .fdk-print-target .fdk-embed-frame { height: auto !important; border: 0; overflow: visible; }
	.fdk-printing .fdk-print-target .fdk-pdfjs-pageswrap { overflow: visible; }
}

/* ------------------------------------------------------------------ dark ---
   Opt-in dark surface. The Display setting adds data-scheme to the container
   (="dark" always, or ="auto" to follow the device). Accent stays your brand
   colour; only the surfaces, text and hairlines flip. */
.filedeck[data-scheme="dark"],
.fdk-single-download[data-scheme="dark"],
.fdk-ask[data-scheme="dark"],
.fdk-submit-form[data-scheme="dark"],
.fdk-login-form[data-scheme="dark"],
.fdk-unlock-form[data-scheme="dark"],
.fdk-standalone-search[data-scheme="dark"],
.fdk-subscribe[data-scheme="dark"] {
	--fdk-ink: #e5e9f0;
	--fdk-muted: #94a3b8;
	--fdk-surface: #0f172a;
	--fdk-surface-2: #1e293b;
	--fdk-border: #334155;
	--fdk-danger: #f87171;
	--fdk-danger-bg: #2a1416;
	--fdk-danger-border: #7f1d1d;
	--fdk-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
	--fdk-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
	color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
	.filedeck[data-scheme="auto"],
	.fdk-single-download[data-scheme="auto"],
	.fdk-ask[data-scheme="auto"],
	.fdk-submit-form[data-scheme="auto"],
	.fdk-login-form[data-scheme="auto"],
	.fdk-unlock-form[data-scheme="auto"],
	.fdk-standalone-search[data-scheme="auto"],
	.fdk-subscribe[data-scheme="auto"] {
		--fdk-ink: #e5e9f0;
		--fdk-muted: #94a3b8;
		--fdk-surface: #0f172a;
		--fdk-surface-2: #1e293b;
		--fdk-border: #334155;
		--fdk-danger: #f87171;
		--fdk-danger-bg: #2a1416;
		--fdk-danger-border: #7f1d1d;
		--fdk-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
		--fdk-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
		color-scheme: dark;
	}
}

/* ------------------------------------------------------------- presets ----
   Named token-sets the Display setting (or the block/shortcode) applies via
   data-preset. Each only re-points variables — no structural CSS — so they
   compose with the accent/surface/text colours and the dark scheme. */

/* Match my theme — inherit the active theme's global style tokens (works on
   block themes; falls back to the FileDeck defaults on classic themes). This
   is the opt-in that makes a library look native to any theme, light or dark. */
.filedeck[data-preset="match-theme"],
.fdk-single-download[data-preset="match-theme"],
.fdk-ask[data-preset="match-theme"],
.fdk-submit-form[data-preset="match-theme"],
.fdk-login-form[data-preset="match-theme"],
.fdk-unlock-form[data-preset="match-theme"],
.fdk-standalone-search[data-preset="match-theme"],
.fdk-subscribe[data-preset="match-theme"] {
	--fdk-accent: var(--wp--preset--color--primary, var(--wp--preset--color--accent, #1e40af));
	--fdk-ink: var(--wp--preset--color--contrast, var(--wp--preset--color--foreground, #0f172a));
	--fdk-surface: var(--wp--preset--color--base, var(--wp--preset--color--background, #fff));
	--fdk-surface-2: color-mix(in srgb, var(--fdk-ink) 5%, var(--fdk-surface));
	--fdk-border: color-mix(in srgb, var(--fdk-ink) 15%, var(--fdk-surface));
	--fdk-muted: color-mix(in srgb, var(--fdk-ink) 60%, var(--fdk-surface));
	--fdk-radius: var(--wp--custom--radius, 8px);
	color-scheme: light dark;
}

/* Minimal — drop the card chrome; rows on the bare page. */
.filedeck[data-preset="minimal"] {
	--fdk-shadow: none;
	--fdk-shadow-lg: none;
}
.filedeck[data-preset="minimal"][data-layout="table"] {
	border: 0;
	background: transparent;
}
.filedeck[data-preset="minimal"][data-layout="table"] .fdk-controls,
.filedeck[data-preset="minimal"][data-layout="table"] .fdk-pagination {
	padding-left: 0;
	padding-right: 0;
}

/* Bordered — stronger hairlines and a defined header band. */
.filedeck[data-preset="bordered"] {
	--fdk-border: color-mix(in srgb, var(--fdk-ink) 22%, var(--fdk-surface));
	--fdk-surface-2: color-mix(in srgb, var(--fdk-ink) 7%, var(--fdk-surface));
}

/* Compact — tighter rows and radii for dense libraries. */
.filedeck[data-preset="compact"] {
	--fdk-row-y: 0.35em;
	--fdk-row-x: 0.55em;
	--fdk-radius: 6px;
	--fdk-radius-lg: 8px;
	font-size: 0.95em;
}

/* Popular/recent documents block (filedeck/popular) — the widget list on a page. */
.fdk-popular-block .fdk-widget-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.fdk-popular-block .fdk-widget-item {
	padding: 0.45em 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.fdk-popular-block .fdk-widget-item:last-child {
	border-bottom: 0;
}
.fdk-popular-block .fdk-widget-count {
	opacity: 0.6;
	font-size: 0.9em;
	margin-left: 0.35em;
}