/* Crypto scam checker. One layout, built from CAR tokens and the site's band-and-rails
   structure: full-width hairlines between bands, rails down the container edges. */

/* ---------- structure ---------- */
.checker-band { border-top: 1px solid var(--border-default); }
.checker-band:first-child { border-top: 0; }
.checker-wrap { max-width: var(--container-max); margin: 0 auto; box-sizing: border-box; }
.checker-pad { padding: var(--space-7) var(--container-pad); }
.checker-rows { list-style: none; margin: 0; padding: 0; }
.checker-rows > li { border-top: 1px solid var(--border-default); padding: var(--space-5) var(--container-pad); }

/* ---------- type ---------- */
.checker h1, .checker h2, .checker h3 { color: var(--text-primary); }
.checker-kicker { font: var(--type-label); color: var(--text-secondary); }
.checker-mono, .checker code { font: var(--weight-regular) 14px/1.5 var(--font-mono); overflow-wrap: anywhere; }
.checker-fine { font: var(--type-body-sm); color: var(--text-muted); }
.checker-empty { font: var(--type-body); color: var(--text-secondary); }
.checker-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.checker [hidden] { display: none !important; }
.checker-link-button { border: 0; padding: 0; background: none; font: inherit; color: var(--text-link); cursor: pointer; }
.checker-link-button:hover { text-decoration: underline; text-underline-offset: 3px; }
.checker-link-button:focus-visible, .checker summary:focus-visible, .checker a:focus-visible { outline: none; box-shadow: var(--ring-focus); border-radius: var(--radius-sm); }
.checker .car-btn { white-space: normal; text-align: left; line-height: 1.3; }

/* ---------- form ---------- */
.checker-form { text-align: left; }
.checker-form__label { display: block; font: var(--type-label); color: var(--text-primary); margin-bottom: var(--space-2); }
.checker-form__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); align-items: start; }
.checker-form__row input { height: 56px; box-sizing: border-box; min-width: 0; font: var(--weight-regular) 16px/1.4 var(--font-mono); }
.checker-form__row input::placeholder { font: var(--type-body); color: var(--text-muted); }
.checker-form__row input[aria-invalid="true"] { border-color: var(--text-danger); }
.checker-form__row input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px var(--red-50); }
.checker-form__row .car-btn { height: 56px; white-space: nowrap; }
.checker-form__row .car-btn[disabled] { opacity: 1; background: var(--action-primary-press); box-shadow: none; transform: translateY(4px); }
.checker-form__error { grid-column: 1; margin: 0; }
.checker-form__help { margin-top: var(--space-3); font: var(--type-body-sm); color: var(--text-secondary); }
.checker-form__example { margin-top: var(--space-2); font: var(--type-body-sm); color: var(--text-muted); }
.checker-form__status { margin-top: var(--space-3); font: var(--type-body-sm); color: var(--text-primary); }
.checker-form--compact .checker-form__row input, .checker-form--compact .checker-form__row .car-btn { height: 48px; }
.checker-form--compact .checker-form__row .car-btn { padding: 0 var(--space-5); font-size: 15px; }

/* ---------- before a scan ---------- */
.checker-hero { padding: var(--space-9) var(--container-pad) var(--space-8); text-align: center; }
.checker-hero h1 { font: var(--type-hero); letter-spacing: var(--tracking-display); margin: var(--space-3) 0 var(--space-4); }
.checker-hero__lede { font: var(--type-body-lg); color: var(--text-secondary); max-width: 52ch; margin: 0 auto; }
.checker-hero .checker-form { max-width: 680px; margin: var(--space-7) auto 0; }

.checker-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.checker-columns > div { padding: var(--space-7) var(--container-pad); }
.checker-columns > div + div { border-left: 1px solid var(--border-default); }
.checker-columns h2 { font: var(--type-h4); letter-spacing: var(--tracking-display); margin-bottom: var(--space-3); }
.checker-columns p { font: var(--type-body); color: var(--text-secondary); }
.checker-columns__fine { border-top: 1px solid var(--border-default); padding-top: var(--space-5); padding-bottom: var(--space-5); }

.checker-next-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--space-7); align-items: start; }
.checker-next-intro h2 { font: var(--type-h3); letter-spacing: var(--tracking-display); }
.checker-next-intro p { font: var(--type-body-lg); color: var(--text-secondary); margin-bottom: var(--space-5); max-width: 56ch; }

/* ---------- results: search again ---------- */
.checker-again { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 640px); gap: var(--space-6); align-items: center; padding-top: var(--space-5); padding-bottom: var(--space-5); }
.checker-again__label { font: var(--type-label); color: var(--text-secondary); }

