/*!
 * ============================================================
 * VORTEX OS
 * VORTEX Sovereign Glass
 * File    : /assets/css/sovereign-glass/vsg-atlas.css
 * Version : 1.0.0
 * Status  : Atlas Experience Edition
 * Standard: VSG-007
 * Requires:
 *   - vsg-foundations.css
 *   - vsg-motion.css
 *   - vsg-components.css
 *   - vsg-navigation.css
 *   - vsg-scenes.css
 *   - vsg-continuity.css
 * ============================================================
 *
 * Mission
 * ------------------------------------------------------------
 * Définir le langage visuel officiel du réseau documentaire
 * vivant Atlas.
 *
 * Ce fichier gouverne :
 *
 * - Atlas Scene ;
 * - Atlas Feed ;
 * - Atlas Composer ;
 * - Atlas Node Card ;
 * - Atlas Identity ;
 * - Atlas Institution ;
 * - Atlas Heritage ;
 * - Atlas Publication ;
 * - Atlas Contribution ;
 * - Atlas Relations ;
 * - Atlas Events ;
 * - Atlas Collections ;
 * - Atlas Search ;
 * - Atlas Graph ;
 * - niveaux de visibilité ;
 * - états hors connexion et synchronisation.
 *
 * Doctrine
 * ------------------------------------------------------------
 * Atlas n'est pas un réseau social contenant des documents.
 *
 * Atlas est un réseau documentaire possédant une dimension
 * sociale.
 *
 * Il ne relie pas seulement des personnes.
 * Il relie les traces qu'elles choisissent de préserver.
 *
 * Ce fichier ne contient aucune logique métier, aucun calcul
 * de continuité et aucune opération RDS.
 * ============================================================
 */


/* ============================================================
 * 1. ATLAS TOKENS
 * ============================================================
 */

:root {
    /* --------------------------------------------------------
     * 1.1 Identification
     * --------------------------------------------------------
     */

    --vsg-atlas-version: "1.0.0";


    /* --------------------------------------------------------
     * 1.2 Layout
     * --------------------------------------------------------
     */

    --vsg-atlas-feed-width:
        44rem;

    --vsg-atlas-aside-width:
        19rem;

    --vsg-atlas-composer-min-height:
        7rem;

    --vsg-atlas-node-padding:
        var(--vsg-space-5);

    --vsg-atlas-node-radius:
        var(--vsg-radius-2xl);

    --vsg-atlas-node-gap:
        var(--vsg-space-4);

    --vsg-atlas-feed-gap:
        var(--vsg-space-4);


    /* --------------------------------------------------------
     * 1.3 Identity
     * --------------------------------------------------------
     */

    --vsg-atlas-avatar-size:
        var(--vsg-avatar-size-md);

    --vsg-atlas-avatar-size-large:
        var(--vsg-avatar-size-lg);


    /* --------------------------------------------------------
     * 1.4 Surfaces
     * --------------------------------------------------------
     */

    --vsg-atlas-surface:
        linear-gradient(
            180deg,
            var(--vsg-glass-2),
            var(--vsg-glass-4)
        );

    --vsg-atlas-surface-raised:
        radial-gradient(
            circle at 100% 0%,
            var(--vsg-gold-surface-2),
            transparent 38%
        ),
        linear-gradient(
            180deg,
            var(--vsg-glass-3),
            var(--vsg-glass-4)
        );

    --vsg-atlas-relation-line:
        rgba(214, 177, 94, 0.22);


    /* --------------------------------------------------------
     * 1.5 Intent Colors
     * --------------------------------------------------------
     */

    --vsg-atlas-intent-preserve:
        var(--vsg-gold-200);

    --vsg-atlas-intent-present:
        var(--vsg-info);

    --vsg-atlas-intent-document:
        var(--vsg-neutral);

    --vsg-atlas-intent-transmit:
        var(--vsg-success);

    --vsg-atlas-intent-contribute:
        var(--vsg-warning);

    --vsg-atlas-intent-verify:
        var(--vsg-success);

    --vsg-atlas-intent-connect:
        var(--vsg-info);


    /* --------------------------------------------------------
     * 1.6 Visibility
     * --------------------------------------------------------
     */

    --vsg-atlas-private:
        var(--vsg-neutral);

    --vsg-atlas-trusted:
        var(--vsg-warning);

    --vsg-atlas-network:
        var(--vsg-info);

    --vsg-atlas-institutional:
        var(--vsg-gold-200);

    --vsg-atlas-public:
        var(--vsg-success);
}


/* ============================================================
 * 2. ATLAS SCENE
 * ============================================================
 */

.vsg-atlas-scene {
    position: relative;

    display: flex;
    flex-direction: column;

    width: 100%;
    min-height: 100%;

    isolation: isolate;
}

.vsg-atlas-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr);

    align-items: start;

    gap:
        var(--vsg-space-6);

    width: 100%;
}

.vsg-atlas-main {
    width: 100%;
    min-width: 0;
    max-width:
        var(--vsg-atlas-feed-width);

    margin-inline: auto;
}

.vsg-atlas-aside {
    display: none;

    min-width: 0;
}

.vsg-atlas-aside--sticky {
    position: sticky;

    top:
        calc(
            var(--vsg-scene-top-offset) +
            var(--vsg-space-4)
        );
}


/* ============================================================
 * 3. ATLAS HERO
 * ============================================================
 */

.vsg-atlas-hero {
    position: relative;

    display: grid;

    gap:
        var(--vsg-space-5);

    min-height: 14rem;

    padding:
        var(--vsg-space-6);

    overflow: hidden;

    border:
        1px solid
        var(--vsg-gold-line-2);

    border-radius:
        var(--vsg-radius-2xl);

    background:
        radial-gradient(
            circle at 92% 0%,
            var(--vsg-gold-surface-3),
            transparent 36%
        ),
        radial-gradient(
            circle at 5% 100%,
            rgba(83, 105, 153, 0.08),
            transparent 40%
        ),
        linear-gradient(
            180deg,
            rgba(18, 25, 39, 0.96),
            rgba(8, 12, 20, 0.99)
        );

    box-shadow:
        var(--vsg-shadow-inset-top),
        var(--vsg-shadow-inset-gold),
        var(--vsg-shadow-lg),
        var(--vsg-gold-glow-sm);

    isolation: isolate;
}

