/* Report page layout */
.report {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-6);
}

/* Report header */
.report__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-8) 0 var(--space-6);
  flex-wrap: wrap;
  gap: var(--space-4);
}

.report__url {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
}

.report__date {
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.report__actions {
  display: flex;
  gap: var(--space-3);
}

.btn--ghost {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
.btn--ghost:hover {
  color: var(--text);
  border-color: var(--text-secondary);
}

.report__vibe {
  color: var(--accent);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  margin-top: var(--space-2);
}

/* Overall score section */
.report__overall {
  text-align: center;
  margin-bottom: var(--space-6);
}

.report__summary {
  color: var(--text-secondary);
  font-size: var(--text-lg);
  max-width: 480px;
  margin: var(--space-4) auto 0;
  line-height: 1.5;
}

/* Section nudge — friendly context line */
.section-nudge {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.6;
  margin-bottom: var(--space-5);
}

.report__sub-scores {
  margin-bottom: var(--space-8);
}

.report__section {
  margin-bottom: var(--space-5);
}

.report__cta {
  margin-top: var(--space-6);
}

/* Score ring */
.score-ring {
  width: 160px;
  height: 160px;
  margin: var(--space-6) auto;
  position: relative;
}

.score-ring__label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.score-ring__number {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  line-height: 1;
}

.score-ring__grade {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  margin-top: var(--space-1);
}

/* Sub-scores */
.sub-scores {
  display: flex;
  justify-content: center;
  gap: var(--space-8);
}

.sub-score {
  text-align: center;
}

.sub-score__value--good { color: var(--green); }
.sub-score__value--warning { color: var(--warning); }
.sub-score__value--danger { color: var(--danger); }

.sub-score__value {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  display: block;
}

.sub-score__label {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-top: var(--space-1);
  display: block;
}

/* Report sections (used by components) */
.report-section {
  padding: 0;
}

.report-section__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-5);
}

.report-section__title {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
}

/* Trust list */
.trust-list { display: flex; flex-direction: column; gap: var(--space-3); }
.trust-item { display: flex; align-items: center; gap: var(--space-3); }
.trust-item__icon { flex-shrink: 0; width: 20px; }
.trust-item__name { font-weight: var(--font-medium); }
.trust-item__detail { font-size: var(--text-sm); color: var(--text-secondary); margin-left: auto; }

/* Product stats */
.product-stats { display: flex; gap: var(--space-6); margin-bottom: var(--space-5); }
.product-stat { text-align: center; }
.product-stat__value { font-size: var(--text-2xl); font-weight: var(--font-bold); display: block; }
.product-stat__label { font-size: var(--text-sm); color: var(--text-secondary); }
.product-weak-list { margin-top: var(--space-4); }
.product-weak-list h4 { font-size: var(--text-base); margin-bottom: var(--space-3); }
.product-weak { margin-bottom: var(--space-3); padding: var(--space-3); padding-left: var(--space-4); border-left: 2px solid var(--warning); background: transparent; }
.product-weak__title { font-size: var(--text-sm); }
.product-weak__issues { margin-top: var(--space-1); padding-left: var(--space-5); font-size: var(--text-sm); color: var(--text-secondary); }

/* Speed scores */
.speed-scores { display: flex; gap: var(--space-6); margin-bottom: var(--space-5); }
.speed-score { text-align: center; flex: 1; }
.speed-score__value { font-size: var(--text-2xl); font-weight: var(--font-bold); display: block; }
.speed-score--good .speed-score__value { color: var(--green); }
.speed-score--warning .speed-score__value { color: var(--warning); }
.speed-score--danger .speed-score__value { color: var(--danger); }
.speed-score__label { font-size: var(--text-sm); color: var(--text-secondary); }
.web-vitals { display: flex; gap: var(--space-4); }
.web-vital { flex: 1; padding: var(--space-3); text-align: center; }
.web-vital__label { font-size: var(--text-xs); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; display: block; }
.web-vital__value { font-size: var(--text-base); font-weight: var(--font-semibold); display: block; margin-top: var(--space-1); }

/* Readable body width for content sections */
.report__body {
  max-width: 720px;
  margin: 0 auto;
}

/* Section divider — thin line between sections */
.section-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: var(--space-8) 0;
}

/* Section heading with inline score */
.section-heading {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-2);
}

.section-heading__score {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  margin-left: var(--space-3);
}

.section-heading__score--good { color: var(--green); }
.section-heading__score--warning { color: var(--warning); }
.section-heading__score--danger { color: var(--danger); }

