/*!
 * Theme Engine module integrations.
 *
 * Loaded after module stylesheets (outside the theme's cascade layers) so
 * that modules pick up the theme's design tokens, including in dark mode.
 * Each section is inert when its module is not installed.
 */

/* --------------------------------------------------------------------------
   Shared token contract for modules: modules may read these names with
   their own fallbacks, e.g. var(--theme-primary, #3a6fa8).

   It is declared again on every section that re-colors its content: a
   custom property resolves var() where it is declared, so declaring it on
   :root alone would keep page colors inside a dark section.
   -------------------------------------------------------------------------- */
:root,
.section-primary, .section-secondary, .section-accent, .section-dark,
.v-has-bg-color, .v-has-bg-image {
    --theme-primary: var(--v-primary);
    --theme-on-primary: var(--v-on-primary);
    --theme-accent: var(--v-accent);
    --theme-on-accent: var(--v-on-accent);
    --theme-surface: var(--v-surface);
    --theme-surface-alt: var(--v-surface-alt);
    --theme-text: var(--v-text);
    --theme-text-muted: var(--v-text-muted);
    --theme-primary-text: var(--v-primary-text);
    --theme-heading: var(--v-heading);
    --theme-dark: var(--v-dark);
    --theme-on-dark: var(--v-on-dark);
    --theme-link: var(--v-link);
    --theme-border: var(--v-border);
    --theme-border-strong: var(--v-border-strong);
    --theme-focus: var(--v-focus);
    --theme-radius: var(--v-radius);
    --theme-radius-button: var(--v-radius-button);
    --theme-font-body: var(--v-font-body);
    --theme-font-heading: var(--v-font-heading);
    --theme-sticky-offset: var(--v-sticky-offset);
}

/* In re-colored sections, module surfaces turn transparent, so text
   re-derived for the section sits on the section's own color, and primary
   buttons invert like the theme's own section buttons. */
:is(.section-primary, .section-secondary, .section-accent, .section-dark) {
    --theme-surface: transparent;
    --theme-surface-alt: transparent;
    --theme-primary: var(--v-sec-fg);
    --theme-on-primary: var(--v-sec-bg);
    --theme-border-strong: var(--v-sec-fg);
}
.v-has-bg-color {
    --theme-surface: transparent;
    --theme-surface-alt: transparent;
}
.v-has-bg-image {
    --theme-surface: transparent;
    --theme-surface-alt: transparent;
    --theme-primary: #fff;
    --theme-on-primary: #111;
    --theme-border-strong: #fff;
}

:root {
    /* Chatbot reads --color-primary for its buttons and accents. */
    --color-primary: var(--v-primary);

    /* Blog declares its own variables on :root; these come later and win. */
    --blog-accent: var(--v-primary-text);
    --blog-bg: var(--v-surface);
    --blog-muted: var(--v-text-muted);
    --blog-border: var(--v-border);
    --blog-radius: var(--v-radius);
}

/* --------------------------------------------------------------------------
   Omeka core
   -------------------------------------------------------------------------- */
#user-bar { font-size: 0.875rem; }
/* Advanced search (core advanced-search.css is unlayered, so these live
   here): the add and remove buttons are quiet square icon buttons, so
   Search stays the form's one filled button; the 3:1 border marks them
   as controls (WCAG 1.4.11). Their icons come from engine.css. */
#advanced-search button:is(.add-value, .remove-value) {
    min-width: var(--v-touch);
    min-height: var(--v-touch);
    padding: 0.35em;
    background: transparent;
    border: 1px solid var(--v-border-strong);
    color: var(--v-text);
}
#advanced-search button:is(.add-value, .remove-value):hover {
    background: var(--v-surface-alt);
    border-color: var(--v-text);
    color: var(--v-text);
}
.search-filters .filter { border-radius: var(--v-radius-sm); }
.o-icon-private { color: var(--v-text-muted); }
/* Linked resources (core block: an empty container that core's
   linked-resources.js fills with #linked-resources from index/linked-resources) */