.vsg-atlas-hero::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 0;

    pointer-events: none;

    background:
        var(--vsg-glass-highlight);
}

.vsg-atlas-hero > * {
    position: relative;
    z-index: 1;
}

.vsg-atlas-hero-kicker {
    margin: 0;

    color:
        var(--vsg-text-gold);

    font-size:
        var(--vsg-font-size-2xs);

    font-weight:
        var(--vsg-font-weight-extrabold);

    letter-spacing:
        var(--vsg-tracking-widest);

    text-transform: uppercase;
}

.vsg-atlas-hero-title {
    max-width: 14ch;

    margin: 0;

    color:
        var(--vsg-text-primary);

    font-size:
        clamp(
            var(--vsg-font-size-2xl),
            8vw,
            var(--vsg-font-size-4xl)
        );

    font-weight:
        var(--vsg-font-weight-black);

    line-height:
        var(--vsg-line-height-none);

    letter-spacing:
        var(--vsg-tracking-tight);
}

.vsg-atlas-hero-description {
    max-width: 40rem;

    margin: 0;

    color:
        var(--vsg-text-secondary);

    font-size:
        var(--vsg-font-size-md);

    line-height:
        var(--vsg-line-height-relaxed);
}

.vsg-atlas-hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap:
        var(--vsg-space-3);
}


/* ============================================================
 * 4. ATLAS FEED
 * ============================================================
 */

.vsg-atlas-feed {
    display: flex;
    flex-direction: column;

    gap:
        var(--vsg-atlas-feed-gap);

    width: 100%;
}

.vsg-atlas-feed-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap:
        var(--vsg-space-3);
}

.vsg-atlas-feed-title {
    margin: 0;

    color:
        var(--vsg-text-primary);

    font-size:
        var(--vsg-font-size-xl);

    font-weight:
        var(--vsg-font-weight-extrabold);
}

.vsg-atlas-feed-description {
    margin-top:
        var(--vsg-space-1);

    color:
        var(--vsg-text-tertiary);

    font-size:
        var(--vsg-font-size-sm);
}

.vsg-atlas-feed-end {
    display: grid;

    justify-items: center;

    gap:
        var(--vsg-space-3);

    padding:
        var(--vsg-space-8)
        var(--vsg-space-4);

    color:
        var(--vsg-text-tertiary);

    text-align: center;
}

.vsg-atlas-feed-end-icon {
    display: grid;
    place-items: center;

    width: 3rem;
    height: 3rem;

    border:
        1px solid
        var(--vsg-gold-line-2);

    border-radius:
        var(--vsg-radius-xl);

    color:
        var(--vsg-text-gold);

    background:
        var(--vsg-gold-surface-1);
}


/* ============================================================
 * 5. ATLAS COMPOSER
 * ============================================================
 */

.vsg-atlas-composer {
    position: relative;

    display: grid;

    grid-template-columns:
        auto
        minmax(0, 1fr)
        auto;

    align-items: start;

    gap:
        var(--vsg-space-3);

    min-height:
        var(--vsg-atlas-composer-min-height);

    padding:
        var(--vsg-space-4);

    overflow: hidden;

    border:
        1px solid
        var(--vsg-gold-line-2);

    border-radius:
        var(--vsg-radius-2xl);

    background:
        var(--vsg-atlas-surface-raised);

    box-shadow:
        var(--vsg-shadow-inset-top),
        var(--vsg-shadow-md),
        var(--vsg-gold-glow-sm);

    transition:
        var(--vsg-transition-surface);
}

.vsg-atlas-composer:focus-within {
    border-color:
        var(--vsg-gold-line-3);

    box-shadow:
        var(--vsg-focus-ring),
        var(--vsg-shadow-lg),
        var(--vsg-gold-glow-md);
}

.vsg-atlas-composer-avatar {
    display: grid;
    place-items: center;

    width:
        var(--vsg-atlas-avatar-size);

    height:
        var(--vsg-atlas-avatar-size);

    overflow: hidden;

    border:
        1px solid
        var(--vsg-gold-line-2);

    border-radius:
        var(--vsg-radius-lg);

    color:
        var(--vsg-text-gold);

    background:
        var(--vsg-gold-surface-1);

    font-weight:
        var(--vsg-font-weight-black);
}

.vsg-atlas-composer-avatar img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.vsg-atlas-composer-main {
    min-width: 0;
}

.vsg-atlas-composer-prompt {
    width: 100%;
    min-height: 3rem;

    padding:
        var(--vsg-space-3);

    border:
        1px solid
        var(--vsg-line-1);

    border-radius:
        var(--vsg-radius-lg);

    color:
        var(--vsg-text-secondary);

    background:
        var(--vsg-surface-1);

    font-size:
        var(--vsg-font-size-md);

    line-height:
        var(--vsg-line-height-relaxed);

    cursor: text;
}

.vsg-atlas-composer-prompt::placeholder {
    color:
        var(--vsg-text-muted);
}

.vsg-atlas-composer-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap:
        var(--vsg-space-2);

    margin-top:
        var(--vsg-space-3);
}

.vsg-atlas-composer-types {
    display: flex;

    gap:
        var(--vsg-space-2);

    overflow-x: auto;

    padding-bottom:
        var(--vsg-space-1);

    scrollbar-width:
        none;
}

.vsg-atlas-composer-types::-webkit-scrollbar {
    display: none;
}

.vsg-atlas-composer-type {
    display: inline-flex;
    align-items: center;

    gap:
        var(--vsg-space-2);

    flex: 0 0 auto;

    min-height:
        var(--vsg-control-height-sm);

    padding:
        var(--vsg-space-2)
        var(--vsg-space-3);

    border:
        1px solid
        var(--vsg-line-1);

    border-radius:
        var(--vsg-radius-pill);

    color:
        var(--vsg-text-tertiary);

    background:
        var(--vsg-surface-1);

    font-size:
        var(--vsg-font-size-xs);

    font-weight:
        var(--vsg-font-weight-semibold);

    transition:
        var(--vsg-transition-control);
}

.vsg-atlas-composer-type[aria-pressed="true"],
.vsg-atlas-composer-type.is-active {
    color:
        var(--vsg-text-gold);

    border-color:
        var(--vsg-gold-line-3);

    background:
        var(--vsg-gold-surface-2);

    box-shadow:
        var(--vsg-gold-glow-sm);
}


