/*
Exsion365 Design System integration layer.
Loaded after styles.css (which brings in tokens/{fonts,colors,typography,spacing}.css
from the Claude Design project a60f3a7e-4c0c-47e0-b53a-885279c5d038). This file wires
those tokens into Material's own CSS variables and restyles the site's custom
components (action bar, catalog cards, tables) to match the design-system's
Button/Card/Badge specs instead of the old ad-hoc palette.
*/

:root {
	--md-primary-fg-color: var(--brand);
	--md-primary-fg-color--light: var(--purple-500);
	--md-primary-fg-color--dark: var(--brand-strong);
	--md-accent-fg-color: var(--purple-500);
	--md-typeset-a-color: var(--text-link);
}

/* --text-link is a dark warm purple tuned for the light canvas; on the slate
   (dark) background it's nearly invisible, so give dark mode its own lighter
   shade instead of reusing the light-mode brand color. */
[data-md-color-scheme="slate"] {
	--md-typeset-a-color: var(--purple-300);
}

/* Product/app chrome uses the Office-native Segoe UI stack; headings use the
   brand's geometric display face (Poppins) to match the wordmark. */
.md-typeset {
	font-family: var(--font-ui);
}

.md-header__title,
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
	font-family: var(--font-brand);
	font-weight: var(--fw-semibold);
}

/* The only <h1> that ever exists in a page's body is our own explicit page
   title (see convert.py), placed right after the action bar. Material's
   default h1 color is a muted gray (meant for its own auto-injected title,
   which sits above everything); ours reads as body content, so it should be
   full-strength text color, not muted. */
.md-typeset h1.page-title {
	/* Material's own fg color, not the brand-token --text-strong: that token is
	   a near-black tuned for light surfaces and goes nearly invisible against
	   the dark background in slate/dark mode, whereas --md-default-fg-color
	   already adapts correctly between light and dark schemes. */
	color: var(--md-default-fg-color);
	margin-top: 0;
}

/* Field-name columns in reference tables, e.g. <td class='nowrap'> */
.md-typeset td.nowrap, .md-typeset td.wrap {
	font-weight: var(--fw-semibold);
}
.md-typeset td.nowrap {
	white-space: nowrap;
}

.md-typeset th {
	background-color: var(--brand);
	color: var(--text-on-brand);
}

.md-typeset table:not([class]),
.md-typeset table.md-typeset__table {
	border: var(--bw-hair) solid var(--border-subtle);
	border-radius: var(--radius-sm);
}

/* Our reference tables are raw HTML (carried over from the source docs, not
   generated from markdown pipe-table syntax), so Material's automatic
   .md-typeset__table scroll wrapper never applies to them. Without this, a
   table with several nowrap columns can be wider than the content column and
   blow out the whole page horizontally. Scroll the table itself instead. */
.md-typeset table:not([class]) {
	display: block;
	max-width: 100%;
	overflow-x: auto;
}

/* Product screenshots are often much wider than the content column (some
   source PNGs are 1900px+); scale them down instead of overflowing. */
.md-typeset img {
	max-width: 100%;
	height: auto;
}

/* Embedded (YouTube) videos scale down instead of overflowing on narrow screens. */
.md-typeset iframe {
	width: 100%;
	max-width: 1024px;
	aspect-ratio: 16 / 9;
	height: auto;
	display: block;
	margin: 1em 0;
	border-radius: var(--radius-md);
}

/* Per-page action bar: language switch / TEAMVIEWER / download / zip buttons,
   generated from the legacy #header button row. Sticky + left-aligned so it
   stays visible (like the old fixed CHM header) while the article scrolls
   underneath it. */
.doc-actionbar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	align-items: center;
	justify-content: flex-start;
	margin: 0 0 var(--sp-5) 0;
	padding: var(--sp-3) 0;
	border-bottom: var(--bw-hair) solid var(--border-subtle);
	position: sticky;
	top: var(--md-header-height, 2.4rem);
	/* Above Material's back-to-top pill (z-index:2, also fixed near the top of
	   the viewport) so our buttons never get drawn over. */
	z-index: 3;
	background-color: var(--md-default-bg-color);
}

/* Material's "back to top" button is fixed at top:3.2rem, horizontally
   centered in the viewport -- which lands right on top of our sticky action
   bar. Push it down below the action bar instead of letting them collide. */
.md-top {
	top: calc(var(--md-header-height, 2.4rem) + 3.75rem) !important;
}

/* Button component, size "md": Segoe UI semibold, radius-sm (Office-native),
   1px lift + one-tone-deeper background on hover, no shrink on press. */