/* ---------- results: verdict ---------- */
#results { scroll-margin-top: 72px; }
.checker-verdict { padding-top: var(--space-8); padding-bottom: var(--space-7); }
.checker-verdict h1 { font: var(--weight-semibold) 40px/1.12 var(--font-display); letter-spacing: var(--tracking-display); margin: var(--space-3) 0 var(--space-3); max-width: 24ch; outline: none; }
.checker-verdict__query { margin-bottom: var(--space-5); }
.checker-verdict__query code { font-size: 15px; color: var(--text-secondary); }
.checker-verdict__description { font: var(--type-body-lg); color: var(--text-secondary); max-width: 62ch; }
.checker-verdict__advice { margin-top: var(--space-4); font: var(--weight-semibold) var(--text-md)/var(--leading-snug) var(--font-body); color: var(--text-danger); }
.checker-verdict__note { margin-top: var(--space-3); font: var(--type-body); color: var(--text-warning); }
.checker-verdict__errors { margin: var(--space-3) 0 0; padding-left: 1.2em; font: var(--type-body-sm); color: var(--text-secondary); }
.checker-verdict__errors li + li { margin-top: var(--space-1); }
.checker-verdict__meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-top: var(--space-6); font: var(--type-body-sm); color: var(--text-muted); }
.checker-verdict__meta .checker-link-button { font: var(--type-label); }

/* ---------- results: section heads ---------- */
.checker-section-head { padding-bottom: var(--space-5); }
.checker-section-head h2 { font: var(--type-h3); letter-spacing: var(--tracking-display); margin-bottom: var(--space-2); }
.checker-section-head p { font: var(--type-body); color: var(--text-secondary); max-width: 66ch; }

/* ---------- results: findings ---------- */
.checker-finding { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--space-3) var(--space-7); }
.checker-finding__who a { font-size: 15px; color: var(--text-primary); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 4px; }
.checker-finding__who a:hover { text-decoration-color: currentColor; }
.checker-finding__who p { margin-top: var(--space-2); font: var(--type-body-sm); color: var(--text-secondary); }
.checker-finding__status { font: var(--type-label); color: var(--text-secondary); }
.checker-finding--flagged .checker-finding__status { color: var(--text-danger); }
.checker-finding__flags { list-style: none; margin: var(--space-2) 0 0; padding: 0; }
.checker-finding__flags li { font: var(--weight-medium) var(--text-md)/var(--leading-snug) var(--font-body); color: var(--text-primary); }
.checker-finding__flags li + li { margin-top: var(--space-1); }
.checker-finding__source { margin-top: var(--space-2); font: var(--type-body-sm); color: var(--text-muted); }

/* ---------- results: transfer ledger ---------- */
.checker-entry { display: grid; grid-template-columns: 120px minmax(0, 1fr) minmax(140px, 30%) 84px; gap: var(--space-2) var(--space-5); align-items: baseline; }
.checker-entry p { margin: 0; }
.checker-entry__date { font: var(--type-body-sm); color: var(--text-primary); }
.checker-entry__date time span { display: block; color: var(--text-muted); }
.checker-entry__summary { font: var(--type-body); color: var(--text-primary); }
.checker-entry__summary .checker-mono { font-size: 14px; }
.checker-entry__flag { margin-left: var(--space-2); font: var(--type-label); color: var(--text-danger); white-space: nowrap; }
.checker-entry__detail { margin-top: var(--space-1) !important; font: var(--type-body-sm); color: var(--text-muted); }
.checker-entry__detail .checker-mono { font-size: 13px; }
.checker-entry__problem { color: var(--text-warning); }
.checker-entry__amount { font: var(--weight-medium) var(--text-base)/1.4 var(--font-body); font-variant-numeric: tabular-nums; color: var(--text-primary); text-align: right; overflow-wrap: anywhere; }
.checker-entry__amount--void { color: var(--text-muted); font-weight: var(--weight-regular); }
.checker-entry__link { text-align: right; font: var(--type-body-sm); }
.checker-ledger + .checker-fine { border-top: 1px solid var(--border-default); padding-top: var(--space-4); padding-bottom: var(--space-4); }

