/* Radix Colors: unmodified sRGB Gray scales. Steps follow the official use cases.
   https://www.radix-ui.com/colors/docs/palette-composition/understanding-the-scale
   https://github.com/radix-ui/colors/blob/main/src/light.ts
   https://github.com/radix-ui/colors/blob/main/src/dark.ts */
:root{color-scheme:light;--neutral-1:#fcfcfc;--neutral-2:#f9f9f9;--neutral-3:#f0f0f0;--neutral-4:#e8e8e8;--neutral-5:#e0e0e0;--neutral-6:#d9d9d9;--neutral-7:#cecece;--neutral-8:#bbbbbb;--neutral-9:#8d8d8d;--neutral-10:#838383;--neutral-11:#646464;--neutral-12:#202020;--paper:var(--neutral-1);--gray:var(--neutral-3);--sand:var(--neutral-6);--ink:var(--neutral-12);--muted:var(--neutral-11);--olive:var(--neutral-12);--field:var(--neutral-2);--on-accent:var(--neutral-1)}
:root[data-theme="dark"]{color-scheme:dark;--neutral-1:#111111;--neutral-2:#191919;--neutral-3:#222222;--neutral-4:#2a2a2a;--neutral-5:#313131;--neutral-6:#3a3a3a;--neutral-7:#484848;--neutral-8:#606060;--neutral-9:#6e6e6e;--neutral-10:#7b7b7b;--neutral-11:#b4b4b4;--neutral-12:#eeeeee}
html{background:var(--paper)}
[data-theme-toggle]{position:relative}
[data-theme-toggle] svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.theme-moon{display:none}
:root[data-theme="dark"] .theme-sun{display:none}
:root[data-theme="dark"] .theme-moon{display:block}
header button:hover,header button[aria-expanded="true"],header button[aria-pressed="true"],#accountPanel a:hover,#accountPanel button:hover{background:var(--neutral-3)}
.filter-panel{background:var(--neutral-3)}
.entry:hover,.entry:focus-within{background:var(--neutral-3)}
.entry.editing,.entry.selected{background:var(--neutral-5)}
#composer{border-color:var(--neutral-7)}
#composer:focus-within{border-color:var(--neutral-8)}
#note::placeholder{color:var(--muted)}
.calendar-days .calendar-day:hover,.calendar-heading button:hover,.calendar-footer button:hover,.calendar-footer button[aria-pressed="true"]{background:var(--neutral-4)}
.month-picker select{color:var(--ink)}
#save,#deleteSelected,.entry-actions button:hover,.calendar-days .chosen,.calendar-days .chosen:hover{color:var(--on-accent)}
.chosen .day-mark{background:var(--on-accent)}
body[data-mode] input{background:var(--field)}
body[data-mode] small{color:var(--muted)}
body[data-mode] #submit{color:var(--on-accent)}
.auth-theme{display:flex;justify-content:center;margin-top:28px}
.auth-theme [data-theme-toggle]{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;margin:0;padding:0;border:1px solid var(--sand);border-radius:8px;color:var(--ink);background:transparent}
.auth-theme [data-theme-toggle]:hover{background:var(--neutral-3)}
.auth-theme [data-theme-toggle]:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* Enable after the first manual toggle so loading a saved theme never fades in. */
:root[data-theme-transition]{transition:background-color .2s ease}
:root[data-theme-transition] body{transition:background-color .2s ease,color .2s ease}
:root[data-theme-transition] :is(header,.filter-panel,#datePanel,#trashHeading,#trashCount,#sessionExpired,input,textarea,select,.entry time,.day-mark,small){transition:background-color .2s ease,color .2s ease,border-color .2s ease,outline-color .2s ease}
:root[data-theme-transition] button{transition:background-color .2s ease,color .2s ease,border-color .2s ease,outline-color .2s ease,opacity .15s}
:root[data-theme-transition] .entry{transition:background-color .2s ease}
:root[data-theme-transition] #composer{transition:background-color .2s ease,border-color .2s ease}
:root[data-theme-transition] #note::placeholder{transition:color .2s ease}
:root[data-theme-transition] #notice{transition:background-color .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease}
:root[data-theme-transition] #accountPanel{transition:transform .28s cubic-bezier(.2,.8,.2,1),opacity .2s,visibility 0s .28s,background-color .2s ease,border-color .2s ease}
:root[data-theme-transition] #accountPanel a{transition:background-color .2s ease,color .2s ease}
:root[data-theme-transition] .settings-open #accountPanel{transition-delay:0s}
@media(prefers-reduced-motion:reduce){:root[data-theme-transition],:root[data-theme-transition] *,:root[data-theme-transition] *::placeholder{transition:none!important}}


:root[data-theme-transition] .search-field{transition:background-color .2s ease,border-color .2s ease}
:root[data-theme-transition] #search::placeholder{transition:color .2s ease}