/* ==========================================================================
   Marjaa floating pill header
   Light-mode only. Everything is scoped to .mj-header and driven by tokens.
   Structure: fixed click-through shell -> [nav pill] [actions pill] + popovers.
   Logical properties are used throughout so Arabic (RTL) mirrors for free.
   ========================================================================== */

.mj-header {
    /* Colour */
    --mj-ink: #0f172a;
    --mj-ink-soft: #475569;
    --mj-surface: rgba(255, 255, 255, 0.86);
    --mj-surface-solid: #ffffff;
    --mj-wash: rgba(15, 23, 42, 0.05);
    --mj-border: rgba(15, 23, 42, 0.08);
    --mj-accent: #8b5cf6;
    --mj-accent-hover: #7c3aed;
    --mj-accent-press: #6d28d9;
    --mj-accent-ink: #6d28d9;
    --mj-accent-tint: rgba(139, 92, 246, 0.1);
    --mj-danger-ink: #b91c1c;
    --mj-danger-tint: rgba(220, 38, 38, 0.08);

    /* Shape & space */
    --mj-radius-pill: 1.125rem;
    --mj-radius-inner: 0.625rem;
    --mj-pill-height: 3.25rem;
    --mj-control-height: 2.25rem;
    --mj-edge: 0.75rem;
    --mj-header-space: calc(var(--mj-edge) * 2 + var(--mj-pill-height));

    /* Depth */
    --mj-shadow-pill: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 28px -14px rgba(15, 23, 42, 0.22);
    --mj-shadow-pop: drop-shadow(0 18px 28px rgba(15, 23, 42, 0.14)) drop-shadow(0 2px 4px rgba(15, 23, 42, 0.06));

    /* Motion */
    --mj-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --mj-dur-fast: 150ms;
    --mj-dur-open: 380ms;
    --mj-dur-close: 200ms;
    --mj-dur-collapse: 500ms;
    --mj-dur-menu: 500ms;
    --mj-dur-menu-fade: 800ms;
    --mj-dur-rule: 1000ms;
    --mj-stagger: 100ms;

    /* Dropdown */
    --mj-scrim: rgba(53, 53, 53, 0.2);
    --mj-rule: rgba(15, 23, 42, 0.12);
    --mj-menu-width: 26rem; /* marjaa-navbar.js replaces this with the nav pill's width */

    /* Direction helpers (flipped for RTL below) */
    --mj-dir: 1;
    --mj-origin-start: left top;
    --mj-origin-end: right top;

    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 1030;
    padding: max(var(--mj-edge), env(safe-area-inset-top)) clamp(0.75rem, 2.2vw, 1.5rem) 0;
    pointer-events: none;
    color: var(--mj-ink);
    font-family: var(--font-app, 'Tajawal', system-ui, sans-serif);
    font-size: 0.9375rem;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
}

[dir="rtl"] .mj-header {
    --mj-dir: -1;
    --mj-origin-start: right top;
    --mj-origin-end: left top;
}

.mj-header *,
.mj-header *::before,
.mj-header *::after {
    box-sizing: border-box;
}

.mj-header :is(ul, li) {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* :where() keeps these resets at zero specificity so component classes win. */
.mj-header :where(a) {
    color: inherit;
    text-decoration: none;
}

.mj-header :where(button, summary) {
    font: inherit;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
}

/* In-flow spacer: pages keep their natural top offset under a fixed header. */
.mj-spacer {
    height: calc(max(0.75rem, env(safe-area-inset-top)) + 0.75rem + 3.25rem);
}

/* Skip link --------------------------------------------------------------- */

.mj-skip {
    position: fixed;
    inset-block-start: 0.75rem;
    inset-inline-start: 0.75rem;
    z-index: 1100;
    padding: 0.625rem 1rem;
    border-radius: 0.625rem;
    background: #0f172a;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    transform: translateY(-250%);
    transition: transform var(--mj-dur-fast) ease-out;
}

.mj-skip:focus-visible {
    transform: translateY(0);
    outline: 2px solid #8b5cf6;
    outline-offset: 2px;
}

/* Shell & scrim ---------------------------------------------------------- */

.mj-shell {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    max-width: 90rem;
    margin-inline: auto;
    pointer-events: none;
}

.mj-scrim {
    position: fixed;
    inset: 0;
    background: var(--mj-scrim);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--mj-dur-menu) var(--mj-ease-out);
}

