/* 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 OWN palette.

   Block themes publish theirs as --wp--preset--color--*; the big classic and
   builder families publish equivalents under their own namespaces. A var()
   fallback chain picks up whichever happens to be defined, so this needs no
   detection code in PHP and no per-family option plumbing — and because it
   reads the RESOLVED value, it survives whatever the site has customised.

   The chains below were measured, not recalled: 45 popular themes (8.1M active
   installs) probed via their wp-themes.com previews on 27 Aug 2026. Ordering is
   role-named namespaces first, then index-named ones. Index palettes carry no
   meaning in the name, so each index→role mapping came off that probe — note
   Astra counts from 0 where Kadence, Blocksy and Sydney count from 1.
   GeneratePress's bare --accent/--base-3/--contrast go LAST in each chain
   precisely because they are unnamespaced: anything on the page could define
   them, so they are a final resort rather than a preference.

   IMPORTANT: a chain cannot judge what it finds. var() has no conditional
   logic, and themes routinely name a decorative pastel "accent" — Twenty
   Twenty-Four's is #cfcabe and Twenty Twenty-Three's a neon lime, which land at
   1.55:1 and 1.25:1 against their own page background. Adopted as a button fill
   those are unreadable. filedeck.js therefore contrast-checks whatever this
   resolves to and swaps in the theme's own text colour when it fails. The chain
   and that guard are ONE mechanism: extending this list without it would spread
   the defect rather than fix it. */
.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,
		var(--wp--preset--color--accent-1,
		var(--e-global-color-primary,
		var(--owp-primary-color,
		var(--nv-primary-accent,
		var(--vk-color-primary,
		var(--ast-global-color-0,
		var(--global-palette1,
		var(--theme-palette-color-1,
		var(--sydney-global-color-1,
		var(--accent, #1e40af))))))))))));
	/* Second brand colour, used ONLY as the guard's next try when the first
	   accent is unreadable (filedeck.js). Both Kadence sites we measured put a
	   pale colour in palette1, and jumping straight to the text colour rendered a
	   black-and-white library — technically legible, but it reads as "nothing
	   happened". Every entry below is the family's own second/secondary slot,
	   taken from the same 27 Aug 2026 probe as the chain above. */
	--fdk-accent-2:
		var(--wp--preset--color--secondary,
		var(--wp--preset--color--accent-2,
		var(--e-global-color-secondary,
		var(--owp-primary-color-hover,
		var(--nv-secondary-accent,
		var(--vk-color-primary-dark,
		var(--ast-global-color-1,
		var(--global-palette2,
		var(--theme-palette-color-2,
		var(--sydney-global-color-2, transparent))))))))));
	--fdk-ink:
		var(--wp--preset--color--contrast,
		var(--wp--preset--color--foreground,
		var(--e-global-color-text,
		var(--owp-link-color,
		var(--nv-text-color,
		var(--vk-color-text-body,
		var(--ast-global-color-2,
		var(--global-palette3,
		var(--theme-palette-color-3,
		var(--sydney-global-color-4,
		var(--contrast, #0f172a)))))))))));
	--fdk-surface:
		var(--wp--preset--color--base,
		var(--wp--preset--color--background,
		var(--nv-site-bg,
		var(--ast-global-color-5,
		var(--global-palette9,
		var(--theme-palette-color-8,
		var(--sydney-global-color-9,
		var(--base-3, #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;
}

/* New / already-downloaded markers (Pro). Deliberately quiet: a library is a
   working list, not a notification centre. The "New" badge is a real element,
   so it is announced as well as seen. */
.fdk-badge-new {
	display: inline-block;
	margin-inline-start: .5em;
	padding: .05em .45em;
	border-radius: 999px;
	background: var(--fdk-accent, #1e40af);
	color: #fff;
	font-size: .72em;
	font-weight: 600;
	line-height: 1.6;
	vertical-align: baseline;
}

tr.fdk-downloaded td[data-col="title"] a {
	opacity: .72;
}

/* Nested folders. The indent is on the BODY, not the <details>, so a folder's
   own summary stays aligned with its siblings and only its contents step in —
   which is what makes the hierarchy readable at a glance. */
.fdk-folder .fdk-folder-body .fdk-folder {
	margin-inline-start: 1.1em;
	border-inline-start: 1px solid var(--fdk-border, #e2e8f0);
	padding-inline-start: .6em;
}

.fdk-folder-depth-1 > summary,
.fdk-folder-depth-2 > summary,
.fdk-folder-depth-3 > summary,
.fdk-folder-depth-4 > summary,
.fdk-folder-depth-5 > summary {
	font-size: .96em;
}