/* /site-grader: the form page and the report (views/site/grader/*). Built on the tokens in css/site.css */

/* ---------- form page ---------- */
.gr-hero { background: radial-gradient(1200px 500px at 85% -10%, var(--accent-soft), transparent 60%), var(--ground); border-bottom: 1px solid var(--line); }
.gr-hero-in { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; padding-block: 72px 64px; }
.gr-hero h1 { font: 800 clamp(34px, 5vw, 56px)/1.05 var(--display); letter-spacing: -.02em; margin: 14px 0 18px; color: var(--ink); }
.gr-hero .lead { font-size: 18px; line-height: 1.6; color: var(--ink-muted); max-width: 560px; }
.gr-hero .lead b { color: var(--ink); font-weight: 600; }

.gr-form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); padding: 28px; display: grid; gap: 16px; }
.gr-field { display: grid; gap: 6px; }
.gr-field span { font: 600 14px/1.3 var(--body); color: var(--ink); }
.gr-field small { font-weight: 400; color: var(--ink-faint); }
.gr-field input { min-height: 52px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: var(--r-md); font: 400 16px var(--body); color: var(--ink); background: var(--surface); width: 100%; box-sizing: border-box; }
.gr-field input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.gr-form .btn { width: 100%; }
.gr-form .btn[disabled] { opacity: .7; cursor: progress; transform: none; }
.gr-small { margin: 0; font-size: 13px; color: var(--ink-faint); text-align: center; }
.gr-error { margin: 0; padding: 10px 14px; border-radius: var(--r-md); background: #FEF3F2; color: #B42318; font-size: 14px; }
.gr-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.gr-head { max-width: 720px; margin-bottom: 32px; }
.gr-head h2 { font: 700 clamp(26px, 3.4vw, 38px)/1.15 var(--display); letter-spacing: -.01em; margin: 10px 0 12px; }
.gr-head p { color: var(--ink-muted); font-size: 17px; line-height: 1.6; margin: 0; }
.gr-areas, .gr-steps, .gr-faq, .gr-cta { padding-block: 64px; }
.gr-area-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.gr-area { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; }
.gr-area svg { width: 30px; height: 30px; color: var(--accent); background: var(--accent-soft); padding: 8px; border-radius: 10px; }
.gr-area h3 { font: 700 19px/1.2 var(--display); margin: 14px 0 6px; }
.gr-area p { color: var(--ink-muted); font-size: 14px; margin: 0 0 12px; }
.gr-area ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; font-size: 14px; }
.gr-area li { padding-left: 20px; position: relative; }
.gr-area li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 8px; height: 5px; border: solid var(--success); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.gr-basics { margin-top: 18px; padding: 16px 20px; border-radius: var(--r-lg); background: var(--panel); font-size: 15px; color: var(--ink-muted); }
.gr-basics b { color: var(--ink); }

.gr-steps { background: var(--panel); }
.gr-steps ol { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.gr-steps li { counter-increment: s; display: grid; gap: 6px; }
.gr-steps li::before { content: counter(s); font: 700 15px/36px var(--display); width: 36px; height: 36px; text-align: center; border-radius: 50%; background: var(--accent); color: var(--on-accent); margin-bottom: 6px; }
.gr-steps b { font: 700 18px/1.3 var(--display); }
.gr-steps span { color: var(--ink-muted); font-size: 15px; }

.gr-faq-list { display: grid; gap: 10px; max-width: 860px; }
.gr-faq details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px 20px; }
.gr-faq summary { font-weight: 600; cursor: pointer; }
.gr-faq details p { color: var(--ink-muted); margin: 10px 0 0; line-height: 1.6; }

.gr-cta-box { display: flex; gap: 32px; align-items: center; justify-content: space-between; background: var(--hero); color: var(--on-hero); border-radius: var(--r-xl); padding: 40px; }
.gr-cta-box h2 { font: 700 28px/1.2 var(--display); margin: 0 0 8px; }
.gr-cta-box p { color: var(--on-hero-muted); margin: 0; max-width: 620px; }
.gr-cta-box .btn { flex: none; }

/* ---------- report ---------- */
.gr-report-wrap { padding-block: 40px 72px; }
.gr-rhead h1 { font: 800 clamp(30px, 4.4vw, 48px)/1.1 var(--display); letter-spacing: -.02em; margin: 8px 0 8px; word-break: break-word; }
.gr-rmeta { color: var(--ink-muted); font-size: 14px; margin: 0 0 28px; }
.gr-rmeta a { color: var(--accent); }