#linked-resources { display: grid; gap: var(--v-space-s); }
#linked-resources .linked-header,
#linked-resources .linked-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--v-space-2xs) var(--v-space-m); }
#linked-filter label { display: flex; flex-wrap: wrap; align-items: center; gap: var(--v-space-2xs); }
#linked-resources table { margin: 0; }
#linked-resources caption { font-family: var(--v-font-heading); font-size: var(--v-step-1); font-weight: var(--v-heading-weight, 700); color: var(--v-heading); padding-block: 0 var(--v-space-2xs); }
#linked-resources th, #linked-resources td { border-color: var(--v-border); vertical-align: middle; }
#linked-resources .linked-resource a { display: inline-flex; align-items: center; gap: var(--v-space-xs); }
#linked-resources .linked-resource img { inline-size: 3rem; block-size: 3rem; object-fit: cover; border-radius: var(--v-radius-sm); flex: none; }
.media-render audio { width: 100%; }

/* --------------------------------------------------------------------------
   Blog (RefBytes)
   -------------------------------------------------------------------------- */
/* Lists use the theme's own templates; these rules cover single posts and
   the Blog Posts block. */
.blog-post, .blog-posts-block { color: var(--v-text); }
.blog-post.container {
    max-width: calc(var(--v-container) + 2 * var(--v-gutter));
    margin-inline: auto;
    padding: var(--v-space-s) var(--v-gutter) 0;
}
.blog-post a { color: var(--v-link); }
.blog-post__header h1 { font-family: var(--v-font-heading); font-size: var(--v-step-5); margin-block: var(--v-space-s) var(--v-space-2xs); color: var(--v-heading); }
.blog-post__meta { color: var(--v-text-muted); }
.blog-post__content { max-width: var(--v-measure); }
.blog-post__content > * + * { margin-block-start: 1em; }
.blog-post__content h2 { font-size: var(--v-step-3); margin-block-start: 1.5em; }
.blog-post__content h3 { font-size: var(--v-step-2); margin-block-start: 1.25em; }
.blog-post__content pre { background: var(--v-surface-sunken); border-radius: var(--v-radius); }
.blog-post__content pre code, .blog-post__content pre code.hljs { background: transparent; padding: 0; }
a.post-category, .blog-post a.post-category {
    display: inline-flex;
    align-items: center;
    padding: 0.1em 0.65em;
    border-radius: 999px;
    background: var(--v-primary-subtle);
    color: var(--v-on-primary-subtle);
    font-weight: 600;
    text-decoration: none;
}
.post-tag { border-color: var(--v-border-strong); color: var(--v-text); }
.author-box { background: var(--v-surface-alt); border-color: var(--v-border); border-radius: var(--v-radius); color: var(--v-text); }
.comment__body, .comment-form { border-color: var(--v-border); }
.blog-posts-block__heading { font-family: var(--v-font-heading); color: var(--v-heading); }
/* Replace hard-coded light-scheme colors so posts work in dark mode too. */
.blog-post__content, .post-summary__excerpt { color: var(--v-text); }
.blog-post__content :not(pre) > code { background: var(--v-surface-sunken); color: var(--v-text); }
.blog-post__content .hljs { background: transparent; color: var(--v-text); }
.blog-post__content .hljs :is([class^="hljs-"], [class*=" hljs-"]) { color: var(--v-primary-text); }
.blog-post__content .hljs :is(.hljs-string, .hljs-regexp, .hljs-number) { color: var(--v-accent-text); }
.blog-post__content .hljs :is(.hljs-comment, .hljs-quote, .hljs-meta) { color: var(--v-text-muted); }
.comment-form button, .post-summary__readmore a { background: var(--v-primary); color: var(--v-on-primary); }
.comment-form button:hover, .post-summary__readmore a:hover { background: var(--v-primary-hover); color: var(--v-on-primary-hover); }
.tag, .post-tag:hover { background: var(--v-surface-alt); border-color: var(--v-border); color: var(--v-text); }
/* The module's preview banner is white on amber (about 2:1); use the theme's notice colors. */
.blog-preview-banner { background: var(--v-notice-warning-bg) !important; color: var(--v-notice-warning) !important; border: 1px solid currentColor; }

/* --------------------------------------------------------------------------
   Oral Archivist (RefBytes): the player declares its variables on its own
   root class, so match it with doubled-class specificity.
   -------------------------------------------------------------------------- */