.mj-header.is-menu-open .mj-scrim {
    opacity: 1;
    pointer-events: auto;
}

/* Pills ------------------------------------------------------------------ */

.mj-pill {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    min-height: var(--mj-pill-height);
    padding: 0 0.5rem;
    pointer-events: none;
}

.mj-pill > * {
    pointer-events: auto;
}

/* The pill surface lives on ::before so its trailing edge can retract. */
.mj-pill::before {
    content: '';
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inset-inline-end: var(--mj-offset, 0px);
    z-index: -1;
    border: 1px solid var(--mj-border);
    border-radius: var(--mj-radius-pill);
    background: var(--mj-surface);
    box-shadow: var(--mj-shadow-pill);
    -webkit-backdrop-filter: blur(16px) saturate(1.6);
    backdrop-filter: blur(16px) saturate(1.6);
    pointer-events: auto;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .mj-pill::before {
        background: rgba(255, 255, 255, 0.97);
    }
}

.mj-pill--nav {
    z-index: 2;
}

.mj-pill--actions {
    gap: 0.25rem;
}

/* Logo ------------------------------------------------------------------- */

.mj-logo {
    display: inline-flex;
    align-items: center;
    height: var(--mj-control-height);
    padding-inline: 0.75rem 0.5rem;
    border-radius: var(--mj-radius-inner);
    transition: transform var(--mj-dur-fast) ease-out;
}

.mj-logo img {
    display: block;
    height: 1.625rem;
    width: auto;
    max-width: min(7.5rem, 42vw);
    object-fit: contain;
    object-position: center;
}

.mj-logo:active {
    transform: scale(0.97);
}

/* Inline navigation (desktop) -------------------------------------------- */

.mj-nav {
    display: none;
    margin-inline-start: 1rem;
}

.mj-nav__list {
    display: flex;
    align-items: center;
    gap: 0.125rem;
}

.mj-nav__item {
    position: relative;
}

.mj-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    height: var(--mj-control-height);
    padding-inline: 0.75rem;
    border: 0;
    border-radius: var(--mj-radius-inner);
    background: transparent;
    color: var(--mj-ink);
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--mj-dur-fast) ease-out, color var(--mj-dur-fast) ease-out,
        transform var(--mj-dur-fast) ease-out;
}

.mj-link:active {
    transform: scale(0.97);
}

.mj-link.is-active {
    background: var(--mj-accent-tint);
    color: var(--mj-accent-ink);
}

.mj-chevron {
    flex: none;
    width: 0.75rem;
    height: 0.75rem;
    opacity: 0.6;
    transition: transform var(--mj-dur-open) var(--mj-ease-out);
}

[aria-expanded="true"] > .mj-chevron {
    transform: rotate(180deg);
}

/* More / menu toggle ------------------------------------------------------ */

.mj-more {
    position: relative;
    display: grid;
    place-items: center;
    width: var(--mj-control-height);
    height: var(--mj-control-height);
    margin-inline-start: 0.25rem;
    padding: 0;
    border: 0;
    border-radius: var(--mj-radius-inner);
    background: transparent;
    cursor: pointer;
    transition: background-color var(--mj-dur-fast) ease-out, transform var(--mj-dur-fast) ease-out,
        translate var(--mj-dur-collapse) var(--mj-ease-out);
}

.mj-more:active {
    transform: scale(0.94);
}

.mj-more svg {
    grid-area: 1 / 1;
    width: 1.25rem;
    height: 1.25rem;
    transition: opacity 200ms ease-out, transform 300ms var(--mj-ease-out);
}

.mj-more .mj-icon-close {
    opacity: 0;
    transform: rotate(-60deg) scale(0.6);
}

/* "Close" fades in beside the toggle where the inline links were (desktop only). */
.mj-more__label {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: calc(100% + 0.5rem);
    display: none;
    translate: 0 -50%;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--mj-dur-menu-fade) var(--mj-ease-out);
}

.mj-more[aria-expanded="true"] .mj-more__label {
    opacity: 1;
    transition-delay: 300ms;
}

.mj-more[aria-expanded="true"] .mj-icon-dots {
    opacity: 0;
    transform: rotate(60deg) scale(0.6);
}

