/* Match the Dividends Annual summary button on desktop, without changing colors. */
@layer desktop-button-standard {
  @media (min-width: 761px) {
    html body button,
    html body input[type="button"],
    html body input[type="submit"],
    html body input[type="reset"] {
      box-sizing: border-box !important;
      height: 34px !important;
      min-height: 34px !important;
      max-height: 34px !important;
      font-family: Arial, sans-serif !important;
      font-size: 11px !important;
      font-weight: 700 !important;
      font-style: normal !important;
      line-height: 11px !important;
      letter-spacing: .3px !important;
      text-transform: none !important;
    }

    html body button :is(span, strong, b):not([aria-hidden="true"]):not([class*="icon"]) {
      font-family: Arial, sans-serif !important;
      font-size: 11px !important;
      font-weight: 700 !important;
      font-style: normal !important;
      line-height: 11px !important;
      letter-spacing: .3px !important;
      text-transform: none !important;
    }

    html body #settings-section .settings-side-link,
    html body #settings-section .settings-side-link > span:not([aria-hidden="true"]) {
      font-size: 15px !important;
      line-height: 18px !important;
    }

    /* Keep each Portfolio Balance value in the same teal as Dashboard. */
    html body .section :is([id$="-summary-balance"], #dashboard-summary-balance) {
      color: #25d5df !important;
    }

    /* Keep the Message field within its bordered shell. */
    @media (min-width: 1101px) {
      /* A details element has an internal content box: include it in the
         flex chain so each desktop subpage fills the matched sidebar height. */
      html body #settings-section .settings-card[open]::details-content {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 0 auto !important;
      }
      html body #settings-section .settings-card[open] > .settings-content {
        min-height: 100% !important;
      }
      html body #settings-section .settings-main-panel {
        border-radius: 12px !important;
      }
      html body #settings-section .account-actions--editor button:is([hidden], [style*="display:none"], [style*="display: none"]) {
        display: none !important;
      }
      html body #settings-section :is(.settings-platform-layout, .settings-account-layout) {
        padding: 0 !important;
      }
      html body #settings-section :is(#platform-settings-card, #account-settings-card) .settings-form-section {
        flex: 1 0 auto !important;
        border-radius: 0 !important;
      }
      html body #settings-section .settings-side-link::before {
        top: 0 !important;
        bottom: 0 !important;
        height: auto !important;
        transform: none !important;
      }
      html body #settings-section .contact-form-row > label {
        text-align: left !important;
        width: 100% !important;
        align-self: stretch !important;
      }
      html body #settings-section :is(.contact-input-wrap, .account-input-wrap, .settings-input-shell, .download-date-fields) :is(input, select, textarea) {
        background-color: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        min-width: 0 !important;
      }
      html body #settings-section :is(.contact-input-wrap, .account-input-wrap, .settings-input-shell, .download-date-fields):focus-within {
        outline: 1px solid #25d5df !important;
        outline-offset: 1px !important;
      }
      /* Paint one continuous surface, not a new gradient on every wrapper. */
      html[data-appearance="black"] body #settings-section .settings-main-panel {
        background: linear-gradient(135deg, #1c1c1c, #141414) !important;
      }
      html[data-appearance="black"] body #settings-section :is(
        .settings-card-stack, .settings-card, .settings-content,
        .settings-platform-layout, .settings-account-layout,
        .settings-form-section, .settings-actions--platform, .account-actions--editor,
        .contact-form--reference, .download-data-page
      ) {
        background: transparent !important;
        box-shadow: none !important;
      }
      html[data-appearance="black"] body #settings-section :is(.settings-input-shell, .account-input-wrap) {
        background: #111 !important;
        border-color: #3c3c3c !important;
      }
      html[data-appearance="black"] body #settings-section :is(.settings-section-intro, .settings-form-section, .account-actions--editor) {
        border-color: #333 !important;
      }
      html body #settings-section #contact-us-card .contact-input-wrap--textarea {
        padding-top: 0 !important;
      }
      html body #settings-section #contact-us-card .contact-input-wrap--textarea > svg {
        margin-top: 13px !important;
      }
      html body #settings-section #contact-us-card .contact-input-wrap--textarea textarea {
        box-sizing: border-box !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
        padding: 12px 0 0 !important;
        background: transparent !important;
        resize: none !important;
      }
    }

    /* The theme options contain both a swatch and label in the same button. */
    html body #settings-menu #appearance-switch .appearance-choice {
      flex-direction: row !important;
      gap: 4px !important;
    }
    html body #settings-menu #appearance-switch .appearance-swatch {
      width: 14px !important;
      height: 14px !important;
      flex: 0 0 14px !important;
    }
  }
}

