/* AchieveRank GBP Grader: all styles scoped under #ag-grader so the WP theme is untouched. */
#ag-grader {
  --ag-navy: #011F54;
  --ag-navy-deep: #02122F;
  --ag-blue: #0160EA;
  --ag-blue-dark: #014DBB;
  --ag-gold: #E0BA43;
  --ag-gold-dark: #9A7B14;
  --ag-paper: #F5F8FC;
  --ag-card: #FFFFFF;
  --ag-ink: #0E1E38;
  --ag-ink-soft: #3D4F68;
  --ag-line: #D8E2EF;
  --ag-good: #0E8A5F;
  --ag-good-bg: #E3F4EC;
  --ag-warn: #A87F0E;
  --ag-warn-bg: #FBF3D3;
  --ag-bad: #C93A3A;
  --ag-bad-bg: #FBE7E7;
  --ag-track: #E3EAF4;
  --ag-shadow: 0 18px 44px rgba(1, 31, 84, 0.14);
  --ag-radius: 14px;
}
@media (prefers-color-scheme: dark) {
  #ag-grader {
    --ag-paper: #050F22;
    --ag-card: #0A1E3D;
    --ag-ink: #EDF3FC;
    --ag-ink-soft: #A9BCD6;
    --ag-line: #1E3A5F;
    --ag-good-bg: #0C2E22;
    --ag-warn-bg: #33290B;
    --ag-bad-bg: #381414;
    --ag-track: #16305A;
    --ag-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
  }
}
#ag-grader { box-sizing: border-box; font-family: "Space Grotesk", system-ui, sans-serif; background: var(--ag-paper); color: var(--ag-ink); line-height: 1.55; -webkit-font-smoothing: antialiased; }
#ag-grader *, #ag-grader *::before, #ag-grader *::after { box-sizing: border-box; }
#ag-grader .serif-i { font-family: "DM Serif Display", serif; font-style: italic; font-weight: 400; }
#ag-grader .mono { font-family: "Space Mono", monospace; }
#ag-grader a { color: var(--ag-blue); }
#ag-grader button { font-family: inherit; cursor: pointer; }
#ag-grader :focus-visible { outline: 3px solid var(--ag-gold); outline-offset: 2px; }

