/* ============================================================================
   lp-checker.css - styles for the LIGHTWEIGHT vanilla SEO-check widget that
   mounts into #lp-checker (src/lp/checker.js). Matches the LP house style:
   violet accents, warm bone, dark bg, Playfair Display + IBM Plex Mono. Only
   cheap opacity/transform transitions; NO blurred/animated backgrounds, NO
   continuous rAF, so scrolling stays smooth. The widget sizes to its content
   (auto height, normal document flow) and never overlaps surrounding text.
   No em dashes anywhere in this file.
   ============================================================================ */

/* Grow to content once JS has upgraded the field (drop the shell min-height). */
#lp-checker { min-height: 0; max-width: 520px; }

.lpc-card {
  background: rgba(13, 13, 17, .72);
  border: 1px solid rgba(123, 92, 255, .4);
  border-radius: 16px;
  padding: 20px 18px;
  text-align: left;
  /* soft violet glow around the whole input box, gently pulsing to echo the
     Labs sign; a one-off fade-in on mount runs first, then the glow loops. */
  box-shadow: 0 0 0 1px rgba(123, 92, 255, .12), 0 0 22px rgba(123, 92, 255, .16);
  animation: lpc-in .28s ease both, lpc-card-glow 4.6s ease-in-out .28s infinite;
}
@keyframes lpc-card-glow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(123, 92, 255, .12), 0 0 18px rgba(123, 92, 255, .13); }
  50%      { box-shadow: 0 0 0 1px rgba(123, 92, 255, .28), 0 0 32px rgba(123, 92, 255, .3); }
}
@media (prefers-reduced-motion: reduce) { .lpc-card { animation: none; } }
@keyframes lpc-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* --- shared type --- */
.lpc-h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.2;
  margin: 0 0 6px;
  color: var(--bone);
}
.lpc-lead {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--bone-dim);
  margin: 0 0 14px;
}
.lpc-note {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: .03em;
  margin: 12px 0 0;
}
.lpc-note-c { text-align: center; line-height: 1.6; }

/* --- expanded SEO content sections (prose + definition lists) --- */
.lp-prose p { color: var(--bone-dim); font-size: 16px; line-height: 1.6; margin: 0 0 12px; }
.lp-prose p:last-child { margin-bottom: 0; }
.lp-deflist { list-style: none; margin: 14px 0 0; padding: 0; }
.lp-deflist li { margin: 0 0 16px; }
.lp-deflist li:last-child { margin-bottom: 0; }
.lp-deflist b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 17px; color: var(--bone); margin-bottom: 3px; }
.lp-deflist span { display: block; color: var(--bone-dim); font-size: 15px; line-height: 1.55; }
.lpc-err {
  font-family: var(--font-mono);
  font-size: 12px;
  color: #ffb4b4;
  margin: 10px 0 0;
}

/* --- form field + button (mirrors .lp-field, kept self-contained) --- */
.lpc-form { margin: 0; }
.lpc-field { display: flex; gap: 8px; }
.lpc-input {
  flex: 1;
  min-width: 0;
  background: rgba(236, 231, 221, .05);
  border: 1px solid rgba(123, 92, 255, .45);
  border-radius: 12px;
  color: var(--bone);
  font-family: var(--font-mono);
  font-size: 16px; /* >=16px stops iOS auto-zoom on focus */
  padding: 15px 16px;
  /* steady soft violet glow on the field (the card provides the pulse) */
  box-shadow: 0 0 0 1px rgba(123, 92, 255, .15), 0 0 14px rgba(123, 92, 255, .14);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.lpc-input::placeholder { color: var(--muted); }
.lpc-input:focus {
  outline: none;
  border-color: var(--violet);
  box-shadow: 0 0 0 1px rgba(123, 92, 255, .55), 0 0 24px rgba(123, 92, 255, .34);
}
.lpc-btn {
  min-height: 48px;
  background: var(--violet-deep);
  color: #0b0710;
  border: 0;
  border-radius: 12px;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 0 20px;
  cursor: pointer;
  transition: transform .12s ease, background-color .18s ease;
}
.lpc-btn:hover { background: var(--violet); }
.lpc-btn:active { transform: translateY(1px); }
.lpc-btn-full { width: 100%; margin-top: 18px; }

.lpc-link {
  display: inline-block;
  margin-top: 14px;
  background: none;
  border: 0;
  padding: 0;
  color: var(--link);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .02em;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lpc-link:disabled { opacity: .5; cursor: default; }

/* --- loading --- */
.lpc-loading { display: flex; align-items: center; gap: 12px; padding: 10px 2px; }
.lpc-loading-txt { font-family: var(--font-mono); font-size: 13px; color: var(--bone-dim); margin: 0; }
.lpc-spin {
  width: 18px; height: 18px;
  border: 2px solid var(--hairline);
  border-top-color: var(--violet);
  border-radius: 50%;
  animation: lpc-spin .8s linear infinite;
  flex: none;
}
@keyframes lpc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .lpc-spin { animation-duration: 2s; } }

/* --- teaser screenshot (hidden until the real capture loads, so a failed or
   still-generating shot leaves no empty gap) --- */
.lpc-shot {
  display: none;
  margin: 0 0 16px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: rgba(236, 231, 221, .05);
  aspect-ratio: 16 / 10;
  animation: lpc-in .4s ease both;
}
.lpc-shot.ready { display: block; }
.lpc-shot-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }

