/* Motion and polish, the "Apple" feel: one easing curve, short durations, a hair of lift and press feedback, a soft rise when a page
   arrives and a cross-fade between full page loads. Everything is switched off for people who ask their device for less motion.
   Loaded on every page (base.html + the app layout), after the other stylesheets. */
:root {
    --ease-out: cubic-bezier(.22, 1, .36, 1);
    --dur-fast: .16s;
    --dur: .28s;
}
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }

/* Full page loads cross-fade instead of flashing white (Chrome, Edge, Safari 18+); the sidebar stays where it is. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .2s; animation-timing-function: var(--ease-out); }
.nc-sidebar { view-transition-name: nc-sidebar; }

/* New content rises in: on first load and on every in-app navigation (the content area is swapped in place). */
@keyframes nc-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
#content > * { animation: nc-rise var(--dur) var(--ease-out) both; }
#content > *:nth-child(2) { animation-delay: .035s; }
#content > *:nth-child(3) { animation-delay: .07s; }
#content > *:nth-child(4) { animation-delay: .105s; }
#content > *:nth-child(n+5) { animation-delay: .14s; }

/* One shared feel for everything you can touch. */
a, button, [role="button"], input, textarea, select, sl-button::part(base), .ui-btn, .ui-card, .sc-plan, .sc-card, .fx-card, .nc-pill, .co-method, .co-chip {
    transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
                box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
/* a gentle lift on cards you can choose */
.sc-plan:hover, .fx-card:hover, .co-method:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(31, 41, 55, .09); }
/* and a small press on buttons */
sl-button:active::part(base), .ui-btn:active, .co-method:active, .co-chip:active { transform: scale(.985); }
:focus-visible { outline-offset: 3px; }

/* ---- Sidebar ------------------------------------------------------------------------------------------------------------------------ */
/* the label gives way (ellipsis) before the pill does, so "Owner" / "No plan" are never cut off at the right edge */
/* more room for the row: a slimmer side padding and label gap (the pill used to be squeezed against the right edge) */
.nc-sidebar:not(.nc-sidebar--collapsed) .nc-sidebar-body { padding-left: .7rem; padding-right: .7rem; }
.nc-sidebar sl-button::part(label) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8125rem; padding-left: .5rem; }
.nc-sidebar sl-button[variant="primary"]::part(label) { font-weight: 600; }
.nc-sidebar sl-button::part(suffix) { flex: 0 0 auto; margin-left: auto; padding-left: .5rem; }
.nc-sidebar .nc-pill { flex: 0 0 auto; }
.nc-pill--green, .nc-pill--red { display: inline-flex; align-items: center; max-width: none; overflow: visible; height: 20px; line-height: 1; padding: 0 8px; }
/* the active accent bar sits inside the highlighted row instead of hanging outside it */
.nc-sidebar sl-button::before { left: 3px; width: 3px; border-radius: 3px; }
.nc-sidebar sl-button[variant="primary"]::before { height: 46%; }
/* the collapse button lines up with the brand row */
.nc-sidebar-toggle { top: 20px; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    #content > * { animation: none; }
    .sc-plan:hover, .fx-card:hover, .co-method:hover { transform: none; }
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
    @view-transition { navigation: none; }
}