.oral-archivist-player.oral-archivist-player,
.oa-segments-page.oa-segments-page {
    --oa-accent: var(--v-primary-text);
    --oa-muted: var(--v-text-muted);
    --oa-border: var(--v-border);
    --oa-surface: var(--v-surface-sunken);
    --oa-highlight-bg: var(--v-mark);
    --oa-bar-bg: var(--v-secondary);
    --oa-bar-fg: var(--v-on-secondary);
    --oa-play-bg: var(--v-on-secondary);
    --oa-play-fg: var(--v-secondary);
    --oa-wave-played: var(--v-on-secondary);
    --oa-wave-rest: color-mix(in srgb, var(--v-on-secondary) 35%, transparent);
    --oa-radius: var(--v-radius);
    --oa-doc-sticky-bg: var(--v-bg);
    color: var(--v-text);
}
.oral-archivist-player .oa-sidebar { top: calc(var(--v-sticky-offset) + 1rem); }
.oral-archivist-player .oa-doc-playerwrap { top: var(--v-sticky-offset); }
.oral-archivist-player .oa-fn-pop { background: var(--v-surface); color: var(--v-text); border-color: var(--v-border); }
/* The player takes over audio and video that have a transcript and hides
   the page's own copy (its .media-render gets aria-hidden). Drop the
   frame left around it (item gallery, media page render block), and the
   top region too when that media was all it showed. */
.v-gallery__feature:has(.media-render[aria-hidden="true"]),
.v-rblock--vitrineMediaGallery:has(.v-gallery__feature .media-render[aria-hidden="true"]):not(:has(.v-gallery__grid)),
.v-rblock--mediaRender:has(> .media-render[aria-hidden="true"]),
.v-resource__top:has(> .v-rblock--vitrineMediaGallery:only-child .v-gallery__feature .media-render[aria-hidden="true"]):not(:has(.v-gallery__grid)),
.v-resource__top:has(> .v-rblock--mediaRender:only-child > .media-render[aria-hidden="true"]) {
    display: none;
}

/* --------------------------------------------------------------------------
   Chatbot (RefBytes)
   -------------------------------------------------------------------------- */
.chatbot-fab { background: var(--v-primary); color: var(--v-on-primary); border-color: var(--v-primary); }
.chatbot-fab:hover, .chatbot-fab[aria-expanded="true"] { background: var(--v-primary-hover); color: var(--v-on-primary-hover); border-color: var(--v-primary-hover); }
.chatbot-send-btn { color: var(--v-on-primary); }
/* The panel's header sits on the primary color too (Chatbot sets white text,
   unreadable on light primaries). */
.chatbot-header, .chatbot-close-btn { color: var(--v-on-primary); }
.chatbot-send-btn:hover { background: var(--v-primary-hover); color: var(--v-on-primary-hover); }
/* Keep the floating button from covering footer links at the end of the page. */
body:has(.chatbot-fab) .v-footer { padding-block-end: 5rem; }
.chatbot-panel, .chatbot-inline {
    background: var(--v-surface);
    color: var(--v-text);
    border-color: var(--v-border);
    font-family: var(--v-font-body);
}
.chatbot-input { background: var(--v-surface); color: var(--v-text); border-color: var(--v-border-strong); }
.chatbot-message.bot { background: var(--v-surface-alt); color: var(--v-text); }
.chatbot-message.user { background: var(--v-primary); color: var(--v-on-primary); }
.semantic-search-input { border-color: var(--v-border-strong); background: var(--v-surface); color: var(--v-text); }
.semantic-search-btn { background: var(--v-primary); color: var(--v-on-primary); }
.semantic-search-result { border-color: var(--v-border); }
.semantic-search-highlight { background: var(--v-mark); color: var(--v-on-mark); }

/* --------------------------------------------------------------------------
   BlockSuite (RefBytes): 1.2+ reads the --theme-* contract above, so its
   blocks need no overrides here. Section backgrounds set by block classes
   (section-tinted, section-dark...) remap the contract inside the block.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Data Visualization Builder (RefBytes)
   -------------------------------------------------------------------------- */
