/* Team details form (index.html) — fields, upload box and the thank-you
   view, on top of the M8RIC look in base.css. */

/* Background for the form (8 Oct 2026): pure black, with just two violet
   glows — the one in the top right, and the same glow centred at the very
   bottom of the page, under the footer. The background scrolls with the page
   (not fixed to the window), so the bottom glow sits beneath the footer and
   the top one stays at the top. Sizes are in px so the long page doesn't
   stretch them. */
:root {
  --bg: #000;
  --bg-accent: radial-gradient(ellipse 760px 400px at 90% 0, rgba(124, 31, 212, .72), rgba(124, 31, 212, .24) 44%, transparent 100%),
               radial-gradient(ellipse 760px 400px at 50% 100%, rgba(124, 31, 212, .72), rgba(124, 31, 212, .24) 44%, transparent 100%);
}
body { background-attachment: scroll; }

/* Halftone dots down the left (js/backdrop.js), and a fine film grain over the
   whole background so the glows read as printed, not as a smooth digital
   gradient. Both sit behind the card and never take a click. */
.backdrop {
  position: absolute;
  top: 0; left: 0;
  z-index: 0;
  pointer-events: none;
}
.backdrop[hidden] { display: none; }
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .07;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.card--form { max-width: 640px; }

/* Header: the logo centred, the globe on the right. An empty column on the
   left as wide as the globe's keeps the logo truly central. */
.card--form .brand { grid-template-columns: 76px 1fr 76px; }
.card--form .globe { grid-column: 3; grid-row: 1; }

/* "FINANCE" under the M8RIC lettering, as one lockup. Measured from the logo
   image (440 x 164): the lettering runs from x 162 to 437 and ends at y 123,
   with clear space beneath it down to the foot of the mark. The word sits in
   that space, centred under the lettering with normal letter spacing, in
   Manrope Bold (the owner's pick, 8 Oct 2026). Sizes follow the logo's width,
   so it stays in proportion on phones. */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/manrope-700-latin.woff2") format("woff2");
}
.lockup {
  grid-column: 2;
  justify-self: center;
  position: relative;
  width: 172px;               /* set here (not by the image) so the sizes below can follow it */
  container-type: inline-size;
}
.card--form .lockup img { display: block; width: 100%; }
.lockup__sub {
  position: absolute;
  left: 36.82%;               /* 162 / 440 */
  width: 62.73%;              /* 276 / 440 */
  top: calc(75.6% + 3px);     /* just under the lettering: 124 / 164 */
  margin: 0;
  color: #fff;
  font-family: "Manrope", var(--font-body);
  font-size: 14px;
  font-size: 8cqw;            /* about 14px beside a 172px logo */
  font-weight: 700;
  font-synthesis: none;       /* never a smudged "fake bold" */
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  text-transform: uppercase;
}

.card--form .foot { text-align: center; }

.lede { margin-bottom: 8px; }

/* Section labels sit a little further from what came before them. */
#teamForm h2 { margin: 34px 0 18px; }
#teamForm h2:first-child { margin-top: 30px; }

/* ------------------------------------------------------------------ Fields */

.field { margin-bottom: 20px; min-width: 0; }

.field label,
.field .label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--text);
}
.field .label em {
  margin-left: 8px;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--subtle);
}

.field input[type="text"] {
  display: block;
  width: 100%;
  min-height: 50px;
  padding: 0 15px;
  border: 1px solid #2C2E36;
  border-radius: 12px;
  background: rgba(7, 8, 12, .72);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;            /* 16px stops iPhones zooming in on tap */
  line-height: 1.3;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.field input::placeholder { color: #5E6B80; }
.field input:hover { border-color: #3A3D47; }
.field input:focus {
  outline: none;
  border-color: var(--brand);
  background: rgba(7, 8, 12, .9);
  box-shadow: 0 0 0 3px rgba(168, 123, 240, .18);
}
/* Long account numbers read more easily with a little air between digits. */
#account, #account2, #ifsc, #joined { font-variant-numeric: tabular-nums; letter-spacing: .04em; }
#ifsc { text-transform: uppercase; }

.field__hint {
  margin: 7px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--subtle);
}
.field__error {
  margin: 7px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--down-fg);
}
.field__error:empty { display: none; }
.field.is-invalid input[type="text"] { border-color: rgba(240, 122, 154, .7); }
.field.is-invalid input:focus { box-shadow: 0 0 0 3px rgba(240, 122, 154, .16); }

/* Two fields side by side on wider screens. */
.pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 16px;
}

