/* MockFlow docs center, reader stylesheet.
   One hand written file, no framework. Inter for everything, Source Code Pro
   for code, MockFlow blue for links and actions, violet reserved for Mida. */

:root{
  --mfd-paper:#fff; --mfd-ink:#0f172a; --mfd-muted:#475569; --mfd-faint:#64748b; --mfd-ghost:#94a3b8;
  --mfd-line:#e5e9f0; --mfd-line2:#eef1f6; --mfd-surface:#f8fafc; --mfd-surface2:#f1f4f9;
  --mfd-blue:#1c7ce2; --mfd-blue-soft:#eaf3fd; --mfd-blue-line:#cfe3fa;
  /* Text sitting on blue-soft needs a darker blue to clear 4.5:1 at chip size. */
  --mfd-blue-ink:#0f5fb3;
  --mfd-violet:#6d5ce7; --mfd-violet-soft:#f1eefc; --mfd-violet-line:#dcd6f7; --mfd-violet-ink:#5343c9;
  --mfd-green:#16a34a; --mfd-green-soft:#eefbf1; --mfd-green-line:#c7ecd1; --mfd-green-ink:#15803d;
  --mfd-amber:#d97706; --mfd-amber-soft:#fffbeb; --mfd-amber-line:#f6dfb5; --mfd-amber-ink:#b45309;
  --mfd-red:#dc2626;
  /* The working shimmer, the same greys the board application sweeps. */
  --mfd-shim:#9a9a9a; --mfd-shim-hi:#dedede;
  --mfd-code-bg:#0f172a; --mfd-code-ink:#e2e8f0; --mfd-code-bar:#162032; --mfd-code-line:#1f2a3d;
  --mfd-body:"Inter","Inter Fallback",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --mfd-display:var(--mfd-body);
  --mfd-cal:"Cal Sans","Inter","Inter Fallback",system-ui,sans-serif;
  --mfd-dock:0px;
  --mfd-mono:"Source Code Pro",ui-monospace,SFMono-Regular,Menlo,monospace;
  --mfd-shadow:0 12px 32px rgba(15,23,42,.14);
  --mfd-shadow-sm:0 1px 2px rgba(15,23,42,.06);
  --mfd-hdr:60px;
  --mfd-radius:10px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --mfd-paper:#0b1220; --mfd-ink:#e6edf7; --mfd-muted:#a8b3c7; --mfd-faint:#8894ab; --mfd-ghost:#5f6b84;
    --mfd-line:#1f2a3d; --mfd-line2:#182233; --mfd-surface:#111a2b; --mfd-surface2:#16213a;
    --mfd-blue:#5aa3f0; --mfd-blue-soft:#12233a; --mfd-blue-line:#1d3350; --mfd-blue-ink:#8cc2fb;
    --mfd-violet:#a597ff; --mfd-violet-soft:#1d1a38; --mfd-violet-line:#2b2550; --mfd-violet-ink:#b8adff;
    --mfd-green:#4ade80; --mfd-green-soft:#0f2418; --mfd-green-line:#1d3f2a; --mfd-green-ink:#6ee7a0;
    --mfd-amber:#fbbf24; --mfd-amber-soft:#241c05; --mfd-amber-line:#4a3a10; --mfd-amber-ink:#fcd34d;
    --mfd-code-bg:#0d1526; --mfd-code-ink:#d7e0ee; --mfd-code-bar:#111c30; --mfd-code-line:#1f2a3d;
    --mfd-shim:#6b7686; --mfd-shim-hi:#c6d0e0;
    --mfd-shadow:0 12px 32px rgba(0,0,0,.5);
    --mfd-shadow-sm:0 1px 2px rgba(0,0,0,.3);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --mfd-paper:#0b1220; --mfd-ink:#e6edf7; --mfd-muted:#a8b3c7; --mfd-faint:#8894ab; --mfd-ghost:#5f6b84;
  --mfd-line:#1f2a3d; --mfd-line2:#182233; --mfd-surface:#111a2b; --mfd-surface2:#16213a;
  --mfd-blue:#5aa3f0; --mfd-blue-soft:#12233a; --mfd-blue-line:#1d3350; --mfd-blue-ink:#8cc2fb;
  --mfd-violet:#a597ff; --mfd-violet-soft:#1d1a38; --mfd-violet-line:#2b2550; --mfd-violet-ink:#b8adff;
  --mfd-green:#4ade80; --mfd-green-soft:#0f2418; --mfd-green-line:#1d3f2a; --mfd-green-ink:#6ee7a0;
  --mfd-amber:#fbbf24; --mfd-amber-soft:#241c05; --mfd-amber-line:#4a3a10; --mfd-amber-ink:#fcd34d;
  --mfd-code-bg:#0d1526; --mfd-code-ink:#d7e0ee; --mfd-code-bar:#111c30; --mfd-code-line:#1f2a3d;
  --mfd-shim:#6b7686; --mfd-shim-hi:#c6d0e0;
  --mfd-shadow:0 12px 32px rgba(0,0,0,.5);
  --mfd-shadow-sm:0 1px 2px rgba(0,0,0,.3);
  color-scheme:dark;
}

/* Metrics matched stand-in for Inter, used until the web font arrives. The
   overrides are Inter's own, so swapping the real font in moves nothing. */
@font-face{
  font-family:"Inter Fallback";
  src:local("Helvetica Neue"),local("Arial"),local("Liberation Sans");
  size-adjust:107.06%; ascent-override:90.49%; descent-override:22.56%; line-gap-override:0%;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--mfd-hdr) + 20px);-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body.mfd{margin:0;background:var(--mfd-paper);color:var(--mfd-ink);
  font-family:var(--mfd-body);font-size:15px;line-height:1.65;-webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;min-height:100vh;display:flex;flex-direction:column}
body.mfd>.mfd-body3,body.mfd>.mfd-home{flex:1}
body.mfd-ask-open{--mfd-dock:400px}
a{color:var(--mfd-blue-ink);text-decoration:none}
a:hover{text-decoration:underline}
img,video,iframe{max-width:100%}
[hidden]{display:none!important}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--mfd-blue);outline-offset:2px;border-radius:4px}
.mfd-ic{width: 20px;height: 20px;flex: none;display: inline-block;vertical-align: middle;position: relative;top: 1px;}
.mfd-mida{width:20px;height:20px;flex:none;display:inline-block;vertical-align:-5px;border-radius:5px}
.mfd-grow{flex:1}

/* ---- Header ---- */
.mfd-hdr{position:sticky;top:0;z-index:20;background:var(--mfd-paper);border-bottom:1px solid var(--mfd-line)}
.mfd-hdr-in{height:var(--mfd-hdr);display:flex;align-items:center;gap:12px;padding:0 24px;max-width:1440px;margin:0 auto}
.mfd-hamb{display:inline-flex;width:36px;height:36px;border:1px solid var(--mfd-line);border-radius:8px;
  background:var(--mfd-paper);align-items:center;justify-content:center;color:var(--mfd-muted);flex:none}
.mfd-hamb:hover{background:var(--mfd-surface);color:var(--mfd-ink)}
.mfd-logo{display:flex;align-items:center;flex:none}
.mfd-logo:hover{text-decoration:none}
.mfd-logo img{display:block;width:112px;height:auto}
.mfd-hdr-sep{width:1px;height:22px;background:var(--mfd-line);flex:none;margin:0 2px}
/* The wordmark is dark ink on a light ground; invert it for the dark theme. */
:root[data-theme="dark"] .mfd-logo img{filter:invert(1) hue-rotate(180deg)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .mfd-logo img{filter:invert(1) hue-rotate(180deg)}
}

/* Keyboard readers land here first, ahead of the navigation tree. */
.mfd-skip{position:absolute;left:-9999px;top:0;z-index:60;padding:10px 16px;background:var(--mfd-paper);
  border:1px solid var(--mfd-line);border-radius:0 0 8px 0;color:var(--mfd-ink);font-weight:500}
.mfd-skip:focus{left:0}

