/* ==========================================================================
   Multilarm shared theme tokens + light/dark toggle button
   --------------------------------------------------------------------------
   ONE source of truth for the colour palette across every page.

   How it works
   ------------
   - Every page's inline <style> references these custom properties (with a
     hardcoded hex fallback, e.g.  color: var(--ml-fg, #dbe6e0); ) so that
     browsers WITHOUT custom-property support (IE11) still render a readable,
     improved-contrast DARK page -- they just don't get the toggle.
   - The light theme is applied by adding the class "theme-light" to <html>.
     Light values simply re-declare the same custom properties, so the switch
     itself needs no var() resolution and is rock-solid.
   - Default (no class) = improved-contrast DARK (the brand look).

   Keep this palette in sync with the per-page hex fallbacks.
   ========================================================================== */

:root {
  /* ---- improved-contrast DARK (default) ---- */
  --ml-bg:          #0a0c0b;  /* page background                       */
  --ml-bg-2:        #0d100e;  /* slightly raised background            */
  --ml-surface:     #111413;  /* cards / panels                        */
  --ml-surface-2:   #161a18;  /* card headers / inputs / raised        */
  --ml-answer-bg:   #10201b;  /* answer-first block ground (dark)      */
  --ml-border:      #1e2620;  /* hairline borders                      */
  --ml-border-2:    #263028;  /* stronger borders / sliders            */
  --ml-fg:          #dbe6e0;  /* body text  (was #c8d4cf -> brighter)  */
  --ml-fg-dim:      #aec0b7;  /* secondary text (brightened for readability) */
  --ml-fg-bright:   #f2f7f4;  /* emphasised text (was #e8f0ec)         */
  --ml-accent:      #00d6aa;  /* teal accent                           */
  --ml-accent-2:    #00b894;  /* hover / pressed accent                */
  --ml-on-accent:   #06100c;  /* text on an accent fill                */
  --ml-danger:      #ff5566;  /* destructive / errors                  */
  --ml-on-danger:   #1a0508;
  --ml-warn:        #ffb454;
  --ml-link:        #2ee6bd;

  /* decorative glow + scanline strength (dark only) */
  --ml-glow:        rgba(0,214,170,0.08);
  --ml-glow-2:      rgba(0,214,170,0.05);
  --ml-scanline:    rgba(0,0,0,0.03);

  /* ---- semantic status ramp (dark) ----
     These replace the ~490 hardcoded hexes that used to be scattered through
     the pages. Every one was tuned for a black background, so in light mode
     they rendered as pale-on-white (e.g. #ccc = 1.5:1). Route colour through
     these tokens and both themes stay legible. See the light block below for
     the measured contrast of each light value. */
  --ml-faint:       #ccc;     /* palest body text (was #ccc/#bbb)        */
  --ml-muted:       #9aa8a2;  /* de-emphasised text (was #888/#aaa/#999) */
  --ml-ok:          #44cc88;  /* success / healthy                       */
  --ml-ok-soft:     #81c784;  /* pale success text on dark               */
  --ml-danger-soft: #ef9a9a;  /* pale error text on dark                 */
  --ml-warn-soft:   #ffd06a;  /* pale warning text on dark               */
  --ml-info:        #5cc8ff;  /* informational / links in panels         */
  --ml-info-soft:   #8dd9ff;
  --ml-accent-soft: #80cbc4;  /* pale teal labels on dark                */
  --ml-purple:      #ce93d8;

  /* tinted panel surfaces (error / warning / success / info banners).
     Saturated *filled badge* backgrounds (#c62828, #1b5e20, …) are left as
     literals on purpose — they carry white text and read fine in both themes. */
  --ml-surface-danger: #1a1010;
  --ml-surface-warn:   #221008;
  --ml-surface-ok:     #0e2a18;
  --ml-surface-info:   #0a1525;
  --ml-surface-purple: #1a0e28;

  /* toggle button surfaces */
  --ml-toggle-bg:     rgba(17,20,19,0.92);
  --ml-toggle-border: var(--ml-border-2);
  --ml-toggle-fg:     var(--ml-fg);

  color-scheme: dark;
}

