/*
 * Modern DFFS — marketing component styles
 * Scoped under .mdffs-* classes so they never leak into legacy pages
 * (Modern CEWP, Classic DFFS) that keep the plain Mart look.
 */

/* ===================================================================
   Theme base (standalone) — header, nav, footer, body
   =================================================================== */
body { margin: 0; color: var(--mdffs-body); background: var(--mdffs-surface);
	font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
	line-height: 1.6; }
/* Prose links only — never buttons/cards (those carry their own class + color),
   so this can't override .mdffs-btn text and hide button labels. */
.mdffs-body a:not([class]) { color: var(--mdffs-primary); }
/* `video` is here alongside `img` on purpose: a <video> carrying its intrinsic
   width/height attributes has no default containment, so without this a single
   missing component rule lets it blow out of its column at full source size. */
img, video { max-width: 100%; height: auto; }
.site-main { display: block; }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 8px; top: 8px; background: #fff; padding: 8px 12px; z-index: 100; border-radius: 6px; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--mdffs-line); }
.site-header__inner { max-width: var(--mdffs-maxw); margin-inline: auto; padding: 0.75rem var(--mdffs-space-6);
	display: flex; align-items: center; gap: var(--mdffs-space-6); }
.site-brand { display: inline-flex; align-items: center; flex: 0 0 auto; }
.site-brand img { height: 38px; width: auto; display: block; }
.nav-toggle { display: none; margin-left: auto; background: var(--mdffs-primary); color: #fff; border: 0;
	border-radius: var(--mdffs-radius-sm); padding: 0.55rem 0.9rem; font-weight: 600; cursor: pointer; }