.gr-ring { display: block; flex: none; }
.gr-ring-bg { fill: none; stroke: var(--line); stroke-width: 9; }
.gr-ring-fg { fill: none; stroke-width: 9; stroke-linecap: round; transition: stroke-dasharray .8s ease; }
.gr-ring text { font: 700 30px var(--display); fill: var(--ink); }
.gr-good .gr-ring-fg { stroke: var(--success); }
.gr-ok .gr-ring-fg { stroke: #D98A0B; }
.gr-poor .gr-ring-fg { stroke: #D92D20; }
.gr-none .gr-ring-fg { stroke: var(--line); }

.gr-summary { display: grid; grid-template-columns: 1.1fr 1fr; gap: 20px; margin-bottom: 20px; }
.gr-overall { display: flex; gap: 24px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 24px; box-shadow: var(--shadow-sm); }
.gr-overall p { color: var(--ink-muted); margin: 6px 0 0; }
.gr-grade { font: 800 28px/1.1 var(--display); }
.gr-grade.gr-good { color: var(--success); } .gr-grade.gr-ok { color: var(--warning); } .gr-grade.gr-poor { color: #B42318; }
.gr-sent { font-size: 13px; color: var(--ink-faint) !important; }
.gr-cats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.gr-cat { display: grid; grid-template-columns: 64px 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center; align-content: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px; color: var(--ink); text-decoration: none; }
.gr-cat:hover { border-color: var(--accent); }
.gr-cat .gr-ring, .gr-cat .gr-cat-pending { grid-row: span 2; }
.gr-cat b { font: 700 17px/1.2 var(--display); align-self: end; }
.gr-cat small { color: var(--ink-muted); align-self: start; }
.gr-cat-pending { width: 56px; height: 56px; border-radius: 50%; border: 6px solid var(--line); border-top-color: var(--accent); animation: gr-spin 1s linear infinite; box-sizing: border-box; }

.gr-phone-row { display: flex; gap: 24px; align-items: center; margin-bottom: 20px; }
.gr-phone { margin: 0; flex: none; width: 200px; text-align: center; }
.gr-phone img { width: 100%; border: 8px solid var(--ink); border-radius: 26px; display: block; box-shadow: var(--shadow-md); background: var(--surface); }
.gr-phone figcaption { font-size: 12px; color: var(--ink-faint); margin-top: 8px; }
.gr-vitals { flex: 1; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 24px; }
.gr-vitals h3 { font: 700 20px/1.2 var(--display); margin: 0 0 4px; }
.gr-vitals p { color: var(--ink-muted); margin: 0 0 16px; font-size: 14px; }
.gr-vitals ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.gr-vitals li { border-radius: var(--r-md); padding: 14px; background: var(--panel); display: grid; gap: 4px; border-top: 4px solid var(--line-strong); }
.gr-vitals li b { font: 700 24px/1.1 var(--display); }
.gr-vitals li span { font-size: 13px; color: var(--ink-muted); }
.gr-vitals .gr-v-fast { border-top-color: var(--success); }
.gr-vitals .gr-v-average { border-top-color: #D98A0B; }
.gr-vitals .gr-v-slow { border-top-color: #D92D20; }

.gr-note { background: var(--warning-soft); color: var(--warning); border-radius: var(--r-md); padding: 12px 16px; font-size: 14px; margin: 0 0 20px; }

.gr-fixes { background: var(--hero); color: var(--on-hero); border-radius: var(--r-xl); padding: 28px; margin-bottom: 28px; }
.gr-fixes h2 { font: 700 26px/1.2 var(--display); margin: 0 0 4px; }
.gr-fixes > p { color: var(--on-hero-muted); margin: 0 0 18px; }
.gr-fixes ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; counter-reset: f; }
.gr-fixes li { counter-increment: f; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-md); padding: 14px 16px 14px 52px; position: relative; }
.gr-fixes li::before { content: counter(f); position: absolute; left: 16px; top: 14px; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); font: 700 13px/24px var(--display); text-align: center; }
.gr-fix-top { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.gr-fixes p { margin: 6px 0 0; color: var(--on-hero-muted); font-size: 14px; line-height: 1.55; }
.gr-tag { font: 600 11px/1 var(--body); letter-spacing: .06em; text-transform: uppercase; padding: 5px 8px; border-radius: var(--r-pill); background: rgba(255,255,255,.12); }
.gr-gain { margin-left: auto; font: 600 13px var(--mono); color: #7DE2A6; }

.gr-section { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 24px; margin-bottom: 20px; scroll-margin-top: 90px; }
.gr-section-head { display: flex; gap: 16px; align-items: center; margin-bottom: 12px; }
.gr-section-head h2 { font: 700 24px/1.2 var(--display); margin: 0; }
.gr-section-head p { margin: 2px 0 0; color: var(--ink-muted); font-size: 14px; }
.gr-count { width: 56px; height: 56px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font: 700 17px/56px var(--display); text-align: center; flex: none; }
.gr-checks { list-style: none; margin: 0; padding: 0; }
.gr-check { display: flex; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); }
.gr-check b { display: block; font-weight: 600; }
.gr-detail { display: block; color: var(--ink-muted); font-size: 14px; margin-top: 2px; word-break: break-word; }
.gr-howto { margin: 8px 0 0; font-size: 14px; line-height: 1.55; padding: 10px 12px; border-radius: var(--r-md); background: var(--panel); }
.gr-icon { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; }
.gr-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.gr-pass .gr-icon { background: var(--success-soft); color: var(--success); }
.gr-warn .gr-icon { background: var(--warning-soft); color: var(--warning); }
.gr-fail .gr-icon { background: #FEF3F2; color: #B42318; }
.gr-info .gr-icon { background: var(--panel); color: var(--ink-faint); }

.gr-next { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 28px; }
.gr-next > div { background: var(--panel); border-radius: var(--r-xl); padding: 28px; }
.gr-next > div:last-child { background: var(--accent-soft); }
.gr-next h2 { font: 700 22px/1.2 var(--display); margin: 0 0 6px; }
.gr-next p { color: var(--ink-muted); margin: 0 0 16px; }

.gr-progress-box, .gr-error-box { display: flex; gap: 24px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 32px; box-shadow: var(--shadow-sm); }
.gr-error-box { display: block; }
.gr-progress-box h2, .gr-error-box h2 { font: 700 24px/1.2 var(--display); margin: 0 0 6px; }
.gr-progress-box p, .gr-error-box p { color: var(--ink-muted); margin: 0 0 16px; }
.gr-spinner { flex: none; width: 48px; height: 48px; border-radius: 50%; border: 5px solid var(--line); border-top-color: var(--accent); animation: gr-spin 1s linear infinite; }
.gr-progress { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.gr-progress li { color: var(--ink-faint); padding-left: 28px; position: relative; }
.gr-progress li::before { content: ""; position: absolute; left: 0; top: 3px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line); }
.gr-progress li.now { color: var(--ink); font-weight: 600; }
.gr-progress li.now::before { border-color: var(--accent); border-top-color: transparent; animation: gr-spin .8s linear infinite; }
.gr-progress li.done { color: var(--ink-muted); }
.gr-progress li.done::before { background: var(--success); border-color: var(--success); }
@keyframes gr-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .gr-spinner, .gr-cat-pending, .gr-progress li.now::before { animation: none; } }

@media (max-width: 960px) {
    .gr-hero-in, .gr-summary { grid-template-columns: 1fr; }
    .gr-area-grid { grid-template-columns: repeat(2, 1fr); }
    .gr-next { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .gr-hero-in { padding-block: 40px; gap: 28px; }
    .gr-form { padding: 20px; }
    .gr-area-grid, .gr-steps ol { grid-template-columns: 1fr; }
    .gr-cta-box { flex-direction: column; align-items: flex-start; padding: 28px; }
    .gr-overall { flex-direction: column; text-align: center; }
    .gr-cats { grid-template-columns: 1fr 1fr; }
    .gr-cat { grid-template-columns: 1fr; justify-items: center; text-align: center; row-gap: 6px; }
    .gr-cat .gr-ring, .gr-cat .gr-cat-pending { grid-row: auto; }
    .gr-phone-row { flex-direction: column; align-items: center; }
    .gr-vitals { width: 100%; box-sizing: border-box; }
    .gr-vitals ul { grid-template-columns: 1fr; }
    .gr-progress-box { flex-direction: column; padding: 24px; }
    .gr-section, .gr-fixes { padding: 18px; }
    .gr-fixes li { padding-left: 46px; }
}