/*
 * Surface harmony v2.
 *
 * This is an additive, reversible layer. The existing hero is deliberately
 * excluded: its brand-left / white-actions-right composition stays intact.
 * Remove this stylesheet link from main.tpl to restore the previous palette.
 */

/* Excel is the fallback theme, but the footer lives outside <main>. */
body:has(main#top:is(.product-page, :has(> #excel-download-start))) {
  --page-app-accent: #107c41;
}

main#top:is(.product-page, :has(> #excel-download-start)) {
  --app-accent: #107c41;
  --app-accent-rgb: 16, 124, 65;
}

main#top:is(.app-detail-page:not(.app-detail-page--apps), :is(.product-page, :has(> #excel-download-start))) {
  --surface-line-soft: rgba(var(--app-accent-rgb), .07);
  --surface-line-color: rgba(var(--app-accent-rgb), .1);
  background-color: color-mix(in srgb, var(--app-accent) 1.25%, #f8faf9) !important;
}

/* Muted brand surface: one soft highlight over one calm brand field. */
main#top:is(.app-detail-page:not(.app-detail-page--apps), :is(.product-page, :has(> #excel-download-start))) > .trust-strip {
  border-top-color: rgba(255, 255, 255, .16) !important;
  border-bottom-color: color-mix(in srgb, var(--app-accent) 50%, #293c47) !important;
  background:
    radial-gradient(560px 150px at 16% 0%, rgba(255, 255, 255, .075), transparent 72%),
    linear-gradient(
      108deg,
      color-mix(in srgb, var(--app-accent) 47%, #223039) 0%,
      color-mix(in srgb, var(--app-accent) 54%, #2a3740) 54%,
      color-mix(in srgb, var(--app-accent) 48%, #1c2a32) 100%
    ) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    inset 0 -1px 0 rgba(0, 0, 0, .06) !important;
}

/* Information register: a clean near-white pause after the coloured hero. */
main#top:is(.app-detail-page:not(.app-detail-page--apps), :is(.product-page, :has(> #excel-download-start))) > .program-facts {
  border-top-color: rgba(var(--app-accent-rgb), .045) !important;
  border-bottom: 0 !important;
  background:
    radial-gradient(680px 280px at 10% 14%, rgba(var(--app-accent-rgb), .035), transparent 72%),
    linear-gradient(
      112deg,
      color-mix(in srgb, var(--app-accent) 2.2%, #fff) 0%,
      #fff 52%,
      color-mix(in srgb, var(--app-accent) .8%, #f8fafb) 100%
    ) !important;
  box-shadow: none !important;
}

main#top:is(.app-detail-page:not(.app-detail-page--apps), :is(.product-page, :has(> #excel-download-start))) .program-fact::before {
  background: color-mix(in srgb, var(--app-accent) 84%, #3d5966) !important;
}

main#top:is(.app-detail-page:not(.app-detail-page--apps), :is(.product-page, :has(> #excel-download-start))) .program-fact::after {
  border-bottom-color: rgba(var(--app-accent-rgb), .16) !important;
}

/* Version catalog: the brightest data section, with one clear brand bloom. */
main#top:is(.app-detail-page:not(.app-detail-page--apps), :is(.product-page, :has(> #excel-download-start))) > section#versions.section-gray {
  border-top-color: rgba(var(--app-accent-rgb), .16) !important;
  border-bottom-color: rgba(var(--app-accent-rgb), .055) !important;
  background:
    radial-gradient(
      980px 520px at -8% -6%,
      rgba(var(--app-accent-rgb), .18) 0%,
      rgba(var(--app-accent-rgb), .06) 46%,
      transparent 72%
    ),
    radial-gradient(
      760px 440px at 104% 76%,
      rgba(var(--app-accent-rgb), .075) 0%,
      rgba(var(--app-accent-rgb), .025) 44%,
      transparent 72%
    ),
    linear-gradient(
      118deg,
      color-mix(in srgb, var(--app-accent) 5.7%, #fff) 0%,
      #fff 50%,
      color-mix(in srgb, var(--app-accent) 2.4%, #f9fcff) 100%
    ) !important;
  box-shadow: inset 0 1px 0 rgba(var(--app-accent-rgb), .07) !important;
}

main#top:is(.app-detail-page:not(.app-detail-page--apps), :is(.product-page, :has(> #excel-download-start)))
  > section#versions.section-gray::before {
  border-color: rgba(var(--app-accent-rgb), .11) !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Technical zone: a clean cool field; the matrix itself provides enough structure. */
main#top:is(.app-detail-page:not(.app-detail-page--apps), :is(.product-page, :has(> #excel-download-start))) > section#requirements.system-requirements {
  border-top: 0 !important;
  border-bottom: 0 !important;
  background:
    radial-gradient(760px 320px at 94% 5%, rgba(var(--app-accent-rgb), .042), transparent 72%),
    linear-gradient(180deg, #f8fbfd 0%, #f0f5f8 100%) !important;
}

/* Requirements use the same compact vertical rhythm as the program facts. */
@media (min-width: 621px) {
  main#top:is(.app-detail-page:not(.app-detail-page--apps), :is(.product-page, :has(> #excel-download-start)))
    > section#requirements.system-requirements {
    min-height: 0 !important;
    padding: 44px 0 48px !important;
  }

  main#top:is(.app-detail-page:not(.app-detail-page--apps), :is(.product-page, :has(> #excel-download-start)))
    #requirements .system-requirements-heading {
    margin-bottom: 20px !important;
  }
}

@media (min-width: 981px) {
  main#top:is(.app-detail-page:not(.app-detail-page--apps), :is(.product-page, :has(> #excel-download-start)))
    #requirements .requirements-matrix-head {
    min-height: 52px !important;
  }

  main#top:is(.app-detail-page:not(.app-detail-page--apps), :is(.product-page, :has(> #excel-download-start)))
    #requirements .requirements-matrix-row {
    min-height: 50px !important;
  }

  main#top:is(.app-detail-page:not(.app-detail-page--apps), :is(.product-page, :has(> #excel-download-start)))
    #requirements .requirements-matrix-head > * {
    padding-block: 10px !important;
  }

  main#top:is(.app-detail-page:not(.app-detail-page--apps), :is(.product-page, :has(> #excel-download-start)))
    #requirements .requirements-matrix-row > * {
    padding-block: 9px !important;
  }
}

