/*
©Copyright 2026 John Anthony Papa - Proprietary and Confidential
*/

/* Shared text colors: white is for actions (links, buttons), light grey
   (--content-grey, same grey as the footer text and scrollbar track) is for
   content such as playlist and artist names. */
:root {
   --content-grey: darkgray;
}

/* Mobile overscroll guard: the card is always sized to fit the visible
   screen, so the page itself never needs to scroll. Locking it keeps the
   card from sliding up and leaving a blank band at the bottom. */
html {
   height: 100%;
   overflow: hidden;
   overscroll-behavior: none;
}

body {
   margin: 0;
   min-height: 100vh;
   min-height: 100svh;
   overflow: hidden;
   overscroll-behavior: none;
   background: #000000;
   background-image: radial-gradient(darkgray, black);
}

.container {
   position: absolute;
   box-sizing: border-box;
   height: min(644px, calc(100vh - 16px));
   height: min(644px, calc(100svh - 16px));
   width: calc(275pt + 6px);
   margin: auto;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   overflow: hidden;
   display: flex;
   justify-content: center;
   align-items: center;
   background: #000000;
   border-radius: 10px;
   box-shadow: 0 0 10px #000000;
   border: 3px double #707070;
   z-index: 5;
}

.box1 {
   position: absolute;
   height: 77px;
   width: 100%;
   top: 0;
   background-color: rgb(90, 90, 90);
   box-shadow: 4px 4px 4px darkgrey inset;
}

.title {
   position: absolute;
   top: 26px;
   color: black;
   text-shadow: 0 0 2px #ffffff, 0 0 4px #ffffff, 0px 0px 6px #ffffff, 0px
   0px 8px #ffffff;
   font-family: Verdana, sans-serif;
   font-weight: bold;
   font-size: 18px;
   z-index: 6;
}

.subtitle {
   position: absolute;
   top: 51px;
   color: #000000;
   text-shadow: 0 0 2px #ffffff, 0 0 4px #ffffff, 0px 0px 6px #ffffff, 0px 0px 8px #ffffff;
   font-family: Verdana, sans-serif;
   font-weight: bold;
   font-size: 16px;
   z-index: 6;
}

#left-menu-overlay, #right-menu-overlay {
   position: absolute;
   flex-direction: column;
   height: 12pt;
   top: 5px;
   cursor: pointer;
   overflow-y: hidden;
   overflow-x: hidden;
   border:2px solid #444444;
   border-radius: 10px;
   background-color: rgb(90,90,90);
   z-index: 7;
}
#left-menu-overlay {
   left: 4px;
}
#right-menu-overlay {
   right: 4px;
}

.menu-content {
   color: black;
   font-family: Verdana, sans-serif;
   font-weight: bold;
   font-size: 12px;
   text-shadow: 0 0 3px #ffffff, 0 0 4px #ffffff, 0px 0px 5px #ffffff, 0px 0px 6px #ffffff;
   z-index: 8;
}
.menu-content a {
   cursor: pointer;
   color: white;
   font-family: Verdana, sans-serif;
   text-shadow: 0 0 3px #000000, 0 0 4px #000000, 0px 0px 5px #000000, 0px 0px 6px #000000;
   text-decoration: none;
   font-weight: bold;
   z-index: 8;
}
/* Arrow separator between menu links (header and the footer username-to-Playlists arrow).
   The plain separator text is black with a white glow; the arrow is a link-like
   cue, so it takes the same white text and black glow as .menu-content a. */
.menu-content .menu-arrow {
   color: white;
   text-shadow: 0 0 3px #000000, 0 0 4px #000000, 0px 0px 5px #000000, 0px 0px 6px #000000;
}
.menu-content a:hover {
   color: black;
   text-shadow: 0 0 3px #ffffff, 0 0 4px #ffffff, 0px 0px 5px #ffffff, 0px 0px 6px #ffffff;
}

