html, body {
  overflow-x: clip;
  overscroll-behavior-y: none; /* stops bounce from reflowing bounds */
  max-width: 100vw;
}

body.ma-menu-open {
  overflow: hidden;
  touch-action: none; /* helps iOS */
}

::selection {background: #ff00cc; color: #fff}
h1, h2 {font-family: "new-science", monospace;font-weight: 550; letter-spacing: 0px;}
h3 {font-family: "new-science", monospace;font-weight: 450; letter-spacing: 0.5px;}
h4 {font-family: "new-science", monospace;font-weight: 400; letter-spacing: 0.25px; color: #99a1af; font-size: 12px;}
#mobileMenu {font-family: "new-science", monospace;font-weight: 400; text-transform: uppercase; letter-spacing: 1px;}
#matchResults, #resultsList {font-family: "new-science-mono", monospace;font-weight: 350;}
nav {font-family: "new-science", monospace;font-weight: 350; letter-spacing: 1px; text-transform: uppercase;}
p {font-family: "new-science", monospace;font-weight: 350; letter-spacing: .75px; line-height:1.5em;}
blockquote {font-family: "new-science", monospace;font-weight: 350; letter-spacing: .5px;}
#syncsearch {width: 600px}
#syncsearch h1, #syncsearch h2  {font-family: "new-science-mono", monospace; font-weight: 450;}
#syncsearch p {margin: 12px 0 8px 0;}
#syncsearch table {width: 100%}
#syncsearch table th, #syncsearch table td {font-family: "new-science-mono", monospace; font-size: 12px; padding: 3px 5px;}
#syncsearch table td {max-width: 40%;white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
#syncsearch table th:last-child, #syncsearch table td:last-child {text-align: center; white-space: wrap;}
#syncsearch table tr:nth-child(even) {background: rgba(255,255,255,.1)}
#matchResults ul, #resultsList {font-size: 11px;}
#partner-catalog-logo {height: 50px; display: block; margin: 0 auto 10px auto;}
#matchResults ul li, #resultsList li {padding: 3px 5px;}    
#matchResults span.match-title, #source-track-preview {padding: 1px 2px 3px 2px;}
#resultsList li:hover, #matchResults span.match-title:hover, #source-track-preview:hover {cursor: pointer; background: #ffffff; color: #121827;}
#mobileMenu a {color: #A3A7AF;}
#mobileMenu a.text-white {color: #fff;}
p strong {font-weight: 450;}
.text-blue {color: #d4e6ea;}
.text-tan {color: #f6e8e5;}
p a {text-decoration: none; border-bottom: 1px solid currentColor}
/*p a:hover {color: #fff;}*/
button {cursor: pointer}
header a {text-decoration: none; border-bottom: none}
header img {width: 160px; margin-bottom: -2px ;height: auto;}
input {font-weight: normal}
/*header {background: #121827;}   */
.icon-16 {width: 16px; height: 16px; display: inline-block; margin: 0 4px; opacity: .75}    
.icon-16:hover {opacity: 1;}
.helpful {font-weight: normal;}
.text-button {text-decoration: underline;}
.text-button:hover {cursor: pointer; background: #ffffff; color: #121827;}

.product-section p {
    font-family: ui-sans-serif, system-ui, sans-serif; font-weight: normal;
}

.syncrep-table tr:hover {
    background: #010101;
}

input.syncsearch, .ma-search #searchInput, textarea.syncsearch {
    outline: none; 
    font-family: "new-science-mono"; 
    padding: 4px 8px; 
    font-size: 16px; 
    background: rgba(255,255,255,.1); 
    width: 100%; 
    margin: 0;
    border-radius: 2px;
}

.ma-search {
   width: 94%; 
   margin: 0 auto;
   display: block;
}

.ma-search #searchInput {
    font-size: 13px;    
/*    padding: 6px 8px 8px 8px;*/
    padding: 10px 8px 12px 12px;
    margin-top: -4px;
    margin-left: -4px;
    background: rgba(255,255,255,.1) url(/images/ui/search_w_r.png) no-repeat;
    background-position: top 12px right 14px;
    background-size: 17px;
    border-radius: 99px;
}

.ma-search ul#resultsList {
    position: absolute;
    z-index: 49;
}

.ma-search #matchResults ul li, .ma-search #resultsList li {padding: 7px 5px;}   

input#lyricInput {
    width: 75%; 
    display: inline-block;
    margin-right: 10px;
}

#lyricSearchBtn {
    width: 15%; 
    display: inline-block;
}

#lyricSearchBtn:hover {
    cursor: pointer;
}

.lyrics-search-result em {background: #ff00cc; color: #fff}

#analytics-results {
    width: 800px;
    font-family: "new-science-mono", monospace; 
    font-size: 14px;    
}

#analytics-results button {
    font-weight: normal;
}

#analytics-results th {
    font-weight: 500;
}

#analytics-results td {
    font-size: 11px;
    text-align: left;
}

.date-filter input {
    padding: 10px 0;
    cursor: pointer;
}

.date-filter label, .date-filter {
    font-size: 11px;
    display: inline-block;
    margin: 0;
    padding: 0;
}

.details {
    text-align: left;
    line-height: 1.3em;
}

