/* Styles for the demo host page only, light Ocean theme on a #cfe2ff background.
   The app itself is styled by gray-scott-ocean.css. */

/*
*,
*::before,
*::after {
  box-sizing: border-box;
}
*/

/* Two soft glows: white top-left, cyan bottom-right */
/*
body {
  margin: 0;
  min-height: 100vh;
  font-family: 'Inter', system-ui, sans-serif;
  color: #03045e;
  background-color: #cfe2ff;
  
  background-image:
    radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.6), transparent 50%),
    radial-gradient(circle at 100% 100%, rgba(0, 180, 216, 0.16), transparent 50%);
  background-attachment: fixed;
} */

/* Centres the title and the app; 16px gutter on phones */
.gs-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 40px 16px;
    font-family: 'Inter', system-ui, sans-serif;
    color: #03045e;
    background-color: #cfe2ff;
    background-image: radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.6), transparent 50%), radial-gradient(circle at 100% 100%, rgba(0, 180, 216, 0.16), transparent 50%);
    background-attachment: fixed;
}

/* The app's host element needs a real width: the app sizes itself from it
   (container query), so it cannot shrink-to-fit its content. */
#pattern-app {
  width: 100%;
  display: flex;
  justify-content: center;
}

.gs-page-title {
  margin: 0;
  font-family: 'Fredoka', 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  text-align: center;
  color: #03045e; /* fallback if background-clip: text is unsupported */
}

/* Fill the title text with an Ocean gradient where supported.
   Deeper than the app's accent, so it stays readable on the light blue. */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .gs-page-title {
    background: linear-gradient(90deg, #03045e, #0077b6);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}