/* ---------- hero ---------- */
#ag-grader .ag-hero {
  background:
    radial-gradient(900px 480px at 85% -10%, rgba(1, 96, 234, 0.55), transparent 60%),
    radial-gradient(700px 420px at -10% 110%, rgba(224, 186, 67, 0.16), transparent 55%),
    var(--ag-navy);
  color: #fff;
  padding: 64px 20px 84px;
}
#ag-grader .ag-wrap { max-width: 1120px; margin: 0 auto; }
#ag-grader .ag-hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: start; }
@media (max-width: 900px) { #ag-grader .ag-hero-grid { grid-template-columns: 1fr; } }
#ag-grader .ag-hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 18px; font-weight: 700; color: #fff; }
#ag-grader .ag-hero h1 .serif-i { color: var(--ag-gold); letter-spacing: 0; }
#ag-grader .ag-lede { font-size: 1.13rem; color: #C9D9F2; margin: 0 0 26px; max-width: 34rem; }
#ag-grader .ag-hero-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
#ag-grader .ag-hero-points li { display: flex; gap: 10px; align-items: baseline; color: #E7EEFA; font-size: 0.99rem; }
#ag-grader .ag-hero-points .tick { color: var(--ag-gold); font-weight: 700; }

/* ---------- grader card ---------- */
#ag-grader .ag-grader-card { background: var(--ag-card); color: var(--ag-ink); border-radius: 18px; box-shadow: var(--ag-shadow); padding: 26px; position: relative; }
#ag-grader .ag-grader-card h2 { margin: 0 0 4px; font-size: 1.25rem; letter-spacing: -0.01em; }
#ag-grader .ag-sub { margin: 0 0 18px; color: var(--ag-ink-soft); font-size: 0.94rem; }
#ag-grader .ag-search-row { display: flex; gap: 10px; }
@media (max-width: 520px) { #ag-grader .ag-search-row { flex-direction: column; } }
#ag-grader .ag-search-box { position: relative; flex: 1; }
#ag-grader .ag-search-box input { width: 100%; padding: 14px 16px; font-size: 1rem; font-family: inherit; border: 1.5px solid var(--ag-line); border-radius: 10px; background: var(--ag-paper); color: var(--ag-ink); }
#ag-grader .ag-search-box input::placeholder { color: var(--ag-ink-soft); }
#ag-grader .ag-suggest { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; background: var(--ag-card); border: 1px solid var(--ag-line); border-radius: 10px; box-shadow: var(--ag-shadow); overflow: hidden; display: none; }
#ag-grader .ag-suggest.open { display: block; }
#ag-grader .ag-suggest button { display: block; width: 100%; text-align: left; background: none; border: none; padding: 11px 14px; font-size: 0.95rem; color: var(--ag-ink); border-bottom: 1px solid var(--ag-line); }
#ag-grader .ag-suggest button:last-child { border-bottom: none; }
#ag-grader .ag-suggest button:hover { background: var(--ag-paper); }
#ag-grader .ag-suggest .meta { display: block; font-size: 0.8rem; color: var(--ag-ink-soft); }
#ag-grader .ag-demo-note { margin: 16px 0 0; font-size: 0.83rem; color: var(--ag-ink-soft); border-top: 1px dashed var(--ag-line); padding-top: 12px; }
#ag-grader .ag-form-error { display: none; margin-top: 12px; font-size: 0.9rem; color: var(--ag-bad); font-weight: 500; }
#ag-grader .ag-form-error.show { display: block; }

/* scan state */
#ag-grader .ag-scan { display: none; }
#ag-grader .ag-scan.on { display: block; }
#ag-grader .ag-scan h3 { margin: 0 0 2px; font-size: 1.1rem; }
#ag-grader .ag-who { color: var(--ag-ink-soft); font-size: 0.92rem; margin: 0 0 16px; }
#ag-grader .ag-scan-steps { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 9px; }
#ag-grader .ag-scan-steps li { display: flex; align-items: center; gap: 10px; font-size: 0.95rem; color: var(--ag-ink-soft); opacity: 0.45; }
#ag-grader .ag-scan-steps li.running { opacity: 1; color: var(--ag-ink); font-weight: 600; }
#ag-grader .ag-scan-steps li.done { opacity: 1; color: var(--ag-ink); }
#ag-grader .ag-scan-steps .st-ico { width: 22px; height: 22px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--ag-line); font-size: 0.75rem; font-weight: 700; }
#ag-grader .ag-scan-steps li.done .st-ico { background: var(--ag-good); border-color: var(--ag-good); color: #fff; }
#ag-grader .ag-scan-steps li.running .st-ico { border-color: var(--ag-blue); border-top-color: transparent; animation: ag-spin 0.7s linear infinite; }
@keyframes ag-spin { to { transform: rotate(360deg); } }
#ag-grader .ag-progress { height: 8px; border-radius: 999px; background: var(--ag-track); overflow: hidden; }
#ag-grader .ag-progress > div { height: 100%; width: 0%; background: var(--ag-blue); border-radius: 999px; transition: width 0.3s ease; }

/* buttons */
#ag-grader .ag-btn { display: inline-block; border: none; text-decoration: none; font-weight: 600; font-size: 0.98rem; border-radius: 999px; padding: 12px 24px; transition: transform 0.15s ease, background 0.15s ease; }
#ag-grader .ag-btn:active { transform: translateY(1px); }
#ag-grader .ag-btn-gold { background: var(--ag-gold); color: #231a00; }
#ag-grader .ag-btn-gold:hover { background: #eccd63; }
#ag-grader .ag-btn-blue { background: var(--ag-blue); color: #fff; }
#ag-grader .ag-btn-blue:hover { background: var(--ag-blue-dark); }
#ag-grader .ag-btn-ghost { background: transparent; color: var(--ag-ink); border: 1.5px solid var(--ag-line); }
#ag-grader .ag-btn-ghost:hover { border-color: var(--ag-blue); color: var(--ag-blue); }
#ag-grader .ag-btn-sm { padding: 8px 16px; font-size: 0.88rem; }

/* ---------- report ---------- */
#ag-grader .ag-report { max-width: 1120px; margin: -44px auto 0; padding: 0 20px; position: relative; z-index: 5; display: none; }
#ag-grader .ag-report.on { display: block; }
#ag-grader .ag-report-card { background: var(--ag-card); border-radius: 18px; box-shadow: var(--ag-shadow); padding: 30px; border: 1px solid var(--ag-line); }
@media (max-width: 640px) { #ag-grader .ag-report-card { padding: 20px; } }
#ag-grader .ag-report-head { display: grid; grid-template-columns: 240px 1fr; gap: 34px; align-items: center; }
@media (max-width: 760px) { #ag-grader .ag-report-head { grid-template-columns: 1fr; justify-items: center; text-align: center; } }
#ag-grader .ag-gauge-wrap { text-align: center; }
#ag-grader .ag-gauge { width: 230px; max-width: 70vw; }
#ag-grader .ag-g-num { font-size: 3rem; font-weight: 700; fill: var(--ag-ink); }
#ag-grader .ag-g-of { font-size: 0.95rem; fill: var(--ag-ink-soft); }
#ag-grader .ag-grade-chip { display: inline-block; margin-top: 2px; padding: 5px 16px; border-radius: 999px; font-weight: 700; font-size: 0.95rem; letter-spacing: 0.02em; }
#ag-grader .ag-report-head h2 { margin: 0 0 4px; font-size: 1.7rem; letter-spacing: -0.02em; }
#ag-grader .ag-biz-meta { color: var(--ag-ink-soft); margin: 0 0 12px; font-size: 0.98rem; }
#ag-grader .ag-verdict { font-size: 1.06rem; margin: 0 0 16px; max-width: 36rem; }
@media (max-width: 760px) { #ag-grader .ag-verdict { margin-inline: auto; } }
#ag-grader .ag-stat-row { display: flex; flex-wrap: wrap; gap: 10px 26px; }
@media (max-width: 760px) { #ag-grader .ag-stat-row { justify-content: center; } }
#ag-grader .ag-stat .v { font-weight: 700; font-size: 1.15rem; }
#ag-grader .ag-stat .k { display: block; font-size: 0.78rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ag-ink-soft); }
#ag-grader .ag-projected { display: none; margin-top: 16px; padding: 12px 16px; border-radius: 10px; background: var(--ag-good-bg); color: var(--ag-ink); font-size: 0.96rem; }
#ag-grader .ag-projected.on { display: block; }
#ag-grader .ag-projected strong { color: var(--ag-good); }

/* map */
#ag-grader .ag-map { height: 280px; border-radius: var(--ag-radius); border: 1px solid var(--ag-line); overflow: hidden; background: var(--ag-track); }
#ag-grader .ag-map-note { margin: 8px 0 0; font-size: 0.85rem; color: var(--ag-ink-soft); }

/* photo stats */
#ag-grader .ag-photo-stats { margin-top: 14px; border: 1px solid var(--ag-line); border-radius: 10px; background: var(--ag-track); padding: 12px 14px; display: grid; gap: 6px; }
#ag-grader .ag-ps-line { font-size: 0.94rem; }
#ag-grader .ag-ps-tip { margin: 4px 0 0; font-size: 0.9rem; line-height: 1.5; color: var(--ag-ink-soft); }

#ag-grader .ag-sec { font-size: 1.2rem; margin: 34px 0 14px; letter-spacing: -0.01em; }
#ag-grader .ag-sec-intro { margin: 0 0 14px; color: var(--ag-ink-soft); font-size: 0.95rem; }
#ag-grader .ag-cat-list { display: grid; gap: 10px; }
#ag-grader .ag-cat { border: 1px solid var(--ag-line); border-radius: var(--ag-radius); overflow: hidden; }
#ag-grader .ag-cat-head { width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; align-items: center; background: none; border: none; text-align: left; padding: 14px 18px; color: var(--ag-ink); }
#ag-grader .ag-cat-name { font-weight: 600; font-size: 1rem; display: flex; align-items: center; gap: 10px; }
#ag-grader .ag-cat-score { font-weight: 700; font-size: 1rem; white-space: nowrap; }
#ag-grader .ag-cat-score .of { color: var(--ag-ink-soft); font-weight: 500; font-size: 0.85rem; }
#ag-grader .ag-bar { grid-column: 1 / -1; height: 8px; border-radius: 999px; background: var(--ag-track); overflow: hidden; }
#ag-grader .ag-bar > div { height: 100%; border-radius: 999px; transition: width 0.6s ease; }
#ag-grader .ag-cat-body { display: none; padding: 4px 18px 16px; }
#ag-grader .ag-cat.open .ag-cat-body { display: block; }
#ag-grader .ag-chev { transition: transform 0.2s ease; color: var(--ag-ink-soft); font-size: 0.8rem; }
#ag-grader .ag-cat.open .ag-chev { transform: rotate(180deg); }
#ag-grader .ag-findings { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
#ag-grader .ag-findings li { display: flex; gap: 10px; font-size: 0.94rem; align-items: baseline; }
#ag-grader .ag-f-ico { width: 19px; height: 19px; border-radius: 50%; flex: none; position: relative; top: 3px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.68rem; font-weight: 700; color: #fff; }
#ag-grader .ag-f-good { background: var(--ag-good); }
#ag-grader .ag-f-warn { background: var(--ag-gold-dark); }
#ag-grader .ag-f-bad { background: var(--ag-bad); }

#ag-grader .ag-fix-list { display: grid; gap: 10px; }
#ag-grader .ag-fix { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; border: 1px solid var(--ag-line); border-radius: var(--ag-radius); padding: 14px 18px; }
@media (max-width: 640px) { #ag-grader .ag-fix { grid-template-columns: 1fr auto; } #ag-grader .ag-fix .ag-gain { order: -1; } }
#ag-grader .ag-fix .ag-gain { font-family: "Space Mono", monospace; font-weight: 700; font-size: 0.92rem; background: var(--ag-warn-bg); color: var(--ag-warn); border-radius: 8px; padding: 6px 10px; white-space: nowrap; }
#ag-grader .ag-fix.applied .ag-gain { background: var(--ag-good-bg); color: var(--ag-good); }
#ag-grader .ag-fix h4 { margin: 0 0 2px; font-size: 1rem; }
#ag-grader .ag-fix p { margin: 0; color: var(--ag-ink-soft); font-size: 0.9rem; }
#ag-grader .ag-fix-cat { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ag-blue); }
#ag-grader .ag-fix button[disabled] { opacity: 0.65; cursor: default; }
#ag-grader .ag-report-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
#ag-grader .ag-txt-alt { margin: 10px 0 0; }
#ag-grader .ag-txt-link { background: none; border: none; padding: 0; font: inherit; font-size: 0.88rem; color: var(--ag-ink-soft); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
#ag-grader .ag-txt-link:hover { color: var(--ag-blue); }

/* ---------- sections ---------- */
#ag-grader .ag-section { max-width: 1120px; margin: 0 auto; padding: 72px 20px 8px; }
#ag-grader .ag-section h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -0.02em; margin: 0 0 10px; }
#ag-grader .ag-section h2 .serif-i { color: var(--ag-blue); }
@media (prefers-color-scheme: dark) { #ag-grader .ag-section h2 .serif-i { color: var(--ag-gold); } }
#ag-grader .ag-intro { color: var(--ag-ink-soft); max-width: 42rem; margin: 0 0 30px; font-size: 1.03rem; }
#ag-grader .ag-rubric { border: 1px solid var(--ag-line); border-radius: var(--ag-radius); background: var(--ag-card); overflow: hidden; }
#ag-grader .ag-rubric-row { display: grid; grid-template-columns: 220px 1fr 64px; gap: 18px; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--ag-line); }
#ag-grader .ag-rubric-row:last-child { border-bottom: none; }
@media (max-width: 640px) { #ag-grader .ag-rubric-row { grid-template-columns: 1fr 52px; } #ag-grader .ag-rubric-row .ag-r-bar { grid-column: 1 / -1; order: 3; } }
#ag-grader .ag-rubric-row h3 { margin: 0; font-size: 1rem; }
#ag-grader .ag-rubric-row p { margin: 2px 0 0; color: var(--ag-ink-soft); font-size: 0.88rem; }
#ag-grader .ag-r-bar { height: 8px; background: var(--ag-track); border-radius: 999px; overflow: hidden; }
#ag-grader .ag-r-bar > div { height: 100%; background: var(--ag-blue); border-radius: 999px; }
#ag-grader .ag-r-pts { font-family: "Space Mono", monospace; font-weight: 700; text-align: right; }
#ag-grader .ag-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 820px) { #ag-grader .ag-steps { grid-template-columns: 1fr; } }
#ag-grader .ag-step { border-top: 3px solid var(--ag-gold); padding-top: 14px; }
#ag-grader .ag-step .ag-n { font-family: "Space Mono", monospace; font-size: 0.85rem; color: var(--ag-ink-soft); }
#ag-grader .ag-step h3 { margin: 6px 0 6px; font-size: 1.12rem; }
#ag-grader .ag-step p { margin: 0; color: var(--ag-ink-soft); font-size: 0.95rem; }

/* ---------- not-configured notice ---------- */
#ag-grader .ag-notice { max-width: 720px; margin: 40px auto; padding: 34px; background: var(--ag-card); border: 1px solid var(--ag-line); border-radius: 18px; box-shadow: var(--ag-shadow); text-align: center; }
#ag-grader .ag-notice h2 { margin: 0 0 8px; font-size: 1.4rem; }
#ag-grader .ag-notice p { margin: 0; color: var(--ag-ink-soft); }

/* competitor chips on map section */
#ag-grader .ag-comp-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
#ag-grader .ag-comp-chip { border: 1px solid var(--ag-line); background: var(--ag-card); color: var(--ag-ink); border-radius: 999px; padding: 6px 13px; font-size: 0.85rem; }
#ag-grader .ag-comp-chip strong { color: var(--ag-blue); }

/* competitor ranking table (top 10) */
#ag-grader .ag-you-rank { margin: 0 0 14px; padding: 13px 16px; border: 1px solid var(--ag-line); border-left: 4px solid var(--ag-gold); border-radius: 10px; background: var(--ag-paper); font-size: 1.05rem; }
#ag-grader .ag-you-rank strong { color: var(--ag-blue); font-size: 1.25rem; }
#ag-grader .ag-comp-table { border: 1px solid var(--ag-line); border-radius: var(--ag-radius); overflow: hidden; }
#ag-grader .ag-comp-table .ag-comp-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; gap: 6px 14px; align-items: center; padding: 11px 16px; border-bottom: 1px solid var(--ag-line); background: var(--ag-card); font-size: 0.95rem; margin-top: 0; }
#ag-grader .ag-comp-table .ag-comp-row:last-child { border-bottom: none; }
#ag-grader .ag-comp-rank { font-family: "Space Mono", monospace; font-weight: 700; color: var(--ag-ink-soft); }
#ag-grader .ag-comp-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ag-grader .ag-comp-stars { color: var(--ag-gold-dark); font-weight: 700; white-space: nowrap; }
#ag-grader .ag-comp-revs { color: var(--ag-ink-soft); white-space: nowrap; }
#ag-grader .ag-comp-table .ag-comp-row.you { background: var(--ag-blue); color: #fff; }
#ag-grader .ag-comp-table .ag-comp-row.you .ag-comp-rank,
#ag-grader .ag-comp-table .ag-comp-row.you .ag-comp-revs { color: #D6E6FD; }
#ag-grader .ag-comp-table .ag-comp-row.you .ag-comp-stars { color: var(--ag-gold); }
#ag-grader .ag-you-badge { display: inline-block; margin-left: 8px; padding: 2px 10px; border-radius: 999px; background: var(--ag-gold); color: #231a00; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; vertical-align: 2px; }
#ag-grader .ag-comp-sep { text-align: center; padding: 5px 0; color: var(--ag-ink-soft); border-bottom: 1px solid var(--ag-line); background: var(--ag-paper); letter-spacing: 0.25em; font-size: 0.8rem; }
#ag-grader .ag-comp-gaps { margin-top: 14px; display: grid; gap: 8px; }
#ag-grader .ag-comp-gaps p { margin: 0; font-size: 0.95rem; color: var(--ag-ink-soft); }
#ag-grader .ag-comp-gaps strong { color: var(--ag-ink); }
#ag-grader .ag-comp-disc { margin: 0 0 14px; font-size: 0.9rem; color: var(--ag-ink-soft); }
#ag-grader .ag-comp-ctrl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--ag-line); }
#ag-grader .ag-comp-ctrl label { font-size: 0.9rem; font-weight: 600; color: var(--ag-ink); }
#ag-grader .ag-comp-ctrl select { font: inherit; font-size: 0.9rem; padding: 7px 10px; border: 1px solid var(--ag-line); border-radius: 8px; background: var(--ag-card); color: var(--ag-ink); max-width: 100%; }
#ag-grader .ag-comp-ctrl-note { margin: 8px 0 0; font-size: 0.85rem; color: var(--ag-ink-soft); }
#ag-grader .ag-comp-empty { margin: 0; color: var(--ag-ink-soft); font-size: 0.95rem; }

/* NAP consistency */
#ag-grader .ag-nap-note { margin: 0; color: var(--ag-ink-soft); font-size: 0.95rem; }
#ag-grader .ag-nap-table { border: 1px solid var(--ag-line); border-radius: var(--ag-radius); overflow: hidden; }
#ag-grader .ag-nap-row { padding: 14px 18px; border-bottom: 1px solid var(--ag-line); background: var(--ag-card); }
#ag-grader .ag-nap-row:last-child { border-bottom: none; }
#ag-grader .ag-nap-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
#ag-grader .ag-nap-field { font-weight: 700; font-size: 1rem; }
#ag-grader .ag-nap-badge { flex: none; padding: 3px 12px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
#ag-grader .ag-nap-badge.ok { background: var(--ag-good-bg); color: var(--ag-good); }
#ag-grader .ag-nap-badge.bad { background: var(--ag-bad-bg); color: var(--ag-bad); }
#ag-grader .ag-nap-badge.none { background: var(--ag-track); color: var(--ag-ink-soft); }
#ag-grader .ag-nap-vals { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; }
@media (max-width: 640px) { #ag-grader .ag-nap-vals { grid-template-columns: 1fr; } }
#ag-grader .ag-nap-val { font-size: 0.94rem; overflow-wrap: break-word; }
#ag-grader .ag-nap-lab { display: block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ag-ink-soft); margin-bottom: 1px; }
#ag-grader .ag-nap-why { margin: 10px 0 0; font-size: 0.9rem; color: var(--ag-ink-soft); border-left: 3px solid var(--ag-gold); padding-left: 10px; }

/* score history */
#ag-grader .ag-hist-delta { margin: 0 0 14px; font-size: 1.02rem; font-weight: 600; }
#ag-grader .ag-hist-controls { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; margin: 0 0 10px; }
#ag-grader .ag-hist-presets, #ag-grader .ag-hist-grouping { display: inline-flex; border: 1px solid var(--ag-line); border-radius: 999px; overflow: hidden; }
#ag-grader .ag-hist-presets button, #ag-grader .ag-hist-grouping button { background: var(--ag-card); border: none; padding: 7px 14px; font: inherit; font-size: 0.85rem; font-weight: 600; color: var(--ag-ink-soft); cursor: pointer; }
#ag-grader .ag-hist-presets button.on, #ag-grader .ag-hist-grouping button.on { background: var(--ag-blue); color: #fff; }
#ag-grader .ag-hist-custom { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: 0 0 12px; font-size: 0.85rem; color: var(--ag-ink-soft); }
#ag-grader .ag-hist-custom input[type="date"] { display: block; margin-top: 4px; padding: 7px 10px; border: 1.5px solid var(--ag-line); border-radius: 8px; background: var(--ag-paper); color: var(--ag-ink); font: inherit; font-size: 0.9rem; }
#ag-grader .ag-hist-periods { border: 1px solid var(--ag-line); border-radius: var(--ag-radius); overflow: hidden; }
#ag-grader .ag-hist-prow { display: grid; grid-template-columns: 150px 1fr 44px 48px; gap: 12px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--ag-line); background: var(--ag-card); font-size: 0.92rem; }
#ag-grader .ag-hist-prow:last-child { border-bottom: none; }
#ag-grader .ag-hist-plabel { font-weight: 600; }
#ag-grader .ag-hist-pcount { color: var(--ag-ink-soft); font-weight: 500; font-size: 0.8rem; }
#ag-grader .ag-hist-pbar { height: 8px; background: var(--ag-track); border-radius: 99px; overflow: hidden; }
#ag-grader .ag-hist-pbar > span { display: block; height: 100%; background: var(--ag-blue); border-radius: 99px; }
#ag-grader .ag-hist-pscore { font-weight: 700; text-align: right; font-size: 1rem; }
#ag-grader .ag-hist-pchg { font-weight: 700; text-align: right; font-size: 0.85rem; }
#ag-grader .ag-hist-pchg.up { color: var(--ag-good); }
#ag-grader .ag-hist-pchg.down { color: var(--ag-bad); }
#ag-grader .ag-hist-pchg.flat { color: var(--ag-ink-soft); }
#ag-grader .ag-hist-empty { margin: 0; padding: 14px 16px; color: var(--ag-ink-soft); font-size: 0.95rem; border: 1px solid var(--ag-line); border-radius: var(--ag-radius); background: var(--ag-card); }
@media (max-width: 560px) {
  #ag-grader .ag-hist-prow { grid-template-columns: 104px 1fr 36px 40px; gap: 8px; padding: 9px 12px; }
}
@media (max-width: 560px) {
  #ag-grader .ag-comp-table .ag-comp-row { grid-template-columns: 30px minmax(0, 1fr) auto; padding: 10px 12px; }
  #ag-grader .ag-comp-stars { grid-row: 1; grid-column: 3; }
  #ag-grader .ag-comp-revs { grid-column: 2; }
}

/* Leaflet inside our card: keep default tile look but round attribution */
#ag-grader .ag-map .leaflet-container { font-family: "Space Grotesk", system-ui, sans-serif; }

@media (prefers-reduced-motion: reduce) {
  #ag-grader .ag-scan-steps li.running .st-ico { animation: none; }
  #ag-grader .ag-bar > div, #ag-grader .ag-progress > div { transition: none; }
}

/* ---------- unlock panel (score teaser -> email code) ---------- */
#ag-grader .ag-unlock { margin-top: 26px; border: 1.5px dashed var(--ag-gold); background: var(--ag-warn-bg); border-radius: var(--ag-radius); padding: 26px; }
#ag-grader .ag-unlock h3 { margin: 0 0 6px; font-size: 1.3rem; }
#ag-grader .ag-unlock-intro { margin: 0 0 18px; color: var(--ag-ink-soft); font-size: 0.96rem; max-width: 38rem; }
#ag-grader .ag-unlock-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 4px; }
@media (max-width: 560px) { #ag-grader .ag-unlock-fields { grid-template-columns: 1fr; } }
#ag-grader .ag-unlock label { display: block; font-size: 0.9rem; font-weight: 600; }
#ag-grader .ag-unlock label input { display: block; width: 100%; margin-top: 5px; padding: 12px 14px; font-size: 1rem; font-family: inherit; border: 1.5px solid var(--ag-line); border-radius: 10px; background: var(--ag-card); color: var(--ag-ink); font-weight: 400; }
#ag-grader .ag-unlock-note { margin: 12px 0 0; font-size: 0.85rem; color: var(--ag-ink-soft); }
#ag-grader .ag-code-sent { font-size: 0.98rem; margin: 0 0 14px; }
#ag-grader .ag-code-info { display: none; margin: 10px 0 0; font-size: 0.9rem; color: var(--ag-good); font-weight: 500; }
#ag-grader .ag-code-info:not(:empty) { display: block; }
#ag-grader .ag-code-actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
#ag-grader #agCodeForm label { max-width: 280px; }

/* ---------- what's next ---------- */
#ag-grader .ag-next { margin-top: 40px; border-top: 1px solid var(--ag-line); padding-top: 8px; }
#ag-grader .ag-next-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 18px 0 24px; }
@media (max-width: 900px) { #ag-grader .ag-next-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { #ag-grader .ag-next-grid { grid-template-columns: 1fr; } }
#ag-grader .ag-next-card { border: 1px solid var(--ag-line); border-radius: var(--ag-radius); padding: 18px; background: var(--ag-paper); }
#ag-grader .ag-next-n { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ag-blue); color: #fff; font-weight: 700; font-size: 0.9rem; margin-bottom: 10px; }
#ag-grader .ag-next-card h4 { margin: 0 0 6px; font-size: 1.02rem; }
#ag-grader .ag-next-card p { margin: 0; color: var(--ag-ink-soft); font-size: 0.92rem; }
#ag-grader .ag-next-cta { margin-top: 4px; }

/* ---------- review themes ---------- */
#ag-grader .ag-theme-list { border: 1px solid var(--ag-line); border-radius: var(--ag-radius); overflow: hidden; }
#ag-grader .ag-theme-row { display: grid; grid-template-columns: 170px 1fr auto; gap: 6px 16px; align-items: center; padding: 11px 16px; border-bottom: 1px solid var(--ag-line); background: var(--ag-card); font-size: 0.94rem; }
#ag-grader .ag-theme-row:last-child { border-bottom: none; }
#ag-grader .ag-theme-label { font-weight: 600; }
#ag-grader .ag-theme-bar { height: 8px; border-radius: 999px; background: var(--ag-track); overflow: hidden; }
#ag-grader .ag-theme-bar > span { display: block; height: 100%; background: var(--ag-blue); border-radius: 999px; }
#ag-grader .ag-theme-meta { color: var(--ag-ink-soft); white-space: nowrap; font-size: 0.88rem; }
@media (max-width: 640px) {
  #ag-grader .ag-theme-row { grid-template-columns: 1fr auto; }
  #ag-grader .ag-theme-bar { grid-column: 1 / -1; order: 3; }
}

/* ---------- review replies ---------- */
#ag-grader .ag-reply-list { display: grid; gap: 12px; }
#ag-grader .ag-reply { border: 1px solid var(--ag-line); border-radius: var(--ag-radius); padding: 16px 18px; background: var(--ag-card); }
#ag-grader .ag-reply-meta { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; }
#ag-grader .ag-reply-who { font-weight: 700; }
#ag-grader .ag-reply-stars { color: var(--ag-gold-dark); letter-spacing: 0.12em; font-size: 0.9rem; }
#ag-grader .ag-reply-excerpt { margin: 0 0 12px; color: var(--ag-ink-soft); font-size: 0.93rem; font-style: italic; }
#ag-grader .ag-reply-box { background: var(--ag-paper); border-left: 3px solid var(--ag-gold); border-radius: 0 10px 10px 0; padding: 12px 14px; }
#ag-grader .ag-reply-box p { margin: 0 0 10px; font-size: 0.95rem; }

/* ---------- action plan checklist ---------- */
#ag-grader .ag-plan-line { display: flex; align-items: center; gap: 14px; margin: 0 0 12px; }
#ag-grader .ag-plan-count { font-weight: 700; font-size: 0.95rem; white-space: nowrap; }
#ag-grader .ag-plan-bar { flex: 1; height: 8px; border-radius: 999px; background: var(--ag-track); overflow: hidden; }
#ag-grader .ag-plan-bar > span { display: block; height: 100%; background: var(--ag-blue); border-radius: 999px; transition: width 0.4s ease; }
#ag-grader .ag-plan-callout { margin: 0 0 14px; padding: 16px 18px; border: 1.5px solid var(--ag-gold); border-radius: var(--ag-radius); background: var(--ag-warn-bg); font-size: 0.97rem; }
#ag-grader .ag-plan-callout .ag-btn { margin-top: 10px; }
#ag-grader .ag-plan-toggle { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 0.88rem; font-weight: 600; color: var(--ag-ink-soft); cursor: pointer; }
#ag-grader .ag-plan-toggle input { width: 18px; height: 18px; margin: 0; accent-color: var(--ag-blue); cursor: pointer; flex: none; }
#ag-grader .ag-fix.done { border-color: var(--ag-good); }
#ag-grader .ag-fix.done .ag-plan-toggle { color: var(--ag-good); }