/* ------------------------------------------------------------- Photo upload */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.drop {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 0 !important;
  padding: 26px 20px 24px;
  border: 1px dashed rgba(168, 123, 240, .45);
  border-radius: 14px;
  background: rgba(124, 31, 212, .06);
  text-align: center;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.drop[hidden] { display: none !important; }
.drop:hover,
.drop.is-over { border-color: var(--brand); background: rgba(124, 31, 212, .12); }
#photo:focus-visible + .drop { outline: 2px solid var(--brand-strong); outline-offset: 3px; }
.drop__icon {
  width: 30px; height: 30px;
  margin-bottom: 4px;
  fill: none;
  stroke: var(--brand-strong);
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.drop__title { font-size: 15px; font-weight: 500; color: var(--text); }
.drop__title u { color: var(--brand-strong); text-underline-offset: 3px; }
.drop__phone { display: none; color: var(--brand-strong); }
.drop__sub { max-width: 380px; font-size: 13px; font-weight: 400; line-height: 1.45; color: var(--subtle); }

.file {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid #2C2E36;
  border-radius: 14px;
  background: rgba(7, 8, 12, .72);
}
.file[hidden] { display: none; }
.file__thumb {
  flex: none;
  width: 56px; height: 56px;
  border-radius: 9px;
  object-fit: cover;
  background: #0B0C10;
}
.file__thumb[hidden] { display: none; }
.file__pdf {
  flex: none;
  display: grid; place-items: center;
  width: 56px; height: 56px;
  border: 1px solid rgba(168, 123, 240, .4);
  border-radius: 9px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--brand-strong);
}
.file__pdf[hidden] { display: none; }
.file__meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.file__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  color: var(--text);
}
.file__size { font-size: 12px; color: var(--subtle); }
.file__remove {
  flex: none;
  padding: 8px 12px;
  border: 1px solid #2C2E36;
  border-radius: 999px;
  background: none;
  color: var(--muted);
  font: 500 13px/1 var(--font-body);
  cursor: pointer;
}
.file__remove:hover { border-color: var(--down-line); color: var(--down-fg); }

/* The trap field for bots: off screen, never seen or reached by people. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* -------------------------------------------------------------- Send button */

.actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 20px;
  margin-top: 32px;
}
.actions__note { margin: 0; font-size: 13px; line-height: 1.45; color: var(--subtle); flex: 1 1 220px; }

.btn--submit {
  justify-content: center;
  min-width: 190px;
  font-family: var(--font-body);
  cursor: pointer;
}
.btn--submit:disabled { cursor: progress; opacity: .8; }
.btn--submit .spin {
  width: 15px; height: 15px;
  margin-right: 10px;
  border: 2px solid rgba(188, 152, 245, .35);
  border-top-color: var(--brand-strong);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .btn--submit .spin { animation: spin .8s linear infinite !important; }
}

/* Problem sending: a full hairline in the error colour, as on the dashboard. */
.banner {
  margin: 22px 0 0;
  padding: 12px 16px;
  border: 1px solid var(--down-line);
  border-radius: 12px;
  background: var(--down-bg);
  color: #F6B3C5;
  font-size: 14px;
  line-height: 1.5;
}
.banner[hidden] { display: none; }

/* --------------------------------------------------------------- Thank you */