/* ============================================================
 * 6. ATLAS NODE
 * ============================================================
 */

.vsg-atlas-node {
    --vsg-atlas-intent-color:
        var(--vsg-text-gold);

    position: relative;

    display: grid;

    gap:
        var(--vsg-atlas-node-gap);

    width: 100%;

    padding:
        var(--vsg-atlas-node-padding);

    overflow: hidden;

    border:
        1px solid
        var(--vsg-line-1);

    border-radius:
        var(--vsg-atlas-node-radius);

    background:
        var(--vsg-atlas-surface);

    box-shadow:
        var(--vsg-shadow-inset-top),
        var(--vsg-shadow-md);

    transition:
        var(--vsg-transition-surface);

    isolation: isolate;
}

.vsg-atlas-node::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 0;

    pointer-events: none;

    background:
        var(--vsg-glass-highlight);
}

.vsg-atlas-node > * {
    position: relative;
    z-index: 1;
}

.vsg-atlas-node[data-intent="preserve"] {
    --vsg-atlas-intent-color:
        var(--vsg-atlas-intent-preserve);
}

.vsg-atlas-node[data-intent="present"] {
    --vsg-atlas-intent-color:
        var(--vsg-atlas-intent-present);
}

.vsg-atlas-node[data-intent="document"] {
    --vsg-atlas-intent-color:
        var(--vsg-atlas-intent-document);
}

.vsg-atlas-node[data-intent="transmit"] {
    --vsg-atlas-intent-color:
        var(--vsg-atlas-intent-transmit);
}

.vsg-atlas-node[data-intent="contribute"] {
    --vsg-atlas-intent-color:
        var(--vsg-atlas-intent-contribute);
}

.vsg-atlas-node[data-intent="verify"] {
    --vsg-atlas-intent-color:
        var(--vsg-atlas-intent-verify);
}

.vsg-atlas-node[data-intent="connect"] {
    --vsg-atlas-intent-color:
        var(--vsg-atlas-intent-connect);
}


/* ============================================================
 * 7. NODE HEADER
 * ============================================================
 */

.vsg-atlas-node-header {
    display: grid;

    grid-template-columns:
        auto
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap:
        var(--vsg-space-3);
}

.vsg-atlas-node-avatar {
    display: grid;
    place-items: center;

    width:
        var(--vsg-atlas-avatar-size);

    height:
        var(--vsg-atlas-avatar-size);

    overflow: hidden;

    border:
        1px solid
        var(--vsg-gold-line-2);

    border-radius:
        var(--vsg-radius-lg);

    color:
        var(--vsg-text-gold);

    background:
        var(--vsg-gold-surface-1);

    font-size:
        var(--vsg-font-size-md);

    font-weight:
        var(--vsg-font-weight-black);
}

.vsg-atlas-node-avatar img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.vsg-atlas-node-identity {
    min-width: 0;
}

.vsg-atlas-node-name-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap:
        var(--vsg-space-2);
}

.vsg-atlas-node-name {
    min-width: 0;

    color:
        var(--vsg-text-primary);

    font-size:
        var(--vsg-font-size-md);

    font-weight:
        var(--vsg-font-weight-bold);

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;
}

.vsg-atlas-node-identity-meta {
    margin-top:
        var(--vsg-space-1);

    color:
        var(--vsg-text-muted);

    font-size:
        var(--vsg-font-size-xs);

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;
}

.vsg-atlas-node-menu {
    align-self: start;
}


/* ============================================================
 * 8. IDENTITY BADGE
 * ============================================================
 */

.vsg-atlas-identity-badge {
    display: inline-flex;
    align-items: center;

    gap:
        var(--vsg-space-1);

    min-height: 1.5rem;

    padding:
        0
        var(--vsg-space-2);

    border:
        1px solid
        var(--vsg-info-line);

    border-radius:
        var(--vsg-radius-pill);

    color:
        var(--vsg-info);

    background:
        var(--vsg-info-surface);

    font-size:
        var(--vsg-font-size-2xs);

    font-weight:
        var(--vsg-font-weight-bold);
}

.vsg-atlas-identity-badge[data-verification="verified"] {
    color:
        var(--vsg-success);

    border-color:
        var(--vsg-success-line);

    background:
        var(--vsg-success-surface);
}

.vsg-atlas-identity-badge[
    data-verification="declared"
] {
    color:
        var(--vsg-warning);

    border-color:
        var(--vsg-warning-line);

    background:
        var(--vsg-warning-surface);
}

.vsg-atlas-identity-badge[
    data-verification="unknown"
] {
    color:
        var(--vsg-neutral);

    border-color:
        var(--vsg-neutral-line);

    background:
        var(--vsg-neutral-surface);
}


/* ============================================================
 * 9. NODE INTENT
 * ============================================================
 */

.vsg-atlas-node-intent {
    display: inline-flex;
    align-items: center;

    gap:
        var(--vsg-space-2);

    width: fit-content;

    color:
        var(--vsg-atlas-intent-color);

    font-size:
        var(--vsg-font-size-2xs);

    font-weight:
        var(--vsg-font-weight-extrabold);

    letter-spacing:
        var(--vsg-tracking-widest);

    text-transform: uppercase;
}

.vsg-atlas-node-intent-icon {
    display: grid;
    place-items: center;

    width: 1.5rem;
    height: 1.5rem;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--vsg-atlas-intent-color) 28%,
            transparent
        );

    border-radius:
        var(--vsg-radius-sm);

    background:
        color-mix(
            in srgb,
            var(--vsg-atlas-intent-color) 8%,
            transparent
        );
}


/* ============================================================
 * 10. NODE CONTENT
 * ============================================================
 */

.vsg-atlas-node-content {
    display: grid;

    gap:
        var(--vsg-space-3);
}

.vsg-atlas-node-title {
    margin: 0;

    color:
        var(--vsg-text-primary);

    font-size:
        clamp(
            var(--vsg-font-size-lg),
            5vw,
            var(--vsg-font-size-xl)
        );

    font-weight:
        var(--vsg-font-weight-extrabold);

    line-height:
        var(--vsg-line-height-tight);

    letter-spacing:
        -0.018em;
}

.vsg-atlas-node-description {
    margin: 0;

    color:
        var(--vsg-text-secondary);

    font-size:
        var(--vsg-font-size-md);

    line-height:
        var(--vsg-line-height-relaxed);
}

