/* verify.tortterminal.com: shared styles for every campaign page.
   Tort Terminal's brand, carrying the firm's logo. Rules and token sources live in DESIGN.md. */

/* Brand faces, self-hosted and subset to basic Latin. swap: text shows at once in the fallback face,
   so nothing waits on a font. */
@font-face { font-family: "Unbounded"; font-weight: 700; font-display: swap; src: url(/assets/unbounded-bold.woff2) format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 500; font-display: swap; src: url(/assets/jetbrains-mono-medium.woff2) format("woff2"); }

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

/* Do not add color-scheme: dark. A dark page around the light survey iframe makes browsers paint the
   survey's background white, and its labels are white. */
:root {
  --ink: #0a0f1a;                         /* ground */
  --paper: #efeae0;                       /* text */
  --muted: rgba(239, 234, 224, 0.68);     /* secondary text */
  --line: rgba(239, 234, 224, 0.45);      /* PIN box border, 3.9:1 */
  --signal: #6466f1;                      /* the one action */
  --signal-deep: #4f46e5;                 /* hover and press */
  --halo: #818cf8;                        /* focus */
  --danger: #f87171;                      /* error */
  --display: "Unbounded", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* the phone's own face */
}

html { background: var(--ink); }

body {
  min-height: 100vh;  /* phones older than iOS 15.4 */
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--paper);
  -webkit-font-smoothing: antialiased;
}

/* verify.js marks <html data-ready> when it runs. If it is slow, blocked or off, say so instead of a blank screen. */
html:not([data-ready]) body::before {
  content: "This page is taking a while to load. Check your connection and reload, or contact your legal representative.";
  max-width: 320px;
  margin: auto;
  padding: 0 20px;
  text-align: center;
  color: var(--muted);
  opacity: 0;
  animation: late 0s 3s forwards;
}
@keyframes late { to { opacity: 1; } }

/* Whose page this is: the firm's logo, centred, first. With no firm the Tort Terminal lockup stands in. */
.brand { width: 100%; padding: 48px 20px 0; }
.firm, .brand > .tt { display: block; width: auto; max-width: 100%; margin: 0 auto; }
.brand > .tt { height: 30px; }

/* The task */
main { width: 100%; max-width: 400px; padding: 36px 20px 0; }

h1 { font: 700 21px/1.3 var(--display); word-spacing: 0.14em; text-align: center; overflow-wrap: anywhere; } /* wraps when a phone's text size is turned up */

label, .note { display: block; margin-top: 8px; text-align: center; color: var(--muted); }

#pin-error { min-height: 24px; margin: 12px 0 6px; text-align: center; color: var(--danger); }

/* The PIN is four digits, so it is four boxes. One real field lies invisible over them (typing, paste,
   screen readers and the number pad all work as on any field); verify.js writes each digit into its box. */
.pin { position: relative; display: grid; grid-template-columns: repeat(4, 64px); gap: 12px; justify-content: center; }
#pin { position: absolute; inset: 0; width: 100%; height: 100%; font-size: 16px; opacity: 0; border: 0; } /* 16px: iPhones zoom the page on anything smaller */
.cell {
  display: grid;
  place-items: center;
  height: 72px;
  font: 500 30px/1 var(--mono);
  color: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 12px;
}
/* Focus is shown on the box the next digit goes into. */
.pin:focus-within .cell.on { border: 2px solid var(--halo); box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.3); }
.pin:focus-within .cell.on:empty::after { content: ""; width: 2px; height: 28px; background: var(--halo); animation: blink 1.1s steps(1) infinite; }
.pin.bad .cell { border-color: var(--danger); }
/* An unseen digit, so the digit face is fetched with the page and the first digit typed does not flash in another face. */
.pin::after { content: "0"; position: absolute; opacity: 0; pointer-events: none; font: 500 30px/1 var(--mono); }
@keyframes blink { 50% { opacity: 0; } }

button {
  display: block;
  width: 100%;
  height: 56px;
  margin-top: 24px;
  /* White on Signal is 4.46:1. It passes AA only as large text (19px bold or more), so do not shrink this. */
  font: 700 19px/1 var(--body);
  color: #fff;
  background: var(--signal);
  border: 0;
  border-radius: 12px;
  cursor: pointer;
}
button:hover, button:active { background: var(--signal-deep); }
button:focus-visible { outline: 2px solid var(--halo); outline-offset: 2px; }

/* The survey is a GoHighLevel iframe with its own side padding; let it run to the edges of the column.
   It stays hidden until it reports that it has drawn itself, with a line of text in its place. After
   12 seconds of silence the line says so and the frame is shown anyway (verify.js). */
#survey { position: relative; margin: 8px -20px 0; }
.wait { position: absolute; top: 8px; left: 20px; right: 20px; text-align: center; color: var(--muted); }
#survey.late .wait { position: static; padding: 8px 20px 12px; }
iframe { display: block; width: 100%; min-height: 680px; border: 0; opacity: 0; }
/* GoHighLevel's embed script switches the survey's visibility off while it starts up, and that throws
   keyboard focus back to the page. Opacity already hides it, so keep it focusable. */
iframe { visibility: visible !important; }
#survey.ready iframe, #survey.late iframe { opacity: 1; transition: opacity 0.2s; }

/* Tort Terminal signs the page at the foot. */
.built {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: auto;
  padding: 40px 20px 28px;
  font-size: 13px;
  color: var(--muted);
}
.tt { display: block; width: auto; height: 18px; }

@media (max-width: 350px) {
  .brand { padding-top: 32px; }
  main { padding-top: 28px; }
  .pin { grid-template-columns: repeat(4, 60px); gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  #survey.ready iframe, #survey.late iframe { transition: none; }
  .pin:focus-within .cell.on:empty::after { animation: none; }
}

[hidden] { display: none; }