/* Engine stylesheet — styles for markup the CMS ENGINE emits (server-side
   LaTeX math today; future engine-generated structures belong here too).
   Shipped with the build and linked BEFORE /main.css, so site global CSS
   can override anything. Do not edit on the server — changes belong in
   cms/engine-assets/engine.css in the repo. */

/* ==========================================================================
   MOBILE BROWSER DEFAULTS — behaviour the engine turns off for every page.
   Text inflation: iOS Safari and Android Chrome enlarge "small" text when a
   page is viewed in landscape or judged as desktop-sized, which breaks any
   layout that sets its own sizes. 100% = render what the CSS says. (The
   matching head tag <meta name="format-detection"> turns off the phone /
   date / address / email / URL auto-links; see templates/layout.ts.)
   ========================================================================== */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* ==========================================================================
   EDITORS-ONLY NOTICE — above a page with the "Editors only" status, which
   only signed-in CMS users are served (templates/layout.ts).
   ========================================================================== */
.cms-editors-only {
    position: sticky;
    top: 0;
    z-index: 2147483000;
    padding: 6px 16px;
    background: #5b3fd1;
    color: #fff;
    font: 600 13px/1.4 system-ui, -apple-system, 'Segoe UI', sans-serif;
    text-align: center;
}

/* ==========================================================================
   PAGE NAVIGATION — Settings → Page navigation (interactive/navigation.ts).
   While a followed link loads (`data-cms-navigating` on <html>), a thin bar
   runs along the top and the page dims; links and buttons look pressed
   while touched. The bar's colour: `--cms-nav-progress-color`, else the
   site's `--color-accent`. The pressed state has no specificity: any rule
   of the site's own wins.
   ========================================================================== */
