/* =============================================================================
   ATRIUM · 05 · SHELL BRIDGE
   =============================================================================
   The adoption layer for the period in which the ATRIUM shell wraps pages
   that have not been redesigned yet. It does four jobs:

     0b. Retargets the previous generation's --v-* tokens onto ATRIUM, so
         template inline styles (var(--v-s3) …) and any unmigrated rule keep
         resolving — token generations rotate under stable aliases.
     1.  Neutralises the legacy shell geometry (the old rail gutter, the old
         progress bar) now that navbar.php renders ATRIUM chrome.
     2.  Adopts the Bootstrap-structural surfaces the shell still relies on
         (dropdown menus, offcanvas panels, modal backdrop) into the ATRIUM
         material system — the JS keeps working, the look is ATRIUM.
     3.  Defines shell-only pieces that live outside the component library:
         the global footer and posture visibility for the top-bar icons.

   This file shrinks as pages migrate and disappears when the last legacy
   sheet is unlinked. Nothing in it may be referenced by page markup.
   ========================================================================== */

/* =============================================================================
   0b · GENERATION ALIAS — every --v-* resolves to its ATRIUM successor
   ========================================================================== */
:root {
    --v-font: var(--at-font);
    --v-font-mono: var(--at-font-mono);
    --v-text-xs: var(--at-text-xs);   --v-text-sm: var(--at-text-sm);
    --v-text-md: var(--at-text-md);   --v-text-lg: var(--at-text-lg);
    --v-text-xl: var(--at-text-xl);   --v-text-2xl: var(--at-text-2xl);
    --v-display: var(--at-display);   --v-display-lg: var(--at-display-lg);
    --v-weight-regular: var(--at-weight-regular);
    --v-weight-medium: var(--at-weight-medium);
    --v-weight-semibold: var(--at-weight-semibold);
    --v-weight-bold: var(--at-weight-bold);
    --v-weight-display: var(--at-weight-display);
    --v-leading-tight: var(--at-leading-tight);
    --v-leading-snug: var(--at-leading-snug);
    --v-leading-normal: var(--at-leading-normal);
    --v-leading-relaxed: var(--at-leading-relaxed);
    --v-tracking-display: var(--at-tracking-display);
    --v-tracking-title: var(--at-tracking-title);
    --v-tracking-body: var(--at-tracking-body);
    --v-tracking-meta: var(--at-tracking-meta);
    --v-tracking-caps: var(--at-tracking-caps);
    --v-s0: var(--at-s0); --v-s1: var(--at-s1); --v-s2: var(--at-s2);
    --v-s3: var(--at-s3); --v-s4: var(--at-s4); --v-s5: var(--at-s5);
    --v-s6: var(--at-s6); --v-s7: var(--at-s7); --v-s8: var(--at-s8);
    --v-s9: var(--at-s9); --v-s10: var(--at-s10); --v-s11: var(--at-s11);
    --v-mat: var(--at-mat);
    --v-measure: var(--at-measure); --v-measure-wide: var(--at-measure-wide);
    --v-r-xs: var(--at-r-xs); --v-r-sm: var(--at-r-sm); --v-r-md: var(--at-r-md);
    --v-r-lg: var(--at-r-lg); --v-r-xl: var(--at-r-xl); --v-r-pill: var(--at-r-pill);
    --v-z-rail: var(--at-z-rail); --v-z-nav: var(--at-z-nav);
    --v-z-sticky: var(--at-z-sticky); --v-z-dropdown: var(--at-z-dropdown);
    --v-z-sheet: var(--at-z-sheet); --v-z-modal: var(--at-z-modal);
    --v-z-tooltip: var(--at-z-tooltip); --v-z-toast: var(--at-z-toast);
    --v-t-instant: var(--at-t-instant); --v-t-fast: var(--at-t-fast);
    --v-t-base: var(--at-t-base); --v-t-slow: var(--at-t-slow);
    --v-t-slower: var(--at-t-slower);
    --v-ease-out: var(--at-ease-out); --v-ease-in: var(--at-ease-in);
    --v-ease-inout: var(--at-ease-inout); --v-ease-spring: var(--at-ease-spring);
    --v-icon-xs: var(--at-icon-xs); --v-icon-sm: var(--at-icon-sm);
    --v-icon-md: var(--at-icon-md); --v-icon-lg: var(--at-icon-lg);
    --v-hit: var(--at-hit);
    --v-control-h: var(--at-control-h);
    --v-control-h-sm: var(--at-control-h-sm);
    --v-control-h-lg: var(--at-control-h-lg);
    --v-topbar-h: var(--at-topbar-h); --v-tabbar-h: var(--at-tabbar-h);
    --v-rail-w: var(--at-rail-w);
    --v-frame: var(--at-frame, 96rem);
}

