/* ==========================================================================
   Reviorum — pages/checker.css
   checker.html (tool) and checker-result.html (result for one domain).
   ========================================================================== */

/* ---------- Hero + form ---------- */
.rv-checker-hero__art { position: absolute; right: 2%; top: 50%; transform: translateY(-50%); pointer-events: none; }
.rv-checker-hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--rv-s-4);
  padding-bottom: 3.5rem;
}
.rv-checker-hero__inner .rv-breadcrumbs { padding-bottom: 0; }
.rv-checker-hero__title {
  max-width: 720px;
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.035em;
  overflow-wrap: anywhere;
}
.rv-checker-hero__lead { max-width: 560px; color: var(--rv-night-text); font-size: var(--rv-fs-lg); line-height: 1.55; }
.rv-checker-form {
  display: flex;
  gap: var(--rv-s-2);
  max-width: 640px;
  padding: var(--rv-s-2);
  border-radius: 16px;
  background: var(--rv-surface);
  box-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.55);
}
.rv-checker-form__field { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 0 var(--rv-s-3); }
.rv-checker-form__icon { flex: none; color: var(--rv-muted); }
.rv-checker-form__input {
  flex: 1;
  min-width: 0;
  height: 48px;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--rv-ink);
  font-size: var(--rv-fs-base);
}
.rv-checker-hero__try { color: var(--rv-night-text); font-size: var(--rv-fs-sm); }
.rv-body .rv-checker-hero__try a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.rv-body .rv-checker-hero__try a:hover { color: var(--rv-mint); }

/* ---------- Tool page ---------- */
.rv-checker-main { display: flex; flex-direction: column; gap: var(--rv-s-10); padding-block: var(--rv-s-10) 3.5rem; }
.rv-checker-section { display: flex; flex-direction: column; gap: 14px; }
.rv-checker-section__head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: var(--rv-s-2); }

.rv-checker-what { display: flex; gap: 14px; padding: var(--rv-s-5); }
.rv-checker-what__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 12px;
  background: var(--rv-cat-tint);
  color: var(--rv-cat-strong);
}
.rv-checker-what--night .rv-checker-what__icon { background: var(--rv-night); color: var(--rv-sun); }
.rv-checker-what__title { margin-bottom: 2px; font-size: 0.9375rem; font-weight: 700; }

.rv-checker-important {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 28px;
  align-items: center;
  padding: var(--rv-s-6);
  border-color: #f6ddbb;
  background: var(--rv-warm);
}
.rv-checker-important__text { display: flex; flex-direction: column; gap: var(--rv-s-2); }
.rv-checker-important__eyebrow { color: #9a3412; font-size: var(--rv-fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.rv-checker-important__title { font-size: 1.25rem; font-weight: 800; line-height: 1.25; }
.rv-checker-important__text p:last-child { color: var(--rv-ink-2); font-size: 0.9375rem; line-height: 1.6; }
.rv-checker-example { display: flex; flex-direction: column; gap: var(--rv-s-3); margin: 0; padding: 18px; }
.rv-checker-example__label { color: var(--rv-muted); font-size: var(--rv-fs-xs); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.rv-checker-example__head { display: flex; align-items: center; gap: var(--rv-s-3); }
.rv-checker-example__head strong { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.rv-checker-example__facts { display: flex; flex-wrap: wrap; gap: var(--rv-s-2) var(--rv-s-4); margin: 0; padding: 0; list-style: none; font-size: var(--rv-fs-sm); color: var(--rv-ink-2); }
.rv-checker-example__facts li { display: inline-flex; align-items: center; }

.rv-checker-split { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--rv-s-8); align-items: start; }
.rv-checker-recent { display: flex; flex-direction: column; gap: var(--rv-s-3); padding: var(--rv-s-5); }
.rv-checker-recent__title { font-size: var(--rv-fs-base); font-weight: 700; }
.rv-checker-recent__list { margin: 0; padding: 0; list-style: none; }
.rv-checker-recent__item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--rv-line); }
.rv-checker-recent__link { flex: 1; min-width: 0; font-weight: 600; font-size: var(--rv-fs-md); overflow-wrap: anywhere; }