.vsg-atlas-node-metadata {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap:
        var(--vsg-space-2)
        var(--vsg-space-4);

    color:
        var(--vsg-text-tertiary);

    font-size:
        var(--vsg-font-size-sm);
}

.vsg-atlas-node-metadata-item {
    display: inline-flex;
    align-items: center;

    gap:
        var(--vsg-space-1);
}


/* ============================================================
 * 11. NODE PREVIEW
 * ============================================================
 */

.vsg-atlas-preview {
    position: relative;

    display: grid;

    gap:
        var(--vsg-space-3);

    overflow: hidden;

    border:
        1px solid
        var(--vsg-line-1);

    border-radius:
        var(--vsg-radius-xl);

    background:
        var(--vsg-bg-3);
}

.vsg-atlas-preview-media {
    position: relative;

    display: grid;
    place-items: center;

    min-height: 11rem;

    overflow: hidden;

    color:
        var(--vsg-text-gold);

    background:
        radial-gradient(
            circle at 82% 0%,
            var(--vsg-gold-surface-3),
            transparent 42%
        ),
        linear-gradient(
            145deg,
            var(--vsg-bg-4),
            var(--vsg-bg-2)
        );
}

.vsg-atlas-preview-media img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.vsg-atlas-preview-body {
    display: grid;

    gap:
        var(--vsg-space-2);

    padding:
        var(--vsg-space-4);
}

.vsg-atlas-preview-type {
    color:
        var(--vsg-text-gold);

    font-size:
        var(--vsg-font-size-2xs);

    font-weight:
        var(--vsg-font-weight-extrabold);

    letter-spacing:
        var(--vsg-tracking-widest);

    text-transform: uppercase;
}

.vsg-atlas-preview-title {
    margin: 0;

    color:
        var(--vsg-text-primary);

    font-size:
        var(--vsg-font-size-lg);

    font-weight:
        var(--vsg-font-weight-bold);

    line-height:
        var(--vsg-line-height-tight);
}

.vsg-atlas-preview-description {
    margin: 0;

    color:
        var(--vsg-text-tertiary);

    font-size:
        var(--vsg-font-size-sm);

    line-height:
        var(--vsg-line-height-relaxed);
}

.vsg-atlas-preview-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;

    gap:
        var(--vsg-space-3);

    padding:
        0
        var(--vsg-space-4)
        var(--vsg-space-4);
}


/* ============================================================
 * 12. NODE ACTIONS
 * ============================================================
 */

.vsg-atlas-node-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;

    gap:
        var(--vsg-space-2);

    padding-top:
        var(--vsg-space-3);

    border-top:
        1px solid
        var(--vsg-line-1);
}

.vsg-atlas-node-action-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap:
        var(--vsg-space-1);
}

.vsg-atlas-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap:
        var(--vsg-space-2);

    min-height:
        var(--vsg-control-height-sm);

    padding:
        var(--vsg-space-2)
        var(--vsg-space-3);

    border:
        1px solid
        transparent;

    border-radius:
        var(--vsg-radius-pill);

    color:
        var(--vsg-text-tertiary);

    background:
        transparent;

    font-size:
        var(--vsg-font-size-xs);

    font-weight:
        var(--vsg-font-weight-semibold);

    transition:
        var(--vsg-transition-control);
}

.vsg-atlas-action:hover,
.vsg-atlas-action:focus-visible {
    color:
        var(--vsg-text-primary);

    border-color:
        var(--vsg-line-1);

    background:
        var(--vsg-surface-2);
}

.vsg-atlas-action[aria-pressed="true"],
.vsg-atlas-action.is-active {
    color:
        var(--vsg-text-gold);

    border-color:
        var(--vsg-gold-line-2);

    background:
        var(--vsg-gold-surface-1);
}

.vsg-atlas-action--primary {
    color:
        var(--vsg-text-gold);

    border-color:
        var(--vsg-gold-line-2);

    background:
        var(--vsg-gold-surface-1);
}


/* ============================================================
 * 13. RECOGNITION
 * ============================================================
 */

.vsg-atlas-recognition {
    display: flex;
    align-items: center;

    gap:
        var(--vsg-space-2);

    color:
        var(--vsg-text-tertiary);

    font-size:
        var(--vsg-font-size-xs);
}

.vsg-atlas-recognition-avatars {
    display: flex;
    align-items: center;
}

.vsg-atlas-recognition-avatar {
    display: grid;
    place-items: center;

    width: 1.75rem;
    height: 1.75rem;

    margin-left: -0.4rem;

    overflow: hidden;

    border:
        2px solid
        var(--vsg-bg-2);

    border-radius:
        var(--vsg-radius-pill);

    color:
        var(--vsg-text-gold);

    background:
        var(--vsg-bg-4);

    font-size:
        var(--vsg-font-size-2xs);

    font-weight:
        var(--vsg-font-weight-bold);
}

.vsg-atlas-recognition-avatar:first-child {
    margin-left: 0;
}


/* ============================================================
 * 14. CONTRIBUTION
 * ============================================================
 */

.vsg-atlas-contribution {
    --vsg-atlas-contribution-color:
        var(--vsg-info);

    --vsg-atlas-contribution-surface:
        var(--vsg-info-surface);

    --vsg-atlas-contribution-line:
        var(--vsg-info-line);

    display: grid;

    grid-template-columns:
        auto
        minmax(0, 1fr);

    gap:
        var(--vsg-space-3);

    padding:
        var(--vsg-space-4);

    border:
        1px solid
        var(--vsg-atlas-contribution-line);

    border-radius:
        var(--vsg-radius-xl);

    background:
        linear-gradient(
            135deg,
            var(--vsg-atlas-contribution-surface),
            transparent 72%
        ),
        var(--vsg-surface-1);
}

.vsg-atlas-contribution[data-contribution="correction"] {
    --vsg-atlas-contribution-color:
        var(--vsg-warning);

    --vsg-atlas-contribution-surface:
        var(--vsg-warning-surface);

    --vsg-atlas-contribution-line:
        var(--vsg-warning-line);
}

.vsg-atlas-contribution[data-contribution="reference"],
.vsg-atlas-contribution[data-contribution="link"] {
    --vsg-atlas-contribution-color:
        var(--vsg-info);

    --vsg-atlas-contribution-surface:
        var(--vsg-info-surface);

    --vsg-atlas-contribution-line:
        var(--vsg-info-line);
}