/* ==========================================================================
   Global typography — bolder, larger, easier-to-read body copy site-wide.
   Pages set body{font-size:16px; line-height:...} but never body{font-weight},
   so a slightly higher-specificity `html body` rule wins for size/line-height
   while font-weight applies cleanly. The 106.25% root bump scales rem-based
   type ~6% (16->17px). Rajdhani 500 must be loaded per page (font URL).
   ========================================================================== */
html { font-size: 106.25%; }            /* 16px -> 17px base */
html body { font-weight: 500; line-height: 1.65; font-size: 1rem; }

html.theme-light {
  /* ---- LIGHT (WCAG-AA friendly) ---- */
  --ml-bg:          #f3f6f5;
  --ml-bg-2:        #e9eeec;
  --ml-surface:     #ffffff;
  --ml-surface-2:   #eaf0ed;
  --ml-answer-bg:   #e6f2ee;  /* answer-first block ground (light) */
  --ml-border:      #d3ddd8;
  --ml-border-2:    #c2cfc9;
  --ml-fg:          #172320;  /* ~13:1 on #f3f6f5 */
  --ml-fg-dim:      #3e4c45;  /* 8.2:1 — AAA */
  --ml-fg-bright:   #0a120f;
  --ml-accent:      #00664f;  /* 6.4:1 — darkened from #00785f (4.4:1), which
                                 was AA-minimum and washed out in daylight */
  --ml-accent-2:    #00503f;
  --ml-on-accent:   #ffffff;
  --ml-danger:      #b81f31;  /* 5.9:1 */
  --ml-on-danger:   #ffffff;
  --ml-warn:        #8a5100;  /* 5.9:1 */
  --ml-link:        #00503f;

  /* ---- semantic status ramp (light) ----
     Targets AAA (7:1) for anything used as body copy and >=5:1 for status
     accents, because these pages get read on wall-mounted tablets in direct
     sunlight where the AA 4.5:1 floor is not enough. */
  --ml-faint:       #444f49;  /* 7.9:1  (was #ccc  -> 1.5:1) */
  --ml-muted:       #4a5a52;  /* 6.7:1  (was #888  -> 3.3:1) */
  --ml-ok:          #0e6b35;  /* 6.1:1  (was #44cc88 -> 2.2:1) */
  --ml-ok-soft:     #0e6b35;
  --ml-danger-soft: #a3202f;  /* 6.9:1  (was #ef9a9a -> 2.0:1) */
  --ml-warn-soft:   #8a5100;  /* 5.9:1  (was #ffd06a -> 1.6:1) */
  --ml-info:        #0f4c8a;  /* 8.0:1  (was #5cc8ff -> 1.9:1) */
  --ml-info-soft:   #0f4c8a;
  --ml-accent-soft: #00503f;  /* 7.6:1  (was #80cbc4 -> 1.7:1) */
  --ml-purple:      #6b21a8;  /* 7.4:1 */

  /* tinted panel surfaces — light tints that keep the matching *-soft text
     token above 7:1 (e.g. --ml-danger-soft #a3202f on #fdecee = 6.6:1). */
  --ml-surface-danger: #fdecee;
  --ml-surface-warn:   #fdf4e3;
  --ml-surface-ok:     #e7f6ed;
  --ml-surface-info:   #e9f1fb;
  --ml-surface-purple: #f4ecfc;

  --ml-glow:        rgba(0,120,95,0.05);
  --ml-glow-2:      rgba(0,120,95,0.035);
  --ml-scanline:    rgba(0,0,0,0);

  --ml-toggle-bg:     rgba(255,255,255,0.94);
  --ml-toggle-border: var(--ml-border-2);
  --ml-toggle-fg:     var(--ml-fg);

  color-scheme: light;
}

/* Light mode: kill the dark-only CRT scanline overlay that hurts contrast.
   Pages draw it with  body::before { ... }  so we hide that element. */
html.theme-light body::before { display: none !important; }

/* ==========================================================================
   Light-mode contrast repairs (shared)
   --------------------------------------------------------------------------
   Several pages hardcode DARK backgrounds (no var()) on elements whose TEXT
   colour DOES flip via the --ml-* tokens. In light mode that leaves dark text
   on a dark surface -> unreadable. These high-specificity overrides
   (html.theme-light <sel>) repaint just the offending surfaces with light
   theme tokens. Selectors are scoped to class names that are unique to their
   page, so the rules are no-ops everywhere else.
   ========================================================================== */

