.comos-otp {
  /*
   * ⚠ צבע המותג. שתי השורות האלה הן המקום היחיד לשנות אותו.
   *
   * המשתנה נקרא accent ולא blue בכוונה: שם שמתאר צבע מתיישן ברגע
   * שמישהו משנה אותו, ואז הקוד אומר "כחול" ומראה ירוק.
   *
   * ‎--comos-accent‎       הכפתורים והקישורים
   * ‎--comos-accent-dark‎  ריחוף ומיקוד
   */
  --comos-accent: #4a9d3f;
  --comos-accent-dark: #3d8234;

  /* לתאימות לאחור, אם נשאר שימוש ישן במקום כלשהו. */
  --comos-blue: var(--comos-accent);

  --comos-ink: #1f2d49;
  direction: rtl;
  max-width: 520px;
  margin: 24px auto;
  padding: 28px;
  border: 1px solid #d9e0e7;
  border-radius: 16px;
  background: #fff;
  color: var(--comos-ink);
  box-shadow: 0 8px 28px rgba(31, 45, 73, .08);
}

.comos-otp *,
.comos-otp *::before,
.comos-otp *::after { box-sizing: border-box; }

.comos-otp h2 { margin: 0 0 12px; }
.comos-otp p { line-height: 1.55; }
.comos-otp label { display: block; margin: 18px 0 7px; font-weight: 700; }

.comos-otp input {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 10px 14px;
  border: 2px solid #b9c6d2;
  border-radius: 9px;
  background: #fff;
  color: #151b22;
  font-size: 21px;
  text-align: center;
}

.comos-otp input[name="code"] {
  font-size: 30px;
  letter-spacing: .3em;
  padding-inline-start: calc(14px + .3em);
}

.comos-otp button {
  width: 100%;
  min-height: 50px;
  margin-top: 16px;
  border: 0;
  border-radius: 9px;
  background: var(--comos-accent);
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.comos-otp button:disabled { opacity: .55; cursor: wait; }
.comos-otp button.comos-otp__link { background: transparent; color: var(--comos-accent); }
.comos-otp__status { min-height: 25px; color: #9c2f2b; font-weight: 700; }
.comos-otp__timer { text-align: center; font-variant-numeric: tabular-nums; }
.comos-otp__help {
  margin-top: 20px;
  color: #596777;
  font-size: 14px;
  line-height: 1.6;
  transition: background .3s, border-color .3s, color .3s;
  border: 1px solid transparent;
  border-radius: 9px;
  padding: 10px 12px;
}

/* Raised after ~30 seconds with no successful code: the member is most likely
   waiting for an email that will never arrive. */
.comos-otp__help--alert {
  background: #fdf7e8;
  border-color: #e0a83c;
  color: #6b4c08;
  font-size: 15px;
}

.comos-otp__help--alert strong { color: #8a6415; }

/* Tap targets, not text: a member who cannot get in should reach help in one tap. */
.comos-otp__contact { margin-top: 12px; }

.comos-otp__contact-name {
  font-weight: 800;
  color: var(--comos-ink);
  margin-bottom: 8px;
}

.comos-otp__contact-link {
  display: block;
  min-height: 46px;
  margin-top: 8px;
  padding: 12px 14px;
  border: 2px solid var(--comos-accent);
  border-radius: 9px;
  background: #fff;
  color: var(--comos-accent);
  font-weight: 700;
  font-size: 16px;
  text-align: center;
  text-decoration: none;
}

.comos-otp__contact-link:hover,
.comos-otp__contact-link:focus {
  background: var(--comos-accent);
  color: #fff;
  text-decoration: none;
}

/* Signed-in panel: shown instead of the form, including after a recovery reload. */
.comos-otp--done { text-align: center; }
.comos-otp--done h2 { color: #2e6b40; }

.comos-otp__button {
  display: block;
  width: 100%;
  min-height: 50px;
  margin-top: 20px;
  padding: 13px 18px;
  border-radius: 9px;
  background: var(--comos-accent);
  color: #fff;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
}

.comos-otp__button:hover,
.comos-otp__button:focus { background: var(--comos-accent-dark); color: #fff; text-decoration: none; }

@media (max-width: 560px) {
  .comos-otp { margin: 12px; padding: 22px 18px; }
}