/* =============================================
   home.css - front page only
   The shared layout (type, buttons, bands, exam panels, test list,
   subscription band, FAQ) lives in theme.css. This file holds the hero's
   sample score report.
   ============================================= */

.h-report {
  margin: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 26px 26px 22px;
  box-shadow: 0 1px 0 var(--line), 14px 14px 0 var(--mist);
}
.h-report-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.h-report-test { margin: 0; font-weight: 700; font-stretch: 108%; }
.h-report-note { margin: 2px 0 0; font-size: .85rem; color: var(--ink-soft); }
.h-report-score { margin: 0; text-align: right; line-height: 1; }
.h-report-score span { display: block; font-size: 3.4rem; font-weight: 850; font-stretch: 125%; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.h-report-score small { display: block; margin-top: 6px; font-size: .82rem; color: var(--ink-soft); }
.h-report-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.h-report-rows li { display: grid; grid-template-columns: minmax(0, 11.5em) 1fr 3em; align-items: center; gap: 12px; font-size: .95rem; }
.h-dom { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h-bar { height: 10px; background: var(--mist); border-radius: 5px; overflow: hidden; }
.h-bar i { display: block; height: 100%; background: var(--pass); border-radius: 5px; transform-origin: left; animation: h-grow .9s cubic-bezier(.2,.7,.2,1) both; }
.h-pct { text-align: right; font-variant-numeric: tabular-nums; font-weight: 650; }
.h-report-rows li.is-weak { background: var(--weak-bg); margin: 0 -10px; padding: 6px 10px; border-radius: 6px; }
.h-report-rows li.is-weak .h-bar { background: #fde6bf; }
.h-report-rows li.is-weak .h-bar i { background: var(--weak); }
.h-report-rows li.is-weak .h-pct, .h-report-rows li.is-weak .h-dom { color: var(--weak-text); font-weight: 700; }
.h-report-next { margin-top: 18px; font-size: .92rem; color: var(--ink-soft); }
@keyframes h-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .h-bar i { animation: none; } }

@media (max-width: 900px) {
  .h-report { box-shadow: 0 1px 0 var(--line), 8px 8px 0 var(--mist); }
}
@media (max-width: 520px) {
  .h-report { padding: 20px 18px 18px; }
  .h-report-score span { font-size: 2.8rem; }
  .h-report-test { font-size: .95rem; }
  .h-report-rows li { grid-template-columns: minmax(0, 9.5em) 1fr 2.6em; gap: 8px; font-size: .88rem; }
}