/* KICKIT is made for phones. On a computer (wide screen + mouse) the app sits in a phone frame in the
   middle of the screen, on the app's sky blue, with a QR code beside it to open it on the phone.
   Phones and tablets get the normal full screen. Earlier tries: docs/desktop-v1.css, docs/desktop-v3-cream.css. */
#desk-aside { display: none; }

@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  html { background: #9BD1ED; }
  html body, html.dark body { background: radial-gradient(circle at 30% 20%, #BFE3F5 0, #9BD1ED 55%, #86C4E3 100%) fixed !important; }
  html, body { height: auto; }
  body {
    margin: 0; min-height: 100vh;
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 64px;
  }
  #root {
    grid-column: 2; position: relative;
    width: 390px; height: min(844px, calc(100vh - 48px)); height: min(844px, calc(100dvh - 48px));
    overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
    background: #F8F5EC; border: 12px solid #1C3B40; border-radius: 54px;
    box-shadow: 0 0 0 2px #2E5560, 0 30px 60px rgba(28, 59, 64, .35);
    transform: translateZ(0); /* keeps the app's full-screen layers (drills, sheets) inside the frame */
  }
  #root::-webkit-scrollbar { display: none; }
  html.dark #root { background: #121A1C; }

  /* Beside the phone, in the app's own type and marks. */
  #desk-aside {
    grid-column: 3; justify-self: start;
    display: flex; flex-direction: column; align-items: flex-start; gap: 14px; max-width: 360px;
    font-family: 'Nunito Sans', system-ui, sans-serif; color: #1C3B40;
  }
  #desk-aside .eyebrow { font-size: 13px; font-weight: 800; color: #4C6E6A; letter-spacing: .02em; }
  #desk-aside h2 { font-family: 'Fraunces Variable', Georgia, serif; font-weight: 700; font-size: 32px; line-height: 1.2; margin: 0; white-space: nowrap; }
  #desk-aside h2 span { white-space: nowrap; background: #F5D64D; border-radius: 8px; padding: 0 6px; margin: 0 -2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  #desk-aside p { font-size: 17px; line-height: 1.45; margin: 0; }
  #desk-aside .qr { margin-top: 6px; background: #fff; border: 1px solid #EFEBE0; border-radius: 16px; padding: 14px; box-shadow: 3px 4px 0 #1C3B40; }
  #desk-aside .qr img { display: block; width: 156px; height: 156px; }
  #desk-aside small { font-size: 13px; font-weight: 700; color: #1C3B40; opacity: .8; }
}

@media (min-width: 900px) and (max-width: 1179px) and (hover: hover) and (pointer: fine) {
  body { column-gap: 32px; }
  #desk-aside { max-width: 220px; }
  #desk-aside h2 { font-size: 20px; }
  #desk-aside p { font-size: 15px; }
  #desk-aside .qr img { width: 128px; height: 128px; }
}