/* Softness and motion: what the previous interface felt like. Everything here is additive (shadows, transitions,
   short entrances) and animates only transform, opacity and box-shadow, so nothing shifts the layout. All of it is
   switched off under prefers-reduced-motion. Values come from the tokens in design-tokens.css / theme.css. */

/* ---- Soft cards: the shadow of a resting card -------------------------------------------------------------- */
.panel,
.tile,
.session,
.watchlist-card,
.dashboard-attention-row,
.hero {
    box-shadow: var(--ui-card-shadow);
}

/* The diagonal wash of the previous interface: a pale mint tint (light) or a slightly lifted green (dark) into the card colour. */
.tile,
.session,
.watchlist-card,
.dashboard-attention-row,
.hero {
    background-image: var(--ui-card-fill);
}

/* ---- Hover / focus / press feedback ------------------------------------------------------------------------ */
.btn,
.chip,
.site-chip,
.pager-link,
.chart-period,
.tile,
.watchlist-card,
.dashboard-attention-row,
.panel,
.session,
.site-nav a,
.private-nav a,
.profile-nav a,
.admin-nav a,
.consent-link,
input,
select,
textarea {
    transition:
        background-color var(--ui-motion-normal) var(--ui-ease-standard),
        border-color var(--ui-motion-normal) var(--ui-ease-standard),
        color var(--ui-motion-normal) var(--ui-ease-standard),
        box-shadow var(--ui-motion-normal) var(--ui-ease-standard),
        transform var(--ui-motion-fast) var(--ui-ease-standard);
}

.tile:hover,
.watchlist-card:hover,
.dashboard-attention-row:hover {
    border-color: var(--ui-hover-border);
    background-color: var(--ui-hover-surface);
    box-shadow: var(--ui-card-shadow-hover);
    transform: translateY(var(--ui-hover-lift));
}

.btn:hover:not(:disabled):not([aria-disabled="true"]),
.chip:hover,
.site-chip:hover,
.pager-link:hover,
.chart-period:hover {
    box-shadow: var(--ui-card-shadow-elevated);
    transform: translateY(var(--ui-button-lift));
}

.btn:active:not(:disabled),
.chip:active,
.chart-period:active,
.tile:active,
.watchlist-card:active {
    transform: none;
    box-shadow: var(--ui-card-shadow);
}

.btn-primary,
.btn.btn-primary {
    box-shadow: var(--ui-button-primary-shadow);
}

.btn:disabled,
.btn[aria-busy="true"] {
    transform: none;
    box-shadow: none;
}

.btn[aria-busy="true"] {
    cursor: progress;
}

input:hover:not(:disabled):not([type="checkbox"]):not([type="radio"]),
select:hover:not(:disabled),
textarea:hover:not(:disabled) {
    border-color: var(--ui-hover-border);
}

input:focus-visible:not([type="checkbox"]):not([type="radio"]),
select:focus-visible,
textarea:focus-visible {
    border-color: var(--green);
}

.data-table tbody tr {
    transition: background-color var(--ui-motion-fast) var(--ui-ease-standard);
}

.data-table tbody tr:hover {
    background-color: var(--ui-hover-surface);
}

.chart-return,
.chart-dot,
.chart-tip {
    transition: border-color var(--ui-motion-normal) var(--ui-ease-standard);
}

/* Lifting a card under a finger is noise on touch screens. */
@media (hover: none), (max-width: 800px) {
    .tile:hover,
    .watchlist-card:hover,
    .dashboard-attention-row:hover,
    .btn:hover:not(:disabled),
    .chip:hover,
    .chart-period:hover {
        transform: none;
    }
}

/* ---- Header: a soft shadow once the page has scrolled (site.js sets .is-scrolled) -------------------------- */
.site-header {
    transition: box-shadow var(--ui-motion-normal) var(--ui-ease-standard);
}

.site-header.is-scrolled {
    box-shadow: var(--ui-header-shadow);
}

/* The theme switch is instant: site.js adds this class for the moment of the switch only. */
/* Justified !important: it has to beat every component's own transition list. */
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
    transition: none !important;
}

/* ---- Page transitions ---------------------------------------------------------------------------------------
   Browsers that support cross-document view transitions fade between pages with no script; the others (and
   everyone, lightly) get a short entrance of the main column. */
@view-transition {
    navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: var(--ui-motion-normal);
    animation-timing-function: var(--ui-ease-standard);
}

.site-main {
    animation: fundbot-page-in var(--ui-motion-page) ease-out backwards;
}