/* Primary nav */
.site-nav { margin-left: auto; display: flex; align-items: center; gap: var(--mdffs-space-6); }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: var(--mdffs-space-6); }
.site-nav li { position: relative; }
.site-nav li a { text-decoration: none; color: var(--mdffs-body); font-weight: 600; font-size: 0.94rem; }
.site-nav li a:hover { color: var(--mdffs-primary); }
.site-nav .site-nav__cta { color: #fff; }
.site-nav .site-nav__cta:hover { color: #fff; }

/* Download link + version chip. Not inside the <ul>, so it needs its own type
   styling -- `.site-nav li a` does not reach it. */
.site-nav__download { display: inline-flex; align-items: center; gap: 0.4rem; text-decoration: none;
	color: var(--mdffs-body); font-weight: 600; font-size: 0.94rem; white-space: nowrap; }
.site-nav__download:hover { color: var(--mdffs-primary); }
.site-nav__ver { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1;
	padding: 0.22rem 0.42rem; border-radius: var(--mdffs-radius-pill);
	background: var(--mdffs-primary-050); color: var(--mdffs-primary-700); }
/* Submenu affordance. Without it "Features" looked identical to the flat items
   and its dropdown was only discoverable by hovering it. Drawn with borders
   rather than a glyph in content: a text caret would inherit the font stack and
   the same build step that once ate a backslash out of a CSS escape (see the
   note at a.mdffs-step__shot::after) cannot corrupt geometry. */
.site-nav .menu-item-has-children > a { display: inline-flex; align-items: center; gap: 0.35rem; }
.site-nav .menu-item-has-children > a::after {
	content: ""; width: 0; height: 0; flex: 0 0 auto;
	border-left: 4px solid transparent; border-right: 4px solid transparent;
	border-top: 5px solid currentColor; transition: transform 0.15s ease;
}
.site-nav .menu-item-has-children:hover > a::after,
.site-nav .menu-item-has-children:focus-within > a::after { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
	.site-nav .menu-item-has-children > a::after { transition: none; }
}

.site-nav .sub-menu { position: absolute; top: 100%; left: 0; min-width: 230px; background: #fff;
	border: 1px solid var(--mdffs-line); border-radius: var(--mdffs-radius-sm); box-shadow: var(--mdffs-shadow);
	padding: 0.4rem; display: none; flex-direction: column; align-items: stretch; gap: 0.1rem; z-index: 20; }
.site-nav li:hover > .sub-menu, .site-nav li:focus-within > .sub-menu { display: flex; }
.site-nav .sub-menu a { padding: 0.45rem 0.6rem; border-radius: 6px; display: block; font-weight: 500; }
.site-nav .sub-menu a:hover { background: var(--mdffs-primary-050); }

@media (max-width: 860px) {
	.nav-toggle { display: inline-block; }
	.site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff;
		border-bottom: 1px solid var(--mdffs-line); flex-direction: column; align-items: stretch; gap: 0;
		padding: 0.5rem var(--mdffs-space-6) var(--mdffs-space-4); }
	.site-nav.is-open { display: flex; }
	.site-nav ul { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
	.site-nav li { border-bottom: 1px solid var(--mdffs-line); }
	.site-nav a { display: block; padding: 0.7rem 0; }
	.site-nav .sub-menu { position: static; display: flex; border: 0; box-shadow: none; padding: 0 0 0.3rem 1rem; }
	/* flex, not inline-flex, so the parent item keeps its full-width tap target.
	   The submenu is already expanded in the mobile panel, so the caret is a
	   static "these below belong to it" marker -- nothing to rotate. */
	.site-nav .menu-item-has-children > a { display: flex; }
	.site-nav .menu-item-has-children:hover > a::after,
	.site-nav .menu-item-has-children:focus-within > a::after { transform: none; }
	.site-nav__download { display: flex; justify-content: space-between; width: 100%;
		padding: 0.7rem 0; border-bottom: 1px solid var(--mdffs-line); }
	.site-nav .site-nav__cta { margin-top: 0.6rem; text-align: center; }
}

/* Footer */
.site-footer { background: var(--mdffs-ink); color: #c3ccd6; padding: var(--mdffs-space-12) var(--mdffs-space-6) var(--mdffs-space-8); }
.site-footer__cols { max-width: var(--mdffs-maxw); margin-inline: auto; display: grid; gap: var(--mdffs-space-6);
	grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .site-footer__cols { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.site-footer h4 { color: #fff; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 0.6rem; }
.site-footer a { color: #c3ccd6; text-decoration: none; display: block; padding: 0.2rem 0; }
.site-footer a:hover { color: #fff; }
/* The prose-link rule at the top (`.mdffs-body a:not([class])`, 0,2,1) outranks the two rules
   above (0,1,1), so footer links rendered cobalt on the navy footer. Restate them at that weight. */
.mdffs-body .site-footer a:not([class]) { color: #c3ccd6; }
.mdffs-body .site-footer a:not([class]):hover { color: #fff; }
.site-footer__brand img { height: 32px; width: auto; margin-bottom: 0.6rem; } /* width:auto, or the 206px width attribute keeps the box wide and the pill floats centred in it */
.site-footer__base { max-width: var(--mdffs-maxw); margin: var(--mdffs-space-6) auto 0; padding-top: var(--mdffs-space-4);
	border-top: 1px solid rgba(255, 255, 255, 0.12); color: #8a97a5; font-size: 0.85rem; }
/* The column lists above need block anchors; the base line is a single sentence of links
   separated by middots, so it has to override that or the legal links stack vertically.
   Only showed up once there were three of them — with one link, block display looked fine. */
.site-footer__base a { display: inline; padding: 0; }

/* ---------- Layout helpers ---------- */
.mdffs-wrap { max-width: var(--mdffs-maxw); margin-inline: auto; padding-inline: var(--mdffs-space-6); }
.mdffs-section { padding-block: var(--mdffs-space-16); }

/* Edge gutter — unconditional, NOT behind a breakpoint.
   The block editor's constrained layout gives .wp-block-group__inner-container a
   max-width and auto margins but NO padding. Section content inside .mdffs-wrap
   therefore gets that element's 24px inline padding, while its siblings -- the
   card grids, the editions row -- get nothing.

   The obvious fix is a phone-width media query, and it is wrong: those siblings
   are capped at 1120px with auto margins, so they run flush at ANY viewport
   below 1120px. A landscape phone (~844px) and a half-width desktop window are
   just as affected as a portrait phone, and a max-width: 700px rule misses both.
   Above 1120px this costs nothing -- the content is already narrower than the
   space available, so the padding has nothing to push against.

   Deliberately on .mdffs-section rather than the inner container: pages built as
   plain <section class="mdffs-section"> (most feature and doc pages) have no
   inner container at all and would have been missed.

   Section backgrounds are unaffected -- background paints over the padding box,
   so .mdffs-section--alt still spans the full viewport width.

   Nested inside .mdffs-wrap this simply adds, so wrapped text keeps a slightly
   wider inset than the cards. That is intentional: body copy wants more edge
   distance than a bordered card, which carries its own 24px of internal padding. */
.mdffs-section { padding-inline: var(--mdffs-gutter-edge); }
/* One gutter, owned by the section. .mdffs-wrap carries its own inline padding
   for use outside a section, but inside one it would ADD to the section's, so a
   page whose content is fully wrapped (Product: 8 sections, 8 wraps) indented
   twice as far as one whose grids sit outside the wrap (Home: 12 sections, 4
   wraps). Same design, two different gutters, decided by how each page happened
   to be authored. Neutralise it here rather than editing 50 seed pages.
   Scoped to descendants of a section so a stray .mdffs-wrap elsewhere keeps its
   own padding and does not go flush. */
.mdffs-section .mdffs-wrap { padding-inline: 0; }
.mdffs-section--tight { padding-block: var(--mdffs-space-12); }
.mdffs-section--alt { background: var(--mdffs-surface-alt); }
.mdffs-center { text-align: center; }
.mdffs-lead { font-size: var(--mdffs-lead); color: var(--mdffs-muted); max-width: 60ch; }
.mdffs-center .mdffs-lead { margin-inline: auto; }
.mdffs-eyebrow {
	text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem;
	font-weight: 700; color: var(--mdffs-primary);
}
.mdffs-section h2 { font-size: var(--mdffs-h2); color: var(--mdffs-ink); line-height: 1.15; }
.mdffs-section h3 { font-size: var(--mdffs-h3); color: var(--mdffs-ink); }

/* ---------- Buttons ---------- */
.mdffs-btn {
	display: inline-flex; align-items: center; gap: 0.5em;
	padding: 0.7em 1.35em; border-radius: var(--mdffs-radius-sm);
	font-weight: 600; text-decoration: none; line-height: 1; cursor: pointer;
	border: 1.5px solid transparent; transition: background .15s, color .15s, border-color .15s;
}
.mdffs-btn--primary { background: var(--mdffs-primary); color: #fff; }
.mdffs-btn--primary:hover { background: var(--mdffs-primary-600); color: #fff; }
.mdffs-btn--ghost { background: transparent; color: var(--mdffs-primary); border-color: var(--mdffs-primary); }
.mdffs-btn--ghost:hover { background: var(--mdffs-primary-050); }
.mdffs-btn--onprimary { background: #fff; color: var(--mdffs-primary-700); }
.mdffs-btn--onprimary:hover { background: var(--mdffs-primary-050); }
/* Outline button on a dark surface (CTA bands): white outline + text, fills
   translucent white on hover so the label stays readable. */
.mdffs-btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.6); }
.mdffs-btn--ghost-light:hover { background: rgba(255, 255, 255, 0.15); color: #fff; border-color: #fff; }

/* ---------- Tier badge ---------- */
.mdffs-badge {
	display: inline-block; padding: 0.2em 0.7em; border-radius: var(--mdffs-radius-pill);
	font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1.5;
	color: #fff; white-space: nowrap; vertical-align: middle;
}
.mdffs-badge--essentials { background: var(--mdffs-tier-essentials); }
.mdffs-badge--professional { background: var(--mdffs-tier-professional); }
.mdffs-badge--enterprise { background: var(--mdffs-tier-enterprise); }
.mdffs-badge--addon { background: var(--mdffs-tier-addon); }
/* Free / open-source standalone tools (Modern CEWP) — deliberately not a tier colour. */
.mdffs-badge--free { background: var(--mdffs-spark-700); }
/* Archived v1.x material — muted so it never competes with current documentation. */
.mdffs-badge--legacy { background: var(--mdffs-muted); }
.mdffs-badge--all { background: var(--mdffs-tier-essentials); }

/* ---------- Hero ---------- */
.mdffs-hero { padding-block: var(--mdffs-space-24) var(--mdffs-space-16); }
.mdffs-hero__grid { display: grid; gap: var(--mdffs-space-12); align-items: center; }
@media (min-width: 900px) { .mdffs-hero__grid { grid-template-columns: 1.05fr 0.95fr; } }
.mdffs-hero h1 { font-size: var(--mdffs-h1); line-height: 1.08; color: var(--mdffs-ink); margin: .3em 0; }
.mdffs-hero__cta { display: flex; flex-wrap: wrap; gap: var(--mdffs-space-3); margin-top: var(--mdffs-space-6); }
/* Inline qualifier callout, used near the top of a page for the scope statement
   a visitor needs before reading any further -- which SharePoint this runs on,
   what the license does and does not include. Bordered rather than muted: these
   are disqualifying facts, not fine print, and burying one costs somebody a
   trial sign-up (or a purchase) that could never have worked.

   Lives outside the Hero block on purpose so feature and doc pages can use it
   too. Marker colour is overridable per instance via --mdffs-callout-marker. */
.mdffs-callout {
	margin-top: var(--mdffs-space-6); padding: var(--mdffs-space-3) var(--mdffs-space-4);
	border: 1px solid var(--mdffs-line);
	border-left: 4px solid var(--mdffs-callout-marker, var(--mdffs-primary));
	border-radius: var(--mdffs-radius-sm); background: var(--mdffs-surface-alt);
	color: var(--mdffs-muted); font-size: 0.92rem; line-height: 1.55;
}
.mdffs-callout strong { color: var(--mdffs-ink); }
/* Inside a doc body the generic ".mdffs-doc p" rule is more specific than the
   class and would flatten the callout's top margin into ordinary paragraph
   spacing. Restate it at higher specificity so the box stays separated from the
   prose above and below it. */
.mdffs-doc .mdffs-callout { margin: var(--mdffs-space-6) 0; }
.mdffs-hero__visual {
	background: var(--mdffs-surface-alt); border: 1px solid var(--mdffs-line);
	border-radius: var(--mdffs-radius); min-height: 260px;
	display: grid; place-items: center; color: var(--mdffs-muted); text-align: center; padding: var(--mdffs-space-6);
}
/* Real screenshot in the hero: drop the placeholder chrome and let the image
   carry its own frame, so the shot is not boxed inside a second border. */
.mdffs-hero__visual--shot { background: none; border: 0; border-radius: 0; min-height: 0; padding: 0; }
.mdffs-hero__visual--shot img,
.mdffs-hero__visual--shot video {
	display: block; width: 100%; height: auto; background: var(--mdffs-surface);
	border: 1px solid var(--mdffs-line); border-radius: var(--mdffs-radius);
	box-shadow: 0 12px 32px rgba(15, 28, 46, .10);
}
/* The hero clip's <source> elements carry media="(prefers-reduced-motion:
   no-preference)", so a visitor who asks for reduced motion matches no source:
   the poster frame shows and neither video file is fetched. No JS, no wasted
   bandwidth. Nothing to add here — this note exists so the behaviour isn't
   mistaken for a missing rule. */

/* ---------- Trust bar ---------- */
.mdffs-trust {
	background: var(--mdffs-primary-050); color: var(--mdffs-primary-700);
	text-align: center; padding: var(--mdffs-space-4); font-weight: 600; font-size: 0.95rem;
}

/* ---------- Card grids ---------- */
.mdffs-grid { display: grid; gap: var(--mdffs-space-6); }
.mdffs-grid--2 { grid-template-columns: 1fr; }
.mdffs-grid--3 { grid-template-columns: 1fr; }
@media (min-width: 700px) { .mdffs-grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 860px) { .mdffs-grid--3 { grid-template-columns: repeat(3, 1fr); } }

.mdffs-card {
	background: var(--mdffs-surface); border: 1px solid var(--mdffs-line);
	border-radius: var(--mdffs-radius); padding: var(--mdffs-space-6);
	box-shadow: var(--mdffs-shadow); display: flex; flex-direction: column; gap: var(--mdffs-space-3);
}
.mdffs-card h3 { margin: 0; }
/* A tier pill placed directly in a card (above its title) keeps its own width instead of
   stretching across the flex column, and sits at the same height on every card in a row. */
.mdffs-card > .mdffs-badge { align-self: flex-start; }
.mdffs-card__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--mdffs-space-2); }
.mdffs-card p { margin: 0; color: var(--mdffs-muted); }
.mdffs-card__link { margin-top: auto; font-weight: 600; color: var(--mdffs-primary); text-decoration: none; }
.mdffs-card__link:hover { text-decoration: underline; }
/* Numerals on Get Started (1 2 3) still use this: they are a real sequence and
   read fine as type. The six Home highlight cards do not, and use .mdffs-icon. */
.mdffs-card__icon { font-size: 1.6rem; line-height: 1; }

/* ---------- Card glyph icons ----------
   Replaces the emoji that used to head the Home highlight cards. Six vendor
   emoji meant six unrelated palettes and drawing styles competing above the
   headings; these are one cobalt, one stroke weight, one 24px grid.

   Drawn as CSS masks rather than inline <svg> or six image files. The mask lets
   a single background-color drive all six, so they cannot drift from the brand;
   keeping them in the stylesheet means no new assets to deploy and nothing for
   KSES to strip out of seeded page content. The trade is that the geometry is
   percent-encoded and not hand-editable -- change a path in
   brand-candidates/_build_card_icons.py and re-paste, rather than picking at
   the encoded string here.

   The 44px tile at 10px radius is the app mark's silhouette to scale (rx 14 on
   a 64 box, the same 0.22 ratio), so the cards echo the favicon.

   Decorative only -- every card repeats the meaning in its <h3>, so the markup
   carries aria-hidden and screen readers are spared "robot face", "puzzle
   piece" and so on. */
.mdffs-icon {
	width: 44px; height: 44px; flex: 0 0 auto; align-self: flex-start;
	border-radius: 10px; background: var(--mdffs-primary-050);
	display: grid; place-items: center;
}
.mdffs-icon::before {
	content: ""; width: 24px; height: 24px;
	background: var(--mdffs-icon-color, var(--mdffs-primary-700));
	-webkit-mask: var(--mdffs-icon) center / contain no-repeat;
	mask: var(--mdffs-icon) center / contain no-repeat;
}
/* Speech bubble + sparkle — plain language in, configuration out. */
.mdffs-icon--ai { --mdffs-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 14.5a2 2 0 0 1-2 2H8l-4.5 4V5.5a2 2 0 0 1 2-2h13a2 2 0 0 1 2 2z'/%3E%3Cpath d='M12 6.6L13 9L15.4 10L13 11L12 13.4L11 11L8.6 10L11 9Z' fill='%23000' stroke='none'/%3E%3C/svg%3E"); }
/* Form panel — title bar over two field rows. */
.mdffs-icon--builder { --mdffs-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.2' y='3.2' width='17.6' height='17.6' rx='2.6'/%3E%3Cpath d='M3.2 8.6h17.6'/%3E%3Cpath d='M7 12.6h10M7 16.6h6'/%3E%3C/svg%3E"); }
/* Parent record bracketing two children — relationships and repeating rows. */
.mdffs-icon--related { --mdffs-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='2.6' width='6' height='5' rx='1.3'/%3E%3Crect x='2.6' y='16.4' width='6' height='5' rx='1.3'/%3E%3Crect x='15.4' y='16.4' width='6' height='5' rx='1.3'/%3E%3Cpath d='M12 7.6v6.4'/%3E%3Cpath d='M5.6 16.4V14h12.8v2.4'/%3E%3C/svg%3E"); }
/* Hub and spokes — one central site, applied everywhere. */
.mdffs-icon--central { --mdffs-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3.1'/%3E%3Ccircle cx='12' cy='4' r='1.9'/%3E%3Ccircle cx='5.1' cy='16' r='1.9'/%3E%3Ccircle cx='18.9' cy='16' r='1.9'/%3E%3Cpath d='M12 8.9V5.9'/%3E%3Cpath d='M9.4 13.6L6.7 15.1'/%3E%3Cpath d='M14.6 13.6l2.7 1.5'/%3E%3C/svg%3E"); }
/* Toolbox — keeps the meaning of the emoji it replaces. */
.mdffs-icon--toolkit { --mdffs-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.6' y='8.4' width='18.8' height='12.2' rx='2.2'/%3E%3Cpath d='M8.6 8.4V6.4a2 2 0 0 1 2-2h2.8a2 2 0 0 1 2 2v2'/%3E%3Cpath d='M2.6 14.2h18.8'/%3E%3Crect x='10' y='12.2' width='4' height='4' rx='1'/%3E%3C/svg%3E"); }
/* Half-filled disc — the universal "appearance" mark. */
.mdffs-icon--theme { --mdffs-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.8'/%3E%3Cpath d='M12 3.2a8.8 8.8 0 0 0 0 17.6z' fill='%23000' stroke='none'/%3E%3C/svg%3E"); }

/* ---------- Edition / pricing cards ---------- */
.mdffs-editions { display: grid; gap: var(--mdffs-space-6); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .mdffs-editions { grid-template-columns: repeat(3, 1fr); } }
.mdffs-edition {
	background: var(--mdffs-surface); border: 1px solid var(--mdffs-line);
	border-radius: var(--mdffs-radius); padding: var(--mdffs-space-8);
	display: flex; flex-direction: column; gap: var(--mdffs-space-3); position: relative;
}
.mdffs-edition--featured { border-color: var(--mdffs-primary); box-shadow: var(--mdffs-shadow-lg); }
.mdffs-edition__flag {
	position: absolute; top: -0.8em; left: 50%; transform: translateX(-50%);
	background: var(--mdffs-primary); color: #fff; font-size: 0.72rem; font-weight: 700;
	padding: 0.25em 0.8em; border-radius: var(--mdffs-radius-pill);
}
.mdffs-edition h3 { margin: 0; }
.mdffs-edition__tagline { font-weight: 600; color: var(--mdffs-ink); }
.mdffs-edition__for { color: var(--mdffs-muted); font-size: 0.92rem; }
.mdffs-edition__price { font-size: 1.6rem; font-weight: 800; color: var(--mdffs-ink); }
.mdffs-edition__price small { display: block; font-size: 0.8rem; font-weight: 500; color: var(--mdffs-muted); }
.mdffs-addon-card__price { font-size: 1.35rem; font-weight: 800; color: var(--mdffs-primary); margin: 0.2rem 0 0.6rem; }
.mdffs-addon-card__price small { display: block; font-size: 0.78rem; font-weight: 500; color: var(--mdffs-muted); }
.mdffs-edition ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--mdffs-space-2); }
.mdffs-edition li { padding-left: 1.4em; position: relative; color: var(--mdffs-body); font-size: 0.94rem; }
.mdffs-edition li::before { content: "✓"; position: absolute; left: 0; color: var(--mdffs-spark); font-weight: 700; }
.mdffs-edition .mdffs-btn { margin-top: auto; justify-content: center; }
.mdffs-price-note { margin: var(--mdffs-space-4) 0 0; color: var(--mdffs-muted); font-size: 0.85rem; }
.mdffs-edition__buynote { margin: 0; color: var(--mdffs-muted); font-size: 0.82rem; text-align: center; }

/* ---------- Comparison matrix ---------- */
.mdffs-matrix-wrap { overflow-x: auto; border: 1px solid var(--mdffs-line); border-radius: var(--mdffs-radius); }
.mdffs-matrix { width: 100%; border-collapse: collapse; min-width: 640px; font-size: 0.94rem; }
.mdffs-matrix th, .mdffs-matrix td { padding: 0.7em 1em; text-align: left; border-bottom: 1px solid var(--mdffs-line); }
.mdffs-matrix thead th { background: var(--mdffs-surface-alt); color: var(--mdffs-ink); position: sticky; top: 0; }
.mdffs-matrix td:not(:first-child), .mdffs-matrix th:not(:first-child) { text-align: center; width: 15%; }
.mdffs-matrix tbody tr:hover { background: var(--mdffs-primary-050); }
.mdffs-matrix .is-group td { font-weight: 700; background: var(--mdffs-surface-alt); color: var(--mdffs-ink); }
.mdffs-matrix .is-sub td:first-child { padding-left: 2em; color: var(--mdffs-muted); }
.mdffs-yes { color: var(--mdffs-yes); font-weight: 700; }
.mdffs-no { color: var(--mdffs-no); }
.mdffs-addon { color: var(--mdffs-tier-addon); font-weight: 600; font-size: 0.85rem; }

/* ---------- Worked example ---------- */
.mdffs-example {
	background: var(--mdffs-surface-alt); border: 1px solid var(--mdffs-line);
	border-left: 4px solid var(--mdffs-primary); border-radius: var(--mdffs-radius);
	padding: var(--mdffs-space-6);
}
.mdffs-example h4 { margin-top: 0; color: var(--mdffs-ink); }
.mdffs-example ol { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: var(--mdffs-space-2); }
.mdffs-example pre, pre.mdffs-code { background: var(--mdffs-ink); color: #e6edf6; padding: var(--mdffs-space-4) var(--mdffs-space-6);
	border-radius: var(--mdffs-radius-sm); overflow-x: auto; margin: var(--mdffs-space-4) 0 0;
	font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 0.82rem; line-height: 1.55; }
.mdffs-example pre code { background: none; color: inherit; padding: 0; }

/* Compact capability list (feature pages) */
.mdffs-caps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--mdffs-space-3); }
@media (min-width: 720px) { .mdffs-caps { grid-template-columns: 1fr 1fr; } }
.mdffs-caps li { background: var(--mdffs-surface); border: 1px solid var(--mdffs-line); border-radius: var(--mdffs-radius-sm);
	padding: var(--mdffs-space-4) var(--mdffs-space-6); color: var(--mdffs-muted); font-size: 0.94rem; }
.mdffs-caps li strong { color: var(--mdffs-ink); }

/* ---------- CTA band ---------- */
.mdffs-cta {
	background: linear-gradient(135deg, var(--mdffs-primary), var(--mdffs-primary-700));
	color: #fff; border-radius: var(--mdffs-radius); text-align: center;
	padding: var(--mdffs-space-16) var(--mdffs-space-6);
}
.mdffs-cta h2 { color: #fff; }
.mdffs-cta p { color: rgba(255, 255, 255, 0.9); max-width: 55ch; margin-inline: auto; }
.mdffs-cta__btns { display: flex; flex-wrap: wrap; gap: var(--mdffs-space-3); justify-content: center; margin-top: var(--mdffs-space-6); }
/* Outline buttons sit on the dark gradient here, so their hover fills with a
   translucent white (not the light-surface tint) to keep white text readable. */
.mdffs-cta .mdffs-btn--ghost:hover { background: rgba(255, 255, 255, 0.15); }

/* ---------- Visual placeholder (for screenshots to come) ---------- */
.mdffs-shot {
	background: repeating-linear-gradient(45deg, #eef2f6, #eef2f6 12px, #e6ecf2 12px, #e6ecf2 24px);
	border: 1px dashed var(--mdffs-line); border-radius: var(--mdffs-radius-sm);
	min-height: 200px; display: grid; place-items: center; color: var(--mdffs-muted);
	font-size: 0.85rem; text-align: center; padding: var(--mdffs-space-4);
}
/* Holds a real visual (inline SVG or an <img>): clean frame, no placeholder hatch. */
.mdffs-shot--filled { background: var(--mdffs-surface-alt); border-style: solid; border-color: var(--mdffs-line); }
.mdffs-shot--filled svg, .mdffs-shot--filled img { width: 100%; height: auto; max-width: 720px; }
/* Detailed product UI (dense toolbars, small labels) is unreadable at the 720px
   cap, so --wide lets a real screenshot use the full wrap width. */
.mdffs-shot--wide { padding: var(--mdffs-space-3); }
.mdffs-shot--wide svg, .mdffs-shot--wide img { max-width: none; }

/* ---------- Numbered walkthrough (a captioned screenshot sequence) ---------- */
.mdffs-steps { list-style: none; margin: var(--mdffs-space-8) 0 0; padding: 0;
	display: grid; gap: var(--mdffs-space-6); counter-reset: mdffs-step; }
.mdffs-step { background: var(--mdffs-surface-alt); border: 1px solid var(--mdffs-line);
	border-radius: var(--mdffs-radius-sm); padding: var(--mdffs-space-6); counter-increment: mdffs-step; }
.mdffs-step h3 { margin: 0; font-size: 1.05rem; line-height: 1.35; color: var(--mdffs-ink);
	display: flex; align-items: center; gap: var(--mdffs-space-3); }
.mdffs-step h3::before { content: counter(mdffs-step); flex: 0 0 auto; width: 1.75rem; height: 1.75rem;
	border-radius: 50%; background: var(--mdffs-primary); color: #fff; font-size: 0.85rem;
	font-weight: 700; display: grid; place-items: center; }
.mdffs-step p { margin: var(--mdffs-space-2) 0 0; color: var(--mdffs-muted); font-size: 0.94rem; max-width: 72ch; }
/* Captures are never upscaled — a blown-up dialog just reads as blurry — so each
   shot carries its own intrinsic max-width inline and shrinks only to fit. */
.mdffs-step__shot { display: block; margin: var(--mdffs-space-6) auto 0; }
/* width:auto, not 100% — a screenshot must never be stretched past its own
   pixels. With width:100% any shot narrower than its slot was upscaled and
   went soft, and the click-to-enlarge ones opened SMALLER than the page
   showed them, which made the link look broken. */
.mdffs-step__shot img { display: block; width: auto; max-width: 100%; height: auto;
	background: var(--mdffs-surface);
	border: 1px solid var(--mdffs-line); border-radius: var(--mdffs-radius-sm); }

/* Click-to-enlarge: held well below natural size so opening full size is
   actually worth the click. Each one carries its own inline max-width, tuned
   per aspect ratio so tall panels do not turn the page into a long scroll. */
a.mdffs-step__shot { cursor: zoom-in; }
a.mdffs-step__shot::after {
	/* Literal glyph, deliberately not the CSS escape "\2922" this used to be: a
	   processing step ate the backslash and left a 0x02 byte, so the label
	   rendered as "922  View full size". The tick at .mdffs-edition li::before
	   is literal too and has never had the problem. */
	content: "⤢ View full size";
	display: block; margin-top: var(--mdffs-space-2);
	font-size: .82rem; color: var(--mdffs-muted); text-align: center;
	letter-spacing: .01em;
}
a.mdffs-step__shot:hover img { border-color: var(--mdffs-primary); }
a.mdffs-step__shot:hover::after { color: var(--mdffs-primary); }
/* Two small dialogs side by side count as one step. */
.mdffs-step__pair { display: grid; gap: var(--mdffs-space-4); align-items: start; margin-top: var(--mdffs-space-6); }
@media (min-width: 720px) { .mdffs-step__pair { grid-template-columns: 1fr 1fr; } }
.mdffs-step__pair .mdffs-step__shot { margin-top: 0; }

/* ---------- Documentation prose ---------- */
.mdffs-doc { max-width: 820px; color: var(--mdffs-body); }
.mdffs-doc > :first-child { margin-top: 0; }
.mdffs-doc h2[id], .mdffs-doc h3[id] { scroll-margin-top: 84px; }
/* Search results link to any section's <h2>, not only the doc pages' -- clear the sticky header there too. */
.site-main h2[id] { scroll-margin-top: 84px; }
/* In the two-column API layout the content is not width-capped (the grid sizes it). */
.mdffs-doc-layout .mdffs-doc { max-width: none; }
.mdffs-doc h2 { font-size: var(--mdffs-h3); color: var(--mdffs-ink); margin: 2.2rem 0 0.6rem; }
.mdffs-doc h3 { font-size: 1.1rem; color: var(--mdffs-ink); margin: 1.6rem 0 0.5rem; }
.mdffs-doc h4 { font-size: 1rem; color: var(--mdffs-ink); margin: 1.2rem 0 0.4rem; }
/* Fourth level exists only inside the changelog, where a release heading sits
   above what used to be the top level. Distinguished by weight and colour
   rather than size -- there is no room left below 1rem. */
.mdffs-doc h5 { font-size: 0.95rem; font-weight: 700; color: var(--mdffs-muted);
	text-transform: uppercase; letter-spacing: 0.04em; margin: 1.1rem 0 0.35rem; }
.mdffs-doc p { margin: 0.8rem 0; }
.mdffs-doc ul, .mdffs-doc ol { margin: 0.8rem 0; padding-left: 1.4rem; display: flex; flex-direction: column; gap: 0.35rem; }
.mdffs-doc li > ul, .mdffs-doc li > ol { margin: 0.35rem 0 0; }
/* Prose links only -- same rule as `.mdffs-body a:not([class])` at the top of
   this file, and for the same reason. `.mdffs-doc a` is (0,1,1) and beats
   `.mdffs-btn--primary` at (0,1,0), so a button inside a doc body rendered blue
   text on a blue background -- invisible until hover, where
   `.mdffs-btn--primary:hover` at (0,2,0) took back over. Every classed anchor
   used in a doc body (.mdffs-btn*, .mdffs-card__link, .mdffs-step__shot)
   supplies its own colour, so excluding them costs nothing. */
.mdffs-doc a:not([class]) { color: var(--mdffs-primary); }
.mdffs-doc code { background: var(--mdffs-surface-alt); border: 1px solid var(--mdffs-line); border-radius: 4px;
	padding: 0.1em 0.4em; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 0.88em; }
.mdffs-doc pre { background: var(--mdffs-ink); color: #e6edf6; padding: var(--mdffs-space-4) var(--mdffs-space-6);
	border-radius: var(--mdffs-radius-sm); overflow-x: auto; margin: 1rem 0;
	font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 0.82rem; line-height: 1.55; }
.mdffs-doc pre code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; }
.mdffs-doc blockquote { border-left: 4px solid var(--mdffs-primary); background: var(--mdffs-surface-alt);
	margin: 1rem 0; padding: 0.6rem 1.2rem; border-radius: 0 var(--mdffs-radius-sm) var(--mdffs-radius-sm) 0; }
.mdffs-doc blockquote p { margin: 0.35rem 0; color: var(--mdffs-muted); }
.mdffs-doc-table-wrap { overflow-x: auto; margin: 1rem 0; }
.mdffs-doc-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; min-width: 480px; }
.mdffs-doc-table th, .mdffs-doc-table td { border: 1px solid var(--mdffs-line); padding: 0.5em 0.8em; text-align: left; vertical-align: top; }
.mdffs-doc-table th { background: var(--mdffs-surface-alt); color: var(--mdffs-ink); font-weight: 700; }

/* Copyable AI-prompt blockquotes */
.mdffs-doc--prompts blockquote { position: relative; padding: 0.9rem 5.2rem 0.9rem 1.2rem; background: var(--mdffs-surface); border-left-color: var(--mdffs-spark); }
.mdffs-doc--prompts blockquote p { color: var(--mdffs-body); margin: 0; }
.mdffs-copy { position: absolute; top: 0.6rem; right: 0.6rem; background: var(--mdffs-primary); color: #fff; border: 0;
	border-radius: 6px; padding: 0.35em 0.75em; font-size: 0.75rem; font-weight: 600; cursor: pointer; line-height: 1.2; }
.mdffs-copy:hover { background: var(--mdffs-primary-600); }
.mdffs-copy.is-copied { background: var(--mdffs-yes); }

/* ---------- Documentation left-nav layout ---------- */
/* Tighten the space above a sidebar layout so the sticky nav's page-top and
   stuck positions are close (keeps all nav items reachable at the very top). */
.mdffs-section:has(.mdffs-doc-layout) { padding-block-start: var(--mdffs-space-6); }
.mdffs-doc-layout { display: grid; gap: var(--mdffs-space-8); align-items: start; margin-top: var(--mdffs-space-6); }
@media (min-width: 900px) { .mdffs-doc-layout { grid-template-columns: 240px 1fr; } }
.mdffs-doc-nav { position: sticky; top: 84px; font-size: 0.85rem; max-height: calc(100dvh - 170px); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding-right: 0.5rem; }
.mdffs-doc-nav h4 { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.72rem; color: var(--mdffs-muted); margin: 1rem 0 0.4rem; }
.mdffs-doc-nav a { display: block; padding: 0.25rem 0; color: var(--mdffs-body); text-decoration: none; overflow-wrap: anywhere; }
.mdffs-doc-nav a code { white-space: normal; }
.mdffs-doc-nav a:hover, .mdffs-doc-nav a.is-current { color: var(--mdffs-primary); }
@media (max-width: 899px) { .mdffs-doc-nav { position: static; max-height: none; overflow: visible; border-bottom: 1px solid var(--mdffs-line); padding-bottom: 1rem; } }

/* ---------- FAQ ---------- */
.mdffs-faq { display: flex; flex-direction: column; gap: var(--mdffs-space-4); max-width: 800px; }
.mdffs-faq details {
	border: 1px solid var(--mdffs-line); border-radius: var(--mdffs-radius-sm);
	padding: var(--mdffs-space-4) var(--mdffs-space-6); background: var(--mdffs-surface);
}
.mdffs-faq summary { font-weight: 700; cursor: pointer; color: var(--mdffs-ink); }
.mdffs-faq p { color: var(--mdffs-muted); margin-bottom: 0; }

/* ---------- Support contact form ---------- */
.mdffs-form { max-width: 760px; scroll-margin-top: 100px; }
.mdffs-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--mdffs-space-4) var(--mdffs-space-6); }
.mdffs-form__row { display: flex; flex-direction: column; gap: 0.35rem; margin: 0; }
.mdffs-form__row--full { grid-column: 1 / -1; }
.mdffs-form label { font-weight: 600; color: var(--mdffs-ink); font-size: 0.95rem; }
.mdffs-form__req { color: var(--mdffs-primary); }
.mdffs-form input,
.mdffs-form select,
.mdffs-form textarea {
	width: 100%; font: inherit; color: var(--mdffs-ink);
	background: var(--mdffs-surface); border: 1px solid var(--mdffs-line);
	border-radius: var(--mdffs-radius-sm); padding: 0.6em 0.75em;
}
.mdffs-form textarea { resize: vertical; min-height: 8rem; }
.mdffs-form input:focus,
.mdffs-form select:focus,
.mdffs-form textarea:focus {
	outline: none; border-color: var(--mdffs-primary);
	box-shadow: 0 0 0 3px var(--mdffs-primary-050);
}
.mdffs-form__actions { flex-direction: row; align-items: center; gap: var(--mdffs-space-4); flex-wrap: wrap; }
.mdffs-form__note { color: var(--mdffs-muted); font-size: 0.85rem; }

/* Honeypot — pulled off-screen (kept in the accessibility tree only for bots). */
.mdffs-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.mdffs-form__banner {
	border-radius: var(--mdffs-radius-sm); padding: var(--mdffs-space-4) var(--mdffs-space-6);
	margin-bottom: var(--mdffs-space-6); border: 1px solid;
}
.mdffs-form__banner--ok { background: #eaf7ee; border-color: #b6e0c2; color: #1c6b38; }
.mdffs-form__banner--err { background: #fdecec; border-color: #f2c2c2; color: #a02020; }

@media (max-width: 860px) {
	.mdffs-form__grid { grid-template-columns: 1fr; }
}

/* Current-release strip — Download page hero and the top of the Changelog.
   Content comes from [dffs_release_bar]; the version and date are read from
   version.json, so this markup never carries a hardcoded number. */
.mdffs-release { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: var(--mdffs-space-4); background: var(--mdffs-surface); border: 1px solid var(--mdffs-line);
	border-left: 4px solid var(--mdffs-primary); border-radius: var(--mdffs-radius);
	padding: var(--mdffs-space-4) var(--mdffs-space-6); box-shadow: var(--mdffs-shadow); }
.mdffs-release__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.75rem; }
.mdffs-release__label { display: block; width: 100%; font-size: 0.72rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: 0.08em; color: var(--mdffs-muted); }
.mdffs-release__ver { font-size: 1.5rem; font-weight: 700; color: var(--mdffs-ink); line-height: 1.1; }
.mdffs-release__date { font-size: 0.92rem; color: var(--mdffs-muted); }
.mdffs-release__links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mdffs-space-4); }
.mdffs-release__notes { font-weight: 600; color: var(--mdffs-primary); text-decoration: none; white-space: nowrap; }
/* Inside a doc body the bar is a block among prose, so it needs its own spacing
   -- the surrounding <p> margins do not apply to it. */
.mdffs-doc .mdffs-release { margin: 0 0 var(--mdffs-space-6); }
.mdffs-release__notes:hover { text-decoration: underline; }

/* One-line "already a customer?" pointer under a hero CTA. */
.mdffs-existing { margin: var(--mdffs-space-4) 0 0; font-size: 0.94rem; color: var(--mdffs-muted); }
.mdffs-existing a { color: var(--mdffs-primary); font-weight: 600; text-decoration: none; }
.mdffs-existing a:hover { text-decoration: underline; }

/* Changelog release history -------------------------------------------------
   Each release is an <h2 class="mdffs-relhead"> carrying an id of the form
   v<four-part-version-with-dashes> (v2-0-0-0). version.json's `notes` points at
   that anchor, so "What changed" from the Download page lands on the release
   the visitor is about to install -- which is the whole reason the page is
   split by release rather than by category. */
.mdffs-relhist { font-size: 0.78rem !important; font-weight: 700; text-transform: uppercase;
	letter-spacing: 0.08em; color: var(--mdffs-muted) !important; margin: 3rem 0 0 !important; }
/* A product divider carries an intro paragraph before its first release, so it
   gets a rule of its own to separate it from the release history above. */
.mdffs-doc .mdffs-relhist + p { margin-top: 0.4rem; color: var(--mdffs-muted); }
#admin-releases { border-top: 1px solid var(--mdffs-line); padding-top: 2rem; margin-top: 3.5rem !important; }
.mdffs-doc .mdffs-relhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.75rem;
	font-size: var(--mdffs-h3); color: var(--mdffs-ink); margin: 0.6rem 0 0.4rem;
	padding-top: 0.9rem; border-top: 3px solid var(--mdffs-primary); }
.mdffs-relhead__date { font-size: 0.92rem; font-weight: 500; color: var(--mdffs-muted); }

/* Jump list at the top of the changelog. One entry today; it is the scaffold
   that makes the second release cheap to publish. */
.mdffs-relnav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
	margin: 0 0 var(--mdffs-space-8); }
.mdffs-relnav__label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
	letter-spacing: 0.08em; color: var(--mdffs-muted); margin-right: 0.25rem; }
/* The list groups by product, so every label after the first opens a new group
   and needs to detach from the pills that belong to the previous one. */
.mdffs-relnav__label:not(:first-child) { margin-left: var(--mdffs-space-4); }
.mdffs-relnav a { display: inline-flex; align-items: baseline; gap: 0.4rem; text-decoration: none;
	font-weight: 700; font-size: 0.92rem; color: var(--mdffs-primary);
	background: var(--mdffs-primary-050); border-radius: var(--mdffs-radius-pill);
	padding: 0.3rem 0.7rem; }
.mdffs-relnav a:hover { background: var(--mdffs-primary); color: #fff; }
.mdffs-relnav a span { font-weight: 500; font-size: 0.8rem; opacity: 0.75; }

/* Site search -----------------------------------------------------------------
   Header control, the search dialog, the inline box on the Documentation hub and
   the no-JavaScript results page (search.php). Markup and index: inc/search.php;
   behaviour: assets/js/search.js. */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Last in the row on desktop (after the nav); next to the Menu button on mobile. */
.site-search { order: 1; display: inline-flex; align-items: center; gap: 0.45rem; flex: 0 0 auto;
	color: var(--mdffs-body); text-decoration: none; font-weight: 600; font-size: 0.94rem;
	border: 1px solid var(--mdffs-line); border-radius: var(--mdffs-radius-pill); padding: 0.4rem 0.75rem; }
.site-search:hover, .site-search:focus-visible { color: var(--mdffs-primary); border-color: var(--mdffs-primary); }
.site-search__label, .site-search__kbd { display: none; }
.site-search__kbd, .mdffs-search kbd { font: 600 0.7rem/1 "Segoe UI", sans-serif; color: var(--mdffs-muted);
	background: var(--mdffs-surface-alt); border: 1px solid var(--mdffs-line); border-radius: 4px; padding: 0.2rem 0.35rem; }
@media (min-width: 1200px) {
	.site-search__label, .site-search__kbd { display: inline; }
}
@media (max-width: 860px) {
	.site-search { order: 0; margin-left: auto; padding: 0.5rem 0.7rem; }
	.site-search + .nav-toggle { margin-left: 0; }
}

.mdffs-search { width: min(720px, calc(100vw - 32px)); max-height: min(78vh, 760px); padding: 0;
	margin: 10vh auto auto; border: 1px solid var(--mdffs-line); border-radius: var(--mdffs-radius);
	box-shadow: var(--mdffs-shadow-lg); background: var(--mdffs-surface); color: var(--mdffs-body); overflow: hidden; }
.mdffs-search[open] { display: flex; flex-direction: column; }
.mdffs-search::backdrop { background: rgba(15, 28, 46, 0.45); }
.mdffs-search__bar { display: flex; align-items: center; gap: 0.6rem; padding: 0.75rem 1rem;
	border-bottom: 1px solid var(--mdffs-line); color: var(--mdffs-muted); }
.mdffs-search__input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; font: inherit; font-size: 1.05rem;
	color: var(--mdffs-ink); background: transparent; padding: 0.35rem 0; }
.mdffs-search__input::-webkit-search-cancel-button { cursor: pointer; }
.mdffs-search__close { flex: 0 0 auto; font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer;
	color: var(--mdffs-muted); background: var(--mdffs-surface-alt); border: 1px solid var(--mdffs-line);
	border-radius: var(--mdffs-radius-sm); padding: 0.3rem 0.6rem; }
.mdffs-search__close:hover { color: var(--mdffs-ink); }
.mdffs-search__status { font-size: 0.85rem; color: var(--mdffs-muted); padding: 0.5rem 1rem 0; }
.mdffs-search__status:empty { display: none; }
.mdffs-search__results { overflow-y: auto; padding: 0.25rem 0.5rem 0.75rem; }
.mdffs-search__glabel { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
	color: var(--mdffs-muted); padding: 0.9rem 0.5rem 0.3rem; }
.mdffs-search__hit { display: block; text-decoration: none; color: var(--mdffs-body); border-radius: var(--mdffs-radius-sm);
	padding: 0.55rem 0.6rem; }
.mdffs-search__hit:hover, .mdffs-search__hit.is-active { background: var(--mdffs-primary-050); }
.mdffs-search__hit.is-active { box-shadow: inset 3px 0 0 var(--mdffs-primary); }
.mdffs-search__title { display: block; font-weight: 600; color: var(--mdffs-ink); line-height: 1.35; }
.mdffs-search__sep { color: var(--mdffs-muted); font-weight: 400; }
.mdffs-search__snip { display: block; font-size: 0.88rem; color: var(--mdffs-muted); line-height: 1.5; margin-top: 0.15rem;
	overflow-wrap: anywhere; }
.mdffs-search mark, .mdffs-results mark { background: #fff1b8; color: inherit; border-radius: 2px; padding: 0 1px; }
.mdffs-search__foot { display: flex; flex-wrap: wrap; gap: 1rem; font-size: 0.78rem; color: var(--mdffs-muted);
	border-top: 1px solid var(--mdffs-line); padding: 0.55rem 1rem; }
@media (max-width: 600px) {
	.mdffs-search { margin-top: 16px; max-height: calc(100vh - 32px); }
	.mdffs-search__foot { display: none; }
}

/* Inline search box: Documentation hub ([dffs_search]) and the results page. */
.mdffs-search-inline { display: flex; gap: 0.5rem; max-width: 640px; margin-top: var(--mdffs-space-6); }
.mdffs-search-inline input { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 1rem; color: var(--mdffs-ink);
	background: var(--mdffs-surface); border: 1px solid var(--mdffs-line); border-radius: var(--mdffs-radius-sm);
	padding: 0.65rem 0.9rem; }
.mdffs-search-inline input:focus { outline: 2px solid var(--mdffs-primary); outline-offset: 1px; border-color: var(--mdffs-primary); }
.mdffs-search-inline .mdffs-btn { flex: 0 0 auto; border: 0; cursor: pointer; font: inherit; font-weight: 600; }

/* No-JavaScript results page. */
.mdffs-results__group { margin-top: var(--mdffs-space-8); }
.mdffs-results__group h2 { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
	color: var(--mdffs-muted); margin: 0 0 0.5rem; }
.mdffs-results__hit { display: block; padding: 0.7rem 0; border-bottom: 1px solid var(--mdffs-line); text-decoration: none; }
.mdffs-results__hit strong { display: block; color: var(--mdffs-ink); }
.mdffs-results__hit:hover strong { color: var(--mdffs-primary); }
.mdffs-results__hit span { display: block; color: var(--mdffs-muted); font-size: 0.92rem; }