/* Spreadsheet-Tutorials.com | Unified visual language (2026-10-11)
   Applied AFTER existing styles. Deliberately preserves function guide HTML,
   card collapse controls, tool workspaces, navigation and search behaviour.
   Background: soft neutral-grey canvas; surfaces: white; ink: navy; accents: teal.
*/
:root {
  color-scheme: light;
  --site-canvas: #f5f8fa;
  --site-surface: #ffffff;
  --site-soft: #edf6f7;
  --site-ink: #1b2e42;
  --site-muted: #51677a;
  --site-line: #dbe5eb;
  --site-accent: #087981;
  --site-accent-hover: #066068;
  --site-focus: #16b8b6;
  --site-shadow: 0 2px 12px rgba(15, 42, 60, .045);
  --site-shadow-hover: 0 7px 24px rgba(15, 42, 60, .095);
  --site-radius: 14px;
  --site-reading: 77ch;
  /* Legacy variables are normalized here so older page CSS and new UI agree. */
  --bg: var(--site-canvas);
  --card-bg: var(--site-surface);
  --text: var(--site-ink);
  --text-dark: var(--site-ink);
  --muted: var(--site-muted);
  --border: var(--site-line);
  --hover: var(--site-soft);
  --accent: var(--site-accent);
  --accent-strong: var(--site-accent);
  --accent-soft: #e6f4f4;
  --readability-accent: var(--site-accent);
  --code-bg: #122a3c;
  --code-text: #effbfe;
}
html.dark {
  color-scheme: dark;
  --site-canvas: #101c2b;
  --site-surface: #192b3c;
  --site-soft: #213d48;
  --site-ink: #e7f3fb;
  --site-muted: #c0d0da;
  --site-line: #3b5265;
  --site-accent: #82e5dd;
  --site-accent-hover: #aaf8ee;
  --site-focus: #82e5dd;
  --site-shadow: 0 2px 14px rgba(0, 0, 0, .15);
  --site-shadow-hover: 0 6px 20px rgba(0, 0, 0, .23);
  --bg: var(--site-canvas);
  --card-bg: var(--site-surface);
  --text: var(--site-ink);
  --text-dark: var(--site-ink);
  --muted: var(--site-muted);
  --border: var(--site-line);
  --hover: var(--site-soft);
  --accent: var(--site-accent);
  --accent-strong: var(--site-accent);
  --accent-soft: var(--site-soft);
  --readability-accent: var(--site-accent);
  --code-bg: #0b1928;
  --code-text: #f3fcff;
}

/* Shared canvas and typography: one page background everywhere. */
html, html body, html.dark body { background: var(--site-canvas) !important; color: var(--site-ink); }
body { line-height: 1.68; -webkit-font-smoothing: antialiased; }
main { min-width: 0; }
main :where(h1,h2,h3,h4) { color: var(--site-ink); letter-spacing: -.015em; line-height: 1.29; }
main :where(p,li) { line-height: 1.72; }
main :where(p,li,td,th) { overflow-wrap: anywhere; }
main a:not(.btn):not([class*="button"]):not(.home-tool-card):not(.software-link-card):not(.guide-card):not(.function-link):not(.solutions-card-link):not(.tutorial-summary) {
  text-underline-offset: .17em;
}
main a { color: var(--site-accent); }
main a:hover { color: var(--site-accent-hover); }
:where(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid var(--site-focus); outline-offset: 3px; }
:where(.site-list-page, .function-page, .csvd-shell, .mig-shell, .compat-shell) { min-width: 0; }
.site-list-page { width: min(100%, 1160px); margin-inline: auto; padding: clamp(1.4rem,3vw,2.5rem) clamp(1rem,3vw,1.5rem) 3.5rem; }
.breadcrumbs, .compat-crumb, .csvd-crumb, .mig-crumb { font-size: .85rem; color: var(--site-muted); margin-bottom: 1.1rem; line-height: 1.55; }
.breadcrumbs a, .compat-crumb a, .csvd-crumb a, .mig-crumb a { color: var(--site-muted); }
.site-heading, .section-title-row h2 { color: var(--site-ink); letter-spacing: -.025em; }
.section-title-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1.25rem; }
.section-title-row > a { margin-left: auto; font-weight: 730; font-size: .95rem; }

