/*!
 * Theme Engine — plugin integrations (Omeka Classic).
 *
 * Loaded after plugin stylesheets and outside the cascade layers, so the
 * unlayered rules here win over a plugin's own. Every color comes from the
 * --v-* tokens, so plugin markup follows the theme in both color schemes;
 * the few rules that differ by scheme use the same selectors as the
 * engine's token CSS. Each section is inert when its plugin is not active.
 *
 * The engine's own templates for plugin pages (geolocation/, contribution/,
 * guest-user/, comments.php…) use .v-* classes; their rules sit in the
 * engine.components layer at the end of this file, so a theme can change
 * them from its own layered stylesheet. Some plugins' stylesheets are
 * replaced outright by files of the same name in view/css/ (admin-bar,
 * skeleton, guest-user, commenting, jcarousel.responsive,
 * geolocation-marker, neatlinetime-timeline).
 */

/* --------------------------------------------------------------------------
   Shared token contract for plugins (the same as the Omeka S engine's):
   plugins may read these names with their own fallbacks, e.g.
   var(--theme-primary, #3a6fa8). Declared again on sections that re-color
   their content, so a plugin's markup in a dark band takes its colors.
   -------------------------------------------------------------------------- */
: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);
}
: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;
}

/* Map tiles in the dark scheme: maps keep their light basemap, inverted
   (water stays blue). A site with a dark basemap turns this off with
   `.leaflet-tile-pane, .olLayerGrid { filter: none; }` in its custom CSS. */
:root[data-scheme-mode=always],
:root[data-color-scheme=dark] { --v-map-tiles: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.88) saturate(0.7); }
@media (prefers-color-scheme: dark) {
    :root[data-scheme-mode=auto]:not([data-color-scheme=light]) { --v-map-tiles: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.88) saturate(0.7); }
}

/* --------------------------------------------------------------------------
   Pages that plugins render themselves (Scripto, Universal Viewer's player,
   any plugin page without an engine template): every engine template puts
   a block with a .v-* class in <main>; a plugin's page puts its markup
   there directly. Give it the page column's width and gutters.
   -------------------------------------------------------------------------- */
.v-main > :not([class^="v-"], [class*=" v-"], script, style, template, dialog, link, [type=hidden]) {
    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-"], script, style, template, dialog, link, [type=hidden])) {
    margin-block-start: var(--v-space-m);
}

/* --------------------------------------------------------------------------
   What plugins add below an item or collection (public_items_show,
   public_collections_show): maps, comments, related items, sharing…
   -------------------------------------------------------------------------- */
.v-resource__extra { display: grid; gap: var(--v-space-xl); margin-block: var(--v-space-xl) 0; }
.v-resource__extra > * { min-width: 0; margin-block: 0; }
.v-resource__extra > :is(div, section) > h2,
.v-resource__extra > h2 { margin: 0 0 var(--v-space-s); font-size: var(--v-step-3); }

/* Coins: an empty span for reference managers (Zotero reads it). */
span.Z3988 { display: none; }
/* On browse cards it is the only thing in the plugins' area: no empty gap. */
.v-card__extra:has(> span.Z3988:only-child) { display: none; }

/* --------------------------------------------------------------------------
   Omeka forms in plugin pages: Omeka_Form's admin grid classes
   (.two.columns.alpha, .five.columns.omega), .field-meta, .inputs,
   .explanation and error lists, in the theme's field style. The engine's
   templates wrap these forms in .v-fields.
   -------------------------------------------------------------------------- */