/* Material aliases live on :root AND both theme scopes purely via var()
   indirection — they follow [data-theme] automatically because the --at-*
   values they point at are theme-scoped. */
:root {
    --v-bg: var(--at-bg); --v-bg-subtle: var(--at-bg-subtle);
    --v-surface: var(--at-surface); --v-surface-raised: var(--at-surface-raised);
    --v-surface-hover: var(--at-surface-hover); --v-surface-sunken: var(--at-surface-sunken);
    --v-ink: var(--at-ink); --v-ink-secondary: var(--at-ink-secondary);
    --v-ink-muted: var(--at-ink-muted); --v-ink-faint: var(--at-ink-faint);
    --v-ink-inverse: var(--at-ink-inverse);
    --v-hairline: var(--at-hairline); --v-hairline-strong: var(--at-hairline-strong);
    --v-edge: var(--at-edge);
    --v-scrim: var(--at-scrim); --v-scrim-strong: var(--at-scrim-strong);
    --v-shadow-xs: var(--at-shadow-xs); --v-shadow-sm: var(--at-shadow-sm);
    --v-shadow-md: var(--at-shadow-md); --v-shadow-lg: var(--at-shadow-lg);
    --v-accent: var(--at-accent); --v-accent-hover: var(--at-accent-hover);
    --v-accent-active: var(--at-accent-active); --v-accent-ink: var(--at-accent-ink);
    --v-accent-contrast: var(--at-accent-contrast); --v-accent-soft: var(--at-accent-soft);
    --v-gilt: var(--at-gilt); --v-gilt-bright: var(--at-gilt-bright);
    --v-gilt-ink: var(--at-gilt-ink); --v-gilt-contrast: var(--at-gilt-contrast);
    --v-gilt-soft: var(--at-gilt-soft);
    --v-success: var(--at-success); --v-success-soft: var(--at-success-soft);
    --v-danger: var(--at-danger); --v-danger-soft: var(--at-danger-soft);
    --v-warning: var(--at-warning); --v-warning-soft: var(--at-warning-soft);
    --v-info: var(--at-info); --v-info-soft: var(--at-info-soft);
    --v-like: var(--at-like); --v-presence: var(--at-presence);
    --v-focus-ring: var(--at-focus-ring); --v-skeleton: var(--at-skeleton);
}

/* =============================================================================
   0 · TOKEN RETARGET — one design language, everywhere
   -----------------------------------------------------------------------------
   Anything still styled by the previous token layer (--app-*) now resolves to
   ATRIUM. This is the consistency guarantee: a page nobody has migrated yet
   cannot render in the old orange, the old radii, or the old shadows, because
   those variables no longer exist as independent values. Declared for :root
   and every theme so it outranks both the header's inline brand injection and
   the legacy per-theme blocks (this file loads after all of them).
   ========================================================================== */
