/* stage-62-glass-surface-harmony */
.app-shell {
  --focus-glass-harmony-card:
    linear-gradient(145deg,
      color-mix(in srgb, var(--surface-elevated, rgba(255,255,255,.55)) 56%, transparent),
      color-mix(in srgb, var(--surface-glass, rgba(255,255,255,.42)) 38%, transparent));
  --focus-glass-harmony-card-strong:
    linear-gradient(145deg,
      color-mix(in srgb, var(--surface-elevated, rgba(255,255,255,.55)) 74%, transparent),
      color-mix(in srgb, var(--surface-glass, rgba(255,255,255,.42)) 52%, transparent));
  --focus-glass-harmony-border: color-mix(in srgb, var(--surface-border-strong, rgba(255,255,255,.32)) 70%, transparent);
  --focus-glass-harmony-border-soft: color-mix(in srgb, var(--surface-border, rgba(255,255,255,.22)) 62%, transparent);
  --focus-glass-harmony-shadow:
    0 28px 84px color-mix(in srgb, var(--text-primary, #2f2a26) 13%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 22%, transparent);
  --focus-glass-harmony-shadow-soft:
    0 14px 42px color-mix(in srgb, var(--text-primary, #2f2a26) 8%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 18%, transparent);
  --focus-glass-harmony-blur: 26px;
  --focus-glass-harmony-radius: 28px;
}

.top-actions :where(.current-date, .quote-dock) {
  border: 1px solid var(--focus-glass-harmony-border) !important;
  background: var(--focus-glass-harmony-card-strong) !important;
  box-shadow: var(--focus-glass-harmony-shadow-soft) !important;
  backdrop-filter: blur(var(--focus-glass-harmony-blur)) saturate(1.07) !important;
  -webkit-backdrop-filter: blur(var(--focus-glass-harmony-blur)) saturate(1.07) !important;
}

.top-add-button {
  border: 1px solid color-mix(in srgb, var(--accent-terracotta, #c56a4b) 34%, var(--focus-glass-harmony-border)) !important;
  background:
    radial-gradient(circle at 18% 10%, rgba(255, 255, 255, 0.32), transparent 4.8rem),
    linear-gradient(135deg, color-mix(in srgb, var(--accent-terracotta, #c56a4b) 62%, #fff), color-mix(in srgb, var(--accent-amber, #d89a3d) 45%, var(--surface-elevated, rgba(255,255,255,.55)))) !important;
  box-shadow:
    0 20px 44px color-mix(in srgb, var(--accent-terracotta, #c56a4b) 24%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 28%, transparent) !important;
  backdrop-filter: blur(calc(var(--focus-glass-harmony-blur) * .72)) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(calc(var(--focus-glass-harmony-blur) * .72)) saturate(1.05) !important;
}

.top-add-button:hover {
  transform: translateY(-1px);
  box-shadow:
    0 24px 54px color-mix(in srgb, var(--accent-terracotta, #c56a4b) 30%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 32%, transparent) !important;
}

.dashboard-rail :where(.focus-summary-card, .focus-tasks-card) {
  border: 1px solid var(--focus-glass-harmony-border) !important;
  background: var(--focus-glass-harmony-card) !important;
  box-shadow: var(--focus-glass-harmony-shadow) !important;
  backdrop-filter: blur(var(--focus-glass-harmony-blur)) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(var(--focus-glass-harmony-blur)) saturate(1.08) !important;
}

.dashboard-rail :where(.focus-summary-card, .focus-tasks-card)::after {
  opacity: 0.54 !important;
}

.interesting-today {
  border: 1px solid var(--focus-glass-harmony-border) !important;
  background: var(--focus-glass-harmony-card) !important;
  box-shadow: var(--focus-glass-harmony-shadow) !important;
  backdrop-filter: blur(var(--focus-glass-harmony-blur)) saturate(1.07) !important;
  -webkit-backdrop-filter: blur(var(--focus-glass-harmony-blur)) saturate(1.07) !important;
}

.legend.focus-labels-row {
  border: 1px solid var(--focus-glass-harmony-border-soft) !important;
  background: var(--focus-glass-harmony-card-strong) !important;
  box-shadow: var(--focus-glass-harmony-shadow-soft) !important;
  backdrop-filter: blur(calc(var(--focus-glass-harmony-blur) * .74)) saturate(1.06) !important;
  -webkit-backdrop-filter: blur(calc(var(--focus-glass-harmony-blur) * .74)) saturate(1.06) !important;
}

.calendar-sheet {
  border: 1px solid color-mix(in srgb, var(--focus-glass-harmony-border) 72%, transparent) !important;
  box-shadow:
    0 32px 92px color-mix(in srgb, var(--text-primary, #2f2a26) 16%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 17%, transparent) !important;
}

.calendar-sheet .sheet-head,
.calendar-sheet .weekdays {
  border-color: var(--focus-glass-harmony-border-soft) !important;
  background: color-mix(in srgb, var(--surface-elevated, rgba(255,255,255,.55)) 34%, transparent) !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 18%, transparent);
  backdrop-filter: blur(calc(var(--focus-glass-harmony-blur) * .58)) saturate(1.04) !important;
  -webkit-backdrop-filter: blur(calc(var(--focus-glass-harmony-blur) * .58)) saturate(1.04) !important;
}

.sidebar {
  border: 1px solid var(--focus-glass-harmony-border) !important;
  background: var(--focus-glass-harmony-card) !important;
  box-shadow: var(--focus-glass-harmony-shadow) !important;
  color: var(--text-primary, #2f2a26) !important;
  backdrop-filter: blur(var(--focus-glass-harmony-blur)) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(var(--focus-glass-harmony-blur)) saturate(1.08) !important;
}

.sidebar :where(.brand strong, .side-button, .sidebar-user-text strong, .logout-button) {
  color: color-mix(in srgb, var(--text-primary, #2f2a26) 92%, var(--focus-app-atmosphere-accent, var(--primary)) 8%) !important;
}

.sidebar :where(.side-button span:last-child, .sidebar-user-text small) {
  color: color-mix(in srgb, var(--text-secondary, #6f655e) 86%, var(--text-primary, #2f2a26) 14%) !important;
}

.sidebar :where(.side-button .icon, .icon-button .icon, .logout-button::before) {
  color: color-mix(in srgb, var(--text-secondary, #6f655e) 72%, var(--primary, #5678f5) 28%) !important;
}

.sidebar .side-button:hover,
.sidebar .side-button:focus-visible,
.sidebar .side-button.active {
  color: var(--primary, #5678f5) !important;
}

.sidebar-user-card {
  border: 1px solid var(--focus-glass-harmony-border-soft) !important;
  background: var(--focus-glass-harmony-card-strong) !important;
  box-shadow: var(--focus-glass-harmony-shadow-soft) !important;
}

.modal-panel {
  border: 1px solid var(--focus-glass-harmony-border) !important;
  background: var(--focus-glass-harmony-card-strong) !important;
  box-shadow: var(--focus-glass-harmony-shadow) !important;
  backdrop-filter: blur(calc(var(--focus-glass-harmony-blur) + 4px)) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(calc(var(--focus-glass-harmony-blur) + 4px)) saturate(1.08) !important;
}

:root[data-theme="dark"] .app-shell {
  --focus-glass-harmony-card:
    linear-gradient(145deg, rgba(255, 255, 255, 0.092), rgba(255, 255, 255, 0.045));
  --focus-glass-harmony-card-strong:
    linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.058));
  --focus-glass-harmony-border: rgba(255, 255, 255, 0.13);
  --focus-glass-harmony-border-soft: rgba(255, 255, 255, 0.09);
  --focus-glass-harmony-shadow:
    0 30px 86px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
  --focus-glass-harmony-shadow-soft:
    0 18px 48px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

:root[data-theme="dark"] .sidebar :where(.brand strong, .side-button, .sidebar-user-text strong, .logout-button) {
  color: var(--text-primary, #f2f1ee) !important;
}

:root[data-theme="dark"] .sidebar :where(.side-button span:last-child, .sidebar-user-text small) {
  color: color-mix(in srgb, var(--text-secondary, #b7bcc9) 88%, transparent) !important;
}

:root[data-theme="contrast"] .app-shell {
  --focus-glass-harmony-card:
    linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.54));
  --focus-glass-harmony-card-strong:
    linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.62));
  --focus-glass-harmony-border: rgba(42, 48, 62, 0.12);
  --focus-glass-harmony-border-soft: rgba(42, 48, 62, 0.09);
}

@media (max-width: 760px) {
  .app-shell {
    --focus-glass-harmony-blur: 18px;
    --focus-glass-harmony-radius: 24px;
  }

  .top-actions :where(.current-date, .quote-dock),
  .dashboard-rail :where(.focus-summary-card, .focus-tasks-card),
  .interesting-today,
  .modal-panel {
    border-radius: var(--focus-glass-harmony-radius) !important;
  }

  .calendar-sheet {
    box-shadow:
      0 20px 56px color-mix(in srgb, var(--text-primary, #2f2a26) 12%, transparent),
      inset 0 1px 0 color-mix(in srgb, #fff 14%, transparent) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .top-add-button,
  .top-actions :where(.current-date, .quote-dock),
  .dashboard-rail :where(.focus-summary-card, .focus-tasks-card),
  .interesting-today,
  .legend.focus-labels-row,
  .calendar-sheet,
  .sidebar,
  .modal-panel {
    transition: none !important;
  }
}