/* ===============================================================
   Lighthouse Signal - compact 1-pager additions on top of
   page.css and lighthouse-scan.css.
   =============================================================== */

/* Top-of-results: prominent score + verdict on a single row */
.signal-headline {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s6);
  align-items: center;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s6) var(--s7);
  box-shadow: var(--sh-md);
  margin-bottom: var(--s5);
}
.signal-score {
  width: 168px; height: 168px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: white;
  flex-shrink: 0;
  background: var(--ink-faint);
  box-shadow: 0 14px 32px rgba(13,27,74,0.10);
  line-height: 1;
}
.signal-score .score-num {
  font-size: 76px;
  line-height: 1;
}
.signal-score .score-out-of {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.04em;
  opacity: 0.92;
  margin-top: 4px;
}
.signal-score.is-good { background: linear-gradient(135deg, #10B981 0%, #059669 100%); }
.signal-score.is-warn { background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%); }
.signal-score.is-bad  { background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%); }
.signal-headline-body .eyebrow {
  font-family: var(--font); font-size: 12px; font-weight: 700;
  color: var(--cyan); letter-spacing: 0.16em; text-transform: uppercase;
  margin: 0 0 var(--s2);
  display: inline-flex; align-items: center; gap: 10px;
}
.signal-headline-body .eyebrow::before {
  content: ""; width: 24px; height: 2px; background: var(--cyan);
}
.signal-headline-body h2 {
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 700; letter-spacing: -0.02em;
  margin: 0 0 var(--s3); line-height: 1.2;
}
.signal-headline-body .stats { font-size: 15px; color: var(--ink-soft); }
.signal-headline-body .stats strong { color: var(--ink); font-weight: 700; }
.signal-headline-body .stats .sep { color: var(--ink-faint); margin: 0 8px; }
.signal-headline-body .audited-url {
  font-family: var(--mono); font-size: 12px;
  color: var(--ink-mute); margin-top: var(--s3);
  word-break: break-all;
}
@media (max-width: 700px) {
  .signal-headline { grid-template-columns: 1fr; padding: var(--s5); }
  .signal-score { width: 128px; height: 128px; font-size: 52px; }
  .signal-score .out-of { bottom: 22px; font-size: 12px; }
}