.details p {
    font-size: 12px;
    
}

#calculator {
    font-size: 16px;
    width: 500px;
}

#calculator input {
    font-size: 18px;
}

.standard-ul {
    font-family: "new-science-mono", monospace; font-size: 12px; padding: 2px 15px;
    list-style-type: disc;
}

.standard-ul li {
    padding: 1px 5px;    
}

p.disclaimer {
    font-style: italic;
    font-size: 11px;
}

#audio-status-bar {
    font-family: "new-science-mono", monospace; font-size: 12px;    
}

#playlist-image {
    width: 180px;
    height: 180px;
    margin: -15px auto -90px auto;
    border-radius: 100%;
}

#main-nav {
    font-size: 12px;
}

#main-nav a:hover {
    color: #efefef;
}

.pitchwriter-pitch {
    border: 1px solid #fff;
    padding: 10px 10px 15px 10px;
    background: #fefefe;
    border-radius: 5px;
    color: #010101;
    margin: 0 -10px;
}

.helper-button {
    font-family: "new-science-mono", monospace; font-size: 11px;        
}

  /* baseline state */
  .card {
    opacity: .4;
    transition:
      opacity 420ms ease-out;
    will-change: opacity;
  }

  /* visible state */
  .card.is-visible {
    opacity: 1;
  }


div.card:hover h3 {color: #fff;}
div.card:hover {cursor:pointer; box-shadow: -15px 15px 15px rgba(0,0,0,.5);}
div.card:hover a {text-decoration: underline;}
div.card:hover p {color: #fff;}
div.card span.card-go {display: none}
div.card:hover span.card-go {display: inline}
div.card img {opacity: .9;}
div.card:hover img {opacity: 1;}

footer {
    line-height: 2em;
}

#logged-in-header {
    background: #121827;
    font-family: "new-science-mono", monospace;            
}

.product-nav {
    font-family: "new-science-mono", monospace;    
}

.product-nav li a {
    display: block;
    border-bottom: 1px solid rgba(255,255,255,.2);
    padding: 7px 10px;
    font-size: 12px;
    color: #cfcfcf;
}

.product-nav li a:hover {
    background: rgba(255,255,255,.1);
}

.product-nav li a.current {
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,.6);
}

.product-vidcap, .product-image {
    box-shadow: -15px 15px 15px rgba(0,0,0,.5);
    max-width: 640px;
    margin: auto;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.1);
}

header #system-status {
    font-family: "new-science-mono", monospace;    
    position: absolute; 
    background: rgba(0,0,0,.9);
    border: 1px solid rgba(255,255,255,.2);
    color: #fff;
    z-index: 100;    
    top: 20px;
    width: 36%;
    left: 32%;
    padding: 7px;
    text-align: center;
    font-size: 11px;
    border-radius: 20px;    
}

/* Toast portal sits top-center */
.ma-toast-portal {
  position: fixed; inset: 0 auto auto 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 8px;
  align-items: center; pointer-events: none;
  padding-top: 24px; z-index: 2000; /* above overlay (yours is 1000) */
}

@media (max-width: 640px) {
  .ma-toast-portal {
    padding-top: calc(30px + env(safe-area-inset-top, 0px));
  }
}

/* Toast bubble */
.ma-toast {
  pointer-events: auto;
  max-width: min(92vw, 520px);
  font: 12px/1.35 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial;
  font-weight: 200;
  padding: 6px 14px;
  border-radius: 4px;
  border: 1px solid rgba(160,175,210,0.14);
  box-shadow: 0 10px 28px rgba(0,0,0,0.45);
  color: #dce4ff;
  display: inline-flex; align-items: center; gap: 10px;
  opacity: 0; transform: translateY(-8px);
  animation: maToastIn .18s ease-out forwards;
  outline: 0;
}

/* Variants (reuse your badge palette hues) */
.ma-toast.success { background:#12361f; border-color:#1f5130; color:#b6f3c9; }
.ma-toast.danger  { background:#3a1b1b; border-color:#5a2b2b; color:#ffb1b1; }
.ma-toast.neutral { background:#10131a; border-color:#283046; color:#cfd7ff; }

.ma-toast .msg { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ma-toast .kbd { font: 11px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; opacity:.8; }

@keyframes maToastIn   { to { opacity: 1; transform: translateY(0); } }

/* force the leave animation to win */
.ma-toast.leaving { animation: maToastOut .26s ease-in forwards !important; }

/* make the out movement visible */
@keyframes maToastOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-6px); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ma-toast { animation: none; opacity: 1; transform: none; }
}

@media only screen and (max-width: 1200px) {
    header #system-status {    
        top: 60px;
    }
}

@media only screen and (max-width: 800px) {
    header #system-status {
        width: 50%;
        left: 25%;
    }
}

@media only screen and (max-width: 600px) {
    header #system-status {top: 60px; width: 80%;left: 10%;}
    #syncsearch {width: 99%}  
    .icon-16 {margin: 8px;}    
    #syncsearch table td {white-space: normal;}    
    div.card:hover {box-shadow: none;}

   .product-vidcap, .product-image {max-width: 100%}

    input#lyricInput {width: 65%;}

    #lyricSearchBtn {width: 25%;}   

}