.vsg-atlas-contribution[data-contribution="accepted"] {
    --vsg-atlas-contribution-color:
        var(--vsg-success);

    --vsg-atlas-contribution-surface:
        var(--vsg-success-surface);

    --vsg-atlas-contribution-line:
        var(--vsg-success-line);
}

.vsg-atlas-contribution-icon {
    display: grid;
    place-items: center;

    width: 2.5rem;
    height: 2.5rem;

    border:
        1px solid
        var(--vsg-atlas-contribution-line);

    border-radius:
        var(--vsg-radius-lg);

    color:
        var(--vsg-atlas-contribution-color);

    background:
        var(--vsg-atlas-contribution-surface);
}

.vsg-atlas-contribution-body {
    min-width: 0;
}

.vsg-atlas-contribution-type {
    color:
        var(--vsg-atlas-contribution-color);

    font-size:
        var(--vsg-font-size-2xs);

    font-weight:
        var(--vsg-font-weight-extrabold);

    letter-spacing:
        var(--vsg-tracking-widest);

    text-transform: uppercase;
}

.vsg-atlas-contribution-title {
    margin:
        var(--vsg-space-1)
        0
        0;

    color:
        var(--vsg-text-primary);

    font-size:
        var(--vsg-font-size-md);

    font-weight:
        var(--vsg-font-weight-bold);
}

.vsg-atlas-contribution-text {
    margin:
        var(--vsg-space-2)
        0
        0;

    color:
        var(--vsg-text-secondary);

    font-size:
        var(--vsg-font-size-sm);

    line-height:
        var(--vsg-line-height-relaxed);
}

.vsg-atlas-contribution-meta {
    display: flex;
    flex-wrap: wrap;

    gap:
        var(--vsg-space-2);

    margin-top:
        var(--vsg-space-3);

    color:
        var(--vsg-text-muted);

    font-size:
        var(--vsg-font-size-xs);
}


/* ============================================================
 * 15. RELATION CARD
 * ============================================================
 */

.vsg-atlas-relation {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto
        minmax(0, 1fr);

    align-items: center;

    gap:
        var(--vsg-space-3);

    padding:
        var(--vsg-space-4);

    border:
        1px solid
        var(--vsg-line-1);

    border-radius:
        var(--vsg-radius-xl);

    background:
        var(--vsg-surface-1);
}

.vsg-atlas-relation-node {
    min-width: 0;

    padding:
        var(--vsg-space-3);

    border:
        1px solid
        var(--vsg-line-1);

    border-radius:
        var(--vsg-radius-lg);

    background:
        var(--vsg-bg-3);
}

.vsg-atlas-relation-type {
    display: grid;
    justify-items: center;

    gap:
        var(--vsg-space-1);

    min-width: 4rem;

    color:
        var(--vsg-text-gold);

    font-size:
        var(--vsg-font-size-2xs);

    font-weight:
        var(--vsg-font-weight-bold);

    text-align: center;
}

.vsg-atlas-relation-line {
    width: 100%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--vsg-atlas-relation-line),
            transparent
        );
}

.vsg-atlas-relation-node-label {
    color:
        var(--vsg-text-muted);

    font-size:
        var(--vsg-font-size-2xs);

    font-weight:
        var(--vsg-font-weight-bold);

    letter-spacing:
        var(--vsg-tracking-wider);

    text-transform: uppercase;
}

.vsg-atlas-relation-node-title {
    margin-top:
        var(--vsg-space-1);

    color:
        var(--vsg-text-primary);

    font-size:
        var(--vsg-font-size-sm);

    font-weight:
        var(--vsg-font-weight-semibold);

    overflow-wrap:
        anywhere;
}


/* ============================================================
 * 16. ATLAS EVENT
 * ============================================================
 */

.vsg-atlas-event {
    display: grid;

    grid-template-columns:
        auto
        minmax(0, 1fr);

    gap:
        var(--vsg-space-3);

    padding:
        var(--vsg-space-4);

    border-left:
        2px solid
        var(--vsg-continuity-line);

    border-radius:
        0
        var(--vsg-radius-lg)
        var(--vsg-radius-lg)
        0;

    background:
        linear-gradient(
            90deg,
            var(--vsg-continuity-surface),
            transparent 78%
        );
}

.vsg-atlas-event-icon {
    display: grid;
    place-items: center;

    width: 2.25rem;
    height: 2.25rem;

    border:
        1px solid
        var(--vsg-continuity-line);

    border-radius:
        var(--vsg-radius-md);

    color:
        var(--vsg-continuity-color);

    background:
        var(--vsg-continuity-surface);
}

.vsg-atlas-event-title {
    margin: 0;

    color:
        var(--vsg-text-primary);

    font-size:
        var(--vsg-font-size-md);

    font-weight:
        var(--vsg-font-weight-bold);
}

.vsg-atlas-event-description {
    margin:
        var(--vsg-space-1)
        0
        0;

    color:
        var(--vsg-text-tertiary);

    font-size:
        var(--vsg-font-size-sm);

    line-height:
        var(--vsg-line-height-relaxed);
}

.vsg-atlas-event-date {
    margin-top:
        var(--vsg-space-2);

    color:
        var(--vsg-text-muted);

    font-size:
        var(--vsg-font-size-xs);
}


/* ============================================================
 * 17. INSTITUTION CARD
 * ============================================================
 */

.vsg-atlas-institution {
    display: grid;

    gap:
        var(--vsg-space-4);

    padding:
        var(--vsg-space-5);

    border:
        1px solid
        var(--vsg-gold-line-2);

    border-radius:
        var(--vsg-radius-2xl);

    background:
        radial-gradient(
            circle at 100% 0%,
            var(--vsg-gold-surface-3),
            transparent 40%
        ),
        var(--vsg-atlas-surface);

    box-shadow:
        var(--vsg-shadow-inset-top),
        var(--vsg-shadow-md);
}

.vsg-atlas-institution-header {
    display: grid;

    grid-template-columns:
        auto
        minmax(0, 1fr);

    align-items: center;

    gap:
        var(--vsg-space-4);
}

