/* stage-49-summary-tasks-polish: right rail daily workspace cards. */

.focus-dashboard {
  --stage49-summary-accent: var(--label-reminder, #5678f5);
  --stage49-tasks-accent: var(--focus-accent-sage, #5f9073);
  --stage49-rail-shadow: 0 26px 72px color-mix(in srgb, var(--text-primary, #2f2a26) 13%, transparent);
  --stage49-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'%3E%3C/path%3E%3C/svg%3E");
}

.dashboard-rail {
  gap: clamp(14px, 1.55vw, 22px);
  align-content: start;
}

.dashboard-rail :where(.focus-summary-card, .focus-tasks-card) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 28px !important;
  border: 1px solid color-mix(in srgb, var(--stage49-card-accent, var(--primary, #5678f5)) 12%, var(--focus-border-elevated, rgba(255,255,255,.32))) !important;
  background:
    radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--stage49-card-accent, var(--primary, #5678f5)) 13%, transparent), transparent 11.5rem),
    radial-gradient(circle at 96% 10%, color-mix(in srgb, var(--focus-accent-amber, #d89a3d) 9%, transparent), transparent 12rem),
    linear-gradient(145deg, color-mix(in srgb, var(--surface-elevated, rgba(255,255,255,.55)) 88%, transparent), color-mix(in srgb, var(--surface-glass, rgba(255,255,255,.42)) 74%, transparent)) !important;
  box-shadow:
    var(--stage49-rail-shadow),
    0 0 0 1px color-mix(in srgb, #fff 13%, transparent) inset,
    inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
  padding: clamp(18px, 1.35vw, 23px) !important;
  backdrop-filter: blur(30px) saturate(1.07);
  -webkit-backdrop-filter: blur(30px) saturate(1.07);
}

.dashboard-rail .focus-summary-card,
.dashboard-rail .focus-tasks-card {
  border-radius: 28px !important;
  border: 1px solid color-mix(in srgb, var(--stage49-card-accent, var(--primary, #5678f5)) 12%, var(--focus-border-elevated, rgba(255,255,255,.32))) !important;
  background:
    radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--stage49-card-accent, var(--primary, #5678f5)) 13%, transparent), transparent 11.5rem),
    radial-gradient(circle at 96% 10%, color-mix(in srgb, var(--focus-accent-amber, #d89a3d) 9%, transparent), transparent 12rem),
    linear-gradient(145deg, color-mix(in srgb, var(--surface-elevated, rgba(255,255,255,.55)) 88%, transparent), color-mix(in srgb, var(--surface-glass, rgba(255,255,255,.42)) 74%, transparent)) !important;
  box-shadow:
    var(--stage49-rail-shadow),
    0 0 0 1px color-mix(in srgb, #fff 13%, transparent) inset,
    inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
  padding: clamp(18px, 1.35vw, 23px) !important;
  backdrop-filter: blur(30px) saturate(1.07);
  -webkit-backdrop-filter: blur(30px) saturate(1.07);
}

.dashboard-rail .focus-summary-card {
  --stage49-card-accent: var(--stage49-summary-accent);
}

.dashboard-rail .focus-tasks-card {
  --stage49-card-accent: var(--stage49-tasks-accent);
}

.dashboard-rail :where(.focus-summary-card, .focus-tasks-card)::after {
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: inherit;
  background:
    linear-gradient(140deg, rgba(255, 255, 255, 0.18), transparent 40%),
    radial-gradient(circle at 50% 100%, color-mix(in srgb, var(--stage49-card-accent) 8%, transparent), transparent 13rem);
  content: "";
  opacity: 0.78;
  pointer-events: none;
}

.focus-summary-card .panel-title,
.focus-tasks-card .panel-title {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.68rem;
  min-height: 2.25rem;
  margin: 0 0 0.86rem !important;
}

.focus-summary-card .panel-title::before,
.focus-tasks-card .panel-title::before {
  display: inline-grid;
  width: 2.22rem;
  height: 2.22rem;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--stage49-card-accent) 18%, var(--focus-border-glass, rgba(255,255,255,.22)));
  border-radius: 0.9rem;
  background:
    radial-gradient(circle at 32% 18%, rgba(255, 255, 255, 0.32), transparent 1.6rem),
    color-mix(in srgb, var(--stage49-card-accent) 12%, var(--surface-glass, rgba(255,255,255,.42)));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 0.78rem 1.55rem color-mix(in srgb, var(--stage49-card-accent) 10%, transparent);
  color: color-mix(in srgb, var(--stage49-card-accent) 76%, var(--text-primary, #2f2a26));
  content: "";
}

.focus-summary-card .panel-title::before {
  -webkit-mask: var(--icon-calendar) center / 1.18rem 1.18rem no-repeat;
  mask: var(--icon-calendar) center / 1.18rem 1.18rem no-repeat;
  background: currentColor;
}

.focus-tasks-card .panel-title::before {
  -webkit-mask: var(--stage49-icon-check) center / 1.18rem 1.18rem no-repeat;
  mask: var(--stage49-icon-check) center / 1.18rem 1.18rem no-repeat;
  background: currentColor;
}

.focus-summary-card .panel-title::after,
.focus-tasks-card .panel-title::after {
  justify-self: end;
  width: 2.65rem;
  height: 0.24rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--stage49-card-accent), color-mix(in srgb, var(--primary, #5678f5) 52%, transparent));
  box-shadow: 0 0 1.1rem color-mix(in srgb, var(--stage49-card-accent) 25%, transparent);
  content: "";
  opacity: 0.72;
}

.focus-summary-card .panel-title :where(h2, h3),
.focus-tasks-card .panel-title :where(h2, h3) {
  margin: 0;
  color: color-mix(in srgb, var(--primary, #5678f5) 78%, var(--stage49-card-accent) 22%) !important;
  font-size: clamp(1.08rem, 0.9vw + 0.82rem, 1.34rem);
  font-weight: 770;
  line-height: 1.15;
  letter-spacing: 0;
}

.focus-summary-list,
.focus-tasks-list {
  gap: 0.64rem !important;
}

.focus-summary-item,
.focus-task-item {
  border-radius: 19px !important;
  border: 1px solid color-mix(in srgb, var(--stage49-row-accent, var(--stage49-card-accent)) 14%, var(--focus-border-glass, rgba(255,255,255,.22))) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.24), transparent 44%),
    linear-gradient(145deg, color-mix(in srgb, var(--stage49-row-accent, var(--stage49-card-accent)) 7%, var(--surface-elevated, rgba(255,255,255,.55))), color-mix(in srgb, var(--surface-glass, rgba(255,255,255,.42)) 66%, transparent)) !important;
  box-shadow:
    0 0.72rem 1.72rem color-mix(in srgb, var(--text-primary, #2f2a26) 6%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.17) !important;
}

.focus-summary-item {
  --stage49-row-accent: var(--summary-color, var(--stage49-summary-accent));
  min-height: 3.62rem;
  padding: 0.72rem 0.82rem !important;
}

.focus-task-item {
  --stage49-row-accent: var(--stage49-tasks-accent);
  min-height: 3.58rem;
}

.focus-summary-item:hover,
.focus-task-item:hover,
.focus-task-item:focus-within {
  border-color: color-mix(in srgb, var(--stage49-row-accent, var(--stage49-card-accent)) 32%, var(--focus-border-glass, rgba(255,255,255,.22))) !important;
  box-shadow:
    0 1rem 2.18rem color-mix(in srgb, var(--stage49-row-accent, var(--stage49-card-accent)) 12%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
  transform: translateY(-1px);
}

.focus-summary-copy strong,
.focus-task-copy {
  color: var(--text-primary, #2f2a26);
  font-weight: 680;
}

.focus-summary-meta,
.focus-tasks-card .plan-motto {
  color: color-mix(in srgb, var(--text-muted, #9c9187) 86%, var(--stage49-card-accent) 14%);
}

.focus-task-actions {
  border-radius: 0.92rem !important;
  border-color: color-mix(in srgb, var(--stage49-tasks-accent) 12%, var(--focus-border-glass, rgba(255,255,255,.22))) !important;
  background: color-mix(in srgb, var(--surface-glass, rgba(255,255,255,.42)) 54%, transparent) !important;
}

.focus-tasks-action {
  min-height: 2.9rem !important;
  margin-top: 0.22rem !important;
  border-radius: 1rem !important;
  border-color: color-mix(in srgb, var(--primary, #5678f5) 19%, var(--focus-border-glass, rgba(255,255,255,.22))) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.24), transparent 5rem),
    linear-gradient(135deg, color-mix(in srgb, var(--primary, #5678f5) 9%, var(--surface-elevated, rgba(255,255,255,.55))), color-mix(in srgb, var(--stage49-tasks-accent) 8%, var(--surface-glass, rgba(255,255,255,.42)))) !important;
}

.focus-summary-empty,
.focus-task-empty {
  border-style: solid !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--stage49-card-accent, var(--primary, #5678f5)) 9%, transparent), transparent 10rem),
    color-mix(in srgb, var(--surface-glass, rgba(255,255,255,.42)) 42%, transparent) !important;
  font-weight: 560;
}

:root[data-theme="dark"] .dashboard-rail :where(.focus-summary-card, .focus-tasks-card) {
  background:
    radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--stage49-card-accent, var(--primary, #6f8cff)) 15%, transparent), transparent 11.5rem),
    radial-gradient(circle at 96% 10%, color-mix(in srgb, var(--focus-accent-amber, #d89a3d) 8%, transparent), transparent 12rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.052)) !important;
  border-color: rgba(255, 255, 255, 0.13) !important;
}

:root[data-theme="dark"] .focus-summary-item,
:root[data-theme="dark"] .focus-task-item {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.034)),
    rgba(19, 23, 34, 0.42) !important;
  border-color: color-mix(in srgb, var(--stage49-row-accent, var(--stage49-card-accent)) 20%, rgba(255,255,255,.1)) !important;
}

@media (max-width: 980px) {
  .dashboard-rail {
    max-width: 100%;
  }

  .dashboard-rail .focus-tasks-card {
    order: 1;
  }

  .dashboard-rail .focus-summary-card {
    order: 2;
  }
}

@media (max-width: 760px) {
  .dashboard-rail :where(.focus-summary-card, .focus-tasks-card) {
    border-radius: 24px !important;
    padding: 1rem !important;
  }

  .focus-summary-card .panel-title,
  .focus-tasks-card .panel-title {
    gap: 0.56rem;
    margin-bottom: 0.72rem !important;
  }

  .focus-summary-card .panel-title::before,
  .focus-tasks-card .panel-title::before {
    width: 2rem;
    height: 2rem;
    border-radius: 0.78rem;
  }

  .focus-summary-card .panel-title :where(h2, h3),
  .focus-tasks-card .panel-title :where(h2, h3) {
    font-size: 1.08rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .focus-summary-item,
  .focus-task-item,
  .focus-tasks-action {
    transition: none !important;
  }

  .focus-summary-item:hover,
  .focus-task-item:hover,
  .focus-task-item:focus-within,
  .focus-tasks-action:hover {
    transform: none !important;
  }
}