.dvb-block, .dvb-dashboard-block { color: var(--v-text); }
.dvb-chart-title, .dvb-dashboard-label { font-family: var(--v-font-heading); color: var(--v-heading); }
.dvb-layout-item { background: var(--v-surface); border-color: var(--v-border); border-radius: var(--v-radius); }
.dvb-export-btn { background: var(--v-surface) !important; color: var(--v-text) !important; border: 1px solid var(--v-border-strong) !important; }

/* --------------------------------------------------------------------------
   Value Splitter (RefBytes)
   -------------------------------------------------------------------------- */
.value-block-label { font-family: var(--v-font-heading); font-size: var(--v-step-1); color: var(--v-heading); }
.value-block-placeholder-text { color: var(--v-text-muted); }

/* --------------------------------------------------------------------------
   Pages that other modules render themselves
   -------------------------------------------------------------------------- */
/* Every page template of the theme puts a block with a v- class in <main>.
   A module's own page (Advanced Search's search page, Mapping's map
   browse, Access, Guest...) puts its markup there directly: give it the
   page container's width and gutters, and room under the header. */
.v-main > :not([class^="v-"], [class*=" v-"], .messages, .container, script, style, template, dialog) {
    box-sizing: border-box;
    width: min(100% - 2 * var(--v-gutter), var(--v-container));
    margin-inline: auto;
}
.v-main > :nth-child(1 of :not([class^="v-"], [class*=" v-"], .messages, .container, script, style, template, dialog, [type=hidden])) {
    margin-block-start: var(--v-space-m);
}
/* A module's block in an item page's sidebar is a panel (see
   Engine::region()); keep its first and last lines inside the padding. */
.v-rblock.v-panel > :first-child { margin-block-start: 0; }
.v-rblock.v-panel > :last-child { margin-block-end: 0; }

/* --------------------------------------------------------------------------
   Mapping (Omeka): Leaflet popups and controls in both schemes
   -------------------------------------------------------------------------- */
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--v-surface); color: var(--v-text); }
.leaflet-container a.leaflet-popup-close-button { color: var(--v-text-muted); }
.leaflet-bar a { background: var(--v-surface); color: var(--v-text); border-color: var(--v-border); }
/* Leaflet colors every link on a map #0078a8 (under 4.5:1 on a dark
   popup): links in popups take the page's link color, like the popup. */
.leaflet-popup-content a { color: var(--v-link); }
/* Cluster bubbles are light green, yellow and orange in both schemes: dark
   figures, not the page's text color (light in dark mode). */
