/* MGRAM site shell v2 — one header, one phone menu, one footer for every page of mgram.biz and api.mgram.biz.
   The language is the Knowledge Base's (docs.css) and the panel's (appweb). Spec: /root/design-kit/DESIGN-SYSTEM.md.
   Only namespaced classes: .sh* header · .sm* side menu (phone drawer, docs sidebar) · .sf* footer · .sb* buttons.
   No bare element rules here: home2.css / landing.css / docs.css / api-docs.css own the page content.
   Markup: modules/landing_pages.py site_header()/site_footer() (Python pages), the same markup in index.php, api_docs.php. */
@font-face{font-family:"Montserrat";font-style:normal;font-weight:400 800;font-display:swap;src:url("/assets/fonts/montserrat-cyrillic-ext.woff2?v=31") format("woff2");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:400 800;font-display:swap;src:url("/assets/fonts/montserrat-cyrillic.woff2?v=31") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:400 800;font-display:swap;src:url("/assets/fonts/montserrat-latin-ext.woff2?v=31") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:400 800;font-display:swap;src:url("/assets/fonts/montserrat-latin.woff2?v=31") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* ───────── tokens (the Knowledge Base palette = the panel's) ───────── */
:root{
  --bg:#090909;--s1:#111;--s2:#151515;--s3:#1b1b1b;--bar:#0d0d0d;
  --line:rgba(255,255,255,.065);--line2:rgba(255,255,255,.11);
  --edge:inset 0 0 0 1px rgba(255,255,255,.045);--edge-md:inset 0 0 0 1px rgba(255,255,255,.06);--edge-hi:inset 0 0 0 1px rgba(255,255,255,.1);
  --t1:#f3f3f5;--t2:#a3a3a8;--t3:#6f6f75;
  --accent:#f2c94c;--accent-hi:#ffd866;--accent-soft:rgba(242,201,76,.1);
  --green:#4fd07d;--red:#ef6275;--blue:#66aef0;
  --font:"Montserrat",Arial,sans-serif;--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
  --sh-h:64px;--side:288px;--wrap:1120px;--gut:32px;
  /* type scale: display (hero) · page h1 · section h2 · article h2 · h3 · lead · body · meta */
  --fs-display:clamp(38px,5.4vw,60px);--fs-h1:clamp(30px,4.2vw,44px);--fs-h2:clamp(24px,2.6vw,30px);--fs-h2a:23px;--fs-h3:17.5px;
  --fs-lead:16.5px;--fs-body:15px;--fs-read:16px;--fs-meta:12.5px;
}
@media(max-width:640px){:root{--sh-h:58px;--gut:16px;--fs-h2a:21px;--fs-lead:15.5px}}

/* base of the shell parts — zero specificity (:where), so every component rule below wins */
:where(.sh,.sm,.sf){font-family:var(--font);-webkit-font-smoothing:antialiased;box-sizing:border-box}
:where(.sh,.sm,.sf) *{box-sizing:border-box}
:where(.sh,.sm,.sf) a{color:inherit;text-decoration:none}
:where(.sh,.sm,.sf,.sb) svg{display:block;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
:where(.sh,.sm,.sf) :focus-visible,.sb:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sh-skip{position:fixed;z-index:200;left:12px;top:-60px;padding:8px 12px;border-radius:8px;background:var(--accent);color:#111;font:700 13px var(--font);text-decoration:none;transition:top .15s}
.sh-skip:focus{top:12px}

/* ───────── header: solid bar + hairline; hides while scrolling down, returns on the way up (site.js) ───────── */
.sh{position:sticky;top:0;z-index:60;height:var(--sh-h);background:rgba(13,13,13,.92);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);border-bottom:1px solid rgba(255,255,255,.06);color:var(--t1);transition:transform .3s var(--ease)}
.sh.is-hidden{transform:translateY(calc(-100% - 1px))}
.sh-in{height:100%;width:min(calc(100% - 2 * var(--gut)),var(--shell,var(--wrap)));margin:0 auto;display:flex;align-items:center;gap:8px}
.sh-brand{flex:none;display:flex;align-items:center;gap:11px;min-height:44px;min-width:0;margin-right:14px}
.sh-brand img{width:32px;height:32px;border-radius:10px}
.sh-brand span{display:flex;flex-direction:column;line-height:1.1;min-width:0}
.sh-brand b{font-size:15px;font-weight:700;letter-spacing:.03em}
.sh-brand small{margin-top:3px;color:var(--t3);font-size:11.5px;font-weight:600;white-space:nowrap}
.sh-nav{display:flex;align-items:center;gap:2px;min-width:0}
.sh-nav a{display:inline-flex;align-items:center;height:38px;padding:0 11px;border-radius:10px;color:var(--t2);font-size:13.5px;font-weight:600;letter-spacing:-.005em;white-space:nowrap;transition:color .15s,background-color .15s}
.sh-nav a:hover{color:var(--t1);background:rgba(255,255,255,.05)}
.sh-nav a[aria-current],body.ct .sh-nav a[href="/catalog"]{color:var(--t1);background:rgba(255,255,255,.065)}
.sh-act{flex:none;margin-left:auto;display:flex;align-items:center;gap:6px}
.sh-pill{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:38px;padding:0 15px;border:0;border-radius:999px;background:var(--s2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);color:var(--t1);font:650 13px var(--font);white-space:nowrap;cursor:pointer;transition:background-color .15s,box-shadow .15s,color .15s,transform .15s}
.sh-pill:hover{background:#1a1a1a;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.sh-pill:active{transform:scale(.97)}
.sh-pill svg{width:15px;height:15px;stroke-width:2.2}
.sh-pill--gold{background:var(--accent);box-shadow:none;color:#111;font-weight:700}
.sh-pill--gold:hover{background:var(--accent-hi);box-shadow:none}
.sh-lang{min-width:44px;padding:0 10px;color:var(--t2);font-size:12.5px;font-weight:700}
.sh-lang:hover{color:var(--t1)}
.sh-icon{width:38px;padding:0;color:var(--t2)}.sh-icon svg{width:18px;height:18px;stroke-width:1.9}
.sh-tool{display:none}
.sh-burger{display:none;place-items:center;flex:none;width:40px;height:40px;margin-left:-8px;border:0;border-radius:10px;background:none;color:var(--accent);cursor:pointer;transition:opacity .15s,transform .15s}
.sh-burger:hover{opacity:.85}.sh-burger:active{transform:scale(.95)}
.sh-burger svg{width:24px;height:24px;stroke-width:2.15}
/* the AI pill of the Knowledge Base (its orb is docs.css .kd-orb) */
.sh-ai{padding:0 13px 0 5px;gap:7px}.sh-ai .kd-orb{width:28px;height:28px}

/* docs layouts (Knowledge Base, API): the bar spans the viewport, the left menu sits under it (like the panel) */
.sh--app{position:fixed;left:0;right:0}
.sh--app .sh-in{width:auto;margin:0;padding:0 20px 0 18px}

@media(min-width:1100px){
  .sh--app .sh-brand{width:calc(var(--side) - 18px);margin-right:0}
}
@media(max-width:1179px){
  .sh:not(.sh--app) .sh-nav{display:none}
  .sh:not(.sh--app) .sh-burger{display:grid}
  .sh:not(.sh--app) .sh-brand{margin-right:0}
}
@media(max-width:1359px){.sh--app .sh-nav{display:none}}
@media(max-width:1099px){
  .sh--app .sh-burger{display:grid}
  .sh--app .sh-in{padding:0 14px 0 16px}
  .sh-tool{display:inline-flex}
}
@media(max-width:640px){
  .sh-in{gap:6px}
  .sh--app .sh-in{padding:0 10px 0 12px}
  .sh-brand{gap:9px}
  .sh-brand img{width:28px;height:28px;border-radius:8px}
  .sh-brand small{display:none}
  .sh-login{display:none}
  .sh-pill{height:36px;padding:0 13px}
  .sh-lang{min-width:40px;padding:0 8px}
  .sh-icon{width:36px;padding:0}
  .sh-ai{padding:0 11px 0 4px}.sh-ai .kd-orb{width:26px;height:26px}
}
@media(max-width:640px){.sh--app .sh-lang{display:none}.sh--app .sh-act{gap:4px}.sh--app .sh-pill--gold{padding:0 12px}}  /* docs layouts: the language is in the menu */
@media(max-width:370px){.sh-brand b{display:none}}

/* ───────── side menu: the phone drawer of every page; the persistent left menu of the API docs ───────── */
.sm{position:fixed;z-index:80;top:0;bottom:0;left:0;width:min(86vw,320px);display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px);background:var(--bar);border-right:1px solid rgba(255,255,255,.05);color:var(--t1);transform:translateX(-102%);visibility:hidden;transition:transform .3s var(--ease),visibility 0s .3s,box-shadow .3s}
html.sm-open .sm{transform:none;visibility:visible;box-shadow:24px 0 60px rgba(0,0,0,.5);transition:transform .3s var(--ease),visibility 0s,box-shadow .3s}
.sm-scrim{position:fixed;inset:0;z-index:75;background:rgba(0,0,0,.55);opacity:0;visibility:hidden;transition:opacity .25s,visibility 0s .25s}
html.sm-open .sm-scrim{opacity:1;visibility:visible;transition:opacity .25s,visibility 0s}
html.sm-open,html.sm-open body{overflow:hidden;overscroll-behavior:none}
.sm-top{flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;height:var(--sh-h);padding:0 12px 0 18px}
.sm-top .sh-brand{margin-right:0}
.sm-top .sh-brand small{display:block}
.sm-x{display:grid;place-items:center;flex:none;width:36px;height:36px;border:0;border-radius:10px;background:none;color:var(--t2);cursor:pointer}
.sm-x:hover{background:#171717;color:var(--t1)}
.sm-x svg{width:19px;height:19px}
.sm-nav{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:2px 10px 18px;scrollbar-width:thin;scrollbar-color:#2a2a2a transparent}
.sm-nav::-webkit-scrollbar{width:6px}.sm-nav::-webkit-scrollbar-thumb{background:#262626;border-radius:3px}
.sm-sep{height:1px;margin:10px 12px;background:rgba(255,255,255,.06)}
.sm-label{display:block;padding:14px 12px 6px;color:var(--t3);font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
.sm-row{position:relative;display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;width:100%;min-height:40px;padding:0;border:0;border-radius:10px;background:none;color:#8a8a8f;font:600 13.5px/1.3 var(--font);letter-spacing:-.005em;text-align:left;cursor:pointer;transition:background-color .15s,color .15s}
.sm-row:hover{background:var(--s2);color:#dcdce0}
.sm-row.is-active,.sm-row[aria-current]{color:var(--t1)}
.sm-row.is-active::before,.sm-row[aria-current]::before{content:"";position:absolute;left:0;top:11px;bottom:11px;width:2px;border-radius:0 2px 2px 0;background:var(--accent)}
.sm-row.is-active .sm-ic,.sm-row[aria-current] .sm-ic{color:var(--accent)}
.sm-ic{display:grid;place-items:center;width:38px;height:40px}
.sm-ic svg{width:18px;height:18px}
.sm-tx{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:8px}
.sm-row>small{padding-right:10px;color:var(--t3);font-size:11.5px;font-weight:600}
.sm-foot{flex:none;padding:12px 12px calc(14px + env(safe-area-inset-bottom,0px));border-top:1px solid rgba(255,255,255,.05)}
.sm-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sm-btns .sb{height:44px}
.sm-tg{display:flex;align-items:center;justify-content:center;gap:8px;min-height:40px;margin-top:8px;color:var(--t2);font-size:13px;font-weight:600}
.sm-tg:hover{color:var(--t1)}
.sm-tg svg{width:16px;height:16px}
.sm-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:10px;padding:0 3px;color:var(--t3);font-size:12px;font-weight:600}
.sm-meta a:hover{color:var(--t1)}
.sm-langs{display:inline-flex;padding:2px;border-radius:8px;background:var(--s2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.sm-langs a,.sm-langs button{padding:3px 8px;border:0;border-radius:6px;background:none;color:var(--t3);font:700 11.5px var(--font);cursor:pointer}
.sm-langs a:hover,.sm-langs button:hover{color:var(--t1)}
.sm-langs .is-on{background:#262626;color:var(--t1)}
/* persistent left menu of docs layouts (the API docs) from 1100px: under the bar, like the Knowledge Base */
@media(min-width:1100px){
  .sm--side{top:var(--sh-h);z-index:50;width:var(--side);transform:none;visibility:visible;box-shadow:none;transition:none}
  .sm--side .sm-top{display:none}
  .sm--side .sm-nav{padding-top:14px}
  html.sm-open .sm--side{box-shadow:none}
  .sm--side~.sm-scrim{display:none}
}
@media(min-width:1180px){.sm:not(.sm--side),.sm:not(.sm--side)~.sm-scrim{display:none}}

/* ───────── buttons (shell, and pages that want the house button) ───────── */
.sb{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 18px;border:0;border-radius:13px;background:#171717;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);color:var(--t1);font:650 14px var(--font);text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .15s,box-shadow .15s,transform .15s}
.sb:hover{background:#1c1c1c;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.sb:active{transform:scale(.98)}
.sb svg{width:17px;height:17px;stroke-width:2.1}
.sb--gold{background:var(--accent);box-shadow:none;color:#111;font-weight:700}
.sb--gold:hover{background:var(--accent-hi);box-shadow:none}

/* ───────── footer: brand, three columns, the last line on the left in one row ───────── */
.sf{position:relative;border-top:1px solid rgba(255,255,255,.05);background:var(--bg);color:var(--t1)}
.sf-in{width:min(calc(100% - 2 * var(--gut)),var(--shell,var(--wrap)));margin:0 auto;padding:40px 0 calc(18px + env(safe-area-inset-bottom,0px))}
.sf-top{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1.25fr) minmax(0,1fr) minmax(0,.7fr);gap:32px}
.sf-brand>a{display:inline-flex;align-items:center;gap:10px;min-height:40px;font-size:15px;font-weight:700;letter-spacing:.03em}
.sf-brand img{width:28px;height:28px;border-radius:8px}
.sf-brand p{margin:8px 0 0;max-width:250px;color:var(--t3);font-size:13px;line-height:1.5}
.sf-col{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.sf-col>b{margin:10px 0 8px;color:var(--t3);font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
.sf-col a{display:inline-flex;align-items:center;min-height:30px;color:var(--t2);font-size:13px;font-weight:600;line-height:1.35;transition:color .15s}
.sf-col a:hover{color:var(--t1)}
.sf-bottom{display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-start;gap:20px;margin-top:28px;padding-top:14px;border-top:1px solid rgba(255,255,255,.05);color:var(--t3);font-size:12.5px;font-weight:600;white-space:nowrap}
.sf-bottom a{display:inline-flex;align-items:center;min-height:32px;transition:color .15s}
.sf-bottom a:hover{color:var(--t1)}
@media(max-width:980px){
  .sf-top{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 24px}
  .sf-brand{grid-column:1/-1;margin-bottom:6px}
}
@media(max-width:640px){
  .sf-in{padding-top:28px}
  .sf-top{grid-template-columns:minmax(0,1fr);gap:4px}
  .sf-col{flex-direction:row;flex-wrap:wrap;gap:0 18px}
  .sf-col>b{flex-basis:100%;margin:14px 0 2px}
  .sf-col a{min-height:36px}
  .sf-bottom{margin-top:20px}
}
@media(prefers-reduced-motion:reduce){.sh,.sm,.sm-scrim,.sh-pill,.sb{transition:none!important}}