/* The holding page served until the rebuilt frontend lands (decision 43). Its one script,
   countdown.js, is served from the site itself and it loads no external resources, so it
   runs under the strict Content Security Policy unchanged.

   Colours are Protexxa's, from monorepo-frontend packages/ui/src/common/theme/palette.ts:
   navy is primary 900, blue is primary 500, and the gradient is the brand gradient the live
   app uses (#0072FF to #00F896). The font stays the system font until the Geomanist licence
   is settled (decision in #56). */

:root {
  --navy: #001530;
  --navy-raised: #0a2547;
  --blue: #0072ff;
  --green: #00f896;
  --text: #ffffff;
  --text-muted: rgba(255, 255, 255, 0.78);
  --brand-gradient: linear-gradient(90deg, var(--blue), var(--green));
}

html,
body {
  margin: 0;
  min-height: 100%;
  font-family:
    system-ui,
    -apple-system,
    'Segoe UI',
    Roboto,
    sans-serif;
  background: var(--navy);
  color: var(--text);
}

body {
  /* A soft blue and green glow behind the content, from the brand colours. */
  background:
    radial-gradient(60rem 40rem at 15% 0%, rgba(0, 114, 255, 0.22), transparent 60%),
    radial-gradient(50rem 36rem at 85% 100%, rgba(0, 248, 150, 0.14), transparent 60%), var(--navy);
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 32px 16px;
  box-sizing: border-box;
  text-align: center;
}

.logo {
  width: 220px;
  max-width: 70vw;
  height: auto;
  margin-bottom: 32px;
}

h1 {
  margin: 0 0 12px;
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* The brand gradient as a thin rule under the heading. */
h1::after {
  content: '';
  display: block;
  width: 72px;
  height: 4px;
  margin: 14px auto 0;
  border-radius: 2px;
  background: var(--brand-gradient);
}

p {
  margin: 0;
  color: var(--text-muted);
}

.launch {
  margin-top: 10px;
  font-weight: 600;
  color: var(--green);
}

.countdown {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 32px;
}

/* The hidden attribute must win over display: flex. */
.countdown[hidden] {
  display: none;
}

.countdown div {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 76px;
  padding: 16px 10px 12px;
  /* A navy box with a brand-gradient border: the navy fills the padding box, the gradient
     shows through the transparent border. */
  border: 2px solid transparent;
  border-radius: 12px;
  background:
    linear-gradient(var(--navy-raised), var(--navy-raised)) padding-box,
    var(--brand-gradient) border-box;
}

.countdown span {
  font-size: 2.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.countdown small {
  margin-top: 6px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

@media (max-width: 560px) {
  h1 {
    font-size: 2rem;
  }

  .countdown {
    gap: 10px;
  }

  .countdown div {
    min-width: 60px;
    padding: 12px 6px 10px;
  }

  .countdown span {
    font-size: 1.6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}