/* Parallax — its layout and the controls every page shares. The family's layout primitives (.stack, .cluster,
   .grid-auto), the signature stroke and the accessibility helpers come from AD.Ui (base.css). A component's own CSS
   lives in its .razor.css. Colours, sizes and durations come from tokens.css only. */

/* The page column, and the narrower column of running text. */
/* The page, its reading measure and its title are the family's (AD.Ui base.css). */

/* The card, its state rule and the card that opens are the family's (AD.Ui base.css); Parallax's accent shadow is
   its knob (tokens.css). */

/* The demonstration's notice: a slim strip on the band above the bar, read once, gone with the first scroll. */
.demo-ribbon {
    padding: var(--space-4) var(--space-16);
    background: var(--clr-band);
    border-bottom: 1px solid var(--clr-border);
    color: var(--clr-text-secondary);
    font-size: var(--fs-xs);
    text-align: center;
}

/* A counted figure on a band: its label under it, the figure in the serif (a profile's, the community's week). */
.stat {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--space-12) var(--space-16);
    border-radius: var(--radius-lg);
    background: var(--clr-band);
}

.stat dt {
    color: var(--clr-text-secondary);
    font-size: var(--fs-sm);
}

.stat dd {
    font-family: var(--font-serif);
    font-size: var(--fs-xl);
    line-height: 1.1;
}

/* No figure yet: a dash, quieter than a figure. */
.stat-none {
    color: var(--clr-text-muted);
}
/* The band inset: a quote, a note, a coach's remark — the cream band and a neutral rule on its leading edge (a state
   would take its role colour on the rule, never on the band). Each component keeps its padding and its layout. */
.inset {
    border-left: 4px solid var(--clr-border-strong);
    background: var(--clr-band);
}

/* A quoted message: what a decision or a reply refers to. */
.excerpt {
    padding: var(--space-8) var(--space-16);
    color: var(--clr-text-secondary);
    white-space: pre-line;
}

/* An inline step inside a card: a confirmation that names what goes, a report form. Never a hand-made dialog. */

/* Labels and their values, side by side; on a phone, the label on its own line above its value. */
.facts-list {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: var(--space-6) var(--space-16);
}

.facts-list:empty {
    display: none;
}

.facts-list dt {
    color: var(--clr-text-muted);
}

.facts-list dd {
    overflow-wrap: anywhere;
}

@media (max-width: 640px) {
    .facts-list {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-2);
    }

    .facts-list dd + dt {
        margin-top: var(--space-8);
    }
}

/* ── Titles and running text. The page's title is its one hero: the largest step, the phone's one step below. ── */

a {
    transition: color var(--dur-2) var(--ease-out), text-underline-offset var(--dur-2) var(--ease-out);
}

@media (hover: hover) {
    a:hover {
        text-underline-offset: 0.3em;
    }
}

/* .lead and .muted are the family's (AD.Ui base.css); Parallax says what is muted a step smaller. */
.muted {
    font-size: var(--fs-sm);
}

/* The buttons, the field's control and the check are the family's (AD.Ui base.css). */

/* ── The language control of the bar (LanguageMenu over AD.Ui's LanguageSwitch), the showcase's and the app's, as
   LumoHub draws it: the current code and a caret in a pill on the frame, opening a sheet of the languages in their own
   names, the current one in the highlight after the signature stroke. ── */
.lang-menu {
    position: relative;
}

.lang-menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-6);
    min-height: var(--target);
    padding: 0 var(--space-12) 0 var(--space-16);
    border: 1px solid var(--clr-frame-raised);
    border-radius: var(--radius-pill);
    color: var(--clr-frame-text);
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: 0.05em;
    list-style: none;
    cursor: pointer;
    transition: background-color var(--dur-2) var(--ease-out);
}

.lang-menu-toggle::-webkit-details-marker {
    display: none;
}

