/* Compact desktop reference: one line per metric, full-bleed beneath navigation.
   Specificity matches legacy page overrides without changing mobile styles. */
@media (min-width: 1101px) {
  html body :is(#stocks-section, #sectors-section, #deposits-section, #withdrawals-section, #dividends-section, #stocks-gains-section, #taxes-section, #settings-section, #leaderboard-section, #profile-section) .portfolio-summary-strip :is(.portfolio-summary-label, .portfolio-summary-value) {
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif !important;
    font-style: normal !important;
  }
  html body :is(#stocks-section, #sectors-section, #deposits-section, #withdrawals-section, #dividends-section, #stocks-gains-section, #taxes-section, #settings-section, #leaderboard-section, #profile-section) :is(#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference, .portfolio-summary-strip) {
    display: grid !important;
    grid-template-columns: 1.35fr 1fr 1.05fr 1.23fr .83fr .88fr !important;
    width: 100vw !important;
    max-width: none !important;
    box-sizing: border-box !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 9px 2.7vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    clip-path: none !important;
    background: #102632 !important;
    box-shadow: inset 0 1px rgba(126, 164, 188, .08) !important;
    overflow: hidden !important;
  }
  html body :is(#stocks-section, #sectors-section, #deposits-section, #withdrawals-section, #dividends-section, #stocks-gains-section, #taxes-section, #settings-section, #leaderboard-section, #profile-section) :is(#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference, .portfolio-summary-strip) .portfolio-summary-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 0 12px !important;
    margin: 0 !important;
    min-height: 0 !important;
    border: 0 !important;
    border-right: 1px solid #34505f !important;
    background: transparent !important;
  }
  html body :is(#stocks-section, #sectors-section, #deposits-section, #withdrawals-section, #dividends-section, #stocks-gains-section, #taxes-section, #settings-section, #leaderboard-section, #profile-section) :is(#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference, .portfolio-summary-strip) .portfolio-summary-item:last-child { border-right: 0 !important; }
  html body :is(#stocks-section, #sectors-section, #deposits-section, #withdrawals-section, #dividends-section, #stocks-gains-section, #taxes-section, #settings-section, #leaderboard-section, #profile-section) :is(#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference, .portfolio-summary-strip) .portfolio-summary-label {
    font-size: clamp(10px, .76vw, 14px) !important;
    font-weight: 500 !important;
    line-height: 22px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    white-space: nowrap !important;
    color: #8fa8b9 !important;
  }
  html body :is(#stocks-section, #sectors-section, #deposits-section, #withdrawals-section, #dividends-section, #stocks-gains-section, #taxes-section, #settings-section, #leaderboard-section, #profile-section) :is(#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference, .portfolio-summary-strip) .portfolio-summary-value {
    font-size: clamp(13px, 1vw, 18px) !important;
    font-weight: 400 !important;
    line-height: 22px !important;
    letter-spacing: 0 !important;
    color: #eef4f8 !important;
  }
  html body :is(#stocks-section, #sectors-section, #deposits-section, #withdrawals-section, #dividends-section, #stocks-gains-section, #taxes-section, #settings-section, #leaderboard-section, #profile-section) :is(#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference, .portfolio-summary-strip) .portfolio-summary-value.positive { color: #00c9a7 !important; }
  html body :is(#stocks-section, #sectors-section, #deposits-section, #withdrawals-section, #dividends-section, #stocks-gains-section, #taxes-section, #settings-section, #leaderboard-section, #profile-section) :is(#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference, .portfolio-summary-strip) .portfolio-summary-value.negative { color: #ed6675 !important; }
  html[data-appearance="light"] body :is(#stocks-section, #sectors-section, #deposits-section, #withdrawals-section, #dividends-section, #stocks-gains-section, #taxes-section, #settings-section, #leaderboard-section, #profile-section) :is(#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference, .portfolio-summary-strip) {
    background: #eaf3f8 !important;
  }
  html[data-appearance="light"] body :is(#stocks-section, #sectors-section, #deposits-section, #withdrawals-section, #dividends-section, #stocks-gains-section, #taxes-section, #settings-section, #leaderboard-section, #profile-section) :is(#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference, .portfolio-summary-strip) .portfolio-summary-item { border-right-color: #cbdde8 !important; }
  html[data-appearance="light"] body :is(#stocks-section, #sectors-section, #deposits-section, #withdrawals-section, #dividends-section, #stocks-gains-section, #taxes-section, #settings-section, #leaderboard-section, #profile-section) :is(#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference, .portfolio-summary-strip) .portfolio-summary-label { color: #678299 !important; }
  html[data-appearance="light"] body :is(#stocks-section, #sectors-section, #deposits-section, #withdrawals-section, #dividends-section, #stocks-gains-section, #taxes-section, #settings-section, #leaderboard-section, #profile-section) :is(#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference, .portfolio-summary-strip) .portfolio-summary-value { color: #173353 !important; }
  html[data-appearance="light"] body :is(#stocks-section, #sectors-section, #deposits-section, #withdrawals-section, #dividends-section, #stocks-gains-section, #taxes-section, #settings-section, #leaderboard-section, #profile-section) :is(#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference, .portfolio-summary-strip) .portfolio-summary-value.positive { color: #009b84 !important; }
  html[data-appearance="light"] body :is(#stocks-section, #sectors-section, #deposits-section, #withdrawals-section, #dividends-section, #stocks-gains-section, #taxes-section, #settings-section, #leaderboard-section, #profile-section) :is(#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference#summary-reference, .portfolio-summary-strip) .portfolio-summary-value.negative { color: #ce4059 !important; }
}
/* The portfolio metrics stay immediately beneath the desktop navigation on each page. */
.settings-portfolio-summary,
.leaderboard-portfolio-summary,
  html body #profile-section#profile-section > .my-plan-portfolio-summary {
  display: none !important;
}

@media (max-width: 760px) {
  html body #settings-section#settings-section > .settings-portfolio-summary,
  html body #leaderboard-section#leaderboard-section > .leaderboard-portfolio-summary,
  html body #profile-section#profile-section > .my-plan-portfolio-summary {
    display: none !important;
  }
}

@media (min-width: 761px) {
  body:has(#settings-section.active),
  body.theme-blue:has(#settings-section.active),
  body:has(#leaderboard-section.active),
  body:has(#profile-section.active),
  body.theme-blue:has(#profile-section.active),
  body.theme-blue:has(#leaderboard-section.active) {
    --app-navbar-body-gap: 0px !important;
    --app-navbar-offset: var(--app-navbar-height, 66px) !important;
    padding-top: var(--app-navbar-height, 66px) !important;
  }

  body:has(#settings-section.active) > .container,
  body.theme-blue:has(#settings-section.active) > .container,
  body:has(#leaderboard-section.active) > .container,
  body:has(#profile-section.active) > .container,
  body.theme-blue:has(#profile-section.active) > .container,
  body.theme-blue:has(#leaderboard-section.active) > .container {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body #settings-section#settings-section,
  html body #profile-section#profile-section,
  html body #leaderboard-section#leaderboard-section {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  html body #stocks-section#stocks-section#stocks-section#stocks-section#stocks-section#stocks-section#stocks-section#stocks-section#stocks-section#stocks-section {
    padding-top: 0 !important;
  }

  html body #stocks-section#stocks-section#stocks-section#stocks-section#stocks-section#stocks-section#stocks-section#stocks-section#stocks-section#stocks-section .stocks-page-shell {
    grid-template-rows: auto auto auto auto auto minmax(0, 1fr) !important;
  }

  html body #stocks-section#stocks-section#stocks-section#stocks-section#stocks-section#stocks-section#stocks-section#stocks-section#stocks-section#stocks-section .stocks-summary-strip {
    display: grid !important;
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    margin: 0 0 12px !important;
  }

  html body #stocks-section#stocks-section#stocks-section#stocks-section#stocks-section#stocks-section#stocks-section#stocks-section#stocks-section#stocks-section .stocks-toolbar,
  html body #stocks-section#stocks-section#stocks-section#stocks-section#stocks-section#stocks-section#stocks-section#stocks-section#stocks-section#stocks-section .stocks-action-row {
    grid-row: 2 !important;
  }

  html body #stocks-section#stocks-section#stocks-section#stocks-section#stocks-section#stocks-section#stocks-section#stocks-section#stocks-section#stocks-section .stocks-last-updated { grid-row: 3 !important; }
  html body #stocks-section#stocks-section#stocks-section#stocks-section#stocks-section#stocks-section#stocks-section#stocks-section#stocks-section#stocks-section #delete-selected-stocks-btn { grid-row: 4 !important; }
  html body #stocks-section#stocks-section#stocks-section#stocks-section#stocks-section#stocks-section#stocks-section#stocks-section#stocks-section#stocks-section #stocks-expired-banner { grid-row: 5 !important; }
  html body #stocks-section#stocks-section#stocks-section#stocks-section#stocks-section#stocks-section#stocks-section#stocks-section#stocks-section#stocks-section .stocks-table-scroll { grid-row: 6 !important; }

  html body #deposits-section#deposits-section#deposits-section#deposits-section#deposits-section#deposits-section#deposits-section#deposits-section,
  html body #profile-section#profile-section,
  html body #leaderboard-section#leaderboard-section {
    padding-top: 0 !important;
  }

  html body #deposits-section#deposits-section#deposits-section#deposits-section#deposits-section#deposits-section#deposits-section#deposits-section .deposits-page-shell {
    padding-top: 0 !important;
  }

  html body #deposits-section#deposits-section#deposits-section#deposits-section#deposits-section#deposits-section#deposits-section#deposits-section .deposits-portfolio-summary,
  html body #withdrawals-section#withdrawals-section#withdrawals-section#withdrawals-section#withdrawals-section#withdrawals-section#withdrawals-section#withdrawals-section > .portfolio-summary-strip,
  html body #dividends-section#dividends-section#dividends-section#dividends-section#dividends-section#dividends-section#dividends-section#dividends-section .dividends-summary-strip,
  html body #settings-section#settings-section > .settings-portfolio-summary,
  html body #leaderboard-section#leaderboard-section > .leaderboard-portfolio-summary,
  html body #profile-section#profile-section > .my-plan-portfolio-summary {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    order: -100 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 12px !important;
    align-self: stretch !important;
  }

  html body #withdrawals-section#withdrawals-section#withdrawals-section#withdrawals-section#withdrawals-section#withdrawals-section#withdrawals-section#withdrawals-section,
  html body #dividends-section#dividends-section#dividends-section#dividends-section#dividends-section#dividends-section#dividends-section#dividends-section {
    padding-top: 0 !important;
  }

  html body #settings-section#settings-section > .settings-portfolio-summary,
  html body #leaderboard-section#leaderboard-section > .leaderboard-portfolio-summary,
  html body #profile-section#profile-section > .my-plan-portfolio-summary {
    box-sizing: border-box !important;
    border: 1px solid var(--stocks-border, #20333d) !important;
    background: rgba(15, 29, 37, 0.72) !important;
    box-shadow: none !important;
  }

  html body #leaderboard-section#leaderboard-section > .leaderboard-portfolio-summary,
  html body #profile-section#profile-section > .my-plan-portfolio-summary {
    border-radius: 0 !important;
    clip-path: inset(0 round 0) !important;
  }

  html[data-appearance="light"] body #settings-section#settings-section > .settings-portfolio-summary,
  html[data-appearance="light"] body #leaderboard-section#leaderboard-section > .leaderboard-portfolio-summary,
  html[data-appearance="light"] body #profile-section#profile-section > .my-plan-portfolio-summary {
    border-color: var(--stocks-border, #dfeaf3) !important;
    background: #fff !important;
  }

  /* One viewport-based width for every copy of the Deposits information bar. */
  html body #stocks-section#stocks-section#stocks-section#stocks-section#stocks-section#stocks-section#stocks-section#stocks-section#stocks-section#stocks-section .stocks-summary-strip,
  html body #sectors-section#sectors-section > .portfolio-summary-strip,
  html body #deposits-section#deposits-section#deposits-section#deposits-section#deposits-section#deposits-section#deposits-section#deposits-section#deposits-section .deposits-portfolio-summary,
  html body #withdrawals-section#withdrawals-section#withdrawals-section#withdrawals-section#withdrawals-section#withdrawals-section#withdrawals-section#withdrawals-section > .portfolio-summary-strip,
  html body #dividends-section#dividends-section#dividends-section#dividends-section#dividends-section#dividends-section#dividends-section#dividends-section .dividends-summary-strip,
  html body #stocks-gains-section#stocks-gains-section > .portfolio-summary-strip,
  html body #taxes-section#taxes-section > .portfolio-summary-strip,
  html body #settings-section#settings-section > .settings-portfolio-summary,
  html body #leaderboard-section#leaderboard-section > .leaderboard-portfolio-summary,
  html body #profile-section#profile-section > .my-plan-portfolio-summary {
    box-sizing: border-box !important;
    width: calc(100vw - 84px) !important;
    max-width: none !important;
    margin-right: calc(50% - 50vw + 42px) !important;
    margin-left: calc(50% - 50vw + 42px) !important;
  }
}