.marker-cluster div { color: #1d1d1d; }
/* Map by groups: a popup's group label, and the group filters. */
.leaflet-popup-content .group-type,
.group-filter-label { background: var(--v-surface-alt); color: var(--v-text); }
.group-filter { border-color: var(--v-border); }
/* The map browse page's map sets its margins by id: keep it centered in the
   page column with the rest of the page (see "Pages that other modules
   render themselves"). */
.v-main > #mapping-map { margin-inline: auto; }

/* --------------------------------------------------------------------------
   IIIF viewers (Universal Viewer, Mirador, IIIF Server's player)
   -------------------------------------------------------------------------- */
/* A viewer draws its own interface, but where it leaves a property unset,
   the theme's element styles reach in: Universal Viewer's panel titles
   took the theme's heading color (invisible on its dark panels) and font,
   Mirador's round buttons took the theme's button shadows. The theme's
   element styles sit in cascade layers; these rules are unlayered, so
   they beat them, and have no specificity, so any rule of the viewer
   itself beats these: each property falls back to the browser default. */
:where(.uv, .mirador, .iiif-player-stage) :where(h1, h2, h3, h4, h5, h6) {
    color: revert;
    font-family: revert;
    font-size: revert;
    font-weight: revert;
    font-variation-settings: revert;
    line-height: revert;
    letter-spacing: revert;
    text-transform: revert;
    text-shadow: revert;
}
:where(.uv, .mirador, .iiif-player-stage) :where(button, input, select, textarea, a, [role=button]) {
    font-family: revert;
    font-weight: revert;
    font-variation-settings: revert;
    letter-spacing: revert;
    text-transform: revert;
    text-shadow: revert;
    box-shadow: revert;
    transform: revert;
    translate: revert;
    filter: revert;
}
/* A link in a viewer's panel keeps the panel's text color: the theme's
   link color is meant for the page's background, not the viewer's. */
:where(.uv, .mirador, .iiif-player-stage) :where(a) { color: inherit; }

/* --------------------------------------------------------------------------
   Common (helper of Daniel Berthereau's modules): its public stylesheet,
   loaded with its dialogs (IIIF Server's "Share IIIF manifest"...)
   -------------------------------------------------------------------------- */
/* It colors every message and every .success, .warning and .error element
   (translucent white, fixed green and red): hand the theme's notices back. */
.messages li,
.messages :is(.success, .warning, .error),
.messages :is(.success, .warning, .error) a {
    background-color: revert-layer;
    color: revert-layer;
    border-radius: revert-layer;
    padding: revert-layer;
    margin: revert-layer;
    width: revert-layer;
    box-shadow: revert-layer;
}
/* A dialog's close button clears its background but kept the theme's
   button text color (white on primary): white on white. */
dialog .dialog-header-close-button { color: var(--v-text); box-shadow: none; }

/* --------------------------------------------------------------------------
   Transcript (interactive transcripts of audio and video)
   -------------------------------------------------------------------------- */
.player-container { --player-color: var(--v-primary); }
/* The transcript panel is light gray in the module, under the page's text
   color: invisible in dark mode. */
.player-sidebar { background: var(--v-surface-alt); border-color: var(--v-border); color: var(--v-text); }
.player-header select { color: var(--v-text); background-color: transparent; }
.player-header.scrolled { box-shadow: 0 0 25px color-mix(in srgb, var(--v-text) 18%, transparent); }
/* The module dims cues with opacity, which takes text under 4.5:1; use the
   theme's muted color instead, and full color for the cue being spoken. */
.player-track p { opacity: 1; color: var(--v-text-muted); }
.player-track p:hover, .player-track p.active { color: var(--v-text); }

/* --------------------------------------------------------------------------
   Access (reserved resources): status, request button and request form
   -------------------------------------------------------------------------- */
/* The form is a dialog, shown and hidden by the module's script. It is
   fixed to the window but stays in the sticky sidebar's stacking context,
   under positioned content of the main column (viewers): lift the sidebar
   while it is open. */
.v-resource__sidebar:has(.access-request-form[style*="block"]) { z-index: 300; }
.access-request-form { background: color-mix(in srgb, var(--v-overlay) 55%, transparent); }
.access-request-form .form-wrapper .form-block {
    box-sizing: border-box;
    width: min(32rem, 100% - 2 * var(--v-gutter));
    max-height: calc(100% - 2 * var(--v-gutter));
    overflow: auto;
    background: var(--v-surface);
    color: var(--v-text);
    border: 1px solid var(--v-border-strong);
    border-radius: var(--v-radius);
    box-shadow: var(--v-shadow-md);
}
.access-request-form .form-wrapper .form-block .block-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--v-space-s);
    padding: var(--v-space-xs) var(--v-space-s);
    background: var(--v-surface-alt);
    color: var(--v-text);
    border-block-end: 1px solid var(--v-border);
}
.access-request-form .block-title :is(h2, h3) { margin: 0; font-size: var(--v-step-1); color: inherit; }
/* The close button is an icon (drawn by engine.css), not a filled button. */
.access-request-form .form-wrapper .form-block .block-title .block-close {
    position: static;
    flex: none;
    min-width: var(--v-touch);
    min-height: var(--v-touch);
    padding: 0;
    background: transparent;
    border: 1px solid var(--v-border-strong);
    color: var(--v-text);
    box-shadow: none;
}
.access-request-form .form-wrapper .form-block .block-title .block-close:hover { background: var(--v-surface); }
.access-request-form .form-wrapper .form-block .block-body { padding: var(--v-space-s); }
.access-request-form .field + .field { margin-block-start: var(--v-space-s); }
.access-request-form form label { margin-block: var(--v-space-s); }
.access-request-form :is(input[type=email], input[type=text], textarea) { width: 100%; }

/* --------------------------------------------------------------------------
   Chosen (Omeka's searchable select, in modules' public forms such as
   Advanced Search): the theme's field look in place of a 25px light box
   -------------------------------------------------------------------------- */
