/* The site's look ("Caution tape"): a warning sign that crypto people would repost. Black on white, yellow as the
   accent (tape stripe, logo, quiz banner, buttons), stickers with hard shadows.
   guide.css holds the layout and the base components; this file sets the look on top of it.
   Brief: .ui-not-ai/briefs/style-variants.md (Concept B, rounds 2 and 3). */
:root {
  --bg: #FFFFFF;
  --tape: #FFD43B;
  --ink: #111111;
  --muted: #4A4A4A;
  --rule: rgba(17, 17, 17, 0.18);
  --soft: #FFF6CC;
  --edge: #111111;
  --signal: #E5322D;
  --ok: #17A34A;
  --ok-bg: #D7F5DF;
  --bad-bg: #FFE0DE;
  --sans: "Archivo", "Helvetica Neue", Helvetica, sans-serif;
  --display: "Bricolage Grotesque", "Archivo", sans-serif;
  --hard: 4px 4px 0 var(--ink);
}
h1, h2, .mark, .lesson__q, .verdict__title, .go { font-family: var(--display); }
a:focus-visible, input:focus-visible, button:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
code { background: var(--tape); border-color: var(--ink); color: var(--ink); }

/* header: white, with a stripe of caution tape under it */
.top { background: #fff; border-bottom: 2px solid var(--ink); }
.top::after { content: ""; display: block; height: 10px; border-bottom: 2px solid var(--ink);
  background: repeating-linear-gradient(-45deg, var(--ink) 0 12px, var(--tape) 12px 24px); }
.mark { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; gap: 8px; }
.mark__icon { width: 34px; height: 34px; }
.mark__rekt { border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); padding: 0 8px 1px; margin-left: 4px; }
.top__nav a { color: var(--ink); font-weight: 600; }
.top__nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }

/* home */
.home-head { padding-top: 64px; }
.home-head h1 { font-size: 72px; line-height: 0.95; font-weight: 800; letter-spacing: -0.035em; }
.home-head p { color: var(--ink); font-size: 19px; margin-top: 16px; }
.search input { background: #fff; border: 2px solid var(--ink); border-radius: 14px; box-shadow: var(--hard); padding: 15px 18px; }
.search input:focus { background: #fff; border-color: var(--ink); }
.search input::placeholder { color: #7A7A7A; }

/* the mixed quiz banner: the one big yellow block of the page */
.quiz-banner { background: var(--tape); border: 2px solid var(--ink); border-radius: 22px; box-shadow: 6px 6px 0 var(--ink);
  grid-template-columns: minmax(0, 1fr) 280px; padding: 30px 36px; margin-bottom: 48px; overflow: visible; }
.quiz-banner h2 { font-size: 44px; line-height: 1; font-weight: 800; letter-spacing: -0.03em; }
.quiz-banner p { color: var(--ink); font-size: 18px; margin: 12px 0 22px; }
.quiz-banner__go { font-family: var(--display); font-size: 19px; font-weight: 800; background: var(--ink); color: #fff;
  border: 2px solid var(--ink); border-radius: 14px; padding: 13px 26px; box-shadow: 4px 4px 0 #fff, 4px 4px 0 2px var(--ink);
  transition: transform 100ms ease-out, box-shadow 100ms ease-out; }
.quiz-banner__go:hover { background: #fff; color: var(--ink); }
.quiz-banner__go:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 #fff, 2px 2px 0 2px var(--ink); }
.quiz-banner__img { max-height: 260px; margin: -48px 0 -44px; transform: rotate(4deg); }
.verdict__from { color: var(--ink); }
.lesson__missed a { color: var(--ink); }

.groups { gap: 28px; }
.group { background: #fff; border: 2px solid var(--ink); border-radius: 18px; box-shadow: 5px 5px 0 var(--ink); padding: 16px 18px 6px; align-self: start; }
.group h2 { border-top: 0; padding-top: 0; margin-bottom: 8px; font-size: 19px; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; }
.group__practice { font-family: var(--sans); font-size: 12px; font-weight: 700; color: var(--ink); text-decoration: none;
  background: var(--tape); border: 2px solid var(--ink); border-radius: 999px; padding: 3px 10px; transform: rotate(-3deg); }
.group__practice:hover { color: var(--ink); background: #fff; }
.links a { border-bottom: 1.5px dashed var(--rule); }
.links li:last-child a { border-bottom: 0; }
.links a:hover .links__name { text-decoration-thickness: 2px; }
.links__n { color: var(--ink); font-weight: 700; }
.done { color: var(--ok); }

.results a { border-bottom: 2px solid var(--ink); }

/* scam page */
.crumb, .crumb a { color: var(--ink); }
.scam-head { border-bottom: 3px solid var(--ink); }
.scam-head h1 { font-size: 52px; line-height: 1; font-weight: 800; letter-spacing: -0.03em; }
.scam-head__facts { color: var(--ink); }
.side a { border-left: 3px solid var(--rule); color: var(--muted); }
.side a[aria-current="true"] { border-left-color: var(--ink); color: var(--ink); }
.section h2 { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; }
.list--flags li::before { width: 11px; height: 11px; top: 15px; border: 2px solid var(--ink); }
.list--steps li::before { font-family: var(--display); font-weight: 800; }
.ex, .ex > li { border-color: var(--rule); }
.ex__photos a { border: 2px solid var(--ink); border-radius: 10px; }
.more { background: var(--tape); border: 2px solid var(--ink); border-radius: 12px; box-shadow: var(--hard); }
.more:hover { background: #fff; }
.practice-cta { background: var(--tape); border: 2px solid var(--ink); border-radius: 16px; box-shadow: var(--hard); }
.practice-cta span { color: var(--ink); }

/* practice index */
.path-group h2 { border-top: 3px solid var(--ink); font-size: 19px; font-weight: 800; }
.path__item:not(:last-child)::after { background: var(--ink); width: 2px; }
.path__item--done:not(:last-child)::after { background: var(--ok); }
.path__dot { border: 2px solid var(--ink); background: #fff; }
.path__item--done .path__dot { background: var(--ok); border-color: var(--ink); }
.path__item--next .path__dot { background: var(--tape); border-width: 3px; }
.path__meta { color: var(--muted); }

/* lesson */
.lesson__bar { height: 18px; background: #fff; border: 2px solid var(--ink); border-radius: 999px; }
.lesson__bar span { border-radius: 0; }
.lesson__q { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; }
.lesson__ctx { color: var(--ink); }
.lesson__back, .lesson__x { color: var(--ink); }
.lesson__back { border: 2px solid var(--ink); background: #fff; }
.msg { background: #fff; border: 2px solid var(--ink); border-radius: 18px; box-shadow: 5px 5px 0 var(--ink); }
.msg__head { background: var(--tape); border-bottom: 2px solid var(--ink); color: var(--ink); font-weight: 600; }
.msg__line--tap:hover { background: var(--soft); }
.msg__line[aria-pressed="true"] { border-color: var(--ink); background: var(--soft); }
.msg__btn { background: var(--tape); border: 2px solid var(--ink); }
.keys { gap: 14px; }
.key { background: #fff; border: 2px solid var(--ink); border-radius: 14px; box-shadow: var(--hard); transition: transform 100ms ease-out, box-shadow 100ms ease-out; }
.key:hover { border-color: var(--ink); background: var(--soft); }
.key:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); border-bottom-width: 2px; margin-bottom: 0; }
.key kbd { border: 1.5px solid var(--ink); color: var(--ink); }
.key[aria-pressed="true"] { border-color: var(--ink); background: var(--tape); }
.key.is-right { border-color: var(--ink); background: var(--ok-bg); }
.key.is-wrong { border-color: var(--ink); background: var(--bad-bg); }
@media (max-width: 760px) { .lesson__foot { background: var(--bg); border-top: 2px solid var(--ink); } }
.go { font-size: 19px; font-weight: 800; color: var(--ink); background: var(--tape); border: 2px solid var(--ink); border-radius: 14px; box-shadow: var(--hard);
  transition: transform 100ms ease-out, box-shadow 100ms ease-out; }
.go:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); border-bottom-width: 2px; margin-bottom: 0; }
.go:disabled { background: #EDE7CF; color: #8C8670; border-color: #8C8670; box-shadow: none; }
.go--ok { background: var(--ok); color: #fff; border-color: var(--ink); }
.go--bad { background: var(--signal); color: #fff; border-color: var(--ink); }
.verdict__title { font-size: 26px; font-weight: 800; }
@media (min-width: 761px) {
  .verdict .lesson__foot-in { border: 2px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); }
}
.lesson__end-mark { border: 3px solid var(--ink); box-shadow: var(--hard); }
.lesson__end h1 { font-size: 40px; font-weight: 800; }
.lesson__end p { color: var(--ink); }

/* footer: black, like the back of the sign */
.foot { background: var(--ink); border-top: 0; }
.foot p { color: #E9E3C9; }
.foot .foot__by { color: #9A9688; }
.foot__by a { color: #E9E3C9; }
.foot__by a:hover { color: var(--tape); }

@media (max-width: 760px) {
  .mark { font-size: 18px; }
  .mark__rekt { padding: 0 6px 1px; }
  .home-head h1 { font-size: 48px; }
  .quiz-banner { grid-template-columns: 1fr; padding: 22px 20px 24px; }
  .quiz-banner h2 { font-size: 32px; }
  .quiz-banner__img { margin: -40px auto 0; max-height: 170px; }
  .scam-head h1 { font-size: 34px; }
  .lesson__q { font-size: 23px; }
}