.done { text-align: center; padding: 8px 0 4px; outline: none; }
.done[hidden] { display: none; }
.done__mark {
  display: grid; place-items: center;
  width: 64px; height: 64px;
  margin: 4px auto 22px;
  border: 1px solid rgba(168, 123, 240, .55);
  border-radius: 50%;
  background: #07060B;
  box-shadow: 0 0 0 4px rgba(168, 123, 240, .08), 0 10px 28px -8px rgba(124, 31, 212, .8);
}
.done__mark svg {
  width: 28px; height: 28px;
  fill: none;
  stroke: var(--brand-strong);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.done p { max-width: 400px; margin: 0 auto 22px; }
.linkbtn {
  padding: 6px 4px;
  border: none;
  background: none;
  color: var(--brand-strong);
  font: 500 14px/1.4 var(--font-body);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* -------------------------------------------------------------- Scroll rail */

/* The dashboard's scroll rail (copied 8 Oct 2026, its dark-theme colours): a
   slim rounded bar on the right edge in place of the browser's scrollbar. A
   black handle with a violet edge, sized and placed by js/scrollrail.js; while
   the page is scrolling a violet streak runs down it top to bottom, like a
   loading bar, and stops when the scrolling does. Drag the handle, or click
   the track to jump. */
html { scrollbar-width: none; }
html::-webkit-scrollbar { width: 0; height: 0; }

.scrollrail {
  --rail-track:       rgba(168, 123, 240, .08);
  --rail-track-hover: rgba(168, 123, 240, .14);
  --rail-thumb:       #07060B;
  --rail-edge:        rgba(168, 123, 240, .45);
  --rail-streak:      rgba(188, 152, 245, .95);
  position: fixed; top: 12px; bottom: 12px; right: 4px; z-index: 60;
  width: 6px; border-radius: 999px;
  background: var(--rail-track);
  transition: width .15s ease, background .15s ease;
}
.scrollrail:hover, .scrollrail.is-dragging { width: 10px; background: var(--rail-track-hover); }
.scrollrail[hidden] { display: none; }
.scrollrail__thumb {
  position: absolute; left: 0; right: 0; top: 0;
  min-height: 40px; border-radius: 999px;
  background: var(--rail-thumb);
  box-shadow: 0 0 0 1px var(--rail-edge);
  overflow: hidden; cursor: grab;
  touch-action: none;         /* a finger on the handle drags it, not the page */
}
.scrollrail.is-dragging .scrollrail__thumb { cursor: grabbing; }
.scrollrail__thumb::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 60%;
  background: linear-gradient(180deg, transparent, var(--rail-streak), transparent);
  transform: translateY(-100%); opacity: 0;
}
.scrollrail.is-scrolling .scrollrail__thumb::after { opacity: 1; animation: rail-run 1s linear infinite; }
@keyframes rail-run { from { transform: translateY(-100%); } to { transform: translateY(170%); } }
/* Kept for PCs that report reduced motion, as on the dashboard. */
@media (prefers-reduced-motion: reduce) {
  .scrollrail.is-scrolling .scrollrail__thumb::after { animation: rail-run 1s linear infinite !important; }
}

/* ------------------------------------------------------------------ Phones */

@media (max-width: 560px) {
  .pair { grid-template-columns: 1fr; }
  .drop__desk { display: none; }           /* no dragging on a phone */
  .drop__phone { display: block; }
  .drop { padding: 22px 16px 20px; }
  .actions { flex-direction: column; align-items: stretch; }
  .btn--submit { width: 100%; height: 52px; }
  .actions__note { text-align: center; flex: none; }
}
@media (max-width: 520px) {
  /* a strip of open background above the card, where the halftone dots and
     the top-right glow show on a phone */
  body { padding: 64px 12px max(14px, env(safe-area-inset-bottom)); }
  .card--form { padding: 26px 20px 24px; border-radius: 16px; }
  .card--form .brand { margin-bottom: 22px; padding-bottom: 18px; grid-template-columns: 56px 1fr 56px; column-gap: 12px; }
  .card--form .lockup { width: 128px; }
  .card--form .globe { width: 56px; height: 56px; }
  #teamForm h2:first-child { margin-top: 24px; }
  #teamForm h2 { margin: 28px 0 14px; }
}