/* Sticky top bar (index, pricing, contact, docs, downloads, demo, help-video,
   hub) hardcodes  background: rgba(10,12,11,0.9x)  -> stays black in light. */
html.theme-light header {
  background: rgba(243,246,245,0.95) !important;
  border-bottom-color: var(--ml-border, #d3ddd8);
}

/* index.html cards / tiles / placeholder slots */
html.theme-light .post     { background: var(--ml-surface, #fff); }
html.theme-light .spot     { background: linear-gradient(160deg, var(--ml-surface,#fff) 0%, var(--ml-bg-2,#e9eeec) 100%); }
html.theme-light .img-slot { background: linear-gradient(160deg, var(--ml-surface-2,#eaf0ed) 0%, var(--ml-bg-2,#e9eeec) 100%); }

/* demo.html / help-video.html note panel */
html.theme-light .note { background: var(--ml-surface-2, #eaf0ed); }

/* docs.html keyboard key */
html.theme-light kbd { background: var(--ml-surface-2, #eaf0ed); border-bottom-color: var(--ml-border-2, #c2cfc9); }

/* contact.html form fields + inline code (hardcoded #080e0b / #0a120e) */
html.theme-light .field input,
html.theme-light .field select,
html.theme-light .field textarea { background: var(--ml-surface, #fff); color: var(--ml-fg-bright, #0a120f); }
html.theme-light .field input:focus,
html.theme-light .field select:focus,
html.theme-light .field textarea:focus { background: var(--ml-surface-2, #eaf0ed); }
html.theme-light code.inline { background: var(--ml-surface-2, #eaf0ed); }

/* Mobile hamburger dropdown (docs/downloads/demo/help-video) hardcodes a dark
   panel; its links use --ml-fg which flips dark -> dark-on-dark when the menu
   is opened in light mode. #nav-toggle ~ nav targets only that dropdown. */
html.theme-light #nav-toggle ~ nav { background: var(--ml-surface, #fff); }

/* ==========================================================================
   Floating theme toggle button (injected by theme.js)
   ========================================================================== */
#ml-theme-toggle {
  position: fixed;
  right: 14px;
  bottom: 14px;
  /* keep clear of notches / home indicators on mobile */
  right: calc(14px + env(safe-area-inset-right, 0px));
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  z-index: 2147483600;            /* above sticky headers, scanline overlays */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 6px;
  min-height: 44px;              /* mobile-friendly hit target */
  padding: 8px 13px;
  margin: 0;
  font-family: 'Share Tech Mono','Courier New',monospace;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  color: var(--ml-toggle-fg, #dbe6e0);
  background: var(--ml-toggle-bg, rgba(17,20,19,0.92));
  border: 1px solid var(--ml-toggle-border, #263028);
  border-radius: 22px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 10px rgba(0,0,0,0.35);
  -webkit-transition: color .15s, border-color .15s, background .15s;
  transition: color .15s, border-color .15s, background .15s;
  -webkit-tap-highlight-color: transparent;
}
#ml-theme-toggle:hover,
#ml-theme-toggle:focus-visible {
  color: var(--ml-accent, #00d6aa);
  border-color: var(--ml-accent, #00d6aa);
  outline: none;
}
#ml-theme-toggle .ml-tt-icon {
  width: 15px;
  height: 15px;
  display: inline-block;
  flex-shrink: 0;
}
#ml-theme-toggle .ml-tt-label { display: inline-block; }

/* Show the "switch to LIGHT" affordance while in dark, and vice-versa.
   theme.js sets the textual label; these just guarantee visibility. */
@media (max-width: 480px) {
  #ml-theme-toggle .ml-tt-label { display: none; } /* icon-only on small screens */
  #ml-theme-toggle { padding: 8px; min-width: 44px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  #ml-theme-toggle { -webkit-transition: none; transition: none; }
}

/* ==========================================================================
   Site search (injected by search.js): floating button, nav link, modal
   ========================================================================== */
/* Floating search button -- stacked just ABOVE the theme toggle */
#ml-search-fab {
  position: fixed;
  right: 14px;
  bottom: 66px;
  right: calc(14px + env(safe-area-inset-right, 0px));
  bottom: calc(66px + env(safe-area-inset-bottom, 0px));
  z-index: 2147483600;
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 13px;
  margin: 0;
  font-family: 'Share Tech Mono','Courier New',monospace;
  font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; line-height: 1;
  cursor: pointer;
  color: var(--ml-toggle-fg, #dbe6e0);
  background: var(--ml-toggle-bg, rgba(17,20,19,0.92));
  border: 1px solid var(--ml-toggle-border, #263028);
  border-radius: 22px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 2px 10px rgba(0,0,0,0.35);
  -webkit-transition: color .15s, border-color .15s; transition: color .15s, border-color .15s;
  -webkit-tap-highlight-color: transparent;
}
#ml-search-fab:hover, #ml-search-fab:focus-visible {
  color: var(--ml-accent, #00d6aa); border-color: var(--ml-accent, #00d6aa); outline: none;
}
#ml-search-fab svg { width: 15px; height: 15px; display: inline-block; flex-shrink: 0; }
@media (max-width: 480px) {
  #ml-search-fab .ml-tt-label { display: none; }
  #ml-search-fab { padding: 8px; min-width: 44px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
}

/* Nav "Search" link (appended where a nav exists) */
.ml-nav-search { cursor: pointer; }
.ml-nav-search-ic { width: 13px; height: 13px; vertical-align: -2px; }

/* Modal overlay */
#ml-search-overlay {
  display: none;
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  z-index: 2147483640;
  background: rgba(0,0,0,0.62);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
  -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start;
  padding: 8vh 16px 16px;
  -webkit-box-sizing: border-box; box-sizing: border-box;
}
#ml-search-overlay[style*="flex"] { display: -webkit-box; display: -ms-flexbox; display: flex; }
.ml-srch-panel {
  width: 100%; max-width: 640px; max-height: 80vh;
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
  background: var(--ml-surface, #111413);
  border: 1px solid var(--ml-border-2, #263028);
  border-radius: 12px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.55);
  overflow: hidden;
}
.ml-srch-bar {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  gap: 9px; padding: 12px 14px;
  border-bottom: 1px solid var(--ml-border, #1e2620);
}
.ml-srch-ic { width: 18px; height: 18px; color: var(--ml-accent, #00d6aa); flex-shrink: 0; }
#ml-srch-input {
  -webkit-box-flex: 1; -ms-flex: 1; flex: 1;
  background: transparent; border: 0; outline: none;
  color: var(--ml-fg-bright, #f2f7f4);
  font-family: inherit; font-size: 16px;  /* 16px avoids iOS zoom-on-focus */
}
#ml-srch-input::-webkit-input-placeholder { color: var(--ml-fg-dim, #9bb0a6); }
#ml-srch-input::placeholder { color: var(--ml-fg-dim, #9bb0a6); }
.ml-srch-close {
  background: transparent; border: 1px solid var(--ml-border-2, #263028);
  color: var(--ml-fg-dim, #9bb0a6); border-radius: 6px;
  font-size: 10px; letter-spacing: 1px; padding: 4px 8px; cursor: pointer; text-transform: uppercase;
}
.ml-srch-close:hover { color: var(--ml-accent, #00d6aa); border-color: var(--ml-accent, #00d6aa); }
#ml-srch-results { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 6px; }
.ml-srch-hint { padding: 18px 14px; color: var(--ml-fg-dim, #9bb0a6); font-size: 13px; }
.ml-srch-item {
  display: block; text-decoration: none; padding: 9px 11px; border-radius: 8px; border: 1px solid transparent;
}
.ml-srch-item.sel, .ml-srch-item:hover {
  background: var(--ml-surface-2, #161a18); border-color: var(--ml-border-2, #263028);
}
.ml-srch-title { color: var(--ml-fg-bright, #f2f7f4); font-size: 14px; font-weight: 600; }
.ml-srch-crumb { color: var(--ml-accent, #00d6aa); font-weight: 400; font-size: 12px; }
.ml-srch-snip { color: var(--ml-fg-dim, #9bb0a6); font-size: 12.5px; line-height: 1.5; margin-top: 3px; }
.ml-srch-snip mark { background: rgba(0,214,170,0.22); color: var(--ml-fg-bright, #f2f7f4); border-radius: 2px; padding: 0 1px; }
html.theme-light .ml-srch-snip mark { background: rgba(0,134,106,0.18); }
html.theme-light #ml-search-overlay { background: rgba(20,30,26,0.45); }
@media (max-width: 480px) {
  #ml-search-fab .ml-tt-label { display: none; }
  .ml-srch-panel { max-height: 88vh; }
  #ml-search-overlay { padding: 4vh 10px 10px; }
}

/* ==========================================================================
   Header brand clock — ONE animation for the small logo on EVERY page.
   --------------------------------------------------------------------------
   This was previously defined per-page: some pages animated, some were frozen,
   and index/pricing even used a different SVG, so the smallest logo looked
   different from page to page. Centralising it here (keyed off the SVG
   STRUCTURE, so it works whether or not the markup carries .ring/.b-sec/
   .eq-bars classes) makes the header mark move identically across the site.
   Applies to every header-mark wrapper variant: .brand, .logo, .hub-brand,
   blog's .brand-logo, and the small .hero-mark.
   ========================================================================== */
.brand svg, .logo svg, .hub-brand svg, .hero-mark { overflow: visible; }

/* Outer ring — gentle breathing */
.brand svg circle[fill="none"], .logo svg circle[fill="none"],
.hub-brand svg circle[fill="none"], .brand-logo circle[fill="none"],
.hero-mark circle[fill="none"] {
  -webkit-animation: mlBrandRing 3s ease-in-out infinite;
          animation: mlBrandRing 3s ease-in-out infinite;
}
/* Sweeping hand (the pale #c8d4cf line) — slow continuous rotation */
.brand svg line[stroke="#c8d4cf"], .logo svg line[stroke="#c8d4cf"],
.hub-brand svg line[stroke="#c8d4cf"], .brand-logo line[stroke="#c8d4cf"],
.hero-mark line[stroke="#c8d4cf"] {
  -webkit-transform-origin: 18px 18px; transform-origin: 18px 18px;
  -webkit-animation: mlSpinSlow 60s linear infinite;
          animation: mlSpinSlow 60s linear infinite;
}
/* Equaliser bars — staggered scaleY pulse */
.brand svg rect, .logo svg rect, .hub-brand svg rect,
.brand-logo rect, .hero-mark rect {
  -webkit-transform-box: fill-box; transform-box: fill-box;
  -webkit-transform-origin: center bottom; transform-origin: center bottom;
  -webkit-animation: mlEqPulse 1.4s ease-in-out infinite;
          animation: mlEqPulse 1.4s ease-in-out infinite;
}
.brand svg rect:nth-of-type(2), .logo svg rect:nth-of-type(2), .hub-brand svg rect:nth-of-type(2), .brand-logo rect:nth-of-type(2), .hero-mark rect:nth-of-type(2) { -webkit-animation-delay: .25s; animation-delay: .25s; }
.brand svg rect:nth-of-type(3), .logo svg rect:nth-of-type(3), .hub-brand svg rect:nth-of-type(3), .brand-logo rect:nth-of-type(3), .hero-mark rect:nth-of-type(3) { -webkit-animation-delay: .5s;  animation-delay: .5s; }

@-webkit-keyframes mlSpinSlow { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } }
@keyframes         mlSpinSlow { from { transform: rotate(0deg); }         to { transform: rotate(360deg); } }
@-webkit-keyframes mlBrandRing { 0%,100% { opacity: 1; } 50% { opacity: .5; } }
@keyframes         mlBrandRing { 0%,100% { opacity: 1; } 50% { opacity: .5; } }
@-webkit-keyframes mlEqPulse { 0%,100% { -webkit-transform: scaleY(.5); } 50% { -webkit-transform: scaleY(1); } }
@keyframes         mlEqPulse { 0%,100% { transform: scaleY(.5); }         50% { transform: scaleY(1); } }

/* ML-ASSIST-CSS-START — everything to the END marker is extracted verbatim by
   ops/embed-assist-in-help.mjs and inlined into Multilarm_Help.html. Keep this
   block self-contained (var() fallbacks required) and keep the markers intact. */
/* ==========================================================================
   Multilarm Assist chatbot (injected by assist.js): FAB + chat panel
   ========================================================================== */
/* Launcher — stacked above the search FAB (search @66px, theme toggle @14px) */
#ml-assist-fab {
  position: fixed;
  right: 14px;
  bottom: 118px;
  right: calc(14px + env(safe-area-inset-right, 0px));
  bottom: calc(118px + env(safe-area-inset-bottom, 0px));
  z-index: 2147483600;
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 13px;
  margin: 0;
  font-family: 'Share Tech Mono','Courier New',monospace;
  font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; line-height: 1;
  cursor: pointer;
  color: var(--ml-toggle-fg, #dbe6e0);
  background: var(--ml-toggle-bg, rgba(17,20,19,0.92));
  border: 1px solid var(--ml-toggle-border, #263028);
  border-radius: 22px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 2px 10px rgba(0,0,0,0.35);
  -webkit-transition: color .15s, border-color .15s; transition: color .15s, border-color .15s;
  -webkit-tap-highlight-color: transparent;
}
#ml-assist-fab:hover, #ml-assist-fab:focus-visible {
  color: var(--ml-accent, #00d6aa); border-color: var(--ml-accent, #00d6aa); outline: none;
}
#ml-assist-fab svg { width: 15px; height: 15px; display: inline-block; flex-shrink: 0; }
@media (max-width: 480px) {
  #ml-assist-fab .ml-tt-label { display: none; }
  #ml-assist-fab { padding: 8px; min-width: 44px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
}

/* Panel */
#ml-assist-panel {
  display: none;
  position: fixed;
  right: 14px;
  bottom: 170px;
  right: calc(14px + env(safe-area-inset-right, 0px));
  bottom: calc(170px + env(safe-area-inset-bottom, 0px));
  z-index: 2147483630;
  width: 370px;
  max-width: calc(100vw - 28px);
  height: 520px;
  max-height: calc(100vh - 200px);
  -webkit-box-orient: vertical; -webkit-box-direction: normal;
  -ms-flex-direction: column; flex-direction: column;
  background: var(--ml-surface, #111413);
  border: 1px solid var(--ml-border, #1e2620);
  border-radius: 8px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5);
  font-family: 'Rajdhani', sans-serif;
  color: var(--ml-fg, #c8d4cf);
  overflow: hidden;
}
@media (max-width: 600px), (max-height: 560px) {
  #ml-assist-panel {
    right: 0; bottom: 0; left: 0; top: 0;
    width: auto; height: auto; max-width: none; max-height: none;
    border-radius: 0; border: none;
  }
}
.ml-asst-head {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--ml-border, #1e2620);
  background: var(--ml-surface-2, #151918);
}
.ml-asst-title {
  font-family: 'Share Tech Mono', monospace;
  font-size: .8rem; letter-spacing: 2px; text-transform: uppercase;
  color: var(--ml-accent, #00d6aa);
}
.ml-asst-sub { font-size: .78rem; color: var(--ml-fg-dim, #5d7068); margin-top: 2px; }
.ml-asst-x {
  background: none; border: none; cursor: pointer;
  color: var(--ml-fg-dim, #5d7068); font-size: 22px; line-height: 1; padding: 4px 8px;
}
.ml-asst-x:hover, .ml-asst-x:focus-visible { color: var(--ml-accent, #00d6aa); outline: none; }
.ml-asst-msgs {
  -webkit-box-flex: 1; -ms-flex: 1; flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-orient: vertical; -ms-flex-direction: column; flex-direction: column;
  gap: 8px;
}
.ml-asst-msg { display: -webkit-box; display: -ms-flexbox; display: flex; }
.ml-asst-u { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; }
.ml-asst-bubble {
  max-width: 88%;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: .92rem;
  line-height: 1.45;
  white-space: pre-line;
  word-wrap: break-word;
}
.ml-asst-b .ml-asst-bubble {
  background: var(--ml-surface-2, #171c1a);
  border: 1px solid var(--ml-border, #1e2620);
  border-left: 2px solid var(--ml-accent, #00d6aa);
}
.ml-asst-u .ml-asst-bubble {
  background: rgba(0,214,170,0.12);
  border: 1px solid rgba(0,214,170,0.3);
}
.ml-asst-bubble a { color: var(--ml-accent, #00d6aa); text-decoration: underline; }
.ml-asst-links { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -ms-flex-direction: column; flex-direction: column; gap: 4px; margin: 6px 0 0 8px; }
.ml-asst-link {
  display: block;
  font-size: .82rem;
  color: var(--ml-accent, #00d6aa);
  text-decoration: none;
  border: 1px solid var(--ml-border, #1d3530);
  border-radius: 4px;
  padding: 6px 10px;
}
.ml-asst-link:hover, .ml-asst-link:focus-visible { background: rgba(0,214,170,0.08); border-color: var(--ml-accent, #00d6aa); outline: none; }
.ml-asst-chips {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -ms-flex-wrap: wrap; flex-wrap: wrap;
  gap: 6px;
  padding: 8px 12px;
  border-top: 1px solid var(--ml-border, #1e2620);
}
.ml-asst-chips:empty { display: none; }
.ml-asst-chip {
  font-family: 'Rajdhani', sans-serif;
  font-size: .82rem; font-weight: 600;
  color: var(--ml-fg, #c8d4cf);
  background: var(--ml-surface-2, #171c1a);
  border: 1px solid var(--ml-border, #263028);
  border-radius: 14px;
  padding: 5px 12px;
  cursor: pointer;
  -webkit-transition: border-color .15s, color .15s; transition: border-color .15s, color .15s;
}
.ml-asst-chip:hover, .ml-asst-chip:focus-visible {
  color: var(--ml-accent, #00d6aa); border-color: var(--ml-accent, #00d6aa); outline: none;
}
.ml-asst-inwrap {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  gap: 6px;
  padding: 10px 12px;
  border-top: 1px solid var(--ml-border, #1e2620);
  background: var(--ml-surface-2, #151918);
  position: relative;                     /* anchors the typeahead list */
}
/* Typeahead: the questions the knowledge base can actually answer. Sits ABOVE
   the input (the panel is anchored to the bottom of the viewport, so a list
   dropping downwards would fall off screen). */
.ml-asst-sugg {
  position: absolute;
  left: 12px; right: 12px; bottom: 100%;
  margin-bottom: 6px;
  max-height: 40vh;
  overflow-y: auto;
  background: var(--ml-surface, #111413);
  border: 1px solid var(--ml-border, #263028);
  border-radius: 6px;
  box-shadow: 0 -6px 18px rgba(0, 0, 0, .45);
  z-index: 5;
}
.ml-asst-sugg-i {
  display: block;
  width: 100%;
  text-align: left;
  font-family: 'Rajdhani', sans-serif;
  font-size: .9rem;
  color: var(--ml-fg, #c8d4cf);
  background: none;
  border: none;
  border-bottom: 1px solid var(--ml-surface-2, #1a221c);
  padding: 8px 10px;
  cursor: pointer;
}
.ml-asst-sugg-i:last-child { border-bottom: none; }
.ml-asst-sugg-i:hover, .ml-asst-sugg-i.on {
  background: var(--ml-surface-2, #161c18);
  color: var(--ml-accent, #00d6aa);
}
.ml-asst-in {
  -webkit-box-flex: 1; -ms-flex: 1; flex: 1;
  font-family: 'Rajdhani', sans-serif;
  font-size: .95rem;
  color: var(--ml-fg, #c8d4cf);
  background: var(--ml-bg, #0a0c0b);
  border: 1px solid var(--ml-border, #263028);
  border-radius: 6px;
  padding: 8px 10px;
}
.ml-asst-in:focus { border-color: var(--ml-accent, #00d6aa); outline: none; }
.ml-asst-go {
  background: var(--ml-accent, #00d6aa);
  color: #06110d;
  border: none; border-radius: 6px;
  min-width: 42px;
  font-size: .95rem;
  cursor: pointer;
}
.ml-asst-go:hover, .ml-asst-go:focus-visible { opacity: .85; outline: none; }
.ml-asst-fb { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 6px; margin-left: 8px; font-size: .78rem; color: var(--ml-fg-dim, #5d7068); }
.ml-asst-fb-btn {
  font-size: .74rem;
  color: var(--ml-fg-dim, #5d7068);
  background: none;
  border: 1px solid var(--ml-border, #263028);
  border-radius: 10px;
  padding: 2px 9px;
  cursor: pointer;
}
.ml-asst-fb-btn:hover, .ml-asst-fb-btn:focus-visible { color: var(--ml-accent, #00d6aa); border-color: var(--ml-accent, #00d6aa); outline: none; }
.ml-asst-note { font-size: .72rem; color: var(--ml-fg-dim, #5d7068); padding: 0 8px; }
.ml-asst-form p { margin: 0 0 8px; }
.ml-asst-field { display: block; margin: 0 0 8px; font-size: .8rem; }
.ml-asst-field span { display: block; margin-bottom: 3px; color: var(--ml-fg-dim, #5d7068); text-transform: uppercase; letter-spacing: 1px; font-size: .7rem; }
.ml-asst-field input, .ml-asst-field select, .ml-asst-field textarea {
  width: 100%;
  -webkit-box-sizing: border-box; box-sizing: border-box;
  font-family: 'Rajdhani', sans-serif;
  font-size: .9rem;
  color: var(--ml-fg, #c8d4cf);
  background: var(--ml-bg, #0a0c0b);
  border: 1px solid var(--ml-border, #263028);
  border-radius: 5px;
  padding: 7px 9px;
}
.ml-asst-field input:focus, .ml-asst-field select:focus, .ml-asst-field textarea:focus { border-color: var(--ml-accent, #00d6aa); outline: none; }
.ml-asst-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.ml-asst-check { display: block; font-size: .8rem; margin: 4px 0 10px; cursor: pointer; }
.ml-asst-formrow { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 8px; }
.ml-asst-send {
  background: var(--ml-accent, #00d6aa); color: #06110d;
  border: none; border-radius: 5px; padding: 8px 14px;
  font-family: 'Share Tech Mono', monospace; font-size: .74rem;
  letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer;
}
.ml-asst-send:disabled { opacity: .5; cursor: default; }
.ml-asst-cancel {
  background: none; color: var(--ml-fg-dim, #5d7068);
  border: 1px solid var(--ml-border, #263028); border-radius: 5px; padding: 8px 14px;
  font-family: 'Share Tech Mono', monospace; font-size: .74rem;
  letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer;
}
.ml-asst-status { font-size: .8rem; color: var(--ml-fg-dim, #5d7068); margin-top: 6px; min-height: 1em; }
html.theme-light .ml-asst-u .ml-asst-bubble { background: rgba(0,150,120,0.1); border-color: rgba(0,150,120,0.35); }
html.theme-light .ml-asst-go, html.theme-light .ml-asst-send { color: #fff; }
@media (prefers-reduced-motion: reduce) {
  #ml-assist-fab, .ml-asst-chip { -webkit-transition: none; transition: none; }
}
/* ML-ASSIST-CSS-END */

/* ML-SEO-RELATED-CSS-START (generated by ops/seo/apply.mjs -- do not hand-edit) */
.ml-related {
  margin: 3em 0 1.5em; padding: 1.4em 1.5em;
  border: 1px solid var(--ml-border, #1e2620); border-radius: 6px;
  background: var(--ml-bg-2, #0d100e);
}
.ml-related h2 {
  margin: 0 0 .9em; font-size: .78rem; letter-spacing: 2px; text-transform: uppercase;
  color: var(--ml-accent, #00d6aa); font-family: 'Share Tech Mono', monospace; border: none;
}
.ml-related ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .95em; }
.ml-related li { margin: 0; padding: 0; }
.ml-rel-kind {
  display: block; font-size: .66rem; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--ml-fg-dim, #aec0b7); font-family: 'Share Tech Mono', monospace; margin-bottom: .15em;
}
.ml-related a { font-weight: 600; color: var(--ml-link, #2ee6bd); text-decoration: none; }
.ml-related a:hover { text-decoration: underline; }
.ml-rel-blurb { display: block; font-size: .88rem; color: var(--ml-fg-dim, #aec0b7); margin-top: .1em; }
.ml-rel-pillar a { font-size: 1.05rem; }
@media (min-width: 760px) { .ml-related ul { grid-template-columns: 1fr 1fr; } .ml-rel-pillar { grid-column: 1 / -1; } }
/* ML-SEO-RELATED-CSS-END */

/* ── Answer-first block (AEO/GEO plan Phase B) ─────────────────────────────
   The 40-60 word self-contained answer directly under the h1. Styled as a
   quiet panel rather than a callout: it is the page's opening statement for a
   human reader too, so it should not look like an advertisement or a warning.
   Uses the shared --ml-* tokens so it follows the theme toggle in both
   directions (see feedback_theme_toggle_local_palette). */
.answer-first {
  margin: 1.25rem 0 1.75rem;
  padding: 1rem 1.15rem;
  background: var(--ml-answer-bg);
  border-left: 3px solid var(--ml-accent);
  border-radius: 4px;
}
.answer-first p {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ml-fg);
}
