/*
 * Sapphire share menu (Nuntius `share` Mirage pack, coreNuntius 1.0.0).
 * A <details>/<summary> disclosure with plain links: it works without JavaScript, loads no third-party code and
 * sends nothing to any network until the visitor chooses a link. sapphire_share.js only adds copy-link and the
 * device share sheet. Glyphs come from the Bootstrap Icons 1.11.3 font every public shell already loads.
 * Only logical properties are used, so the menu mirrors itself in right-to-left pages; brand glyphs never mirror.
 * Rules carry the .sapphire-share parent so that page-level link rules (e.g. `.canvas-page a`) do not recolour items.
 * The panel is dark by default (the .com and .me fronts are dark); a light skin overrides --sapphire-share-bg, -fg,
 * -muted, -border, -hover-bg and -done on any ancestor.
 */

.sapphire-share {
    position: relative;
    display: inline-block;
    max-width: 100%;
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.3;
    text-align: start;
}

.sapphire-share .sapphire-share__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.55em;
    min-width: 44px;
    min-height: 44px;
    padding-block: 0;
    padding-inline: 1rem 1.15rem;
    border: 1px solid rgba(148, 163, 184, 0.55);
    border-color: color-mix(in srgb, currentColor 38%, transparent);
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 600;
    list-style: none;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.sapphire-share__toggle::-webkit-details-marker {
    display: none;
}

.sapphire-share__toggle::marker {
    content: "";
}

.sapphire-share .sapphire-share__toggle:hover,
.sapphire-share[open] > .sapphire-share__toggle {
    background: rgba(148, 163, 184, 0.14);
    background: color-mix(in srgb, currentColor 10%, transparent);
    border-color: color-mix(in srgb, currentColor 60%, transparent);
}

.sapphire-share .sapphire-share__toggle:focus-visible,
.sapphire-share .sapphire-share__item:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

.sapphire-share .sapphire-share__panel {
    position: absolute;
    inset-block-start: calc(100% + 8px);
    inset-inline-start: 0;
    z-index: 60;
    box-sizing: border-box;
    min-width: 15rem;
    max-width: min(22rem, calc(100vw - 32px));
    padding: 6px;
    border: 1px solid var(--sapphire-share-border, rgba(120, 150, 255, 0.24));
    border-radius: 14px;
    background: var(--sapphire-share-bg, rgba(11, 20, 48, 0.97));
    color: var(--sapphire-share-fg, #e8ecff);
    box-shadow: 0 18px 48px rgba(2, 6, 23, 0.55);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.sapphire-share .sapphire-share__list {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sapphire-share .sapphire-share__list > li {
    margin: 0;
    padding: 0;
}

.sapphire-share .sapphire-share__item {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding-block: 0.5rem;
    padding-inline: 0.75rem;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--sapphire-share-fg, #e8ecff);
    font: inherit;
    font-weight: 500;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
}

.sapphire-share .sapphire-share__item:hover,
.sapphire-share .sapphire-share__item:focus-visible {
    background: var(--sapphire-share-hover-bg, rgba(76, 125, 255, 0.18));
    color: var(--sapphire-share-fg, #e8ecff);
    text-decoration: none;
}

.sapphire-share__icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    font-size: 1.1rem;
    line-height: 1;
}

.sapphire-share__icon::before {
    font-family: "bootstrap-icons" !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    line-height: 1;
    text-transform: none;
    vertical-align: -0.125em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.sapphire-share__icon--share::before { content: "\f52e"; }
.sapphire-share__icon--facebook::before { content: "\f344"; }
.sapphire-share__icon--x::before { content: "\f8db"; }
.sapphire-share__icon--linkedin::before { content: "\f472"; }
.sapphire-share__icon--telegram::before { content: "\f5b3"; }
.sapphire-share__icon--whatsapp::before { content: "\f618"; }
.sapphire-share__icon--reddit::before { content: "\f650"; }
.sapphire-share__icon--threads::before { content: "\f8d9"; }
.sapphire-share__icon--pinterest::before { content: "\f663"; }
.sapphire-share__icon--email::before { content: "\f32f"; }
.sapphire-share__icon--copy::before { content: "\f470"; }
.sapphire-share__icon--more::before { content: "\f5d4"; }
.sapphire-share__item--done .sapphire-share__icon--copy::before { content: "\f272"; }

/* Bootstrap Icons 1.11.3 has no VK glyph: a self-contained text badge instead of a third-party logo file. */
.sapphire-share__icon--vk::before {
    content: "VK";
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 5px;
    background: #0077ff;
    color: #ffffff;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 0.56rem;
    font-weight: 800 !important;
    letter-spacing: -0.02em;
    vertical-align: 0;
}

.sapphire-share__icon--facebook { color: #1877f2; }
.sapphire-share__icon--x,
.sapphire-share__icon--threads { color: var(--sapphire-share-fg, #e8ecff); }
.sapphire-share__icon--linkedin { color: #4a9be8; }
.sapphire-share__icon--telegram { color: #229ed9; }
.sapphire-share__icon--whatsapp { color: #25d366; }
.sapphire-share__icon--reddit { color: #ff4500; }
.sapphire-share__icon--pinterest { color: #e60023; }
.sapphire-share__icon--email,
.sapphire-share__icon--copy,
.sapphire-share__icon--more { color: var(--sapphire-share-muted, #a9b4d6); }
.sapphire-share__item--done .sapphire-share__icon--copy { color: var(--sapphire-share-done, #3ddc97); }

.sapphire-share__sr {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    border: 0 !important;
    white-space: nowrap !important;
}

/* Copy-link and the device share sheet need JavaScript; sapphire_share.js reveals them when the browser can. */
.sapphire-share__js-copy,
.sapphire-share__js-native {
    display: none !important;
}

html.sapphire-share-can-copy .sapphire-share__js-copy,
html.sapphire-share-can-native .sapphire-share__js-native {
    display: block !important;
}

@media (pointer: coarse) {
    /* On touch devices the toggle itself opens the share sheet; the menu is the fallback. */
    html.sapphire-share-can-native .sapphire-share__js-native {
        display: none !important;
    }
}

/* Placement inside the four page templates. */
.canvas-page__share {
    padding-block: 8px 48px;
}

/* `.canvas-page` clips overflow (sapphire_canvas.css) and the share row is the last thing in it, so on Canvas the
   panel opens upwards over the last section at every width: it stays inside the page and never stretches its frame. */
.canvas-page__share .sapphire-share .sapphire-share__panel {
    position: absolute;
    inset-block-start: auto;
    inset-block-end: calc(100% + 8px);
    margin-block-start: 0;
}

.chronicler-detail__share,
.contemplation-detail__share {
    margin-block-start: 6px;
}

.emporium-product-copy__share {
    margin-block: 0 18px;
}

@media (max-width: 559.98px) {
    .sapphire-share {
        display: block;
    }

    .sapphire-share .sapphire-share__panel {
        position: static;
        min-width: 0;
        max-width: none;
        margin-block-start: 8px;
        box-shadow: 0 10px 28px rgba(2, 6, 23, 0.22);
    }

    .sapphire-share .sapphire-share__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .canvas-page__share .sapphire-share .sapphire-share__panel {
        inset-inline: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sapphire-share .sapphire-share__toggle {
        transition: none;
    }
}

@media (forced-colors: active) {
    .sapphire-share .sapphire-share__toggle,
    .sapphire-share .sapphire-share__panel {
        border-color: CanvasText;
    }

    .sapphire-share__icon--vk::before {
        forced-color-adjust: none;
    }
}

@media print {
    .sapphire-share {
        display: none !important;
    }
}