/* Free tools: the link checker, the fake link finder and the QR code checker. Mobile first.
   Each page does one thing: a big headline, one line, then the tool, with the answer right under it.
   Tips, questions and links on to other tools sit further down, and quieter.
   Green and red only mean a good or bad result. The giveaways get the yellow highlighter, like the games.
   Addresses use the phone's own font, so lookalike letters look the way they would for real.
   The fakes themselves are styled in tool-lookalike.css. */
.tool-page [hidden] { display: none !important; }
.tool-page { --addr: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }

.tool-hero { padding-bottom: 24px; }
.tool-hero h1 { font-size: clamp(32px, 7.6vw, 64px); max-width: 980px; }     /* the same size as the other tools' headlines */

/* the box you paste a link into, type a website into, or scan a code with */
.tool-box {
  width: calc(100% - 32px); max-width: 720px; margin: 0 auto 48px; padding: 22px; border-radius: 26px; background: var(--paper);
  display: flex; flex-direction: column; gap: 14px;
  --room: calc(min(100vw - 32px, 720px) - 92px);     /* the width inside an answer, for sizing the big domain */
}

/* ---------- the link checker: one big box to paste into, one big button ---------- */
.lc-form { display: flex; flex-direction: column; gap: 12px; }
.lc-field { position: relative; }
.lc-input {
  display: block; width: 100%; min-height: 132px; max-height: 360px; resize: none; field-sizing: content; margin: 0; padding: 16px 18px;
  border: 2px solid var(--ink); border-radius: 20px; background: var(--white); color: var(--ink);
  font: 500 19px/1.4 var(--addr); overflow-wrap: anywhere;
}
.lc-input:focus { outline: none; box-shadow: 0 0 0 4px var(--mark); }
.lc-input::placeholder { color: #80868F; }
/* Paste: quiet, inside the empty box. One tap on a phone, instead of press, hold and Paste. Gone once there's text. */
.lc-paste {
  position: absolute; right: 12px; bottom: 12px; min-height: 48px; padding: 0 18px;
  display: inline-flex; align-items: center; gap: 8px;
  border: 2px solid var(--line); border-radius: 999px; background: var(--white); color: var(--ink);
  font: 700 16px/1 var(--body); cursor: pointer;
}
.lc-paste svg { width: 16px; height: 16px; flex: none; }
@media (hover: hover) { .lc-paste:hover { border-color: var(--ink); } }
.tool-go { width: 100%; min-height: 64px; font-size: 20px; }
.tool-private { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 1.4; color: var(--muted); }
.tool-private svg { flex: none; width: 16px; height: 16px; margin-top: 1px; fill: currentColor; }
.lc-form .tool-private { justify-content: center; text-align: left; }

/* ---------- the answer ---------- */
.lc-out:empty { display: none; }
.lc-out-inner { display: flex; flex-direction: column; gap: 12px; }
.lc-msg { font-size: 17px; font-weight: 700; line-height: 1.45; padding: 2px; }
.lc-found { font-size: 15px; font-weight: 700; color: var(--muted); }
.lc-result {
  background: var(--white); border: 2px solid var(--line); border-radius: 20px; padding: 20px;
  display: flex; flex-direction: column; gap: 8px; min-width: 0;
}
.lc-result .lc-found { margin-bottom: 4px; }
.lc-label { font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
/* the real domain: as big as fits on one line, smaller for a long one, which can then wrap after a dot */
.lc-domain {
  font: 800 clamp(20px, calc(var(--room) / (var(--len, 14) * 0.64)), 44px)/1.12 var(--addr); letter-spacing: -0.01em; color: var(--ink);
  overflow-wrap: anywhere; margin-bottom: 2px;
}
.is-whole { white-space: nowrap; }
.lc-swap {
  background: var(--mark); color: var(--ink); border-radius: 4px; padding: 0 2px;
  text-decoration: underline wavy var(--ink); text-decoration-thickness: 2px; text-underline-offset: 6px;
}
.lc-full { font: 500 16px/1.55 var(--addr); color: var(--muted); overflow-wrap: anywhere; }
.lc-real {
  background: var(--mark); color: var(--ink); font-weight: 700; border-radius: 4px; padding: 1px 2px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.lc-hint { font-size: 14px; line-height: 1.4; color: var(--muted); }
.lc-verdict { margin-top: 8px; padding-top: 16px; border-top: 2px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.lc-count { font-family: var(--display); font-weight: 400; font-size: 34px; line-height: 1; letter-spacing: .02em; text-transform: uppercase; }
.is-bad .lc-count { color: var(--wrong-dark); }
.is-good .lc-count { color: var(--right-dark); display: flex; align-items: center; gap: 10px; }
.is-good .lc-count::before {
  content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--right) no-repeat center / 16px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.6l3.1 3.1L13 4.6' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.lc-flags { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.lc-flags li { position: relative; padding-left: 34px; font-size: 17px; line-height: 1.4; font-weight: 600; overflow-wrap: anywhere; }
.lc-flags li::before {
  content: "!"; position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%;
  background: var(--wrong); color: var(--white); font: 800 15px/24px var(--body); text-align: center;
}
.lc-good { font-size: 17px; line-height: 1.4; font-weight: 700; }
.lc-do { font-size: 17px; line-height: 1.45; font-weight: 600; color: #3A3F47; }
.is-bad .lc-do { margin-top: 2px; color: var(--ink); }
.lc-note { font-size: 14px; line-height: 1.4; color: var(--muted); margin-top: 4px; }
.lc-again { align-self: flex-start; min-height: 54px; font-size: 17px; background: var(--white); }

/* not a website: an email, a phone number, wifi details, text */
.lc-kind { font-family: var(--display); font-weight: 400; font-size: 30px; line-height: 1.05; letter-spacing: .02em; text-transform: uppercase; }
.lc-value { font: 800 clamp(22px, 6.4vw, 30px)/1.25 var(--addr); color: var(--ink); overflow-wrap: anywhere; }
.lc-value.is-text { font: 500 18px/1.5 var(--body); white-space: pre-wrap; }
.lc-line { font-size: 16px; line-height: 1.45; color: #3A3F47; overflow-wrap: anywhere; }
.lc-tip { font-size: 17px; line-height: 1.45; font-weight: 600; margin-top: 4px; }
.lc-thing .lc-verdict { margin-top: 6px; }

/* ---------- further down, and quieter: tips, where to go next, questions ---------- */
/* the first screen is the headline and the tool, nothing else: what comes next starts below the fold */
.tool-first { display: flow-root; min-height: calc(100vh - 96px); min-height: calc(100svh - 96px); }
.tool-more { width: 100%; max-width: 720px; margin: 0 auto 48px; padding: 0 20px; }
.tool-first + .tool-more { margin-top: 40px; }
.tool-h2 {
  margin-bottom: 18px; font-family: var(--display); font-weight: 400; font-size: clamp(28px, 7vw, 38px);
  line-height: 1.05; letter-spacing: .02em; text-transform: uppercase; text-wrap: balance;
}
.tool-tips { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; counter-reset: tip; }
.tool-tips li { counter-increment: tip; position: relative; padding-left: 46px; font-size: 17px; line-height: 1.5; color: #3A3F47; text-wrap: pretty; }
.tool-tips li::before {
  content: counter(tip); position: absolute; left: 0; top: -1px; width: 30px; height: 30px; border-radius: 50%;
  background: var(--paper); color: var(--ink); font: 800 15px/30px var(--body); text-align: center;
}
.tool-tips b { display: block; color: var(--ink); font-weight: 800; }
/* an example address in the words: the phone's own font, the real part highlighted. Only text, never a link.
   It only breaks where a <wbr> says, so a dash never looks like the end of a line. */
.tool-addr { font-family: var(--addr); font-weight: 600; color: var(--ink); white-space: nowrap; }
.tool-addr mark { background: var(--mark); color: var(--ink); border-radius: 3px; padding: 0 2px; }
.tool-addr.can-wrap { white-space: normal; }
.tool-addr.can-wrap > * { white-space: nowrap; }

/* where to go next: another tool and the game, as two quiet rows */
.tool-next { display: flex; flex-direction: column; gap: 10px; }
.tool-next a {
  display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 10px 18px 10px 10px;
  border: 2px solid var(--line); border-radius: 22px; background: var(--white); color: var(--ink);
  text-decoration: none; font-size: 17px; font-weight: 600; line-height: 1.3;
  transition: border-color .15s ease, transform .15s ease;
}
.tool-next a > span:last-child { flex: 1 1 auto; min-width: 0; }
.tool-next a::after { content: "→"; flex: none; font-size: 22px; font-weight: 800; }
.tool-next b { font-weight: 800; }
.tool-next img, .tool-next .tool-cta-icon { flex: none; width: 48px; height: 48px; border-radius: 12px; }
.tool-next .is-mark { background: var(--mark); color: var(--ink); }
@media (hover: hover) { .tool-next a:hover { border-color: var(--ink); transform: translateY(-2px); } }

/* questions: one line each, tap to open */
.faq { border-bottom: 2px solid var(--line); }
.tool-h2 + .faq { border-top: 2px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  min-height: 60px; padding: 14px 0; font-size: 18px; font-weight: 800; line-height: 1.35;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 24px; text-align: center; font-size: 24px; font-weight: 600; line-height: 1; }
.faq[open] summary::after { content: "–"; }
.faq p { margin: -2px 0 0; padding: 0 0 18px; font-size: 17px; line-height: 1.5; color: #3A3F47; text-wrap: pretty; }
.faq a { color: var(--ink); font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* a link on to a game or the other tool */
.tool-cta { display: flex; justify-content: center; margin-top: 20px; }
.tool-cta a {
  display: inline-flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 24px 10px 10px;
  border-radius: 999px; border: 2px solid var(--ink); background: var(--white); color: var(--ink);
  text-decoration: none; font-size: 18px; font-weight: 600; line-height: 1.25;
  transition: background-color .15s ease, transform .15s ease;
}
@media (hover: hover) { .tool-cta a:hover { background: var(--paper); transform: translateY(-2px); } }
.tool-cta img, .tool-cta-icon { flex: none; width: 44px; height: 44px; border-radius: 12px; }
.tool-cta-icon { display: inline-flex; align-items: center; justify-content: center; background: var(--ink); color: var(--white); }
.tool-cta-icon svg { width: 24px; height: 24px; }
.tool-cta b { font-weight: 800; }

/* ---------- the QR code checker ---------- */
.qr-pickers { display: flex; flex-direction: column; gap: 10px; }
.qr-scan { position: relative; width: 100%; min-height: 70px; font-size: 20px; gap: 12px; }
.qr-scan svg { width: 28px; height: 28px; flex: none; }
.qr-pick { position: relative; width: 100%; min-height: 58px; font-size: 18px; background: var(--white); }
.qr-scan:focus-within, .qr-pick:focus-within { outline: 3px solid var(--blue); outline-offset: 3px; }
.qr-hint { font-size: 15px; line-height: 1.45; color: #3A3F47; text-align: center; text-wrap: balance; }
.qr-box.is-drop { outline: 3px dashed var(--ink); outline-offset: -10px; }
.qr-out:empty { display: none; }
.qr-out { display: flex; flex-direction: column; gap: 12px; }
.qr-status { display: flex; align-items: center; gap: 12px; font-size: 18px; font-weight: 700; padding: 6px 2px; }
.qr-status::before {
  content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--ink);
  animation: qr-spin .8s linear infinite;
}
@keyframes qr-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .qr-status::before { animation: none; } }
.qr-head { display: flex; align-items: center; gap: 14px; }
.qr-thumb { flex: none; width: 64px; height: 64px; border-radius: 14px; object-fit: cover; border: 2px solid var(--line); background: var(--white); }
.qr-head-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.qr-eyebrow { font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.qr-kind { font-family: var(--display); font-weight: 400; font-size: 34px; line-height: 1; letter-spacing: .02em; text-transform: uppercase; }
.qr-code { display: flex; flex-direction: column; gap: 10px; }
.qr-code + .qr-code { margin-top: 10px; }
.qr-two { font-size: 16px; line-height: 1.45; font-weight: 700; }
.qr-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.qr-actions .btn { min-height: 58px; font-size: 18px; width: 100%; }
.qr-copy { min-height: 56px; font-size: 17px; background: var(--white); }
.qr-miss { background: var(--white); border: 2px solid var(--line); border-radius: 20px; padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.qr-miss-head { font-size: 19px; font-weight: 800; line-height: 1.35; }
.qr-miss p { font-size: 17px; line-height: 1.45; }

.qr-tips { max-width: 720px; margin: 0 auto 52px; padding: 0 20px; display: flex; flex-direction: column; gap: 14px; }
.qr-tips h2 { font-family: var(--display); font-weight: 400; font-size: clamp(34px, 9vw, 52px); line-height: 1; letter-spacing: .02em; text-transform: uppercase; }
.qr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.qr-list li { display: flex; gap: 14px; align-items: flex-start; font-size: 18px; line-height: 1.45; }
.qr-list li::before { content: ""; flex: none; width: 12px; height: 12px; margin-top: 8px; border-radius: 50%; background: var(--ink); }

@media (min-width: 641px) { .tool-box { --room: calc(min(100vw - 32px, 720px) - 88px); } }
@media (min-width: 760px) {
  .tool-box { padding: 30px; --room: calc(min(100vw - 32px, 720px) - 104px); }
  .qr-actions { flex-direction: row; }
  .qr-actions .btn { width: auto; flex: 1 1 0; }
}
@media (max-width: 640px) {
  .tool-box { margin-bottom: 40px; padding: 18px 16px; border-radius: 22px; --room: calc(100vw - 100px); }
  .qr-tips, .tool-more { padding: 0 16px; }
  .lc-result { padding: 18px 16px; }
  .lc-again { align-self: stretch; }
  .tool-cta a { font-size: 17px; padding-right: 20px; }
}