.lang-menu-caret {
    inline-size: 0.75rem;
    block-size: 0.75rem;
    transition: transform var(--dur-2) var(--ease-out);
}

.lang-menu[open] .lang-menu-caret {
    transform: rotate(180deg);
}

.lang-menu[open] .lang-menu-toggle {
    background: var(--clr-frame-raised);
}

.lang-menu-list {
    position: absolute;
    inset-inline-end: 0;
    top: calc(100% + var(--space-6));
    z-index: var(--layer-bar);
    display: flex;
    flex-direction: column;
    min-inline-size: 11rem;
    padding: var(--space-6);
    border: 1px solid var(--clr-frame-raised);
    border-radius: var(--radius-lg);
    background: var(--clr-frame);
    box-shadow: var(--shadow-lift);
}

.lang-menu-item {
    display: flex;
    align-items: center;
    min-height: var(--target);
    padding: 0 var(--space-12);
    border: 0;
    border-radius: var(--radius-md);
    background: none;
    color: var(--clr-frame-text-muted);
    font: inherit;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
}

.lang-menu-item[aria-current="true"] {
    color: var(--clr-highlight);
    font-weight: 600;
}

.lang-menu-item[aria-current="true"]::before {
    content: "";
    inline-size: var(--signature-width, 0.875rem);
    block-size: var(--signature-height, var(--ring-width));
    margin-inline-end: var(--space-8);
    border-radius: var(--radius-xs);
    background: var(--clr-highlight);
    transform: skewX(-30deg);
}

@media (hover: hover) {
    .lang-menu-toggle:hover,
    .lang-menu-item:hover {
        background: var(--clr-frame-raised);
        color: var(--clr-frame-text);
    }

    .lang-menu-item[aria-current="true"]:hover {
        color: var(--clr-highlight);
    }
}

/* ── THE counts and gestures under a post, as a network shows them (Engagement under an event's post, ArgumentCard
   under a message): each an icon or a word and its count, a toggle lit while it holds. Under 640 px the long words go,
   still read aloud, and the row keeps to one line. ── */
.engagement {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-16);
    margin: 0;
    color: var(--clr-text-muted);
    font-size: var(--fs-sm);
}

.engagement-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    min-width: var(--target);
    min-height: var(--target);
    padding: 0 var(--space-4);
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: inherit;
    font: inherit;
    text-decoration: none;
    transition: color var(--dur-1) var(--ease-out);
}

button.engagement-item {
    cursor: pointer;
}

a.engagement-item:active,
button.engagement-item:active {
    color: var(--clr-accent);
}

/* A message the person shares: the toggle stays lit, as the active place. */
.engagement-item[aria-pressed="true"] {
    color: var(--clr-accent);
}

@media (hover: hover) {
    a.engagement-item:hover,
    button.engagement-item:hover {
        color: var(--clr-accent);
    }
}

.engagement-count {
    font-variant-numeric: tabular-nums;
}

/* The row's last gesture at its far end (a report): apart from the reactions. */
.engagement-end {
    margin-left: auto;
}

/* A word a symbol replaces on a phone (Δ): shown on a desk only. */
.engagement-symbol {
    display: none;
}

@media (max-width: 640px) {
    .engagement-word {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .engagement-symbol {
        display: inline;
    }
}

/* ── The bar's tools: the language menu and the theme switch, side by side. ── */
.bar-tools {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

/* ── The theme switch (ThemeSwitch), LumoHub's: a track on the frame, a sun and a moon, a gold knob whose place follows
   <html data-theme> in CSS alone. ── */
.theme-switch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--target);
    min-height: var(--target);
    padding: 0;
    border: 0;
    background: none;
    color: var(--clr-frame-text-muted);
    cursor: pointer;
}

.theme-switch-track {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    inline-size: 3.25rem;
    block-size: 1.75rem;
    padding: 0 var(--space-6);
    border: 1px solid var(--clr-frame-raised);
    border-radius: var(--radius-pill);
    background: var(--clr-frame-raised);
}