.mj-more[aria-expanded="true"] .mj-icon-close {
    opacity: 1;
    transform: none;
}

/* Buttons ---------------------------------------------------------------- */

.mj-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: var(--mj-control-height);
    padding-inline: 1rem;
    border: 0;
    border-radius: var(--mj-radius-inner);
    background: transparent;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--mj-dur-fast) ease-out, box-shadow var(--mj-dur-fast) ease-out,
        transform var(--mj-dur-fast) ease-out;
}

.mj-btn:active {
    transform: scale(0.97);
}

.mj-btn--primary {
    background: var(--mj-accent);
    color: #fff;
    font-weight: 600;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 1px 2px rgba(109, 40, 217, 0.32);
}

.mj-btn--primary:active {
    background: var(--mj-accent-press);
}

.mj-btn--outline {
    box-shadow: inset 0 0 0 1px var(--mj-border);
}

.mj-btn--block {
    width: 100%;
    height: 2.75rem;
}

.mj-lang {
    display: contents;
}

.mj-lang .fa-globe {
    font-size: 0.875rem;
    opacity: 0.7;
}

/* Account ---------------------------------------------------------------- */

.mj-account {
    position: relative;
}

.mj-user {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: var(--mj-control-height);
    padding-inline: 0.25rem 0.625rem;
    border: 0;
    border-radius: var(--mj-radius-inner);
    background: transparent;
    font-weight: 500;
    cursor: pointer;
    transition: background-color var(--mj-dur-fast) ease-out, transform var(--mj-dur-fast) ease-out;
}


.mj-user:active {
    transform: scale(0.97);
}

.mj-user__name {
    max-width: 9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mj-avatar {
    display: grid;
    place-items: center;
    flex: none;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--mj-accent-tint);
    color: var(--mj-accent-ink);
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1;
}

/* Popover surface (shared by dropdown panel, department list, account) ---- */

.mj-pop {
    position: absolute;
    inset-block-start: calc(100% + 0.5rem);
    z-index: 3;
    width: var(--mj-pop-width, 20rem);
    max-width: calc(100vw - 1.5rem);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-0.375rem) scale(0.98);
    transform-origin: var(--mj-origin-start);
    filter: var(--mj-shadow-pop);
    transition: transform var(--mj-dur-close) ease-out, opacity 150ms ease-out,
        visibility 0s linear var(--mj-dur-close);
}

.mj-pop.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition: transform var(--mj-dur-open) var(--mj-ease-out), opacity 220ms ease-out,
        visibility 0s linear 0s;
}

.mj-pop__surface {
    max-height: min(32rem, calc(100dvh - 7rem));
    padding: 0.5rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--mj-border);
    border-radius: var(--mj-radius-pill);
    background: var(--mj-surface-solid);
    clip-path: inset(0 0 100% 0 round var(--mj-radius-pill));
    transition: clip-path var(--mj-dur-close) ease-out;
}

.mj-pop.is-open .mj-pop__surface {
    clip-path: inset(0 round var(--mj-radius-pill));
    transition: clip-path var(--mj-dur-open) var(--mj-ease-out);
}

/* Popovers anchored to a control inside a pill clear the pill's own padding. */
.mj-nav__item > .mj-pop,
.mj-account > .mj-pop {
    inset-block-start: calc(100% + 1rem);
}

.mj-pop--start {
    inset-inline-start: 0;
}

.mj-pop--end {
    --mj-pop-width: 18rem;
    inset-inline-end: 0;
    transform-origin: var(--mj-origin-end);
}

.mj-pop--wide {
    --mj-pop-width: 26rem;
}

/* The dropdown panel is a Bootstrap Collapse (the onboarding tour drives it).
   Neutralise Bootstrap's height animation; our own transform/clip handles it. */
.mj-panel.collapse:not(.show) {
    display: block;
}

.mj-panel.collapsing {
    height: auto !important;
    overflow: visible;
}

/* Dropdown panel: grows out of the nav pill at the pill's width.
   The transform listed first drives Bootstrap's "shown/hidden" timing. */
.mj-panel {
    --mj-pop-width: var(--mj-menu-width);
    inset-inline-start: 0;
    transform: scale(0.98);
    transition: transform var(--mj-dur-menu) var(--mj-ease-out),
        opacity var(--mj-dur-menu-fade) var(--mj-ease-out) 200ms,
        visibility 0s linear var(--mj-dur-menu);
}