.chosen-container { font-size: inherit; color: var(--v-text); }
.chosen-container-single .chosen-single,
.chosen-container-multi .chosen-choices {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    min-height: var(--v-touch);
    height: auto;
    padding: 0.25em 0.75em;
    background: var(--v-surface);
    border: 1px solid var(--v-border-strong);
    border-radius: var(--v-radius-sm);
    box-shadow: none;
    color: var(--v-text);
    line-height: 1.4;
}
.chosen-container-single .chosen-default { color: var(--v-text-muted); }
/* Chosen's own text inputs are not fields of their own: no theme box. */
.chosen-container-multi .chosen-choices li.search-field input[type=text] { min-height: 0; padding: 0; border: 0; background: transparent; color: var(--v-text); font: inherit; }
.chosen-container-single .chosen-search input[type=text] { min-height: 0; background-color: var(--v-surface); color: var(--v-text); border-color: var(--v-border-strong); }
.chosen-container .chosen-drop { background: var(--v-surface); border-color: var(--v-border-strong); color: var(--v-text); }
.chosen-container .chosen-results li { color: var(--v-text); }
.chosen-container .chosen-results li.highlighted { background: var(--v-primary); color: var(--v-on-primary); }
.chosen-container-multi .chosen-choices li.search-choice { background: var(--v-surface-alt); border-color: var(--v-border); color: var(--v-text); box-shadow: none; }
.chosen-container-active :is(.chosen-single, .chosen-choices) { border-color: var(--v-focus); }

/* --------------------------------------------------------------------------
   Advanced Search: the search page, its form, facets and results
   -------------------------------------------------------------------------- */
#search-page > h2 { font-size: var(--v-step-5); margin-block: 0 var(--v-space-s); }
.form-search fieldset > .field { margin-block-end: var(--v-space-s); }
.form-search .field-meta label { display: block; margin-block-end: var(--v-space-3xs); }
/* The module draws its text inputs with a faint 1px border and no radius,
   unlike the theme's: let the theme's input style through. */
.form-search input[type=search],
.form-search .field .inputs > input[type=text],
.search-facets .search-refine {
    height: revert-layer;
    min-height: revert-layer;
    padding: revert-layer;
    border: revert-layer;
    border-radius: revert-layer;
    background: revert-layer;
    appearance: revert-layer;
}
/* The date range in the theme's colors. Chrome gives range inputs a 2px
   margin, which pushed these full-width ones past the page. */
.range-double input[type=range] { margin: 0; }
.range-double .range-progress { background: var(--v-border); }
.range-double .range-progress::before { background: var(--v-primary); }
.range-double input[type=range]::-webkit-slider-thumb { background: var(--v-primary); border-color: var(--v-surface); }
.range-double input[type=range]::-moz-range-thumb { background: var(--v-primary); border-color: var(--v-surface); }
.facets-actions { display: flex; flex-wrap: wrap; gap: var(--v-space-2xs); margin-block-end: var(--v-space-s); }
/* Active facets as the theme's chips: the module's light gray chip kept the
   page's text color, invisible in dark mode. */
.facets-active .facet-active {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.15em 0.2em 0.15em 0.75em;
    border-radius: 999px;
    background: var(--v-primary-subtle);
    color: var(--v-on-primary-subtle);
    font-size: var(--v-step-n1);
    font-weight: 600;
}
.facets-active .facet-active .facet-active-label { padding: 0 0.35em 0 0; background: transparent; }
.facets-active .facet-active .facet-active-value { padding: 0; }
.facets-active .facet-active .facet-active-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    min-height: 1.75rem;
    margin-left: 0.25em;
    padding: 0;
    border-radius: 999px;
    color: inherit;
}
.facets-active .facet-active .facet-active-remove:hover { background: color-mix(in srgb, currentColor 14%, transparent); }
/* The remove sign is "🗙", which most fonts lack (an empty box): draw the
   engine's ×; the link keeps its own label. */
