/* DUPE: a link in a browser or in a text. Generic looks, not a copy of any real app. */
.stage { max-width: 640px; }   /* the link, the buttons and the answer box all line up */

.bubble .url { color: #1F63D6; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* the link itself: the browser's own font, so lookalike letters look the way they would for real */
.url { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; overflow-wrap: anywhere; }
.url span { transition: opacity .3s ease, background-color .3s ease; }
.url.is-revealed span { opacity: .38; }
.url.is-revealed .u-domain { opacity: 1; font-weight: 700; border-radius: 4px; padding: 0 1px; }
.url.is-revealed .u-domain { background: var(--mark); color: var(--ink); }
.url.is-revealed .u-mark { text-decoration: underline wavy var(--ink); text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* browser */
.br-top { display: flex; flex-direction: column; gap: 10px; }
.br-bar {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--white); border-radius: 12px; padding: 12px 14px;
  font-size: clamp(17px, 4.4vw, 21px); line-height: 1.35; color: var(--ink);
}
.br-lock { flex: none; width: 18px; height: 18px; margin-top: 3px; fill: #5A606B; color: #5A606B; }
.br-page { padding: 22px 22px 26px; display: flex; flex-direction: column; gap: 10px; background: var(--white); }
.br-brand { font-weight: 800; font-size: 20px; color: var(--ink); }
.br-head { font-weight: 600; font-size: 17px; color: var(--muted); margin-top: -4px; }
.sk { display: block; height: 14px; border-radius: 7px; background: #EDEDE8; width: 100%; }
.sk-short { width: 62%; }
.sk-btn { width: 38%; height: 36px; border-radius: 999px; background: #E3E3DC; margin-top: 4px; }

/* what the answer shows under the link */
.reveal { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; margin-top: 14px; }
.reveal-label { font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.reveal-domain { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: clamp(22px, 6vw, 28px); line-height: 1.2; font-weight: 800; overflow-wrap: anywhere; }
.reveal-tag { font-size: 15px; font-weight: 800; padding: 5px 12px; border-radius: 999px; margin-top: 4px; background: var(--ink); color: var(--white); }
.reveal-alt { font-size: 15px; color: var(--muted); margin-top: 4px; overflow-wrap: anywhere; }

@media (max-width: 560px) {
  .br-page { padding: 18px 18px 20px; }
}