/*
 * Login Security (LoginSecuritySettings::mode, body[data-otp-mode]).
 *
 * With the emailed code asked for at every sign-in ("always"), a remembered device
 * skips nothing, so the sign-in form's "Remember device" box is not shown. With the
 * code off it skips nothing either.
 */
body[data-otp-mode="always"] .modal-remember,
body[data-otp-mode="off"] .modal-remember {
  display: none;
}

/* Its row holds nothing else now ("Forgot password?" sits by the Password label), so
   the row goes with it rather than leaving a gap above Continue. */
body[data-otp-mode="always"] .modal--auth .modal-auth-actions-row,
body[data-otp-mode="off"] .modal--auth .modal-auth-actions-row {
  display: none;
}

/* --- the Login Security screen (security-settings.js), kept tight ---------- */

/* A title line, not the icon block the other screens carry. */
.sec-page .sec-head { display: block; margin-bottom: .4rem; }
.sec-page .sec-head .newly-page__title { margin: 0 0 .15rem; }
.sec-page .sec-head .newly-page__sub { margin: 0; font-size: .8rem; }

.sec-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .2rem .8rem;
  padding: .65rem .9rem 0;
}

.sec-bar__title { font-size: 14px; color: var(--text, #0a2754); }
.sec-bar__meta { font-size: 11.5px; color: var(--text2, #64748b); }

/* The three settings: one line each, three across where there is room. */
.sec-modes {
  display: grid;
  gap: .4rem;
  padding: .55rem .9rem .7rem;
}

.sec-mode {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  align-content: start;
  gap: .1rem .55rem;
  padding: .5rem .7rem;
  border: 1px solid rgba(15, 61, 122, .14);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  min-width: 0;
}

/* Under the choice: one line each, the reason on hover. */
.sec-card--tight .sec-note--tight { padding: .55rem .9rem; }
.sec-card--tight .sec-note--tight .sec-note__count { margin: 0; cursor: help; }
.sec-card--tight .sec-note--tight strong { display: inline; margin: 0; }
.sec-card--tight .sec-people { margin-top: .2rem; }
.sec-card--tight .sec-warn--tight { padding: .55rem .9rem; }
.sec-card--tight .sec-warn--tight strong { display: inline; margin: 0; }

.sec-mode:hover { border-color: rgba(15, 61, 122, .4); }
.sec-mode:focus-visible { outline: 3px solid rgba(15, 61, 122, .35); outline-offset: 2px; }
.sec-mode:disabled { opacity: .6; cursor: progress; }

.sec-mode.is-on {
  border-color: #1f7a44;
  background: #f1faf4;
  box-shadow: inset 0 0 0 1px #1f7a44;
}

.sec-mode__dot {
  width: 16px;
  height: 16px;
  margin-top: .1rem;
  border-radius: 50%;
  border: 2px solid rgba(15, 61, 122, .35);
  background: #fff;
}

.sec-mode.is-on .sec-mode__dot {
  border-color: #1f7a44;
  background: radial-gradient(circle, #1f7a44 0 4px, #fff 5px);
}

.sec-mode__title {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text, #0a2754);
}

.sec-mode__title .sec-mode__tag {
  margin-left: .45rem;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #1f7a44;
}

.sec-mode__text {
  grid-column: 2;
  font-size: 12px;
  line-height: 1.35;
  color: var(--text2, #64748b);
}

@media (min-width: 900px) {
  /* Three across, as the choice reads: none, some, every time. */
  .sec-modes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}