:root,
[data-theme="light"],
[data-theme="dark"],
[data-theme="night"] {
    /* Brand */
    --app-accent:          var(--at-accent);
    --app-accent-hover:    var(--at-accent-hover);
    --app-accent-active:   var(--at-accent-active);
    --app-accent-text:     var(--at-accent-ink);
    --app-accent-contrast: var(--at-accent-contrast);
    --app-accent-soft:     var(--at-accent-soft);
    --app-secondary:       var(--at-ink);
    --app-focus-ring:      var(--at-focus-ring);

    /* Space — the retired tokens.css was these variables' only definition;
       the two surviving route sheets (auth, edit) consume them. */
    --app-space-1: var(--at-s1);
    --app-space-2: var(--at-s2);
    --app-space-3: var(--at-s3);
    --app-space-4: var(--at-s4);
    --app-space-5: var(--at-s5);
    --app-space-6: var(--at-s6);
    --app-space-8: var(--at-s7);
    --app-space-10: var(--at-s8);
    --app-space-12: var(--at-s9);
    --app-space-16: var(--at-s10);

    /* Type */
    --app-font-sans: var(--at-font);
    --app-weight-normal:   var(--at-weight-regular);
    --app-weight-medium:   var(--at-weight-medium);
    --app-weight-semibold: var(--at-weight-semibold);
    --app-weight-bold:     var(--at-weight-bold);
    --app-leading-tight:   var(--at-leading-tight);
    --app-leading-normal:  var(--at-leading-normal);
    --app-leading-relaxed: var(--at-leading-relaxed);
    --app-tracking-body:   var(--at-tracking-body);
    --app-tracking-meta:   var(--at-tracking-meta);
    --app-tracking-title:  var(--at-tracking-title);
    --app-tracking-caps:   var(--at-tracking-caps);
    --app-invert: 0;
    --app-text-xs:   var(--at-text-xs);
    --app-text-sm:   var(--at-text-sm);
    --app-text-base: var(--at-text-md);
    --app-text-md:   var(--at-text-lg);
    --app-text-lg:   var(--at-text-lg);
    --app-text-xl:   var(--at-text-xl);
    --app-text-2xl:  var(--at-text-2xl);
    --app-text-3xl:  var(--at-display);

    /* Geometry */
    --app-radius-xs:    var(--at-r-xs);
    --app-radius-sm:    var(--at-r-sm);
    --app-radius:       var(--at-r-md);
    --app-radius-inner: var(--at-r-xs);
    --app-radius-lg:    var(--at-r-lg);
    --app-radius-xl:    var(--at-r-xl);
    --app-radius-pill:  var(--at-r-pill);

    /* Motion */
    --app-ease:        var(--at-ease-inout);
    --app-ease-out:    var(--at-ease-out);
    --app-ease-in:     var(--at-ease-in);
    --app-ease-spring: var(--at-ease-spring);
    --app-duration-instant: var(--at-t-instant);
    --app-duration-fast:    var(--at-t-fast);
    --app-duration:         var(--at-t-base);
    --app-duration-slow:    var(--at-t-slow);

    /* Layout chrome */
    --app-shell-max:     var(--at-measure-wide);
    --app-feed-max:      var(--at-measure);
    --app-nav-height:    var(--at-topbar-h);
    --app-tabbar-height: var(--at-tabbar-h);
    --app-sidebar-width: var(--at-rail-w);

    /* Materials */
    --app-bg:             var(--at-bg);
    --app-bg-subtle:      var(--at-bg-subtle);
    --app-surface:        var(--at-surface);
    --app-surface-raised: var(--at-surface-raised);
    --app-surface-hover:  var(--at-surface-hover);
    --app-surface-sunken: var(--at-surface-sunken);
    --app-text:           var(--at-ink);
    --app-text-secondary: var(--at-ink-secondary);
    --app-text-muted:     var(--at-ink-muted);
    --app-text-inverse:   var(--at-ink-inverse);
    --app-border:         var(--at-hairline);
    --app-border-strong:  var(--at-hairline-strong);
    --app-overlay:        var(--at-scrim);
    --app-scrim:          var(--at-scrim);
    --app-scrim-strong:   var(--at-scrim-strong);
    --app-skeleton:       var(--at-skeleton);
    --app-hairline:       var(--at-edge);
    --app-shadow-xs:      var(--at-shadow-xs);
    --app-shadow-sm:      var(--at-shadow-sm);
    --app-shadow:         var(--at-shadow-md);
    --app-shadow-lg:      var(--at-shadow-lg);
    --app-shadow-accent:  var(--at-shadow-sm);

    /* Semantics */
    --app-success:      var(--at-success);
    --app-success-soft: var(--at-success-soft);
    --app-danger:       var(--at-danger);
    --app-danger-soft:  var(--at-danger-soft);
    --app-warning:      var(--at-warning);
    --app-warning-soft: var(--at-warning-soft);
    --app-info:         var(--at-info);
    --app-info-soft:    var(--at-info-soft);
    --app-like:         var(--at-like);
    --app-verified:     var(--at-accent);

    /* Premium spoke violet; the economy speaks Gilt. */
    --app-premium:          var(--at-gilt);
    --app-premium-bright:   var(--at-gilt-bright);
    --app-premium-contrast: var(--at-gilt-contrast);
    --app-premium-soft:     var(--at-gilt-soft);
    --app-premium-hover:    var(--at-gilt-bright);
    --app-premium-gradient: var(--at-gilt);
    --app-premium-glow:     0 0 0 0 rgba(0, 0, 0, 0);
}

