/* Shared Spark-inspired screen styling. Printed worksheets and PDF artwork
   retain their document styles; saved dark/seasonal palettes remain available. */
@media screen {
  html { --nexus-brand: #d50037; --nexus-slate: #626e74; }
  html:not(.nexus-dark-gray):not(.nexus-seasonal) body {
    background: #e7e7e7 !important;
    color: #41474a;
    --page-bg: #e7e7e7;
    --tools-text: #41474a;
    --tools-muted: #62686b;
    --tools-line: #d5d8da;
  }
  html:not(.nexus-seasonal) body :is(.site-global-nav, .site-shared-compact-bar, .site-notes-compact-nav) {
    background: var(--nexus-brand) !important;
    color: #fff !important;
    border-top-color: var(--nexus-brand) !important;
    border-bottom-color: #b90030 !important;
  }
  html:not(.nexus-seasonal) body :is(.site-global-nav, .site-shared-compact-bar, .site-notes-compact-nav)
    :is(.site-nav-item, .output-button, .site-nav-account, .site-shared-compact-title, .site-shared-compact-search, .compact-nav-toggle, .site-notes-nav-toggle, .site-notes-search-shortcut, .nexus-theme-toggle) {
    color: #fff !important;
  }
  html:not(.nexus-seasonal) body :is(.site-global-nav, .site-shared-compact-bar, .site-notes-compact-nav)
    :is(.site-shared-nav-brand-icon, .site-shared-compact-title-icon, .nexus-hamburger-svg) {
    filter: brightness(0) invert(1) !important;
  }
  html:not(.nexus-seasonal) body .site-global-nav :is(.site-nav-item, .output-button):is(:hover, :focus-visible, [aria-current="page"]) {
    background: #ae002d !important;
    color: #fff !important;
  }
  html body :is(.tool-card, .news-story-card, .home-upcoming-pane, .note-card, .money-count-panel, .sales-report-panel, .reports-card) {
    border-radius: 5px !important;
    box-shadow: none !important;
  }
  html:not(.nexus-dark-gray):not(.nexus-seasonal) body :is(.tool-card, .news-story-card, .home-upcoming-pane, .note-card, .money-count-panel) {
    background: #fff !important;
    border-color: #d5d8da !important;
  }
  html body .tool-card {
    padding: 24px !important;
    min-height: 260px;
    border-top: 5px solid var(--nexus-slate) !important;
  }
  html body .tool-card-icon {
    width: 48px; height: 48px;
    border-radius: 50% !important;
    background: var(--nexus-slate) !important;
    border-color: transparent !important;
    color: #fff !important;
  }
  html body .tool-card-icon svg { color: #fff !important; stroke: currentColor !important; }
  html body .tool-card-copy { margin-top: 20px; }
  html body .tool-card h2 { font-size: clamp(21px, 2.2vw, 28px); line-height: 1.22; letter-spacing: -.02em; }
  html body .tool-card-category { margin-bottom: 10px; font-size: 11px; letter-spacing: .07em; }
  html body .tool-card p { font-size: 14px; line-height: 1.6; }
  html body .tool-card-open { color: var(--nexus-brand); }
  html body .vm-guide .vm-meta { font-size: 12px; margin-top: 20px; }
  html body .vm-actions { gap: 10px; padding-top: 20px; }
  html body .vm-actions :is(a, button) { min-height: 44px; border-radius: 4px; font-size: 13px; }
  html:not(.nexus-seasonal) body :is(.vm-actions a[data-download], .news-page-button-primary, .news-story-button-primary, .notes-button-primary, .sales-primary) {
    background: var(--nexus-brand) !important;
    border-color: var(--nexus-brand) !important;
    color: #fff !important;
    border-radius: 4px;
  }
  html:not(.nexus-seasonal) body :is(.vm-actions a[data-download], .news-page-button-primary, .news-story-button-primary, .notes-button-primary, .sales-primary):hover {
    background: #ae002d !important;
    border-color: #ae002d !important;
  }
  html body .vm-back { display: inline-flex; align-items: center; min-height: 40px; text-decoration: none; font-size: 14px; }
  html body .vm-mobile-title { margin: 14px 0 10px; font-size: clamp(23px, 3vw, 30px); }
  html:not(.nexus-dark-gray):not(.nexus-seasonal) body :is(.home-promo-heading, .home-upcoming-pane-heading) {
    background: var(--nexus-slate) !important;
    color: #fff !important;
    padding: 18px 20px;
    border: 0;
    border-radius: 4px 4px 0 0;
  }
  html:not(.nexus-dark-gray):not(.nexus-seasonal) body :is(.home-promo-title, .home-promo-updated) { color: inherit !important; }
  html body .home-promo-title { text-transform: uppercase; letter-spacing: .035em; font-size: 15px; }
  html:not(.nexus-dark-gray):not(.nexus-seasonal) body :is(.home-promo-list, .home-visual-task-list, .home-upcoming-promo-list) {
    background: #fff; padding: 0 18px; border-radius: 0 0 4px 4px;
  }
  html:not(.nexus-seasonal) body .home-promo-list-key .home-promo-content {
    background: var(--nexus-brand) !important; border-color: var(--nexus-brand) !important; color: #fff !important;
  }
  html:not(.nexus-seasonal) body .home-promo-list-key .home-promo-content :is(h3, p) { color: #fff !important; }
  html:not(.nexus-seasonal) body .home-section-tab.is-active {
    background: var(--nexus-brand) !important; color: #fff !important; border-color: var(--nexus-brand) !important;
  }
  html body .home-section-tab { border-radius: 4px 4px 0 0; }
  html:not(.nexus-dark-gray):not(.nexus-seasonal) body :is(.home-promo-date, .home-visual-task-date, .home-upcoming-promo-date) {
    background: var(--nexus-slate); color: #fff;
  }
  html body .news-story-card { border-top-width: 1px; }
  html body .news-story-card > h2 { text-transform: uppercase; letter-spacing: .015em; line-height: 1.25; }
  html body .vm-guide:focus-within { outline-offset: 3px; }
  @media (max-width: 620px) {
    html body.tools-page .tools-shell { width: auto; margin: 0 12px 32px; padding: 16px 0; }
    html body .tools-grid { gap: 14px; }
    html body .tool-card { border-width: 1px; border-top-width: 5px; min-height: 0; padding: 22px !important; }
    html body .vm-grid { gap: 14px; }
    html body .home-promo-title { font-size: 13px; }
  }
}

/* Match the visible mark (the SVG includes padding) to the title's cap height. */
@media screen {
  html body .site-shared-compact-bar .site-shared-compact-title-icon {
    width: 1.3em !important;
    height: 1.3em !important;
    min-width: 1.3em !important;
    max-width: none !important;
    flex: 0 0 1.3em !important;
    object-fit: contain !important;
  }
  html body :is(.site-shared-compact-search, .site-notes-search-shortcut) svg {
    color: #fff !important;
    stroke: #fff !important;
    fill: none !important;
  }
}

/* Navigation glyphs follow the header foreground in every appearance mode. */
@media screen {
  html body .site-global-nav .site-nav-item svg {
    color: #fff !important;
    stroke: #fff !important;
    fill: none !important;
  }
  html body .site-global-nav .site-nav-item :is(.power-bi-icon, .power-bi-icon rect, .workbench-icon, .workbench-icon rect) {
    fill: #fff !important;
    stroke: none !important;
  }
  html body .site-global-nav .site-nav-item .spark-icon {
    fill: #fff !important;
    stroke: #fff !important;
  }
  html body .site-global-nav .site-nav-account,
  html body .site-global-nav .site-nav-account strong {
    color: #fff !important;
  }
  html body .site-global-nav .site-nav-theme-slot .nexus-theme-toggle,
  html body .site-global-nav .nexus-theme-toggle {
    appearance: none !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 50% !important;
    box-shadow: none !important;
    color: #fff !important;
  }
  html body .site-global-nav .nexus-theme-toggle svg {
    color: #fff !important;
    stroke: currentColor !important;
    fill: none !important;
  }
  html body .site-global-nav .site-nav-theme-slot .nexus-theme-toggle:hover {
    background: rgb(255 255 255 / .12) !important;
  }
  html body .site-global-nav .site-nav-theme-slot .nexus-theme-toggle:focus-visible {
    outline: 2px solid #fff !important;
    outline-offset: 2px !important;
  }
}

/* Override legacy rules on SVG children, not just their parent SVG. */
@media screen {
  html body .site-global-nav.site-shared-desktop-nav .site-nav-item :is(.site-shared-nav-icon-outline, .site-shared-nav-icon-outline *, .site-shared-nav-icon-spark, .site-shared-nav-icon-spark *) {
    color: #fff !important;
    fill: none !important;
    stroke: #fff !important;
  }
  html body .site-global-nav.site-shared-desktop-nav .site-nav-item :is(.site-shared-nav-icon-filled, .site-shared-nav-icon-filled *) {
    color: #fff !important;
    fill: #fff !important;
    stroke: none !important;
  }
  html body .site-global-nav.site-shared-desktop-nav .site-nav-theme-slot,
  html body .site-global-nav.site-shared-desktop-nav .site-nav-theme-slot button.nexus-theme-toggle {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 50% !important;
  }
  html body .site-global-nav.site-shared-desktop-nav .site-nav-theme-slot button.nexus-theme-toggle :is(svg, svg *) {
    background: transparent !important;
    box-shadow: none !important;
    color: #fff !important;
    stroke: #fff !important;
    fill: none !important;
  }
}

/* Rounded action buttons, retaining each appearance mode's existing colors. */
@media screen {
  html:root body :is(
    .vm-guide .vm-actions a,
    .vm-guide .vm-actions button,
    .news-page-button,
    .news-page-refresh,
    .news-card-action,
    .news-story-button,
    .notes-button,
    .sales-button,
    .recap-actions button,
    .recap-actions a,
    .money-count-action-button,
    .money-count-clear-button,
    .money-count-vault-button,
    .money-count-today-button,
    .money-count-vault-actions button,
    .money-count-confirm-actions button,
    .store-layout-primary-action,
    .store-layout-secondary-action,
    .secondary-button,
    .cloud-primary-button,
    .cloud-secondary-button,
    .cloud-done-button,
    .schedule-print-button,
    .promo-guide-view,
    .promo-pdf-download-button
  ) {
    box-sizing: border-box;
    border-radius: 999px !important;
    padding: 12px 24px !important;
    min-height: 44px;
    height: auto;
    line-height: 1.2 !important;
    text-align: center;
  }
}

/* Links and native buttons share the same label alignment and pill proportions. */
@media screen {
  html:root body .vm-guide .vm-actions :is(a, button):not([hidden]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    margin: 0;
  }
  html:root body .vm-guide .vm-actions {
    gap: 12px;
    align-items: center;
  }
}

/* Notes actions and category switcher share the rounded schedule controls. */
@media screen {
  html:root body .note-card .note-card-action,
  html:root body .notes-dialog .notes-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: 999px !important;
    padding: 10px 18px !important;
    min-height: 40px;
    line-height: 1.2;
  }
  html:root body :is(.note-card-action, .notes-button, .notes-dialog-close, .rich-note-tool, .note-picture-remove) svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  html:root body .notes-dialog-close {
    display: grid;
    place-items: center;
    border-radius: 50%;
  }
  html:root body .notes-category-filters {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
    width: fit-content;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
    padding: 5px;
    margin: 16px 0 22px;
    border: 1px solid #d5d1ce;
    border-radius: 999px;
    background: #f4f3f2;
  }
  html:root body .notes-category-filters .notes-filter {
    flex: 0 0 auto;
    min-height: 42px;
    margin: 0;
    padding: 10px 24px;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: #625d59 !important;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
  }
  html:root body .notes-category-filters .notes-filter.is-active {
    background: #171717 !important;
    color: #fff !important;
    box-shadow: 0 1px 3px rgb(0 0 0 / .12);
  }
  html:root body .notes-category-filters .notes-filter:focus-visible {
    outline: 2px solid #df0038;
    outline-offset: -3px;
  }
  html:root.nexus-dark-gray body .notes-category-filters {
    background: #242424;
    border-color: #494643;
  }
  html:root.nexus-dark-gray body .notes-category-filters .notes-filter {
    color: #c9c5c2 !important;
  }
  html:root.nexus-dark-gray body .notes-category-filters .notes-filter.is-active {
    background: #f0eeec !important;
    color: #1c1c1c !important;
  }
  html:root.nexus-seasonal body .notes-category-filters {
    background: #21191e;
    border-color: #684651;
  }
  html:root.nexus-seasonal body .notes-category-filters .notes-filter {
    color: #ead9ca !important;
  }
  html:root.nexus-seasonal body .notes-category-filters .notes-filter.is-active {
    background: #ff7417 !important;
    color: #241109 !important;
  }
}