/* ---------- data sources ---------- */
.checker-attribution { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6); padding-top: var(--space-5); padding-bottom: var(--space-5); }
.checker-attribution__label { font: var(--type-body-sm); color: var(--text-muted); margin: 0; }
.checker-attribution__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6); }
.checker-attribution__list a { display: inline-flex; align-items: center; gap: var(--space-3); font: var(--type-body-sm); color: var(--text-secondary); text-decoration: none; }
.checker-attribution__list a:hover { color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; }
.checker-attribution__list img { height: 18px; width: auto; display: block; }
@media screen and (prefers-color-scheme: dark) { .checker-attribution__list img { filter: invert(1); } }

/* ---------- results: next steps ---------- */
.checker-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); border-top: 1px solid var(--border-default); counter-reset: step; }
.checker-steps li { counter-increment: step; padding: var(--space-6) var(--container-pad); }
.checker-steps li + li { border-left: 1px solid var(--border-default); }
.checker-steps li::before { content: counter(step); display: block; font: var(--weight-medium) var(--text-xl)/1 var(--font-display); color: var(--text-muted); margin-bottom: var(--space-4); }
.checker-steps h3 { font: var(--weight-semibold) var(--text-md)/var(--leading-snug) var(--font-display); margin-bottom: var(--space-2); }
.checker-steps p { font: var(--type-body-sm); color: var(--text-secondary); }
.checker-next-link { border-top: 1px solid var(--border-default); padding-top: var(--space-5); padding-bottom: var(--space-5); }

/* ---------- results: how the check works ---------- */
.checker-about-check { padding-top: 0; padding-bottom: 0; }
.checker-about-check > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) 0; cursor: pointer; list-style: none; }
.checker-about-check > summary::-webkit-details-marker { display: none; }
.checker-about-check > summary h2 { font: var(--type-h4); letter-spacing: var(--tracking-display); }
.checker-about-check > summary:hover h2 { color: var(--text-link); }
.checker-about-check > summary::after { content: '+'; font: var(--weight-medium) var(--text-lg)/1 var(--font-display); color: var(--gray-500); width: 24px; text-align: center; }
.checker-about-check[open] > summary::after { content: '−'; }
.checker-about-check__body { padding-bottom: var(--space-6); display: grid; gap: var(--space-3); max-width: 75ch; }
.checker-about-check__body p { font: var(--type-body-sm); color: var(--text-secondary); }

/* ---------- tablet ---------- */
@media (max-width: 900px) {
  .checker-columns { grid-template-columns: minmax(0, 1fr); }
  .checker-columns > div { padding-top: var(--space-6); padding-bottom: var(--space-6); }
  .checker-columns > div + div { border-left: 0; border-top: 1px solid var(--border-default); }
  .checker-next-intro, .checker-again { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .checker-finding { grid-template-columns: minmax(0, 1fr); }
  .checker-entry { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "what what" "amount amount" "date link"; }
  .checker-entry__what { grid-area: what; }
  .checker-entry__amount { grid-area: amount; text-align: left; }
  .checker-entry__date { grid-area: date; color: var(--text-muted); }
  .checker-entry__date time span { display: inline; margin-left: var(--space-2); }
  .checker-entry__link { grid-area: link; }
  .checker-steps { grid-template-columns: minmax(0, 1fr); }
  .checker-steps li + li { border-left: 0; border-top: 1px solid var(--border-default); }
  .checker-steps li { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: var(--space-3); padding-top: var(--space-5); padding-bottom: var(--space-5); }
  .checker-steps li::before { grid-row: span 2; margin: 0; font-size: var(--text-lg); }
}

/* ---------- phone ---------- */
@media (max-width: 600px) {
  .checker-pad { padding-top: var(--space-6); padding-bottom: var(--space-6); }
  .checker-hero { padding-top: var(--space-7); padding-bottom: var(--space-7); text-align: left; }
  .checker-hero__lede { font: var(--type-body); color: var(--text-secondary); margin: 0; }
  .checker-hero .checker-form { margin-top: var(--space-6); }
  .checker-form__row { grid-template-columns: minmax(0, 1fr); }
  .checker-form__row .car-btn { width: 100%; justify-content: center; order: 1; }
  .checker-form--compact .checker-form__row { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); }
  .checker-form--compact .checker-form__row .car-btn { width: auto; padding: 0 var(--space-4); order: 0; }
  .checker-verdict { padding-top: var(--space-6); }
  .checker-verdict h1 { font-size: 30px; }
  .checker-verdict__query code { font-size: 13px; }
  .checker-verdict__description { font: var(--type-body); color: var(--text-secondary); }
  .checker-section-head h2, .checker-next-intro h2 { font: var(--type-h4); letter-spacing: var(--tracking-display); }
  .checker-next-intro p { font: var(--type-body); color: var(--text-secondary); }
  .checker-finding__who a { font-size: 14px; }
}