/*
 * Motion of the portal shell, ported from the Next portal (framer-motion there, CSS here):
 *  - sidebar sub-menu opens as an accordion (height + opacity, 200 ms, `--ease-out`), the chevron turns 90 degrees (portal.css);
 *  - the lime "now" mark of the sidebar and of the bottom bar slides from the old to the new item on navigation (cross-document View
 *    Transition, 300 ms);
 *  - the page change itself (content 8 px up + fade on a soft navigation, rows, KPI values, skeleton) is fss-core's shared motion
 *    (fss-core `motion.css`); on a soft navigation the marks slide in JS (FssMotion.slide), the view transition below only
 *    serves a full page load (a form that redirects, an excluded link).
 * All of it is off with `prefers-reduced-motion` and with the "Less motion" preference (`html[data-motion="reduced"]`).
 */

/* Tokens that exist in the Next portal (app/admin/styles/tokens.css) but are missing from fss-core 0.50: the sidebar background, the white active
   nav pill, the nav hover tint, the lime line colour and the brand ink. Remove once fss-core carries them. */
:root {
    --sidebar-bg: #fbfbfa;
    --nav-active: #ffffff;
    --nav-hover: #f1f1ee;
    --accent-deep: #7fb800;
    --brand-ink: #3f5a1e;
}

/* --- Sidebar accordion ---------------------------------------------------------------------- */
.portal-nav-sub {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    opacity: 0;
    transition: grid-template-rows var(--dur-base, 200ms) var(--ease-out), opacity var(--dur-base, 200ms) var(--ease-out), visibility 0s linear var(--dur-base, 200ms);
}

.portal-nav-row[data-open] > .portal-nav-sub {
    grid-template-rows: 1fr;
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
}

.portal-nav-sub-inner {
    min-height: 0;
    overflow: hidden;
    padding-block: 0;
    transition: padding-block var(--dur-base, 200ms) var(--ease-out);
}

.portal-nav-row[data-open] > .portal-nav-sub > .portal-nav-sub-inner {
    padding-block: 2px 4px;
}

/* --- Sidebar mark slides between items (cross-document View Transition, Chromium and Safari 18.2+) --------- */
@view-transition {
    navigation: auto;
}

.portal-nav-node {
    view-transition-name: portal-nav-node;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}

::view-transition-group(portal-nav-node) {
    animation-duration: 300ms;
    animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

/* The mark of the bottom bar (< 1024 px) slides the same way from the old to the new destination (Next: `layoutId` + `springSoft`,
   a critically damped spring that settles in about 300 ms). Its own name: the sidebar is hidden on mobile and vice versa. */
.portal-bnav-node {
    view-transition-name: portal-bnav-node;
}

::view-transition-group(portal-bnav-node) {
    animation-duration: 300ms;
    animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

/* The content area takes focus after a soft navigation (for keyboard and screen reader users); it is not a control, so no ring. */
#portal-main:focus {
    outline: none;
}

/* --- Reduced motion ---------------------------------------------------------------------------- */
html[data-motion="reduced"] .portal-nav-sub,
html[data-motion="reduced"] .portal-nav-sub-inner {
    transition-duration: 1ms !important;
    transition-delay: 0s !important;
}

html[data-motion="reduced"] ::view-transition-group(*),
html[data-motion="reduced"] ::view-transition-old(*),
html[data-motion="reduced"] ::view-transition-new(*) {
    animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .portal-nav-sub,
    .portal-nav-sub-inner {
        transition-duration: 1ms !important;
        transition-delay: 0s !important;
    }

    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation: none !important;
    }
}

/* Stacko brand mark in the top bar and in More: the glyph in ink (the light portal; lime only as a status dot in the chat window). */
.portal-stacko-mark {
    flex: 0 0 auto;
    filter: brightness(0);
    opacity: 0.72;
}