.mj-panel.is-open {
    transform: none;
    transition: transform var(--mj-dur-menu) var(--mj-ease-out),
        opacity var(--mj-dur-menu-fade) var(--mj-ease-out),
        visibility 0s linear 0s;
}

.mj-panel .mj-pop__surface,
.mj-panel.is-open .mj-pop__surface {
    transition: clip-path var(--mj-dur-menu) var(--mj-ease-out);
}

/* Menu rows -------------------------------------------------------------- */

.mj-eyebrow {
    margin: 0;
    padding: 0.625rem 0.875rem 0.375rem;
    color: var(--mj-ink-soft);
    font-size: 0.75rem;
    font-weight: 600;
}

[dir="ltr"] .mj-eyebrow {
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.mj-divider {
    height: 1px;
    margin: 0.375rem 0.5rem;
    border: 0;
    background: var(--mj-border);
}

.mj-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    min-height: 2.75rem;
    padding: 0.5rem 0.875rem;
    border: 0;
    border-radius: var(--mj-radius-inner);
    background: transparent;
    font-weight: 500;
    text-align: start;
    cursor: pointer;
    transition: background-color var(--mj-dur-fast) ease-out, color var(--mj-dur-fast) ease-out,
        transform var(--mj-dur-fast) ease-out;
}

.mj-row:active {
    transform: scale(0.985);
}

.mj-row.is-active {
    background: var(--mj-accent-tint);
    color: var(--mj-accent-ink);
}

.mj-row--icon {
    justify-content: flex-start;
}

.mj-row__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    background: var(--mj-wash);
    color: var(--mj-ink-soft);
    font-size: 0.875rem;
    transition: background-color var(--mj-dur-fast) ease-out, color var(--mj-dur-fast) ease-out;
}

.mj-row--danger {
    color: var(--mj-danger-ink);
}

.mj-row--danger .mj-row__icon {
    background: var(--mj-danger-tint);
    color: var(--mj-danger-ink);
}

.mj-profile {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: var(--mj-radius-inner);
    background: var(--mj-wash);
    transition: background-color var(--mj-dur-fast) ease-out;
}

.mj-profile .mj-avatar {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1rem;
}

.mj-profile__text {
    min-width: 0;
}

.mj-profile__name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.mj-profile__hint {
    display: block;
    color: var(--mj-ink-soft);
    font-size: 0.8125rem;
}

/* Dropdown rows: icon tile, label, hover hint, divider that draws in ------ */

.mj-panel__eyebrow {
    padding-block-start: 0.875rem;
}

.mj-panel__eyebrow:first-child {
    padding-block-start: 0.5rem;
}

.mj-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    min-height: 3.75rem;
    padding: 0.5rem 0.875rem;
    border-radius: var(--mj-radius-inner);
    cursor: pointer;
    transition: background-color var(--mj-dur-fast) ease-out, color var(--mj-dur-fast) ease-out,
        transform var(--mj-dur-fast) ease-out;
}

.mj-item:active {
    transform: scale(0.985);
}

.mj-item.is-active {
    background: var(--mj-accent-tint);
    color: var(--mj-accent-ink);
}

.mj-item__lead {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    min-width: 0;
}

.mj-item__tile {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--mj-radius-inner);
    background: var(--mj-accent-tint);
    color: var(--mj-accent-ink);
    font-size: 1rem;
    transition: background-color var(--mj-dur-fast) ease-out, color var(--mj-dur-fast) ease-out,
        transform var(--mj-dur-open) var(--mj-ease-out);
}

.mj-item__tile i {
    display: block;
    width: 1em;
    line-height: 1;
    text-align: center;
}

/* rtl.css adds margin on every .fa; menu tiles must stay optically centered. */
.mj-header .mj-item__tile :is(.fas, .far, .fa),
.mj-header .mj-row__icon :is(.fas, .far, .fa) {
    margin: 0;
}

.mj-item.is-active .mj-item__tile {
    background: var(--mj-accent);
    color: #fff;
}

.mj-item__label {
    font-size: 1.0625rem;
    font-weight: 600;
}

/* Right-aligned helper copy; it only appears on hover or keyboard focus. */
.mj-item__hint {
    max-width: 15rem;
    margin-inline-start: auto;
    color: var(--mj-ink-soft);
    font-size: 0.8125rem;
    text-align: end;
    opacity: 0;
    pointer-events: none;
    transition: opacity 300ms ease-out;
}