:where(.v-fields, .v-advanced-search, #contribution-type-form) :is(.columns, .column, .alpha, .omega, .field-meta) {
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
}
:where(.v-fields, #contribution-type-form) .field { display: grid; gap: var(--v-space-3xs); margin: 0; }
:where(.v-fields, #contribution-type-form) .inputs { display: grid; gap: var(--v-space-2xs); width: auto; float: none; margin: 0; }
:where(.v-fields, #contribution-type-form) :is(input:not([type=checkbox], [type=radio], [type=submit], [type=button], [type=reset], [type=image], [type=hidden], [type=file]), select, textarea) {
    width: 100%;
    margin: 0;
}
:where(.v-fields, #contribution-type-form, .v-advanced-search) label { margin: 0; }
:where(.v-fields, #contribution-type-form, .v-advanced-search) .explanation {
    margin: 0;
    font-size: var(--v-step-n1);
    color: var(--v-text-muted);
}
:where(.v-fields, #contribution-type-form, .v-advanced-search) ul.error,
:where(.v-fields, #contribution-type-form, .v-advanced-search) p.error {
    list-style: none;
    margin: 0;
    padding: 0;
    color: var(--v-notice-danger);
    font-size: var(--v-step-n1);
    font-weight: 600;
}
:where(.v-fields, #contribution-type-form) ul.error li { margin: 0; padding: 0; border: 0; }
:where(.v-fields, #contribution-type-form) :is(input, select, textarea)[aria-invalid=true] { border-color: var(--v-notice-danger); }
/* Required fields: a decorative star; the plugin's "required field" text
   stays for screen readers. */
:where(.v-fields, #contribution-type-form) .required-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
:where(.v-fields, #contribution-type-form) label.required::after { content: " *" / ""; color: var(--v-notice-danger); }
/* A checkbox field (Remember me, Expand to subcollections): the box first,
   on the same line as its label. */
:is(.v-fields, .v-advanced-search) .field:has(> .inputs input[type=checkbox]) {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: center;
    gap: var(--v-space-2xs);
}
:is(.v-fields, .v-advanced-search) .field:has(> .inputs input[type=checkbox]) > .inputs { display: flex; align-items: center; }
/* A checkbox with its label after it (engine templates: .v-check). */
.v-check { display: flex; align-items: flex-start; gap: var(--v-space-2xs); }
.v-check input[type=checkbox] { flex: none; margin-block-start: 0.3em; }
.v-check label { font-weight: 500; }
/* Guest User's password check writes its message into the label in red. */
.v-fields label[style*="red"] { color: var(--v-notice-danger) !important; }
.v-fields form > div:not(.field) { margin: 0; }

/* The advanced item search: plugins' fields (Geolocation, Collection Tree,
   Exhibit Builder) in the search page's style. */
.v-advanced-search .field > .columns > label { font-weight: 700; }
.v-advanced-search #search-by-geolocation-radius input { width: 8rem; }
.v-advanced-search #geolocation-address-input { width: min(100%, 28rem); }

/* --------------------------------------------------------------------------
   reCAPTCHA (Commenting, Simple Contact Form, Contribution, Guest User):
   Google's widget is a fixed 304px frame.
   -------------------------------------------------------------------------- */
.g-recaptcha { max-width: 100%; overflow-x: auto; }

/* --------------------------------------------------------------------------
   Geolocation (Leaflet 1.9): controls, popups and clusters in the
   theme's tokens; tiles dimmed in the dark scheme (see --v-map-tiles).
   -------------------------------------------------------------------------- */
.leaflet-container {
    background: var(--v-surface-sunken);
    font-family: var(--v-font-body);
    font-size: 0.8125rem;
    color: var(--v-text);
}
.geolocation-map { border: 1px solid var(--v-border); border-radius: var(--v-radius); }
.leaflet-tile-pane { filter: var(--v-map-tiles, none); }
.leaflet-container a { color: var(--v-link); }
.leaflet-bar { border: 1px solid var(--v-border-strong) !important; box-shadow: var(--v-shadow-sm) !important; border-radius: var(--v-radius) !important; }
.leaflet-bar a,
.leaflet-bar a:hover {
    background-color: var(--v-surface);
    color: var(--v-text);
    border-bottom-color: var(--v-border);
    text-decoration: none;
}
.leaflet-bar a:hover { background-color: var(--v-surface-alt); }
.leaflet-bar a.leaflet-disabled { background-color: var(--v-surface-sunken); color: var(--v-text-muted); }
.leaflet-bar a:focus-visible { outline: 3px solid var(--v-focus); outline-offset: 0; position: relative; z-index: 1; }
.leaflet-control-layers {
    background: var(--v-surface);
    color: var(--v-text);
    border: 1px solid var(--v-border-strong) !important;
    border-radius: var(--v-radius);
    box-shadow: var(--v-shadow-sm);
}
.leaflet-container .leaflet-control-attribution {
    background: color-mix(in srgb, var(--v-surface) 88%, transparent);
    color: var(--v-text);
}
.leaflet-container .leaflet-control-attribution a { color: var(--v-link); }
.leaflet-container .leaflet-control-scale-line { background: color-mix(in srgb, var(--v-surface) 80%, transparent); border-color: var(--v-text); color: var(--v-text); }
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
    background: var(--v-surface);
    color: var(--v-text);
    box-shadow: var(--v-shadow-md);
}
.leaflet-popup-content-wrapper { border: 1px solid var(--v-border); border-radius: var(--v-radius); }
.leaflet-popup-content { margin: var(--v-space-s) var(--v-space-l) var(--v-space-s) var(--v-space-s); font-size: var(--v-step-n1); line-height: 1.45; }
.leaflet-popup-content a { color: var(--v-link); }
.leaflet-container a.leaflet-popup-close-button { width: 2rem; height: 2rem; font: 1.375rem/2rem var(--v-font-body); color: var(--v-text-muted); text-decoration: none; }
.leaflet-container a.leaflet-popup-close-button:hover { color: var(--v-text); }
/* Clustered markers: the count on the primary color, with a halo. */
.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large { background-color: color-mix(in srgb, var(--v-primary) 32%, transparent); }
.marker-cluster-small div,
.marker-cluster-medium div,
.marker-cluster-large div { background-color: var(--v-primary); color: var(--v-on-primary); }
.marker-cluster span { font-family: var(--v-font-body); font-weight: 700; }

/* --------------------------------------------------------------------------
   Html5 Media (MediaElement.js): the player bar in the theme's dark color,
   at the width of its column. The engine's button styles stay out of the
   player's own buttons.
   -------------------------------------------------------------------------- */
.html5media-player { max-width: 100%; }
.html5media-player.audio { width: 100%; }
.mejs-container { max-width: 100%; font-family: var(--v-font-body); border-radius: var(--v-radius-sm); overflow: hidden; }
.mejs-container.mejs-audio,
.mejs-audio .mejs-controls:not([style*="display: none"]) { background: var(--v-dark); }
.mejs-container.mejs-audio { width: 100% !important; }
.mejs-time { color: var(--v-on-dark); font-size: var(--v-step-n2); }
.mejs-time-current, .mejs-time-handle-content { background: var(--v-on-dark); }
.mejs-time-handle-content { border-color: var(--v-on-dark); background: transparent; }
.mejs-horizontal-volume-current { background: var(--v-on-dark); }
:where(.mejs-container) :where(button) {
    min-width: revert;
    min-height: revert;
    gap: revert;
    font-weight: revert;
    line-height: revert;
    transition: revert;
}
.mejs-button > button:focus-visible { outline: 2px solid var(--v-on-dark); outline-offset: 2px; box-shadow: none; }
.mejs-captions-text, .mejs-captions-position .mejs-captions-text { font-family: var(--v-font-body); }
.html5media-download { margin: var(--v-space-2xs) 0 0; font-size: var(--v-step-n1); }

/* --------------------------------------------------------------------------
   PDF Embed and Docs Viewer: documents at the width of their column.
   -------------------------------------------------------------------------- */
.item-file.application-pdf :is(object, iframe),
.v-gallery__render > :is(object[type="application/pdf"], iframe) {
    display: block;
    width: 100% !important;
    max-width: 100%;
    max-height: 85vh;
    border: 0;
    border-radius: var(--v-radius-sm);
    background: var(--v-surface-sunken);
}
#docsviewer > h2,
#docsviewer_viewer h2 { margin: 0 0 var(--v-space-s); font-size: var(--v-step-3); }
#docsviewer_viewer h2 { font-size: var(--v-step-1); }
#docsviewer_viewer iframe {
    display: block;
    width: 100%;
    height: clamp(24rem, 80vh, 48rem);
    border: 1px solid var(--v-border) !important;
    border-radius: var(--v-radius-sm);
    background: #fff;
}

/* --------------------------------------------------------------------------
   Universal Viewer: its own dark interface. The theme's element styles
   (headings, buttons, links) stay out of it, so each property falls back
   to the viewer's own rules or the browser's default.
   -------------------------------------------------------------------------- */
div.universal-viewer { height: clamp(26rem, 75vh, 48rem); max-width: 100%; border-radius: var(--v-radius); overflow: hidden; }
/* The player page (/items/play/<id>) puts the class on <body> too, and the
   plugin gives every .universal-viewer a fixed height. */
body.universal-viewer { height: auto; overflow: visible; }
:where(div.universal-viewer, div.uv) :where(h1, h2, h3, h4, h5, h6) {
    color: revert;
    font-family: revert;
    font-size: revert;
    font-weight: revert;
    line-height: revert;
    letter-spacing: revert;
    text-transform: revert;
}
:where(div.universal-viewer, div.uv) :where(button, input, select, textarea, a, [role=button]) {
    min-width: revert;
    min-height: revert;
    font-family: revert;
    font-weight: revert;
    letter-spacing: revert;
    text-transform: revert;
    box-shadow: revert;
}
:where(div.universal-viewer, div.uv) :where(a) { color: inherit; }

/* --------------------------------------------------------------------------
   Social Bookmarking: the share links as quiet buttons.
   -------------------------------------------------------------------------- */
.socialbookmarking-links { display: flex; flex-wrap: wrap; gap: var(--v-space-2xs); margin: 0; }
.socialbookmarking-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    min-height: 2.5rem;
    margin: 0;
    padding: 0.3em 0.9em;
    border: 1px solid var(--v-border-strong);
    border-radius: var(--v-radius-button);
    color: var(--v-text);
    font-size: var(--v-step-n1);
    font-weight: 600;
    text-decoration: none;
}
.socialbookmarking-link:hover { background: var(--v-surface-alt); color: var(--v-text); text-decoration: underline; }
.socialbookmarking-link span.icon::before { margin: 0; color: var(--v-primary-text); }

/* --------------------------------------------------------------------------
   Neatline: the map at the page's width, its bubble and OpenLayers
   controls in the theme's tokens; the fullscreen view without the page's
   frame (Neatline keeps only the head of the theme's layout there).
   -------------------------------------------------------------------------- */
.v-neatline__stage #neatline { position: relative; width: 100%; border-block: 1px solid var(--v-border); }
.v-neatline__stage #neatline-map { height: clamp(24rem, 75vh, 50rem); }
/* The engine resets svg and img to height: auto and max-width: 100%;
   OpenLayers sizes its vector layer and tiles itself. */
#neatline svg { max-width: none; }
#neatline img { max-width: none; }
#neatline .olTileImage { filter: var(--v-map-tiles, none); }
#neatline .olControlZoom a,
#neatline .olButton {
    background: var(--v-surface);
    color: var(--v-text);
    border: 1px solid var(--v-border-strong);
    font-family: var(--v-font-body);
    text-decoration: none;
}
#neatline .olControlZoom a:hover { background: var(--v-surface-alt); color: var(--v-text); }
#neatline .olControlLayerSwitcher { font-family: var(--v-font-body); color: var(--v-text); }
#neatline .olControlLayerSwitcher .layersDiv { background: var(--v-surface); border: 1px solid var(--v-border); border-radius: var(--v-radius); }
#neatline .olControlAttribution { color: var(--v-text); background: color-mix(in srgb, var(--v-surface) 85%, transparent); padding: 0 0.4em; border-radius: var(--v-radius-sm); bottom: 0.25em; }
#neatline .olControlAttribution a { color: var(--v-link); }
#static-bubble {
    background: var(--v-surface);
    color: var(--v-text);
    border: 1px solid var(--v-border);
    border-radius: var(--v-radius);
    box-shadow: var(--v-shadow-md);
    font-family: var(--v-font-body);
    opacity: 0.97;
    max-width: min(26rem, 80%);
}
#static-bubble.selected { opacity: 1; }
#static-bubble .title { font-family: var(--v-font-heading); font-size: var(--v-step-1); font-weight: var(--v-heading-weight); color: var(--v-heading); line-height: 1.2; }
#static-bubble .close { font-size: 1.5rem; line-height: 1; color: var(--v-text-muted); text-decoration: none; }
#static-bubble a { color: var(--v-link); }
#static-bubble hr { border: 0; border-block-start: 1px solid var(--v-border); }
#static-bubble .item .element-set h2 { font-size: var(--v-step-0); }
#static-bubble .item .element h3 { margin: var(--v-space-2xs) 0 0; font-size: var(--v-step-n1); }
body.neatline.fullscreen { display: block; min-height: 0; margin: 0; padding: 0; background: var(--v-bg); }
.v-neatline-block { margin: 0; }
.v-neatline-block iframe { display: block; width: 100%; border: 1px solid var(--v-border); border-radius: var(--v-radius); background: var(--v-surface-sunken); }
.v-neatline-block figcaption { margin-block-start: var(--v-space-2xs); }

/* --------------------------------------------------------------------------
   Scripto (needs MediaWiki): its pages are not templated by the engine;
   tables, the page's link line, diffs and the transcription in tokens.
   -------------------------------------------------------------------------- */
.scripto table { width: 100%; font-size: var(--v-step-n1); }
.scripto th { background: var(--v-surface-alt); }
.scripto > p:first-child { color: var(--v-text-muted); font-size: var(--v-step-n1); }
.scripto button { min-height: 2.5rem; }
#scripto-openlayers { border: 1px solid var(--v-border) !important; border-radius: var(--v-radius); }
#scripto-transcription-page-html,
#scripto-talk-page-html {
    padding: var(--v-space-s);
    background: var(--v-surface);
    border: 1px solid var(--v-border);
    border-radius: var(--v-radius);
}
#scripto-transcription-page-wikitext,
#scripto-talk-page-wikitext { width: 100%; font-family: var(--v-font-mono); }
.scripto .diff-marker { color: var(--v-text-muted); text-align: end; }
.scripto .diff-addedline { background: var(--v-notice-success-bg); color: var(--v-text); }
.scripto .diff-deletedline { background: var(--v-notice-danger-bg); color: var(--v-text); }
.scripto .diff-context { background: var(--v-surface-alt); color: var(--v-text); }
.scripto :is(ins, del).diffchange { padding: 0 0.1em; border-radius: 2px; font-weight: 700; text-decoration: none; }
.scripto ins.diffchange { background: color-mix(in srgb, var(--v-notice-success) 28%, transparent); }
.scripto del.diffchange { background: color-mix(in srgb, var(--v-notice-danger) 28%, transparent); text-decoration: line-through; }

/* ==========================================================================
   The engine's plugin templates (theme-overridable, in the engine's
   components layer)
   ========================================================================== */
@layer engine.components {
    /* --- Plugin page frame: forms and account pages ---------------------- */
    .v-form-page { padding-block-end: var(--v-space-2xl); }
    .v-form-page__lead { max-width: var(--v-measure); margin: var(--v-space-2xs) 0 0; font-size: var(--v-step-1); color: var(--v-text); }
    .v-form-page__lead > :first-child { margin-block-start: 0; }
    .v-form-page__lead > :last-child { margin-block-end: 0; }
    .v-form-page .v-page__header { margin-block-end: var(--v-space-l); }
    .v-form-page__links { display: flex; flex-wrap: wrap; gap: var(--v-space-2xs) var(--v-space-l); margin: var(--v-space-l) 0 0; padding: 0; list-style: none; }
    .v-form-page__links li { margin: 0; }
    .v-form-page__alt { margin-block-start: var(--v-space-l); }
    .v-form-page__notice { max-width: 42rem; }
    #simple-contact > .v-form-page__lead { margin-block-end: var(--v-space-l); }
    .v-form-page__notice > :last-child { margin-block-end: 0; }

    /* --- Fields --------------------------------------------------------------- */
    .v-fields { max-width: 40rem; }
    .v-fields form, form.v-fields { display: grid; gap: var(--v-space-m); margin: 0; }
    .v-fields fieldset:not(.v-fields__group) { display: grid; gap: var(--v-space-m); margin: 0; padding: 0; border: 0; }
    .v-fields__group {
        display: grid;
        gap: var(--v-space-m);
        margin: 0;
        padding: var(--v-space-m);
        background: var(--v-surface);
        border: 1px solid var(--v-border);
        border-radius: var(--v-radius);
    }
    .v-fields__group > legend { padding: 0 var(--v-space-2xs); font-family: var(--v-font-heading); font-size: var(--v-step-1); font-weight: var(--v-heading-weight); color: var(--v-heading); }
    .v-fields__actions { margin: 0; }

    /* --- Contribution ---------------------------------------------------- */
    .v-contribution__form { max-width: 44rem; }
    .v-contribution__type .inputs { display: flex; flex-wrap: wrap; gap: var(--v-space-2xs); }
    .v-contribution__type select { flex: 1 1 14rem; width: auto; }
    #contribution-type-form { display: grid; gap: var(--v-space-m); }
    #contribution-type-form:empty { display: none; }
    .v-contribution__type-heading { margin: var(--v-space-xs) 0 0; font-size: var(--v-step-2); }
    .v-contribution__terms { margin: 0; }
    .v-contribution__user { margin: 0; color: var(--v-text-muted); }
    .v-contribution__mine .v-table-wrap { margin-block: 0 var(--v-space-m); }
    .v-contribution__mine td:has(input[type=checkbox]) { text-align: center; }

    /* --- Guest User dashboard ---------------------------------------------- */
    .v-dashboard { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr)); gap: var(--v-space-s); align-items: start; }

    /* --- Item Relations ----------------------------------------------------- */
    .v-relations { max-width: 52rem; }
    .v-relations__list { margin: 0; display: grid; gap: 0; border-block-start: 1px solid var(--v-border); }
    .v-relations__group { display: grid; gap: 0 var(--v-space-m); padding-block: var(--v-space-xs); border-block-end: 1px solid var(--v-border); }
    .v-relations__group dt { font-weight: 700; }
    .v-relations__group dd { margin: 0; padding-block: 0.15em; }
    @media (min-width: 40em) {
        .v-relations__group { grid-template-columns: minmax(9rem, 30%) minmax(0, 1fr); }
        .v-relations__group dt { grid-row: span 99; }
        .v-relations__group dd { grid-column: 2; }
    }

    /* --- Collection Tree ---------------------------------------------------- */
    .v-collection-tree { max-width: 52rem; }
    .v-collection-tree__heading { margin: 0 0 var(--v-space-s); font-size: var(--v-step-3); }
    .v-tree, .v-tree ul { list-style: none; margin: 0; padding: 0; }
    .v-tree ul { margin-inline-start: 0.6rem; padding-inline-start: var(--v-space-m); border-inline-start: 2px solid var(--v-border); }
    .v-tree li { margin: 0; }
    .v-tree__label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15em var(--v-space-xs); padding-block: var(--v-space-3xs); }
    .v-tree__title { font-weight: 600; }
    .v-tree__node--current > .v-tree__label .v-tree__title { font-weight: 700; color: var(--v-text); }
    .v-tree__node--current > .v-tree__label::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--v-accent); align-self: center; }
    .v-tree__count { font-size: var(--v-step-n1); color: var(--v-text-muted); }
    .v-tree__unavailable { color: var(--v-text-muted); font-style: italic; }
    .v-collection-tree-page .v-tree > li { padding-block: var(--v-space-2xs); border-block-end: 1px solid var(--v-border); }
    .v-collection-tree-page .v-tree > li > .v-tree__label .v-tree__title { font-family: var(--v-font-heading); font-size: var(--v-step-1); }

    /* --- Geolocation map page ---------------------------------------------- */
    .v-map-browse__layout { display: grid; gap: var(--v-space-m); margin-block-end: var(--v-space-l); }
    .v-map-browse__map { min-width: 0; }
    .v-map-browse__map #map_browse { height: clamp(20rem, 62vh, 38rem); }
    .v-map-browse__list { min-width: 0; }
    .v-map-browse__list-heading { margin: 0 0 var(--v-space-2xs); font-size: var(--v-step-1); }
    .v-map-browse__list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-block-start: 1px solid var(--v-border); }
    .v-map-browse__list li { margin: 0; border-block-end: 1px solid var(--v-border); }
    .v-map-browse__list .item-link {
        display: flex;
        align-items: center;
        min-height: var(--v-touch);
        padding: 0.35em 0.6em;
        color: var(--v-text);
        text-decoration: none;
        line-height: 1.3;
    }
    .v-map-browse__list .item-link:hover { background: var(--v-surface-alt); color: var(--v-link); text-decoration: underline; }
    .v-map-browse__list .item-link.current { background: var(--v-primary-subtle); color: var(--v-on-primary-subtle); font-weight: 700; box-shadow: inset 3px 0 0 var(--v-primary); }
    @media (min-width: 56em) {
        .v-map-browse__layout { grid-template-columns: minmax(0, 1fr) minmax(15rem, 22rem); align-items: start; }
        .v-map-browse__list { max-height: clamp(20rem, 62vh, 38rem); overflow-y: auto; overscroll-behavior: contain; }
        .v-map-browse__list-heading { position: sticky; top: 0; z-index: 1; padding-block: var(--v-space-3xs); background: var(--v-bg); }
    }
    @media (max-width: 55.99em) {
        .v-map-browse__list ul { max-height: 22rem; overflow-y: auto; }
    }

    /* --- Neatline and Neatline Time pages ---------------------------------- */
    .v-neatline__header .v-button-row { margin: var(--v-space-xs) 0 0; }
    .v-neatline__stage { margin-block-end: var(--v-space-l); }
    .v-neatline__narrative { padding-block-end: var(--v-space-xl); }
    .v-timeline { margin-block-end: var(--v-space-2xs); }
    .v-timeline__help { margin: 0 0 var(--v-space-l); font-size: var(--v-step-n1); color: var(--v-text-muted); }
    .v-timeline__description { max-width: var(--v-measure); }
}