/*
  Shared skin for login.html and register.html.
  ---------------------------------------------------------------------------
  Built to the tournament's own mockup: the stadium behind the sign-in screen,
  a light sheet behind registration, orange for the one action that matters on
  each screen, and every field a labelled row with its own mark.

  These are real HTML inputs, not Zoho's embedded widget. The widget was a page
  from another origin, so no rule in this file could reach inside it, it was
  white whatever the theme, and Zoho sized it shorter than its own contents so
  it carried a scrollbar of its own. The accounts are ours now - see
  `lib/credentials.js` in the function for the duty of care that comes with
  that.

  The colours are duplicated from AppTheme rather than shared, because a plain
  HTML page cannot import Dart.
*/

:root {
  --orange: #f47521;
  --orange-lift: #ff8f3c;
  --navy: #0b1b3f;
  --blue: #1b3c8f;

  --card: #ffffff;
  --text: #15192b;
  --muted: #6b7280;
  --faint: #9aa1b4;
  --border: #e5e7eb;
  --rail: #f1f3f8;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  min-height: 100vh;
  font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Noto Sans Devanagari", Arial, sans-serif;
  color: var(--text);
  display: flex;
  flex-direction: column;
}

/* --- Backgrounds --------------------------------------------------------- */

/*
  Two of them, because the mockup uses two. Sign-in sits on the photograph;
  registration, which is a long form, sits on a light wash so a column of
  fields stays readable.
*/
body.on-photo {
  background: var(--navy);
}

body.on-light {
  background: linear-gradient(180deg, #fff6f0 0%, #ffffff 42%);
}

/*
  Fixed rather than scrolled. On a short phone the card is taller than the
  viewport, and a background that scrolled away would leave the form sitting on
  bare colour halfway down.
*/
.backdrop {
  position: fixed;
  inset: 0;
  background-image: url("../assets/assets/images/stadium.jpg");
  background-size: cover;
  background-position: center;
  z-index: 0;
}

/* Light at the top where the sky is, deepening towards the bottom so the
   white card has something solid to sit against. */
.backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(11, 27, 63, 0.18) 0%,
    rgba(11, 27, 63, 0.52) 44%,
    rgba(11, 27, 63, 0.88) 100%
  );
}

.page {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 392px;
  margin: 0 auto;
  padding: 0 16px 22px;
}

/* --- Top bar ------------------------------------------------------------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 0 0;
  min-height: 40px;
}

.back {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
}

.back:hover {
  background: var(--rail);
}

.on-photo .back {
  color: #fff;
}

.on-photo .back:hover {
  background: rgba(255, 255, 255, 0.16);
}

.lang-switch {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  line-height: 1.2;
  margin-left: auto;
}

.on-photo .lang-switch {
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  backdrop-filter: blur(6px);
}

/* --- Brand --------------------------------------------------------------- */

.brand {
  text-align: center;
  padding: 4px 0 12px;
}

.brand img {
  width: 112px;
  max-width: 38vw;
  display: block;
  margin: 0 auto;
}

.on-photo .brand img {
  filter: drop-shadow(0 10px 26px rgba(0, 0, 0, 0.5));
}

.on-light .brand img {
  width: 88px;
}

.screen-title {
  margin: 8px 0 0;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.4px;
  text-align: center;
  color: var(--text);
}

/* --- The card ------------------------------------------------------------ */

.sheet {
  margin-top: auto;
  background: var(--card);
  border-radius: 18px;
  padding: 14px 13px 16px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.34);
}

/* Registration has no photograph to sit on, so its card carries a hairline
   instead of a heavy shadow. */
.on-light .sheet {
  margin-top: 0;
  box-shadow: 0 6px 22px rgba(15, 23, 42, 0.07);
  border: 1px solid var(--border);
}

.sheet-inner {
  max-width: 360px;
  margin: 0 auto;
}

/* --- Login / register switch -------------------------------------------- */

/*
  A segmented control, not two links. The two pages are peers and a player who
  landed on the wrong one should be able to cross over in a single obvious tap
  without reading a sentence to find the link in it.
*/
.tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--rail);
  border-radius: 999px;
  margin-bottom: 14px;
}