/* --- teaser --- */
.lpc-host {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--violet);
  letter-spacing: .04em;
  margin: 0 0 8px;
  word-break: break-all;
}
.lpc-score { display: flex; align-items: baseline; gap: 4px; }
.lpc-score-num { font-family: var(--font-display); font-size: 52px; line-height: 1; color: var(--bone); }
.lpc-score-max { font-family: var(--font-mono); font-size: 15px; color: var(--muted); }
.lpc-score-lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--violet);
  margin: 6px 0 0;
}
.lpc-caption { font-family: var(--font-display); font-size: 14px; color: var(--bone-dim); margin: 10px 0 0; }

.lpc-block { margin-top: 18px; }
.lpc-block .lpc-h3 { font-size: 13px; font-family: var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--bone-dim); margin-bottom: 10px; }

/* --- bars --- */
.lpc-bars { display: grid; gap: 8px; }
.lpc-bar { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 10px; }
.lpc-bar-head { margin-top: 12px; }
.lpc-bar-label { font-family: var(--font-mono); font-size: 12px; color: var(--bone-dim); }
.lpc-bar-val { font-family: var(--font-mono); font-size: 12px; color: var(--bone); grid-column: 3; }
.lpc-bar-track {
  grid-column: 1 / span 2;
  height: 6px;
  background: rgba(236, 231, 221, .1);
  border-radius: 999px;
  overflow: hidden;
}
.lpc-bar-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--violet-deep), var(--violet));
  border-radius: 999px;
  transition: width .5s ease;
}
@media (prefers-reduced-motion: reduce) { .lpc-bar-fill { transition: none; } }

/* --- findings --- */
.lpc-findings { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lpc-find { display: flex; gap: 10px; align-items: flex-start; }
.lpc-find-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex: none; }
.lpc-find-gap .lpc-find-dot { background: #ffb27a; }
.lpc-find-ok .lpc-find-dot { background: #8fd6a8; }
.lpc-find-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lpc-find-label { font-family: var(--font-display); font-size: 15px; color: var(--bone); }
.lpc-find-detail { font-family: var(--font-mono); font-size: 12px; color: var(--muted); word-break: break-word; }

/* --- consent --- */
.lpc-consent { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; cursor: pointer; }
.lpc-check { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--violet); }
.lpc-consent-txt { font-family: var(--font-mono); font-size: 11.5px; line-height: 1.5; color: var(--bone-dim); }

/* --- code boxes --- */
.lpc-code-boxes { display: flex; gap: 8px; margin: 4px 0 2px; }
.lpc-code-box {
  width: 100%;
  max-width: 48px;
  aspect-ratio: 3 / 4;
  text-align: center;
  background: rgba(236, 231, 221, .05);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  color: var(--bone);
  font-family: var(--font-mono);
  font-size: 22px;
  transition: border-color .18s ease;
}
.lpc-code-box:focus { outline: none; border-color: var(--violet); }

/* --- done --- */
.lpc-done { text-align: center; padding: 8px 0; }
.lpc-done-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-bottom: 12px;
  border-radius: 50%;
  background: rgba(143, 214, 168, .16);
  color: #8fd6a8;
  font-size: 22px;
}
.lpc-done .lpc-lead, .lpc-done .lpc-note { text-align: center; }

@media (max-width: 480px) {
  .lpc-field { flex-direction: column; }
  .lpc-btn { width: 100%; }
}

/* ============================================================================
   Hero breathing room + centered Elevate^ / neon-Labs logo (real brand assets,
   static + a gentle violet glow pulse; the full JS flicker engine stays on the
   main site only). Scoped to the gratis-sjekk pages via this stylesheet.
   ============================================================================ */

/* more air around the input card: away from the heading above and the section
   below (mobile feedback). */
#lp-checker { margin-top: 34px; }
.hero { padding-bottom: 32px; }
/* drop the H1 (and everything below it, which follows in normal flow) lower */
.hero h1 { margin-top: 34px; }

.lp-logo { text-align: center; margin: 0 0 42px; line-height: 1; }
.lp-mark {
  --labs-o: .92;
  position: relative;
  display: inline-block;
  font-family: var(--font-display);
  font-size: 46px;
  color: var(--bone);
  line-height: 1;
  white-space: nowrap;
  /* the neon Labs (crop ~2.4em wide, AR 0.881) overhangs to the RIGHT of the
     word, so text-align:center (which only centers the word box) leaves the
     whole lockup looking right-heavy. Shift LEFT by ~half the overhang so the
     visible "Elevate Labs" reads centered. Fine-tuned per mobile screenshot. */
  transform: translateX(-1.05em);
}
.lp-mark sup {
  font-family: var(--font-mono);
  font-size: .3em;
  color: var(--violet);
  position: relative;
  top: -1.05em;
  left: .04em;
}
.lp-mark-labs {
  position: absolute;
  left: calc(100% - 0.1em);
  top: -0.6em;
  opacity: calc(0.09 + var(--labs-o) * 0.91);
  animation: lp-labs-glow 4.4s ease-in-out infinite;
}
.lp-mark-labs img { display: block; height: 2.72em; width: auto; pointer-events: none; user-select: none; }
.lp-mark-labs img + img { position: absolute; top: 0; left: 0; height: 100%; }
@keyframes lp-labs-glow {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(164, 139, 255, .22)) drop-shadow(0 0 10px rgba(139, 108, 255, .12)); }
  50%      { filter: drop-shadow(0 0 5px rgba(164, 139, 255, .45)) drop-shadow(0 0 18px rgba(139, 108, 255, .3)); }
}
@media (prefers-reduced-motion: reduce) { .lp-mark-labs { animation: none; } }