.doc-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	height: 36px;
	padding: 0 var(--sp-4);
	border-radius: var(--radius-sm);
	font-family: var(--font-ui);
	font-weight: var(--fw-semibold);
	font-size: var(--fs-sm);
	text-decoration: none !important;
	border: var(--bw-hair) solid transparent;
	box-shadow: var(--shadow-xs);
	transition: background-color var(--dur-fast) var(--ease-out),
		border-color var(--dur-fast) var(--ease-out),
		transform var(--dur-fast) var(--ease-out);
}

.doc-btn:hover {
	transform: translateY(-1px);
}

.doc-btn img {
	height: 1em;
	width: auto;
}

/* Primary: main installer download */
.doc-btn--download, .doc-btn--download_exe {
	background-color: var(--brand);
	color: var(--text-on-brand) !important;
	border-color: var(--brand);
}
.doc-btn--download:hover, .doc-btn--download_exe:hover {
	background-color: var(--brand-strong);
	border-color: var(--brand-strong);
}

/* Secondary, warm-accent tinted: alternative ZIP download (kept off a solid
   amber "hero" fill per brand guidance — amber is a sparing highlight only). */
.doc-btn--download_zip {
	background-color: var(--amber-100);
	color: #7A4A17 !important;
	border-color: transparent;
}
.doc-btn--download_zip:hover {
	background-color: #F3DFC0;
}

/* Secondary: external tool link */
.doc-btn--teamviewer {
	background-color: var(--surface-card);
	color: var(--brand) !important;
	border-color: var(--border-subtle);
}
.doc-btn--teamviewer:hover {
	background-color: var(--brand-tint);
	border-color: var(--purple-300);
}

[data-md-color-scheme="slate"] .doc-btn--teamviewer {
	background-color: transparent;
	border-color: var(--md-default-fg-color--lightest);
}
/* .doc-btn--teamviewer's base rule hardcodes color: var(--brand) !important
   (a dark purple meant for a white/light button surface); against the
   transparent slate background above that text turns effectively invisible. */
[data-md-color-scheme="slate"] .doc-btn--teamviewer {
	color: var(--purple-300) !important;
}
[data-md-color-scheme="slate"] .doc-btn--teamviewer:hover {
	background-color: rgba(255, 255, 255, 0.08);
}

/* Product catalog cards on the home page (<ul class="catalog">), styled to
   match the design system's Card component: white surface, hairline border,
   soft shadow, radius-md — no colored left border, no heavy elevation. */
.md-typeset ul.catalog {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--sp-4);
	margin: var(--sp-4) 0 var(--sp-6) 0;
	padding: 0;
	list-style: none;
}

.md-typeset ul.catalog li {
	margin: 0;
}

.md-typeset ul.catalog a {
	display: block;
	height: 100%;
	padding: var(--sp-5);
	background-color: var(--surface-card);
	border: var(--bw-hair) solid var(--border-subtle);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
	text-decoration: none;
	transition: border-color var(--dur-base) var(--ease-out),
		box-shadow var(--dur-base) var(--ease-out),
		transform var(--dur-base) var(--ease-out);
}

.md-typeset ul.catalog a:hover {
	border-color: var(--purple-300);
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}

.md-typeset ul.catalog .catalog-name {
	display: block;
	font-family: var(--font-brand);
	font-size: var(--fs-lg);
	font-weight: var(--fw-semibold);
	color: var(--brand);
	margin-bottom: 0.3em;
}

[data-md-color-scheme="slate"] .md-typeset ul.catalog a {
	background-color: var(--md-default-bg-color);
	border-color: var(--md-default-fg-color--lightest);
}
[data-md-color-scheme="slate"] .md-typeset ul.catalog .catalog-name {
	color: var(--purple-300);
}

.md-typeset ul.catalog .catalog-desc {
	display: block;
	font-size: var(--fs-sm);
	color: var(--text-muted);
}
[data-md-color-scheme="slate"] .md-typeset ul.catalog .catalog-desc {
	color: var(--md-default-fg-color--light);
}

/* Put the page's table of contents on the left instead of the right. Our nav
   is flat (one page per product tab, no children), so the primary/left
   sidebar has nothing useful left to show once toc.integrate is off -- it
   just repeats the current tab's name. Hide it and move the secondary/TOC
   sidebar into its place instead. Scoped to the same desktop breakpoint
   Material itself uses for the docked (non-drawer) sidebar, so the mobile
   hamburger drawer (site search + full nav) is untouched below that width. */
@media screen and (min-width: 76.234375em) {
	.md-sidebar--primary {
		display: none;
	}
	.md-sidebar--secondary {
		order: -1;
	}
}