.mj-panel__item:focus-within .mj-item__hint {
    opacity: 1;
}

.mj-item__rule {
    height: 1px;
    margin: 0 0.875rem;
    border: 0;
    background: var(--mj-rule);
    transform: scaleX(0);
    transform-origin: var(--mj-origin-start);
    transition: transform 200ms ease-out;
}

.mj-header.is-menu-open .mj-item__rule {
    transform: scaleX(1);
    transition: transform var(--mj-dur-rule) var(--mj-ease-out)
        calc(200ms + var(--mj-stagger) * var(--mj-i, 0));
}

/* Accordion (Materials inside the compact panel) ------------------------- */

.mj-acc > summary {
    list-style: none;
}

.mj-acc > summary::-webkit-details-marker {
    display: none;
}

.mj-acc[open] > summary > .mj-chevron {
    transform: rotate(180deg);
}

.mj-acc__list {
    display: grid;
    gap: 0.125rem;
    padding: 0.25rem 0 0.375rem;
    padding-inline-start: 0.75rem;
}

.mj-acc[open] .mj-acc__list {
    animation: mj-reveal 220ms var(--mj-ease-out);
}

@keyframes mj-reveal {
    from {
        opacity: 0;
        transform: translateY(-0.25rem);
    }
}

.mj-row--sub {
    min-height: 2.5rem;
    font-weight: 400;
    color: var(--mj-ink);
}

/* Department grid (desktop Materials popover) ---------------------------- */

.mj-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.125rem;
}

.mj-grid .mj-row {
    min-height: 2.5rem;
    font-weight: 400;
}

.mj-grid .mj-row--lead {
    grid-column: 1 / -1;
    font-weight: 600;
}

/* Panel footer (compact only) -------------------------------------------- */

.mj-panel__foot {
    display: grid;
    gap: 0.5rem;
    padding: 0.5rem 0.5rem 0.25rem;
}

/* Interaction states ------------------------------------------------------ */

@media (hover: hover) {
    .mj-link:not(.is-active):hover,
    .mj-more:hover,
    .mj-user:hover,
    .mj-btn--ghost:hover,
    .mj-btn--outline:hover,
    .mj-row:not(.is-active):hover,
    .mj-item:not(.is-active):hover {
        background: var(--mj-wash);
    }

    .mj-panel__item:hover .mj-item__hint {
        opacity: 1;
    }

    .mj-item:hover .mj-item__tile {
        transform: scale(1.06);
    }

    .mj-btn--primary:hover {
        background: var(--mj-accent-hover);
    }

    .mj-link.is-active:hover,
    .mj-item.is-active:hover,
    .mj-row.is-active:hover {
        background: rgba(139, 92, 246, 0.16);
    }

    .mj-profile:hover {
        background: rgba(15, 23, 42, 0.08);
    }

    .mj-row--danger:hover {
        background: var(--mj-danger-tint);
    }

    .mj-row:hover .mj-row__icon {
        background: var(--mj-accent-tint);
        color: var(--mj-accent-ink);
    }

    .mj-row--danger:hover .mj-row__icon {
        background: rgba(220, 38, 38, 0.14);
        color: var(--mj-danger-ink);
    }
}

.mj-header :is(a, button, summary):focus-visible {
    outline: 2px solid var(--mj-accent);
    outline-offset: 2px;
}

/* Desktop: inline nav + collapse-on-scroll -------------------------------- */

@media (min-width: 992px) {
    .mj-nav {
        display: block;
        transition: opacity 320ms ease-out 120ms, visibility 0s linear 0s;
    }

    .mj-header.is-ready .mj-pill--nav::before {
        transition: inset-inline-end var(--mj-dur-collapse) var(--mj-ease-out);
    }

    .mj-header:not(.is-ready) .mj-more {
        transition: none;
    }

    .mj-header.is-collapsed .mj-pill--nav {
        --mj-offset: var(--mj-nav-width, 0px);
    }

    .mj-header.is-collapsed .mj-more {
        translate: calc(var(--mj-nav-width, 0px) * var(--mj-dir) * -1) 0;
    }

    .mj-header.is-collapsed .mj-nav {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 160ms ease-out, visibility 0s linear 160ms;
    }

    /* Open: the pill returns to full width, the inline links step aside and
       the dropdown carries the whole list. Declared after the collapsed rules. */
    .mj-header.is-menu-open .mj-pill--nav {
        --mj-offset: 0px;
    }

    .mj-header.is-menu-open .mj-more {
        translate: 0 0;
    }

    .mj-header.is-menu-open .mj-nav {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity var(--mj-dur-menu) var(--mj-ease-out), visibility 0s linear var(--mj-dur-menu);
    }

    .mj-more__label {
        display: block;
    }

    .mj-show-compact {
        display: none !important;
    }
}