.tabs a {
  flex: 1;
  text-align: center;
  padding: 9px 8px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  color: var(--muted);
}

.tabs a[aria-current="page"] {
  background: linear-gradient(135deg, var(--orange), var(--orange-lift));
  color: #fff;
  box-shadow: 0 4px 12px rgba(244, 117, 33, 0.38);
}

/* --- Stepper ------------------------------------------------------------- */

/*
  Registration is three stages and a player who does not know that reads the
  account form as the whole thing, submits it, and then wonders where to put
  their batting style.
*/
.stepper {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin: 10px 0 16px;
}

.stepper .step {
  display: grid;
  justify-items: center;
  gap: 5px;
  width: 76px;
  text-align: center;
}

.stepper .dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
  background: var(--rail);
  color: var(--faint);
}

.stepper .step.is-done .dot,
.stepper .step.is-current .dot {
  background: var(--orange);
  color: #fff;
}

.stepper .step.is-current .dot {
  box-shadow: 0 0 0 4px rgba(244, 117, 33, 0.2);
}

.stepper .label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--faint);
  line-height: 1.25;
}

.stepper .step.is-done .label,
.stepper .step.is-current .label {
  color: var(--orange);
}

/* The rule between two dots, nudged down to meet their middles. */
.stepper .bar {
  flex: 1;
  height: 2px;
  max-width: 38px;
  margin-top: 12px;
  background: var(--border);
}

.stepper .bar.is-done {
  background: var(--orange);
}

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

.field {
  display: block;
  margin-bottom: 9px;
}

.field > .label {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}

.field .req {
  color: var(--orange);
}

/*
  The row carries the border, not the input, so the mark on the left and the
  reveal button on the right sit inside the same outline and the whole thing
  lights up together on focus.
*/
.control {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 11px;
  padding: 0 11px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.control:focus-within {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(244, 117, 33, 0.16);
}

.control .icon {
  flex: none;
  width: 17px;
  height: 17px;
  color: var(--faint);
}

.control:focus-within .icon {
  color: var(--orange);
}

.control input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 16px; /* Under 16px, iOS Safari zooms the page on focus. */
  color: var(--text);
  padding: 11px 0;
  /* A number input that spins is a different height from a text input, and a
     column of fields that do not line up is the thing this page exists to
     stop looking like. */
  appearance: none;
  -webkit-appearance: none;
}

.control input::placeholder {
  color: var(--faint);
}

/* --- Reveal ------------------------------------------------------------- */

.reveal {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--faint);
  cursor: pointer;
}

.reveal:hover {
  color: var(--muted);
  background: var(--rail);
}

/* --- Remember / forgot --------------------------------------------------- */

.row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 2px 0 12px;
  font-size: 12.5px;
}

.check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}

.check input {
  width: 17px;
  height: 17px;
  accent-color: var(--orange);
  margin: 0;
  cursor: pointer;
}

.link {
  color: var(--orange);
  font-weight: 700;
  text-decoration: none;
}

.link:hover {
  text-decoration: underline;
}

/* --- Buttons ------------------------------------------------------------- */

.btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  appearance: none;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--orange), var(--orange-lift));
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  padding: 12px 16px;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(244, 117, 33, 0.32);
  transition: filter 0.15s, box-shadow 0.15s;
}

.btn:hover:not(:disabled) {
  filter: brightness(1.05);
}

.btn:disabled {
  opacity: 0.6;
  cursor: default;
  box-shadow: none;
}

.btn .arrow {
  width: 18px;
  height: 18px;
}

/* A small action living inside a field row - "Get OTP" sits here. */
.btn-inline {
  flex: none;
  appearance: none;
  border: 0;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--orange), var(--orange-lift));
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 7px 11px;
  cursor: pointer;
}

.btn-inline:disabled {
  opacity: 0.55;
  cursor: default;
}

/* --- "or" rule ----------------------------------------------------------- */

.or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0;
  color: var(--faint);
  font-size: 12px;
  font-weight: 700;
}