#overlay {
   position: absolute;
   display: block;
   height: auto;
   width: 100%;
   top: 77px;
   bottom: 35px;
   left: 0;
   cursor: pointer;
   overflow-y: auto;
   overflow-x: hidden;
   background-color: rgb(50, 50, 50);
   z-index: 5;
}

.content {
   position: absolute;
   display: block;
   box-sizing: border-box;
   height: 100%;
   width: 100%;
   top: 0;
   left: 0;
   cursor: pointer;
   scrollbar-width: thin;
   scrollbar-gutter: stable both-edges;
   scrollbar-color: gray darkgrey;
   overflow-y: scroll;
   overflow-x: hidden;
   background-color: rgba(0,0,0,0);
   color: #ffffff;
   text-shadow: 0 0 2px #ffffff, 0 0 4px #ffffff, 0px 0px 6px #ffffff, 0px 0px 8px #ffffff;
   font-family: Verdana, sans-serif;
   font-weight: normal;
   font-size: 11px;
   z-index: 5;
}

.box2 {
   position: absolute;
   height: 35px;
   width: 100%;
   bottom: 0;
   background-color: rgb(90, 90, 90);
   box-shadow: 4px 4px 4px darkgrey inset;
   color: white;
   font-size: 12px;
   font-weight: bold;
   a:hover {cursor: pointer;}
}

/* Match the bottom band's bounds and center footer content on every page.
Repeat its background here so the z-index:5 overlay cannot cover the band.
Column layout also preserves stacked content on pages with multiple lines. */
.footer {
   position: absolute;
   height: 35px;
   width: 100%;
   bottom: 0;
   left: 0;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
/* A 4px top inset moves the centered content down by 2px. */
   box-sizing: border-box;
   padding-top: 4px;
   background-color: rgb(90, 90, 90);
   box-shadow: 4px 4px 4px darkgrey inset;
   overflow-y: hidden;
   overflow-x: hidden;
   color: darkgray;
   font-size: 11px;
   font-weight: normal;
   text-align: center;
   text-shadow: 2px 2px 4px #000000, 1px 1px 2px #000000;
   z-index: 6;
}

#overlay .signup, #overlay .signin, #overlay .signout,
#overlay .userhome, #overlay .userslist {
   box-sizing: border-box;
   width: 100%;
}

/* Cap the frame near its original height and center it. Short windows
leave 8px outside each edge. Header and footer keep their readable
height; only the middle area shrinks and scrolls.
Phone rules below keep narrow forms inside the frame. */
@media (max-width: 600px) { 
   body { margin: 0; }
   .container {
      box-sizing: border-box;
      width: min(373px, calc(100vw - 16px));
   }
   #overlay {
      width: 100%;
      height: auto;
      overflow-y: auto;
   }
   .content {
      box-sizing: border-box;
      width: 100%;
      height: 100%;
      top: 0;
   }
   .signup form, .signin form, .signout form {
      max-width: 310px;
      margin: 0 auto;
      padding: 0 8px;
      box-sizing: border-box;
   }
   .signup table, .signin table, .signout table {
      width: 100%;
      table-layout: fixed;
   }
   .signup td[width="50"], .signin td[width="50"], .signout td[width="50"] {
      width: 12px;
   }
   .signup input, .signin input, .signout input {
      box-sizing: border-box;
      max-width: 100%;
      min-width: 0;
   }
}

/* Alphabet results on touch screens. Phones use overlay scrollbars, so the
   scrollbar-gutter on .content reserves no side space there and the results
   sit flush left. Desktop browsers already get that space from the gutter,
   so this applies to touch devices only. 10px matches the desktop gutter
   (measured in Chrome with thin scrollbars). */
@media (hover: none) and (pointer: coarse) {
   .content #user-list,
   .content #artist-list,
   .content #playlist-list {
      box-sizing: border-box;
      padding-left: 10px;
      padding-right: 10px;
   }
}