button:not([disabled]) {
  transition:
    filter 150ms ease,
    box-shadow 150ms ease,
    background-color 150ms ease,
    color 150ms ease;
}

button:not([disabled]):hover {
  filter: brightness(1.1);
  box-shadow: 0 0 16px rgba(103, 232, 249, 0.14);
}

.app-atmosphere {
  background:
    linear-gradient(rgba(30, 41, 59, 0.2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 41, 59, 0.2) 1px, transparent 1px),
    radial-gradient(900px 500px at 15% -10%, rgba(34, 211, 238, 0.11), transparent 65%),
    linear-gradient(180deg, #0f172a 0%, #020617 62%);
  background-size:
    32px 32px,
    32px 32px,
    auto,
    auto;
}

html:not([data-app-state="ready"]) #app-shell {
  opacity: 0;
  pointer-events: none;
}

#loading-screen {
  display: none;
}

html:not([data-app-state="ready"]) #loading-screen {
  display: flex;
}

#auth-dialog[open] {
  animation: auth-dialog-enter 180ms ease-out;
}

[data-sync-status][data-status="saving"],
[data-sync-status][data-status="pending"] {
  color: rgb(165 180 252);
}

[data-sync-status][data-status="saved"] {
  color: rgb(110 231 183);
}

[data-sync-status][data-status="error"] {
  color: rgb(253 164 175);
}

@keyframes auth-dialog-enter {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  #auth-dialog[open] {
    animation: none;
  }
}

.notification-region {
  position: fixed;
  inset: 0.75rem auto auto 50%;
  z-index: 100;
  display: flex;
  width: min(92vw, 26rem);
  max-height: calc(100dvh - 1.5rem);
  margin: 0;
  padding: 0;
  transform: translateX(-50%);
  flex-direction: column;
  gap: 0.625rem;
  overflow: visible;
  border: 0;
  background: transparent;
  color: inherit;
  pointer-events: none;
}

.notification-toast {
  --notification-accent: rgb(103 232 249);
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) 2rem;
  gap: 0.75rem;
  align-items: start;
  padding: 0.875rem;
  border: 1px solid rgb(51 65 85 / 0.95);
  border-left: 3px solid var(--notification-accent);
  border-radius: 8px;
  background: rgb(15 23 42 / 0.98);
  box-shadow: 0 18px 50px rgb(0 0 0 / 0.42);
  pointer-events: auto;
  animation: notification-enter 240ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.notification-toast--success {
  --notification-accent: rgb(52 211 153);
}

.notification-toast--error {
  --notification-accent: rgb(251 113 133);
}

.notification-toast--warning {
  --notification-accent: rgb(251 191 36);
}

.notification-toast.is-leaving {
  animation: notification-leave 180ms ease-in both;
}

.notification-toast__icon {
  display: inline-flex;
  width: 2.25rem;
  height: 2.25rem;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: color-mix(in srgb, var(--notification-accent) 14%, transparent);
  color: var(--notification-accent);
}

.notification-toast__icon svg {
  width: 1.1rem;
  height: 1.1rem;
}

.notification-toast__content {
  display: grid;
  min-width: 0;
  gap: 0.2rem;
}

.notification-toast__title {
  color: rgb(248 250 252);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25rem;
}

.notification-toast__message {
  overflow-wrap: anywhere;
  color: rgb(148 163 184);
  font-size: 0.78rem;
  line-height: 1.2rem;
}

.notification-toast__dismiss {
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  color: rgb(100 116 139);
}

.notification-toast__dismiss:hover {
  background: rgb(30 41 59);
  color: rgb(226 232 240);
}

.notification-toast__dismiss:focus-visible {
  outline: 2px solid var(--notification-accent);
  outline-offset: 2px;
}

.notification-toast__dismiss svg {
  width: 1rem;
  height: 1rem;
}

@keyframes notification-enter {
  from {
    opacity: 0;
    transform: translateY(-1.25rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes notification-leave {
  to {
    opacity: 0;
    transform: translateY(-1.25rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .notification-toast,
  .notification-toast.is-leaving {
    animation-duration: 1ms;
  }
}

[data-health-history-open],
[data-health-edit],
[data-calendar-manager-open],
[data-ritual-open],
[data-agenda-open],
[data-links-manager-open],
[data-task-open],
[data-quest-open],
[data-notes-add] {
  border: 1px solid rgb(51 65 85);
  background: rgba(30, 41, 59, 0.7);
  color: rgb(203 213 225);
}

@media (max-width: 1023px) {
  body {
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
  }

  #dashboard {
    display: flex;
    flex-direction: column;
  }

  #planning-column,
  #rhythm-column,
  #growth-column,
  #bottom-row {
    display: contents;
  }

  #agenda-panel {
    order: 1;
  }

  #tasks-panel {
    order: 2;
  }

  #notes-panel {
    order: 3;
  }

  #quests-panel {
    order: 4;
  }

  #finance-panel {
    order: 5;
  }

  #quick-links-panel {
    order: 6;
  }

  dialog {
    margin: 1rem auto;
    max-height: calc(100dvh - 2rem);
  }

  #health-workspace-modal,
  #finance-workspace-modal {
    max-height: calc(100dvh - 2rem);
  }

  #health-workspace-modal > section,
  #finance-workspace-modal > section {
    max-height: calc(100dvh - 2rem);
  }

  #health-workspace-modal [data-region="health-workspace-content"],
  #finance-workspace-modal [data-region="finance-workspace-content"] {
    padding-bottom: calc(1.25rem + env(safe-area-inset-bottom));
  }
}