/* splent_feature_dataset
 *
 * What the feature draws on pages of any shell: the top datasets section
 * of the home page (hooks/home_datasets.html, drawn by the home.section
 * slot), the DOI pill (dataset/_doi_pill.html), the QR dialog
 * (assets/js/layout.js builds it), the format menus of the download buttons
 * (dataset/_format_menu.html) and the skeleton placeholders of the loading
 * states (dataset/_dataset_skeleton_card.html), and the pages of the app
 * shell: the upload
 * and edit form, My datasets and the dataset page. The public shell loads
 * this file from the asset registry and the app shell through
 * layout.head.css.
 *
 * The home section does use classes of the shells for its frame: the
 * container and section every home section has, which the public shell
 * styles, and card, badge and btn, which both shells style.
 * Its bg-secondary, bg-light and text-muted only change it in the app
 * shell. This file draws everything else, and nothing here needs a script
 * of a shell. The colours come from the public shell's brand tokens, then
 * the app shell's Bootstrap variables (which follow its dark mode), then a
 * plain default.
 */

.datasets-home,
.dataset-doi,
.dataset-qr-dialog,
.dataset-form,
.dataset-view,
.dataset-table {
    --dataset-text: var(--brand-text, var(--bs-body-color, #1f2933));
    --dataset-muted: var(--brand-muted, var(--bs-secondary-color, #64748b));
    --dataset-border: var(--brand-border, var(--bs-gray-300, #dbdfe9));
    --dataset-surface: var(--brand-bg, var(--bs-body-bg, #ffffff));
    --dataset-subtle: var(--brand-surface, var(--bs-gray-100, #f9f9f9));
    --dataset-primary: var(--brand-primary, var(--bs-primary, #1b84ff));
    --dataset-primary-contrast: var(--brand-primary-contrast, var(--bs-primary-inverse, #ffffff));
    --dataset-radius: 6px;
}

.dataset-icon {
    flex: none;
    vertical-align: -0.125em;
}

/* ── Top datasets on the home page ────────────────────────────────────── */

.datasets-home-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.datasets-home-card > .card-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.datasets-home-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
}

.datasets-home-title {
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.3;
}

.datasets-home-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 1rem;
    margin: 0;
    color: var(--dataset-muted);
    font-size: 0.875rem;
}

.datasets-home-rating {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.datasets-home-rating-count {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.datasets-home-anonymous {
    margin: 0;
    color: var(--dataset-muted);
    font-style: italic;
}

/* Authors, one per line with their affiliation and ORCID. */
.datasets-home .datasets-home-authors {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.85rem;
}

.datasets-home .datasets-home-author {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    line-height: 1.2;
}

.datasets-home-author > .dataset-icon {
    color: var(--dataset-muted);
}

.datasets-home .datasets-home-affiliation {
    font-size: 0.75rem;
}

.datasets-home-orcid {
    display: inline-flex;
    align-items: center;
}

.datasets-home-description > :first-child {
    margin-top: 0;
}

.datasets-home-description > :last-child {
    margin-bottom: 0;
}

.datasets-home-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

/* The View link and the Download menu of each card. */
.datasets-home-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.datasets-home .datasets-home-action {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.5;
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--dataset-border);
    border-radius: var(--dataset-radius);
    background: transparent;
    color: var(--dataset-text);
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.datasets-home .datasets-home-action:hover,
.datasets-home .datasets-home-action:focus-visible,
.datasets-home-download[open] > .datasets-home-action {
    border-color: var(--dataset-primary);
    color: var(--dataset-primary);
}

.datasets-home .datasets-home-action:focus-visible,
.datasets-home-download-submit:focus-visible,
.dataset-doi-action:focus-visible,
.dataset-qr-dialog-close:focus-visible,
.dataset-qr-dialog-format:focus-visible {
    outline: 2px solid var(--dataset-primary);
    outline-offset: 2px;
}

/* The format menu is a <details>: it opens and closes with no script. */
.datasets-home-download {
    position: relative;
}

.datasets-home-download > summary {
    list-style: none;
}

.datasets-home-download > summary::-webkit-details-marker {
    display: none;
}

.datasets-home-download > summary::marker {
    content: "";
}

.datasets-home-chevron {
    transition: transform 0.15s ease;
}

.datasets-home-download[open] .datasets-home-chevron {
    transform: rotate(180deg);
}

.datasets-home-download-menu {
    position: absolute;
    top: calc(100% + 0.375rem);
    left: 0;
    z-index: 20;
    min-width: 12.5rem;
    margin: 0;
    padding: 0.875rem 1rem 1rem;
    border: 1px solid var(--dataset-border);
    border-radius: var(--dataset-radius);
    background: var(--dataset-surface);
    color: var(--dataset-text);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
}

.datasets-home-download-menu fieldset {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
    margin: 0 0 0.875rem;
    padding: 0;
    border: 0;
}

.datasets-home-download-menu legend {
    float: none;
    width: auto;
    margin: 0 0 0.5rem;
    padding: 0;
    color: var(--dataset-muted);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.datasets-home-format {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    font-size: 0.9rem;
    cursor: pointer;
}

.datasets-home-format input {
    width: 1rem;
    height: 1rem;
    margin: 0;
    accent-color: var(--dataset-primary);
}

.datasets-home-download-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.45rem 0.75rem;
    border: 0;
    border-radius: var(--dataset-radius);
    background: var(--dataset-primary);
    color: var(--dataset-primary-contrast);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

/* With no format ticked the button is idle. assets/js/layout.js disables
   it, and without that script it only looks idle, while the download route
   answers a menu sent with no format with a message. */
.datasets-home-download-submit:disabled,
.datasets-home-download-menu:not(:has(input:checked)) .datasets-home-download-submit {
    opacity: 0.5;
    pointer-events: none;
}

.datasets-home-explore {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* ── DOI pill: a black "DOI" label, the blue value, copy and QR ───────── */

.dataset-doi {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.5rem;
    max-width: 100%;
}

.dataset-doi--full {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.doi-pill {
    display: inline-flex;
    align-items: stretch;
    min-width: 0;
    max-width: 100%;
    height: 35px;
    font-family: monospace;
    font-size: 0.78rem;
    line-height: 1.2;
}

.dataset-doi--full .doi-pill {
    width: 100%;
}

.doi-pill-label {
    display: inline-flex;
    align-items: center;
    padding: 0 0.5rem;
    border-radius: var(--dataset-radius, 6px) 0 0 var(--dataset-radius, 6px);
    background: #18181b;
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.doi-pill-value {
    display: block;
    flex: 0 1 auto;
    min-width: 0;
    padding: 0 0.5rem;
    border-radius: 0 var(--dataset-radius, 6px) var(--dataset-radius, 6px) 0;
    background: linear-gradient(90deg, #2176bd 0%, #2980b9 100%);
    color: #fff;
    line-height: 35px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
    transition: filter 0.15s ease;
}

.dataset-doi--full .doi-pill-value {
    flex-grow: 1;
}

.doi-pill-value:hover,
.doi-pill-value:focus {
    filter: brightness(1.08);
    color: #fff;
    text-decoration: none;
}

.dataset-doi-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 35px;
    height: 35px;
    padding: 0;
    border: 1px solid var(--dataset-border);
    border-radius: var(--dataset-radius);
    background: var(--dataset-subtle);
    color: var(--dataset-text);
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.dataset-doi-action:hover {
    border-color: var(--dataset-primary);
    color: var(--dataset-primary);
}

/* ── Format menus (dataset/_format_menu.html) ─────────────────────────────
   The Bootstrap dropdown of the header's "Download all", the dataset page
   and My datasets. ───────────────────────────────────────────────────── */

.dataset-format-menu {
    min-width: 12rem;
}

.dataset-format-menu .form-check {
    display: block;
    cursor: pointer;
}

/* AdminKit slides every open .dropdown-menu in with a transform animation
   that fills forwards, and an animated transform beats the inline one
   Popper places the menu with: the menu would stay at the corner of its
   containing block, away from its button or over it. The menus Popper
   places fade in instead. One in a Bootstrap .navbar is static, Popper
   does not place it, and it keeps AdminKit's slide. */
.dropdown .dropdown-menu.dataset-format-menu.show[data-popper-placement] {
    animation-name: dataset-menu-fade;
}

@keyframes dataset-menu-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── QR dialog ────────────────────────────────────────────────────────── */

.dataset-qr-dialog {
    width: min(22rem, calc(100vw - 2rem));
    padding: 0;
    border: 1px solid var(--dataset-border);
    border-radius: 12px;
    background: var(--dataset-surface);
    color: var(--dataset-text);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.3);
}

.dataset-qr-dialog::backdrop {
    background: rgba(15, 23, 42, 0.5);
}

.dataset-qr-dialog-inner {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
}

.dataset-qr-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.dataset-qr-dialog-head form {
    margin: 0;
}

.dataset-qr-dialog-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
}

.dataset-qr-dialog-close {
    display: inline-flex;
    padding: 0.25rem;
    border: 0;
    border-radius: var(--dataset-radius);
    background: transparent;
    color: var(--dataset-muted);
    cursor: pointer;
}

.dataset-qr-dialog-close:hover {
    color: var(--dataset-text);
}

.dataset-qr-dialog-image {
    display: block;
    width: 100%;
    max-width: 280px;
    height: auto;
    aspect-ratio: 1;
    margin: 0 auto;
    padding: 0.75rem;
    border: 1px solid var(--dataset-border);
    border-radius: 8px;
    background: #fff;
}

.dataset-qr-dialog-url {
    display: block;
    overflow: hidden;
    font-family: monospace;
    font-size: 0.8rem;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dataset-qr-dialog-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: var(--dataset-muted);
    font-size: 0.85rem;
}

.dataset-qr-dialog-format {
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--dataset-border);
    border-radius: var(--dataset-radius);
    color: var(--dataset-text);
    font-weight: 600;
    text-decoration: none;
}

.dataset-qr-dialog-format:hover {
    border-color: var(--dataset-primary);
    color: var(--dataset-primary);
}

/* ── Skeleton placeholders ────────────────────────────────────────────────
   The shimmer of the loading states: the dataset card of
   dataset/_dataset_skeleton_card.html, which explore draws while its
   results load, and what features that require dataset draw the same way,
   such as hubfile's workbench. ─────────────────────────────────────────── */

@keyframes skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.skeleton {
    position: relative;
    overflow: hidden;
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.06) 25%,
        rgba(0, 0, 0, 0.12) 37%,
        rgba(0, 0, 0, 0.06) 63%
    );
    background-size: 400% 100%;
    animation: skeleton-shimmer 1.6s ease infinite;
    border-radius: 6px;
    color: transparent !important;
    pointer-events: none;
    user-select: none;
}

.skeleton-line {
    display: block;
    height: 12px;
    width: 100%;
    margin-bottom: 0.5rem;
}

.skeleton-line.sm {
    height: 10px;
}

.skeleton-line.lg {
    height: 18px;
}

.skeleton-line.xl {
    height: 28px;
}

.skeleton-block {
    display: block;
    width: 100%;
}

.skeleton-circle {
    border-radius: 50%;
}

/* Fade-in once real content replaces the skeleton. */
.skeleton-fade-in {
    animation: skeleton-fade-in 0.25s ease-out both;
}

@keyframes skeleton-fade-in {
    from { opacity: 0; transform: translateY(2px); }
    to   { opacity: 1; transform: none; }
}

/* ── Upload and edit form (dataset/create_and_edit_dataset.html) ─────────
   The steps' nav, which assets/js/stepper_widget.js marks current,
   completed or pending, the authors' blocks SortableJS moves, and the
   error box, which keeps the line breaks of a list of failed files. ───── */

.dataset-stepper-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding-bottom: 1.5rem;
}

.dataset-stepper-item:last-child {
    padding-bottom: 0;
}

/* The line down to the next step. */
.dataset-stepper-item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 2.75rem;
    bottom: 0.25rem;
    left: 1.25rem;
    border-left: 1px dashed var(--dataset-border);
}

.dataset-stepper-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--dataset-radius);
    background: var(--dataset-subtle);
    color: var(--dataset-primary);
    font-weight: 600;
}

.dataset-stepper-item.current .dataset-stepper-icon {
    background: var(--dataset-primary);
    color: var(--dataset-primary-contrast);
}

.dataset-stepper-check,
.dataset-stepper-item.completed .dataset-stepper-number {
    display: none;
}

.dataset-stepper-item.completed .dataset-stepper-check {
    display: inline;
}

.dataset-stepper-label {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding-top: 0.5rem;
}

.dataset-stepper-title {
    font-weight: 600;
    color: var(--dataset-text);
}

.dataset-stepper-item.pending .dataset-stepper-title {
    color: var(--dataset-muted);
}

.dataset-type-option {
    min-height: 4.5rem;
}

.dataset-author .draggable-handle {
    cursor: grab;
}

.dataset-author-ghost {
    opacity: 0.4;
}

.dataset-form-error {
    white-space: pre-line;
}

/* ── Icon buttons (My datasets, the dataset page) ─────────────────────────
   Square buttons with only an icon, named by their aria-label. A dropdown
   among them hides Bootstrap's caret, which does not fit the square. ──── */

.dataset-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
}

.dataset-icon-btn.dropdown-toggle::after {
    display: none;
}

/* ── My datasets (dataset/list_datasets.html) ─────────────────────────────
   One list: a table on a wide screen, a card per row on a narrow one,
   with the status in words in the colour of its tone, a filter by status
   and, in each row, one action in words and a menu for the rest. ──────── */

.dataset-table thead th {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--dataset-muted);
    white-space: nowrap;
}

.dataset-filter {
    gap: 0.25rem;
}

.dataset-filter .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
}

.dataset-filter-count {
    min-width: 1.5rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: var(--bs-secondary-bg, #e9ecef);
    color: var(--bs-body-color, #1f2933);
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
}

.dataset-filter .nav-link.active .dataset-filter-count {
    background: rgba(255, 255, 255, 0.25);
    color: inherit;
}

.dataset-list-table td {
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
}

.dataset-list-title {
    min-width: 16rem;
    max-width: 32rem;
}

.dataset-list-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.75rem;
    margin-top: 0.15rem;
    font-size: 0.8125rem;
    color: var(--dataset-muted);
}

.dataset-list-note {
    display: flex;
    gap: 0.35rem;
    align-items: flex-start;
    margin: 0.4rem 0 0;
    font-size: 0.8125rem;
    color: var(--dataset-muted);
}

.dataset-list-note .splent-icon {
    flex: none;
    margin-top: 0.15rem;
}

.dataset-list-note-danger {
    color: var(--bs-danger-text-emphasis, #842029);
}

.dataset-list-note-warning {
    color: var(--bs-warning-text-emphasis, #664d03);
}

.dataset-list-pid {
    max-width: 14rem;
    font-size: 0.875rem;
}

.dataset-row-actions {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

.dataset-row-actions .btn {
    white-space: nowrap;
}

/* The menu's button as tall as the action beside it. */
.dataset-row-actions .dropdown {
    display: flex;
}

.dataset-row-actions .dataset-icon-btn {
    width: 2.25rem;
    height: auto;
}

.dataset-row-actions form {
    margin: 0;
}

.dataset-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.15rem 0.6rem;
    border: 1px solid;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
}

.dataset-status::before {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: currentColor;
}

.dataset-status-neutral {
    color: var(--bs-secondary-text-emphasis, #2b2f32);
    background: var(--bs-secondary-bg-subtle, #e2e3e5);
    border-color: var(--bs-secondary-border-subtle, #c4c8cb);
}

.dataset-status-success {
    color: var(--bs-success-text-emphasis, #0a3622);
    background: var(--bs-success-bg-subtle, #d1e7dd);
    border-color: var(--bs-success-border-subtle, #a3cfbb);
}

.dataset-status-info {
    color: var(--bs-info-text-emphasis, #055160);
    background: var(--bs-info-bg-subtle, #cff4fc);
    border-color: var(--bs-info-border-subtle, #9eeaf9);
}

.dataset-status-warning {
    color: var(--bs-warning-text-emphasis, #664d03);
    background: var(--bs-warning-bg-subtle, #fff3cd);
    border-color: var(--bs-warning-border-subtle, #ffe69c);
}

.dataset-status-danger {
    color: var(--bs-danger-text-emphasis, #58151c);
    background: var(--bs-danger-bg-subtle, #f8d7da);
    border-color: var(--bs-danger-border-subtle, #f1aeb5);
}

.dataset-list-empty p {
    max-width: 32rem;
}

/* The publish dialog's summary of the draft. */
.dataset-publish-summary {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0.75rem 1rem;
    border: 1px solid var(--bs-border-color, #dbdfe9);
    border-radius: 6px;
}

.dataset-publish-summary > div {
    display: grid;
    grid-template-columns: 6rem 1fr;
    gap: 0.75rem;
}

.dataset-publish-summary dt {
    font-weight: 600;
    color: var(--bs-secondary-color, #64748b);
}

.dataset-publish-summary dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.dataset-publish-declaration {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--bs-border-color, #dbdfe9);
    border-radius: 6px;
}

.dataset-publish-declaration .form-check-input {
    flex: none;
    margin: 0.1rem 0 0;
}

.dataset-publish-changes {
    margin-top: 0.75rem;
    font-size: 0.875rem;
    overflow-wrap: anywhere;
}

/* A card per row on a narrow screen: each cell under its column's name. */
@media (max-width: 767.98px) {
    .dataset-list-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .dataset-list-table,
    .dataset-list-table tbody,
    .dataset-list-table tr,
    .dataset-list-table td {
        display: block;
        width: 100%;
        max-width: none;
    }

    .dataset-list-table tr {
        padding: 0.85rem 1rem;
        border-bottom: 1px solid var(--bs-border-color, #dbdfe9);
    }

    .dataset-list-table td {
        padding: 0.2rem 0;
        border: 0;
    }

    .dataset-list-table td[data-label] {
        display: flex;
        gap: 0.75rem;
        align-items: baseline;
    }

    .dataset-list-table td[data-label]::before {
        content: attr(data-label);
        flex: none;
        width: 7rem;
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--dataset-muted);
    }

    .dataset-list-title {
        min-width: 0;
        padding-bottom: 0.5rem !important;
    }

    .dataset-row-actions {
        justify-content: flex-start;
        padding-top: 0.5rem;
    }
}

/* ── Dataset page (dataset/view_dataset.html) ─────────────────────────────
   Laid out as a repository's: the header (the title and its state, one
   line of what it is, Download and Cite at the right), the main column
   (the files, the description as the README, the sections other features
   add) and About at the right, which folds under the header on a screen
   narrower than xl. The headings of About, the README and the BibTeX
   dialogs. ─────────────────────────────────────────────────────────── */

.dataset-view {
    --dataset-gap: var(--hub-card-gap, 1.25rem);
    --dataset-card-bg: var(--hub-surface, var(--bs-body-bg, #ffffff));
    --dataset-tint: color-mix(in srgb, currentColor 8%, transparent);
}

.dataset-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    margin-bottom: var(--dataset-gap);
}

.dataset-header-main {
    flex: 1 1 26rem;
    min-width: 0;
}

.dataset-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.75rem;
    margin-bottom: 0.45rem;
}

.dataset-title {
    margin: 0;
    color: var(--dataset-text);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.dataset-header-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 0.4rem;
    margin: 0;
    padding: 0;
    color: var(--dataset-muted);
    list-style: none;
}

.dataset-header-meta > li {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
}

/* A dot between the facts, which a screen reader does not read. */
.dataset-header-meta > li + li::before {
    content: "·";
    content: "·" / "";
    margin: 0 0.2rem 0 0.55rem;
}

.dataset-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

/* A secondary action of the header (citation's Cite) stands out of the
   page's background as a button. */
.dataset-header-actions .btn-light {
    border-color: var(--dataset-border);
    background: var(--dataset-card-bg);
}

.dataset-header-actions .btn-light:hover,
.dataset-header-actions .btn-light:focus-visible {
    border-color: var(--dataset-primary);
    color: var(--dataset-primary);
}

/* The small pill of the header's line. */
.dataset-doi--compact .doi-pill {
    height: 24px;
    font-size: 0.75rem;
}

.dataset-doi--compact .doi-pill-value {
    line-height: 24px;
}

.dataset-layout {
    display: flex;
    flex-direction: column;
    gap: var(--dataset-gap);
}

.dataset-main {
    display: flex;
    flex-direction: column;
    gap: var(--dataset-gap);
    min-width: 0;
}

.dataset-main > .card {
    margin: 0;
}

/* About: a button that unfolds it under the header, below xl. */
.dataset-about-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.7rem 1rem;
    border: 1px solid var(--dataset-border);
    border-radius: var(--hub-radius-lg, 0.5rem);
    background: var(--dataset-card-bg);
    color: var(--dataset-text);
    font-weight: 600;
    text-align: left;
}

.dataset-about-toggle:hover,
.dataset-about-toggle:focus-visible {
    border-color: var(--dataset-primary);
    color: var(--dataset-text);
}

.dataset-about-caret {
    margin-left: auto;
    transition: transform 0.15s ease;
}

.dataset-about-toggle[aria-expanded="true"] .dataset-about-caret {
    transform: rotate(180deg);
}

.dataset-about-card {
    margin-top: 0.5rem;
}

.dataset-about-card > .card-body {
    padding: 1.25rem;
}

.dataset-about-title {
    margin: 0 0 0.25rem;
    color: var(--dataset-text);
    font-size: 1.08rem;
    font-weight: 700;
}

.dataset-about-section {
    padding: 1rem 0;
    border-top: 1px solid var(--dataset-border);
}

.dataset-about-title + .dataset-about-section {
    padding-top: 0.6rem;
    border-top: 0;
}

.dataset-about-section:last-child {
    padding-bottom: 0;
}

/* The tombstone's headings (dataset/tombstone.html) read as About's. */
.dataset-about-label,
.dataset-meta-label {
    margin: 0 0 0.55rem;
    color: var(--dataset-muted);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.dataset-about-muted {
    color: var(--dataset-muted);
    font-weight: 400;
}

.dataset-about-aside {
    display: inline-flex;
    align-items: center;
    margin-top: 0.65rem;
    color: var(--dataset-muted);
    font-size: 0.92em;
}

/* A sentence, not a link with its icon: it wraps, and a long DOI breaks
   where it has to instead of running out of the column. */
p.dataset-about-aside {
    display: block;
    overflow-wrap: anywhere;
}

a.dataset-about-aside {
    text-decoration: none;
}

a.dataset-about-aside:hover {
    color: var(--dataset-text);
    text-decoration: underline;
}

.dataset-authors,
.dataset-tags,
.dataset-versions,
.dataset-links {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dataset-authors {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.dataset-author {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 0.35rem;
    min-width: 0;
    line-height: 1.35;
}

.dataset-author-name {
    font-weight: 600;
}

.dataset-author-orcid {
    display: inline-flex;
    border-radius: 50%;
}

.dataset-author-affiliation {
    flex-basis: 100%;
    color: var(--dataset-muted);
    font-size: 0.92em;
}

.dataset-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.dataset-tag {
    padding: 0.15rem 0.65rem;
    border-radius: 2rem;
    background: var(--dataset-tint);
    color: var(--dataset-text);
    font-size: 0.9em;
    font-weight: 500;
}

.dataset-about-facts {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin: 0;
}

.dataset-about-facts > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.dataset-about-facts dt {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--dataset-muted);
    font-weight: 400;
}

.dataset-about-facts dd {
    margin: 0;
    font-weight: 600;
    text-align: right;
}

.dataset-versions {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.dataset-version {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.92em;
}

.dataset-links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.dataset-links a,
.dataset-links .btn-link {
    display: inline-flex;
    align-items: center;
    font-size: inherit;
    text-decoration: none;
}

.dataset-links a:hover,
.dataset-links .btn-link:hover {
    text-decoration: underline;
}

/* What the features add to About (rating's community rating) takes the
   section's spacing, and its heading reads as About's. */
.dataset-about-extra {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.dataset-about-extra > * {
    margin-bottom: 0 !important;
}

.dataset-about-extra label.form-label {
    margin-bottom: 0.55rem !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.04em;
}

.dataset-owner-buttons {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
}

.dataset-owner-buttons > .btn,
.dataset-owner-buttons > form > .btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    text-align: left;
}

.dataset-owner-buttons > .badge {
    align-self: flex-start;
}

/* The README: the description the width of the main column. */
.dataset-readme-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--dataset-border);
    color: var(--dataset-muted);
}

.dataset-readme-title {
    margin: 0;
    color: var(--dataset-text);
    font-size: 1rem;
    font-weight: 600;
}

.dataset-readme-body {
    padding: 1.25rem 1.5rem;
    font-size: 1.05rem;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.dataset-readme-body > :last-child {
    margin-bottom: 0;
}

/* Code in its text in the text's colour on a tint, as a repository's README
   shows it, so it reads on either mode. */
.dataset-readme-body :not(pre) > code {
    padding: 0.1em 0.35em;
    border-radius: 0.3rem;
    background: var(--dataset-tint);
    color: inherit;
    font-size: 0.88em;
}

.dataset-readme-body pre {
    background: var(--dataset-tint);
}

/* Below xl, About folds under the header and names itself on its button. */
@media (max-width: 1199.98px) {
    .dataset-about-title {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .dataset-about-title + .dataset-about-section {
        padding-top: 0;
    }
}

/* From xl on, About is the column at the right, always open. */
@media (min-width: 1200px) {
    .dataset-layout {
        display: grid;
        grid-template-areas: "main about";
        grid-template-columns: minmax(0, 1fr) 280px;
        align-items: start;
    }

    .dataset-main {
        grid-area: main;
    }

    .dataset-about {
        grid-area: about;
    }

    .dataset-about-toggle {
        display: none;
    }

    .dataset-about-collapse {
        display: block !important;
        height: auto !important;
    }

    .dataset-about-card {
        margin-top: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dataset-about-caret {
        transition: none;
    }
}

/* What a description's Markdown writes (descriptions.py): headings from h4
   on, code, quotes and tables, at the size of the text around them. */
:is(.dataset-description-body, .dataset-description-preview, .datasets-home-description) :is(h4, h5, h6) {
    margin: 0.75rem 0 0.375rem;
    font-size: 1em;
    font-weight: 700;
}

:is(.dataset-description-body, .dataset-description-preview, .datasets-home-description) pre {
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    background-color: var(--bs-tertiary-bg, #f8f9fa);
    font-size: 0.85em;
    white-space: pre-wrap;
}

:is(.dataset-description-body, .dataset-description-preview, .datasets-home-description) blockquote {
    margin: 0 0 0.5rem;
    padding-left: 0.75rem;
    border-left: 3px solid var(--bs-border-color, #dee2e6);
    color: var(--dataset-muted);
}

:is(.dataset-description-body, .dataset-description-preview, .datasets-home-description) table {
    margin-bottom: 0.5rem;
    border-collapse: collapse;
}

:is(.dataset-description-body, .dataset-description-preview, .datasets-home-description) :is(th, td) {
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
}

/* The form's description: its Markdown, and the preview the server renders
   in its place. */
.dataset-description-source {
    font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.875rem;
}

.dataset-description-preview {
    min-height: 15rem;
    height: auto;
    overflow-wrap: anywhere;
}

.dataset-description-preview > :last-child {
    margin-bottom: 0;
}

.dataset-bibtex-mark {
    font-family: Georgia, serif;
    letter-spacing: 0.05em;
}

.dataset-code-block {
    max-height: 400px;
    overflow-y: auto;
    font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.85rem;
}

/* An option of the BibTeX dialog turns solid blue under the pointer, and
   its heading, text and icon, which keep their own colours, turn white. */
.dataset-export-option:hover,
.dataset-export-option:focus,
.dataset-export-option:active {
    color: #fff;
}

.dataset-export-option:hover :is(h6, p, .dataset-icon),
.dataset-export-option:focus :is(h6, p, .dataset-icon),
.dataset-export-option:active :is(h6, p, .dataset-icon) {
    color: #fff !important;
}

/* ORCID's iD in its own green, as ORCID's brand guidelines ask. */
.orcid-icon {
    color: #a6ce39;
}

/* ── The review step of the upload and edit forms (summary_view.js) ──────
   One block per step, with its Change button; each row a label and its
   value, side by side, one under the other on a phone. Colours from
   Bootstrap's variables, so the light and dark modes both read. */
.dataset-review {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.dataset-review-block {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    background-color: var(--bs-body-bg);
}

.dataset-review-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.dataset-review-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.dataset-review-change {
    padding: 0;
    font-weight: 600;
}

.dataset-review-rows {
    margin: 0;
    padding: 0 1rem;
}

.dataset-review-row {
    display: grid;
    grid-template-columns: minmax(8rem, 11rem) 1fr;
    gap: .25rem 1.5rem;
    padding: .75rem 0;
    border-bottom: 1px dashed var(--bs-border-color);
}

.dataset-review-row:last-child {
    border-bottom: 0;
}

.dataset-review-row > dt {
    font-weight: 500;
    color: var(--bs-secondary-color);
}

.dataset-review-row > dd {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
}

.dataset-review-row .dataset-summary-description > :last-child {
    margin-bottom: 0;
}

.dataset-review-files {
    margin: .35rem 0 0;
    padding: 0;
    list-style: none;
    font-family: var(--bs-font-monospace);
    font-size: .85rem;
}

.dataset-review-authors {
    margin: 0;
    padding-left: 1.25rem;
}

.dataset-review-authors > li + li {
    margin-top: .35rem;
}

.dataset-review-authors > li > * + * {
    margin-left: .5rem;
}

.dataset-review-orcid {
    font-family: var(--bs-font-monospace);
    font-size: .85rem;
    text-decoration: none;
}

.dataset-review-orcid .orcid-icon {
    width: 1em;
    height: 1em;
}

@media (max-width: 575.98px) {
    .dataset-review-row {
        grid-template-columns: 1fr;
    }
}

/* On a screen too narrow for the steps beside the form (below xl), only the
   current step shows, under its "Step 2 of 5", so the form is in view. */
@media (max-width: 1199.98px) {
    .dataset-stepper-nav .dataset-stepper-item:not(.current) {
        display: none;
    }
}

@media (min-width: 1200px) {
    .dataset-step-count {
        display: none;
    }
}