/*
 * Trading Tracker web app — desktop-only presentation.
 * Loaded only above 900px, after the shared ecosystem foundation.
 */

[data-panel-back],
.tracker-panel-head-spacer {
  display: none;
}

.tracker-activity-head {
  align-items: center;
}

.tracker-activity-head > h2 {
  margin: 0;
}

.tracker-activity-gesture-note {
  display: none;
}

.tracker-activity-sticky {
  top: var(--tracker-activity-sticky-top, 84px);
  border-color: color-mix(in srgb, var(--line) 88%, var(--accent));
  box-shadow: 0 14px 32px color-mix(in srgb, var(--paper) 72%, transparent);
}

.tracker-activity-sticky::before {
  content: "";
  position: absolute;
  right: -1px;
  bottom: calc(100% + 1px);
  left: -1px;
  height: 18px;
  background: var(--paper);
  pointer-events: none;
}

body.tracker-app-header-scrolled .tracker-activity-sticky {
  padding-block: 10px;
}

body.tracker-app-header-scrolled .tracker-activity-head {
  justify-content: flex-end;
}

body.tracker-app-header-scrolled .tracker-activity-head > h2,
body.tracker-app-header-scrolled .tracker-activity-gesture-note {
  display: none;
}

body.tracker-app-header-scrolled .tracker-activity-sticky .tracker-activity-filters {
  margin-top: 0;
}

.tracker-activity-group > h3 {
  top: var(--tracker-activity-date-top, 249px);
  z-index: 11;
  margin-inline: 0;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-raised) 97%, transparent);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--paper) 78%, transparent);
  backdrop-filter: blur(10px);
}

.tracker-home-account-filters {
  box-shadow: 0 10px 20px color-mix(in srgb, var(--paper) 76%, transparent);
}

body.tracker-app-header-scrolled .tracker-home-account-filters {
  box-shadow:
    0 -20px 0 var(--paper),
    0 10px 20px color-mix(in srgb, var(--paper) 76%, transparent);
}

.tracker-tab-panel[data-app-panel="summary"] > .tracker-summary-head {
  justify-content: flex-start;
  text-align: left;
}

.tracker-tab-panel.tracker-account-detail-active > .tracker-summary-head::before {
  bottom: calc(100% + 1px);
}