@keyframes fundbot-page-in {
    from { opacity: 1; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

.tile-grid > * {
    animation: fundbot-reveal-up .46s var(--ui-ease-page) backwards;
}

.tile-grid > :nth-child(2) { animation-delay: 70ms; }
.tile-grid > :nth-child(3) { animation-delay: 140ms; }
.tile-grid > :nth-child(4) { animation-delay: 210ms; }
.tile-grid > :nth-child(5) { animation-delay: 280ms; }
.tile-grid > :nth-child(n + 6) { animation-delay: 350ms; }

@keyframes fundbot-reveal-up {
    from { opacity: .6; transform: translate3d(0, 14px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* ---- Loading feedback: thin progress bar (site.js sets .is-loading on it) ----------------------------------- */
.page-progress {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: var(--ui-z-route-transition);
    height: 4px;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--ui-motion-normal) var(--ui-ease-standard);
}

.page-progress.is-loading {
    opacity: 1;
}

.page-progress::before {
    content: "";
    display: block;
    width: 40%;
    height: 100%;
    border-radius: 0 999px 999px 0;
    background: var(--green);
    box-shadow: 0 0 10px var(--green);
    transform: translateX(-110%);
}

.page-progress.is-loading::before {
    animation: fundbot-progress 1.35s var(--ui-ease-emphasized) infinite;
}

@keyframes fundbot-progress {
    0% { transform: translateX(-110%); }
    55%, 100% { transform: translateX(280%); }
}

/* Slow navigation: the page dims softly and a spinner shows in the middle. */
.page-loading {
    position: fixed;
    inset: 0;
    z-index: var(--ui-z-route-transition);
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--paper) 55%, transparent);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--ui-motion-normal) var(--ui-ease-standard);
}

.page-loading.is-visible {
    opacity: 1;
}

.page-loading-spinner {
    width: 44px;
    height: 44px;
    border: 4px solid color-mix(in srgb, var(--green) 24%, transparent);
    border-top-color: var(--green);
    border-radius: 50%;
    box-shadow: var(--ui-card-shadow);
    animation: fundbot-spin .72s linear infinite;
}

/* A submitting button shows a small spinner and ignores further clicks (site.js sets aria-busy). */
.btn[aria-busy="true"]::after {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-inline-start: .5em;
    vertical-align: -.15em;
    border: 2px solid color-mix(in srgb, currentColor 28%, transparent);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: fundbot-spin .72s linear infinite;
}

@keyframes fundbot-spin {
    to { transform: rotate(360deg); }
}

/* Placeholder while a block loads (opt in with .skeleton). */
.skeleton {
    border-radius: var(--ui-card-radius);
    background: linear-gradient(90deg, var(--ui-skeleton-base) 0%, var(--ui-skeleton-base) 28%, var(--ui-skeleton-highlight) 50%, var(--ui-skeleton-base) 72%, var(--ui-skeleton-base) 100%);
    background-size: 220% 100%;
    animation: fundbot-shimmer 1.2s var(--ui-ease-standard) infinite;
}

@keyframes fundbot-shimmer {
    to { background-position: -220% 0; }
}

/* ---- Messages: the outcome of an action slides in at the top right, then leaves ----------------------------- */
.toast-line {
    position: fixed;
    top: calc(76px + 14px);
    right: 18px;
    z-index: var(--ui-z-toast);
    width: min(360px, calc(100vw - 36px));
    margin: 0;
    overflow: hidden;
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface-raised);
    box-shadow: var(--ui-toast-shadow);
    animation: fundbot-toast-in var(--ui-motion-toast) ease both;
    transition: opacity var(--ui-motion-normal) var(--ui-ease-standard), transform var(--ui-motion-normal) var(--ui-ease-standard);
}

.toast-line:not(.is-error)::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 3px;
    background: var(--green);
    transform-origin: left;
    animation: fundbot-toast-timeout var(--ui-toast-lifetime) linear both;
}

.toast-line.is-leaving {
    opacity: 0;
    transform: translateY(-8px);
}

@keyframes fundbot-toast-in {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fundbot-toast-timeout {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

/* ---- Dialogs ------------------------------------------------------------------------------------------------ */
.legal-dialog,
.dashboard-dialog {
    border-radius: var(--ui-modal-radius);
    box-shadow: var(--ui-modal-shadow);
}

dialog[open] {
    animation: fundbot-dialog-in var(--ui-motion-normal) var(--ui-ease-standard) both;
}

dialog[open]::backdrop {
    backdrop-filter: var(--ui-modal-backdrop-filter);
    animation: fundbot-backdrop-in var(--ui-motion-normal) var(--ui-ease-standard) both;
}

@keyframes fundbot-dialog-in {
    from { opacity: 0; transform: translateY(10px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes fundbot-backdrop-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ---- Back to top (site.js adds the button once the page is scrolled) ---------------------------------------- */
.to-top {
    position: fixed;
    right: max(18px, env(safe-area-inset-right));
    bottom: max(24px, env(safe-area-inset-bottom));
    z-index: var(--ui-z-page-scroll);
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 1px solid var(--ui-card-border);
    border-radius: 50%;
    background: var(--ui-surface-raised);
    color: var(--ink);
    box-shadow: var(--ui-card-shadow-elevated);
    cursor: pointer;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity var(--ui-motion-normal) var(--ui-ease-standard), transform var(--ui-motion-normal) var(--ui-ease-standard), border-color var(--ui-motion-normal) var(--ui-ease-standard);
}

.to-top.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.to-top:hover {
    border-color: var(--ui-hover-border);
}

/* ---- Password reveal ---------------------------------------------------------------------------------------- */
.pw-field {
    position: relative;
    display: block;
}

.pw-field > input {
    padding-inline-end: 3rem;
}

.pw-toggle {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    min-width: 2.75rem;
    border: 0;
    border-radius: 0 var(--ui-control-radius) var(--ui-control-radius) 0;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: var(--ui-font-sm);
    cursor: pointer;
}

.pw-toggle:hover {
    color: var(--ink);
}

/* ---- Reduced motion: no movement, no shimmer, no blur ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }

    .tile:hover,
    .watchlist-card:hover,
    .dashboard-attention-row:hover,
    .btn:hover,
    .chip:hover,
    .chart-period:hover {
        transform: none;
    }

    dialog[open]::backdrop {
        backdrop-filter: none;
    }

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