.mfd-siteswitch{display:flex;gap:2px;align-self:stretch;align-items:stretch}
.mfd-siteswitch a{display:inline-flex;align-items:center;gap:7px;padding:0 10px;font-size:13.5px;font-weight:500;
  color:var(--mfd-muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.mfd-siteswitch a:hover{text-decoration:none;color:var(--mfd-ink)}
.mfd-siteswitch a.mfd-on{color:var(--mfd-ink);border-bottom-color:var(--mfd-blue)}
.mfd-siteswitch a .mfd-ic{color:var(--mfd-faint)}
.mfd-siteswitch a.mfd-on .mfd-ic{color:var(--mfd-blue)}

.mfd-search{display:flex;align-items:center;gap:8px;height:36px;padding:0 8px 0 11px;width:260px;
  border:1px solid var(--mfd-line);border-radius:8px;background:var(--mfd-surface);
  color:var(--mfd-faint);font-size:13px;text-align:left;flex:none}
.mfd-search:hover{border-color:var(--mfd-ghost);color:var(--mfd-muted)}
.mfd-search span{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.mfd-kbd{font-family:var(--mfd-body);font-size:11px;font-weight:500;color:var(--mfd-muted);border:1px solid var(--mfd-line);
  border-bottom-width:2px;border-radius:5px;padding:0 5px;background:var(--mfd-paper);line-height:18px;
  display:inline-flex;align-items:center;gap:1px;white-space:nowrap}
.mfd-content .mfd-kbd{font-size:12px;padding:0 6px;line-height:20px}
.mfd-ibtn{width:36px;height:36px;border:1px solid var(--mfd-line);border-radius:8px;flex:none;
  display:inline-flex;align-items:center;justify-content:center;color:var(--mfd-muted);background:var(--mfd-paper)}
.mfd-ibtn:hover{background:var(--mfd-surface);color:var(--mfd-ink)}
.mfd-ibtn-sm{width:30px;height:30px;border-color:transparent;background:none}
.mfd-theme .mfd-ic-moon{display:none}
:root[data-theme="dark"] .mfd-theme .mfd-ic-sun{display:none}
:root[data-theme="dark"] .mfd-theme .mfd-ic-moon{display:inline-block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .mfd-theme .mfd-ic-sun{display:none}
  :root:not([data-theme="light"]) .mfd-theme .mfd-ic-moon{display:inline-block}
}

.mfd-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:36px;padding:0 14px;
  border-radius:8px;font-size:13.5px;font-weight:500;border:1px solid var(--mfd-line);
  background:var(--mfd-paper);color:var(--mfd-ink);white-space:nowrap}
.mfd-btn:hover{background:var(--mfd-surface);border-color:var(--mfd-ghost);text-decoration:none}
.mfd-btn-sm{height:30px;padding:0 10px;font-size:12.5px;gap:6px}
.mfd-btn-primary{background:var(--mfd-ink);border-color:var(--mfd-ink);color:var(--mfd-paper)}
.mfd-btn-primary:hover{background:var(--mfd-ink);border-color:var(--mfd-ink);opacity:.9}
.mfd-btn-mida{background:var(--mfd-blue);border-color:var(--mfd-blue);color:#fff}
.mfd-btn-mida:hover{background:var(--mfd-blue);border-color:var(--mfd-blue);opacity:.92}
.mfd-linkbtn{border:0;background:none;padding:0;color:var(--mfd-blue-ink);font-weight:500;
  display:inline-flex;align-items:center;gap:6px}
.mfd-linkbtn:hover{text-decoration:underline}
.mfd-openapp,.mfd-login{color:var(--mfd-blue-ink);border-color:var(--mfd-blue-line);background:var(--mfd-blue-soft)}
.mfd-openapp:hover,.mfd-login:hover{background:var(--mfd-blue-soft);border-color:var(--mfd-blue)}
.mfd-login .mfd-ic{width:15px;height:15px}
/* The picture itself comes from userProfileImage.jsp, the same endpoint the
   app and the site header use. The ring and the inset match .mfProfileIconLarge
   there, so the same face looks the same in both places. */
.mfd-avatar{width:32px;height:32px;border-radius:50%;flex:none;display:block;padding:2px;
  border:1px solid var(--mfd-line);background:var(--mfd-surface2);overflow:hidden}
.mfd-avatar img{width:100%;height:100%;display:block;border-radius:50%;object-fit:cover}
.mfd-avatar:hover{text-decoration:none;border-color:var(--mfd-blue-line)}
.mfd-editlink{color:var(--mfd-amber-ink);border-color:var(--mfd-amber-line);background:var(--mfd-amber-soft)}
.mfd-editlink:hover{background:var(--mfd-amber-soft);border-color:var(--mfd-amber)}

/* ---- Menus (language, copy page) ---- */
[data-mfd-dropdown]{position:relative}
.mfd-menu{position:absolute;right:0;top:calc(100% + 6px);min-width:220px;background:var(--mfd-paper);
  border:1px solid var(--mfd-line);border-radius:12px;box-shadow:var(--mfd-shadow);padding:6px;display:grid;gap:1px;z-index:30}
.mfd-menu a,.mfd-menu button{display:flex;align-items:flex-start;gap:10px;padding:8px 10px;border-radius:8px;
  color:var(--mfd-ink);font-size:13px;border:0;background:none;text-align:left;width:100%;font-weight:400}
.mfd-menu a:hover,.mfd-menu button:hover{background:var(--mfd-surface);text-decoration:none}
.mfd-menu .mfd-ic{color:var(--mfd-faint)}
.mfd-menu a.mfd-on{color:var(--mfd-blue-ink);font-weight:500}
.mfd-menu a.mfd-on .mfd-ic{color:var(--mfd-blue)}
.mfd-menu span{display:grid;gap:1px;min-width:0;flex:1}
.mfd-menu b{font-weight:500}
.mfd-menu small{color:var(--mfd-faint);font-size:11.5px}
.mfd-lang-menu{min-width:170px}
.mfd-lang-menu a span{flex:1}

/* ---- Three column body ---- */
.mfd-body3{display:grid;grid-template-columns:272px minmax(0,1fr);align-items:start;max-width:1440px;margin:0 auto;width:100%}
.mfd-body3-solo{grid-template-columns:minmax(0,1fr)}
.mfd-swap{display:grid;grid-template-columns:minmax(0,1fr) 224px;min-width:0}
.mfd-body3-solo .mfd-swap{grid-template-columns:minmax(0,1fr)}
/* The aside stretches the full height of the row so its separator runs to
   the footer; the nav inside it is what sticks and scrolls. */
.mfd-side{align-self:stretch;min-width:0;border-right:1px solid var(--mfd-line);font-size:13.5px}
.mfd-side-in{position:sticky;top:var(--mfd-hdr);max-height:calc(100vh - var(--mfd-hdr));overflow:auto;
  display:grid;gap:2px;align-content:start;padding:28px 16px 48px 24px;
  scrollbar-width:thin;scrollbar-color:var(--mfd-line) transparent}
/* The header button folds the tree away on desktop and remembers it. On a
   phone the same button opens the drawer instead, below. */
@media (min-width:861px){
  body.mfd-side-off .mfd-body3{grid-template-columns:minmax(0,1fr)}
  body.mfd-side-off .mfd-side{display:none}
}
.mfd-grp-wrap{display:grid;gap:0;margin-top:10px}
.mfd-grp-wrap:first-child{margin-top:0}
/* One line per item: a long title ends in an ellipsis instead of wrapping.
   The wrappers need min-width:0 or a grid child sized to its text pushes the
   tree wider than its column. */
.mfd-it{display:block;padding:4px 10px;border-radius:7px;color:var(--mfd-muted);line-height:1.45;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mfd-grp-wrap,.mfd-grp-items,.mfd-subgrp,.mfd-subgrp-items{min-width:0}
.mfd-it:hover{background:var(--mfd-surface);color:var(--mfd-ink);text-decoration:none}
.mfd-grp{font-weight:600;color:var(--mfd-ink);font-size:13.5px}
.mfd-grp-items{display:grid;gap:0;margin-left:10px;padding-left:2px;border-left:1px solid var(--mfd-line)}
/* A section inside a section stays shut until the reader is inside it or opens
   it, which is what stops a list like Components burying everything under it.
   Top level sections are always open. The open class was already being set on
   both sides and nothing here was reading it, so the whole space was listed at
   once and the tree read as a wall of links. */
.mfd-subgrp:not(.mfd-open)>.mfd-subgrp-items{display:none}
.mfd-grp-items>.mfd-subgrp{margin-top:8px}
.mfd-grp-items>.mfd-subgrp:first-child{margin-top:6px}
.mfd-grp-row{display:flex;align-items:center;gap:2px}
.mfd-grp-row>.mfd-it{flex:1;min-width:0}
.mfd-grp-tog{width:24px;height:24px;flex:none;border:0;background:none;border-radius:6px;color:var(--mfd-ghost);
  display:inline-flex;align-items:center;justify-content:center}
.mfd-grp-tog:hover{background:var(--mfd-surface);color:var(--mfd-ink)}
.mfd-grp-tog .mfd-ic{width:14px;height:14px}
.mfd-subgrp.mfd-open>.mfd-grp-row>.mfd-grp-tog .mfd-ic{transform:rotate(90deg)}
.mfd-sub{padding-left:calc(2px + var(--mfd-depth,1) * 12px);font-size:13.5px;position:relative;margin-left:-3px}
.mfd-sub::before{content:"";position:absolute;left:-1px;top:5px;bottom:5px;width:2px;border-radius:2px;background:transparent}
.mfd-sub:hover::before{background:var(--mfd-ghost)}
/* The page you are on is marked by its colour, its weight and the rail beside
   it, with no filled block: a pill behind the row reads as a button, and on a
   tree where one row is always current it is the loudest thing on the page.
   Hover keeps its own grey, so the row still answers the pointer. */
.mfd-it.mfd-on{color:var(--mfd-blue-ink);font-weight:600}
.mfd-sub.mfd-on::before{background:var(--mfd-blue)}
.mfd-grp.mfd-on{color:var(--mfd-blue-ink)}

/* ---- Article ---- */
.mfd-article{padding:36px 56px 72px;min-width:0;max-width:880px}
.mfd-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:4px;font-size:13px;color:var(--mfd-faint);margin-bottom:14px}
.mfd-crumb a{color:var(--mfd-faint)}
.mfd-crumb a:hover{color:var(--mfd-ink);text-decoration:none}
.mfd-crumb b{color:var(--mfd-blue-ink);font-weight:500}
.mfd-crumb-sep{display:inline-flex;color:var(--mfd-ghost)}
.mfd-crumb-sep .mfd-ic{width:14px;height:14px}
.mfd-titlerow{display:flex;align-items:flex-start;gap:16px;margin:0 0 10px}
.mfd-titlerow h1{flex:1;min-width:0}
.mfd-copymenu{flex:none;margin-top:4px}
.mfd-copymenu>.mfd-btn{color:var(--mfd-muted)}
.mfd-copymenu>.mfd-btn .mfd-ic:last-child{width:14px;height:14px;color:var(--mfd-ghost)}
.mfd-copymenu .mfd-menu{min-width:260px}
.mfd-article h1{font-family:var(--mfd-display);font-weight:700;font-size:32px;line-height:1.2;
  margin:0;letter-spacing:-.02em;text-wrap:balance;color:var(--mfd-ink)}
.mfd-lede{font-size:16.5px;color:var(--mfd-muted);max-width:66ch;margin:0 0 14px;line-height:1.55}
.mfd-metaline{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;font-size:12.5px;
  color:var(--mfd-faint);margin:14px 0 26px;padding-bottom:18px;border-bottom:1px solid var(--mfd-line)}
.mfd-meta{display:inline-flex;align-items:center;gap:6px}
.mfd-meta .mfd-ic{width:14px;height:14px;color:var(--mfd-ghost)}
.mfd-content{min-width:0;font-size:15.5px;line-height:1.7}
.mfd-content h2{font-family:var(--mfd-display);font-weight:600;font-size:22px;line-height:1.3;margin:40px 0 12px;
  letter-spacing:-.015em;scroll-margin-top:calc(var(--mfd-hdr) + 20px);position:relative}
.mfd-content h3{font-size:17px;font-weight:600;margin:28px 0 8px;letter-spacing:-.01em;
  scroll-margin-top:calc(var(--mfd-hdr) + 20px);position:relative}
.mfd-content h4{font-size:15px;font-weight:600;margin:20px 0 6px;scroll-margin-top:calc(var(--mfd-hdr) + 20px)}
.mfd-content h2:first-child{margin-top:8px}
/* Heading anchors, added by docs.js. They fade in on hover; nothing moves. */
.mfd-anchor{position:absolute;left:-26px;top:50%;transform:translateY(-50%);width:22px;height:22px;
  display:inline-flex;align-items:center;justify-content:center;color:var(--mfd-ghost);opacity:0;border-radius:5px}
.mfd-anchor .mfd-ic{width:14px;height:14px}
.mfd-content h2:hover .mfd-anchor,.mfd-content h3:hover .mfd-anchor,.mfd-anchor:focus{opacity:1;text-decoration:none}
.mfd-anchor:hover{color:var(--mfd-blue);background:var(--mfd-blue-soft);text-decoration:none}
.mfd-content p{margin:0 0 14px;max-width:70ch}
.mfd-content a{text-decoration:underline;text-decoration-color:var(--mfd-blue-line);text-underline-offset:3px}
.mfd-content a:hover{text-decoration-color:var(--mfd-blue)}
.mfd-content ul,.mfd-content ol{max-width:70ch;padding-left:24px;margin:0 0 16px}
.mfd-content li{margin:5px 0;padding-left:2px}
.mfd-content li::marker{color:var(--mfd-faint)}
.mfd-content li p{margin:0 0 6px}
.mfd-content strong{font-weight:600}
.mfd-content blockquote{margin:16px 0;padding:4px 0 4px 18px;border-left:3px solid var(--mfd-line);
  color:var(--mfd-muted);max-width:70ch;font-style:italic}
.mfd-content hr{border:0;border-top:1px solid var(--mfd-line);margin:32px 0}
.mfd-content code{font-family:var(--mfd-mono);font-size:.86em;background:var(--mfd-surface2);
  border:1px solid var(--mfd-line);padding:1px 5px;border-radius:5px;color:var(--mfd-ink);word-break:break-word}
.mfd-content a code{color:inherit}
.mfd-content img{max-width:100%;height:auto}

/* Code blocks: a strip with the language on the left and a copy button on the
   right, drawn by the stylesheet from data-lang and by docs.js. */
.mfd-content pre{position:relative;background:var(--mfd-code-bg);color:var(--mfd-code-ink);font-family:var(--mfd-mono);
  font-size:13px;line-height:1.65;padding:14px 16px;border-radius:var(--mfd-radius);overflow-x:auto;margin:14px 0 20px;
  max-width:70ch;border:1px solid var(--mfd-code-line);tab-size:2}
.mfd-content pre code{background:none;padding:0;color:inherit;font-size:inherit;border:0;display:block;min-width:max-content}
.mfd-content pre[data-lang],.mfd-content pre.mfd-pre-bar{padding-top:46px}
.mfd-content pre[data-lang]::before{content:attr(data-lang);position:absolute;left:0;top:0;right:0;height:34px;
  display:flex;align-items:center;padding:0 14px;font-family:var(--mfd-body);font-size:11.5px;font-weight:500;
  letter-spacing:.02em;color:#94a3b8;background:var(--mfd-code-bar);border-bottom:1px solid var(--mfd-code-line);
  border-radius:var(--mfd-radius) var(--mfd-radius) 0 0}
.mfd-content pre.mfd-pre-bar:not([data-lang])::before{content:"";position:absolute;left:0;top:0;right:0;height:34px;
  background:var(--mfd-code-bar);border-bottom:1px solid var(--mfd-code-line);border-radius:var(--mfd-radius) var(--mfd-radius) 0 0}
.mfd-codecopy{position:absolute;top:5px;right:8px;height:24px;padding:0 8px;display:inline-flex;align-items:center;gap:5px;
  border:1px solid transparent;border-radius:6px;background:transparent;color:#94a3b8;font-family:var(--mfd-body);
  font-size:11.5px;font-weight:500;z-index:1}
.mfd-codecopy:hover{color:#fff;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12)}
.mfd-codecopy .mfd-ic{width:13px;height:13px}
.mfd-codecopy[data-done="true"]{color:#4ade80}
.mfd-t-k{color:#93c5fd}.mfd-t-s{color:#86efac}.mfd-t-n{color:#fcd34d}.mfd-t-b{color:#c4b5fd}
.mfd-t-c{color:#6b7a90;font-style:italic}.mfd-t-f{color:#fde68a}.mfd-t-a{color:#a5b4fc}
.mfd-t-v{color:#f9a8d4}.mfd-t-w{color:#c4b5fd}

.mfd-steps{counter-reset:mfdstep;list-style:none;padding:0;margin:14px 0 22px;max-width:70ch}
.mfd-steps>li{counter-increment:mfdstep;display:grid;grid-template-columns:28px minmax(0,1fr);
  gap:14px;padding:0 0 18px;position:relative;margin:0}
.mfd-steps>li::before{content:counter(mfdstep);width:26px;height:26px;border-radius:50%;
  background:var(--mfd-surface2);border:1px solid var(--mfd-line);color:var(--mfd-ink);font-size:12px;font-weight:600;
  display:flex;align-items:center;justify-content:center;position:relative;z-index:1;margin-top:1px}
.mfd-steps>li::after{content:"";position:absolute;left:13px;top:30px;bottom:0;width:1px;background:var(--mfd-line)}
.mfd-steps>li:last-child::after{display:none}
.mfd-steps>li>p:last-child{margin-bottom:0}

/* Callouts carry an icon, drawn as a mask so it takes the callout's colour. */
.mfd-callout{position:relative;border:1px solid var(--mfd-blue-line);background:var(--mfd-blue-soft);border-radius:var(--mfd-radius);
  padding:14px 16px 14px 46px;margin:18px 0;max-width:70ch;font-size:14.5px;color:var(--mfd-ink)}
.mfd-callout::before{content:"";position:absolute;left:16px;top:15px;width:18px;height:18px;background:var(--mfd-blue-ink);
  -webkit-mask:var(--mfd-callout-icon) center/contain no-repeat;mask:var(--mfd-callout-icon) center/contain no-repeat;
  --mfd-callout-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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8h.01'/%3E%3C/svg%3E")}
.mfd-callout p{margin:0 0 8px;max-width:none}
.mfd-callout p:last-child,.mfd-callout>*:last-child{margin-bottom:0}
.mfd-callout a{color:var(--mfd-blue-ink)}
.mfd-callout-tip{border-color:var(--mfd-green-line);background:var(--mfd-green-soft)}
.mfd-callout-tip::before{background:var(--mfd-green-ink);
  --mfd-callout-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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-4 10.5c.7.6 1 1.3 1 2.5h6c0-1.2.3-1.9 1-2.5A6 6 0 0 0 12 3z'/%3E%3C/svg%3E")}
.mfd-callout-warning{border-color:var(--mfd-amber-line);background:var(--mfd-amber-soft)}
.mfd-callout-warning::before{background:var(--mfd-amber-ink);
  --mfd-callout-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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 2.5 20h19z'/%3E%3Cpath d='M12 10v4M12 17h.01'/%3E%3C/svg%3E")}
.mfd-callout-plan{border-color:var(--mfd-blue-line);background:var(--mfd-blue-soft)}
.mfd-callout-plan::before{background:var(--mfd-blue-ink);
  --mfd-callout-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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 2.6 5.3 5.9.9-4.3 4.1 1 5.8L12 16.4 6.8 19.1l1-5.8L3.5 9.2l5.9-.9z'/%3E%3C/svg%3E")}
.mfd-mt{margin-top:0;margin-bottom:24px}

.mfd-chip{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:999px;
  font-size:12px;font-weight:500;border:1px solid var(--mfd-line);color:var(--mfd-muted);
  background:var(--mfd-paper);white-space:nowrap;vertical-align:middle}
.mfd-chip .mfd-ic{width:13px;height:13px}
.mfd-chip-plan{color:var(--mfd-blue-ink);background:var(--mfd-blue-soft);border-color:var(--mfd-blue-line)}
.mfd-chip-ai{color:var(--mfd-blue-ink);background:var(--mfd-blue-soft);border-color:var(--mfd-blue-line)}
.mfd-chip-int{color:var(--mfd-amber-ink);background:var(--mfd-amber-soft);border-color:var(--mfd-amber-line)}
.mfd-content .mfd-chip{height:22px;font-size:11.5px}
.mfd-figure{margin:18px 0 22px;max-width:70ch}
.mfd-figure img{border:1px solid var(--mfd-line);border-radius:var(--mfd-radius);height:auto;display:block;background:var(--mfd-surface)}
.mfd-figure figcaption{font-size:13px;color:var(--mfd-faint);margin-top:8px;text-align:center}
.mfd-video{border:1px solid var(--mfd-line);border-radius:var(--mfd-radius);width:100%;max-width:70ch;display:block;
  margin:18px 0 22px;background:#000}
.mfd-embed{border:1px solid var(--mfd-line);border-radius:var(--mfd-radius);overflow:hidden;max-width:70ch;
  aspect-ratio:16/10;margin:18px 0 22px;background:var(--mfd-surface)}
.mfd-embed iframe{width:100%;height:100%;border:0;display:block}
.mfd-tryit{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border-radius:8px;
  background:var(--mfd-blue);color:#fff;font-size:13.5px;font-weight:500;text-decoration:none!important;margin:2px 0}
.mfd-tryit:hover{filter:brightness(1.06)}
.mfd-tryit::after{content:"";width:13px;height:13px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") center/contain no-repeat}
.mfd-tabs{display:grid;gap:0;margin:18px 0 22px;max-width:70ch;border:1px solid var(--mfd-line);
  border-radius:var(--mfd-radius);overflow:hidden;min-width:0}
.mfd-tab{padding:14px 16px;border-top:1px solid var(--mfd-line);min-width:0}
/* A pane that is only a code block sits flush, so a request in three languages reads as one widget. */
.mfd-tab:has(>pre:only-child){padding:0}
.mfd-tab>pre:only-child{margin:0;border:0;border-radius:0;max-width:none}
.mfd-tabstrip+.mfd-tab>pre:only-child{border-radius:0}
.mfd-tab:first-child{border-top:0}
.mfd-tab>*:last-child{margin-bottom:0}
.mfd-tab::before{content:attr(data-label);display:block;font-size:11.5px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;color:var(--mfd-faint);margin-bottom:6px}
/* With script, a strip of buttons replaces the per pane labels. */
.mfd-tabstrip{display:flex;gap:2px;padding:0 6px;border-bottom:1px solid var(--mfd-line);
  background:var(--mfd-surface);overflow-x:auto;scrollbar-width:none}
.mfd-tabstrip button{border:0;background:none;padding:10px 12px;font-size:13px;color:var(--mfd-muted);
  border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;font-weight:500}
.mfd-tabstrip button:hover{color:var(--mfd-ink)}
.mfd-tabstrip button[aria-selected="true"]{color:var(--mfd-blue-ink);border-color:var(--mfd-blue)}
.mfd-tabstrip ~ .mfd-tab::before{display:none}
.mfd-tabstrip ~ .mfd-tab{border-top:0}
.mfd-tablewrap{overflow-x:auto;border:1px solid var(--mfd-line);border-radius:var(--mfd-radius);margin:16px 0 22px;
  max-width:70ch}
.mfd-tablewrap table{border-collapse:collapse;width:100%;font-size:14px}
.mfd-tablewrap th{background:var(--mfd-surface);text-align:left;font-weight:600;padding:10px 14px;
  border-bottom:1px solid var(--mfd-line);white-space:nowrap;font-size:13px}
.mfd-tablewrap td{padding:10px 14px;border-bottom:1px solid var(--mfd-line2);vertical-align:top}
.mfd-tablewrap td p,.mfd-tablewrap th p{margin:0}
.mfd-tablewrap tr:last-child td{border-bottom:0}

/* ---- API reference blocks ----
   The endpoint bar, the method badge and the field lists a generated
   reference page is made of. Same tokens as everything else, so they follow
   the theme; nothing here is a second design system. */
.mfd-endpoint{border:1px solid var(--mfd-line);border-radius:var(--mfd-radius);background:var(--mfd-surface);
  margin:4px 0 22px;max-width:70ch;overflow:hidden}
.mfd-endpoint-row{display:flex;align-items:center;gap:10px;padding:10px 12px;min-width:0}
.mfd-endpoint-p{font-family:var(--mfd-mono);font-size:14.5px;font-weight:600;color:var(--mfd-ink);
  background:none;border:0;padding:0;flex:1;min-width:0;overflow-wrap:anywhere}
.mfd-endpoint-var{color:var(--mfd-blue-ink);background:var(--mfd-blue-soft);border:1px solid var(--mfd-blue-line);border-radius:5px;padding:0 4px;font-weight:600}
.mfd-endpoint-copy{flex:none;width:28px;height:28px;border:1px solid transparent;border-radius:6px;background:none;color:var(--mfd-ghost);
  display:inline-flex;align-items:center;justify-content:center;opacity:0}
.mfd-endpoint-row:hover .mfd-endpoint-copy,.mfd-endpoint-copy:focus-visible{opacity:1}
.mfd-endpoint-copy:hover{color:var(--mfd-ink);background:var(--mfd-paper);border-color:var(--mfd-line)}
.mfd-endpoint-copy[data-done="true"]{color:var(--mfd-green-ink);opacity:1}
.mfd-endpoint-try{flex:none;text-decoration:none!important;height:32px;padding:0 14px;font-size:13px}
.mfd-endpoint-meta{display:flex;flex-wrap:wrap;gap:6px 22px;padding:8px 12px;border-top:1px solid var(--mfd-line);
  font-size:12.5px;color:var(--mfd-faint);background:var(--mfd-paper)}
.mfd-endpoint-meta>span{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
.mfd-endpoint-k{font-weight:600;letter-spacing:.04em;text-transform:uppercase;font-size:11px}
.mfd-endpoint-meta code{font-size:12px;overflow-wrap:anywhere}
.mfd-method{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:6px;flex:none;
  font-family:var(--mfd-mono);font-size:11.5px;font-weight:700;letter-spacing:.04em;
  color:var(--mfd-blue-ink);background:var(--mfd-blue-soft);border:1px solid var(--mfd-blue-line)}
.mfd-m-get{color:var(--mfd-green-ink);background:var(--mfd-green-soft);border-color:var(--mfd-green-line)}
.mfd-m-patch,.mfd-m-put{color:var(--mfd-amber-ink);background:var(--mfd-amber-soft);border-color:var(--mfd-amber-line)}
.mfd-m-delete{color:var(--mfd-red);background:var(--mfd-surface2);border-color:var(--mfd-line)}
.mfd-fields{margin:0 0 8px;max-width:70ch}
.mfd-fields>h2,.mfd-fields>h3{margin-bottom:6px}
.mfd-fields-h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.mfd-fields-h h2{flex:1;min-width:0;margin-bottom:6px}
.mfd-fields-meta{font-family:var(--mfd-mono);font-size:12px;color:var(--mfd-faint);overflow-wrap:anywhere;min-width:0}
.mfd-field-in{font-size:11px;font-weight:500;color:var(--mfd-muted);background:var(--mfd-surface2);border:1px solid var(--mfd-line);
  border-radius:5px;padding:0 6px;line-height:18px}
.mfd-field-link{font-family:var(--mfd-body);font-size:15px;font-weight:600;color:var(--mfd-ink);text-decoration:none!important}
.mfd-field-link:hover{color:var(--mfd-blue-ink)}
.mfd-field-h:has(.mfd-field-link) .mfd-field-t{font-size:12.5px;color:var(--mfd-muted)}
.mfd-field-kids{margin:10px 0 2px}
.mfd-field-kids>summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;list-style:none;font-size:12.5px;font-weight:500;
  color:var(--mfd-muted);border:1px solid var(--mfd-line);border-radius:999px;padding:3px 10px 3px 8px;background:var(--mfd-paper);user-select:none}
.mfd-field-kids>summary::-webkit-details-marker{display:none}
.mfd-field-kids>summary::before{content:"";width:12px;height:12px;background:currentColor;flex:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat}
.mfd-field-kids[open]>summary::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E")}
.mfd-field-kids>summary:hover{border-color:var(--mfd-blue-line);color:var(--mfd-blue-ink)}
.mfd-field-kids-in{margin:8px 0 0 12px;padding-left:14px;border-left:2px solid var(--mfd-line2)}
.mfd-field-kids-in .mfd-field{padding:10px 0}
.mfd-field-kids-in .mfd-field:first-child{border-top:0;padding-top:4px}
.mfd-field-kids-in .mfd-field:last-child{border-bottom:0}
.mfd-field{padding:12px 0;border-top:1px solid var(--mfd-line2)}
.mfd-fields>.mfd-field:first-of-type{border-top:0}
.mfd-fields>.mfd-field:last-child{border-bottom:1px solid var(--mfd-line2)}
.mfd-field-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;min-width:0}
.mfd-field-n{font-size:13.5px;font-weight:600;color:var(--mfd-ink);background:none;border:0;padding:0;overflow-wrap:anywhere}
.mfd-field-t{font-family:var(--mfd-mono);font-size:12px;color:var(--mfd-faint)}
.mfd-field-req{font-size:11.5px;font-weight:600;color:var(--mfd-amber-ink)}
.mfd-field-note{font-size:11.5px;font-weight:500;color:var(--mfd-muted);border:1px solid var(--mfd-line);
  border-radius:999px;padding:0 7px;line-height:18px}
.mfd-field-code{font-family:var(--mfd-mono);font-size:12px;font-weight:700;color:var(--mfd-ink);
  background:var(--mfd-surface2);border:1px solid var(--mfd-line);border-radius:6px;padding:1px 7px;align-self:center}
.mfd-field-b{margin-top:4px;font-size:14.5px;color:var(--mfd-muted)}
.mfd-field-b p{margin:0 0 6px}
.mfd-field-b>*:last-child{margin-bottom:0}
.mfd-field-b .mfd-callout{margin:10px 0 4px;font-size:13.5px}

/* ---- Reference page layout: fields on the left, the code panel pinned on the right ----
   Driven by the presence of the panel, so a page the generator wrote gets the
   layout and a hand written page never does, and the router can swap between
   the two without touching the shell. */
.mfd-swap:has(.mfd-apirail){grid-template-columns:minmax(0,1fr)}
.mfd-swap:has(.mfd-apirail) .mfd-toc{display:none}
.mfd-article:has(.mfd-apirail){max-width:1240px}
/* The fields keep a readable 420px and the code rail gives up width first, so
   the band just before the two stack does not squeeze the prose to a ribbon. */
.mfd-content:has(>.mfd-apirail){display:grid;grid-template-columns:minmax(420px,1fr) minmax(0,420px);column-gap:40px;align-items:start}
.mfd-content:has(>.mfd-apirail)>*{grid-column:1;min-width:0}
.mfd-content:has(>.mfd-apirail)>.mfd-apirail{grid-column:2;grid-row:1 / span 400;position:sticky;top:calc(var(--mfd-hdr) + 20px);
  max-height:calc(100vh - var(--mfd-hdr) - 40px);overflow:auto;scrollbar-width:thin;scrollbar-color:var(--mfd-line) transparent}
.mfd-apirail{display:grid;gap:14px;align-content:start;margin:0 0 22px}
.mfd-apirail .mfd-tabs{margin:0;max-width:none;background:var(--mfd-code-bg);border-color:var(--mfd-code-line)}
.mfd-apirail .mfd-tabs-t{font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mfd-faint);margin:0 0 -8px 2px}
.mfd-apirail .mfd-tabstrip{background:var(--mfd-code-bar);border-color:var(--mfd-code-line);padding:0 6px}
.mfd-apirail .mfd-tabstrip button{color:#94a3b8}
.mfd-apirail .mfd-tabstrip button:hover{color:#fff}
.mfd-apirail .mfd-tabstrip button[aria-selected="true"]{color:#fff;border-color:var(--mfd-blue)}
.mfd-apirail .mfd-tab{background:var(--mfd-code-bg);color:var(--mfd-code-ink);border-color:var(--mfd-code-line)}
.mfd-apirail .mfd-tab>p{color:var(--mfd-code-ink);margin:0;font-size:13.5px}
.mfd-apirail pre{max-height:420px;font-size:12.5px}
/* A pane that is only a code block, with a strip above it, needs no second language strip. */
.mfd-apirail .mfd-tabstrip ~ .mfd-tab>pre[data-lang]{padding-top:14px}
.mfd-apirail .mfd-tabstrip ~ .mfd-tab>pre[data-lang]::before{display:none}
.mfd-apirail .mfd-tabstrip ~ .mfd-tab>pre .mfd-codecopy{top:-30px;right:6px}
.mfd-tabs-t{font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mfd-faint);margin:18px 0 6px}
.mfd-tabs-t+.mfd-tabs{margin-top:0}

/* Navigation: a category inside a group is the label of the section under it. */
.mfd-sub-cat{font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--mfd-ink);
  padding-top:4px;padding-bottom:4px}
.mfd-sub-cat::before{display:none}
.mfd-sub-cat:hover{background:none;color:var(--mfd-blue-ink)}
.mfd-sub-cat.mfd-on{background:none;color:var(--mfd-blue-ink)}

/* Navigation: a reference page shows its method before its title. */
.mfd-sub-op{display:flex;align-items:baseline;gap:8px}
.mfd-sub-op>span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis}
.mfd-nav-m{flex:none;font-family:var(--mfd-mono);font-size:9.5px;font-weight:700;letter-spacing:.04em;line-height:16px;
  padding:0 5px;border-radius:4px;color:var(--mfd-blue-ink);background:var(--mfd-blue-soft);border:1px solid var(--mfd-blue-line);min-width:38px;text-align:center}
.mfd-nav-m.mfd-m-get{color:var(--mfd-green-ink);background:var(--mfd-green-soft);border-color:var(--mfd-green-line)}
.mfd-nav-m.mfd-m-patch,.mfd-nav-m.mfd-m-put{color:var(--mfd-amber-ink);background:var(--mfd-amber-soft);border-color:var(--mfd-amber-line)}
.mfd-nav-m.mfd-m-delete{color:var(--mfd-red);background:var(--mfd-surface2);border-color:var(--mfd-line)}

/* Header: the developer space carries its console. */
.mfd-hdr .mfd-console{color:var(--mfd-ink)}
.mfd-hdr .mfd-console .mfd-ic{width:15px;height:15px;color:var(--mfd-blue)}
.mfd-hero-acts{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:20px 0 0}
.mfd-hero-acts .mfd-btn{height:40px;padding:0 18px;font-size:14px}

/* Try it opens the console for this operation in a dialog over the page. */
.mfd-trydlg{width:min(1240px,calc(100vw - 32px));height:min(900px,calc(100vh - 32px));padding:0;border:1px solid var(--mfd-line);
  border-radius:16px;background:var(--mfd-paper);box-shadow:var(--mfd-shadow);overflow:hidden}
.mfd-trydlg::backdrop{background:rgba(15,23,42,.55);backdrop-filter:blur(3px)}
.mfd-trydlg-h{display:flex;align-items:center;gap:10px;height:46px;padding:0 8px 0 16px;border-bottom:1px solid var(--mfd-line);
  font-size:13.5px;font-weight:500;color:var(--mfd-ink)}
.mfd-trydlg-h .mfd-grow{flex:1}
.mfd-trydlg-h a{color:var(--mfd-faint);font-weight:400;font-size:12.5px}
.mfd-trydlg iframe{width:100%;height:calc(100% - 46px);border:0;display:block;background:var(--mfd-paper)}

/* Children of a category page, generated from the tree */
.mfd-children{display:grid;gap:10px;margin:8px 0 8px;max-width:70ch}
.mfd-child{border:1px solid var(--mfd-line);border-radius:var(--mfd-radius);padding:14px 16px;display:flex;gap:14px;
  align-items:center;color:var(--mfd-ink);background:var(--mfd-paper)}
.mfd-child:hover{border-color:var(--mfd-blue-line);background:var(--mfd-surface);text-decoration:none;box-shadow:var(--mfd-shadow-sm)}
.mfd-child-ic{width:36px;height:36px;border-radius:9px;background:var(--mfd-blue-soft);color:var(--mfd-blue-ink);
  display:flex;align-items:center;justify-content:center;flex:none}
.mfd-child-ic .mfd-ic{width:18px;height:18px}
.mfd-child-tx{display:grid;gap:2px;flex:1;min-width:0}
.mfd-child b{font-weight:600}
.mfd-child span span{color:var(--mfd-muted);font-size:13.5px}
.mfd-child>.mfd-ic{color:var(--mfd-ghost)}
.mfd-child:hover>.mfd-ic{color:var(--mfd-blue)}

/* Shortcut sheets: one platform at a time */
.mfd-keyswitch{display:inline-flex;gap:2px;background:var(--mfd-surface2);padding:3px;border-radius:8px;
  margin-bottom:16px}
.mfd-keyswitch button{border:0;background:none;padding:5px 12px;border-radius:6px;font-size:13px;
  color:var(--mfd-muted)}
.mfd-keyswitch button[aria-pressed="true"]{background:var(--mfd-paper);color:var(--mfd-ink);font-weight:500;box-shadow:var(--mfd-shadow-sm)}

/* Image lightbox */
.mfd-figure img{cursor:zoom-in}
.mfd-lightbox{position:fixed;inset:0;z-index:50;background:rgba(15,23,42,.86);display:flex;
  align-items:center;justify-content:center;padding:32px;backdrop-filter:blur(4px)}
.mfd-lightbox img{max-width:100%;max-height:100%;border-radius:8px;background:var(--mfd-paper);object-fit:contain}
.mfd-lightbox-close{position:absolute;top:16px;right:16px;border:1px solid rgba(255,255,255,.3);
  background:rgba(15,23,42,.6);color:#fff;border-radius:8px;padding:7px 14px;font-size:13px}
.mfd-lightbox-close:hover{background:rgba(15,23,42,.9)}

/* Internal content dashboard on a space home */
.mfd-dash{margin:8px 0 40px;border:1px solid var(--mfd-amber-line);background:var(--mfd-amber-soft);border-radius:14px;overflow:hidden}
.mfd-dash-hd{display:flex;align-items:center;gap:10px;padding:12px 18px;border-bottom:1px solid var(--mfd-amber-line);
  color:var(--mfd-amber-ink);font-size:13.5px}
.mfd-dash-hd b{color:var(--mfd-ink);font-weight:600}
.mfd-dash-grid{display:grid;grid-template-columns:200px minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:20px;padding:18px}
.mfd-dash-nums{display:grid;gap:10px;align-content:start}
.mfd-dash-card{display:grid;gap:1px}
.mfd-dash-card b{font-family:var(--mfd-display);font-weight:700;font-size:24px;color:var(--mfd-ink);letter-spacing:-.02em;line-height:1.1}
.mfd-dash-card small{color:var(--mfd-muted);font-size:11.5px}
.mfd-dash-col{display:grid;gap:5px;align-content:start;font-size:13px;min-width:0}
.mfd-dash-col a{color:var(--mfd-ink)}
.mfd-dash-col a span,.mfd-dash-miss span{color:var(--mfd-muted);font-size:12px}
.mfd-dash-empty{color:var(--mfd-muted);font-size:12.5px;margin:0}
.mfd-dash-miss{color:var(--mfd-ink)}
@media (max-width:1000px){.mfd-dash-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.mfd-dash-grid{grid-template-columns:minmax(0,1fr)}}

/* ---- Article footer ---- */
.mfd-helpful{border:1px solid var(--mfd-line);border-radius:var(--mfd-radius);padding:14px 18px;display:flex;
  align-items:center;gap:12px;margin-top:44px;max-width:70ch;flex-wrap:wrap;background:var(--mfd-surface)}
.mfd-helpful .mfd-grow{font-weight:500;flex:1;min-width:140px}
.mfd-votes{display:inline-flex;gap:8px}
.mfd-votes .mfd-ic{color:var(--mfd-faint)}
.mfd-thanks{color:var(--mfd-green-ink);font-weight:500}
.mfd-comment{display:grid;gap:8px;width:100%;justify-items:start}
.mfd-comment textarea{width:100%;min-height:76px;border:1px solid var(--mfd-line);border-radius:8px;
  padding:10px 12px;font:inherit;font-size:13.5px;background:var(--mfd-paper);color:var(--mfd-ink);resize:vertical}
.mfd-comment textarea:focus{outline:2px solid var(--mfd-blue);outline-offset:1px;border-color:var(--mfd-blue)}
.mfd-comment-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.mfd-prevnext{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px;max-width:70ch}
.mfd-prevnext a{border:1px solid var(--mfd-line);border-radius:var(--mfd-radius);padding:12px 16px;color:var(--mfd-ink);
  display:grid;gap:3px}
.mfd-prevnext a:hover{border-color:var(--mfd-blue-line);background:var(--mfd-surface);text-decoration:none}
.mfd-prevnext small{display:inline-flex;align-items:center;gap:3px;color:var(--mfd-faint);font-size:12px}
.mfd-prevnext small .mfd-ic{width:14px;height:14px}
.mfd-prevnext b{font-weight:500}
.mfd-prevnext .mfd-r{text-align:right;justify-items:end}
.mfd-prevnext a:hover b{color:var(--mfd-blue-ink)}
.mfd-related{margin-top:32px;max-width:70ch}
.mfd-related-list{display:grid;gap:2px}
.mfd-related-list a{display:flex;align-items:center;gap:8px;padding:6px 8px;margin:0 -8px;border-radius:7px;color:var(--mfd-ink);font-size:14px}
.mfd-related-list a:hover{background:var(--mfd-surface);text-decoration:none;color:var(--mfd-blue-ink)}
.mfd-related-list .mfd-ic{color:var(--mfd-faint)}
.mfd-lbl{font-size:11.5px;font-weight:600;color:var(--mfd-faint);letter-spacing:.06em;
  text-transform:uppercase;margin-bottom:8px}

/* Contact support form */
.mfd-contact{display:grid;gap:4px;max-width:60ch;margin:16px 0 8px}
.mfd-contact .mfd-lbl{margin-top:14px;text-transform:none;letter-spacing:0;font-size:13px;color:var(--mfd-ink)}
.mfd-contact .mfd-lbl:first-child{margin-top:0}
.mfd-input{width:100%;border:1px solid var(--mfd-line);border-radius:8px;padding:10px 12px;font:inherit;
  font-size:14px;background:var(--mfd-paper);color:var(--mfd-ink)}
.mfd-input:focus{outline:2px solid var(--mfd-blue);outline-offset:1px;border-color:var(--mfd-blue)}
.mfd-input::placeholder{color:var(--mfd-ghost)}
textarea.mfd-input{resize:vertical;min-height:130px}
.mfd-contact-foot{display:flex;align-items:center;gap:14px;margin-top:18px;font-size:13px;
  color:var(--mfd-muted)}
.mfd-btn-send{background:var(--mfd-ink);color:var(--mfd-paper);border-color:var(--mfd-ink)}
.mfd-btn-send:hover{background:var(--mfd-ink);border-color:var(--mfd-ink);opacity:.9}
.mfd-btn-send[disabled]{opacity:.6;cursor:default}
.mfd-contact-ways{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin:8px 0 12px;max-width:70ch}
.mfd-contact-way{border:1px solid var(--mfd-line);border-radius:var(--mfd-radius);padding:14px 16px;display:grid;gap:4px;color:var(--mfd-ink);
  background:var(--mfd-paper);font:inherit;text-align:left;text-decoration:none!important;cursor:pointer}
.mfd-contact-way:hover{border-color:var(--mfd-blue-line);background:var(--mfd-surface)}
.mfd-contact-way b{display:flex;align-items:center;gap:8px;font-weight:600}
.mfd-contact-way b .mfd-ic{color:var(--mfd-blue)}
.mfd-contact-way span{color:var(--mfd-muted);font-size:13px}

/* ---- On this page ---- */
.mfd-toc{position:sticky;top:var(--mfd-hdr);max-height:calc(100vh - var(--mfd-hdr));overflow:auto;
  padding:40px 24px 40px 8px;font-size:13px;scrollbar-width:thin;scrollbar-color:var(--mfd-line) transparent}
.mfd-toc-toggle{display:none}
.mfd-toc .mfd-lbl{margin-bottom:10px;font-size:11px}
.mfd-toc-links{display:grid;gap:1px}
.mfd-toc-links a{display:block;color:var(--mfd-muted);padding:4px 0 4px 12px;
  border-left:1px solid var(--mfd-line);line-height:1.4;margin-left:0;position:relative}
.mfd-toc-links a::before{content:"";position:absolute;left:-1px;top:4px;bottom:4px;width:2px;border-radius:2px;background:transparent}
.mfd-toc-links a:hover{color:var(--mfd-ink);text-decoration:none}
.mfd-toc-links a.mfd-on{color:var(--mfd-blue-ink);font-weight:500}
.mfd-toc-links a.mfd-on::before{background:var(--mfd-blue)}
.mfd-toc-links .mfd-l3{padding-left:24px}
.mfd-toc-links .mfd-l4{padding-left:36px}

/* ---- Sign in dialog ---- */
.mfd-logindlg{border:0;padding:0;background:none;max-width:none;max-height:none}
.mfd-logindlg::backdrop{background:rgba(15,23,42,.5);backdrop-filter:blur(2px)}
.mfd-logindlg form{position:relative;width:min(400px,calc(100vw - 32px));display:grid;gap:0;
  padding:28px 28px 24px;border-radius:14px;border:1px solid var(--mfd-line);background:var(--mfd-paper);
  box-shadow:var(--mfd-shadow);color:var(--mfd-ink)}
.mfd-logindlg h2{margin:0;font-size:21px;font-weight:700;letter-spacing:-.015em}
.mfd-logindlg-lede{margin:4px 0 18px;color:var(--mfd-muted);font-size:13.5px}
.mfd-logindlg-err{margin:0 0 14px;padding:9px 12px;border-radius:8px;font-size:13px;
  background:#fdeeee;border:1px solid #f5c6c6;color:#b42318}
.mfd-logindlg .mfd-lbl{margin:0 0 5px}
.mfd-logindlg .mfd-input{width:100%;margin:0 0 14px}
.mfd-logindlg-go{width:100%;justify-content:center;height:38px;margin-top:2px}
.mfd-logindlg-forgot{margin:12px auto 0;font-size:12.5px;color:var(--mfd-faint)}
.mfd-logindlg-or{display:flex;align-items:center;gap:12px;margin:18px 0 14px;color:var(--mfd-ghost);font-size:12px}
.mfd-logindlg-or::before,.mfd-logindlg-or::after{content:"";height:1px;flex:1;background:var(--mfd-line)}
.mfd-logindlg-sso{width:100%;justify-content:center;height:38px;margin-bottom:8px;color:var(--mfd-ink)}
.mfd-logindlg-signup{margin:16px 0 0;text-align:center;font-size:13px;color:var(--mfd-muted)}
.mfd-logindlg-x{position:absolute;top:10px;right:10px;z-index:1}
/* Signing in leaves the page, so the control that was clicked says so and the
   rest of the dialog stops taking clicks until the next page arrives. */
.mfd-logindlg .mfd-spin{width:14px;height:14px;border-radius:50%;flex:none;border:2px solid currentColor;
  border-top-color:transparent;animation:mfd-spin .7s linear infinite}
.mfd-logindlg-go[disabled]{opacity:1;cursor:default}
.mfd-logindlg [aria-disabled="true"]{opacity:.5;pointer-events:none}
@keyframes mfd-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.mfd-logindlg .mfd-spin{animation:none;border-top-color:currentColor;opacity:.6}}
:root[data-theme="dark"] .mfd-logindlg-err{background:#2a1214;border-color:#5b2326;color:#fca5a5}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .mfd-logindlg-err{background:#2a1214;border-color:#5b2326;color:#fca5a5}
}

/* ---- Draft preview, mounted by docs.js on a ?preview= address ---- */
/* The frame is drawn over the page and takes no clicks, so nothing below it
   moves or changes behaviour. */
body.mfd-previewing::after{content:"";position:fixed;inset:0;z-index:60;pointer-events:none;
  border:3px solid var(--mfd-amber)}
.mfd-previewbar{position:fixed;left:24px;bottom:24px;z-index:61;display:flex;align-items:center;gap:8px 12px;
  flex-wrap:wrap;max-width:min(560px,calc(100vw - 48px));padding:10px 14px;border-radius:var(--mfd-radius);
  border:1px solid var(--mfd-amber-line);background:var(--mfd-amber-soft);box-shadow:var(--mfd-shadow);
  font-size:13px;color:var(--mfd-muted)}
.mfd-previewbar b{color:var(--mfd-amber-ink);font-weight:600;display:inline-flex;align-items:center;gap:6px}
.mfd-previewbar .mfd-btn{height:28px;font-size:12.5px;color:var(--mfd-ink)}
@media (max-width:860px){
  .mfd-previewbar{left:12px;right:12px;bottom:12px;max-width:none}
}

/* ---- Internal toolbar, mounted by docs.js for a company session ---- */
.mfd-internal{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 22px;padding:10px 14px;
  border:1px solid var(--mfd-amber-line);background:var(--mfd-amber-soft);border-radius:var(--mfd-radius);
  font-size:13px;color:var(--mfd-muted)}
.mfd-internal b{color:var(--mfd-amber-ink);font-weight:600;display:inline-flex;align-items:center;gap:6px}
.mfd-internal .mfd-btn{height:28px;font-size:12.5px;color:var(--mfd-ink)}
.mfd-internal .mfd-sep{width:1px;height:16px;background:var(--mfd-amber-line)}
.mfd-handoff{display:inline-flex;align-items:center;gap:6px;color:var(--mfd-blue-ink);font-size:13px}
.mfd-handoff .mfd-ic{width:15px;height:15px}

.mfd-note{width:100%;border:1px dashed var(--mfd-amber-line);border-radius:8px;padding:10px 12px;
  background:var(--mfd-paper);color:var(--mfd-ink);font-size:13px}
.mfd-note b{display:block;margin-bottom:2px}

/* ---- Home ---- */
.mfd-home{min-width:0}
.mfd-wrap{max-width:1160px;margin:0 auto;padding:0 32px}
.mfd-hero{padding:64px 24px 44px;text-align:center;
  background:radial-gradient(60% 80% at 50% 0%,var(--mfd-blue-soft) 0%,transparent 70%),var(--mfd-paper);
  border-bottom:1px solid var(--mfd-line2)}
.mfd-hero-in{max-width:720px;margin:0 auto}
.mfd-hero h1{font-family:var(--mfd-display);font-weight:700;font-size:40px;margin:0 0 10px;
  letter-spacing:-.025em;text-wrap:balance;line-height:1.15}
.mfd-hero .mfd-lede{margin:0 auto 24px;font-size:17px}
.mfd-search-hero{width:min(600px,100%);height:52px;margin:0 auto;font-size:15px;padding:0 12px 0 16px;border-radius:12px;
  background:var(--mfd-paper);box-shadow:0 8px 28px rgba(15,23,42,.10);border-color:var(--mfd-line);color:var(--mfd-faint)}
.mfd-search-hero:hover{border-color:var(--mfd-blue-line);box-shadow:0 8px 28px rgba(28,124,226,.14)}
.mfd-search-hero .mfd-ic{width:18px;height:18px;color:var(--mfd-faint)}
/* The sentence and the button are one centred row. The button is an
   inline-flex, so its baseline is the bottom of its icon rather than its
   text, which left it riding above the line it sits on. Centring the row
   takes baselines out of it. */
.mfd-hero-ask{margin:16px 0 0;font-size:13.5px;color:var(--mfd-faint);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px}
.mfd-hero-ask .mfd-mida{width:16px;height:16px;vertical-align:baseline}
.mfd-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;padding:40px 0 16px}
/* Whatever the home page itself says, under the section cards. */
.mfd-homebody{max-width:760px;margin:0 auto;padding:16px 0 32px}
.mfd-card{border:1px solid var(--mfd-line);border-radius:14px;padding:20px;background:var(--mfd-paper);display:flex;flex-direction:column;min-width:0;position:relative}
.mfd-card:hover{border-color:var(--mfd-blue-line);box-shadow:0 4px 16px rgba(15,23,42,.06)}
/* The whole card opens the section: the title link stretches over the card, and
   the article links inside sit above that layer so they still go where they say. */
.mfd-card-t[href]::after{content:"";position:absolute;inset:0;border-radius:14px}
.mfd-card-links a,.mfd-card .mfd-btn,.mfd-card button{position:relative;z-index:1}
.mfd-card:has(.mfd-card-t[href]:hover) .mfd-card-t{color:var(--mfd-blue-ink)}
.mfd-card-t{font-weight:600;font-size:15.5px;margin-bottom:6px;display:flex;align-items:flex-start;gap:10px;color:var(--mfd-ink)}
/* A card with nothing written under it is one line against a 36px mark, and
   top aligning left the name floating above the mark's middle. Centre it, and
   drop the gap that was holding a summary that is not there. */
.mfd-card:not(:has(>p))>.mfd-card-t{align-items:center;margin-bottom:0}
.mfd-card-t:hover{text-decoration:none;color:var(--mfd-blue-ink)}
.mfd-card-ic{width:36px;height:36px;border-radius:10px;background:var(--mfd-blue-soft);color:var(--mfd-blue-ink);
  display:inline-flex;align-items:center;justify-content:center;flex:none}
.mfd-card-ic .mfd-ic{width:18px;height:18px}
.mfd-card p{font-size:13.5px;color:var(--mfd-muted);margin:0 0 4px;line-height:1.55}
.mfd-card-links{margin-top:12px;padding-top:12px;border-top:1px solid var(--mfd-line2);display:grid;gap:2px;font-size:13.5px}
.mfd-card-links a{display:flex;align-items:center;gap:4px;padding:5px 8px;margin:0 -8px;border-radius:7px;color:var(--mfd-muted);width: 100%;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
.mfd-card-links a:hover{background:var(--mfd-surface);color:var(--mfd-blue-ink);text-decoration:none}
.mfd-card-links a .mfd-ic{width: 18px;height: 18px;color: var(--mfd-ghost);top: -1px;}
.mfd-card-links a span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mfd-card-more{color:var(--mfd-blue-ink)!important;font-weight:500;margin-top:4px!important}
.mfd-card-more .mfd-ic{color:var(--mfd-blue)!important}
.mfd-empty{display:grid;justify-items:center;gap:10px;padding:64px 24px;color:var(--mfd-faint);text-align:center}
.mfd-empty .mfd-ic{width:32px;height:32px;color:var(--mfd-ghost)}
.mfd-empty p{margin:0}
/* The last thing on the home page: a way to reach a person. */
.mfd-helprow{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin:24px 0 56px;padding:18px 22px;
  border:1px solid var(--mfd-line);border-radius:var(--mfd-radius);background:var(--mfd-surface)}
.mfd-helprow div{display:grid;gap:2px;flex:1;min-width:220px}
.mfd-helprow b{font-weight:600;color:var(--mfd-ink)}
.mfd-helprow span{color:var(--mfd-muted);font-size:14px}
.mfd-helprow .mfd-btn{background:var(--mfd-paper);flex:none}
/* The developer home sits inside the shell. The tree stays on the left, so
   the hero reads as the top of a page and lines up with an article, not as a
   centred landing. The right column is empty here, so the content takes it. */
.mfd-swap-home{grid-template-columns:minmax(0,1fr)}
.mfd-home-shell .mfd-hero{text-align:left;padding:40px 56px 28px;background:none}
.mfd-home-shell .mfd-hero-in{max-width:none;margin:0}
.mfd-home-shell .mfd-hero h1{font-size:32px}
.mfd-home-shell .mfd-hero .mfd-lede{margin-left:0;max-width:64ch}
.mfd-home-shell .mfd-search-hero{margin:0;width:min(560px,100%);box-shadow:none}
.mfd-home-shell .mfd-search-hero:hover{box-shadow:none}
.mfd-home-shell .mfd-hero-ask,.mfd-home-shell .mfd-hero-acts{justify-content:flex-start}
.mfd-home-shell .mfd-wrap{max-width:none;padding:0 56px}
.mfd-home-shell .mfd-tiles{padding:32px 0 16px}
.mfd-home-shell .mfd-homebody{margin:0}
.mfd-news{display:grid}
.mfd-news-row{display:flex;gap:14px;align-items:center;border-bottom:1px solid var(--mfd-line2);
  padding:11px 0;color:var(--mfd-ink)}
.mfd-news-row:hover{text-decoration:none;color:var(--mfd-blue-ink)}
.mfd-news-row b{font-weight:500;flex:1;min-width:0}
.mfd-news-row .mfd-ic{color:var(--mfd-ghost)}
.mfd-tag{font-family:var(--mfd-mono);font-size:11px;padding:2px 7px;border-radius:5px;
  background:var(--mfd-surface2);color:var(--mfd-muted);flex:none;white-space:nowrap}

/* ---- Changelog ---- */
.mfd-bell{position:relative;color:var(--mfd-muted)}
.mfd-bell:hover{text-decoration:none}
.mfd-bell-dot{position:absolute;top:7px;right:7px;width:8px;height:8px;border-radius:50%;background:var(--mfd-red);
  box-shadow:0 0 0 2px var(--mfd-paper)}
.mfd-side-changelog .mfd-grp .mfd-ic{width:14px;height:14px;margin-right:6px;vertical-align:-2px}
.mfd-side-changelog .mfd-month{font-size:11.5px;font-weight:600;color:var(--mfd-faint);letter-spacing:.06em;text-transform:uppercase}
.mfd-side-changelog .mfd-grp-items{min-width:0}
.mfd-side-changelog .mfd-sub{display:flex;gap:8px;align-items:baseline;padding-left:12px;min-width:0}
.mfd-side-changelog .mfd-sub>span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis}
.mfd-side-date{font-family:var(--mfd-mono);font-size:11px;color:var(--mfd-faint);flex:none;min-width:16px}
.mfd-sub.mfd-on .mfd-side-date{color:var(--mfd-blue-ink)}
.mfd-rss{color:var(--mfd-muted)}
.mfd-rss:hover{color:var(--mfd-blue-ink);text-decoration:none}
.mfd-chip-tag{text-transform:capitalize}
.mfd-chip-tag-added{color:var(--mfd-green-ink);background:var(--mfd-green-soft);border-color:var(--mfd-green-line)}
.mfd-chip-tag-changed,.mfd-chip-tag-improved{color:var(--mfd-blue-ink);background:var(--mfd-blue-soft);border-color:var(--mfd-blue-line)}
.mfd-chip-tag-fixed{color:var(--mfd-violet-ink);background:var(--mfd-violet-soft);border-color:var(--mfd-violet-line)}
.mfd-chip-tag-deprecated{color:var(--mfd-amber-ink);background:var(--mfd-amber-soft);border-color:var(--mfd-amber-line)}
.mfd-chip-tag-removed{color:var(--mfd-red);background:var(--mfd-surface2);border-color:var(--mfd-line)}
.mfd-chip-api{font-family:var(--mfd-mono);text-transform:none;font-size:11.5px}
.mfd-changelog{display:grid;gap:0;margin-top:8px}
.mfd-change{display:grid;grid-template-columns:132px minmax(0,1fr);gap:24px;padding:28px 0;border-top:1px solid var(--mfd-line2)}
.mfd-change:first-child{border-top:0;padding-top:12px}
.mfd-change-when{font-size:13px;color:var(--mfd-faint);padding-top:4px;position:sticky;top:calc(var(--mfd-hdr) + 20px);align-self:start}
.mfd-change-when time{font-weight:500;color:var(--mfd-muted)}
.mfd-change-body{min-width:0}
.mfd-change-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.mfd-change-t{font-size:20px;line-height:1.3;margin:0 0 6px;font-weight:600;letter-spacing:-.01em}
.mfd-change-t a{color:var(--mfd-ink)}
.mfd-change-t a:hover{color:var(--mfd-blue-ink);text-decoration:none}
.mfd-change-lede{margin:0 0 10px;color:var(--mfd-muted);font-size:15px}
.mfd-change-content{margin-top:6px}
.mfd-change-content>:first-child{margin-top:0}
.mfd-change-content img{border-radius:var(--mfd-radius)}
.mfd-change-link{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:13px;color:var(--mfd-faint)}
.mfd-change-link:hover{color:var(--mfd-blue-ink);text-decoration:none}
.mfd-change-older{margin-top:24px;padding-top:24px;border-top:1px solid var(--mfd-line)}
@media (max-width:720px){
  .mfd-change{grid-template-columns:1fr;gap:6px;padding:22px 0}
  .mfd-change-when{position:static}
}

/* ---- 404 ---- */
.mfd-404{text-align:center;max-width:none;padding-top:72px}
.mfd-404 .mfd-lede{margin-left:auto;margin-right:auto}
.mfd-404-code{font-family:var(--mfd-mono);font-size:13px;letter-spacing:.2em;color:var(--mfd-faint);margin-bottom:10px}
.mfd-404-acts{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:22px}

/* ---- Footer ---- */
.mfd-ftr{border-top:1px solid var(--mfd-line);background:var(--mfd-surface);color:var(--mfd-muted);font-size:13.5px;margin-top:auto}
.mfd-ftr-in{max-width:1160px;margin:0 auto;padding:44px 32px 24px}
.mfd-ftr-top{display:grid;grid-template-columns:minmax(220px,1.2fr) 2fr;gap:40px;padding-bottom:32px;border-bottom:1px solid var(--mfd-line)}
.mfd-ftr-brand{display:grid;gap:12px;justify-items:start;align-content:start}
.mfd-ftr-brand img{width:108px}
.mfd-ftr-brand p{margin:0;max-width:34ch;color:var(--mfd-muted)}
.mfd-ftr-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.mfd-ftr-col{display:grid;gap:8px;align-content:start;justify-items:start}
.mfd-ftr-col .mfd-lbl{margin-bottom:4px}
.mfd-ftr a{color:var(--mfd-muted)}
.mfd-ftr a:hover{color:var(--mfd-ink);text-decoration:none}
.mfd-ftr-bot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;padding-top:20px;font-size:12.5px;color:var(--mfd-faint)}
.mfd-ftr-bot a{color:var(--mfd-faint)}
.mfd-status{display:inline-flex;align-items:center;gap:7px;font-size:13px;padding:5px 10px;border:1px solid var(--mfd-line);
  border-radius:999px;background:var(--mfd-paper)}
.mfd-status:hover{border-color:var(--mfd-green-line);text-decoration:none}
.mfd-dot{width:8px;height:8px;border-radius:50%;background:var(--mfd-green);flex:none;box-shadow:0 0 0 3px var(--mfd-green-soft)}

/* ---- Search palette, styled here so the lazy script ships behaviour only ---- */
.mfd-palette-back{position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:40;
  display:flex;justify-content:center;padding:12vh 16px 16px;backdrop-filter:blur(3px)}
.mfd-palette{width:min(640px,100%);max-height:70vh;background:var(--mfd-paper);border-radius:16px;
  border:1px solid var(--mfd-line);box-shadow:var(--mfd-shadow);display:flex;flex-direction:column;
  overflow:hidden;align-self:start}
.mfd-palette-head{display:flex;align-items:center;gap:10px;padding:0 16px;border-bottom:1px solid var(--mfd-line)}
.mfd-palette-head .mfd-ic{color:var(--mfd-faint);width:18px;height:18px}
.mfd-palette input{flex:1;border:0;padding:16px 0;font:inherit;font-size:16px;background:none;color:var(--mfd-ink);outline:none;min-width:0}
.mfd-palette input::-webkit-search-cancel-button,.mfd-palette input::-webkit-search-decoration{-webkit-appearance:none}
.mfd-palette input::placeholder{color:var(--mfd-ghost)}
.mfd-palette-esc{font-size:11px}
.mfd-palette-list{overflow:auto;padding:8px;overscroll-behavior:contain}
.mfd-palette-list .mfd-lbl{padding:10px 12px 4px;margin:0}
.mfd-hit{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:9px;color:var(--mfd-ink)}
.mfd-hit:hover,.mfd-hit.mfd-on{background:var(--mfd-surface2);text-decoration:none}
.mfd-hit-ic{width:32px;height:32px;border-radius:8px;border:1px solid var(--mfd-line);background:var(--mfd-paper);
  display:flex;align-items:center;justify-content:center;color:var(--mfd-faint);flex:none}
.mfd-hit.mfd-on .mfd-hit-ic{border-color:var(--mfd-blue-line);color:var(--mfd-blue)}
.mfd-hit-tx{display:grid;gap:1px;min-width:0;flex:1}
.mfd-hit b{display:block;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mfd-hit small{display:block;color:var(--mfd-faint);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mfd-hit em{color:var(--mfd-blue-ink);font-style:normal;font-weight:500}
.mfd-hit>.mfd-ic{color:var(--mfd-ghost);opacity:0}
.mfd-hit.mfd-on>.mfd-ic{opacity:1}
.mfd-hit-ask .mfd-hit-ic{color:var(--mfd-blue);border-color:var(--mfd-blue-line);background:var(--mfd-blue-soft)}
.mfd-palette-empty{padding:22px 16px;color:var(--mfd-muted);font-size:13.5px;text-align:center}
.mfd-palette-foot{border-top:1px solid var(--mfd-line);padding:8px 14px;font-size:12px;
  color:var(--mfd-faint);display:flex;gap:14px;flex-wrap:wrap;background:var(--mfd-surface)}
.mfd-palette-foot span{display:inline-flex;align-items:center;gap:5px}
button.mfd-hit{width:100%;text-align:left;border:0;background:none;font:inherit}

/* With Mida docked there is 400px less room, so the on-this-page column goes
   at the width it would have gone at anyway. */
@media (max-width:1520px){
  body.mfd-ask-open .mfd-swap{grid-template-columns:minmax(0,1fr)}
  body.mfd-ask-open .mfd-toc{display:none}
}
@media (max-width:1260px){
  body.mfd-ask-open .mfd-body3{grid-template-columns:minmax(0,1fr)}
  body.mfd-ask-open .mfd-side{display:none}
}

@media (max-width:1180px){
  .mfd-content:has(>.mfd-apirail){display:block}
  .mfd-content:has(>.mfd-apirail)>.mfd-apirail{position:static;max-height:none;overflow:visible}
  .mfd-apirail{max-width:70ch}
}
/* The same, 400px earlier, because that is what the dock takes off the page. */
@media (max-width:1580px){
  body.mfd-ask-open .mfd-content:has(>.mfd-apirail){display:block}
  body.mfd-ask-open .mfd-content:has(>.mfd-apirail)>.mfd-apirail{position:static;max-height:none;overflow:visible}
  body.mfd-ask-open .mfd-apirail{max-width:70ch}
}

/* ---- Tablet ---- */
@media (max-width:1120px){
  .mfd-swap{grid-template-columns:minmax(0,1fr)}
  .mfd-toc{position:static;max-height:none;padding:0 56px 8px;overflow:visible;order:-1}
  .mfd-toc-empty{display:none}
  .mfd-toc-toggle{display:flex;align-items:center;gap:8px;width:100%;text-align:left;border:1px solid var(--mfd-line);
    border-radius:8px;padding:9px 12px;background:var(--mfd-surface);color:var(--mfd-muted);font-size:13.5px;font-weight:500}
  .mfd-toc-toggle span{flex:1}
  .mfd-toc-toggle .mfd-ic:last-child{color:var(--mfd-ghost)}
  .mfd-toc[data-open="true"] .mfd-toc-toggle .mfd-ic:last-child{transform:rotate(180deg)}
  .mfd-toc-inner{display:none;padding:12px 4px 4px}
  .mfd-toc-inner .mfd-lbl{display:none}
  .mfd-toc[data-open="true"] .mfd-toc-inner{display:block}
  .mfd-swap{padding-top:28px}
  .mfd-article{padding-top:8px}
  .mfd-body3-solo .mfd-swap{padding-top:0}
  .mfd-body3-solo .mfd-article{padding-top:36px}
}

/* ---- Phone ---- */
@media (max-width:860px){
  :root{--mfd-hdr:56px}
  .mfd-hdr-in{padding:0 14px;gap:8px}
  .mfd-hamb{display:inline-flex}
  .mfd-hdr-sep,.mfd-editlink,.mfd-openapp{display:none}
  .mfd-siteswitch a{padding:0 8px;font-size:13px}
  .mfd-siteswitch a .mfd-ic{display:none}
  .mfd-logo img{width:100px}
  .mfd-hdr .mfd-search{width:190px}
  .mfd-hdr .mfd-search .mfd-kbd{display:none}
  .mfd-search-hero .mfd-kbd{display:none}
  .mfd-body3{grid-template-columns:minmax(0,1fr)}
  .mfd-side{position:fixed;inset:var(--mfd-hdr) auto 0 0;width:min(300px,86vw);z-index:30;background:var(--mfd-paper);
    max-height:none;height:calc(100vh - var(--mfd-hdr));transform:translateX(-100%);transition:transform .18s ease;
    box-shadow:none;border-right:1px solid var(--mfd-line);padding:20px 14px 40px 16px;overflow:auto;
    scrollbar-width:thin;scrollbar-color:var(--mfd-line) transparent}
  .mfd-side[data-open="true"]{transform:none;box-shadow:var(--mfd-shadow)}
  /* The drawer itself scrolls on a phone. */
  .mfd-side .mfd-side-in{position:static;max-height:none;overflow:visible;padding:0}
  .mfd-scrim{position:fixed;inset:var(--mfd-hdr) 0 0 0;background:rgba(15,23,42,.4);z-index:29}
  .mfd-article{padding:8px 18px 64px}
  .mfd-body3-solo .mfd-article{padding-top:24px}
  .mfd-toc{padding:0 18px 4px}
  .mfd-swap{padding-top:20px}
  .mfd-titlerow{flex-direction:column;gap:10px}
  .mfd-copymenu{margin-top:0;align-self:flex-start}
  .mfd-copymenu .mfd-menu{left:0;right:auto}
  .mfd-article h1{font-size:26px}
  .mfd-lede{font-size:15px}
  .mfd-content{font-size:15px}
  .mfd-content h2{font-size:20px;margin-top:32px}
  .mfd-anchor{display:none}
  .mfd-wrap{padding:0 18px}
  .mfd-hero{padding:40px 18px 30px}
  /* The phone hamburger is a fixed button 65px down; the heading starts under it. */
  .mfd-home-shell .mfd-hero{padding:60px 18px 22px}
  .mfd-home-shell .mfd-wrap{padding:0 18px}
  .mfd-hero h1{font-size:28px}
  .mfd-home-shell .mfd-hero h1{font-size:26px}
  .mfd-hero .mfd-lede{font-size:15px}
  .mfd-search-hero{height:46px;font-size:14px}
  .mfd-tiles{padding:24px 0 8px;grid-template-columns:minmax(0,1fr)}
  .mfd-homebody{padding:8px 0 24px}
  .mfd-prevnext{grid-template-columns:minmax(0,1fr)}
  .mfd-prevnext .mfd-r{text-align:left;justify-items:start}
  .mfd-prevnext span:empty{display:none}
  .mfd-ftr-in{padding:32px 18px 20px}
  .mfd-ftr-top{grid-template-columns:minmax(0,1fr);gap:28px}
  .mfd-ftr-cols{grid-template-columns:1fr 1fr;gap:20px}
  .mfd-palette-back{padding:8px}
  .mfd-palette{max-height:calc(100vh - 16px)}
  .mfd-helpful{margin-top:32px}
  .mfd-endpoint-row{flex-wrap:wrap}
  .mfd-endpoint-p{flex-basis:100%;order:3}
  .mfd-endpoint-copy{opacity:1}
  .mfd-hdr .mfd-console span{display:none}
  .mfd-hdr .mfd-console{width:36px;padding:0;justify-content:center}
  .mfd-trydlg{width:100vw;height:100vh;max-width:none;max-height:none;border-radius:0}
  .mfd-endpoint-meta{gap:4px 16px}
}
@media (max-width:640px){
  .mfd-hdr .mfd-search{width:36px;padding:0;justify-content:center}
  .mfd-hdr .mfd-search span{display:none}
  .mfd-hdr .mfd-login{width:36px;padding:0;justify-content:center}
  .mfd-hdr .mfd-login span{display:none}
}
@media (max-width:480px){
  /* Six controls do not fit a 400px bar: tighter gaps, a smaller mark, and the
     bell goes; the changelog is one tap away in the tree and the footer. */
  .mfd-hdr-in{gap:6px}
  .mfd-logo img{width:88px}
  .mfd-bell{display:none}
  .mfd-ftr-cols{grid-template-columns:minmax(0,1fr)}
  .mfd-hit-ic{display:none}
}
@media (prefers-reduced-motion:reduce){.mfd-side{transition:none}}

@media print{
  .mfd-hdr,.mfd-side,.mfd-toc,.mfd-ftr,.mfd-helpful,.mfd-prevnext,.mfd-internal,.mfd-copymenu,.mfd-anchor,.mfd-codecopy,
  .mfd-related,.mfd-crumb,.mfd-endpoint-try,.mfd-previewbar{display:none!important}
  body.mfd-previewing::after{display:none}
  .mfd-body3,.mfd-swap{display:block}
  .mfd-article{padding:0;max-width:none}
  .mfd-content pre{white-space:pre-wrap}
}

/* ---- Ask Mida ----
   The same surface as the docked Mida column in the board application: a
   white, full height column at the right edge with a slim header, the
   conversation, and a rounded composer card with a round blue send button.
   The page makes room for it (see --mfd-dock at the top). Nothing here is
   purple: Mida's mark carries its own colours and the rest is the brand blue. */
/* The bar's Ask button: the mark alone, the same box as the other header
   icons, and a lit state while the panel is open. */
.mfd-askbtn .mfd-mida{width:22px;height:22px}
.mfd-askbtn:hover{border-color:var(--mfd-blue-line);background:var(--mfd-surface)}
.mfd-askbtn[aria-expanded="true"]{border-color:var(--mfd-blue-line);background:var(--mfd-blue-soft)}
.mfd-askbtn[hidden]{display:none!important}

.mfd-ask{position:fixed;top:var(--mfd-hdr);right:0;bottom:0;width:400px;z-index:19;display:flex;
  flex-direction:column;background:var(--mfd-paper);border-left:1px solid var(--mfd-line)}
.mfd-ask-hdr{display:flex;align-items:center;gap:8px;padding:0 14px 0 20px;height:52px;flex:none;
  border-bottom:1px solid var(--mfd-line);background:var(--mfd-paper)}
.mfd-ask-hdr b{font-family:var(--mfd-cal);font-weight:400;font-size:16px;color:var(--mfd-ink);letter-spacing:.01em}
.mfd-ask-hdr .mfd-mida{width:20px;height:20px}
.mfd-ask-scope{font-size:11.5px;color:var(--mfd-faint);padding:2px 8px;border:1px solid var(--mfd-line);border-radius:999px;margin-left:4px}
.mfd-ask-hbtn{width:30px;height:30px;border:0;border-radius:8px;background:none;color:var(--mfd-faint);
  display:inline-flex;align-items:center;justify-content:center}
.mfd-ask-hbtn:hover{background:var(--mfd-surface2);color:var(--mfd-ink)}
.mfd-ask-hbtn .mfd-ic{width:18px;height:18px}

.mfd-ask-log{flex:1;overflow:auto;padding:20px 24px;display:flex;flex-direction:column;gap:16px;font-size:15px;
  line-height:1.55;overscroll-behavior:contain;scrollbar-width:thin}
.mfd-ask-welcome{display:grid;justify-items:center;text-align:center;gap:6px;padding:40px 12px 12px;color:var(--mfd-muted)}
.mfd-ask-welcome .mfd-mida{width:44px;height:44px;margin-bottom:8px}
.mfd-ask-welcome b{font-family:var(--mfd-cal);font-weight:400;color:var(--mfd-ink);font-size:20px}
.mfd-ask-welcome p{margin:0;font-size:14px;max-width:32ch}
.mfd-ask-empty{color:var(--mfd-muted);font-size:13.5px;margin:0}
/* The reader's turn: the same light grey bubble the application draws. */
.mfd-ask-q{align-self:flex-end;max-width:88%;background:var(--mfd-surface2);color:var(--mfd-ink);
  border-radius:20px;padding:10px 18px;white-space:pre-wrap;line-height:1.5;font-size:15px}
/* Mida's turn sits flat on the surface, with the mark beside its first line. */
.mfd-ask-a{max-width:100%;display:grid;gap:10px;position:relative;padding-left:30px}
.mfd-ask-a::before{content:"";position:absolute;left:0;top:2px;width:20px;height:20px;
  background:url("mida.svg") center/contain no-repeat}
.mfd-ask-a .mfd-ask-body>*:first-child{margin-top:0}
.mfd-ask-a .mfd-ask-body>*:last-child{margin-bottom:0}
.mfd-ask-body{line-height:1.6}
.mfd-ask-body p{margin:0 0 10px}
.mfd-ask-body ul,.mfd-ask-body ol{margin:0 0 10px;padding-left:20px}
.mfd-ask-body li{margin:3px 0}
.mfd-ask-body a{color:var(--mfd-blue-ink);text-decoration:underline;text-decoration-color:var(--mfd-blue-line);text-underline-offset:3px}
.mfd-ask-body code{font-family:var(--mfd-mono);font-size:12.5px;background:var(--mfd-surface2);border:1px solid var(--mfd-line);
  padding:1px 5px;border-radius:4px}
.mfd-ask-body pre{background:var(--mfd-code-bg);color:var(--mfd-code-ink);font-family:var(--mfd-mono);
  font-size:12.5px;padding:12px 14px;border-radius:10px;overflow:auto;margin:0 0 10px}
.mfd-ask-body pre code{background:none;padding:0;color:inherit;border:0}
.mfd-ask-src{display:flex;gap:6px;flex-wrap:wrap}
.mfd-ask-src a{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;
  border:1px solid var(--mfd-line);border-radius:999px;font-size:12px;color:var(--mfd-muted);background:var(--mfd-paper)}
.mfd-ask-src a:hover{border-color:var(--mfd-blue-line);background:var(--mfd-blue-soft);color:var(--mfd-blue-ink);text-decoration:none}
.mfd-ask-acts{display:flex;gap:4px;align-items:center;color:var(--mfd-faint);font-size:12px}
.mfd-ask-acts button{border:0;background:none;color:var(--mfd-faint);padding:3px 6px;border-radius:5px;display:inline-flex;
  align-items:center;gap:4px;font-size:12px}
.mfd-ask-acts button:hover{color:var(--mfd-ink);background:var(--mfd-surface2)}
.mfd-ask-acts button[aria-pressed="true"]{color:var(--mfd-blue-ink);background:var(--mfd-blue-soft)}
/* The loader is the board application's: the word alone with a gradient sweep
   clipped to the text, on the same 1.6s sweep as .mfMidaShimmer there. No
   dots and no spinner, so waiting for Mida reads the same in the docs as it
   does on a board. */
.mfd-ask-wait{display:inline-block;font-size:13px;
  /* 24px is the answer's first line box, which is what the mark is centred
     on, so the word sits level with it rather than a few pixels high. */
  line-height:24px;
  background:linear-gradient(90deg,var(--mfd-shim) 30%,var(--mfd-shim-hi) 45%,var(--mfd-shim) 60%);
  background-size:200% 100%;-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;animation:mfd-shimmer 1.6s linear infinite}
@keyframes mfd-shimmer{to{background-position:-200% 0}}
/* While the word shows there is no answer yet, and an empty row would push it
   a gap below the mark. */
.mfd-ask-body:empty{display:none}
/* Reconnecting, or a turn that failed: a settled sentence, not a sweep. */
.mfd-ask-wait-msg{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;
  background:none;color:var(--mfd-faint);-webkit-text-fill-color:currentColor;animation:none}
@media (prefers-reduced-motion:reduce){
  .mfd-ask-wait{animation:none;background:none;color:var(--mfd-shim);-webkit-text-fill-color:currentColor}
}

.mfd-ask-suggest{padding:0 24px 12px;display:grid;gap:6px}
.mfd-ask-chips{display:grid;gap:6px;justify-items:start}
.mfd-ask-chips button{border:1px solid var(--mfd-line);background:var(--mfd-paper);
  border-radius:999px;padding:7px 13px;font-size:13px;color:var(--mfd-muted);text-align:left}
.mfd-ask-chips button:hover{border-color:var(--mfd-blue-line);background:var(--mfd-blue-soft);color:var(--mfd-blue-ink)}

/* The composer card. The same rounded, shadowed sheet as the application's. */
/* The composer is the last thing in the panel now that the note under it is
   gone, so it carries the bottom margin itself. */
.mfd-ask-form{display:flex;flex-direction:column;margin:8px 20px 16px;border-radius:22px;background:var(--mfd-paper);
  box-shadow:0 0 0 .5px rgba(0,0,0,.10),0 9px 9px rgba(0,0,0,.012),0 2px 5px rgba(0,0,0,.04);overflow:hidden}
:root[data-theme="dark"] .mfd-ask-form{box-shadow:0 0 0 1px var(--mfd-line)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .mfd-ask-form{box-shadow:0 0 0 1px var(--mfd-line)}}
.mfd-ask-form:focus-within{box-shadow:0 0 0 1.5px var(--mfd-blue),0 9px 9px rgba(0,0,0,.012),0 2px 5px rgba(0,0,0,.04)}
.mfd-ask-form textarea{resize:none;max-height:140px;min-height:44px;border:0;padding:14px 16px 6px;font:inherit;font-size:14px;
  background:transparent;color:var(--mfd-ink);outline:none;line-height:1.45}
.mfd-ask-form textarea::placeholder{color:var(--mfd-ghost)}
.mfd-ask-foot{display:flex;align-items:center;gap:10px;padding:4px 12px 12px 16px}
.mfd-ask-hint{font-size:11.5px;color:var(--mfd-ghost)}
.mfd-ask-send{width:32px;height:32px;border:0;border-radius:50%;background:var(--mfd-blue);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;flex:none}
.mfd-ask-send:hover{opacity:.85}
.mfd-ask-send[disabled]{opacity:.5}
.mfd-ask-send .mfd-ic{stroke-width:2.4}
/* Takes the send button's place while an answer is being written, so there is
   only ever one thing to press. */
.mfd-ask-stop{width:32px;height:32px;border:0;border-radius:50%;background:var(--mfd-surface2);color:var(--mfd-ink);
  display:inline-flex;align-items:center;justify-content:center;flex:none}
.mfd-ask-stop:hover{background:var(--mfd-line)}
/* The clear chat confirmation: the login dialog's card, smaller. */
.mfd-askdlg{border:0;padding:0;background:none;max-width:none;max-height:none}
.mfd-askdlg::backdrop{background:rgba(15,23,42,.5);backdrop-filter:blur(2px)}
.mfd-askdlg-in{width:min(360px,calc(100vw - 32px));display:grid;gap:8px;padding:22px 24px 20px;border-radius:14px;
  border:1px solid var(--mfd-line);background:var(--mfd-paper);box-shadow:var(--mfd-shadow);color:var(--mfd-ink)}
.mfd-askdlg h2{margin:0;font-size:17px;font-weight:600;letter-spacing:-.01em}
.mfd-askdlg p{margin:0 0 10px;color:var(--mfd-muted);font-size:13.5px;line-height:1.5}
.mfd-askdlg-acts{display:flex;justify-content:flex-end;gap:8px}

@media (max-width:860px){
  body.mfd-ask-open{--mfd-dock:0px}
  .mfd-ask{top:0;width:100%;border-left:0;z-index:31}
}
@media print{.mfd-ask,.mfd-askbtn{display:none}}

@media (max-width: 600px){
	.mfd-theme{position: fixed;bottom: 20px;right: 10px;width: 40px;height: 40px;box-shadow: rgb(248 248 248 / 54%) 0px 2px 8px 0px;}
	.mfd-theme .mfd-ic{width: 24px;height: 24px;}
	.mfd-hamb{position: fixed;top: 65px;width: 45px;height: 45px;box-shadow: rgb(248 248 248 / 54%) 0px 2px 8px 0px;}
	.mfd-hamb .mfd-ic{width: 30px;height: 30px;}
}

/* Ask Mida docks as a column at the right edge, the way it does in the board
   application, and the page makes room rather than being covered. Last in the
   file so the centering margins above cannot win. */
/* One inset on the body rather than a margin on each region. Naming the
   regions meant a space home with a tree, a .mfd-home nested inside the
   .mfd-body3 that already carried the margin, lost the dock's width twice;
   and it fought the "margin:0 auto" those regions centre themselves with.
   Narrowing the body leaves that centering to do its own job. */
body.mfd-ask-open{padding-right:var(--mfd-dock)}
/* The bar is not one of those regions. The dock starts under it, so the header
   spans the whole window and its right hand controls stay at the window edge,
   above the dock; the inset is pulled back off it. */
body.mfd-ask-open>.mfd-hdr{margin-right:calc(0px - var(--mfd-dock))}