/* Remove the two neighbouring borders that visually frame Requirements. */
main#top:is(.app-detail-page:not(.app-detail-page--apps), :is(.product-page, :has(> #excel-download-start))) > section#versions {
  border-bottom: 0 !important;
}

main#top:is(.app-detail-page:not(.app-detail-page--apps), :is(.product-page, :has(> #excel-download-start)))
  > section#requirements + section#features {
  border-top: 0 !important;
}

/* Feature showcase: a quiet editorial neutral with one product-colour light source. */
main#top:is(.app-detail-page:not(.app-detail-page--apps), :is(.product-page, :has(> #excel-download-start))) > section#features.excel-capabilities {
  border-top-color: rgba(var(--app-accent-rgb), .06) !important;
  border-bottom: 0 !important;
  background:
    radial-gradient(900px 420px at 7% 0%, rgba(var(--app-accent-rgb), .072), transparent 73%),
    linear-gradient(
      128deg,
      color-mix(in srgb, var(--app-accent) 4.5%, #fbfaf8) 0%,
      #f8f8f5 58%,
      #f3f4f2 100%
    ) !important;
  box-shadow: none !important;
}

/* FAQ: reverse the light direction to lead the eye toward help and the illustration. */
main#top:is(.app-detail-page:not(.app-detail-page--apps), :is(.product-page, :has(> #excel-download-start))) > section#faq.faq-section {
  border-top-color: rgba(var(--app-accent-rgb), .075) !important;
  border-bottom-color: rgba(var(--app-accent-rgb), .055) !important;
  background:
    radial-gradient(900px 380px at 94% 26%, rgba(var(--app-accent-rgb), .066), transparent 73%),
    linear-gradient(
      118deg,
      #fbfbfa 0%,
      #fafafa 54%,
      color-mix(in srgb, var(--app-accent) 3.8%, #f8fafc) 100%
    ) !important;
}

