/* The web page's styles (web-app/shell/), loaded by index.html. Configured
   by web-app/shell_install.cmake, which fills in the  values. */
html, body {
  margin: 0; padding: 0; width: 100%; height: 100%;
  height: 100dvh; overflow: hidden; position: fixed; inset: 0;
  background: #eef2fc;
  overscroll-behavior: none;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  touch-action: none;
  font: 600 16px/1.4 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Roboto, Arial, sans-serif;
  color: #2a2350;
}
/* The app's window. Kept inside the safe area (notch, home indicator):
   the Qt window does not get the safe-area insets on the web. */
#screen {
  position: absolute;
  top: env(safe-area-inset-top, 0px); right: env(safe-area-inset-right, 0px);
  bottom: env(safe-area-inset-bottom, 0px); left: env(safe-area-inset-left, 0px);
  touch-action: none;
  /* Never narrower than 4:3, the narrowest screen the landscape-only iOS
     app gets (iPad): a tall browser window letterboxes the app. */
  height: min(calc(100% - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)),
              calc(0.75 * (100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px))));
  margin: auto 0;
}
#loading, #rotate {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  background: #eef2fc url(loading-bg.eb55f9251ace.jpg) center / cover no-repeat;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  box-sizing: border-box;
}
#loading { z-index: 2; transition: opacity .4s ease-out; }
#loading.done { opacity: 0; pointer-events: none; }
#loading[hidden] { display: none; }
/* The app's own loading screen (src/view/main/loading): eight black nodes
   on a circle bouncing in turn, inside faint blue rings. */
.rings { position: relative; width: 240px; height: 240px; }
.ring { position: absolute; left: 50%; top: 50%; border-radius: 50%;
        background: rgba(20, 30, 200, .07); border: 1px solid rgba(20, 30, 200, .08);
        transform: translate(-50%, -50%); }
.node { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px;
        background: url(loading-node.eb55f9251ace.png) center / contain no-repeat;
        animation: bounce 1.5s linear infinite; }
/* Ring sizes and each node's angle and turn (no style="" attributes: the
   site's Content-Security-Policy does not allow inline styles). */
.ring.r1 { width: 250px; height: 250px; }
.ring.r2 { width: 350px; height: 350px; }
.ring.r3 { width: 450px; height: 450px; }
.node.n0 { --a: 0deg; animation-delay: 0s; }
.node.n1 { --a: 45deg; animation-delay: .1875s; }
.node.n2 { --a: 90deg; animation-delay: .375s; }
.node.n3 { --a: 135deg; animation-delay: .5625s; }
.node.n4 { --a: 180deg; animation-delay: .75s; }
.node.n5 { --a: 225deg; animation-delay: .9375s; }
.node.n6 { --a: 270deg; animation-delay: 1.125s; }
.node.n7 { --a: 315deg; animation-delay: 1.3125s; }
@keyframes bounce {
  0% { transform: rotate(var(--a)) translate(100px) scale(1); }
  11% { transform: rotate(var(--a)) translate(100px) scale(1.15); }
  22%, 100% { transform: rotate(var(--a)) translate(100px) scale(1); }
}
@media (prefers-reduced-motion: reduce) { .node { animation: none; transform: rotate(var(--a)) translate(100px); } }
#status { margin-top: 28px; min-height: 1.4em; }
#bar { width: 220px; height: 6px; margin-top: 10px; border-radius: 3px; background: rgba(20, 30, 200, .12); overflow: hidden; }
#bar > div { height: 100%; width: 100%; border-radius: 3px; transform-origin: left; transform: scaleX(0);
             background: linear-gradient(90deg, #2f86d6, #7b4fd0); transition: transform .3s linear; }
#bytes { margin-top: 6px; min-height: 1.3em; font-size: 13px; font-weight: 500; opacity: .7;
         font-variant-numeric: tabular-nums; }
#error { display: none; max-width: 32em; margin: 24px; font-weight: 500; }
#error button[hidden] { display: none; }
#error button { margin-top: 16px; font: inherit; font-weight: 600; padding: 10px 22px; border: 0;
                border-radius: 22px; background: #5b3fd0; color: #fff; }
body.failed .rings, body.failed #bar, body.failed #status, body.failed #bytes { display: none; }
body.failed #error { display: block; }
/* The iOS app is landscape only. A phone or tablet held upright gets this
   overlay; the app stays loaded underneath. */
#rotate { z-index: 3; display: none; }
@media (orientation: portrait) and (pointer: coarse) { #rotate { display: flex; } }
#rotate svg { width: 96px; height: 96px; margin-bottom: 20px; }
#rotate .phone { animation: turn 2.4s ease-in-out infinite; transform-origin: 48px 48px; }
@keyframes turn { 0%, 25% { transform: rotate(0); } 55%, 100% { transform: rotate(-90deg); } }
@media (prefers-reduced-motion: reduce) { #rotate .phone { animation: none; } }