:root {
  --gms-blue:        #22416a;
  --gms-blue-dark:   #1a3355;
  --gms-blue-deep:   #12233a;
  --gms-blue-light:  #4b86be;
  --gms-ink:         #ffffff;
  --gms-ink-muted:   rgba(255, 255, 255, 0.72);
  --gms-ink-faint:   rgba(255, 255, 255, 0.48);
  --gms-hairline:    rgba(255, 255, 255, 0.18);

  /* Gallagher secondary orange, for the one call to action. */
  --gms-orange:      #f2632f;
  --gms-orange-hover:#ff7444;

  /* Sign-in failure notice. Red rather than the brand orange, which is the
     Sign In button and must not read as an error state. */
  --gms-alert:       #ffc9c4;
  --gms-alert-bg:    rgba(216, 30, 47, 0.18);
  --gms-alert-edge:  rgba(255, 120, 110, 0.45);

  /* Signal flag colours. Patterns are what identify a flag, so these are
     fixed values from the code chart, not part of the site palette. */
  --flag-blue:       #0066b3;
  --flag-yellow:     #f2c200;
  --flag-red:        #d81e2f;
}

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

html { color-scheme: dark; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  padding:
    calc(env(safe-area-inset-top, 0px) + 24px) 20px
    calc(env(safe-area-inset-bottom, 0px) + 24px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--gms-ink);
  background: var(--gms-blue-deep);
  /* Horizon wash: lighter toward the top, deep hull blue below. */
  background-image:
    radial-gradient(120% 80% at 50% -10%, var(--gms-blue) 0%, transparent 60%),
    linear-gradient(180deg, var(--gms-blue-dark) 0%, var(--gms-blue-deep) 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

/* Light moving over water, on an 18-second loop. */
body::before {
  content: "";
  position: fixed;
  /* Oversized so drifting never exposes an edge. */
  inset: -25%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    42% 30% at 50% 30%,
    rgba(96, 156, 214, 0.42),
    transparent 62%
  );
  animation: horizon 18s ease-in-out infinite;
}

@keyframes horizon {
  0%, 100% { transform: translate3d(-10%, 2%, 0) scale(1); }
  50%      { transform: translate3d(10%, -5%, 0) scale(1.15); }
}

.stage {
  width: 100%;
  min-width: 0;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.card {
  width: 100%;
  padding: 44px 36px 36px;
  text-align: center;
  border: 1px solid var(--gms-hairline);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.07);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.32);
}

.logo {
  width: 100%;
  /* 320px puts the GALLAGHER caps at ~25px against the title's ~29px. */
  max-width: 320px;
  height: auto;
  margin-bottom: 28px;
}

.flags {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 26px;
}

.flag {
  position: relative;
  width: 46px;
  height: 34px;
  border-radius: 2px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.36);
  overflow: hidden;
}

/* G (Golf) - six vertical stripes, yellow and blue. */
.flag-g {
  background: repeating-linear-gradient(
    90deg,
    var(--flag-yellow) 0 7.6667px,
    var(--flag-blue) 7.6667px 15.3333px
  );
}

/* E (Echo) - blue over red. */
.flag-e {
  background: linear-gradient(180deg, var(--flag-blue) 50%, var(--flag-red) 50%);
}

/* M (Mike) - white saltire on blue. */
.flag-m { background: var(--flag-blue); }

.flag-m::before, .flag-m::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -12%;
  width: 124%;
  height: 22%;
  background: #fff;
}

.flag-m::before { transform: translateY(-50%) rotate(36deg); }
.flag-m::after { transform: translateY(-50%) rotate(-36deg); }

/* S (Sierra) - blue square on white. */
.flag-s { background: #fff; }

.flag-s::before {
  content: "";
  position: absolute;
  inset: 26% 22%;
  background: var(--flag-blue);
}

/* Numeral pennants for "2.0", verified against the US National Park Service
   International Code of Signals chart. Tapered to a blunt tip, roughly 1:2.

   Blue is kept at the same value as the letter flags rather than the darker
   navy of a printed chart: on a dark card, chart navy loses the pattern. */

.flag-gap { width: 10px; }

.pennant {
  position: relative;
  width: 58px;
  height: 34px;
  clip-path: polygon(0 0, 100% 30%, 100% 70%, 0 100%);
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.34));
  overflow: hidden;
}

/* Numeral 2 - blue field, white disc at the hoist. */
.pennant-2 { background: var(--flag-blue); }

.pennant-2::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 20%;
  width: 17px;
  height: 17px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #fff;
}

/* Numeral 0 - yellow, red, yellow in vertical bands. */
.pennant-0 {
  background: linear-gradient(
    90deg,
    var(--flag-yellow) 0 33.33%,
    var(--flag-red) 33.33% 66.66%,
    var(--flag-yellow) 66.66%
  );
}

.title {
  margin: 0;
  font-size: 40px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.1;
}

.version {
  font-weight: 300;
  color: var(--gms-ink-muted);
}

.alert {
  margin: 24px 0 0;
  padding: 12px 14px;
  text-align: left;
  font-size: 14px;
  line-height: 1.45;
  color: var(--gms-alert);
  background: var(--gms-alert-bg);
  border: 1px solid var(--gms-alert-edge);
  border-radius: 6px;
}

.alert[hidden] { display: none; }

.login { margin-top: 28px; }

.field { text-align: left; }

.field + .field { margin-top: 16px; }

.field label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gms-ink-muted);
}

.field input {
  width: 100%;
  padding: 12px 14px;
  /* 16px keeps iOS Safari from zooming on focus. */
  font-size: 16px;
  font-family: inherit;
  color: var(--gms-ink);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--gms-hairline);
  border-radius: 6px;
}

.field input:focus {
  outline: 2px solid var(--gms-blue-light);
  outline-offset: 1px;
}

.fallback { color: inherit; }

.signin {
  display: block;
  width: 100%;
  border: 0;
  font-family: inherit;
  cursor: pointer;
  text-align: center;
  margin-top: 32px;
  padding: 15px 24px;
  /* White on this orange is 3.2:1, which only clears AA at large-text size. */
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--gms-ink);
  background: var(--gms-orange);
  border-radius: 6px;
  transition: background-color 120ms ease, transform 120ms ease;
}

.signin:hover,
.signin:focus-visible {
  background: var(--gms-orange-hover);
}

.signin:active { transform: translateY(1px); }

.signin:focus-visible {
  outline: 2px solid var(--gms-ink);
  outline-offset: 3px;
}

.note {
  margin: 18px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--gms-ink-faint);
}

.footer {
  text-align: center;
  font-size: 12px;
  line-height: 1.6;
  color: var(--gms-ink-faint);
}

.footer p { margin: 0; }

@media (max-width: 460px) {
  .card { padding: 36px 24px 28px; }
  .title { font-size: 34px; }

  /* At phone width the full-size flag row is wider than the card. Width and
     height scale together so the flag proportions stay right. */
  .flags { gap: 8px; }
  .flag { width: 36px; height: 27px; }
  .flag-g {
    background: repeating-linear-gradient(
      90deg,
      var(--flag-yellow) 0 6px,
      var(--flag-blue) 6px 12px
    );
  }
  .flag-gap { width: 8px; }
  .pennant { width: 46px; height: 27px; }
  .pennant-2::before { width: 13px; height: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .signin { transition: none; }
  .signin:active { transform: none; }
  body::before { animation: none; }
}