/* The site's chrome (combined/chrome.css) with a footer column for The system. */
@import url('/site/combined/chrome.css');
.ft-cols{grid-template-columns:repeat(6,minmax(0,1fr))}
@media (max-width:1068px){.ft-cols{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:833px){.ft-cols{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- the level switch: "For you / For your team / For your developer" ----------
   Any element with data-lv="you|team|dev" shows only at that level. The switch is .lvseg (MS.R3.level.mount(el)). */
body[data-level=you] [data-lv]:not([data-lv~=you]),
body[data-level=team] [data-lv]:not([data-lv~=team]),
body[data-level=dev] [data-lv]:not([data-lv~=dev]){display:none!important}
.lvseg{position:relative;display:inline-flex;background:rgba(118,118,128,.12);border-radius:999px;padding:3px;max-width:100%;overflow-x:auto;scrollbar-width:none}
.lvseg::-webkit-scrollbar{display:none}
.lvseg button{position:relative;z-index:1;flex:none;border:0;background:none;padding:0 16px;height:34px;border-radius:999px;font:500 13px/1 var(--font);letter-spacing:-.01em;color:var(--text);cursor:pointer;white-space:nowrap}
.lvseg .th{position:absolute;z-index:0;top:3px;bottom:3px;left:0;border-radius:999px;background:#fff;box-shadow:0 3px 8px rgba(0,0,0,.12),0 3px 1px rgba(0,0,0,.04);transition:transform .42s var(--ease),width .42s var(--ease)}
.lvseg.dark{background:rgba(255,255,255,.12)}
.lvseg.dark button{color:#f5f5f7}
.lvseg.dark button[aria-pressed=true]{color:#000}
.lvseg.dark .th{background:#f5f5f7}

@media (pointer:coarse){.lvseg button{height:44px}}
/* phones: the explain-it switch fits the screen, three equal buttons, 44px tall */
@media (max-width:600px){.lvseg{display:flex;width:100%;overflow:visible}.lvseg button{flex:1 1 0;padding:0 6px;font-size:12px;height:44px;white-space:normal;line-height:1.15;text-align:center}}