.vsg-atlas-institution-logo {
    display: grid;
    place-items: center;

    width: 4rem;
    height: 4rem;

    overflow: hidden;

    border:
        1px solid
        var(--vsg-gold-line-2);

    border-radius:
        var(--vsg-radius-xl);

    color:
        var(--vsg-text-gold);

    background:
        var(--vsg-gold-surface-1);

    font-weight:
        var(--vsg-font-weight-black);
}

.vsg-atlas-institution-logo img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.vsg-atlas-institution-name {
    margin: 0;

    color:
        var(--vsg-text-primary);

    font-size:
        var(--vsg-font-size-xl);

    font-weight:
        var(--vsg-font-weight-black);
}

.vsg-atlas-institution-type {
    margin-top:
        var(--vsg-space-1);

    color:
        var(--vsg-text-tertiary);

    font-size:
        var(--vsg-font-size-sm);
}

.vsg-atlas-institution-metrics {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        var(--vsg-space-3);
}


/* ============================================================
 * 18. COLLECTION CARD
 * ============================================================
 */

.vsg-atlas-collection {
    display: grid;

    gap:
        var(--vsg-space-3);

    padding:
        var(--vsg-space-4);

    border:
        1px solid
        var(--vsg-line-1);

    border-radius:
        var(--vsg-radius-xl);

    background:
        var(--vsg-surface-1);

    transition:
        var(--vsg-transition-surface);
}

.vsg-atlas-collection-cover {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        2px;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    border-radius:
        var(--vsg-radius-lg);

    background:
        var(--vsg-bg-3);
}

.vsg-atlas-collection-cover-item {
    display: grid;
    place-items: center;

    overflow: hidden;

    color:
        var(--vsg-text-gold);

    background:
        var(--vsg-gold-surface-1);
}

.vsg-atlas-collection-cover-item img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.vsg-atlas-collection-title {
    margin: 0;

    color:
        var(--vsg-text-primary);

    font-size:
        var(--vsg-font-size-lg);

    font-weight:
        var(--vsg-font-weight-bold);
}

.vsg-atlas-collection-meta {
    color:
        var(--vsg-text-tertiary);

    font-size:
        var(--vsg-font-size-sm);
}


/* ============================================================
 * 19. VISIBILITY BADGE
 * ============================================================
 */

.vsg-atlas-visibility {
    --vsg-atlas-visibility-color:
        var(--vsg-atlas-private);

    display: inline-flex;
    align-items: center;

    gap:
        var(--vsg-space-1);

    min-height: 1.5rem;

    padding:
        0
        var(--vsg-space-2);

    border:
        1px solid
        color-mix(
            in srgb,
            var(--vsg-atlas-visibility-color) 24%,
            transparent
        );

    border-radius:
        var(--vsg-radius-pill);

    color:
        var(--vsg-atlas-visibility-color);

    background:
        color-mix(
            in srgb,
            var(--vsg-atlas-visibility-color) 7%,
            transparent
        );

    font-size:
        var(--vsg-font-size-2xs);

    font-weight:
        var(--vsg-font-weight-semibold);
}

.vsg-atlas-visibility[data-visibility="private"] {
    --vsg-atlas-visibility-color:
        var(--vsg-atlas-private);
}

.vsg-atlas-visibility[data-visibility="trusted"] {
    --vsg-atlas-visibility-color:
        var(--vsg-atlas-trusted);
}

.vsg-atlas-visibility[data-visibility="network"] {
    --vsg-atlas-visibility-color:
        var(--vsg-atlas-network);
}

.vsg-atlas-visibility[
    data-visibility="institutional"
] {
    --vsg-atlas-visibility-color:
        var(--vsg-atlas-institutional);
}

.vsg-atlas-visibility[data-visibility="public"] {
    --vsg-atlas-visibility-color:
        var(--vsg-atlas-public);
}


/* ============================================================
 * 20. ATLAS SEARCH
 * ============================================================
 */

.vsg-atlas-search {
    display: grid;

    gap:
        var(--vsg-space-4);

    width: 100%;
}

.vsg-atlas-search-header {
    position: sticky;

    top:
        calc(
            var(--vsg-scene-top-offset) +
            var(--vsg-space-2)
        );

    z-index:
        var(--vsg-elevation-3);

    padding:
        var(--vsg-space-3);

    border:
        1px solid
        var(--vsg-line-1);

    border-radius:
        var(--vsg-radius-xl);

    background:
        var(--vsg-glass-4);

    box-shadow:
        var(--vsg-shadow-md);

    backdrop-filter:
        blur(var(--vsg-blur-xl))
        saturate(130%);

    -webkit-backdrop-filter:
        blur(var(--vsg-blur-xl))
        saturate(130%);
}

.vsg-atlas-search-filters {
    display: flex;

    gap:
        var(--vsg-space-2);

    overflow-x: auto;

    padding-bottom:
        var(--vsg-space-1);

    scrollbar-width:
        none;
}

.vsg-atlas-search-filters::-webkit-scrollbar {
    display: none;
}

.vsg-atlas-search-results {
    display: grid;

    gap:
        var(--vsg-space-4);
}

.vsg-atlas-search-group {
    display: grid;

    gap:
        var(--vsg-space-3);
}

.vsg-atlas-search-group-title {
    margin: 0;

    color:
        var(--vsg-text-gold);

    font-size:
        var(--vsg-font-size-xs);

    font-weight:
        var(--vsg-font-weight-extrabold);

    letter-spacing:
        var(--vsg-tracking-wider);

    text-transform: uppercase;
}


/* ============================================================
 * 21. ATLAS GRAPH
 * ============================================================
 */

.vsg-atlas-graph {
    position: relative;

    width: 100%;
    min-height: 28rem;

    overflow: hidden;

    border:
        1px solid
        var(--vsg-line-1);

    border-radius:
        var(--vsg-radius-2xl);

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(214, 177, 94, 0.05),
            transparent 45%
        ),
        linear-gradient(
            180deg,
            var(--vsg-bg-2),
            var(--vsg-bg-0)
        );

    box-shadow:
        var(--vsg-shadow-inset-top),
        var(--vsg-shadow-lg);
}

.vsg-atlas-graph::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: 0.22;

    background-image:
        linear-gradient(
            to right,
            var(--vsg-line-1) 1px,
            transparent 1px
        ),
        linear-gradient(
            to bottom,
            var(--vsg-line-1) 1px,
            transparent 1px
        );

    background-size:
        4rem 4rem;

    mask-image:
        radial-gradient(
            circle at center,
            #000,
            transparent 86%
        );
}