/* Visual hierarchy: cards for actionable/selectable content, rules for document sections. */
.card, .guide-card, .search-result-card, .home-tool-card, .home-transparency-panel,
.tutorial-hub-intro, .tutorial-header, .tutorial-body, .tutorial-next,
.tutorial-summary, .trust-software-card, .trust-feature,
.trust-contact-card, .solutions-card {
  border: 1px solid var(--site-line);
  border-radius: var(--site-radius);
  background: var(--site-surface);
  color: var(--site-ink);
  box-shadow: var(--site-shadow);
}
.card { background: var(--site-surface) !important; }
.card:hover { transform: none; box-shadow: var(--site-shadow); }
:where(.guide-card,.home-tool-card,.software-link-card,.tutorial-summary,.trust-software-card,.function-link):hover {
  border-color: #54a7ae;
  box-shadow: var(--site-shadow-hover);
  text-decoration: none;
}
:where(.guide-card,.home-tool-card,.software-link-card,.tutorial-summary,.trust-software-card,.function-link):focus-visible { border-color: var(--site-accent); }
:where(.guide-card,.home-tool-card,.software-link-card,.tutorial-summary,.trust-software-card) {
  transition: border-color .16s ease, box-shadow .16s ease;
}

/* Header + footer: maintain white surfaces and predictable contrast. */
.site-header-v2.hh-header { background: var(--site-surface); border-color: var(--site-line); }
.site-header-v2 .site-header-top { padding-block: .75rem; }
.site-header-v2 .site-header-search input { background: var(--site-surface); border-color: var(--site-line); color: var(--site-ink); }
.site-header-v2 .site-search-button { background: #087981; color: #fff; border-radius: 9px; font-weight: 760; }
.site-header-v2 .site-search-button:hover { background: #066068; }
.site-nav-shell { background: var(--site-surface); border-color: var(--site-line); }
.site-nav-links a, .site-header-v2 .site-header-contact { color: var(--site-ink); }
.site-nav-links a:hover, .site-nav-links a:focus-visible { background: var(--site-soft); color: var(--site-accent); }
.site-header-v2 .hh-dropdown summary, .site-header-v2 .hh-toggle-icon { background: var(--site-surface); border-color: var(--site-line); color: var(--site-ink); }
.site-header-v2 .hh-dropdown-menu { background: var(--site-surface); border-color: var(--site-line); }
.site-header-v2 .hh-dropdown-menu a { color: var(--site-ink); }
.site-header-v2 .hh-dropdown-menu a:hover { background: var(--site-soft); color: var(--site-accent); }
.site-footer { background: var(--site-surface); border-top-color: var(--site-line); box-shadow: none; }
.site-footer .trust-footer-brand, .site-footer .trust-footer-nav h2 { color: var(--site-ink); }
.site-footer .trust-footer-about p, .site-footer .trust-footer-nav a { color: var(--site-muted); }
.site-footer .trust-footer-nav a:hover { color: var(--site-accent); }
.site-footer .trust-footer-bottom { border-color: var(--site-line); }

/* Homepage — same white cards and teal/navy content conventions. */
.home-section { max-width: 1160px; }
.home-section > .section-title-row { margin-bottom: .8rem; }
.home-section .site-heading { color: var(--site-ink); }
.home-section-intro { color: var(--site-muted); }
.home-tools-grid, .home-software .software-nav-grid, .home-section .guide-card-grid { row-gap: 1rem; column-gap: 1rem; }
.home-tool-card, .guide-card, .software-link-card { background: var(--site-surface) !important; }
.home-tool-card { border-radius: var(--site-radius); padding: 1.4rem; }
.home-tool-card strong, .guide-card strong, .software-link-card h3 { color: var(--site-ink); }
.home-tool-link, .home-software .software-link-card .home-card-arrow { color: var(--site-accent); }
.home-section .guide-card strong { color: var(--site-accent); }
.home-transparency-panel { padding: clamp(1.2rem, 2.5vw, 1.8rem); }
.home-hero-v2 h1 { color: #fff; }
.home-hero-v2 .home-hero-description { color: #f1ffff; }
.home-hero-v2 .home-hero-links a { color: #fff; }
.home-hero-v2 .home-search button { color: #075966; }

/* Function guide — preserve the familiar cards and toggle behaviour, with lighter rhythm. */
.function-page:not(.function-directory) { width: min(100%, 975px); max-width: 975px; margin-inline: auto; padding: clamp(1.3rem,3.2vw,2.4rem) clamp(.9rem,2.6vw,1.4rem) 3.3rem; }
.function-page .breadcrumbs { margin-bottom: 1.05rem; }
.function-page .function-header.card { border-radius: var(--site-radius); border: 1px solid var(--site-line); padding: clamp(1.2rem, 3.5vw, 2rem); margin-bottom: 1.2rem; box-shadow: var(--site-shadow); }
.function-page .function-title { font-size: clamp(1.75rem,3vw,2.5rem); line-height: 1.18; color: var(--site-ink); letter-spacing: -.027em; }
.function-page .function-description { color: var(--site-ink); line-height: 1.68; }
.function-page .function-meta { gap: .4rem; }
.function-page .function-toc { background: var(--site-surface); border: 1px solid var(--site-line); border-radius: var(--site-radius); padding: 1rem 1.2rem; margin: 0 0 1.4rem; box-shadow: var(--site-shadow); }
.function-page .function-toc strong { display: block; margin-bottom: .55rem; color: var(--site-ink); }
.function-page .function-toc ul { margin: 0; padding-left: 1.35rem; columns: 2; column-gap: 2rem; }
.function-page .function-toc li { break-inside: avoid; margin: .24rem 0; font-size: .92rem; }
.function-page .function-content { line-height: 1.74; }
.function-page .function-content > .function-section.card {
  border-color: var(--site-line);
  border-radius: var(--site-radius);
  box-shadow: var(--site-shadow);
  margin-bottom: 1rem;
  background: var(--site-surface) !important;
  padding: clamp(1.15rem,2.6vw,1.7rem);
}
.function-page .function-content > .function-section.card:hover { box-shadow: var(--site-shadow); }
.function-page .function-content > .function-section > h2 { color: var(--site-ink); font-size: clamp(1.19rem,2.1vw,1.48rem); }
.function-page .function-section > .section-body { line-height: 1.74; }
.function-page .function-section h3 { color: var(--site-ink); }
.function-page .function-section-toggle { background: var(--site-soft); color: var(--site-accent); border-color: var(--site-line); }
.function-page .function-section pre { max-width:100%; background: var(--code-bg); color: var(--code-text); }
.function-page .function-section pre code { color: inherit; }
.function-page .function-content > .function-introduction .intro { border-radius: var(--site-radius); background: var(--site-surface); border-color: var(--site-line); box-shadow: var(--site-shadow); }
.function-page .related-card { box-shadow: var(--site-shadow); }

/* Function A-Z directories: use line-separated letter groups, not cards inside cards. */
.function-page.function-directory { width: min(100%, 1160px); max-width: 1160px; padding: clamp(1.3rem,3vw,2.35rem) clamp(.9rem,2.8vw,1.5rem) 3.5rem; }
.function-directory .function-header.card { padding: clamp(1.2rem,3vw,2rem); margin-bottom: 1rem; }
.function-directory .functions-categories.card, .function-directory .functions-az.card { padding: 1.1rem 1.3rem; margin-bottom: .9rem; box-shadow: var(--site-shadow); }
.function-directory .functions-categories h2, .function-directory .functions-az h2 { font-size: 1.13rem; line-height: 1.35; margin: 0 0 .65rem; }
.function-directory .functions-categories .category-grid { gap: .43rem; }
.function-directory .category-pill { border: 1px solid var(--site-line); background: var(--site-surface); color: var(--site-ink); min-height: 36px; padding: .35rem .78rem; font-size: .82rem; }
.function-directory .category-pill.active, .function-directory .category-pill[aria-pressed="true"] { color: #fff; background: #087981; border-color: #087981; }
.function-directory .az-bar { gap: .3rem; }
.function-directory .az-link { min-width: 31px; text-align: center; background: var(--site-soft); border: 1px solid transparent; border-radius: 7px; padding: .36rem .5rem; font-weight: 700; color: var(--site-accent); }
.function-directory .az-link:hover { background: var(--site-surface); border-color: var(--site-line); }
.function-directory .functions-list { margin-top: 1.35rem; }
.function-directory .functions-letter-group.card, .function-directory .functions-letter-group.card:hover {
  background: transparent !important; border: 0; padding: 0; margin: 0 0 1.6rem;
  border-radius: 0; box-shadow: none !important; transform: none;
}
.function-directory .functions-letter-group > h2 { display: flex; align-items: baseline; gap: .8rem; font-size: 1.38rem; line-height: 1.3; margin: 0 0 .72rem; padding: 0 0 .5rem; border-bottom: 1px solid var(--site-line); color: var(--site-ink); }
.function-directory .functions-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%,255px),1fr)); gap: .65rem; padding: 0; margin: 0; list-style: none; }
.function-directory .function-item, .function-directory .function-item + .function-item { margin: 0; min-width: 0; }
.function-directory .function-link { display: flex; flex-direction: column; gap: .3rem; min-height: 86px; padding: .9rem 1rem; border-radius: 11px; background: var(--site-surface); border: 1px solid var(--site-line); box-shadow: var(--site-shadow); color: var(--site-ink); }
.function-directory .function-link:hover { border-color: #55aab0; box-shadow: var(--site-shadow-hover); }
.function-directory .function-name { color: var(--site-accent); font-weight: 760; font-size: .99rem; }
.function-directory .function-summary { color: var(--site-muted); font-size: .87rem; line-height: 1.52; }
.function-directory .function-link:focus-visible { outline: 3px solid var(--site-focus); }
.function-directory :where([hidden]) { display: none !important; }

/* Problem Solver: a clear hero, selector and two-column cards. The historical
   solutions.css existed but was not loaded; the template now shows chooser first. */
.solutions-hub, .solutions-article { max-width: 1120px; }
.solutions-hub .solutions-intro, .solutions-article .solutions-article-header {
  background: linear-gradient(130deg, #e6f5f4, #f6fafb 70%);
  color: #193349;
  border: 1px solid #c9e3e4;
  border-radius: 16px;
  box-shadow: var(--site-shadow);
  margin-bottom: 1.1rem;
}
.solutions-hub .solutions-intro h1, .solutions-article-header h1 { color: #193349; }
.solutions-hub .solutions-deck, .solutions-article-header .solutions-deck { color: #2e5261; }
.solutions-hub .solutions-chooser { background: var(--site-surface); border-color: var(--site-line); box-shadow: var(--site-shadow); border-radius: var(--site-radius); }
.solutions-hub .solutions-chooser h2 { color: var(--site-ink); }
.solutions-hub .solutions-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; margin: .8rem 0 1.5rem; }
.solutions-hub .solutions-card { background: var(--site-surface); box-shadow: var(--site-shadow); min-height: 190px; border-radius: var(--site-radius); }
.solutions-hub .solutions-card h2 { font-size: 1.16rem; line-height: 1.35; }
.solutions-hub .solutions-card h2 a { color: var(--site-ink); }
.solutions-hub .solutions-card-topic, .solutions-hub .solutions-card-link { color: var(--site-accent); }
.solutions-hub .solutions-card p:not(.solutions-card-topic) { color: var(--site-muted); }
.solutions-hub .solutions-intro-content { max-width: unset; border-top: 1px solid var(--site-line); padding-top: 1.5rem; margin: 1.8rem 0; }
.solutions-hub .solutions-intro-content > p, .solutions-hub .solutions-intro-content > ol { max-width: 82ch; }
.solutions-hub .solutions-intro-content h2 { border: 0; padding: 0; margin: 1rem 0 .7rem; }
.solutions-hub .solutions-next-step { padding: 1.1rem 1.3rem; border: 1px solid var(--site-line); border-radius: var(--site-radius); background: var(--site-surface); }
.solutions-article .solutions-article-content { max-width: 850px; }
.solutions-article .solutions-article-content h2 { border-bottom: 1px solid var(--site-line); padding-bottom: .5rem; margin-bottom: .7rem; }
.solutions-article .solutions-end-links { border-top-color: var(--site-line); }
html.dark .solutions-hub .solutions-intro, html.dark .solutions-article .solutions-article-header { background: linear-gradient(130deg,#183e48,#1c3144); border-color: #385764; color: var(--site-ink); }
html.dark .solutions-hub .solutions-intro h1, html.dark .solutions-article-header h1, html.dark .solutions-hub .solutions-deck, html.dark .solutions-article-header .solutions-deck { color: var(--site-ink); }

/* Standard pages, task hubs, and software landing cards use one reading width. */
.site-list-page.content-page > h1 { color: var(--site-ink); font-size: clamp(1.85rem,3vw,2.55rem); margin-bottom: 1.2rem; }
.content-page .page-body { font-size: 1.02rem; line-height: 1.78; max-width: 940px; }
.content-page .page-body :is(p,ol,ul) { max-width: var(--site-reading); }
.content-page .page-body > h2 { color: var(--site-ink); border-top: 1px solid var(--site-line); padding-top: 1.3rem; }
.content-page .page-body > h3 { color: var(--site-ink); }
.content-page .page-body a { color: var(--site-accent); }
.software-landing .software-hero.card, .software-landing .software-categories.card { box-shadow: var(--site-shadow); }
.software-landing .software-featured .guide-card { border-color: var(--site-line); }
.software-landing .landing-guides { border-top: 1px solid var(--site-line); padding-top: .9rem; }
.tutorial-header, .tutorial-body, .tutorial-next, .tutorial-hub-intro { background: var(--site-surface); border-color: var(--site-line); box-shadow: var(--site-shadow); }
.tutorial-summary { background: var(--site-surface); color: var(--site-ink); border-color: var(--site-line); box-shadow: var(--site-shadow); }
.tutorial-summary small, .tutorial-tested { color: var(--site-muted); }

/* The specialist tools have their own interaction-specific CSS. Align only the
   outer panel treatment, page rhythm and text; do not change functional controls. */
.csvd .csvd-workspace, .csvd .csvd-results, .csvd .csvd-guidance, .mig-app .mig-workspace, .compat .compat-toolbar {
  border-color: var(--site-line); border-radius: var(--site-radius); box-shadow: var(--site-shadow);
}
.csvd .csvd-card, .mig-app .mig-program, .compat .compat-case-card { border-radius: 12px; }
.csvd .csvd-hero, .compat .compat-hero, .mig-app .mig-hero { max-width: 100%; }

/* Responsive and comfortable reading sizes. */
@media (max-width: 950px) {
  .solutions-hub .solutions-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .function-page .function-toc ul { columns: 1; }
}
@media (max-width: 720px) {
  .site-list-page { padding-inline: .9rem; }
  .function-page:not(.function-directory), .function-page.function-directory { padding-inline: .85rem; }
  .solutions-hub .solutions-grid { grid-template-columns: 1fr; }
  .solutions-hub .solutions-intro, .solutions-article .solutions-article-header { padding: 1.25rem; }
  .solutions-hub .solutions-card { min-height: 0; }
  .function-directory .functions-items { grid-template-columns: 1fr; }
  .function-page .function-toc { padding: .9rem 1.05rem; }
}
@media (max-width: 480px) {
  .function-page .function-content > .function-section.card { padding: 1.05rem 1.08rem; }
  .function-page .function-header.card { padding: 1.15rem; }
  .function-page .function-title { font-size: 1.82rem; }
  .function-directory .functions-categories.card, .function-directory .functions-az.card { padding: 1rem; }
  .home-section { padding-inline: 1rem; }
  .site-header-v2 .site-header-top { padding-inline: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
  :where(.guide-card,.home-tool-card,.software-link-card,.tutorial-summary,.trust-software-card) { transition: none; }
}

/* Small consistency details discovered in the responsive review. */
.function-page .related-card .related-list { display: flex; flex-wrap: wrap; gap: .45rem .5rem; list-style: none; margin: .65rem 0 0; padding: 0; }
.function-page .related-card .related-list li { margin: 0; }
.function-page .related-card .related-list a { display: inline-flex; padding: .38rem .64rem; border-radius: 7px; border: 1px solid var(--site-line); background: var(--site-soft); font-size: .89rem; font-weight: 680; text-decoration: none; }
.function-page .related-card .related-list a:hover { border-color: var(--site-accent); }
.solutions-hub .solutions-intro-content :is(ol,ul) { max-width: var(--site-reading); list-style: revert; padding-left: 1.55rem; margin: .7rem 0 1.25rem; }
.solutions-hub .solutions-intro-content li { margin: .42rem 0; padding-left: .1rem; }
.solutions-hub .solutions-intro-content p { margin: .75rem 0 1.05rem; }
.solutions-article-content :is(ol,ul) { list-style: revert; padding-left: 1.5rem; }
.mig-app .mig-shell, .mig-app .mig-program { min-width: 0; max-width: 100%; }
.mig-app .mig-selectors > label { min-width: 0; }
.mig-app .mig-selectors select { min-width: 0; width: 100%; max-width: 100%; }
.mig-app :is(pre,code) { max-width: 100%; }
.mig-app pre code, .mig-app .mig-formula code { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
html.dark .function-page .function-content > .function-section.card, html.dark .function-page .function-introduction > .intro { background: var(--site-surface) !important; border-color: var(--site-line); color: var(--site-ink); }
html.dark .solutions-hub .solutions-chooser select { background: var(--site-surface); color: var(--site-ink); border-color: var(--site-line); }
html.dark .solutions-hub .solutions-card h2 a { color: var(--site-ink); }
html.dark .function-directory .function-link { color: var(--site-ink); }
@media(max-width:720px) {
  .mig-app .mig-selectors { grid-template-columns: minmax(0,1fr); }
  .mig-app .mig-pair { grid-template-columns: minmax(0,1fr); }
}
html.dark .solutions-intro :is(.solutions-eyebrow,.solutions-meta),
html.dark .solutions-article-header :is(.solutions-eyebrow,.solutions-meta) { color: #a6eee6; }