/* Solico Commerce University — course reader UI + modern look (loaded after each page's own styles).
   Themes: html[data-reader=light|sepia|dark] (data-theme stays light/dark for the pages' own rules).
   Text size: --rz (set by course-ui.js), applied with CSS zoom so text AND diagrams scale together. */

/* ---------- themes ---------- */
:root{--rz:1;--bz:1;--f-lat:"Barlow";--f-rtl:"Vazirmatn";--sky:#00a3b4;--plum:#6b2a7d;
  --sb-bg:linear-gradient(175deg,#12144a,#1c1b5e 45%,#2f2e91);--sb-ink:#fff;--sb-dim:#ccdef4;--sb-hover:#ffffff1a;--sb-line:#ffffff33;--sb-num:#ffffff22;
  --card-sh:0 1px 2px rgba(20,26,51,.05),0 6px 22px rgba(20,26,51,.06)}
:root[data-reader="light"]{--ground:#f5f6fa;--surface:#ffffff;--ink:#161a33;--muted:#515874;--line:#e0e3ee;--soft:#eef0f7;
  --sb-bg:#ffffff;--sb-ink:#161a33;--sb-dim:#3d4461;--sb-hover:rgba(47,46,145,.07);--sb-line:#e0e3ee;--sb-num:#eceef7}
:root[data-reader="sepia"]{--ground:#f4ecdc;--surface:#fdf8ee;--ink:#2d2517;--muted:#63563e;--line:#e3d5b9;--soft:#efe4cc;--travel:#4a4030;
  --sb-bg:#faf3e4;--sb-ink:#2d2517;--sb-dim:#4d4231;--sb-hover:rgba(120,90,40,.09);--sb-line:#e3d5b9;--sb-num:#efe4cc;
  --card-sh:0 1px 2px rgba(60,40,10,.05),0 6px 22px rgba(60,40,10,.07)}
:root[data-reader="dark"]{--ground:#0a0d1e;--surface:#141833;--ink:#e8eaf8;--muted:#a2a8c6;--line:#282e4d;--soft:#1b2040;
  --card-sh:0 1px 2px rgba(0,0,0,.25),0 8px 26px rgba(0,0,0,.22)}
:root[data-reader]{color-scheme:light}
:root[data-reader="dark"]{color-scheme:dark}
@media (min-width:1100px){:root{--bz:1.08}}
@media (min-width:1600px){:root{--bz:1.16}}

/* ---------- fonts (body text; headings keep the brand faces) ---------- */
:root[data-rfont="alt"]{--f-lat:"Segoe UI",Roboto,"Helvetica Neue",Arial;--f-rtl:"Noto Naskh Arabic"}
:root[data-rfont="system"]{--f-lat:Georgia,"Times New Roman";--f-rtl:system-ui,Tahoma}
body{font-family:var(--f-lat),"Barlow","Vazirmatn",system-ui,sans-serif}
body.rtl,#app.rtl,.cui-panel.rtl{font-family:var(--f-rtl),"Vazirmatn","Barlow",system-ui,sans-serif}
:root[data-rfont="alt"] body.rtl,:root[data-rfont="alt"] #app.rtl{line-height:2}

/* ---------- text size: zoom the slide content, never the chrome ---------- */
.page>*{zoom:calc(var(--rz) * var(--bz))}
.slide:not(.cover) #fit{zoom:calc(var(--rz) * var(--bz))!important}  /* replaces the decks' shrink-to-fit that made slides tiny */
body>.wrap,#app>.wrap,body.portal #gate .gatebox{zoom:var(--rz)}
.ctrl #zout,.ctrl #zin,.ctrl .zlab{display:none!important} /* the deck's own A−/A+ is replaced by the Aa panel */

/* ---------- layout: use the width, keep a sensible measure ---------- */
.page{padding-inline:clamp(16px,3vw,48px);gap:26px}
.page>.phead,.page>.chead,.page>.body{width:100%;max-width:1240px;margin-inline:auto}
.page p,.page ul.pts li,#fit p{max-width:none}
.page .lede{font-size:1.08em;line-height:1.75}
.rtl .page .lede{line-height:2}
.fit{width:100%;max-width:1320px;margin-inline:auto}
.slide{padding-inline:clamp(16px,3vw,48px)}
/* chapter photo: small accent, not a poster */
.himg{height:clamp(78px,11vh,118px)!important;max-width:24vw;rotate:0deg!important;border-width:3px;animation:none!important}
.hero img{height:clamp(120px,17vh,190px)}
.chead.hasimg,.shead.hasimg{gap:22px}

/* ---------- typography ---------- */
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.page,.slide{line-height:1.7}
.rtl .page,.rtl .slide,.slide.rtl{line-height:1.95}
.eyebrow{font-weight:700}
.phead h2,.chead h2{font-size:clamp(1.7rem,3vw,2.4rem)}
.rule{height:4px;width:56px}

/* ---------- cards & blocks ---------- */
.tile,.step,.viz,.q,.mx .cell,.lvcard,.whcard,.qopt,.qexp,.scroll,.pplcard{box-shadow:var(--card-sh)}
.tile,.step,.viz,.q{border-radius:18px}
.viz{padding:20px 22px}
.tile{padding:18px 20px}
.grid{gap:16px}
.q{padding:16px 20px}
th{font-size:.92em}
td,th{padding:11px 14px}
:root[data-reader="sepia"] .phead h2,:root[data-reader="sepia"] .chead h2,:root[data-reader="sepia"] .shead h2{background-image:linear-gradient(90deg,#3a2a12,#7a4b12 55%,#b0600a)}

/* ---------- diagram legibility (brand-building model, players, minis) ---------- */
.mdlrow{gap:14px}
.mdlbox{flex:1 1 300px;min-width:0}
.mdlh{font-size:1.02rem;padding:10px 12px}
.rtl .mdlh{font-size:1rem}
.mdlc{font-size:.92rem}
.mdlb{font-size:.95rem}
.mdlmini{padding:12px}
.mmy span,.mmx2,.mstleg span,.mstrcap,.mcharr,.rtl .mmy span,.rtl .mmx2,.rtl .mstrcap{font-size:max(12.5px,.78rem)}
.mmcell b,.mstcell b,.mchcol b,.mstrp b,.rtl .mmcell b,.rtl .mstcell b,.rtl .mchcol b,.rtl .mstrp b{font-size:max(12.5px,.8rem);line-height:1.35}
.mmcell i,.mchchips span,.mstrp em,.rtl .mmcell i,.rtl .mchchips span{font-size:max(12px,.76rem);line-height:1.45}
.mmx,.mst{grid-template-columns:22px minmax(0,1fr)}
.mmgrid{grid-template-rows:repeat(6,minmax(30px,auto));gap:5px}
.mstgrid{gap:5px}
.mmcell,.mstcell{padding:7px 8px}
.mstbars{flex:none;height:38px}.mstbars i{width:14px}
.mstbars u{font-size:11px}
.mchchips span{padding:2px 7px}
.mst{grid-template-rows:minmax(0,1fr) 22px 22px}
.mstleg i{width:10px;height:10px}
.mstrp{padding:8px 4px}
:root[data-reader="dark"] .mmcell b,:root[data-reader="dark"] .mstcell b,:root[data-reader="dark"] .mchcol b{color:var(--leaf)}
:root[data-reader="dark"] .mmcell.st b,:root[data-reader="dark"] .mmcell.ga b,:root[data-reader="dark"] .mchcol.out b{color:#fff}
:root[data-reader="dark"] .mstbars i:not([style*="--b:1"]):not([style*="--b:2"]){background:#7d7cf0}
:root[data-reader="dark"] .mstleg span:not([style*="--b:1"]):not([style*="--b:2"]) i{background:#7d7cf0}
/* players: steps always in readable rows under their pillar */
.plygrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.plygrp,.plypill,.rtl .plypill{grid-column:1/-1}
.plypill,.rtl .plypill{clip-path:none;border-radius:12px}
.plygrp{padding-top:10px}
.plystep{grid-column:auto;padding:10px 8px 12px}
.plystep span,.rtl .plystep span{font-size:max(12.5px,.8rem);line-height:1.4;text-transform:none}
/* flow: numbered steps on a clean grid; rows never collide (the numbers carry the order) */
.flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.flow .farrow{display:none}
.fnode{max-width:none;padding:14px 16px}
.fnode b{font-size:.85rem;width:26px;height:26px;border-radius:50%;background:#ffffff2e;display:inline-flex;align-items:center;justify-content:center;opacity:1}
.fnode span{font-size:1.02rem}
/* general floor for tiny labels */
.pilstep span,.strln span,.strpil p,.jbody,.tren,.trechips span,.qdchips span,.cllab,.calm,.skey em,.jfoot{font-size:max(12.5px,.8rem)}

/* ---------- sidebar (theme-aware) ---------- */
.side{background:var(--sb-bg);color:var(--sb-ink)}
:root:is([data-reader="light"],[data-reader="sepia"]) .side{border-inline-end:1px solid var(--sb-line);box-shadow:none}
:root:is([data-reader="light"],[data-reader="sepia"]) .nav button{color:var(--sb-dim)}
:root:is([data-reader="light"],[data-reader="sepia"]) .nav button.main{color:var(--sb-ink)}
:root:is([data-reader="light"],[data-reader="sepia"]) .nav button:hover{background:var(--sb-hover)}
:root:is([data-reader="light"],[data-reader="sepia"]) .nav .num{background:var(--sb-num);color:var(--sb-ink)}
:root:is([data-reader="light"],[data-reader="sepia"]) .nav .num.done{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}
:root:is([data-reader="light"],[data-reader="sepia"]) .nav button[aria-current]{background:linear-gradient(90deg,var(--orange),#ffa733);color:#1b1200;box-shadow:0 6px 16px rgba(239,125,0,.25)}
:root:is([data-reader="light"],[data-reader="sepia"]) .nav button[aria-current] .num{background:#fff;color:var(--orange)}
:root:is([data-reader="light"],[data-reader="sepia"]) .nav{scrollbar-color:var(--line) transparent}
:root:is([data-reader="light"],[data-reader="sepia"]) .nav::-webkit-scrollbar-thumb{background:var(--line)}
:root:is([data-reader="light"],[data-reader="sepia"]) .uback{color:var(--sb-ink);background:var(--sb-hover);border-color:var(--sb-line)}
:root:is([data-reader="light"],[data-reader="sepia"]) .uback:hover{color:var(--sb-ink);background:color-mix(in srgb,var(--sb-hover) 100%,var(--line))}
:root:is([data-reader="light"],[data-reader="sepia"]) .sidetitle small{color:var(--orange)}
:root:is([data-reader="light"],[data-reader="sepia"]) .side .langs button:not(.langdd-btn):not(.langdd-item){color:var(--sb-ink);border-color:var(--sb-line)}
:root:is([data-reader="light"],[data-reader="sepia"]) .side .langs button[aria-pressed="true"]{color:#1b1200;border-color:var(--orange)}
:root:is([data-reader="light"],[data-reader="sepia"]) .sclose{color:var(--sb-ink);border-color:var(--sb-line);background:var(--sb-hover)}
:root:is([data-reader="light"],[data-reader="sepia"]) .slogo,:root:is([data-reader="light"],[data-reader="sepia"]) .side .logos img{box-shadow:0 0 0 1px var(--sb-line)}
.nav button{border-radius:12px;padding:8px 10px}
.nav .num{width:25px;height:25px}
.nav .navgrp{display:flex;flex-direction:column;gap:2px;list-style:none;margin:0;padding:0}
.navgrp-btn{font-weight:800!important}
.navgrp-btn::before{content:"▸";display:inline-block;width:1em;flex:none;font-size:.8rem;opacity:.8}
.navgrp-btn[aria-expanded="true"]::before{content:"▾"}
.navsub{display:flex;flex-direction:column;gap:2px;list-style:none;margin:0;padding:0;padding-inline-start:12px}
.navsub[hidden]{display:none!important}
:root:is([data-reader="light"],[data-reader="sepia"]) .nav .navgrp-btn{color:var(--forest)}
:root[data-reader="dark"] .nav .navgrp-btn{color:#ffb040}

/* ---------- header home link (mark + site name) and the chapter-bar Home control ---------- */
a.cui-brand{display:flex;align-items:center;gap:8px;color:inherit;text-decoration:none;font-weight:700;line-height:1.25;min-width:0;min-height:44px;box-sizing:border-box}
a.cui-brand img{display:block;height:40px;width:auto;max-width:46px;background:#fff;border-radius:8px;padding:4px;flex:none;object-fit:contain}
.cui-brand-name{font-size:.92rem;min-width:0;overflow-wrap:anywhere}
a.cui-home{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 14px;border-radius:99px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-weight:700;font-size:.9rem;text-decoration:none;flex:none;white-space:nowrap}
a.cui-home:hover{border-color:var(--orange)}
a.cui-home:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
a.homebrand,a.brand{color:inherit;text-decoration:none}
a.homebrand{display:inline-flex;align-items:center;gap:10px;font-weight:700;min-width:0;line-height:1.2;min-height:44px;box-sizing:border-box}
a.homebrand img{height:36px;width:auto;background:#fff;border-radius:8px;padding:3px;flex:none}
a.brand,.bar a.brand,.topbar a.homebrand{min-height:44px;box-sizing:border-box}
.topbar a.homebrand,.bar a.homebrand{color:#fff}
.ctrl{flex-wrap:wrap}
/* RTL: the header row already follows direction, so the home link sits on the right and the controls on the left. */
html[dir="rtl"] .bar,html[dir="rtl"] .topbar{direction:rtl}

/* ---------- control bar ---------- */
.stage{position:relative}
.ctrl{gap:10px}
.cui-aa{font:inherit;font-weight:800;width:44px;height:44px;flex:none;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1;font-family:"Barlow",sans-serif;font-size:1.05rem;padding:0}
.ctrl .cui-aa{width:44px;height:44px}
.cui-aa small{font-size:.78em;font-weight:700}
.cui-aa[aria-expanded="true"]{border-color:var(--orange);box-shadow:0 0 0 3px color-mix(in srgb,var(--orange) 25%,transparent)}
.bar .cui-aa,.topbar .cui-aa{background:#ffffff1a;color:#fff;border-color:#ffffff55}
.gatebox .cui-aa{background:#fff;color:#1c1b5e;border-color:#fff}
.cui-aa:focus-visible{outline:3px solid var(--orange);outline-offset:2px}

/* ---------- language switch (one component, two looks) ----------
   Markup is built by langs.js. The host keeps .langs.
   On-light: white/surface pill, ink text, line border — course sidebar in Light and Soft.
   On-dark: translucent pill, light border, white text — sign-in video, every navy header
   (.bar / .topbar) and the course sidebar in Dark.
   Values #fff / #ffffff1a / #ffffff55 are the same ones .bar .cui-aa and .linkbtn already use;
   there is no translucent-white token. */
.langs{display:inline-block;position:relative;background:none;border:0;padding:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.langdd{position:relative;display:inline-block}
.langs .langdd-btn{
  appearance:none;-webkit-appearance:none;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:none;align-self:center;
  flex-wrap:nowrap;white-space:nowrap;
  box-sizing:border-box;width:auto;height:44px;min-height:44px;min-width:44px;
  margin:0;padding:0 14px;
  font:inherit;font-weight:600;font-size:.9rem;line-height:1;
  border-radius:99px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);
  cursor:pointer;
  transition:background .15s ease,border-color .15s ease,box-shadow .15s ease}
.langs .langdd-btn:hover{border-color:var(--orange)}
.langs .langdd-btn:active{transform:translateY(1px)}
.langs .langdd-btn:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.langs .langdd-btn[aria-expanded="true"]{border-color:var(--orange);box-shadow:0 0 0 3px color-mix(in srgb,var(--orange) 25%,transparent)}
.langs .langdd-globe{width:18px;height:18px;flex:none;display:block}
.langs .langdd-cur{white-space:nowrap;line-height:1}
.gatetop .langs .langdd-btn,
.topbar .langs .langdd-btn,
.bar .langs .langdd-btn,
.side .langs .langdd-btn{
  background:#ffffff1a;color:#fff;border-color:#ffffff55}
.gatetop .langs .langdd-btn:hover,
.topbar .langs .langdd-btn:hover,
.bar .langs .langdd-btn:hover,
.side .langs .langdd-btn:hover{background:#ffffff2e;border-color:#ffffff88}
:root:is([data-reader="light"],[data-reader="sepia"]) .side .langs .langdd-btn{
  background:var(--surface);color:var(--sb-ink);border-color:var(--sb-line)}
:root:is([data-reader="light"],[data-reader="sepia"]) .side .langs .langdd-btn:hover{
  background:var(--surface);border-color:var(--orange)}
.bar .langs .langdd-btn,.topbar .langs .langdd-btn{font-size:1.02rem}
@media (max-width:600px){
  .bar .langs .langdd-btn,.topbar .langs .langdd-btn,.gatetop .langs .langdd-btn{font-size:.9rem}
}
.langdd-menu{
  position:absolute;z-index:80;top:calc(100% + 6px);inset-inline-end:0;
  min-width:11.5rem;max-width:calc(100vw - 16px);max-height:min(320px,calc(100dvh - 16px));
  display:flex;flex-direction:column;gap:2px;padding:6px;overflow:auto;
  background:var(--surface);color:var(--ink);
  border:1px solid var(--line);border-radius:16px;
  box-shadow:0 24px 60px rgba(10,13,30,.28);
  opacity:1;transition:opacity .16s ease}
.langdd-menu[hidden]{display:none}
@starting-style{.langdd-menu{opacity:0}}
.langdd-menu .langdd-item{
  display:flex;align-items:center;gap:8px;
  min-height:44px;padding:8px 12px;box-sizing:border-box;
  border:0;border-radius:12px;background:transparent;color:var(--ink);
  font:inherit;font-size:.95rem;font-weight:600;line-height:1.3;text-align:start;
  cursor:pointer;white-space:nowrap;
  transition:background .15s ease}
.langdd-menu .langdd-item:hover{background:var(--soft)}
.langdd-menu .langdd-item:active{background:color-mix(in srgb,var(--orange) 14%,var(--surface))}
.langdd-menu .langdd-item[aria-checked="true"]{background:var(--orange);color:#1b1200;font-weight:700}
.langdd-menu .langdd-item[aria-checked="true"]::after{content:"✓";margin-inline-start:auto;font-weight:800}
.langdd-menu .langdd-item:focus-visible{outline:3px solid var(--orange);outline-offset:-2px}
@media (prefers-reduced-motion:reduce){
  .langs .langdd-btn,.langdd-menu,.langdd-item{transition:none}
  .langs .langdd-btn:active{transform:none}
}

/* reading progress within the current slide */
.cui-rp{position:absolute;inset-inline:0;top:0;height:3px;z-index:6;pointer-events:none;transition:opacity .2s}
.cui-rp i{display:block;height:100%;background:linear-gradient(90deg,var(--leaf),var(--orange));transform:scaleX(0);transform-origin:left;transition:transform .08s linear}
[dir="rtl"] .cui-rp i,.rtl .cui-rp i{transform-origin:right}

/* ---------- settings panel ---------- */
.cui-panel{position:fixed;z-index:95;inset-block-end:76px;inset-inline-end:16px;width:min(372px,calc(100vw - 24px));max-height:calc(100dvh - 100px);overflow:auto;
  background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:18px;padding:14px 16px 16px;box-shadow:0 24px 60px rgba(10,13,30,.28);font-size:15px;line-height:1.45}
.cui-panel[hidden]{display:none}
.cui-ph{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.cui-ph b{font-size:1.05rem}
.cui-x{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--soft);color:var(--ink);cursor:pointer;font-size:1rem}
.cui-sec{display:flex;flex-direction:column;gap:7px;margin-top:12px}
.cui-lab{font-size:.8rem;font-weight:700;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.cui-panel.rtl .cui-lab{letter-spacing:0;text-transform:none;font-size:.85rem}
.cui-seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.cui-seg button,.cui-size button{font:inherit;font-size:.92rem;font-weight:600;min-height:44px;padding:6px 8px;border-radius:12px;border:1.5px solid var(--line);background:var(--ground);color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:7px;line-height:1.2;text-align:center}
.cui-seg button[aria-checked="true"]{border-color:var(--orange);background:color-mix(in srgb,var(--orange) 12%,var(--surface))}
.cui-seg button:focus-visible,.cui-size button:focus-visible,.cui-x:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.cui-sw{width:16px;height:16px;border-radius:50%;flex:none;border:1px solid #0003}
.cui-sw-light{background:#fff}.cui-sw-sepia{background:#f1e4c8}.cui-sw-dark{background:#141833}
.cui-size{display:flex;align-items:center;gap:8px}
.cui-size button{min-width:52px;font-family:"Barlow",sans-serif;font-weight:800}
.cui-size button:disabled{opacity:.4;cursor:default}
.cui-size output{min-width:56px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
.cui-size .cui-reset{margin-inline-start:auto;font-family:inherit;font-weight:600;min-width:0}
.cui-hint{margin:14px 0 0;font-size:.82rem;color:var(--muted);max-width:none}
.cui-panel.cui-top{inset-block-end:auto;inset-block-start:64px}
@media (max-width:640px){.cui-panel{inset-inline:8px;inset-block-end:calc(70px + env(safe-area-inset-bottom,0px));width:auto}.cui-panel.cui-top{inset-block-start:auto}}

/* ---------- enlarge button + lightbox ---------- */
.cui-zoomable{position:relative}
.cui-zbtn{position:absolute;top:-13px;inset-inline-end:-8px;z-index:3;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;cursor:zoom-in;box-shadow:0 4px 14px rgba(20,26,51,.16);opacity:.8;transition:opacity .15s,transform .15s;padding:0}
.cui-zbtn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cui-zbtn:hover,.cui-zbtn:focus-visible,.cui-zoomable:hover>.cui-zbtn{opacity:1;transform:scale(1.08)}
.cui-zbtn:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.scroll.cui-zoomable{overflow:visible}
.scroll.cui-zoomable>table{display:block;overflow-x:auto;border-radius:14px}
/* 44px hit area on touch. The extra pixels hang outside the diagram (transparent
   padding toward the corner); the glyph stays about the same size. RTL uses
   inset-inline-end, so the control stays on the start-side corner. */
@media (max-width:760px),(pointer:coarse){
  .cui-zbtn{width:44px;height:44px;top:-24px;inset-inline-end:-14px;padding-block-end:10px;padding-inline-start:10px;background:transparent;border-color:transparent;box-shadow:none;opacity:1;border-radius:14px}
  .cui-zbtn svg{width:18px;height:18px;background:var(--surface);border:1px solid var(--line);border-radius:50%;padding:7px;box-sizing:content-box;box-shadow:0 4px 14px rgba(20,26,51,.16)}
  .cui-zbtn:hover,.cui-zbtn:focus-visible,.cui-zoomable:hover>.cui-zbtn{transform:none}
  .cui-zoomable{margin-top:14px}
}
.langs button,.bar .langs button,.topbar .langs button{min-height:44px;min-width:44px;box-sizing:border-box}
.cui-lb{position:fixed;inset:0;z-index:90;background:rgba(8,10,24,.88);backdrop-filter:blur(4px)}
.cui-lb[hidden]{display:none}
.cui-lbview{position:absolute;inset:0;overflow:auto;padding:70px 16px 24px;display:flex;justify-content:safe center;align-items:safe center;overscroll-behavior:contain;cursor:zoom-out}
.cui-lbcan{cursor:auto}
.cui-lbwrap{background:var(--ground);border-radius:18px;padding:16px;box-shadow:0 30px 80px rgba(0,0,0,.45);flex:none;gap:16px}
.cui-lbwrap>*{margin:0!important;max-width:none!important}
.cui-lbbar{position:fixed;top:calc(12px + env(safe-area-inset-top,0px));inset-inline:0;margin-inline:auto;width:max-content;max-width:calc(100vw - 16px);z-index:2;display:flex;gap:8px;padding:6px;border-radius:99px;background:rgba(20,24,51,.92);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.cui-lbbar button{min-width:44px;height:44px;border-radius:99px;border:1px solid #ffffff40;background:transparent;color:#fff;font:inherit;font-weight:700;font-size:1.05rem;cursor:pointer;padding:0 14px}
.cui-lbbar button:hover{background:#ffffff1f}
.cui-lbbar button:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.cui-lbbar .cui-lbx{background:var(--orange);border-color:var(--orange);color:#1b1200}
html.cui-lbopen .page,html.cui-lbopen .slide{overflow:hidden}
@media print{.cui-zbtn,.cui-aa,.cui-panel,.cui-lb,.cui-rp{display:none!important}body>.wrap,#app>.wrap,body.portal #gate .gatebox{zoom:1!important}}
/* Supply Chain uses the sky accent the other academies already take from forest, orange, plum and leaf. */
#app[data-academy="sc"] .rule{background:linear-gradient(90deg,var(--sky),#9ee7ee)}
#app[data-academy="sc"] .sidetitle small{color:#7ed4de}
#app[data-academy="sc"] .hero img{box-shadow:0 0 0 4px var(--sky),0 14px 34px rgba(0,0,0,.24)}
:root[data-reader="dark"] body.portal h2,
:root[data-reader="dark"] body.portal .hero h2,
:root[data-reader="dark"] body.portal .card h3,
:root[data-reader="dark"] body.portal .cert h1,
:root[data-reader="dark"] body.portal .wordmark,
:root[data-reader="dark"] body.portal .vcard h1{color:var(--leaf)}
:root[data-reader="sepia"] body.portal h2,
:root[data-reader="sepia"] body.portal .card h3{color:#3a2a12}
@media (prefers-reduced-motion:reduce){.cui-zbtn,.cui-rp i{transition:none}}
/* phones: the chapter photo would take a whole row of the small screen, so it steps aside for the content */
@media (max-width:700px){.chead.hasimg .himg,.shead.hasimg .himg{display:none}.chead.hasimg,.shead.hasimg{display:flex;flex-direction:column}}