/* Short feedback, without moving layout or introducing scroll animations. */
:root{--dialog-enter-duration:260ms;--dialog-exit-duration:160ms;--toast-motion-duration:400ms}
@media(max-width:760px){:root{--dialog-enter-duration:400ms;--dialog-exit-duration:260ms}}
:is(:is(.stats-toolbar,.entry-switch,.license-toolbar,.category-manager-toolbar) .segments,.stats-card-switch){position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
:is(:is(.stats-toolbar,.entry-switch,.license-toolbar,.category-manager-toolbar) .segments,.stats-card-switch)::before{content:"";position:absolute;inset:4px auto 4px 4px;width:calc((100% - 12px)/2);border-radius:10px;background:var(--surface);box-shadow:var(--pill-shadow);z-index:-1;transform:translateX(0)}
:is(:is(.stats-toolbar,.entry-switch,.license-toolbar,.category-manager-toolbar) .segments,.stats-card-switch):has(button:nth-child(2)[aria-pressed=true])::before{transform:translateX(calc(100% + 4px))}
:is(:is(.stats-toolbar,.entry-switch,.license-toolbar,.category-manager-toolbar) .segments,.stats-card-switch) button[aria-pressed=true]{background:transparent;box-shadow:none}
.entry-switch .segments::before{background:var(--lemon);box-shadow:none}
.entry-row{isolation:isolate}
.entry-feedback{position:absolute;inset:0;border-radius:inherit;background:var(--selected);pointer-events:none;z-index:-1}
:root:not([data-input-mode=keyboard]) :is(.entry-row,.ranking)[data-row-pressed]{background:var(--selected);transition-duration:0s}
#toast{display:flex;align-items:center;gap:8px}
#toast .toast-check{flex:none;color:var(--toast-success)}
#toast:not([data-success]) .toast-check{display:none}
.track>span{width:100%;transform-origin:left center}
.primary[aria-busy=true]{opacity:.75}
@media(prefers-reduced-motion:no-preference){
  .startup-dots i{animation:startup-dot-pulse 1.4s var(--ease-in-out) infinite}
  .startup-dots i:nth-child(2){animation-delay:.16s}
  .startup-dots i:nth-child(3){animation-delay:.32s}
  #toast{transform:translate(-50%,calc(-50% + 4px));transition:opacity var(--toast-motion-duration) ease,transform var(--toast-motion-duration) ease}
  #toast.visible{transform:translate(-50%,-50%)}
  .track>span{transition:transform .2s var(--ease-out),clip-path .2s var(--ease-out)}
  :is(:is(.stats-toolbar,.entry-switch,.license-toolbar,.category-manager-toolbar) .segments,.stats-card-switch)::before{transition:transform .18s var(--ease-out)}
  :is(:is(.stats-toolbar,.entry-switch,.license-toolbar,.category-manager-toolbar) .segments,.stats-card-switch)[data-instant]::before{transition:none}
  :root:not([data-input-mode=keyboard]) .ranking-sort-toolbar button[aria-pressed=true] .ranking-sort-arrow{transition:transform .18s var(--ease-in-out)}
  :where(.primary,.secondary,.icon-button,.ledger-function-button,.month-label,.entry-row,.setting-row,.ranking,.category-choice,.segments button){transition:background-color .16s ease,color .16s ease,border-color .16s ease,box-shadow .18s ease,opacity .12s ease,transform .12s var(--ease-out)}
  :where(input,select,textarea,.amount-field,.inline-field){transition:border-color .16s ease,background-color .16s ease}
  :where(.entry-row,.setting-row)>.row-chevron,.setting-row>svg:last-child{transition:transform .16s ease,color .16s ease}
  :where(.primary,.secondary,.icon-button,.category-choice,.segments button):not(:disabled):active{transform:scale(.97)}

  dialog[open]::backdrop{animation:soft-backdrop-in var(--dialog-enter-duration) var(--ease-out) both}
  dialog.dialog-closing::backdrop{animation:soft-backdrop-out var(--dialog-exit-duration) var(--ease-out) both}
  dialog.dialog-closing[data-drag-dismiss]::backdrop{animation-duration:220ms}
  @media(hover:hover) and (pointer:fine){
    :root:not([data-pointer-type=touch]) .setting-row:active{background:var(--selected)}
    :root:not([data-pointer-type=touch]) .primary:not(:disabled):hover:not(:active),:root:not([data-pointer-type=touch]) .icon-button:not(:disabled):hover:not(:active){transform:translateY(-1px)}
    :root:not([data-pointer-type=touch]) .entry-row:hover>.row-chevron,:root:not([data-pointer-type=touch]) .setting-row:hover>svg:last-child{transform:translateX(2px)}
    :root:not([data-pointer-type=touch]) .ranking:hover{background:var(--hover)}
  }
}
@keyframes startup-dot-pulse{0%,70%,100%{opacity:.4}35%{opacity:1}}
.ranking{border-radius:10px}
/* Parent and foreground share one progress value, including during reversal. */
.page-back-preview{position:fixed;inset:0;overflow:hidden;pointer-events:none;background:var(--paper);z-index:1;contain:strict}
.page-back-preview[data-for=detail-page-root]{z-index:19}
.page-back-preview-content,.page-back-preview-shade{position:absolute;inset:0;pointer-events:none}
.page-back-preview-shade{background:var(--preview-shade);top:env(safe-area-inset-top,0px)}
/* A native thumb must not reveal the old/new scroll ranges during a page slide.
   Classic scrollbars retain their gutter; overlay bars can disappear entirely. */
html[data-page-scrollbars=hidden],html[data-page-scrollbars=hidden] :is(body,.page-scroll,.detail-page-content){scrollbar-color:transparent transparent}
html[data-page-scrollbars=hidden]::-webkit-scrollbar-thumb,html[data-page-scrollbars=hidden] :is(body,.page-scroll,.detail-page-content)::-webkit-scrollbar-thumb{background:transparent}
html[data-page-scrollbars=hidden][data-page-scrollbar-mode=overlay],html[data-page-scrollbars=hidden][data-page-scrollbar-mode=overlay] :is(body,.page-scroll,.detail-page-content){scrollbar-width:none}
html[data-page-scrollbars=hidden][data-page-scrollbar-mode=overlay]::-webkit-scrollbar,html[data-page-scrollbars=hidden][data-page-scrollbar-mode=overlay] :is(body,.page-scroll,.detail-page-content)::-webkit-scrollbar{display:none}
.page-back-preview,.page-back-preview *{scrollbar-color:transparent transparent}
.page-back-preview::-webkit-scrollbar-thumb,.page-back-preview *::-webkit-scrollbar-thumb{background:transparent}
:root{--status-bar-inset:env(safe-area-inset-top,0px)}
.status-bar-background{display:none}
@media(max-width:760px){
  /* Keep an opaque safe-area surface; its left segment shares the revealed
     parent's dimming and follows the foreground edge during a back gesture. */
  .status-bar-background{display:block;position:fixed;inset:0 0 auto;height:max(12px,env(safe-area-inset-top,0px));background:var(--paper);z-index:30;pointer-events:none;overflow:hidden}
  .status-bar-preview-shade{position:absolute;inset:0;background:var(--preview-shade);opacity:0;transform:translateX(-100%)}
  #main[data-page-back-surface]{position:relative;z-index:2;min-height:100dvh;background:var(--paper);box-shadow:var(--page-shadow);border-radius:22px 0 0 22px}
  #detail-page-root[data-page-back-surface]{box-shadow:var(--page-shadow);border-radius:22px 0 0 22px}
  .page-back-preview .mobile-header{z-index:11}
}
dialog.dialog-closing{pointer-events:none}
@media(max-width:760px){
  dialog[open]::backdrop,dialog.dialog-closing::backdrop{animation-timing-function:var(--ease-drawer)}
  .dialog-head,.drag-handle{touch-action:none;user-select:none}
  .drag-handle{position:relative}
  .drag-handle::before{content:"";position:absolute;inset:-10px -30px}
}
@keyframes soft-backdrop-in{from{background-color:transparent}to{background-color:var(--overlay)}}
@keyframes soft-backdrop-out{from{background-color:var(--overlay)}to{background-color:transparent}}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}