/* Prose section (first impression) */
.prose-section {
  max-width: 680px;
  margin: 0 auto;
}

.prose__lede {
  font-size: var(--text-base);
  line-height: 1.8;
  color: var(--text-secondary);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--border);
}

.prose__group {
  margin-bottom: var(--space-6);
}
.prose__group:last-child {
  margin-bottom: 0;
}

.prose__heading {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: var(--space-4);
}
.prose__heading--good { color: var(--green); }
.prose__heading--urgent { color: var(--danger); }

.prose__paragraph {
  font-size: var(--text-sm);
  line-height: 1.85;
  color: var(--text);
  margin-bottom: var(--space-4);
  padding-left: var(--space-4);
  border-left: 2px solid var(--border);
}
.prose__paragraph:last-child {
  margin-bottom: 0;
}

.prose__heading--good + .prose__paragraph,
.prose__heading--good ~ .prose__paragraph {
  border-left-color: rgba(74, 222, 128, 0.3);
}
.prose__heading--urgent + .prose__paragraph,
.prose__heading--urgent ~ .prose__paragraph {
  border-left-color: rgba(239, 68, 68, 0.3);
}

.prose__sources {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
}
.prose__sources-label {
  font-size: 11px;
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-right: var(--space-1);
}
.prose__source-link {
  font-size: 12px;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  transition: color 0.15s, background 0.15s;
}
.prose__source-link:hover {
  color: var(--accent);
  background: rgba(255, 255, 255, 0.06);
}

/* Before/After */
.before-after + .before-after { margin-top: var(--space-6); }
.before-after__header { font-size: var(--text-lg); font-weight: var(--font-semibold); margin-bottom: var(--space-4); }
.before-after__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.before-after__panel { padding: var(--space-4); border-radius: var(--radius-md); background-color: var(--surface-2); }
.before-after__panel--before { border-left: 3px solid var(--danger); }
.before-after__panel--after { border-left: 3px solid var(--green); }
.before-after__tag { font-size: var(--text-xs); font-weight: var(--font-semibold); text-transform: uppercase; letter-spacing: 0.05em; display: block; margin-bottom: var(--space-2); }
.before-after__tag--before { color: var(--danger); }
.before-after__tag--after { color: var(--green); }
.before-after__title { font-size: var(--text-base); margin-bottom: var(--space-2); }
.before-after__desc { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.6; }

/* CTA section */
.cta-section { text-align: center; padding: var(--space-8); }
.cta-section__heading { font-size: var(--text-2xl); font-weight: var(--font-bold); margin-bottom: var(--space-3); }
.cta-section__text { color: var(--text-secondary); margin-bottom: var(--space-5); max-width: 480px; margin-left: auto; margin-right: auto; }
.cta-section__form { display: flex; gap: var(--space-3); max-width: 400px; margin: 0 auto var(--space-5); }
.cta-section__input { flex: 1; padding: var(--space-3) var(--space-4); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text); font-family: inherit; outline: none; }
.cta-section__input:focus { border-color: var(--accent); }
.cta-section__credit { font-size: var(--text-sm); color: var(--text-muted); margin-top: var(--space-4); }
.cta-section__credit a { color: var(--text-secondary); }
.cta-section__error { color: var(--danger); font-size: var(--text-xs); margin-top: var(--space-2); display: none; }
.cta-section__error--visible { display: block; }
.cta-section__success { color: var(--success, #4ade80); font-size: var(--text-sm); font-weight: var(--font-medium); margin-bottom: var(--space-4); }

/* Feedback widget */
.report__feedback {
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
}

.feedback-widget {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-5);
}

.feedback-widget__label {
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.feedback-widget__buttons {
  display: flex;
  gap: var(--space-3);
}

.feedback-widget__btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.feedback-widget__btn:hover {
  color: var(--text);
  border-color: var(--accent);
  background: rgba(249, 115, 22, 0.08);
}

.feedback-widget__thanks {
  color: var(--green);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
}

.feedback-widget--voted {
  justify-content: center;
}

/* Loading / error states */
.report-loading { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); color: var(--text-secondary); }
.report-error { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); text-align: center; }

/* Responsive */
@media (max-width: 768px) {
  .sub-scores { flex-wrap: wrap; justify-content: center; }
  .report__header { flex-direction: column; text-align: center; }
  .speed-scores { flex-direction: column; }
}

@media (max-width: 640px) {
  .before-after__grid { grid-template-columns: 1fr; }
  .product-stats { flex-direction: column; align-items: center; }
  .cta-section__form { flex-direction: column; }
}