/* sharing-public.css - branded chrome for the anonymous public share shell (PublicShareLayout).
   Loaded in the global document head via SharingStylesheetContributor, so every rule is namespaced
   under .share-* and cannot leak into unrelated pages. Colours resolve through --bs-* tokens so the
   shell adapts to the active brand theme and light/dark mode. Flat design: borders, no depth shadows. */

/* Stays at the top while the page scrolls, so its start slot (the sharer's way back to the app) is always
   in reach. The top inset clears the status bar in the edge-to-edge mobile app (env() is 0 elsewhere). */
.share-topbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    padding: calc(1rem + env(safe-area-inset-top)) 0 1rem;
    border-bottom: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
}
/* Start slot | logo | balancing empty column: the logo stays centred whether or not the slot is filled. */
.share-topbar-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.75rem;
}
.share-topbar-start { justify-self: start; min-width: 0; }
/* A way back placed in the start slot: the breadcrumb's arrow, alone and larger, in the link colour,
   with a 44px tap target. */
.share-topbar-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.75rem;
    text-decoration: none;
}

/* Keep the shared content comfortably narrow on very wide screens. */
.share-main { max-width: 64rem; }

.share-foot {
    padding: 1.5rem 0 calc(1.5rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    font-size: 0.85rem;
    color: var(--bs-secondary-color);
}

.share-foot-brand { font-weight: 600; color: var(--bs-body-color); }
.share-foot-note { margin-top: 0.25rem; }
.share-foot-cta { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem;
    font-weight: 500; text-decoration: none; }
.share-foot-cta:hover { text-decoration: underline; }