.theme-switch-sun,
.theme-switch-moon {
    position: relative;
    z-index: 1;
    inline-size: 0.875rem;
    block-size: 0.875rem;
}

.theme-switch-knob {
    position: absolute;
    top: 0.1875rem;
    inset-inline-start: 0.1875rem;
    inline-size: 1.3rem;
    block-size: 1.3rem;
    border-radius: var(--radius-pill);
    background: var(--clr-highlight);
    transition: transform var(--dur-3) var(--ease-spring);
}

/* The knob covers the current theme's drawing, which then reads on the gold. */
:root[data-theme="dark"] .theme-switch-knob {
    transform: translateX(1.5rem);
}

:root:not([data-theme="dark"]) .theme-switch-sun,
:root[data-theme="dark"] .theme-switch-moon {
    color: var(--clr-frame);
}

@media (hover: hover) {
    .theme-switch:hover .theme-switch-track {
        border-color: var(--clr-frame-text-muted);
    }
}

/* ── The family's marks on the frame: the signature stroke before the current place, in the bar and in the phone's tab
   bar (DESIGN-SYSTEM §1: the stroke points to where you are, as on LumoHub's and Atlas Digital's menus). ── */
.bar-link[aria-current="page"]::before,
.tabbar-item[aria-current="page"] .tabbar-label::before {
    content: "";
    display: inline-block;
    flex: none;
    inline-size: var(--signature-width, 0.875rem);
    block-size: var(--signature-height, var(--ring-width));
    margin-inline-end: var(--space-8);
    vertical-align: middle;
    border-radius: var(--radius-xs);
    background: var(--clr-highlight);
    transform: skewX(-30deg);
    animation: draw var(--dur-3) var(--ease-out) backwards;
}

.tabbar-item[aria-current="page"] .tabbar-label::before {
    margin-inline-end: var(--space-6);
}

/* The endorsement (Endorsement): the publisher's name as Atlas Digital's wordmark, on the frame. The sentence spaces
   it ("of {0}", "d'{0}"): a margin of its own put a gap after the French elision ("d' ATLAS"). */
.endorsement {
    color: var(--clr-frame-text-muted);
}

.atlas-mark {
    display: inline-flex;
    align-items: center;
    min-height: var(--target);
    font-size: var(--fs-sm);
    letter-spacing: 0.06em;
    text-decoration: none;
    text-transform: uppercase;
}

.atlas-mark-first {
    color: var(--clr-atlas-red);
    font-weight: 600;
}

.atlas-mark-rest {
    color: var(--clr-atlas-gold);
    font-weight: 400;
    white-space: pre;
}

@media (hover: hover) {
    .atlas-mark:hover {
        text-decoration: underline;
        text-decoration-color: var(--clr-atlas-gold);
    }
}

/* ── The boot line until the runtime renders, and Blazor's own error bar. ── */
.boot {
    display: grid;
    place-items: center;
    min-height: 60dvh;
    padding: var(--space-24);
    color: var(--clr-text-muted);
    text-align: center;
}

#app:has(> *) ~ .boot-loading {
    display: none;
}

/* The runtime's wait: the frame's bar in its place, so that nothing moves when the app's arrives, and the mark. */
.boot-loading {
    position: relative;
    gap: var(--space-12);
    align-content: center;
    min-height: 80dvh;
}

/* At the wait's top, which is the page's or under the demonstration's strip: where the app's bar will stand. */
.boot-loading::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: var(--bar-height);
    background: var(--clr-frame);
}

.boot-mark {
    width: 6rem;
    height: 6rem;
    margin-block: -1.5rem;
    color: var(--clr-accent);
}

.boot-stroke-moving {
    animation: boot-parallax 1.6s var(--ease-out) infinite alternate;
}

