/* Shutting down, logging off and the welcome screen: dark blue bands top and bottom, a lighter
   blue middle with a soft light in the corner, as the old desktop's sign-in screen looked. */
.session {
  position: fixed; inset: 0; z-index: 9600;
  display: grid; grid-template-rows: 78px 1fr 78px;
  background: #5a7edc; color: var(--white);
  font-family: var(--ui-font);
}
.session__top, .session__bottom { position: relative; background: #00309c; }
.session__top::after, .session__bottom::before {
  content: ""; position: absolute; left: 0; right: 0; height: 2px;
}
.session__top::after { bottom: 0; background: linear-gradient(90deg, #003399, #a6c4ff 30%, #ffffff 50%, #a6c4ff 70%, #003399); }
.session__bottom::before { top: 0; background: linear-gradient(90deg, #00309c, #f0a020 40%, #f8c56b 50%, #f0a020 60%, #00309c); }
.session__middle {
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 8% 8%, #a5bdf0 0, #7a98e2 18%, #5a7edc 45%);
}
.session__center { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.session__owl { width: 120px; height: 120px; }
.session__brand { margin: 0; font: 700 40px var(--title-font); text-shadow: 1px 1px 2px rgb(0 0 0 / 0.35); }
.session__brand span { color: #f8c56b; font-style: italic; }
.session__text { margin: 6px 0 0; font: 18px var(--title-font); text-shadow: 1px 1px 1px rgb(0 0 0 / 0.3); }

.session--welcome .session__middle { gap: 0; }
.session__left { flex: 1; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; padding-right: 40px; text-align: right; }
.session__divider { width: 1px; align-self: stretch; margin: 60px 0; background: linear-gradient(180deg, transparent, rgb(255 255 255 / 0.8) 50%, transparent); }
.session__right { flex: 1; padding-left: 40px; }
.session__tile {
  display: flex; align-items: center; gap: 14px; width: min(320px, 100%); padding: 8px;
  border: 0; border-radius: 8px; background: none; color: var(--white);
  font: 20px var(--title-font); text-align: left; cursor: pointer;
}
.session__tile img { border: 2px solid #fff; border-radius: 5px; background: #d6e3fb; }
.session__tile:hover img, .session__tile:focus-visible img { border-color: #ffcc33; }
.session__tile:hover, .session__tile:focus-visible { background: linear-gradient(90deg, #00309c, rgb(0 48 156 / 0)); outline: none; }
.session__off {
  position: absolute; left: 24px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; gap: 10px; padding: 4px 8px;
  border: 0; border-radius: 4px; background: none; color: var(--white); font: 14px var(--ui-font); cursor: pointer;
}
.session__off .turnoff__dot { width: 26px; height: 26px; }
.session__help { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); margin: 0; max-width: 300px; font-size: 12px; text-align: right; }
.session__off:hover, .session__off:focus-visible { background: rgb(255 255 255 / 0.12); outline: none; }

/* After Turn Off: black, with an amber line, as old machines showed before power-off. */
.goodbye { position: fixed; inset: 0; z-index: 9700; display: grid; place-items: center; background: #000; }
.goodbye__inner {
  display: flex; flex-direction: column; align-items: center; gap: 18px; width: 100%; height: 100%; justify-content: center;
  border: 0; background: none; cursor: pointer;
}
.goodbye__inner:focus-visible { outline: none; }
.goodbye__safe { color: #f0a020; font: 22px "Lucida Console", "Courier New", monospace; }
.goodbye__again { color: #8a8a8a; font: 13px var(--ui-font); }

@media (max-width: 720px), (pointer: coarse) and (max-height: 500px) {
  .session { grid-template-rows: 56px 1fr 64px; }
  .session--welcome .session__middle { flex-direction: column; justify-content: center; gap: 24px; }
  .session__left { align-items: center; padding: 0; text-align: center; flex: none; }
  .session__divider { display: none; }
  .session__help { display: none; }
  .session__owl { width: 80px; height: 80px; }
  .session__brand { font-size: 30px; }
  .session__right { flex: none; padding: 0; }
  .goodbye__safe { font-size: 17px; padding: 0 16px; text-align: center; }
}
.turnoff__box h2 img { width: 32px; height: 32px; }