/* G8Code Student Home music, using the existing login-reminder Audio instance. */
#studentHomeScreen .sh-music-anchor{position:relative;display:flex;align-items:center;flex:none}
#studentHomeScreen .sh-music-toggle{position:relative;display:grid;place-items:center;padding:0;isolation:isolate;}
#studentHomeScreen .sh-music-toggle.hidden, #studentHomeScreen .sh-music-panel.hidden,#studentHomeScreen .sh-music-shade.hidden{display:none!important}
#studentHomeScreen .sh-music-toggle[data-playing="true"]{color:var(--sh-accent,#2563eb);border-color:color-mix(in srgb,var(--sh-accent,#2563eb) 40%,var(--sh-border));}
#studentHomeScreen .sh-music-toggle[data-off="true"]{opacity:.65}
#studentHomeScreen .sh-music-eq{position:absolute;right:3px;top:3px;display:flex;align-items:end;justify-content:center;gap:1.5px;width:12px;height:11px;padding:2px;border-radius:4px;background:var(--sh-accent,#275ac8)}
#studentHomeScreen .sh-music-eq i{display:block;width:2px;height:2px;border-radius:2px;background:#fff}
#studentHomeScreen .sh-music-toggle[data-playing="true"] .sh-music-eq i{animation:shMusicPulse 0.7s ease-in-out infinite alternate}
#studentHomeScreen .sh-music-toggle[data-playing="true"] .sh-music-eq i:nth-child(2){animation-delay:-.4s}
#studentHomeScreen .sh-music-toggle[data-playing="true"] .sh-music-eq i:nth-child(3){animation-delay:-.2s}
@keyframes shMusicPulse{from{height:2px}to{height:9px}}
#studentHomeScreen .sh-music-shade{position:fixed;inset:0;z-index:11998;background:transparent;border:0;cursor:default}
#studentHomeScreen .sh-music-panel{position:absolute;z-index:12002;top:calc(100% + 14px);right:0;width:min(316px,calc(100vw - 32px));padding:17px;background:var(--sat-card,var(--sh-card,#fff));color:var(--sat-text,var(--sh-ink,#17253c));border:1px solid var(--sat-border,var(--sh-border,#d7e1ed));border-radius:18px;box-shadow:0 22px 60px rgba(10,22,43,.23),0 5px 15px rgba(10,22,43,.09);animation:shMusicAppear .19s ease both}
#studentHomeScreen .sh-music-heading{display:flex;align-items:center;gap:11px;min-width:0}
#studentHomeScreen .sh-music-art{width:48px;height:48px;flex:0 0 48px;display:grid;place-items:center;border-radius:15px;background:var(--sat-soft,var(--sh-accent-soft,#ecf2ff));color:var(--sat-primary,var(--sh-accent,#2353a5));font-size:24px;font-weight:800}
#studentHomeScreen .sh-music-copy{display:grid;min-width:0;gap:2px}
#studentHomeScreen .sh-music-eyebrow{font-size:9px;letter-spacing:.12em;font-weight:850;color:var(--sat-primary,var(--sh-accent,#2353a5))}
#studentHomeScreen .sh-music-copy strong{font-size:14px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:inherit}
#studentHomeScreen .sh-music-copy small{font-size:11px;color:var(--sat-muted,var(--sh-secondary,#65768b));line-height:1.4}
#studentHomeScreen .sh-music-actions{display:flex;align-items:center;justify-content:center;gap:18px;margin:16px 0}
#studentHomeScreen .sh-music-actions button,#studentHomeScreen .sh-music-volume-row button{display:grid;place-items:center;flex:none;width:42px;height:42px;background:var(--sat-soft,var(--sh-accent-soft,#ecf2ff));border:1px solid var(--sat-border,var(--sh-border,#d7e1ed));color:var(--sat-text,var(--sh-ink,#17253c));border-radius:13px;font-size:19px;transition:transform .15s ease,background .15s ease}
#studentHomeScreen .sh-music-actions .sh-music-primary{width:54px;height:54px;border-radius:17px;background:var(--sat-action,var(--sh-accent,#275ac8));color:var(--sat-action-text,#fff);border-color:transparent;box-shadow:0 7px 16px rgba(30,72,142,.20)}
#studentHomeScreen .sh-music-actions button:disabled,#studentHomeScreen .sh-music-volume-row button:disabled{opacity:.4;cursor:not-allowed}
#studentHomeScreen .sh-music-actions button:not(:disabled):hover,#studentHomeScreen .sh-music-volume-row button:not(:disabled):hover{transform:translateY(-2px)}
#studentHomeScreen .sh-music-volume-row{display:flex;align-items:center;gap:10px}
#studentHomeScreen .sh-music-volume-row button{width:36px;height:36px;font-size:17px}
#studentHomeScreen .sh-music-volume-label{font-size:11px;font-weight:700;color:var(--sat-muted,var(--sh-secondary,#65768b))}
#studentHomeScreen #studentHomeMusicVolume{width:100%;min-width:40px;accent-color:var(--sat-primary,var(--sh-accent,#275ac8));cursor:pointer}
#studentHomeScreen .sh-music-off{width:100%;margin-top:14px;min-height:38px;border:1px solid var(--sat-border,var(--sh-border,#d7e1ed));background:var(--sat-soft,var(--sh-accent-soft,#ecf2ff));color:var(--sat-text,var(--sh-ink,#17253c));border-radius:11px;font-weight:750;font-size:12px}
#studentHomeScreen .sh-music-panel :is(button,input):focus-visible{outline:3px solid var(--sat-primary,var(--sh-accent,#275ac8));outline-offset:3px}
@keyframes shMusicAppear{from{opacity:0;transform:translateY(-6px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
/* On narrow screens the player becomes a bottom sheet, keeping the header uncluttered. */
@media(max-width:700px){
 #studentHomeScreen .sh-music-panel{position:fixed;z-index:12003;top:auto;bottom:max(12px,env(safe-area-inset-bottom));left:12px;right:12px;width:auto;max-width:none;padding:18px;border-radius:21px;box-shadow:0 -10px 60px rgba(9,20,41,.33);animation:shMusicSheet .22s ease both}
 #studentHomeScreen .sh-music-shade:not(.hidden){display:block;background:rgba(5,12,24,.45);backdrop-filter:blur(3px)}
 #studentHomeScreen .sh-header-tools{gap:4px}
 #studentHomeScreen .sh-music-anchor{flex:none}
}
@keyframes shMusicSheet{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){#studentHomeScreen .sh-music-toggle .sh-music-eq i,#studentHomeScreen .sh-music-panel{animation:none!important}#studentHomeScreen .sh-music-actions button{transition:none}}

#studentHomeScreen .sh-music-close{position:absolute;right:11px;top:10px;display:grid;place-items:center;width:29px;height:29px;border-radius:10px;background:transparent;color:var(--sat-muted,var(--sh-secondary,#65768b));font-size:23px;line-height:1}
#studentHomeScreen .sh-music-close:hover{background:var(--sat-soft,var(--sh-accent-soft,#ecf2ff));color:var(--sat-text,var(--sh-ink,#17253c))}
#studentHomeScreen .sh-music-copy{padding-right:22px}

/* A browser may require a user gesture before audio may play. */
#studentHomeScreen .sh-music-toggle[data-needs-play="true"]::after {
  content: "▶";
  position: absolute;
  top: -4px;
  right: -4px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sh-accent, #2563eb);
  color: white;
  border: 2px solid var(--sh-card, #fff);
  font-size: 9px;
  line-height: 1;
}

/* v3 floating music menu — no reflow of the welcome banner or other controls. */
#studentHomeScreen .sh-header { z-index: 140 !important; isolation: isolate; }
#studentHomeScreen .sh-music-anchor {position:relative;z-index:145;}
#studentHomeScreen .sh-music-panel:not(.hidden) {
  position:absolute !important; display:block !important;
  top:calc(100% + 13px) !important;right:0 !important;
  bottom:auto !important;left:auto !important;
  width:min(328px, calc(100vw - 28px)) !important;
  max-width:calc(100vw - 28px) !important; margin:0 !important;
  z-index:150 !important; overflow:visible !important;
  box-shadow:0 24px 65px rgba(4,18,44,.30),0 7px 17px rgba(4,18,44,.13) !important;
  animation:shMusicAppear .2s ease both;
}
#studentHomeScreen .sh-music-copy strong {white-space:normal;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
#studentHomeScreen .sh-music-heading {padding-right:20px;}
#studentHomeScreen .sh-music-shade {display:none!important;}
@media(max-width:700px) {
 #studentHomeScreen .sh-music-shade:not(.hidden) {
  position:fixed;inset:0;display:block!important;z-index:141!important;
  background:rgba(4,12,25,.45)!important;backdrop-filter:blur(3px);
 }
 #studentHomeScreen .sh-music-panel:not(.hidden) {
  position:fixed !important;top:auto !important;
  bottom:max(12px,env(safe-area-inset-bottom)) !important;
  left:12px !important;right:12px !important;
  width:auto !important;max-width:none !important;
  max-height:calc(100dvh - 28px) !important;
  overflow-y:auto !important;
  margin:0 !important;z-index:150!important;
  padding:16px !important; border-radius:20px !important;
  animation:shMusicSheet .23s ease both;
 }
 #studentHomeScreen .sh-music-actions button{min-height:44px;min-width:44px;}
 #studentHomeScreen .sh-music-volume-row button{min-height:44px;min-width:44px;}
}
@media(prefers-reduced-motion:reduce){#studentHomeScreen .sh-music-panel{animation:none!important}}

/* Admin Song Titles: compact list of metadata, supports 120 links without
   expanding the whole Admin page. Follows the admin theme variables. */
#loginReminderMusicMetadataEditor {
  min-width:0;margin:12px 0 14px;padding:13px;
  border:1px solid var(--g8adm-border,var(--line,#cdd9e7));
  border-radius:14px;
  background:var(--g8adm-card,var(--card,rgba(137,164,207,.08)));
  color:inherit;
}
.login-music-metadata-head {display:flex;justify-content:space-between;align-items:start;gap:12px;margin-bottom:12px}
.login-music-metadata-head strong {display:block;font-size:13px;line-height:1.35;color:inherit}
.login-music-metadata-head small {display:block;font-size:11px;line-height:1.5;opacity:.83;margin-top:3px}
.login-music-metadata-count {font-size:10px;white-space:nowrap;font-weight:800;padding:5px 8px;border:1px solid currentColor;border-radius:100px;opacity:.75}
.login-music-metadata-rows{max-height:340px;overflow-y:auto;overscroll-behavior:contain;display:grid;gap:8px;padding-right:3px}
.login-music-metadata-row {border:1px solid var(--g8adm-border,var(--line,#cdd9e7));border-radius:12px;padding:11px;background:var(--g8adm-raised,var(--bg-2,rgba(137,164,207,.06)));min-width:0}
.login-music-metadata-row-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:8px}
.login-music-metadata-row-head b{font-size:11px;white-space:nowrap}
.login-music-metadata-row-head small{font-size:10px;opacity:.72;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.login-music-metadata-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.login-music-metadata-fields label{display:grid;gap:5px;font-size:11px;font-weight:750;min-width:0;color:inherit}
.login-music-metadata-fields input{width:100%;min-width:0;min-height:38px;padding:9px 10px;border:1px solid var(--admin-border,var(--adm-border,#c6d6eb));border-radius:10px;background:var(--g8adm-card,var(--card,#fff));color:var(--g8adm-ink,var(--text,#152b47));font-size:12px;box-sizing:border-box}
.login-music-metadata-fields input:focus-visible{outline:2px solid #60a5fa;outline-offset:2px}
.login-music-metadata-empty{font-size:12px;margin:0;opacity:.78}
@media(max-width:600px){.login-music-metadata-fields{grid-template-columns:1fr}.login-music-metadata-head{flex-wrap:wrap}}

#adminOverlay[data-admin-appearance] .login-music-metadata-row,
#adminOverlay[data-admin-appearance] .login-music-metadata-rows,
#adminOverlay[data-admin-appearance] .login-music-metadata-head{color:var(--g8adm-ink)!important}
#adminOverlay[data-admin-appearance] #loginReminderMusicMetadataEditor{background:var(--g8adm-card)!important;border-color:var(--g8adm-border)!important}
#adminOverlay[data-admin-appearance] .login-music-metadata-row{background:var(--g8adm-raised)!important;border-color:var(--g8adm-border)!important}
#adminOverlay[data-admin-appearance] .login-music-metadata-fields input{background:var(--g8adm-card)!important;color:var(--g8adm-ink)!important;border-color:var(--g8adm-border)!important}
#adminOverlay[data-admin-appearance] .login-music-metadata-fields input::placeholder{color:var(--g8adm-muted)!important;opacity:1}


/* v4 mobile sheet hardening: when opened on phones, keep the whole player
   inside the viewport and above the dashboard, without clipping or partial
   visibility near the top of the screen. */
@media (max-width:700px) {
  #studentHomeScreen .sh-music-panel:not(.hidden) {
    inset: auto 10px max(10px, env(safe-area-inset-bottom, 0px)) 10px !important;
    top: auto !important;
    bottom: max(10px, env(safe-area-inset-bottom, 0px)) !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-width: none !important;
    max-height: min(78dvh, calc(100dvh - 20px)) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    z-index: 12050 !important;
  }
  #studentHomeScreen .sh-music-shade:not(.hidden) {
    z-index: 12040 !important;
  }
}