/* Adelaide University Kendo Club — check-in.
 *
 * Palette is kendo's own: kon (紺), the indigo a dogi is dyed, going near-black
 * in the folds and fading toward ai (藍) where it wears.
 *
 * No web fonts by design — dojo wifi is unreliable and this page has to render
 * before somebody has finished putting their bag down. The system sans is what
 * the phone already has: SF on iOS, Roboto on Android.
 */

:root {
  --kon-deep: #0E1729;
  --kon: #16233F;
  --kon-line: #243456;
  --ai: #6E86B5;
  --shiro: #F2EFE9;
  --shiro-dim: #A8B4CB;
  --midori: #4E8C6A;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto,
          "Helvetica Neue", ui-sans-serif, system-ui, sans-serif;
  /* The masthead is the one place the page dresses up; everything below it
     stays in the system sans so the form reads as a form. */
  --serif: ui-serif, "Iowan Old Style", "Palatino", "Charter", Georgia, serif;

  --r: 10px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  /* No pull-to-refresh and no rubber-band overscroll: the page is one screen
     that never needs scrolling, so every drag on it is an accident. */
  overscroll-behavior: none;
}
body {
  /* Removes the 300ms wait Safari holds every tap for in case a second one turns
     it into a zoom. The button is the whole point of the page; it should fire
     the moment it is pressed. */
  touch-action: manipulation;
  /* dvh, so the page tracks the address bar sliding away rather than sizing
     against a height that is briefly wrong. */
  min-height: 100dvh;
  overflow-x: clip;
  background: var(--kon-deep);
  /* A single soft light from above — the high windows of a hall. */
  background-image: radial-gradient(120% 70% at 50% -10%, #1B2B4D 0%, var(--kon-deep) 62%);
  background-attachment: fixed;
  color: var(--shiro);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  display: flex;
  justify-content: center;
  padding: max(24px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom));
}

.card {
  position: relative;
  width: 100%;
  max-width: 27rem;
  /* The form sits at the top of the page, where a thumb reaches it. Only the
     confirmation centres, and it does that against the viewport. */
  margin: 0 auto;
  padding: 8px 0 4px;
}

/* Mark on the left, name set in two lines beside it. The two lines are sized to
   stand exactly as tall as the mark, so the masthead reads as one block rather
   than as a logo with a caption. */
.masthead {
  display: flex;
  align-items: center;
  gap: 26px;
  padding-bottom: 22px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--kon-line);
}

.logo {
  display: block;
  flex: none;
  width: 64px;
  height: 64px;
}

h1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 64px;
  margin: 0;
  font-weight: 400;
  white-space: nowrap;
}

.h-sub {
  font-size: clamp(0.66rem, 3vw, 0.78rem);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  /* Muted: it is the address, not the name. */
  color: #5B6E96;
}

.h-main {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 8vw, 2.15rem);
  line-height: 1.12;
  letter-spacing: 0.005em;
  margin-top: 2px;
}

.field { margin-bottom: 20px; }

label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ai);
  margin-bottom: 8px;
}

input, select {
  width: 100%;
  font: inherit;
  color: var(--shiro);
  background: var(--kon);
  border: 1px solid var(--kon-line);
  border-radius: var(--r);
  /* 16px minimum stops iOS zooming the viewport when the field takes focus. */
  font-size: 17px;
  padding: 15px 16px;
  appearance: none;
}

input::placeholder { color: #63739A; }

input:focus-visible, select:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--ai);
  outline-offset: 2px;
}

/* --- name suggestions ----------------------------------------------------- */

.combo { position: relative; }

.suggestions {
  position: absolute;
  z-index: 5;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: #1B2A4A;
  border: 1px solid var(--kon-line);
  border-radius: var(--r);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

.suggestions[hidden] { display: none; }

.suggestions li {
  padding: 12px 12px;
  border-radius: 6px;
  color: var(--shiro);
  cursor: pointer;
}

.suggestions li[aria-selected="true"],
.suggestions li:hover { background: var(--kon-line); }

.suggestions mark {
  background: none;
  color: var(--ai);
  font-weight: 600;
}

.select-wrap { position: relative; }

.select-wrap::after {
  content: "";
  position: absolute;
  right: 17px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--ai);
  border-bottom: 2px solid var(--ai);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

select { padding-right: 42px; }

.btn {
  width: 100%;
  font: inherit;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--kon-deep);
  background: var(--shiro);
  border: 0;
  border-radius: var(--r);
  padding: 17px;
  margin-top: 28px;
  cursor: pointer;
  transition: transform 0.12s ease, opacity 0.12s ease;
}

.btn:active { transform: scale(0.985); }

.btn[disabled] { opacity: 0.45; cursor: default; }

.status {
  min-height: 1.4em;
  margin: 14px 0 0;
  font-size: 0.875rem;
  color: var(--shiro-dim);
  text-align: center;
}

.status.is-error { color: #F0968E; }
.status.is-done  { color: var(--midori); }

/* --- the confirmation ----------------------------------------------------- */

/* The confirmation replaces the body of the page rather than covering it: once
   somebody has checked in, the form has nothing left to say, so it goes and this
   takes its place under the masthead. */
.done {
  padding: 44px 12px 0;
  text-align: center;
}

.done-text {
  margin: 0;
  font-size: clamp(1.35rem, 6.4vw, 1.65rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: #FFFFFF;
}

.done.is-shown .done-text {
  animation: land 520ms cubic-bezier(0.16, 1.4, 0.3, 1) both;
}

/* Overshoot and settle — the punch the seal used to land with. The text scales
   past the width of the page on the way in, hence the clip on body: without it
   the phone offers a sideways scroll for the length of the animation. */
@keyframes land {
  0%   { opacity: 0; transform: scale(1.9) rotate(-3deg); filter: blur(5px); }
  55%  { opacity: 1; transform: scale(0.94) rotate(0deg); filter: blur(0); }
  75%  { transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); filter: blur(0); }
}

.card.is-done form,
.card.is-done .status { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}