/* Guide tips for the login and registration pages: small popup bubbles with an arrow, plus the
   "Your White Room ID" welcome card. Colours come from style.css. See guide.js to change the wording. */
.wr-tip {
  position: absolute; z-index: 60; box-sizing: border-box; max-width: min(232px, calc(100vw - 16px)); white-space: nowrap;
  padding: 4px 28px 4px 11px; border-radius: 10px; background: var(--blue-d, #1d4ed8); color: #fff;
  font-size: 12px; line-height: 1.3; font-weight: 600; letter-spacing: .1px;
  box-shadow: 0 6px 18px rgba(29, 78, 216, .32); pointer-events: none;
  opacity: 0; transform: translateY(4px); transition: opacity .22s ease, transform .22s ease;
}
.wr-tip.on { opacity: 1; transform: none; }
.wr-tip[hidden] { display: none; }
.wr-tip::after { content: ""; position: absolute; left: var(--ax, 20px); width: 10px; height: 10px; background: inherit; transform: translateX(-50%) rotate(45deg); border-radius: 2px; }
.wr-tip[data-side="above"]::after { bottom: -4px; }
.wr-tip[data-side="below"]::after { top: -4px; }
.wr-tip button {
  pointer-events: auto; position: absolute; right: 5px; top: 50%; margin-top: -9px; width: 18px; height: 18px; padding: 0;
  border: 0; border-radius: 50%; background: rgba(255, 255, 255, .22); color: #fff; font-size: 13px; line-height: 18px; text-align: center; cursor: pointer;
}
.wr-tip button:hover, .wr-tip button:focus-visible { background: rgba(255, 255, 255, .4); outline: none; }
@media (prefers-reduced-motion: no-preference) {
  .wr-tip.pulse.on { animation: wrBob 1.9s ease-in-out infinite; }
  @keyframes wrBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
}
@media (prefers-reduced-motion: reduce) { .wr-tip { transition: none; } }

/* the small "?" button that turns tips on and off */
.wr-tipsbtn {
  position: fixed; right: 12px; top: 12px; z-index: 61; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--edge, #dde6fb);
  background: #fff; color: var(--blue-d, #1d4ed8); font: 800 18px/1 inherit; cursor: pointer; box-shadow: 0 6px 18px rgba(15, 26, 61, .18);
}
.wr-tipsbtn[aria-pressed="true"] { background: var(--blue-d, #1d4ed8); color: #fff; border-color: transparent; }
.wr-tipsbtn:focus-visible { outline: 3px solid rgba(47, 107, 255, .45); outline-offset: 2px; }
.wr-tipsbtn[hidden] { display: none; }

/* "Your White Room ID" card shown right after registering */
.wr-idback { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; background: rgba(6, 11, 36, .62); }
.wr-idback[hidden] { display: none; }
.wr-idcard { width: min(100%, 420px); background: #fff; color: var(--ink, #0f1a3d); border-radius: 20px; padding: 26px 22px 20px; text-align: center; box-shadow: 0 24px 60px rgba(2, 8, 40, .5); }
.wr-idcard h2 { margin: 0 0 4px; font-size: 1.35rem; font-weight: 800; }
.wr-idcard p { margin: 0 0 14px; color: var(--mute, #5d6b8f); font-size: .92rem; line-height: 1.45; }
.wr-idbox { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 6px 0 14px; padding: 14px 10px; border-radius: 14px; border: 2px dashed var(--blue, #2f6bff); background: var(--soft, #eef3ff); }
.wr-idbox code { font: 800 1.45rem/1.1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .5px; color: var(--blue-d, #1d4ed8); user-select: all; }
.wr-idbox button { border: 1px solid var(--edge, #dde6fb); background: #fff; color: var(--blue-d, #1d4ed8); border-radius: 10px; padding: 7px 11px; font-weight: 700; font-size: .82rem; cursor: pointer; }
.wr-idcard .wr-keep { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 14px; font-size: .85rem; color: var(--mute, #5d6b8f); }
.wr-idcard .wr-go { width: 100%; border: 0; border-radius: 12px; padding: 12px; font-weight: 800; font-size: 1rem; color: #fff; cursor: pointer; background: linear-gradient(180deg, #3a78ff, #1d4ed8); }
.wr-idcard button:focus-visible, .wr-idcard input:focus-visible { outline: 3px solid rgba(47, 107, 255, .45); outline-offset: 2px; }

/* room for the tip under the Register button (set by guide.js only while that tip is showing) */
.wr-room-below-submit #authRegister .switch { margin-top: 46px; }

/* the WhatsApp group and home screen card (after sign-up, and from the Profile) */
.wr-joincard { text-align: left; max-height: calc(100vh - 32px); overflow-y: auto; }
.wr-joincard h2, .wr-joincard > p { text-align: center; }
.wr-joincard .wr-wa { display: block; text-align: center; text-decoration: none; border-radius: 12px; padding: 12px; font-weight: 800; color: #fff; background: #1f9d55; margin: 0 0 16px; }
.wr-joincard .wr-wa:focus-visible, .wr-joincard .wr-install:focus-visible { outline: 3px solid rgba(47, 107, 255, .45); outline-offset: 2px; }
.wr-home { border-top: 1px solid #e4e9f5; padding-top: 14px; margin-bottom: 14px; }
.wr-home h3 { margin: 0 0 8px; font-size: 1rem; font-weight: 800; }
.wr-home ol { margin: 0 0 10px; padding-left: 1.3em; color: var(--ink, #0f1a3d); font-size: .92rem; line-height: 1.5; }
.wr-home li + li { margin-top: 4px; }
.wr-install { width: 100%; border: 1.5px solid #2f6bff; border-radius: 12px; padding: 10px; background: #fff; color: #1d4ed8; font-weight: 800; cursor: pointer; }
.school-form { margin-top: 10px; }