/* Desktop chart-history filter menu: full-width actions in every appearance. */
@layer desktop-button-standard {
  @media (min-width: 761px) {
    html body #settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section #chart-history-card {
      --history-menu-bg:#10232c; --history-menu-text:#eaf3f8; --history-menu-muted:#b2c5d1;
      --history-menu-border:#365565; --history-menu-button:#183542; --history-menu-active:#20d1df;
      --history-menu-danger:#ff9ba0; --history-menu-danger-border:#a64b54; --history-menu-danger-bg:#38252b;
    }
    html[data-appearance="light"] body #settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section #chart-history-card {
      --history-menu-bg:#fff; --history-menu-text:#173353; --history-menu-muted:#536f87;
      --history-menu-border:#cbdde7; --history-menu-button:#f2f8fa; --history-menu-active:#007e78;
      --history-menu-danger:#a43240; --history-menu-danger-border:#dfabb0; --history-menu-danger-bg:#fff2f1;
    }
    html[data-appearance="black"] body #settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section #chart-history-card {
      --history-menu-bg:#202020; --history-menu-text:#f0f0f0; --history-menu-muted:#bcbcbc;
      --history-menu-border:#555; --history-menu-button:#2a2a2a; --history-menu-active:#20d1c8;
      --history-menu-danger:#ff9ba0; --history-menu-danger-border:#a64b54; --history-menu-danger-bg:#382527;
    }
    html[data-theme="warm-oak"][data-appearance="warm-oak"] body #settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section #chart-history-card {
      --history-menu-bg:#fbf7f0 !important; --history-menu-text:#493323 !important; --history-menu-muted:#66594d !important;
      --history-menu-border:#d8c3a8 !important; --history-menu-button:#f4ecdf !important; --history-menu-active:#00675d !important;
      --history-menu-danger:#a43d30 !important; --history-menu-danger-border:#d79b8c !important; --history-menu-danger-bg:#f9ebe3 !important;
    }
    html body #settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section #chart-history-card .chart-history-filter-menu {
      display:grid !important; grid-template-columns:minmax(0,1fr) !important; gap:12px !important;
      position:absolute !important; top:calc(100% + 8px) !important; right:0 !important; left:auto !important;
      width:min(260px, calc(100vw - 32px)) !important; min-width:0 !important; max-width:calc(100vw - 32px) !important;
      padding:14px !important; box-sizing:border-box !important; border:1px solid var(--history-menu-border) !important;
      border-radius:10px !important; background:var(--history-menu-bg) !important; background-image:none !important;
      color:var(--history-menu-text) !important; box-shadow:0 12px 28px rgba(0,0,0,.22) !important;
    }
    html body #settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section #chart-history-card .chart-history-menu-group > span {
      display:block !important; margin:0 0 8px !important; color:var(--history-menu-muted) !important;
      -webkit-text-fill-color:var(--history-menu-muted) !important; font-size:12px !important; line-height:18px !important;
    }
    html body #settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section #chart-history-card .chart-history-sort-actions {
      display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:8px !important; width:100% !important;
    }
    html body #settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section #chart-history-card .chart-history-filter-menu button {
      box-sizing:border-box !important; display:flex !important; align-items:center !important; justify-content:center !important;
      width:100% !important; min-width:0 !important; max-width:none !important; height:42px !important; min-height:42px !important; max-height:none !important;
      padding:8px 10px !important; margin:0 !important; border:1px solid var(--history-menu-border) !important; border-radius:6px !important;
      background:var(--history-menu-button) !important; color:var(--history-menu-text) !important; -webkit-text-fill-color:var(--history-menu-text) !important;
      font-family:inherit !important; font-size:13px !important; font-weight:600 !important; line-height:18px !important;
      letter-spacing:0 !important; text-align:center !important; white-space:nowrap !important; overflow:visible !important;
    }
    html body #settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section #chart-history-card .chart-history-sort-actions button.active {
      color:var(--history-menu-active) !important; -webkit-text-fill-color:var(--history-menu-active) !important; border-color:var(--history-menu-active) !important;
    }
    html body #settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section #chart-history-card .chart-history-filter-menu :is(#chart-history-delete-range,#chart-history-erase-all) {
      color:var(--history-menu-danger) !important; -webkit-text-fill-color:var(--history-menu-danger) !important;
      border-color:var(--history-menu-danger-border) !important; background:var(--history-menu-danger-bg) !important;
    }
    html body #settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section #chart-history-card .chart-history-filter-menu button:focus-visible {
      outline:2px solid var(--history-menu-active) !important; outline-offset:2px !important;
    }
  }
}