/* Closing CTA echoes the hero: product colour on the left, near-white on the right. */
main#top:is(.app-detail-page:not(.app-detail-page--apps), :is(.product-page, :has(> #excel-download-start))) > section.download-return {
  border-top-color: rgba(var(--app-accent-rgb), .075) !important;
  background:
    radial-gradient(820px 330px at 10% 64%, rgba(var(--app-accent-rgb), .12), transparent 72%),
    linear-gradient(
      112deg,
      color-mix(in srgb, var(--app-accent) 15%, #fff) 0%,
      color-mix(in srgb, var(--app-accent) 6.5%, #fff) 55%,
      color-mix(in srgb, var(--app-accent) 1.25%, #fff) 100%
    ) !important;
}

/* The release hover rail follows the current product instead of the Excel fallback. */
main#top:is(.app-detail-page:not(.app-detail-page--apps), :is(.product-page, :has(> #excel-download-start)))
  #versions .release-row:hover {
  box-shadow: inset 2px 0 0 rgba(var(--app-accent-rgb), .45) !important;
}

/* Active controls follow the current product instead of the old green fallback. */
main#top:is(.app-detail-page:not(.app-detail-page--apps), :is(.product-page, :has(> #excel-download-start))) #versions .filter-button.active,
main#top:is(.app-detail-page:not(.app-detail-page--apps), :is(.product-page, :has(> #excel-download-start))) #versions .filter-button.active:hover,
main#top:is(.app-detail-page:not(.app-detail-page--apps), :is(.product-page, :has(> #excel-download-start))) #versions .filter-button.active:focus-visible,
main#top:is(.app-detail-page:not(.app-detail-page--apps), :is(.product-page, :has(> #excel-download-start))) #requirements .requirements-platform-tab.active,
main#top:is(.app-detail-page:not(.app-detail-page--apps), :is(.product-page, :has(> #excel-download-start))) #requirements .requirements-platform-tab[aria-selected="true"],
main#top:is(.app-detail-page:not(.app-detail-page--apps), :is(.product-page, :has(> #excel-download-start))) #faq .faq-topic.active,
main#top:is(.app-detail-page:not(.app-detail-page--apps), :is(.product-page, :has(> #excel-download-start))) #faq .faq-topic[aria-selected="true"] {
  color: color-mix(in srgb, var(--app-accent) 82%, #17232c) !important;
  border-color: transparent !important;
  background: color-mix(in srgb, var(--app-accent) 8.5%, #fff) !important;
  box-shadow:
    inset 0 0 0 1px rgba(var(--app-accent-rgb), .22),
    inset 0 1px 0 rgba(255, 255, 255, .86) !important;
}

main#top:is(.app-detail-page:not(.app-detail-page--apps), :is(.product-page, :has(> #excel-download-start))) #versions .filter-button.active .filter-icon-all,
main#top:is(.app-detail-page:not(.app-detail-page--apps), :is(.product-page, :has(> #excel-download-start))) #faq .faq-topic.active svg,
main#top:is(.app-detail-page:not(.app-detail-page--apps), :is(.product-page, :has(> #excel-download-start))) #faq .faq-topic[aria-selected="true"] svg {
  color: var(--app-accent) !important;
}

main#top:is(.app-detail-page:not(.app-detail-page--apps), :is(.product-page, :has(> #excel-download-start))) #versions .filter-button:focus-visible,
main#top:is(.app-detail-page:not(.app-detail-page--apps), :is(.product-page, :has(> #excel-download-start))) #requirements .requirements-platform-tab:focus-visible,
main#top:is(.app-detail-page:not(.app-detail-page--apps), :is(.product-page, :has(> #excel-download-start))) #faq .faq-topic:focus-visible {
  outline: 0 !important;
  box-shadow:
    inset 0 0 0 2px rgba(var(--app-accent-rgb), .48),
    0 0 0 3px rgba(var(--app-accent-rgb), .1) !important;
}

main#top:is(.app-detail-page:not(.app-detail-page--apps), :is(.product-page, :has(> #excel-download-start))) #faq .faq-item {
  background: rgba(255, 255, 255, .72) !important;
  box-shadow: 0 8px 20px rgba(45, 57, 66, .032) !important;
}

main#top:is(.app-detail-page:not(.app-detail-page--apps), :is(.product-page, :has(> #excel-download-start))) #faq .faq-topic-panel .faq-item[open] {
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, .97),
      color-mix(in srgb, var(--app-accent) 4.5%, #fff)
    ) !important;
  box-shadow:
    inset 3px 0 0 rgba(var(--app-accent-rgb), .42),
    0 12px 28px rgba(var(--app-accent-rgb), .055) !important;
}

main#top:is(.app-detail-page:not(.app-detail-page--apps), :is(.product-page, :has(> #excel-download-start))) #faq .faq-topic-panel .faq-item[open] summary::after {
  border-color: rgba(var(--app-accent-rgb), .16) !important;
  background-color: color-mix(in srgb, var(--app-accent) 6%, #fff) !important;
}