/* =============================================================================
   1 · LEGACY GEOMETRY NEUTRALISED
   ========================================================================== */
/* Nothing to neutralise here any more.
   This section used to zero the body's left padding at ≥992px, to cancel a
   gutter reserved by the pre-ATRIUM layout.css. That sheet is unlinked, but
   the rule outlived it: because the bridge loads AFTER the layout layer, it
   silently cancelled the colonnade's own gutter and left the content column
   centred on the viewport instead of beside the walk.

   The body's gutter, the route-change filament (.pjax-progress) and the
   page-arrival animation are all defined once, in atrium.layout.css. */

/* =============================================================================
   2 · BOOTSTRAP STRUCTURES, ATRIUM MATERIALS
   -----------------------------------------------------------------------------
   The shell keeps Bootstrap's JS for dropdowns, offcanvas and modals.
   These rules dress those structures in the system. !important appears only
   where a legacy sheet already used it (.modal-bg) and must be out-shouted.
   ========================================================================== */
.dropdown-menu {
    min-width: 13rem;
    padding: var(--at-s2);
    border: 0;
    border-radius: var(--at-r-lg);
    background-color: var(--at-surface-raised);
    box-shadow: var(--at-edge), var(--at-shadow-lg);
    color: var(--at-ink);
}

.dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--at-s3);
    min-height: var(--at-hit);
    padding: var(--at-s2) var(--at-s3);
    border-radius: var(--at-r-sm);
    color: var(--at-ink);
    font-size: var(--at-text-sm);
    font-weight: var(--at-weight-medium);
    transition: background-color var(--at-t-fast) var(--at-ease-out);
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
    background-color: var(--at-surface-hover);
    color: var(--at-ink);
}

.dropdown-menu .dropdown-item .fi,
.dropdown-menu .dropdown-item .v-icon {
    color: var(--at-ink-secondary);
    font-size: var(--at-icon-sm);
}

.dropdown-menu .dropdown-item.text-danger,
.dropdown-menu .dropdown-item.is-danger {
    color: var(--at-danger);
}

.dropdown-menu .dropdown-divider {
    margin: var(--at-s2) var(--at-s3);
    border: 0;
    height: 1px;
    background: var(--at-hairline);
    opacity: 1;
}

/* Collision flip: the overlay controller adds this when a menu would spill
   past the bottom of the viewport, so it opens upward from the trigger instead.
   Anchored on every viewport now — dropdowns are never bottom sheets. */
.dropdown-menu--up {
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: var(--at-s1);
}

/* --- ONE dropdown animation, every menu, every screen ----------------------
   A menu fades and slides a few pixels out of its trigger, and leaves the same
   way. Keyframes (not transitions) because the controller reveals the menu by
   toggling `.show`, which flips display:none→block — a transition cannot cross
   that. The exit runs while `.is-closing` is set, before the controller hides
   it. transform-origin follows the open direction so the scale reads anchored. */
.dropdown-menu.show {
    animation: v-dd-in var(--at-t-fast) var(--at-ease-out);
    transform-origin: top center;
}
.dropdown-menu--up.show { transform-origin: bottom center; animation-name: v-dd-in-up; }

.dropdown-menu.is-closing {
    animation: v-dd-out var(--at-t-fast) var(--at-ease-in) forwards;
    pointer-events: none;
}
.dropdown-menu--up.is-closing { animation-name: v-dd-out-up; }