/* Neutral status markers — rating colours are reserved for ratings */
.rv-checker-dot { display: inline-block; width: 8px; height: 8px; flex: none; margin-right: 6px; border-radius: 50%; background: var(--rv-faint); }
.rv-checker-dot--fact { background: var(--rv-accent); }
.rv-checker-dot--note { background: var(--rv-sun); }

/* ---------- Result page ---------- */
.rv-checker-result { padding-block: var(--rv-s-8) 3.5rem; }
.rv-checker-result__main { display: flex; flex-direction: column; gap: var(--rv-s-6); min-width: 0; }
.rv-checker-result__aside { display: flex; flex-direction: column; gap: var(--rv-s-4); }
.rv-checker-result__notice { align-items: flex-start; }
.rv-checker-result__notice svg { flex: none; color: var(--rv-accent); }

.rv-checker-id { display: flex; align-items: center; gap: 18px; padding: 22px; }
.rv-checker-id__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rv-checker-id__name { font-size: 1.25rem; font-weight: 800; }
.rv-body .rv-checker-id__name a { color: var(--rv-ink); }
.rv-checker-id__rating { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }

.rv-checker-sig { display: flex; flex-direction: column; gap: var(--rv-s-2); padding: 18px; }
.rv-checker-sig__name { color: var(--rv-muted); font-size: var(--rv-fs-sm); font-weight: 600; }
.rv-checker-sig__value { display: flex; align-items: center; font-size: 1.25rem; font-weight: 800; }
.rv-checker-sig__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: auto; padding-top: var(--rv-s-2); border-top: 1px solid var(--rv-line); font-size: var(--rv-fs-xs); }
.rv-checker-sig__tag { padding: 2px 6px; border-radius: 5px; background: #f1f3f7; color: var(--rv-muted); font-weight: 600; }

.rv-checker-history { min-width: 460px; }
.rv-checker-history tbody th { font-weight: 500; }

.rv-checker-users { display: flex; flex-direction: column; gap: 14px; padding: var(--rv-s-5); }
.rv-checker-users__title { font-size: var(--rv-fs-base); font-weight: 700; }
.rv-checker-users__list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.rv-checker-users__item { display: flex; flex-direction: column; gap: 4px; padding: 12px 0; border-top: 1px solid var(--rv-line); }
.rv-checker-users__head { display: flex; align-items: center; gap: var(--rv-s-2); font-size: var(--rv-fs-md); font-weight: 600; }
.rv-body .rv-checker-users__head a { color: var(--rv-ink); }
.rv-body .rv-checker-users__head a:hover { color: var(--rv-accent); }
.rv-checker-claim { padding: var(--rv-s-4) var(--rv-s-5); color: var(--rv-ink-2); font-size: var(--rv-fs-md); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .rv-checker-hero__art { opacity: 0.3; }
  .rv-checker-important,
  .rv-checker-split { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .rv-checker-hero__art { display: none; }
  .rv-checker-hero__inner { padding-bottom: var(--rv-s-8); }
  .rv-checker-hero__lead { font-size: var(--rv-fs-base); }
  .rv-checker-form { flex-direction: column; }
  .rv-checker-form .rv-btn { width: 100%; }
  .rv-checker-main { gap: var(--rv-s-8); padding-top: var(--rv-s-8); }
  .rv-checker-important { padding: var(--rv-s-5); }
  .rv-checker-id { flex-wrap: wrap; gap: var(--rv-s-3); padding: 18px; }
  .rv-checker-id__body { flex-basis: calc(100% - 70px); }
  .rv-checker-id__rating { flex-direction: row; align-items: center; text-align: left; }
}

/* WordPress additions: input error under the hero form */
.rv-checker-hero__error { max-width: 640px; margin-top: var(--rv-s-3); }