/* Simple free tools: the family safe word maker and the security checkup.
   One centred column, one clear thing to do on each screen, big buttons (52px and up). Mobile first.
   Anton only for headlines and big results. Green and red only ever mean a good or a bad result. */

.ts-page [hidden] { display: none !important; }

/* the headline: one line where it fits, balanced over two where it doesn't */
.ts-hero { padding-bottom: 26px; }
.ts-hero .lobby-sub { gap: 6px; }
.sw-hero h1 { font-size: clamp(38px, 7vw, 76px); }
.ck-hero h1 { font-size: clamp(34px, calc((100vw - 40px) / 9.3), 88px); }

/* one column for the tool and everything about it */
.ts-col { width: 100%; max-width: 680px; margin: 0 auto; padding: 0 20px; }

/* the big result always sits on ink, so it's the one thing you look at */
.ts-result { background: var(--ink); color: var(--white); border-radius: 26px; padding: 22px 20px 24px; text-align: center; }
.ts-label { margin: 0; font-family: var(--body); font-size: 13px; font-weight: 800; line-height: 1.3; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-dark); }
.ts-label:focus { outline: none; }

.ts-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.ts-actions .btn { min-height: 58px; padding: 0 16px; font-size: 18px; }
.btn-light { background: var(--white); color: var(--ink); }
.btn-light:hover { background: #ECEBE7; }
.ts-toast { min-height: 1.45em; margin-top: 10px; text-align: center; font-size: 16px; font-weight: 700; line-height: 1.45; text-wrap: balance; }
.ts-noscript { margin: 0 auto 30px; font-size: 18px; text-align: center; text-wrap: balance; }

.ts-h2 { font-family: var(--display); font-weight: 400; font-size: clamp(30px, 4vw, 42px); line-height: 1; letter-spacing: .02em; text-transform: uppercase; }
.ts-h2:focus { outline: none; }

/* ---------- Family safe word ---------- */
.sw { margin-bottom: 30px; }
.sw-card { padding: 22px 16px; overflow: hidden; }
.sw-word {
  --max: 80px;
  height: calc(var(--max) * 2.1);
  margin: 10px 0 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 400; font-size: var(--max); line-height: 1.05; letter-spacing: .02em; text-transform: uppercase;
}
.sw-line { display: block; white-space: nowrap; }
.sw-line span { display: inline-block; }
.sw-note { font-size: 15px; line-height: 1.4; color: var(--muted-dark); }
.sw-word.is-out { animation: sw-out .15s ease-in forwards; }
.sw-word.is-in { animation: sw-in .3s cubic-bezier(.2, .8, .3, 1.15); }
@keyframes sw-out { to { opacity: 0; transform: translateY(-12px); } }
@keyframes sw-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* how to use it: three short steps */
.ts-how { margin-bottom: 28px; }
.ts-steps { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; counter-reset: step; }
.ts-steps li { counter-increment: step; position: relative; padding: 18px 18px 18px 72px; border: 2px solid var(--line); border-radius: 20px; background: var(--white); }
.ts-steps li::before {
  content: counter(step); position: absolute; left: 18px; top: 16px; width: 40px; height: 40px; border-radius: 50%;
  background: var(--ink); color: var(--white); font: 800 19px/40px var(--body); text-align: center;
}
.ts-steps h3 { font-size: 19px; font-weight: 800; line-height: 1.3; }
.ts-steps p { margin-top: 4px; font-size: 17px; line-height: 1.45; color: #3A3F47; text-wrap: pretty; }

/* the game that goes with the tool */
.ts-next-wrap { margin-bottom: 44px; }
.ts-next {
  display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 10px 20px 10px 10px;
  border: 2px solid var(--ink); border-radius: 22px; color: var(--ink); text-decoration: none;
  font-size: 18px; font-weight: 600; line-height: 1.3; transition: background-color .15s ease, transform .15s ease;
}
.ts-next img { flex: none; width: 52px; height: 52px; border-radius: 13px; }
.ts-next span { flex: 1 1 auto; }
.ts-next b { font-weight: 800; }
.ts-next::after { content: "→"; flex: none; font-size: 22px; font-weight: 800; }
@media (hover: hover) { .ts-next:hover { background: var(--paper); transform: translateY(-2px); } }

/* ---------- Security checkup ---------- */
.ck { margin-bottom: 44px; }
.ck-quiz, .ck-done { scroll-margin-top: 12px; }
.ck-quiz { background: var(--paper); border-radius: 26px; padding: 20px 20px 22px; display: flex; flex-direction: column; gap: 12px; }

.ck-dots { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 6px; }
.ck-dots li { flex: none; width: 12px; height: 12px; border-radius: 6px; background: rgba(90, 96, 107, .25); transition: width .25s ease, background-color .25s ease; }
.ck-dots li.is-done { background: var(--ink); }
.ck-dots li.is-now { width: 28px; background: var(--ink); }

.ck-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 28px; }
.ck-count { font-size: 15px; font-weight: 700; color: var(--muted); }
.ck-back {
  min-height: 52px; min-width: 64px; margin: -12px -10px -12px 0; padding: 0 10px; border: 0; background: none; color: var(--ink);
  font: 700 16px/1 var(--body); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; cursor: pointer;
}
.ck-q { font-size: clamp(24px, 6.2vw, 32px); font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; }
.ck-q:focus { outline: none; }
.ck-help { margin-top: 8px; font-size: 17px; line-height: 1.45; color: #3A3F47; text-wrap: pretty; }
.ck-step.is-in { animation: ck-in .26s ease; }
.ck-step.is-back { animation: ck-back .26s ease; }
@keyframes ck-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes ck-back { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }

.ck-answers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 6px; }
.ck-a {
  min-height: 64px; padding: 0 12px; border: 2px solid var(--ink); border-radius: 18px; background: var(--white); color: var(--ink);
  font: 800 20px/1.1 var(--body); cursor: pointer; transition: transform .1s ease, background-color .15s ease, color .15s ease;
}
.ck-a.ck-unsure { grid-column: 1 / -1; min-height: 56px; font-size: 18px; font-weight: 700; }
.ck-a[aria-pressed="true"] { background: var(--ink); color: var(--white); }
@media (hover: hover) { .ck-a:hover { transform: translateY(-2px); } }
.ck-a:active { transform: scale(.98); }

/* the result: score on ink, then the to do list */
.ck-done { display: flex; flex-direction: column; gap: 30px; }
.ck-score { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px 20px 26px; }
.ck-num { margin-top: 2px; font-family: var(--display); font-weight: 400; font-size: clamp(110px, 36vw, 168px); line-height: .95; letter-spacing: .01em; }
.ck-of { font-size: .4em; color: var(--muted-dark); margin-left: .06em; }
.ck-num.is-pop { animation: ck-pop .35s ease; }
@keyframes ck-pop { 40% { transform: scale(1.08); } }
.ck-verdict { max-width: 24em; font-size: 20px; font-weight: 800; line-height: 1.3; text-wrap: balance; }
.ck-dots-end { justify-content: center; margin: 2px 0; }
.ck-dots-end li { width: 14px; height: 14px; border-radius: 7px; }
.ck-dots-end li.is-yes { background: var(--right); }
.ck-dots-end li.is-no { background: var(--wrong); }
.ck-share { margin-top: 6px; min-height: 58px; padding: 0 32px; font-size: 18px; }
.ck-score .ts-toast { margin: -2px 0 -4px; color: var(--white); }
.ck-score .ts-toast:empty { display: none; }

.ck-list-sub { margin-top: 10px; font-size: 17px; line-height: 1.45; color: var(--muted); text-wrap: pretty; }
.ck-todo { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; counter-reset: todo; }
.ck-todo li { counter-increment: todo; position: relative; padding: 18px 18px 18px 70px; border: 2px solid var(--line); border-radius: 20px; background: var(--white); }
.ck-todo li::before {
  content: counter(todo); position: absolute; left: 18px; top: 16px; width: 36px; height: 36px; border: 2px solid var(--ink); border-radius: 50%;
  font: 800 17px/32px var(--body); text-align: center;
}
.ck-todo h3 { font-size: 19px; font-weight: 800; line-height: 1.3; }
.ck-todo p { margin-top: 4px; font-size: 17px; line-height: 1.45; color: #3A3F47; text-wrap: pretty; }
.ck-go { margin-top: 12px; min-height: 52px; padding: 0 20px; font-size: 16px; }
.ck-again { margin-top: 20px; min-height: 58px; padding: 0 32px; font-size: 18px; }

@media (prefers-reduced-motion: reduce) {
  .sw-word.is-out, .sw-word.is-in, .ck-step.is-in, .ck-step.is-back, .ck-num.is-pop { animation: none; }
  .ck-dots li { transition: none; }
}
@media (min-width: 700px) {
  .sw-card { padding: 28px 28px 26px; }
  .sw-word { --max: 112px; }
  .ck-quiz { padding: 28px 30px 30px; }
  .ck-answers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ck-a.ck-unsure { grid-column: auto; min-height: 64px; }
}
@media (max-width: 640px) {
  .ts-col { padding: 0 16px; }
  .ck-again { width: 100%; }
}