.vsg-atlas-graph-canvas {
    position: absolute;
    inset: 0;
}

.vsg-atlas-graph-node {
    position: absolute;

    display: grid;
    place-items: center;

    min-width: 7rem;
    min-height: 4rem;

    padding:
        var(--vsg-space-3);

    border:
        1px solid
        var(--vsg-gold-line-2);

    border-radius:
        var(--vsg-radius-xl);

    color:
        var(--vsg-text-primary);

    background:
        var(--vsg-glass-4);

    box-shadow:
        var(--vsg-shadow-md),
        var(--vsg-gold-glow-sm);

    text-align: center;
}

.vsg-atlas-graph-node-type {
    color:
        var(--vsg-text-gold);

    font-size:
        var(--vsg-font-size-2xs);

    font-weight:
        var(--vsg-font-weight-bold);

    text-transform: uppercase;
}

.vsg-atlas-graph-node-title {
    margin-top:
        var(--vsg-space-1);

    font-size:
        var(--vsg-font-size-xs);

    font-weight:
        var(--vsg-font-weight-semibold);
}


/* ============================================================
 * 22. OFFLINE AND SYNCHRONISATION
 * ============================================================
 */

.vsg-atlas-sync {
    --vsg-atlas-sync-color:
        var(--vsg-neutral);

    display: inline-flex;
    align-items: center;

    gap:
        var(--vsg-space-2);

    min-height:
        var(--vsg-control-height-sm);

    padding:
        var(--vsg-space-2)
        var(--vsg-space-3);

    border:
        1px solid
        color-mix(
            in srgb,
            var(--vsg-atlas-sync-color) 24%,
            transparent
        );

    border-radius:
        var(--vsg-radius-pill);

    color:
        var(--vsg-atlas-sync-color);

    background:
        color-mix(
            in srgb,
            var(--vsg-atlas-sync-color) 7%,
            transparent
        );

    font-size:
        var(--vsg-font-size-xs);

    font-weight:
        var(--vsg-font-weight-semibold);
}

.vsg-atlas-sync[data-sync-state="local"] {
    --vsg-atlas-sync-color:
        var(--vsg-warning);
}

.vsg-atlas-sync[data-sync-state="pending"] {
    --vsg-atlas-sync-color:
        var(--vsg-info);
}

.vsg-atlas-sync[data-sync-state="synchronizing"] {
    --vsg-atlas-sync-color:
        var(--vsg-info);
}

.vsg-atlas-sync[data-sync-state="synchronized"] {
    --vsg-atlas-sync-color:
        var(--vsg-success);
}

.vsg-atlas-sync[data-sync-state="failed"] {
    --vsg-atlas-sync-color:
        var(--vsg-danger);
}

.vsg-atlas-offline-card {
    display: grid;

    grid-template-columns:
        auto
        minmax(0, 1fr);

    gap:
        var(--vsg-space-3);

    padding:
        var(--vsg-space-4);

    border:
        1px solid
        var(--vsg-warning-line);

    border-radius:
        var(--vsg-radius-xl);

    color:
        var(--vsg-warning);

    background:
        linear-gradient(
            135deg,
            var(--vsg-warning-surface),
            transparent 70%
        ),
        var(--vsg-glass-2);
}


/* ============================================================
 * 23. ATLAS EMPTY STATE
 * ============================================================
 */

.vsg-atlas-empty {
    display: grid;

    justify-items: center;

    gap:
        var(--vsg-space-4);

    padding:
        var(--vsg-space-10)
        var(--vsg-space-5);

    border:
        1px dashed
        var(--vsg-gold-line-2);

    border-radius:
        var(--vsg-radius-2xl);

    background:
        var(--vsg-gold-surface-1);

    text-align: center;
}

.vsg-atlas-empty-icon {
    display: grid;
    place-items: center;

    width: 4rem;
    height: 4rem;

    border:
        1px solid
        var(--vsg-gold-line-2);

    border-radius:
        var(--vsg-radius-2xl);

    color:
        var(--vsg-text-gold);

    background:
        var(--vsg-gold-surface-2);

    font-size:
        var(--vsg-font-size-xl);
}

.vsg-atlas-empty-title {
    margin: 0;

    color:
        var(--vsg-text-primary);

    font-size:
        var(--vsg-font-size-xl);

    font-weight:
        var(--vsg-font-weight-bold);
}

.vsg-atlas-empty-description {
    max-width: 34rem;

    margin: 0;

    color:
        var(--vsg-text-tertiary);

    line-height:
        var(--vsg-line-height-relaxed);
}


/* ============================================================
 * 24. FLOATING PRESERVE BUTTON
 * ============================================================
 */

.vsg-atlas-preserve-button {
    position: fixed;

    right:
        max(
            var(--vsg-space-4),
            var(--vsg-safe-right)
        );

    bottom:
        calc(
            var(--vsg-safe-bottom) +
            var(--vsg-bottom-bar-height) +
            var(--vsg-space-4)
        );

    z-index:
        var(--vsg-elevation-4);

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap:
        var(--vsg-space-2);

    min-height:
        var(--vsg-control-height-xl);

    padding:
        var(--vsg-space-3)
        var(--vsg-space-5);

    border:
        1px solid
        var(--vsg-gold-line-3);

    border-radius:
        var(--vsg-radius-pill);

    color:
        var(--vsg-text-inverse);

    background:
        linear-gradient(
            135deg,
            var(--vsg-gold-200),
            var(--vsg-gold-500)
        );

    box-shadow:
        var(--vsg-shadow-floating),
        var(--vsg-gold-glow-md);

    font-weight:
        var(--vsg-font-weight-black);

    transition:
        var(--vsg-transition-control);
}


/* ============================================================
 * 25. HOVER AND FOCUS
 * ============================================================
 */

@media (hover: hover) and (pointer: fine) {
    .vsg-atlas-node:hover,
    .vsg-atlas-institution:hover,
    .vsg-atlas-collection:hover {
        transform:
            translate3d(
                0,
                calc(
                    var(--vsg-motion-distance-xs) * -1
                ),
                0
            );

        border-color:
            var(--vsg-gold-line-2);

        box-shadow:
            var(--vsg-shadow-inset-top),
            var(--vsg-shadow-lg),
            var(--vsg-gold-glow-sm);
    }

    .vsg-atlas-preserve-button:hover {
        transform:
            translate3d(0, -2px, 0)
            scale(
                var(--vsg-scale-hover)
            );

        box-shadow:
            var(--vsg-shadow-xl),
            var(--vsg-gold-glow-lg);
    }
}

