/* kd-email.css - the live email hint under an email field, and the "change my email" block inside the
 * My Drop "Your information" panel. Nalu, Nov 8 2026.
 * Uses the site's own custom properties (--gold, --danger, --ink-dim ...) so it inherits the theme
 * instead of inventing colours. Kept in its own file rather than bolted onto styles.css (v244) so the
 * cache bump for this work touches one small file instead of every page's stylesheet.
 */

/* ---------------------------------------------------------------- the hint line */
.kd-eh {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 8px 0 0;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--ink-dim);
}
.kd-eh[hidden] { display: none; }

.kd-eh .kd-eh-ic {
  flex: 0 0 auto;
  width: 17px; height: 17px;
  margin-top: 1px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: 700; line-height: 1;
  border: 1px solid currentColor;
}
.kd-eh .kd-eh-txt { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }

.kd-eh-ok { color: var(--green-lt, #8fcf8f); }
.kd-eh-bad { color: var(--danger, #ff8a8a); }
.kd-eh-ask { color: var(--gold-lt, #e3c87f); }

/* the one-tap correction. A real <button>, so it is reachable by keyboard and reads as an action. */
.kd-eh-fix {
  flex: 0 0 auto;
  font-family: inherit; font-size: .76rem; font-weight: 700;
  cursor: pointer;
  padding: 4px 11px;
  border-radius: 999px;
  color: #1a1406;
  background: var(--gold, #d6b25c);
  border: 1px solid var(--gold, #d6b25c);
  transition: transform .12s, filter .14s;
}
.kd-eh-fix:hover { transform: translateY(-1px); filter: brightness(1.08); }
.kd-eh-fix:active { transform: none; }

/* ---------------------------------------------------------------- change my email */
.yi-change {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--card-line);
}
.yi-change[hidden] { display: none; }

.yi-change-open {
  font-family: inherit; font-size: .83rem; font-weight: 700; cursor: pointer;
  padding: 8px 16px; border-radius: 999px;
  color: var(--ink-dim);
  background: transparent;
  border: 1px solid var(--card-line);
  transition: color .14s, border-color .14s;
}
.yi-change-open:hover { color: var(--gold-lt); border-color: var(--gold-deep); }
.yi-change-open[hidden] { display: none; }

.yi-change-form[hidden], .yi-pending[hidden] { display: none; }
.yi-change-form { margin: 4px 0 0; }
.yi-change-label {
  display: block; margin: 0 0 6px;
  color: var(--ink-dim); font-size: .8rem; font-weight: 600;
}
.yi-change-form .modal-input { width: 100%; }

.yi-change-note {
  margin: 10px 0 0;
  color: var(--ink-dim); font-size: .78rem; line-height: 1.55;
}
.yi-change-row {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: 12px 0 0;
}
.yi-change-go {
  font-family: inherit; font-size: .85rem; font-weight: 700; cursor: pointer;
  padding: 9px 18px; border-radius: 999px;
  color: #1a1406; background: var(--gold); border: 1px solid var(--gold);
  transition: filter .14s, transform .12s;
}
.yi-change-go:hover { filter: brightness(1.07); transform: translateY(-1px); }
.yi-change-go:disabled { opacity: .55; cursor: default; transform: none; filter: none; }
.yi-change-off {
  font-family: inherit; font-size: .85rem; font-weight: 600; cursor: pointer;
  padding: 9px 16px; border-radius: 999px;
  color: var(--ink-dim); background: transparent; border: 1px solid var(--card-line);
}
.yi-change-off:hover { color: var(--ink); }

.yi-change-msg { margin: 10px 0 0; font-size: .83rem; line-height: 1.5; }
.yi-change-msg[hidden] { display: none; }
.yi-change-msg.good { color: var(--green-lt); }
.yi-change-msg.bad { color: var(--danger); }
.yi-change-msg.info { color: var(--gold-lt); }

/* a change that has been asked for and is waiting on the new inbox */
.yi-pending {
  margin: 12px 0 0; padding: 12px 14px;
  border: 1px solid var(--gold-deep); border-radius: 12px;
  background: rgba(214, 178, 92, .06);
}
.yi-pending p { margin: 0; font-size: .83rem; line-height: 1.55; color: var(--ink); }
.yi-pending b { color: var(--gold-lt); overflow-wrap: anywhere; }
.yi-pending .yi-change-off { margin-top: 10px; }

/* the line the page shows after coming back from one of the emailed links */
.yi-flash { margin: 0 0 12px; padding: 11px 14px; border-radius: 12px; font-size: .85rem; line-height: 1.5; }
.yi-flash[hidden] { display: none; }
.yi-flash.good { border: 1px solid var(--green-deep, #2f5d33); background: rgba(90, 170, 100, .08); color: var(--green-lt); }
.yi-flash.bad { border: 1px solid var(--danger, #ff8a8a); background: rgba(255, 138, 138, .07); color: var(--danger); }
.yi-flash.info { border: 1px solid var(--gold-deep); background: rgba(214, 178, 92, .07); color: var(--gold-lt); }

@media (max-width: 480px) {
  .kd-eh { flex-wrap: wrap; }
  .kd-eh-fix { margin-left: 25px; }
  .yi-change-row { flex-direction: column; align-items: stretch; }
  .yi-change-row button { width: 100%; }
}