/* R419 — Space Mono, black & white UI over the cycling film backgrounds.
   Type locked to 12 / 14 / 24px, buttons and headings in capitals, square
   corners. Every piece of text sits on solid black (a "tag") so it stays
   legible whether the background behind it is pale chrome or deep blue. */

@font-face {
  font-family: "Space Mono";
  src: url("/fonts/SpaceMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("/fonts/SpaceMono-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #000000;
  --fg: #ffffff;
  --mute: #a6a6a6;
  --line: #ffffff;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--fg); }

/* ------------------------------------------------------------ background */

/* Sized to the large viewport (100lvh) so the background also fills the area
   behind the phone browser's toolbar, instead of leaving it black. */
#bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  z-index: 0;
  background: #000;
  opacity: 0;
  transition: opacity 1200ms ease;
}
#bg.ready, #bg.bg-css { opacity: 1; }
#bg canvas { width: 100%; height: 100%; display: block; }

/* CSS fallback (no WebGL): slow, soft crossfade */
.bg-layer {
  position: absolute;
  inset: -40px;
  background-size: cover;
  background-position: center;
  opacity: 0;
  filter: brightness(0.86);
  transform: scale(1.08);
  transition: opacity 8000ms ease-in-out, transform 14000ms ease-in-out;
}
.bg-layer.on { opacity: 1; transform: scale(1); }

/* letter layer (trail.js), between the background and the form */
#trail {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  pointer-events: none;
}

/* ------------------------------------------------------------ tags */

.tag,
.back,
h1,
.field > span,
.field > legend,
.lead,
.error {
  display: inline-block;
  background: var(--bg);
  color: var(--fg);
  padding: 3px 7px;
  justify-self: start;
  width: max-content;
  max-width: 100%;
}

/* quiet CORTEIZ.COM link under the small print */
.back {
  align-self: center;
  margin-top: 16px;
  font-size: 12px;
  color: var(--mute);
  text-decoration: none;
  letter-spacing: 0.04em;
}
.back:hover, .back:focus-visible { background: var(--fg); color: var(--bg); }

/* ------------------------------------------------------------ layout */

/* logo, form and link sit together in the middle of the screen */
.wrap {
  position: relative;
  z-index: 1;
  max-width: 420px;
  margin: 0 auto;
  padding: 40px 16px;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* small heading, centred under the logo */
h1 {
  align-self: center;
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 28px;
  letter-spacing: 0.06em;
  padding: 4px 10px;
}

form { display: grid; gap: 18px; }

.row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 360px) { .row { grid-template-columns: 1fr; } }

.field { display: grid; gap: 0; margin: 0; padding: 0; border: 0; min-width: 0; }
.field > span, .field > legend {
  font-size: 12px;
  letter-spacing: 0.04em;
  margin: 0 0 6px;
}
legend { float: left; } /* lets the legend sit in the grid like a span */
legend + * { clear: both; }
legend em { font-style: normal; color: var(--mute); }

input, select {
  width: 100%;
  font: inherit;
  font-size: 14px;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 11px 12px;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}
select {
  background-image: linear-gradient(45deg, transparent 50%, var(--fg) 50%),
                    linear-gradient(135deg, var(--fg) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 36px;
}
select:invalid { color: var(--mute); }
option { color: #000; background: #fff; }
input:focus-visible, select:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
input[aria-invalid="true"], select[aria-invalid="true"] { border-style: dashed; }

.toggles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 6px; }
.toggles.colours { grid-template-columns: repeat(3, 1fr); margin-bottom: 0; }
.toggles[aria-invalid="true"] button { border-style: dashed; }

.toggle {
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 11px 0;
  cursor: pointer;
}
.toggle[aria-pressed="true"], .toggle[aria-checked="true"] { background: var(--fg); color: var(--bg); }
.toggle:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }

.primary, .ghost {
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  border-radius: 0;
  padding: 13px;
  width: 100%;
  cursor: pointer;
}
.primary { background: var(--fg); color: var(--bg); border: 1px solid var(--fg); }
.primary:hover { background: var(--bg); color: var(--fg); }
.primary[disabled] { opacity: 0.6; cursor: progress; }
.ghost { background: var(--bg); color: var(--fg); border: 1px solid var(--fg); }
.ghost:hover { background: var(--fg); color: var(--bg); }

.small {
  font-size: 12px;
  color: var(--mute);
  margin: 0;
  background: var(--bg);
  padding: 8px 10px;
}
.small a { color: var(--mute); }
.lead { font-size: 14px; font-weight: 700; margin: 0; letter-spacing: 0.04em; }
.note { margin-bottom: 28px; }

.error { font-size: 12px; margin: 0; }
.error::before { content: "— "; }

.phone { display: grid; grid-template-columns: auto 1fr; }
.dial {
  background: var(--bg);
  border: 1px solid var(--line);
  border-right: 0;
  padding: 11px 12px;
  font-size: 14px;
  min-width: 56px;
  text-align: center;
}

/* CORTEIZ logo, centred above the heading */
.logo {
  align-self: center;
  margin-bottom: 28px;
  line-height: 0;
}
.logo:focus-visible { outline: 2px solid var(--fg); outline-offset: 4px; }
.logo img { width: 116px; height: auto; display: block; }

.ts:empty { display: none; }

.hp {
  position: absolute !important;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

#step2, #done { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
/* "check your inbox" message sits centred under the heading */
#step2 > .lead, #done > .lead { justify-self: center; text-align: center; }
#step2 > .note, #done > .note { justify-self: center; width: fit-content; max-width: 100%; text-align: center; }
/* one line where the screen allows (it's a little wider than the form column) */
@media (min-width: 700px) {
  #step2 > .note, #done > .note {
    white-space: nowrap;
    max-width: none;
    justify-self: start;
    position: relative;
    left: 50%;
    transform: translateX(-50%); /* centred even where it's wider than the column */
  }
}

@media (prefers-reduced-motion: no-preference) {
  #step2:not([hidden]), #done:not([hidden]) { animation: in 320ms ease-out; }
  @keyframes in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}

/* ------------------------------------------------------------ phones */
/* Tighter spacing (same type sizes) so the logo, form, small print and link
   fit on one phone or laptop screen without scrolling. */

@media (max-width: 699px), (max-height: 860px) {
  .wrap { padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); }
  h1 { margin-bottom: 14px; }
  form { gap: 10px; }
  .field > span, .field > legend { margin-bottom: 4px; }
  input, select, .dial { padding: 8px 10px; }
  select { padding-right: 32px; }
  .toggles { margin-bottom: 4px; }
  .toggle { padding: 8px 0; }
  .primary, .ghost { padding: 10px; }
  .small { padding: 6px 8px; }
  .note { margin-bottom: 16px; }
  .logo { margin-bottom: 18px; }
  .logo img { width: 90px; }
  .back { margin-top: 10px; }
}