:where(html[data-cms-tap-feedback] a[href]:active, html[data-cms-tap-feedback] button:active) {
    opacity: 0.7;
}
html[data-cms-navigating]::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 2147483647;
    pointer-events: none;
    background: var(--cms-nav-progress-color, var(--color-accent, #2563eb));
    transform-origin: 0 50%;
    animation: cms-nav-progress 12s cubic-bezier(0.08, 0.6, 0.2, 1) forwards;
}
/* Faded toward the page's background, at once: Safari draws no further
   frame of a page that is being left (interactive/navigation.ts follows
   the link one frame later), so the first frame has to show it all — the
   dim, and a bar already a third of the way along. */
html[data-cms-navigating] body {
    opacity: 0.6;
}
@keyframes cms-nav-progress {
    from { transform: scaleX(0.3); }
    to { transform: scaleX(0.95); }
}
@media (prefers-reduced-motion: reduce) {
    html[data-cms-navigating]::before { animation: none; }
}

/* ==========================================================================
   TABLES — `{{this.attributes.<table>}}` renders a table attribute
   (types/table.ts) as <table class="cms-table">. Plain defaults: the
   site's CSS styles it as it likes.
   ========================================================================== */
.cms-table { border-collapse: collapse; }
.cms-table th, .cms-table td { padding: 0.35em 0.6em; text-align: left; vertical-align: top; }
.cms-table thead th { vertical-align: bottom; }
.cms-table th[scope="colgroup"] { text-align: center; }
.cms-table .cms-table-number { text-align: right; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   MATH — engine-emitted markup from the server-side LaTeX renderer
   (cms/src/math/latex.ts). Authors write `&i math … &` blocks or inline
   `\( … \)`; the renderer emits .m-* atoms with TeX-model spacing classes.
   No JS, no font downloads — local math-capable serif stacks only.
   These are the ENGINE defaults; site-level global CSS may override.
   ========================================================================== */

.m-row {
    font-family: var(--font-math, 'Libertinus Math', 'Libertinus Serif', 'STIX Two Math', 'Cambria Math', 'Latin Modern Math', 'XITS Math', Georgia, 'Times New Roman', serif);
    font-size: 1.06em;
    line-height: 1.45;
    color: var(--color-text, inherit);
    white-space: nowrap;
    /* Copy skips the rendering — the hidden .m-src twin supplies the
       verbatim LaTeX to the clipboard (and to screen readers). */
    user-select: none;
    -webkit-user-select: none;
}

/* The equation's raw source: transparent text overlaying the equation's
   box. Copying pastes the verbatim `\( … \)` source (MathJax/KaTeX
   behaviour), and because the overlay IS selectable text sized to the
   equation, drag-selection highlights the equation area properly and
   grabs the source directly. (NOT display:none / 1px-clip — those drop
   the visible highlight.) */
.eq-i, .eq-row { position: relative; }
.m-src {
    position: absolute;
    inset: 0;
    overflow: hidden;
    white-space: pre;
    font-size: 0.5rem;
    color: transparent;
}
/* Selection repaints text with the selection FOREGROUND color, which
   would reveal the tiny source glyphs over the highlight. A ::selection
   rule REPLACES the UA default styling wholesale, so the background must
   be restored explicitly (system Highlight color) while the glyphs stay
   transparent. */
.m-src::selection { color: transparent; background-color: Highlight; }

/* Atoms. Identifiers italic; numbers/upright symbols plain with tabular
   figures so aligned rows read cleanly. */
.m-i  { font-style: italic; letter-spacing: 0.02em; }
/* Math-italic codepoint identifiers (MATH_ITALIC_CODEPOINTS mode): the
   glyphs ARE italic (𝑉, 𝜋) inside the math font's Regular face. Fonts
   store per-glyph italic correction in the OpenType MATH table — which
   BROWSERS DON'T READ (only TeX-class layout engines do), so the slanted
   glyph's advance width still lets a following upright ( set into its
   overhang. Same adjacency correction as the CSS-italic mode. */
.m-mi { font-style: normal; }
.m-mi + .m-d, .m-mi + .m-n, .m-mi + .m-t, .m-mi + .m-frac, .m-mi + .m-sqrt { margin-left: 0.11em; }
/* Italic correction (CSS-italic mode only): TeX fonts carry this in
   glyph metrics, web fonts don't — an italic's right overhang crashes
   into a following upright glyph (π( , x2) without it. */
.m-i + .m-d, .m-i + .m-n, .m-i + .m-t, .m-i + .m-frac, .m-i + .m-sqrt { margin-left: 0.11em; }
.m-n  { font-style: normal; font-variant-numeric: tabular-nums; }
.m-t  { font-style: normal; white-space: pre; }
.m-d  { font-style: normal; }                    /* delimiters ( ) [ ]        */
.m-p  { font-style: normal; margin-right: 0.167em; }  /* punctuation , ;      */
.m-sp { display: inline-block; }

/* TeX spacing model: relations thick, binaries medium, unary signs tight.
   THIS is most of what makes it read as typeset math. */
.m-rel { margin: 0 0.278em; font-style: normal; }
.m-bin { margin: 0 0.222em; font-style: normal; }
.m-u   { margin: 0;          font-style: normal; }    /* unary + / −          */

/* Scripts — engine-owned SPANS, deliberately not <sup>/<sub>: site CSS
   commonly styles the bare tags (vertical-align: super etc.) and
   /main.css loads after this file, so tag rules would override the
   stack. Sized without inflating the line box. */
.m-sup { font-size: 0.66em; line-height: 0; vertical-align: 0.64em;  margin-left: 0.05em; }
.m-sub { font-size: 0.66em; line-height: 0; vertical-align: -0.42em; margin-left: 0.05em; }

/* Stacked sub+sup on one base (msubsup): top row = superscript,
   bottom row = subscript. */
.m-ss {
    display: inline-grid;
    grid-auto-rows: 1fr;
    margin-left: 0.06em;
    margin-right: 0.06em;
    /* `middle` anchors on the surrounding font's x-height — stable under
       any font metrics. A length offset here rode the line-box ascent,
       which fonts with tall metrics (Libertinus Math) push way down. */
    vertical-align: middle;
    font-size: 0.66em;
    line-height: 1.15;
    font-style: normal;
    text-align: left;
}
.m-ssa, .m-ssb { display: block; font-size: inherit; line-height: inherit; }

/* Fractions: numerator over rule over denominator, centered on the math
   axis. The rule uses currentColor so it follows text color. */
.m-frac {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;     /* rows share the max width — the rule spans the whole fraction */
    vertical-align: middle;   /* centres the bar on the math axis, level with = */
    position: relative;
    top: -0.08em;
    margin: 0 0.14em;
    text-align: center;
    line-height: 1.15;
}
.m-fn { display: block; padding: 0 0.3em 0.12em; text-align: center; }
.m-fd { display: block; padding: 0.12em 0.3em 0; border-top: 0.058em solid currentColor; text-align: center; }

/* Radical: sign + overlined radicand. */
.m-sqrt { display: inline-flex; align-items: stretch; margin: 0 0.05em; }
.m-rad  { align-self: flex-end; padding-right: 0.02em; transform: translateY(-0.04em); }
.m-sqb  { border-top: 0.058em solid currentColor; padding: 0.08em 0.18em 0 0.12em; }

/* Unknown \command — visible but quiet, so a typo doesn't scream in prose. */
.m-unk { font-family: var(--font-mono, monospace); font-size: 0.85em; opacity: 0.6; }

/* ---- Display block chrome (engine defaults — match the site's .eq look;
        site global CSS overrides win by load order) -------------------- */
.eq {
    margin: 1.75rem 0;
    padding: 1.1rem 1.4rem;
    background: var(--color-surface, rgba(127, 127, 127, 0.07));
    border-left: 3px solid var(--color-accent, currentColor);
    overflow-x: auto;
}
.eq-label {
    display: block;
    margin-bottom: 0.75rem;
    font-family: var(--font-mono, monospace);
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-dim, inherit);
}
.eq-row { font-size: 1.18rem; }
.eq-row + .eq-row { margin-top: 0.65rem; }
.eq-row .m-row { font-size: 1em; }
.eq-note {
    margin-top: 0.85rem;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--color-muted, inherit);
    white-space: normal;
}

