/* Adapted from Uiverse.io by Tiagoadag (MIT): cuddly-catfish-6.
 * Two visual layers use a pseudo-element to preserve Vue's live todo controls.
 * Copyright (c) 2026 Tiagoadag. Permission is hereby granted, free of charge,
 * to any person obtaining a copy of this software and associated documentation
 * files (the "Software"), to deal in the Software without restriction, including
 * without limitation the rights to use, copy, modify, merge, publish, distribute,
 * sublicense, and/or sell copies of the Software, and to permit persons to whom
 * the Software is furnished to do so, subject to the following conditions:
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED
 * "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT
 * LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR
 * PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
 * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN
 * ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
 * WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
#app .dev-root .desk .todo-panel {
  isolation: isolate;
  position: relative;
  background: #0b111a !important;
  border: 0 !important;
  border-radius: 20px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .2);
  transition: opacity .3s, transform .3s, box-shadow .3s;
}
#app .dev-root .desk .todo-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(145deg, #141c25, #0b111a);
  box-shadow: inset 0 0 0 1px rgba(131, 181, 207, .22), inset 0 1px 0 rgba(255, 255, 255, .06);
  transition: transform .2s, border-radius .2s;
  transform: scale(1) !important;
}
#app .dev-root .desk .todo-panel > * { position: relative; z-index: 1; }
@media (hover: hover) and (pointer: fine) {
  #app .dev-root .desk .todo-panel:hover {
    transform: scale(1.04) !important;
    background: linear-gradient(163deg, #36cbd6 0%, #143d94 100%) !important;
    box-shadow: 0 0 30px 1px rgba(54, 203, 214, .3) !important;
  }
  #app .dev-root .desk .todo-panel:hover::before {
    transform: scale(.98) !important;
    border-radius: 20px;
  }
}
/* The editor is teleported outside the card. Keep the card expanded until it closes. */
#app .dev-root .desk .todo-panel:has(.todo-add[aria-expanded="true"], .todo-form),
body:has(.todo-editor:not(.todo-editor-leave-active)) #app .dev-root .desk .todo-panel {
  opacity: 1 !important;
  z-index: 5;
  transform: scale(1.04) !important;
  background: linear-gradient(163deg, #36cbd6 0%, #143d94 100%) !important;
  box-shadow: 0 0 30px 1px rgba(54, 203, 214, .3) !important;
}
#app .dev-root .desk .todo-panel:has(.todo-add[aria-expanded="true"], .todo-form)::before,
body:has(.todo-editor:not(.todo-editor-leave-active)) #app .dev-root .desk .todo-panel::before {
  transform: scale(.98) !important;
}
@media (hover: none) {
  #app .dev-root .desk .todo-panel:has(.todo-add[aria-expanded="true"], .todo-form),
  body:has(.todo-editor:not(.todo-editor-leave-active)) #app .dev-root .desk .todo-panel { transform: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  #app .dev-root .desk .todo-panel,
  #app .dev-root .desk .todo-panel::before { transition: none; }
}