/* GBP audit (/tools/gbp-audit): the three states, score gauge, ranked issues, category bars and the local-average table,
   which the tool kit in article.css can't express. */
#tool [hidden] { display: none !important; }
.ga-input[hidden] + .ga-loading, .ga-loading[hidden] + .ga-results { margin-top: 0; }
.ga-input > * + * { margin-top: var(--space-24); }
.ga-results > * + * { margin-top: var(--space-40); }
.ga-head { display: flex; align-items: center; gap: var(--space-16); padding-bottom: var(--space-24); border-bottom: 1px solid var(--line); }
.ga-icon { flex: none; width: 5rem; height: 5rem; padding: 1.2rem; border-radius: var(--space-12); color: var(--link); background: rgba(43, 77, 255, 0.12); border: 1px solid var(--line); }
.ga-title { font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: 1.4; }
.ga-range { width: 100%; accent-color: var(--cta-main); }
.ga-val { color: var(--link); }
.ga-foot { align-items: center; justify-content: space-between; padding-top: var(--space-24); border-top: 1px solid var(--line); }
.ga-priv { display: inline-flex; align-items: center; gap: var(--space-8); }

/* Loading */
.ga-loading { display: grid; justify-items: center; gap: var(--space-8); padding-block: var(--space-48); text-align: center; }
.ga-spin { width: 6.4rem; height: 6.4rem; margin-bottom: var(--space-16); border-radius: 50%; border: 4px solid var(--line); border-top-color: var(--cta-main); animation: ga-spin 0.9s linear infinite; }
@keyframes ga-spin { to { transform: rotate(360deg); } }

/* Score */
.ga-hero { display: grid; gap: var(--space-24); align-items: center; justify-items: center; text-align: center; }
@media (min-width: 712px) { .ga-hero { grid-template-columns: auto 1fr; justify-items: start; text-align: start; } }
.ga-gauge { position: relative; width: 18.8rem; height: 18.8rem; }
.ga-gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ga-gauge-mid { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ga-gauge-num { font-size: 5.6rem; font-weight: var(--fw-bold); line-height: 1; font-variant-numeric: tabular-nums; }
.ga-gauge-of { font-size: 1.4rem; color: var(--text-subtle); }
.ga-tier { display: inline-block; margin-bottom: var(--space-12); padding: 0.4rem var(--space-12); border-radius: var(--space-40); font-size: 1.3rem; font-weight: var(--fw-bold); letter-spacing: 0.04em; }
.ga-hero .ga-title { margin-bottom: var(--space-8); }
.ga-label { margin-bottom: var(--space-16); font-size: 1.4rem; font-weight: var(--fw-regular); letter-spacing: 0.04em; color: var(--text-subtle); }

/* Priority issues (no red token in article.css; same red as the old page) */
.ga-issues, .ga-cats { list-style: none; padding: 0; }
.ga-issues { display: grid; gap: var(--space-12); }
.ga-issue { display: flex; align-items: flex-start; gap: var(--space-16); padding: var(--space-20); border-radius: var(--space-16); background: var(--bg-main); border: 1px solid var(--line); }
.ga-rank { flex: none; width: 2.4rem; font-size: 2.2rem; font-weight: var(--fw-bold); line-height: 1.3; color: var(--cta-main); }
.ga-issue-body { flex: 1; min-width: 0; }
.ga-impact { flex: none; padding: 0.2rem var(--space-12); border-radius: var(--space-40); font-size: 1.3rem; font-weight: var(--fw-bold); white-space: nowrap; }
.ga-impact-high { color: #FB7185; background: rgba(251, 113, 133, 0.12); }
.ga-impact-med { color: var(--warn); background: rgba(255, 209, 102, 0.12); }
.ga-impact-low { color: var(--link); background: rgba(157, 176, 255, 0.12); }

/* Category bars */
.ga-cats { display: grid; gap: var(--space-16) var(--space-32); }
@media (min-width: 712px) { .ga-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ga-cat-top { display: flex; justify-content: space-between; gap: var(--space-12); margin-bottom: 0.6rem; font-size: var(--fs-small); }
.ga-cat-score { font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.ga-bar { height: 0.7rem; border-radius: 0.4rem; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.ga-bar i { display: block; width: 0; height: 100%; border-radius: inherit; transition: width 1s cubic-bezier(0.16, 1, 0.3, 1); }

/* You vs. the local average */
.ga-table-wrap { overflow-x: auto; border-radius: var(--space-16); border: 1px solid var(--line); }
.ga-table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.ga-table th, .ga-table td { padding: var(--space-12) var(--space-20); text-align: right; border-top: 1px solid var(--line); }
.ga-table thead th { border-top: 0; background: rgba(255, 255, 255, 0.03); font-weight: var(--fw-regular); color: var(--text-subtle); }
.ga-table tbody th { font-weight: var(--fw-regular); color: var(--text-muted); }
.ga-table td { font-variant-numeric: tabular-nums; }
.ga-table td:nth-child(2) { font-weight: var(--fw-bold); }
.ga-dot { display: inline-block; width: 0.8rem; height: 0.8rem; margin-inline-end: var(--space-8); border-radius: 50%; vertical-align: middle; }

/* CTA + restart */
.ga-cta { text-align: center; }
.ga-cta .tool-actions { justify-content: center; margin-top: var(--space-20); }
.ga-restart { justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  .ga-spin { animation-duration: 3s; }
  .ga-bar i { transition: none; }
}