/* Device fit and the install entry. Rides on the approved shell without changing its files:
   phones up to 760px, tablets from 761px to 1180px, wide screens above. */
:root{--eg-safe-top:env(safe-area-inset-top,0px);--eg-safe-right:env(safe-area-inset-right,0px);--eg-safe-bottom:env(safe-area-inset-bottom,0px);--eg-safe-left:env(safe-area-inset-left,0px);--eg-header:65px}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overscroll-behavior-y:none}
/* The demonstration bars are not served, so the shell owns the whole height of the screen. */
.app-shell{min-height:100vh;min-height:100dvh;padding-left:var(--eg-safe-left);padding-right:var(--eg-safe-right)}
.workspace-header{position:sticky;top:0;z-index:30;background:var(--bg);height:calc(var(--eg-header) + var(--eg-safe-top));padding-top:var(--eg-safe-top)}
#screen img,#screen video,#screen iframe{max-width:100%}
dialog{max-height:85dvh}
#toast{bottom:calc(24px + var(--eg-safe-bottom))}

/* --- install: the entry in the menu, on the sign-in screen, the invite and the sheet --- */
.eg-install-nav{display:flex;align-items:center;gap:10px;width:100%;margin:10px 0 12px;padding:10px 12px;min-height:44px;border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--text);font:inherit;font-weight:600;cursor:pointer;text-align:left}
.eg-install-nav:hover,.eg-install-nav:focus-visible{border-color:var(--yellow,#f2d42c);color:var(--yellow,#f2d42c)}
.eg-install-nav[hidden],.eg-install-login[hidden]{display:none}
.eg-install-login{display:grid;gap:8px;margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.eg-install-login button{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:48px}
.eg-install-login small{color:#8b9099;font-size:12px;line-height:1.4}
.eg-install-invite{display:grid;grid-template-columns:40px minmax(0,1fr) auto auto;align-items:center;gap:12px;margin:0 0 18px;padding:12px;border:1px solid #4b4520;border-radius:10px;background:#1d1c14}
.eg-install-invite img{border-radius:9px}
.eg-install-invite strong{display:block;font-size:14px;line-height:1.3}
.eg-install-invite small{display:block;color:#a3a7ae;font-size:12px;line-height:1.35}
.eg-install-invite .primary{min-height:44px;padding:0 16px}
.eg-install-close{width:44px;height:44px;border:0;background:transparent;color:#a3a7ae;font-size:24px;line-height:1;cursor:pointer}
.eg-sheet{position:fixed;inset:0;z-index:90;display:grid;place-items:center}
.eg-sheet[hidden]{display:none}
.eg-sheet-backdrop{position:absolute;inset:0;background:#000a}
.eg-sheet-panel{position:relative;width:min(420px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:26px 24px 22px;border:1px solid #484e58;border-radius:14px;background:#1b1e23;color:#e7e9ed;box-shadow:0 30px 130px #0008;outline:0;overscroll-behavior:contain}
.eg-sheet-panel img{border-radius:13px;margin-bottom:14px}
.eg-sheet-panel h2{margin:0 0 8px;font-size:20px;line-height:1.25}
.eg-sheet-panel p{margin:0 0 12px;color:#b9bdc5;font-size:14px;line-height:1.5}
.eg-sheet-steps{padding:12px 14px;border-left:3px solid var(--yellow,#f2d42c);background:#23262c;color:#e7e9ed!important;border-radius:0 8px 8px 0}
.eg-sheet-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.eg-sheet-actions button{flex:1 1 140px;min-height:48px;font-size:15px}
.eg-sheet-open,.eg-sheet-open body{overflow:hidden}

/* --- tablets: the menu keeps its place, the content takes the rest --- */
@media(min-width:761px) and (max-width:1180px){
  .app-shell{grid-template-columns:200px minmax(0,1fr)}
  #screen{padding:26px 24px 34px}
}

/* --- phones: the menu becomes a drawer over the page, as the approved shell does below 590px --- */
@media(max-width:760px){
  :root{--eg-header:56px}
  .app-shell{grid-template-columns:minmax(0,1fr)}
  .mobile-menu{display:flex}
  .workspace-header{padding:var(--eg-safe-top) 12px 0;justify-content:flex-start}
  .header-right{margin-left:auto;gap:8px}
  .breadcrumb{font-size:12px;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  .breadcrumb>span{display:none}
  .sidebar{display:none;position:fixed;top:calc(var(--eg-header) + var(--eg-safe-top));left:0;bottom:0;z-index:35;width:min(86vw,320px);min-height:0;padding:18px 14px calc(8px + var(--eg-safe-bottom)) calc(14px + var(--eg-safe-left));overflow-y:auto;overscroll-behavior:contain;box-shadow:20px 0 50px #0009}
  .sidebar.open{display:flex}
  .sidebar nav a{min-height:46px;padding:11px 12px;font-size:14px;gap:12px}
  .sidebar .wordmark{margin:2px 6px 18px}
  .sidebar-bottom small{font-size:11px}
  #screen{padding:20px 16px calc(28px + var(--eg-safe-bottom));min-height:0}
  h1{font-size:27px}
  .page-head{align-items:flex-start;flex-wrap:wrap;gap:14px}
  .page-head p{font-size:13px}
  .two-col,.equal-col{grid-template-columns:minmax(0,1fr)}
  .panel{padding:18px}
  /* Library: the search takes a row and the two views share the next; a course is one column. */
  .filter-bar{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .filter-bar .search-wrap{grid-column:1/-1}
  .library-grid .course-tile,.library-grid.list .course-tile{display:block}
  .library-grid .course-cover,.library-grid.list .course-cover{width:auto;height:auto;min-height:84px;font-size:20px}
  .course-cover small{font-size:11px}
  .course-info p{font-size:12px}
  /* Mission: the counters stay on one line and slide sideways instead of folding their text. */
  .ms-hud{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .ms-hud .ms-icon-button{position:sticky;right:0;margin-left:auto;min-width:44px;height:auto;background:var(--bg);box-shadow:-12px 0 12px var(--bg)}
  .ms-hud::-webkit-scrollbar{display:none}
  .ms-hud-item,.ms-hud-xp{flex:0 0 auto;white-space:nowrap}
  .ms-hud-item small{font-size:11px}
  .ms-tabbar button{font-size:11px}
  /* iOS zooms the page when a field with text under 16px takes the focus. */
  input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{font-size:16px}
  .eg-sheet{place-items:end center}
  .eg-sheet-panel{width:100%;max-height:calc(100dvh - 40px);border-radius:16px 16px 0 0;border-width:1px 0 0;padding:24px 20px calc(20px + var(--eg-safe-bottom))}
}
@media(max-width:374px){
  #screen{padding-left:12px;padding-right:12px}
  h1{font-size:24px}
  .eg-install-invite{grid-template-columns:minmax(0,1fr) auto auto}
  .eg-install-invite img{display:none}
}

/* --- fingers: nothing to tap is smaller than 44px --- */
@media(pointer:coarse){
  button,select,.tool,.icon-link,a.button,nav a,[role=tab],summary{min-height:44px}
  .tool,.icon-link{min-width:44px}
  input:not([type=checkbox]):not([type=radio]):not([type=range]),textarea{min-height:46px}
}
/* --- a phone lying down: little height, so the sheet and the dialogs scroll inside --- */
@media(max-height:480px) and (orientation:landscape){
  .eg-sheet{place-items:center}
  .eg-sheet-panel{max-height:calc(100dvh - 16px);border-radius:14px;border-width:1px}
  dialog{max-height:94dvh}
}
@media(prefers-reduced-motion:reduce){.eg-sheet-panel{transition:none}}