/* Space setting: keep the SQL controls and dialogue readable at every size. */
html { min-height: 100%; background: #080f20; }
body {
  min-height: 100vh;
  color: #e5edf8;
  background-color: #080f20;
  background-image: radial-gradient(ellipse at 8% 40%, #35306466, transparent 52%),
    radial-gradient(circle at 83% 15%, #183b5a77, transparent 35%),
    radial-gradient(1px 1px at 25px 30px, #b9dcf1 95%, transparent),
    radial-gradient(1px 1px at 90px 105px, #8e9fc7 95%, transparent);
  background-size: auto, auto, 151px 173px, 229px 257px;
  background-attachment: fixed;
}
.row { max-width: 1200px; }
.row, .columns, .text-box { box-sizing: border-box; }
.ribbon {
  max-width: 1200px; height: 100px; background: none;
  border-bottom: 1px solid #33435c; display: flex; align-items: center; gap: 22px;
}
.ribbon > .left, .ribbon > .right { display: none; }
.ribbon .title { float: none; margin: 0; }
.ribbon h1 { margin: 2px 0 0; color: #edf6ff; font-size: 32px; letter-spacing: 1px; }
.mission-kicker, .section-label { font: 11px/1.5 Consolas, monospace; letter-spacing: 1.5px; text-transform: uppercase; color: #91b9cd; }
.ribbon .logo { margin: 0 12px 0 auto; }
.ribbon .logo img { width: 115px; height: 86px; }
.ribbon .menu-button { position: static; margin: 0 0 0 18px; }
.red.button, .green.button, .reveal-modal .button {
  background-color: #317d8e; border: 1px solid #59a8b8;
  color: #fff; box-shadow: none; text-shadow: none;
}
.red.button:hover, .red.button:focus, .green.button:hover, .reveal-modal .button:hover { background-color: #226273; }
.button:focus-visible, a:focus-visible { outline: 3px solid #a6f5ea; outline-offset: 3px; }
.button.disabled { opacity: .45; }
#screen-index { min-height: 0; padding-top: 20px; }
#screen-index > .text-box-container { display: flex; align-items: flex-start; gap: 30px; }
#story { position: static; width: 360px; flex: 0 0 360px; padding: 0 14px; }
#bubble { margin: 0; }
#bubble .text-box { width: 100% !important; min-height: 175px; }
.text-box { background: #17253b; border: 1px solid #3b516e; border-radius: 14px; box-shadow: 0 8px 24px #0003; }
#exercise_text { color: #edf3fc; font-size: 16px; font-weight: 400; line-height: 1.65; }
#continue_button, #certificate_button { font-size: 14px; padding: 12px 20px; margin-bottom: 0; }
.text-box-pointer { border-top-color: #17253b; }
.text-box-pointer-shadow { border-top-color: #3b516e; }
#screen-index .bg-image-container { display: flex; justify-content: space-between; margin: 25px 0 0; padding: 0; }
#screen-index .bg-avatar, #screen-index .bg-avatar2 {
  position: relative; z-index: 0; flex: 0 1 50%; width: 160px; height: 250px;
  margin: 0; padding: 0; background-size: contain; background-position: center bottom; background-repeat: no-repeat;
}
#screen-index .bg-avatar { background-image: url('../images/space/astronaut.svg'); }
#query_section { float: none; flex: 1; min-width: 0; padding: 0 14px 0 0; }
#querylog { min-height: 240px; max-height: 640px; padding: 16px; background: #0d192b; overflow: auto; }
#querylog:empty::before { content: 'SQL'; color: #2e465f; font: 48px Consolas, monospace; }
#querylog pre { margin: 0 0 12px; }
#querylog pre code { border-radius: 6px; background: #203149; color: #d9eefb; }
#querylog table { border: 1px solid #3b516e; border-radius: 6px; width: 100%; background: #17253b; }
#querylog table th { background: #263e55; color: #b3eee5; }
#querylog table td { color: #e0e9f4; }
#querylog table tr:nth-child(even) { background: #1d3045; }
#querylog .alert-box.success { background: #21594e; border-color: #368572; }
#editor { background: #1d1f21; color: #e1e7ef; border: 1px solid #55718d; border-radius: 10px; height: 110px; padding: 0; margin: 16px 0 !important; font-size: 17px; }
#submit-query-button { margin: 0 14px 0 0 !important; font-size: 15px; padding: 13px 23px; }
#tablelist { margin: 28px auto 0; padding: 0 14px 24px; }
#tablelist .save-button { background: #132136; border: 1px solid #334a63; box-shadow: none; text-align: left; cursor: default; padding: 18px 22px; }
#tablelist .columns .columns { float: none; color: #c2d6e6; font: 13px/1.9 Consolas, monospace; padding: 0; overflow-wrap: anywhere; }
#tablelist .section-label { margin-bottom: 10px; color: #75d6cf; }
.reveal-modal, .menu-content, .joyride-tip-guide { background-color: #17253b; border: 1px solid #526b87; border-radius: 12px; color: #edf3fc; }
.reveal-modal h2, .joyride-tip-guide h4 { color: #86e1d5; }
.reveal-modal p, .joyride-tip-guide p { color: #e1eaf5; }
.reveal-modal .close-reveal-modal { color: #e1eaf5; }
.phone-logobar, .phone-titlebar { background: #14233a; box-shadow: none; }
@media (max-width: 900px) {
  #screen-index > .text-box-container { gap: 10px; }
  #story { flex-basis: 310px; width: 310px; }
}
@media (max-width: 767px) {
  .joyride-tip-guide { max-width: calc(100vw - 32px); left: 16px !important; }
  .row .row { width: auto; }
  #screen-index { padding-top: 0; }
  #screen-index > .text-box-container { display: block; }
  #story { width: 100%; }
  #query_section { width: 100%; padding: 0 14px; }
  #screen-index .bg-image-container { justify-content: center; margin-top: 20px; }
  #screen-index .bg-avatar, #screen-index .bg-avatar2 { flex: 0 1 125px; height: 190px; display: block !important; }
  #story .text-box-pointer { left: calc(50% - 82px) !important; }
  #story .text-box-pointer-shadow { left: calc(50% - 89px) !important; }
  #story[data-speaker="R"] .text-box-pointer { left: calc(50% + 43px) !important; }
  #story[data-speaker="R"] .text-box-pointer-shadow { left: calc(50% + 36px) !important; }
  #querylog { height: 280px !important; }
  #tablelist { margin-top: 22px; }
  .phone-titlebar h1 { font-size: 25px; }
  .phone-logobar img { height: 60px; }
}
@media (prefers-reduced-motion: reduce) { .animated { animation: none !important; } }