.facets-active .facet-active-remove > [aria-hidden="true"] { display: none; }
.facets-active .facet-active-remove::before {
    content: "";
    width: 0.9em;
    height: 0.9em;
    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='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center / contain no-repeat;
}
.search-results-wrapper { gap: var(--v-space-l); }
/* Facets above the results on narrow screens, not squeezed beside them. */
@media (max-width: 47.99em) {
    .search-results-wrapper { flex-direction: column; }
    .search-facets { flex: none; min-width: 0; max-width: none; }
    .search-results-header > * { white-space: normal; flex-wrap: wrap; }
}
/* Results as the theme's cards: picture first, title under it. */
.search-results .resource-list.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
    gap: var(--v-space-s);
}
.search-results .resource-list.grid .resource {
    width: auto;
    padding: var(--v-space-xs);
    background: var(--v-surface);
    border: 1px solid var(--v-border);
    border-radius: var(--v-radius);
}
.search-results .resource-list.grid .resource-thumbnail { order: -1; align-self: stretch; }
.search-results .resource-list.grid .resource-thumbnail img { max-width: 100%; max-height: 10rem; }
.search-results .resource-list.list .resource { border-block-end: 1px solid var(--v-border); padding-block: var(--v-space-xs); }
.search-view-type.active { color: var(--v-text); }

/* --------------------------------------------------------------------------
   Block Plus: showcases, buttons, links and result lists as the theme's
   cards and buttons (the module leaves them as plain lists)
   -------------------------------------------------------------------------- */
.showcase-entries.multiple-entries,
.item-set-showcase {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
    gap: var(--v-space-s);
}
.showcase-entries .entry,
.item-set-showcase .item-set {
    display: flex;
    flex-direction: column;
    gap: var(--v-space-2xs);
    margin: 0;
    padding: var(--v-space-xs);
    background: var(--v-surface);
    border: 1px solid var(--v-border);
    border-radius: var(--v-radius);
}
.showcase-entries .entry .media-render { margin: 0; text-align: center; }
.showcase-entries .entry img,
.item-set-showcase .item-set img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    background: var(--v-surface-sunken);
    border-radius: var(--v-radius-sm);
}
.showcase-entries .entry h3 { margin: 0; font-size: var(--v-step-1); }
.item-set-showcase .item-set > a:not(:has(img)) { font-family: var(--v-font-heading); font-size: var(--v-step-1); font-weight: var(--v-heading-weight, 700); }
.showcase-entries .entry .caption,
.item-set-showcase .item-set .caption { color: var(--v-text-muted); font-size: var(--v-step-n1); }
/* Share buttons: a row of the theme's quiet buttons, not a bulleted list. */
ul.share-buttons { display: flex; flex-wrap: wrap; gap: var(--v-space-2xs); margin: 0; padding: 0; list-style: none; }
ul.share-buttons a {
    display: inline-flex;
    align-items: center;
    min-height: var(--v-touch);
    padding: 0.35em 0.9em;
    border: 1px solid var(--v-border-strong);
    border-radius: var(--v-radius-button);
    color: var(--v-text);
    text-decoration: none;
}
ul.share-buttons a:hover { background: var(--v-surface-alt); }
.list-links { display: grid; gap: var(--v-space-xs); padding: 0; list-style: none; }
/* A list of results (Search form and results): picture beside the text. */
.search-results-block .resource-list.preview { display: grid; gap: var(--v-space-s); margin: 0 0 var(--v-space-s); padding: 0; list-style: none; }
.search-results-block .resource-list.preview .resource {
    display: grid;
    grid-template-columns: 6rem 1fr;
    grid-template-rows: auto 1fr;
    column-gap: var(--v-space-s);
    align-items: start;
    padding-block-end: var(--v-space-s);
    border-block-end: 1px solid var(--v-border);
}
.search-results-block .resource-list.preview .resource > a:has(img) { grid-row: span 2; }
.search-results-block .resource-list.preview .resource img { width: 6rem; height: 6rem; object-fit: cover; border-radius: var(--v-radius-sm); }
.search-results-block .resource-list.preview .resource h4 { margin: 0; font-size: var(--v-step-1); }
.search-results-block .resource-list.preview .description { color: var(--v-text-muted); font-size: var(--v-step-n1); }
.search-form-block form { display: flex; flex-wrap: wrap; gap: var(--v-space-2xs); margin-block-end: var(--v-space-s); }