.or::before,
.or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.btn-ghost {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  appearance: none;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: 14.5px;
  font-weight: 700;
  padding: 11px 16px;
  cursor: pointer;
}

.btn-ghost:hover {
  background: var(--rail);
}


/* --- Selects ------------------------------------------------------------- */

/*
  Stripped of the browser's own arrow and given ours, because the native one
  sits at a different height and colour in every browser and this is a column
  of ten fields where any one of them looking different is immediately obvious.
*/
.control select {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 16px;
  color: var(--text);
  padding: 11px 0;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

/* Until something is chosen the first option is a prompt, not a value, so it
   is painted like a placeholder. */
.control select:invalid,
.control select option[value=""] {
  color: var(--faint);
}

.control .chevron {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--faint);
  pointer-events: none;
}

/* --- Uploads ------------------------------------------------------------- */

.upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 16px 12px;
  border: 1.5px dashed var(--border);
  border-radius: 11px;
  background: #fbfcfe;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s, background 0.15s;
}

.upload:hover {
  border-color: var(--orange);
  background: #fff8f3;
}

.upload-icon {
  width: 22px;
  height: 22px;
  color: var(--faint);
}

.upload-text {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.4;
}

/* Filled in by the script once a file is chosen, so the box reports what it
   is holding rather than looking exactly as it did when empty. */
.upload-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--orange);
  word-break: break-all;
}

.upload.has-file {
  border-style: solid;
  border-color: var(--orange);
  background: #fff8f3;
}

/* --- Consent ------------------------------------------------------------- */

.consent {
  align-items: flex-start;
  gap: 10px;
  margin: 4px 0 14px;
  font-size: 13px;
  line-height: 1.45;
}

.consent input {
  margin-top: 1px;
}

/* --- Stepper tick -------------------------------------------------------- */

.stepper .tick {
  width: 15px;
  height: 15px;
}

/* --- Completion ---------------------------------------------------------- */

.done-card {
  text-align: center;
  padding: 6px 0 4px;
}

.done-mark {
  width: 58px;
  height: 58px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, #16a34a, #22c55e);
  box-shadow: 0 8px 20px rgba(22, 163, 74, 0.32);
}

.done-mark svg {
  width: 28px;
  height: 28px;
}

.done-lede {
  margin: 8px 0 16px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
}

/*
  What was actually saved, read back from the server rather than echoed from
  the form - so a field the server rejected or trimmed shows as it really is.
*/
.summary {
  margin: 0 0 18px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--rail);
  text-align: left;
  font-size: 13px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 7px 14px;
}

.summary dt {
  color: var(--muted);
  margin: 0;
}

.summary dd {
  margin: 0;
  font-weight: 700;
  color: var(--text);
  text-align: right;
}

/* The completion page's action is a link, not a button. */
a.btn {
  text-decoration: none;
}

/* --- The guest door ------------------------------------------------------ */

/*
  Set apart below a rule and in the quietest colour on the sheet. It signs
  nobody in - it opens the app over seeded demo data - and given the same
  weight as "Login" people take it by mistake and then report that their
  registration vanished.
*/
.guest-foot {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  display: grid;
  gap: 2px;
}

.guest-link {
  font-weight: 700;
  font-size: 13.5px;
}

.guest-note {
  font-size: 12px;
  color: var(--faint);
}

/* --- Errors -------------------------------------------------------------- */

/*
  One box above the fields rather than a message under each.

  The server checks the whole form and answers with the first thing wrong with
  it, so there is only ever one message to show - and a single place to look
  for it beats hunting down a column of fields for the one that turned red.
*/
.form-error {
  display: none;
  margin: 0 0 11px;
  padding: 10px 12px;
  border-radius: 11px;
  background: rgba(185, 28, 28, 0.08);
  border: 1px solid rgba(185, 28, 28, 0.28);
  color: #9f1239;
  font-size: 14px;
  line-height: 1.5;
}

/* --- Foot ---------------------------------------------------------------- */

.foot {
  margin-top: 13px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}

.foot a {
  color: var(--orange);
  font-weight: 700;
  text-decoration: none;
}

.foot a:hover {
  text-decoration: underline;
}