/* Compact check cards - one per top-level area */
.signal-checks {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s3);
}
@media (min-width: 800px) {
  .signal-checks { grid-template-columns: 1fr 1fr; }
}
.check-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s5);
  padding-left: calc(var(--s5) + 6px);
  box-shadow: var(--sh-sm);
  overflow: hidden;
}
.check-card::before {
  content: ""; position: absolute;
  left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--ink-faint);
}
.check-card[data-state="pass"]::before { background: #10B981; }
.check-card[data-state="warn"]::before { background: #F59E0B; }
.check-card[data-state="fail"]::before { background: #EF4444; }
.check-card .check-eyebrow {
  font-family: var(--font); font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  margin: 0 0 var(--s2);
}
.check-card[data-state="pass"] .check-eyebrow { color: #10B981; }
.check-card[data-state="warn"] .check-eyebrow { color: #B45309; }
.check-card[data-state="fail"] .check-eyebrow { color: #EF4444; }
.check-card h3 {
  font-size: 17px; font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 var(--s2);
  color: var(--ink); line-height: 1.3;
}
.check-card .check-body {
  font-size: 14px; color: var(--ink-soft); line-height: 1.55;
  margin: 0;
}
/* Single summary stat at the bottom of a card (e.g. "4 of 4 pass") */
.check-card .check-stat {
  margin-top: var(--s3);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--paper);
  border: 1px solid var(--border);
}
.check-card[data-state="pass"] .check-stat { background: rgba(16,185,129,0.10); border-color: rgba(16,185,129,0.25); color: #047857; }
.check-card[data-state="warn"] .check-stat { background: rgba(245,158,11,0.10); border-color: rgba(245,158,11,0.30); color: #B45309; }
.check-card[data-state="fail"] .check-stat { background: rgba(239,68,68,0.07);  border-color: rgba(239,68,68,0.30);  color: #B91C1C; }
.check-card .check-stat::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--ink-faint);
}
.check-card[data-state="pass"] .check-stat::before { background: #10B981; }
.check-card[data-state="warn"] .check-stat::before { background: #F59E0B; }
.check-card[data-state="fail"] .check-stat::before { background: #EF4444; }

/* Any card marked .full spans both columns */
.check-card.full {
  grid-column: 1 / -1;
}
.dl-card .dl-meaning {
  font-size: 14px; color: var(--ink-soft); line-height: 1.6;
  margin: var(--s2) 0 var(--s3); max-width: 70ch;
}
.dl-card .dl-events {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: var(--s2);
}
.dl-card .dl-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--r-pill);
  font-family: var(--mono); font-size: 12px;
  background: var(--paper); border: 1px solid var(--border);
  color: var(--ink);
}
.dl-card .dl-pill.tracked    { background: rgba(32,155,212,0.12); border-color: rgba(32,155,212,0.30); color: #0b6090; }
.dl-card .dl-pill.unofficial { background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.30); color: #B45309; }
.dl-card .dl-pill.missing    { background: rgba(239,68,68,0.08);  border-color: rgba(239,68,68,0.30);  color: #B91C1C; }
.dl-card .dl-pill .badge {
  font-family: var(--font); font-size: 9px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
}

/* Verdict band */
.signal-verdict {
  margin: var(--s5) 0;
}

/* CTA */
.signal-cta {
  margin-top: var(--s5);
  background: var(--gradient);
  border-radius: var(--r-lg);
  padding: var(--s6) var(--s7);
  color: white;
  text-align: center;
  box-shadow: var(--sh-blue);
}
.signal-cta h3 {
  font-size: clamp(22px, 2.4vw, 26px);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 var(--s2);
  color: white;
}
.signal-cta p {
  font-size: 15px;
  opacity: 0.95;
  margin: 0 0 var(--s4);
  line-height: 1.55;
}
.signal-cta .btn-cta {
  display: inline-block;
  background: white;
  color: var(--blue) !important;
  padding: 12px 26px;
  border-radius: var(--r-pill);
  font-weight: 700; font-size: 14px;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(6,42,107,.28);
}
.signal-cta .btn-cta:hover { transform: translateY(-1px); text-decoration: none; }

/* Scan progress card (cleaner copy, no 'we auto-clicked' language) */
.scan-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: var(--s5);
  box-shadow: var(--sh-sm); display: none;
}
.scan-card.is-visible { display: block; }
.scan-card .status-row {
  display: flex; align-items: center; gap: var(--s3);
  margin-bottom: var(--s3);
}

/* Classic horizontal progress bar - fills as the scan moves through steps. */
.scan-progress {
  position: relative;
  width: 100%;
  height: 8px;
  background: rgba(13,27,74,0.08);
  border-radius: 999px;
  overflow: hidden;
  margin: var(--s2) 0 var(--s4);
}
.scan-progress-fill {
  position: absolute; top: 0; left: 0; bottom: 0;
  width: 0%;
  background: var(--gradient);
  border-radius: 999px;
  transition: width 600ms cubic-bezier(0.4, 0.0, 0.2, 1);
}
/* Subtle indeterminate shimmer while the bar is still <100% - gives the
   visitor a sense of activity even between step advances. */
.scan-progress-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.45) 50%,
    rgba(255,255,255,0) 100%);
  background-size: 220% 100%;
  animation: scan-shimmer 1.4s linear infinite;
}
.scan-card.is-complete .scan-progress-fill::after { animation: none; }
@keyframes scan-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.scan-card .status-text { font-weight: 700; color: var(--ink); font-size: 15px; }
.scan-percent {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 14px;
  color: var(--ink-mute);
}

@media (prefers-reduced-motion: reduce) {
  .scan-progress-fill::after { animation: none !important; }
  .scan-progress-fill { transition: none !important; }
}
.scan-steps {
  display: flex; flex-direction: column; gap: var(--s2);
  margin: 0; padding: 0; list-style: none;
  font-size: 14px; color: var(--ink-soft);
}
.scan-steps li {
  display: flex; align-items: center; gap: var(--s3);
  opacity: 0.45; transition: opacity 200ms ease;
}
.scan-steps li.is-active { opacity: 1; color: var(--ink); font-weight: 600; }
.scan-steps li.is-done { opacity: 1; color: var(--ink-soft); }
.scan-steps li .step-bullet {
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(13,27,74,0.08);
  display: grid; place-items: center;
  color: transparent; flex-shrink: 0;
  font-size: 11px; font-weight: 700;
}
.scan-steps li.is-active .step-bullet { background: var(--cyan); color: white; box-shadow: 0 0 0 4px rgba(32,155,212,0.18); }
.scan-steps li.is-done .step-bullet { background: var(--cyan); color: white; }
.scan-steps li.is-done .step-bullet::before { content: "✓"; }

/* Error message */
.audit-error {
  margin-top: var(--s4);
  padding: var(--s3) var(--s4);
  background: rgba(239,68,68,0.06);
  border: 1px solid rgba(239,68,68,0.3);
  border-radius: var(--r-sm);
  color: #B91C1C;
  font-size: 14px;
}

/* Indicator-not-definitive disclaimer, sat just above the check cards. */
.signal-disclaimer {
  background: var(--tint-blue);
  border-left: 3px solid var(--cyan);
  border-radius: var(--r-sm);
  padding: var(--s4) var(--s5);
  margin: 0 0 var(--s5);
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.55;
}
.signal-disclaimer strong { color: var(--ink); display: block; margin-bottom: 4px; }

/* Alerts panel - only renders when the scan detects something we're very
   confident is wrong AND useful as a sales conversation hook. Framing is
   "this doesn't look right - worth a closer look", not "you're broken".
   Each alert carries its own Book-a-call CTA so visitors can drop straight
   from the worry into a contact moment. */
.signal-alerts {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  margin: 0 0 var(--s5);
}
.signal-alert {
  position: relative;
  background: var(--white);
  border: 2px solid;
  border-radius: var(--r-md);
  padding: var(--s5) var(--s6);
  box-shadow: var(--sh-md);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--s4);
  align-items: center;
}
.signal-alert[data-severity="urgent"]    { border-color: #DC2626; }
.signal-alert[data-severity="attention"] { border-color: #F59E0B; }
.signal-alert .alert-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 22px;
  color: white;
  line-height: 1;
}
.signal-alert[data-severity="urgent"]    .alert-icon { background: #DC2626; }
.signal-alert[data-severity="attention"] .alert-icon { background: #F59E0B; }
.signal-alert h4 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.signal-alert p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.signal-alert .alert-cta {
  font-size: 13px;
  font-weight: 700;
  background: var(--gradient);
  color: white;
  padding: 10px 18px;
  border-radius: var(--r-pill);
  text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--sh-blue);
}
.signal-alert .alert-cta:hover { transform: translateY(-1px); text-decoration: none; }
@media (max-width: 700px) {
  .signal-alert { grid-template-columns: auto 1fr; }
  .signal-alert .alert-cta { grid-column: 1 / -1; text-align: center; }
}

/* "What we checked" methodology panel - shown on every result, ALWAYS the
   same four phases. Communicates a standardised model to the visitor. */
.signal-methodology {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s5) var(--s6);
  margin: 0 0 var(--s5);
}
.signal-methodology h3 {
  margin: 0 0 var(--s3);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}
.signal-methodology h3 .muted {
  font-weight: 500; color: var(--ink-mute); font-size: 13px; margin-left: 8px;
}
.method-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s3);
}
.method-step {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  padding: var(--s3) 0;
}
.method-step .num {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--gradient);
  color: white;
  font-weight: 700;
  font-size: 13px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.method-step .label {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.method-step .label strong { color: var(--ink); display: block; }

/* Plain-English explainer at the top of each card (above the body). */
.check-plain {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0 0 var(--s3);
  font-style: italic;
}

/* Expandable technical detail. Uses the native <details>/<summary> so
   keyboard / screen-reader works for free; we just restyle. */
.check-detail {
  margin-top: var(--s4);
  border-top: 1px solid var(--border);
  padding-top: var(--s3);
}
.check-detail > summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--blue);
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  user-select: none;
}
.check-detail > summary::-webkit-details-marker { display: none; }
.check-detail > summary::before {
  content: "▸";
  display: inline-block;
  font-size: 11px;
  transition: transform 200ms ease;
}
.check-detail[open] > summary::before { transform: rotate(90deg); }
.check-detail > summary:hover { text-decoration: underline; }
.check-detail-body {
  margin-top: var(--s3);
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink-soft);
  display: grid;
  gap: 6px;
}
/* Educational "why this matters" block. Uses sans-serif (no mono) because
   it's narrative copy, not technical evidence. */
.check-detail-body.why-body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.6;
  gap: var(--s3);
  color: var(--ink-soft);
}
.check-detail-body.why-body .why-h {
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  font-size: 15px;
}
.check-detail-body.why-body p { margin: 0; }
.check-detail-body.why-body strong { color: var(--ink); }
.check-detail-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: var(--s3);
  padding: 6px 0;
  border-bottom: 1px dashed rgba(13,27,74,0.06);
}
.check-detail-row:last-child { border-bottom: none; }
.check-detail-label {
  color: var(--ink-mute);
  font-weight: 700;
}
.check-detail-value {
  color: var(--ink);
  word-break: break-word;
}
@media (max-width: 700px) {
  .check-detail-row { grid-template-columns: 1fr; gap: 2px; }
}