/* Workspace UI V2 layout: scoped to migrated pages only. */
body.surface-workspace.workspace-v2.todos-active {
  min-height: 100dvh;
  color: var(--w2-ink);
  background:
    linear-gradient(145deg, #657496 0%, #8390b2 44%, #5d749b 100%);
  overflow-x: hidden;
}

body.surface-workspace.workspace-v2.todos-active::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--w2-z-background);
  pointer-events: none;
  background-image:
    linear-gradient(90deg, rgba(24, 31, 60, .50), rgba(62, 74, 112, .10) 38%, rgba(21, 29, 58, .42)),
    var(--w2-bg-current);
  background-position: center center;
  background-size: cover;
  filter: saturate(.88) contrast(.94) brightness(.86);
  transform: scale(1.012);
}

body.surface-workspace.workspace-v2.todos-active::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--w2-z-wash);
  pointer-events: none;
  background:
    radial-gradient(ellipse at 18% 10%, rgba(255, 232, 205, .24), transparent 34rem),
    radial-gradient(ellipse at 82% 18%, rgba(201, 226, 255, .20), transparent 30rem),
    linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .04) 48%, rgba(25, 34, 67, .22));
}

body.surface-workspace.workspace-v2.todos-active .surface-main.main {
  min-height: 100dvh;
  background: rgba(239, 245, 249, .18);
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, .18);
  backdrop-filter: blur(8px) saturate(1.04);
  -webkit-backdrop-filter: blur(8px) saturate(1.04);
  color: var(--w2-ink);
}

body.surface-workspace.workspace-v2.todos-active .surface-nav.sidebar {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .08)),
    rgba(58, 69, 106, .38);
  border-right-color: rgba(255, 255, 255, .30);
  box-shadow: 14px 0 42px rgba(18, 26, 58, .14), inset -1px 0 0 rgba(255, 255, 255, .12);
  backdrop-filter: var(--w2-blur-shell);
  -webkit-backdrop-filter: var(--w2-blur-shell);
}

body.surface-workspace.workspace-v2.todos-active .surface-nav .nav-item {
  border-radius: var(--w2-radius-sm);
}

body.surface-workspace.workspace-v2.todos-active .surface-nav .nav-item.active {
  background:
    radial-gradient(circle at 88% 8%, rgba(255, 225, 187, .24), transparent 38%),
    linear-gradient(135deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .10));
  border-color: rgba(255, 255, 255, .34);
  box-shadow: 0 12px 28px rgba(18, 26, 58, .14), var(--w2-inset);
}

body.surface-workspace.workspace-v2.todos-active .todo-v2.active {
  width: 100%;
  min-height: calc(100dvh - 52px);
  margin: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 0;
  overflow: visible;
}

@media (min-width: 761px) {
  body.surface-workspace.workspace-v2.todos-active .surface-main.main {
    padding: clamp(18px, 2.4vh, 28px) clamp(18px, 2.2vw, 32px);
  }
}

@media (max-width: 760px) {
  body.surface-workspace.workspace-v2.todos-active .surface-main.main {
    padding: calc(16px + env(safe-area-inset-top)) 14px calc(104px + env(safe-area-inset-bottom));
    background: rgba(239, 245, 249, .12);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  body.surface-workspace.workspace-v2.todos-active .todo-v2.active {
    min-height: auto;
    gap: 0;
  }

  body.surface-workspace.workspace-v2.todos-active .surface-nav.sidebar {
    background:
      linear-gradient(135deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .10)),
      rgba(63, 74, 110, .44);
    backdrop-filter: blur(14px) saturate(1.08);
    -webkit-backdrop-filter: blur(14px) saturate(1.08);
  }
}