/* Helper copy needs room: hidden below 1023px, as in the reference. */
@media (max-width: 63.9375rem) {
    .mj-item__hint {
        display: none;
    }
}

/* Compact: two small pills, everything else lives in the dropdown --------- */

@media (max-width: 991.98px) {
    .mj-hide-compact {
        display: none !important;
    }

    /* Butter-style mobile chrome (home + all app pages). */
    .mj-header {
        --mj-pill-height: 3.5rem;
        --mj-control-height: 2.5rem;
        --mj-radius-pill: 1.35rem;
        padding-block-start: max(0.85rem, env(safe-area-inset-top));
        padding-block-end: 0.35rem;
    }

    .mj-spacer {
        height: calc(max(0.85rem, env(safe-area-inset-top)) + 0.35rem + var(--mj-pill-height));
    }

    .mj-shell {
        width: 100%;
        justify-content: center;
        gap: 0.75rem;
    }

    .mj-shell:has(.mj-account) {
        justify-content: space-between;
    }

    .mj-pill--actions:not(:has(.mj-account)) {
        display: none !important;
    }

    .mj-pill--nav {
        flex: 0 1 auto;
        width: min(19.5rem, calc(100vw - 3rem));
        justify-content: space-between;
        gap: 0.5rem;
        padding-inline: 0.35rem 0.45rem;
        min-height: var(--mj-pill-height);
    }

    .mj-pill--nav::before {
        --mj-offset: 0;
        inset-inline-end: 0;
        border-radius: var(--mj-radius-pill);
    }

    .mj-logo {
        height: var(--mj-control-height);
        padding-inline: 0.55rem 0.35rem;
    }

    .mj-logo img {
        height: 1.65rem;
    }

    .mj-more {
        width: var(--mj-control-height);
        height: var(--mj-control-height);
        margin-inline-start: 0;
    }

    .mj-more svg {
        width: 1.35rem;
        height: 1.35rem;
    }

    .mj-pill--actions:has(.mj-account) {
        flex: 0 0 auto;
        --mj-pill-height: 3.5rem;
    }


    .mj-panel {
        inset-inline: 0;
        width: 100%;
    }

    .mj-panel .mj-pop__surface {
        max-height: calc(100dvh - 6.5rem);
    }

    .mj-panel__eyebrow {
        text-align: center;
    }

    .mj-panel .mj-item {
        position: relative;
        justify-content: flex-start;
        align-items: center;
        padding-inline: 0.875rem 2.75rem;
    }

    .mj-panel .mj-item__lead {
        justify-content: flex-start;
        width: 100%;
        max-width: 100%;
        gap: 0.875rem;
    }

    .mj-panel .mj-item__tile {
        flex: none;
    }

    .mj-panel .mj-item__label {
        flex: 1 1 auto;
        text-align: start;
    }

    .mj-panel .mj-panel__more .mj-row {
        justify-content: center;
        text-align: center;
    }

    .mj-panel .mj-acc > summary.mj-item > .mj-chevron {
        position: absolute;
        inset-block-start: 50%;
        inset-inline-end: 0.875rem;
        margin-block-start: -0.375rem;
    }

    .mj-panel .mj-acc[open] > summary.mj-item > .mj-chevron {
        transform: rotate(180deg);
    }

    .mj-user {
        padding-inline: 0.25rem;
    }

    .mj-btn--login {
        background: var(--mj-accent);
        color: #fff;
        font-weight: 600;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 1px 2px rgba(109, 40, 217, 0.32);
    }

    .mj-btn--login:active {
        background: var(--mj-accent-press);
    }
}

/* Motion preferences ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    .mj-header,
    .mj-header *,
    .mj-header *::before {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
    }
}