/* =========================================================================
 * motion.css - how things move in My DailyEdge. One place for the timings, the curves and the keyframes; lib/motion.js does the parts CSS
 * cannot. Rules we hold ourselves to:
 *   - animate on ARRIVAL (a tab change, a press, a save), never on every redraw: the app redraws screens whenever data arrives
 *   - only transform, opacity and clip-path, so a phone stays smooth
 *   - exits are about 60% as long as entrances
 *   - nothing loops except a loading shimmer and the live dot
 *   - with "reduce motion" on, nothing moves (the block at the end)
 * Loaded after styles.css, so it can refine what is there.
 * ========================================================================= */

:root {
  --ease-settle: cubic-bezier(.2, .8, .2, 1);
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-exit: cubic-bezier(.4, 0, 1, 1);
  --dur-press: 90ms;
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;
  --dur-exit: 160ms;
}

/* ---- keyframes ------------------------------------------------------------------------------------------------------ */
@keyframes mo-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes mo-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes mo-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes mo-drop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes mo-modal-in { from { opacity: 0; transform: translateY(12px) scale(.965); } to { opacity: 1; transform: none; } }
@keyframes mo-modal-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(8px) scale(.975); } }
@keyframes mo-sheet-in { from { transform: translateY(100%); } to { transform: none; } }
@keyframes mo-sheet-out { from { transform: none; } to { transform: translateY(100%); } }
@keyframes mo-in-fwd { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
@keyframes mo-in-back { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }
@keyframes mo-pop { 0% { transform: scale(.55); opacity: 0; } 60% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1); } }
@keyframes mo-wash { 0% { background-color: rgba(42, 120, 214, .2); } 100% { background-color: transparent; } }
@keyframes mo-shimmer { from { background-position: -240px 0; } to { background-position: 240px 0; } }
@keyframes mo-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes mo-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes mo-donut { from { opacity: 0; transform: rotate(-80deg) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes mo-morph { 0% { opacity: .55; transform: scale(.985); } 100% { opacity: 1; transform: none; } }
@keyframes mo-menu-in { from { opacity: 0; transform: scale(.94) translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes mo-turn { from { transform: rotate(0) scale(1); } 50% { transform: rotate(120deg) scale(.82); } to { transform: rotate(360deg) scale(1); } }
@keyframes mo-lift { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-14px) scale(1.02); } }
@keyframes mo-grow { from { transform: scaleX(0); } to { transform: none; } }
@keyframes mo-spin { to { transform: rotate(360deg); } }
@keyframes mo-draw { from { stroke-dashoffset: var(--mo-len, 1000); } to { stroke-dashoffset: 0; } }
@keyframes mo-ring-draw { from { stroke-dashoffset: 151; } to { stroke-dashoffset: 0; } }
@keyframes mo-tick-draw { from { stroke-dashoffset: 34; } to { stroke-dashoffset: 0; } }
@keyframes mo-bell { 0% { transform: rotate(0); } 15% { transform: rotate(16deg); } 30% { transform: rotate(-14deg); } 45% { transform: rotate(10deg); } 60% { transform: rotate(-7deg); } 75% { transform: rotate(3deg); } 100% { transform: rotate(0); } }
@keyframes mo-glow { 0% { box-shadow: 0 0 0 0 rgba(208, 59, 59, .4); } 100% { box-shadow: 0 0 0 14px rgba(208, 59, 59, 0); } }
@keyframes mo-toast-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes mo-sweep { from { stroke-dashoffset: var(--mo-sweep, 300); } to { stroke-dashoffset: 0; } }
@keyframes vt-reveal { from { clip-path: circle(0 at var(--vt-x, 50%) var(--vt-y, 50%)); } to { clip-path: circle(150vmax at var(--vt-x, 50%) var(--vt-y, 50%)); } }

/* ---- windows (.modal-overlay): scrim fades, the window rises; a phone gets a sheet --------------------------------------- */
.modal-overlay.open { animation: mo-fade-in var(--dur-base) var(--ease-settle) both; }
.modal-overlay.open > .modal { animation: mo-modal-in var(--dur-base) var(--ease-settle) both; }
.modal-overlay.closing { pointer-events: none; animation: mo-fade-out var(--dur-exit) var(--ease-exit) both; }
.modal-overlay.closing > .modal { animation: mo-modal-out var(--dur-exit) var(--ease-exit) both; }
@media (max-width: 780px) {
  .modal-overlay.open > .modal { animation: mo-sheet-in 320ms var(--ease-settle) both; }
  .modal-overlay.closing > .modal { animation: mo-sheet-out var(--dur-exit) var(--ease-exit) both; }
}

/* ---- a screen appears: it fades in, its tiles rise one after another, once per visit (lib/motion.js enter()) ------------- */
.view.active { animation: mo-fade-in 200ms var(--ease-standard) backwards; }     /* backwards: no lingering animation, so no stacking context afterwards */
.mo-enter [data-mo-i] { animation: mo-rise 380ms var(--ease-settle) backwards; animation-delay: var(--mo-delay, 0ms); }

/* ---- pressing: everything you can press answers within 100 ms ---------------------------------------------------------- */
.btn, .add-btn, .range-tab, .filter-tab, .t-tab, .chip, .fc, .ef-opt, .ef-chip, .al-sel, .icon-btn, .theme-toggle, .alert-bell, .user-chip, .add-ri, .save2, .pf-row[data-pf-toggle] {
  transition-property: background-color, color, border-color, box-shadow, opacity, transform;
  transition-duration: var(--dur-fast);
  transition-timing-function: var(--ease-standard);
}
.btn:active:not(:disabled), .add-btn:active, .range-tab:active, .filter-tab:active, .t-tab:active, .chip:active, .fc:active, .ef-opt:active, .ef-chip:active,
.icon-btn:active, .theme-toggle:active, .alert-bell:active, .user-chip:active, .save2:active { transform: scale(.96); transition-duration: var(--dur-press); }

/* ---- the shared pill: one highlight that slides under the active tab (lib/motion.js pill()) ------------------------------ */
[data-pill] { position: relative; }
[data-pill]::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 0; width: var(--pill-w, 0); transform: translateX(var(--pill-x, 0)); border-radius: 99px; background: var(--pill-bg, var(--ink2)); box-shadow: var(--pill-shadow, var(--shadow-card)); opacity: var(--pill-on, 0); pointer-events: none; }
[data-pill][data-pill-ready]::before { transition: transform 320ms var(--ease-settle), width 320ms var(--ease-settle), opacity var(--dur-fast); }
[data-pill] > .active, [data-pill] > * > .active { position: relative; z-index: 1; background: transparent; box-shadow: none; }
[data-pill] > button, [data-pill] > a { position: relative; z-index: 1; }
.seg[data-pill] .t-tab.active { background: transparent; box-shadow: none; }
@media (min-width: 781px) {
  .ranges[data-pill]::before { top: 3px; bottom: 3px; background: var(--bright); box-shadow: none; }
  .ranges[data-pill] button.active, .ranges[data-pill] .range-tab.active { background: transparent; }
  html[data-theme="dark"] .ranges[data-pill]::before { background: #f3f3f7; }
  html[data-theme="dark"] .ranges[data-pill] button.active, html[data-theme="dark"] .ranges[data-pill] .range-tab.active { background: transparent; color: #0f0f11; }
}
html[data-theme="dark"] .seg[data-pill]::before { background: var(--ink3); }

/* ---- numbered step circles with a line that fills (alert flow, add flow) ------------------------------------------------------ */
.add-steps.mo-steps { counter-reset: mostep; position: relative; display: flex; gap: 0; margin: 0 0 18px; }
.add-steps.mo-steps[hidden] { display: none; }
.add-steps.mo-steps::before { content: ""; position: absolute; left: 14px; right: 14px; top: 13px; height: 2px; background: var(--line); }
.add-steps.mo-steps::after { content: ""; position: absolute; left: 14px; top: 13px; height: 2px; width: calc((100% - 28px) * var(--progress, 0)); background: var(--bright); transition: width var(--dur-slow) var(--ease-settle); }
.mo-steps li { counter-increment: mostep; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; border: 0; padding: 0; position: relative; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); transition: color var(--dur-fast); }
.mo-steps li:first-child { align-items: flex-start; } .mo-steps li:last-child { align-items: flex-end; }
.mo-steps li::before { content: counter(mostep); z-index: 1; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-family: var(--sans); font-weight: 800; font-size: 12.5px; letter-spacing: 0; background: var(--ink2); border: 2px solid var(--line2); color: var(--muted); transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast), transform var(--dur-base) var(--ease-spring); }
.mo-steps li.on { color: var(--bright); border: 0; } .mo-steps li.on::before { background: var(--bright); border-color: var(--bright); color: var(--ink2); transform: scale(1.1); }
.mo-steps li.done { color: var(--sub); border: 0; } .mo-steps li.done::before { content: "\2713"; background: var(--bright); border-color: var(--bright); color: var(--ink2); }

/* ---- waiting: shimmer placeholders instead of "Loading..." ---------------------------------------------------------------- */
.skel { display: block; border-radius: 10px; background: linear-gradient(90deg, var(--ink4) 0, var(--ink3) 50%, var(--ink4) 100%); background-size: 480px 100%; animation: mo-shimmer 1.3s linear infinite; }
.skel-chart { display: flex; flex-direction: column; gap: 10px; width: 100%; padding: 6px 0; }
.skel-chart .skel:nth-child(1) { height: 12px; width: 38%; }
.skel-chart .skel:nth-child(2) { height: 150px; }
.skel-chart .skel:nth-child(3) { height: 12px; width: 62%; }
.skel-rect { animation: mo-pulse 1.4s ease-in-out infinite; }
.skel-note { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

.mo-reveal { animation: mo-wipe 900ms cubic-bezier(.4, .1, .2, 1) both; }
.mo-morph { animation: mo-morph 320ms var(--ease-settle) both; }
.mo-donut-in { animation: mo-donut 700ms var(--ease-settle) both; transform-origin: 50% 50%; }

/* ---- small confirmations ---------------------------------------------------------------------------------------------------- */
.mo-pop { animation: mo-pop 420ms var(--ease-spring) both; }
.mo-rise { animation: mo-rise 340ms var(--ease-settle) both; }
.mo-wash { animation: mo-wash 1400ms ease-out 200ms both; }
.mo-spin { animation: mo-spin 700ms linear infinite; }
.mo-bell { transform-origin: 50% 8%; animation: mo-bell 900ms ease-in-out both; }
.mo-glow { animation: mo-glow 1100ms ease-out both; }

/* ---- the theme change: a circle grows from the toggle (View Transitions, where the browser has them) ----------------------- */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
html[data-vt="reveal"]::view-transition-new(root) { animation: vt-reveal 520ms var(--ease-settle) both; z-index: 2; }
html[data-vt="reveal"]::view-transition-old(root) { z-index: 1; }

/* ---- reduced motion: nothing moves --------------------------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .skel { animation: none; }
}

/* ---- a button that has done its job turns into a check (Record, Import) ------------------------------------------------------- */
.btn.is-ok, .btn.btn-primary.is-ok { background: var(--green); border-color: var(--green); color: #fff; min-width: 96px; pointer-events: none; }
.btn.is-ok svg { display: block; margin: 0 auto; }

/* ---- steps and tables arriving ------------------------------------------------------------------------------------------------------ */
.add-modal #addBody.mo-fwd, .add-modal #addBody.mo-back { animation-duration: 320ms; }
.ci-tbl tbody tr { animation: mo-rise 320ms var(--ease-settle) backwards; }
.ci-tbl tbody tr:nth-child(2) { animation-delay: 40ms; } .ci-tbl tbody tr:nth-child(3) { animation-delay: 80ms; } .ci-tbl tbody tr:nth-child(4) { animation-delay: 120ms; }
.ci-tbl tbody tr:nth-child(5) { animation-delay: 160ms; } .ci-tbl tbody tr:nth-child(6) { animation-delay: 200ms; } .ci-tbl tbody tr:nth-child(7) { animation-delay: 240ms; } .ci-tbl tbody tr:nth-child(n+8) { animation-delay: 280ms; }
.ci-drop { transition: border-color var(--dur-fast), background-color var(--dur-fast), transform var(--dur-base) var(--ease-settle); }
.ci-drop.over { transform: scale(1.015); background: var(--ink3); }

/* ---- sheets, menus, the position page, the sign-in screen ------------------------------------------------------------------------ */
.pf-sheet-back:not([hidden]) { animation: mo-fade-in var(--dur-base) var(--ease-settle) backwards; }
.pf-sheet-back:not([hidden]) > .pf-sheet { animation: mo-modal-in var(--dur-base) var(--ease-settle) backwards; }
@media (max-width: 780px) { .pf-sheet-back:not([hidden]) > .pf-sheet { animation: mo-sheet-in 320ms var(--ease-settle) backwards; } }
.user-menu:not([hidden]) { transform-origin: top right; animation: mo-menu-in 180ms var(--ease-settle) backwards; }
#positionView.active { animation: mo-in-fwd 300ms var(--ease-settle) backwards; }
.auth-overlay:not([hidden]) { animation: mo-fade-in 240ms var(--ease-standard) backwards; }
.auth-overlay.leaving { pointer-events: none; animation: mo-lift 280ms var(--ease-exit) both; }
.theme-toggle.mo-turn svg { animation: mo-turn 600ms var(--ease-spring) both; }
.save2.mo-pop { animation: mo-pop 420ms var(--ease-spring) both; }

/* ---- bars fill the first time a screen is seen (inside the first-visit window only, so a live redraw never replays them); a heatmap ripples ------------- */
.mo-enter .d-fillx, .mo-enter .alert-meter-fill, .mo-enter .fg-meter i { transform-origin: left center; animation: mo-grow 700ms var(--ease-settle) 200ms backwards; }
.hmcell { transition: transform var(--dur-fast) var(--ease-settle), background-color var(--dur-slow) var(--ease-standard); }
.hmcell:hover + .hmcell { transform: scale(1.07); }