.vsg-atlas-node:focus-visible,
.vsg-atlas-institution:focus-visible,
.vsg-atlas-collection:focus-visible {
    border-color:
        var(--vsg-gold-line-3);

    box-shadow:
        var(--vsg-focus-ring),
        var(--vsg-shadow-lg);
}


/* ============================================================
 * 26. MOBILE COMPACTION
 * ============================================================
 */

@media (max-width: 30rem) {
    .vsg-atlas-hero,
    .vsg-atlas-node,
    .vsg-atlas-institution {
        padding:
            var(--vsg-space-4);
    }

    .vsg-atlas-composer {
        grid-template-columns:
            auto
            minmax(0, 1fr);
    }

    .vsg-atlas-composer > :last-child {
        grid-column:
            1 / -1;
    }

    .vsg-atlas-relation {
        grid-template-columns:
            minmax(0, 1fr);
    }

    .vsg-atlas-relation-type {
        min-width: 0;
    }

    .vsg-atlas-relation-line {
        width: 1px;
        height: 2rem;
    }

    .vsg-atlas-institution-metrics {
        grid-template-columns:
            minmax(0, 1fr);
    }

    .vsg-atlas-node-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .vsg-atlas-node-action-group {
        width: 100%;
    }

    .vsg-atlas-action {
        flex:
            1 1 auto;
    }
}


/* ============================================================
 * 27. TABLET
 * ============================================================
 */

@media (min-width: 48rem) {
    .vsg-atlas-hero {
        padding:
            var(--vsg-space-8);
    }

    .vsg-atlas-institution-metrics {
        grid-template-columns:
            repeat(
                4,
                minmax(0, 1fr)
            );
    }

    .vsg-atlas-collections-grid {
        display: grid;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap:
            var(--vsg-space-4);
    }
}


/* ============================================================
 * 28. DESKTOP
 * ============================================================
 */

@media (min-width: 64rem) {
    .vsg-atlas-layout {
        grid-template-columns:
            minmax(0, var(--vsg-atlas-feed-width))
            minmax(16rem, var(--vsg-atlas-aside-width));

        justify-content: center;

        gap:
            var(--vsg-space-8);
    }

    .vsg-atlas-main {
        margin-inline: 0;
    }

    .vsg-atlas-aside {
        display: grid;

        gap:
            var(--vsg-space-4);
    }

    .vsg-atlas-collections-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }

    .vsg-atlas-preserve-button {
        display: none;
    }
}


/* ============================================================
 * 29. GLASS FALLBACK
 * ============================================================
 */

@supports not (
    (backdrop-filter: blur(1px)) or
    (-webkit-backdrop-filter: blur(1px))
) {
    .vsg-atlas-composer,
    .vsg-atlas-node,
    .vsg-atlas-institution,
    .vsg-atlas-search-header {
        background:
            var(--vsg-glass-solid);

        backdrop-filter:
            none;

        -webkit-backdrop-filter:
            none;
    }
}


/* ============================================================
 * 30. REDUCED TRANSPARENCY
 * ============================================================
 */

@media (prefers-reduced-transparency: reduce) {
    .vsg-atlas-hero,
    .vsg-atlas-composer,
    .vsg-atlas-node,
    .vsg-atlas-institution,
    .vsg-atlas-search-header {
        background:
            var(--vsg-glass-solid);

        backdrop-filter:
            none;

        -webkit-backdrop-filter:
            none;
    }
}


/* ============================================================
 * 31. REDUCED MOTION
 * ============================================================
 */

@media (prefers-reduced-motion: reduce) {
    .vsg-atlas-node,
    .vsg-atlas-composer,
    .vsg-atlas-institution,
    .vsg-atlas-collection,
    .vsg-atlas-preserve-button,
    .vsg-atlas-graph-node {
        animation:
            none !important;

        transition:
            none !important;

        transform:
            none !important;
    }
}


/* ============================================================
 * 32. HIGH CONTRAST
 * ============================================================
 */

@media (prefers-contrast: more) {
    .vsg-atlas-hero,
    .vsg-atlas-composer,
    .vsg-atlas-node,
    .vsg-atlas-preview,
    .vsg-atlas-contribution,
    .vsg-atlas-relation,
    .vsg-atlas-institution,
    .vsg-atlas-collection,
    .vsg-atlas-graph {
        border-width: 2px;
    }
}


/* ============================================================
 * 33. FORCED COLORS
 * ============================================================
 */

@media (forced-colors: active) {
    .vsg-atlas-hero,
    .vsg-atlas-composer,
    .vsg-atlas-node,
    .vsg-atlas-preview,
    .vsg-atlas-contribution,
    .vsg-atlas-relation,
    .vsg-atlas-event,
    .vsg-atlas-institution,
    .vsg-atlas-collection,
    .vsg-atlas-graph,
    .vsg-atlas-empty {
        color:
            CanvasText;

        background:
            Canvas;

        border:
            1px solid
            CanvasText;

        box-shadow:
            none;

        backdrop-filter:
            none;

        -webkit-backdrop-filter:
            none;
    }

    .vsg-atlas-hero::before,
    .vsg-atlas-node::before,
    .vsg-atlas-graph::before {
        display: none;
    }
}


/* ============================================================
 * 34. PRINT
 * ============================================================
 */

@media print {
    .vsg-atlas-hero,
    .vsg-atlas-composer,
    .vsg-atlas-node,
    .vsg-atlas-preview,
    .vsg-atlas-contribution,
    .vsg-atlas-relation,
    .vsg-atlas-event,
    .vsg-atlas-institution,
    .vsg-atlas-collection {
        break-inside:
            avoid;

        color:
            #111111;

        background:
            #ffffff;

        border:
            1px solid
            #cccccc;

        box-shadow:
            none;
    }

    .vsg-atlas-node-actions,
    .vsg-atlas-preserve-button,
    .vsg-atlas-composer,
    .vsg-atlas-search-header {
        display:
            none !important;
    }

    .vsg-atlas-graph {
        min-height: auto;

        color:
            #111111;

        background:
            #ffffff;

        border:
            1px solid
            #cccccc;
    }
}