@keyframes v-dd-in    { from { opacity: 0; transform: translateY(-6px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes v-dd-in-up { from { opacity: 0; transform: translateY(6px)  scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes v-dd-out    { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-6px) scale(0.97); } }
@keyframes v-dd-out-up { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(6px)  scale(0.97); } }

@media (prefers-reduced-motion: reduce) {
    .dropdown-menu.show, .dropdown-menu.is-closing { animation: none; }
}

/* Offcanvas panels (notifications, chat list) — navigation chrome. Their
   inner content stays legacy until those surfaces are redesigned. */
/* The panel owns its own layout rather than borrowing Bootstrap's: a flex
   column whose header holds still while the body scrolls. The overlay
   controller reveals it with visibility (not display), so this column is never
   collapsed — which is what previously left a long notifications list unable to
   scroll. Full viewport height so the body always has a bounded region to
   scroll within. */
.offcanvas,
.offcanvas .modal-bg,
.offcanvas.modal-bg {
    background-color: var(--at-surface) !important;
    color: var(--at-ink) !important;
    border: 0;
    box-shadow: var(--at-shadow-lg);
}

.offcanvas.offcanvas-start,
.offcanvas.offcanvas-end {
    display: flex;
    flex-direction: column;
    top: 0;
    bottom: 0;
    height: 100dvh;
}

.offcanvas-header {
    flex: 0 0 auto;
    background: var(--at-surface);
    color: var(--at-ink);
    padding: calc(var(--at-s4) + env(safe-area-inset-top, 0px)) var(--at-s5) var(--at-s4);
    border-bottom: 1px solid var(--at-hairline);
}

.offcanvas-title {
    font-size: var(--at-text-lg);
    font-weight: var(--at-weight-semibold);
    letter-spacing: var(--at-tracking-title);
}

/* The one scroll region. Independent, smooth, momentum on touch, and its own
   overscroll so reaching the end never drags the page behind it — which the
   controller has locked anyway. The bottom pad clears the home indicator. */
.offcanvas-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
    background: var(--at-surface);
    color: var(--at-ink);
    padding: var(--at-s3) var(--at-s3) calc(var(--at-s4) + env(safe-area-inset-bottom, 0px));
    font-size: var(--at-text-md);
}

/* Scrim, not glass — a dark wash with the faintest defocus of the room
   behind it, so the dialog reads as the one lit surface. The blur is held
   deliberately slight: a scrim is not frosted glass, and a heavy blur on a
   full-viewport layer is expensive. */
.modal-backdrop {
    background-color: var(--at-scrim);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.modal-backdrop.show { opacity: 1; }

/* Bootstrap ships fixed z-indexes (modal 1055, backdrop 1050, offcanvas
   1045 / 1040) that sit ABOVE the atrium toast (800) — the reason "Link
   Copied" hides behind followers / QR / share / post-viewer. Pull them into
   the ONE token scale so toasts always win. */
.modal, .telegram-modal { z-index: var(--at-z-modal); }
.modal-backdrop { z-index: calc(var(--at-z-modal) - 1); }
.offcanvas { z-index: var(--at-z-sheet); }
.offcanvas-backdrop { z-index: calc(var(--at-z-sheet) - 1); }

/* Close glyph follows the ink in the dark poles. */
[data-theme="dark"] .btn-close,
[data-theme="night"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(180%);
}

/* =============================================================================
   3 · SHELL-ONLY PIECES
   ========================================================================== */
/* Top-bar posture visibility.
   – Home/Market icons exist only in Companion (48–64em): Focus has the tab
     bar, Studio has the rail. No posture shows navigation twice.
   – Search retires in Focus; the tab bar is the primary wayfinding there. */
.v-mid-nav { display: none; }

@media (min-width: 48em) and (max-width: 63.98em) {
    .v-mid-nav { display: inline-flex; }
}

@media (max-width: 47.98em) {
    .v-topbar .v-search { display: none; }
    .v-topbar .v-compose { display: none; }
}

/* The colophon (.v-footer) is shell furniture and lives in
   atrium.layout.css §8 — it was defined here as well. One definition. */