@keyframes boot-parallax {
    to {
        transform: translateX(-6px);
    }
}

/* Blazor's error bar is the family's, in the notice's anatomy (AD.Ui base.css). */

/* ── The framing axis's nuances (AxisNuance): a mark takes the step of its position, from one pole to the other. ── */
.nuance-1 {
    --nuance: var(--clr-axis-1);
}

.nuance-2 {
    --nuance: var(--clr-axis-2);
}

.nuance-3 {
    --nuance: var(--clr-axis-3);
}

.nuance-4 {
    --nuance: var(--clr-axis-4);
}

.nuance-5 {
    --nuance: var(--clr-axis-5);
}

/* ── Motion. A page's sections rise in one after the other, and so do the items of a list marked .rise: each takes
   its rank in --order, which its descendants read too (an axis's dot pops after its row). Entrances fill backwards
   only: once in place an element keeps no transform, so nothing inside it loses a fixed or sticky position. The one
   reduced-motion rule (AD.Ui base.css) lands everything at once. ── */
@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(0.75rem);
    }
}

/* A choice taken: a reaction pressed, a chip chosen, the current place of the navigation. */
@keyframes pop {
    40% {
        scale: 1.1;
    }
}

/* The tab bar (AD.Ui's TabBar, on the frame): a press lights its cell, the current place's icon springs. */
.tabbar-item {
    padding: var(--space-4) var(--space-2);
}

.tabbar-item:active {
    background: var(--clr-frame-raised);
}

.tabbar-item[aria-current="page"] .icon {
    animation: pop var(--dur-3) var(--ease-spring);
}

/* A mark that appears: an axis's dot. */
@keyframes appear {
    from {
        opacity: 0;
        scale: 0;
    }
}

/* A line drawn from its start: the signature stroke, the axis's gradient. */
@keyframes draw {
    from {
        scale: 0 1;
    }
}

.page > *,
.rise > * {
    animation: rise var(--dur-4) var(--ease-out) backwards;
    animation-delay: calc(var(--stagger) * var(--order, 0));
}

:is(.page, .rise) > :nth-child(2) {
    --order: 1;
}

:is(.page, .rise) > :nth-child(3) {
    --order: 2;
}

:is(.page, .rise) > :nth-child(4) {
    --order: 3;
}

:is(.page, .rise) > :nth-child(5) {
    --order: 4;
}

:is(.page, .rise) > :nth-child(6) {
    --order: 5;
}

:is(.page, .rise) > :nth-child(7) {
    --order: 6;
}

:is(.page, .rise) > :nth-child(8) {
    --order: 7;
}

:is(.page, .rise) > :nth-child(9) {
    --order: 8;
}

:is(.page, .rise) > :nth-child(n + 10) {
    --order: 9;
}

details[open] > :not(summary) {
    animation: rise var(--dur-3) var(--ease-out) backwards;
}

.btn[aria-pressed="true"],
.chip[aria-pressed="true"] {
    animation: pop var(--dur-3) var(--ease-spring);
}

.signature::before {
    transform-origin: left center;
    animation: draw var(--dur-4) var(--ease-spring) backwards;
    animation-delay: calc(var(--stagger) * (var(--order, 0) + 2));
}

/* ── A page's head with its scene: the heading and the lead, the drawing beside them on a desk; a phone keeps the
   room for the content. ── */
.page-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: end;
    gap: var(--space-24);
}

/* Above the scene's own display (Illustration's scoped .art): hidden on a phone, shown on a desk. */
.page-head > .page-head-art.art {
    display: none;
}

@media (min-width: 901px) {
    .page-head {
        grid-template-columns: minmax(0, 1fr) 11rem;
    }

    .page-head > .page-head-art.art {
        display: block;
    }
}

/* A page whose content is itself a drawn state (StateCard) shows one scene, not two. */
.page:has(.state:not(.state-compact)) .page-head > .page-head-art.art {
    display: none;
}