/* Inline math sits in running prose — inherit size, nowrap. */
.eq-i { white-space: nowrap; }
.eq-i .m-row { font-size: 1em; }

@media (max-width: 640px) {
    .eq-row { font-size: 1.02rem; }
}

/* ==========================================================================
   LANGUAGE SWITCHER — `&i language-switcher` (cms/src/modules/languageSwitcher.ts).
   Neutral defaults: inherits the surrounding font and colour, so it sits in
   a navbar as-is; site CSS restyles .cms-lang freely.
   ========================================================================== */
.cms-lang ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25em 0.9em; }
.cms-lang a { color: inherit; text-decoration: none; }
.cms-lang a:hover, .cms-lang a:focus-visible { text-decoration: underline; }
.cms-lang-current { font-weight: 600; }
.cms-lang-menu details { position: relative; }
.cms-lang-menu summary { cursor: pointer; list-style: none; }
.cms-lang-menu summary::-webkit-details-marker { display: none; }
.cms-lang-menu summary::after { content: " \25BE"; font-size: 0.8em; }
.cms-lang-menu ul { position: absolute; right: 0; top: 100%; z-index: 20; flex-direction: column; gap: 0;
                    min-width: 9em; padding: 0.35em 0; background: #fff; color: #111;
                    border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 6px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12); }
.cms-lang-menu li a { display: block; padding: 0.35em 0.9em; }

/* ==========================================================================
   SEARCH RESULTS — what the `&i search` widget's results show beyond the
   site's own card styles (cms/src/interactive/search.ts): the title is the
   card's link and covers the card; the facts of the result's group; a part
   number's table row, labelled; other matching sections, each a link; the
   results page's section filters and further results. Engine defaults —
   site global CSS may override.
   ========================================================================== */

.cms-search .cms-search-result { position: relative; }
.cms-search .cms-search-result-title { text-decoration: none; }
.cms-search .cms-search-result-title::after {
    content: '';
    position: absolute;
    inset: 0;
}
.cms-search .cms-search-result-title:focus-visible { outline: none; }
.cms-search .cms-search-result:focus-within {
    outline: 2px solid var(--color-accent, currentColor);
    outline-offset: 4px;
}

.cms-search .cms-search-result-facts {
    display: block;
    font-size: 0.8rem;
    color: var(--color-text, inherit);
    margin: 1px 0 3px;
}
.cms-search .cms-search-result-facts > * { margin: 0; }

.cms-search .cms-search-result-row { display: block; font-size: 0.8rem; }
.cms-search .cms-search-result-row-caption {
    display: block;
    color: var(--color-muted, inherit);
    margin-bottom: 4px;
}
.cms-search .cms-search-result-row dl {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin: 0;
}
.cms-search .cms-search-result-row dl > div { display: flex; flex-direction: column; }
.cms-search .cms-search-result-row dt {
    font-size: 0.68rem;
    color: var(--color-dim, inherit);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.cms-search .cms-search-result-row dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
    color: var(--color-text, inherit);
}

.cms-search .cms-search-result-sections {
    list-style: none;
    margin: 8px 0 0;
    padding: 0 0 0 12px;
    border-left: 2px solid var(--color-border, #e2e2e2);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.cms-search .cms-search-result-sections li { margin: 0; padding: 0; }
.cms-search .cms-search-result-sections li::before { content: none; }
.cms-search .cms-search-result-sections a {
    position: relative;
    z-index: 1;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text, inherit);
    text-decoration: none;
}
.cms-search .cms-search-result-sections a:hover { color: var(--color-accent, inherit); }
.cms-search .cms-search-section-snippet {
    display: block;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--color-muted, inherit);
}
.cms-search .cms-search-section-snippet mark {
    background: none;
    color: var(--color-text, inherit);
    font-weight: 600;
}

.cms-search .cms-search-facets {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.cms-search .cms-search-facet,
.cms-search .cms-search-more {
    font: inherit;
    font-size: 0.8rem;
    padding: 4px 12px;
    border: 1px solid var(--color-border, #e2e2e2);
    border-radius: var(--radius, 0);
    background: var(--color-bg, transparent);
    color: var(--color-text, inherit);
    cursor: pointer;
}
.cms-search .cms-search-facet span { color: var(--color-dim, inherit); margin-left: 4px; }
.cms-search .cms-search-facet[aria-pressed="true"] {
    border-color: var(--color-accent, currentColor);
    color: var(--color-accent, inherit);
}
.cms-search .cms-search-more { align-self: flex-start; }

.cms-search-mode-inline .cms-search-result-facts,
.cms-search-mode-inline .cms-search-result-sections,
.cms-search-mode-inline .cms-search-result-row { display: none; }