/* Page Grader: page-specific pieces on top of audit-theme.css. Intent colours (--intent-*) live there. */
.pg-body { --page-max: 1440px; }
.pg-optional { font-weight: 600; letter-spacing: .04em; text-transform: none; color: var(--text-muted); opacity: .8; margin-left: 4px; }
.pg-muted { color: var(--text-muted); }

/* ---- inputs ---- */
.pg-inputs { display: grid; grid-template-columns: minmax(260px, 1.3fr) minmax(220px, 1fr); gap: 14px 18px; }
@media (max-width: 800px) { .pg-inputs { grid-template-columns: 1fr; } }
.pg-inputs .panel-lbl { display: block; }
.pg-handoff { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 16px; padding: 10px 14px; border: 1px solid var(--accent-border); background: var(--accent-wash); border-radius: var(--radius-md); font-size: 13px; color: var(--text-2); }
.pg-handoff label { display: inline-flex; align-items: center; gap: 8px; flex: 1; min-width: 240px; cursor: pointer; }
.pg-handoff input { accent-color: var(--accent); }
.pg-handoff b { color: var(--text); }
.pg-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.pg-seg-opt { position: relative; cursor: pointer; }
.pg-seg-opt input { position: absolute; opacity: 0; pointer-events: none; }
.pg-seg-opt span { display: flex; flex-direction: column; gap: 1px; padding: 7px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-input); transition: .15s; }
.pg-seg-opt b { font-size: 13px; }
.pg-seg-opt small { font-size: 12px; color: var(--text-muted); }
.pg-seg-opt:hover span { border-color: var(--border-hover); }
.pg-seg-opt input:checked + span { border-color: var(--accent-border); background: var(--accent-wash); box-shadow: inset 0 0 0 1px var(--accent-border); }
.pg-seg-opt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.pg-seg-opt input:disabled + span { opacity: .45; cursor: not-allowed; }

.pg-model { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-soft); }
.pg-model-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 10px; }
.pg-model-head .panel-lbl { margin: 0; }
.pg-key-note { font-size: 12px; color: var(--text-muted); }
.pg-key-note.is-warn { color: var(--warn); }
.pg-key-note[hidden] { display: none; }
.pg-model-head .pg-key-note { color: var(--warn); }
.pg-model-details { margin-top: 10px; }
.pg-model-details summary { cursor: pointer; font-size: 12px; color: var(--text-muted); width: max-content; }
.pg-model-details summary:hover { color: var(--text-2); }
.pg-model-body { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 10px; padding: 12px 14px; border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--bg-input); }
.pg-model-table { font-size: 12px; }
.pg-model-table th, .pg-model-table td { padding: 7px 10px; }
.pg-model-note { margin: 0; font-size: 12px; color: var(--text-muted); }

.pg-run { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px 16px; margin-top: 16px; }
.pg-run .key-source { margin-right: auto; }
.pg-run .btn { height: 42px; padding: 0 22px; }
.pg-cost { font-size: 12px; color: var(--text-muted); text-align: right; }
.pg-cost b { color: var(--text); font-size: 13px; }

/* ---- progress ---- */
.pg-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pg-steps li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: center; font-size: 13px; color: var(--text-muted); }
.pg-steps li.is-active { color: var(--text); }
.pg-steps li.is-done { color: var(--text-2); }
.pg-steps li.is-failed { color: var(--danger); }
.pg-step-icon { width: 16px; height: 16px; display: grid; place-items: center; }
.pg-step-icon svg { width: 15px; height: 15px; }
.pg-steps li.is-done .pg-step-icon { color: var(--accent); }
.pg-steps li.is-pending .pg-step-icon::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--border-hover); }
.pg-step-detail { color: var(--text-muted); font-size: 12px; margin-left: 6px; }

/* ---- sections ---- */
.pg-section { margin-bottom: 30px; }
.pg-section-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 12px; }
.pg-section-head h2 { margin: 0; font-size: 15px; line-height: 22px; font-weight: 600; letter-spacing: -.005em; }
.pg-section-meta { color: var(--text-muted); font-size: 13px; }

.pg-serp { display: grid; gap: 10px; }
.pg-serp-summary { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text); }
.pg-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pg-chip { font-size: 12px; color: var(--text-2); background: var(--bg-input); border: 1px solid var(--border); border-radius: 999px; padding: 2px 10px; }
.pg-chip b { color: var(--text); }
.pg-intent--informational { --pg-intent: var(--intent-informational); }
.pg-intent--commercial { --pg-intent: var(--intent-commercial); }
.pg-intent--transactional { --pg-intent: var(--intent-transactional); }
.pg-intent--navigational { --pg-intent: var(--intent-navigational); }
.pg-chip.pg-intent { border-color: color-mix(in srgb, var(--pg-intent) 50%, transparent); background: color-mix(in srgb, var(--pg-intent) 14%, transparent); color: var(--text); font-weight: 600; }

/* ---- score ---- */
.pg-overview { display: grid; gap: 12px; }
.pg-score-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 0; }
@media (max-width: 640px) { .pg-score-cards { grid-template-columns: 1fr; } }
/* The diagnosis leads the report. */
.pg-hero { border-color: var(--accent-border); padding: 18px 20px; }
.pg-hero-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.pg-hero .pg-diag-head { font-size: 19px; line-height: 1.35; margin: 12px 0 8px; letter-spacing: -.01em; }
.pg-hero .pg-diag-text { font-size: 14px; max-width: 80ch; }
.pg-hero-link { font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none; }
.pg-hero-link:hover { text-decoration: underline; }
.pg-bench { line-height: 1.5; }
.pg-how { margin-top: 10px; font-size: 13px; }
.pg-how summary { cursor: pointer; color: var(--text-2); font-weight: 600; width: max-content; max-width: 100%; }
.pg-how-body { margin-top: 8px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-panel); color: var(--text-2); line-height: 1.55; }
.pg-how-body p { margin: 0 0 8px; }
.pg-how-body ul { margin: 0 0 10px; padding-left: 18px; display: grid; gap: 4px; }
.pg-how-table { min-width: 0; }
.pg-how-table th, .pg-how-table td { padding: 6px 10px; }

/* Sticky section nav: under the sticky header on wide screens. */
/* The section nav sticks under the workspace header in a full-width bar, as the AI Visibility tabs do. */
.pg-nav-bar { position: sticky; top: var(--shell-top, 56px); z-index: 15; margin: 0 0 20px; padding: 8px 0; background: var(--bg); box-shadow: -32px 0 0 var(--bg), 32px 0 0 var(--bg); }
.pg-nav-bar .view-tabs { margin: 0; }
@media (max-width: 767px) { .pg-nav-bar { box-shadow: -16px 0 0 var(--bg), 16px 0 0 var(--bg); } }
.pg-section { scroll-margin-top: 130px; }
.pg-score-val { font-size: 24px; font-weight: 600; letter-spacing: -.015em; line-height: 30px; }
.pg-score-val small { font-size: 13px; font-weight: 500; color: var(--text-muted); letter-spacing: 0; margin-left: 2px; }
.pg-score-bar { height: 7px; border-radius: 4px; background: var(--bg-input); overflow: hidden; margin: 12px 0 10px; position: relative; }
.pg-score-bar span { display: block; height: 100%; border-radius: 4px; background: var(--accent); }
.pg-score-bar i { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--text-2); }
.pg-url { display: block; margin-top: 6px; font-family: var(--mono); font-size: 12px; color: var(--text-muted); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-url:hover { color: var(--accent); }
.pg-verdict { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; border-radius: 999px; padding: 3px 11px; border: 1px solid var(--border); }
.pg-verdict--content, .pg-verdict--both { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 50%, transparent); background: color-mix(in srgb, var(--warn) 10%, transparent); }
.pg-verdict--links { color: var(--intent-informational); border-color: color-mix(in srgb, var(--intent-informational) 50%, transparent); background: color-mix(in srgb, var(--intent-informational) 10%, transparent); }
.pg-verdict--ahead, .pg-verdict--close { color: var(--accent); border-color: var(--accent-border); background: var(--accent-dim); }
.pg-diag-head { margin: 10px 0 6px; font-size: 15px; font-weight: 600; line-height: 1.35; }
.pg-diag-text { margin: 0 0 10px; font-size: 13px; line-height: 1.55; color: var(--text-2); }
.pg-gaps { display: flex; flex-wrap: wrap; gap: 6px; }
.pg-gap { font-size: 12px; font-variant-numeric: tabular-nums; border-radius: var(--radius-sm); padding: 2px 8px; background: var(--bg-input); border: 1px solid var(--border); }
.pg-gap.is-neg { color: var(--warn); }
.pg-gap.is-pos { color: var(--accent); }

/* ---- tables ---- */
.pg-rubric { min-width: 820px; }
.pg-rubric th, .pg-rubric td, .pg-pages th, .pg-pages td { padding: 10px 12px; white-space: nowrap; vertical-align: middle; }
.pg-rubric th:not(.l), .pg-rubric td:not(.l), .pg-pages th:not(.l), .pg-pages td:not(.l) { width: 1%; }
.pg-rubric .pg-col-note { width: 100%; max-width: 0; white-space: normal; font-family: var(--sans); font-size: 12px; color: var(--text-2); }
.pg-crit { font-family: var(--sans); font-weight: 600; }
.pg-crit small { display: block; font-weight: 500; color: var(--text-muted); font-size: 12px; }
.pg-auto { font-size: 10px; font-weight: 600; color: var(--text-muted); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0 5px; margin-left: 4px; }
.pg-cell-bar { display: inline-flex; align-items: center; gap: 8px; }
.pg-mini { width: 70px; height: 6px; border-radius: 3px; background: var(--bg-input); overflow: hidden; }
.pg-mini span { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.pg-mini.is-low span { background: var(--warn); }
.pg-rubric tr.pg-total td { font-weight: 600; border-top: 1px solid var(--border); background: var(--bg-input); }
.pg-pages .pg-col-page { width: 100%; max-width: 0; white-space: normal; }
.pg-page { display: flex; align-items: center; gap: 10px; min-width: 0; font-family: var(--sans); }
.pg-page .fav, .pg-fav-fallback { width: 20px; height: 20px; border-radius: var(--radius-sm); flex-shrink: 0; }
.pg-fav-fallback { display: inline-flex; align-items: center; justify-content: center; background: var(--bg-input); color: var(--text-muted); font-size: 10px; font-weight: 600; }
.pg-page-text { min-width: 0; flex: 1; }
.pg-page-name { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-page a { display: block; font-family: var(--mono); font-size: 12px; color: var(--text-muted); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-page a:hover { color: var(--accent); }
.cmp tr.is-you td { background: var(--accent-wash); }
.cmp tr.is-you td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.pg-you { font-size: 10px; font-weight: 600; color: var(--accent); background: var(--accent-dim); border-radius: var(--radius-sm); padding: 1px 6px; letter-spacing: .04em; margin-left: 4px; }
.pg-yes { color: var(--accent); }
.pg-no { color: var(--warn); }
.pg-via { font-family: var(--sans); font-size: 12px; color: var(--text-muted); }
.pg-via.is-failed { color: var(--danger); }

/* ---- actions ---- */
.pg-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.pg-action { display: grid; grid-template-columns: 30px 1fr auto; gap: 12px; align-items: start; padding: 13px 15px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-panel); }
.pg-action-n { width: 26px; height: 26px; border-radius: var(--radius-sm); display: grid; place-items: center; font-weight: 600; font-size: 13px; background: var(--bg-input); color: var(--text-2); }
.pg-action-text b { display: block; font-size: 14px; line-height: 1.45; margin-bottom: 3px; }
.pg-action-text span { font-size: 13px; color: var(--text-2); line-height: 1.5; }
.pg-action-meta { margin: 6px 0 0; display: grid; gap: 6px; }
.pg-action-meta div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px; font-size: 13px; line-height: 1.5; }
.pg-action-meta dt { color: var(--text-muted); font-size: 12px; font-weight: 600; padding-top: 1px; }
.pg-action-meta dd { margin: 0; color: var(--text-2); }
@media (max-width: 640px) { .pg-action-meta div { grid-template-columns: 1fr; gap: 0; } }
.pg-action-tags { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.pg-action-facts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pg-tag.pg-tag-effort, .pg-tag.pg-tag-kind, .pg-tag.pg-tag-area { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 500; color: var(--text-2); padding: 1px 8px; white-space: normal; }
.pg-tag.pg-tag-kind.is-edit { color: var(--accent); border-color: var(--accent-border); }
.pg-tag.pg-tag-kind.is-research, .pg-tag.pg-tag-kind.is-input { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.pg-actions-more { justify-self: start; }
.pg-tag { font-size: 12px; font-weight: 600; letter-spacing: 0; border-radius: var(--radius-sm); padding: 1px 7px; border: 1px solid var(--border); color: var(--text-muted); white-space: nowrap; }
.pg-tag.is-high { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 50%, transparent); }
.pg-tag.is-medium { color: var(--intent-informational); border-color: color-mix(in srgb, var(--intent-informational) 45%, transparent); }
@media (max-width: 640px) { .pg-action { grid-template-columns: 26px 1fr; } .pg-action-tags { grid-column: 2; flex-direction: row; flex-wrap: wrap; align-items: center; } }

/* ---- brief ---- */

/* ---- pages compared: score cells + inline detail ---- */
.pg-pages { min-width: 1080px; }
.pg-th-crit small { display: block; font-weight: 500; font-size: 11px; color: var(--text-muted); }
.pg-row { cursor: pointer; }
.pg-row:focus-visible td { outline: none; background: var(--row-hover); }
.pg-row.is-open td { border-bottom-color: transparent; }
.pg-chev { color: var(--text-muted); font-family: var(--sans); }
.pg-heat { text-align: center !important; font-weight: 600; }
.pg-pages tr td.pg-heat--strong { color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, transparent); }
.pg-pages tr td.pg-heat--improve { color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); }
.pg-pages tr td.pg-heat--weak { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.cmp tr.pg-detail-row:hover td { background: transparent; }
.pg-detail-row > td { padding: 4px 16px 18px !important; white-space: normal !important; text-align: left !important; font-family: var(--sans); }
.pg-pd { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px 28px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-input); }
@media (max-width: 900px) { .pg-pd { grid-template-columns: minmax(0, 1fr); } }
.pg-pd h4 { margin: 12px 0 6px; font-size: 12px; letter-spacing: 0; color: var(--text-muted); }
.pg-pd-summary { margin: 0 0 10px; font-size: 14px; line-height: 1.5; color: var(--text); }
.pg-pd-beats { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); }
.pg-beat { font-weight: 600; color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); border-radius: var(--radius-sm); padding: 1px 7px; }
.pg-pd-sg { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 18px; }
.pg-pd-sg ul { margin: 0; padding-left: 18px; display: grid; gap: 3px; font-size: 13px; line-height: 1.45; }
.pg-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; }
.pg-notes li { display: grid; grid-template-columns: 76px 48px 1fr; gap: 8px; align-items: baseline; }
.pg-notes b { font-variant-numeric: tabular-nums; }
.pg-notes span:last-child { color: var(--text-2); line-height: 1.45; }
.pg-pd-title { display: grid; gap: 3px; margin-bottom: 10px; font-size: 13px; }
.pg-pd-title span { color: var(--text-muted); font-size: 12px; }
.pg-checks { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.pg-check { font-size: 12px; font-weight: 600; border-radius: var(--radius-sm); padding: 1px 7px; border: 1px solid var(--border); }
.pg-check.is-ok { color: var(--accent); border-color: var(--accent-border); }
.pg-check.is-miss { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.pg-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px 12px; font-size: 12px; margin-bottom: 4px; }
.pg-facts div { color: var(--text-muted); }
.pg-facts b { display: block; color: var(--text); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-outline-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; font-size: 12px; }
.pg-outline-list li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-2); }
.pg-outline-list .h1 { font-weight: 600; color: var(--text); }
.pg-outline-list .h3 { padding-left: 14px; }
.pg-outline-list .h4 { padding-left: 28px; color: var(--text-muted); }
.pg-more { margin-top: 4px; font-size: 12px; }
.pg-more summary { cursor: pointer; color: var(--accent); }

/* ---- anchor text: type colours, mix bar, chips, full list ---- */
.pg-at--keyword, .pg-at-chip--keyword { --at: var(--accent); }
.pg-at--brand, .pg-at-chip--brand { --at: var(--intent-informational); }
.pg-at--url, .pg-at-chip--url { --at: var(--intent-transactional); }
.pg-at--generic, .pg-at-chip--generic { --at: var(--warn); }
.pg-at--other, .pg-at-chip--other { --at: var(--text-muted); }
.pg-at--empty, .pg-at-chip--empty { --at: var(--border-hover); }
.pg-legend { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; }
.pg-legend span { display: inline-flex; align-items: center; gap: 5px; }
.pg-at { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--at); }
.pg-insight { margin: 0 0 12px; font-size: 13px; color: var(--text-2); line-height: 1.5; }
.pg-insight b { color: var(--text); }
.pg-anchors { min-width: 980px; }
.pg-anchors th, .pg-anchors td { padding: 10px 12px; white-space: nowrap; vertical-align: middle; }
.pg-anchors th:not(.l), .pg-anchors td:not(.l) { width: 1%; }
.pg-anchors .pg-col-page { width: 24%; max-width: 0; white-space: normal; }
.pg-col-mix { width: 22%; min-width: 160px; }
.pg-mix { display: flex; gap: 1px; height: 12px; border-radius: 3px; overflow: hidden; background: var(--bg-input); }
.pg-mix span { display: block; height: 100%; background: var(--at); }
.pg-col-top { white-space: normal !important; }
.pg-anchor-chip, .pg-at-pill { display: inline-block; max-width: 100%; font-family: var(--sans); font-size: 12px; font-weight: 600; color: var(--text); border: 1px solid color-mix(in srgb, var(--at) 55%, transparent); background: color-mix(in srgb, var(--at) 12%, transparent); border-radius: var(--radius-sm); padding: 1px 7px; margin: 2px 4px 2px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.pg-at-pill { font-size: 11px; margin: 0; justify-self: start; }
.pg-anchor-list { list-style: none; margin: 0; padding: 12px 14px; display: block; columns: 2; column-gap: 28px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-input); }
@media (max-width: 900px) { .pg-anchor-list { columns: 1; } }
.pg-anchor-list li { margin-bottom: 5px; display: grid; grid-template-columns: minmax(0, 1fr) 96px 90px 44px; gap: 8px; align-items: center; font-size: 12px; break-inside: avoid; }
.pg-anchor-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.pg-anchor-bar { height: 6px; border-radius: 3px; background: var(--bg-panel); overflow: hidden; }
.pg-anchor-bar span { display: block; height: 100%; background: var(--text-muted); }
.pg-anchor-n { font-variant-numeric: tabular-nums; font-size: 12px; text-align: right; color: var(--text-2); }

@media (max-width: 640px) {
  .pg-head { flex-wrap: wrap; }
  .head-right { flex-wrap: wrap; gap: 10px 14px; flex-shrink: 1; min-width: 0; max-width: 100%; }
}

/* Small screens: the tables scroll sideways, so an open detail stays pinned to the visible width. */
@media (max-width: 900px) {
  .pg-detail-row .pg-pd, .pg-detail-row .pg-anchor-list { position: sticky; left: 0; width: calc(100vw - 72px); box-sizing: border-box; }
  .pg-detail-row > td { padding: 4px 8px 14px !important; }
}

/* ---- score bands: one scale everywhere (Strong 80%+, Needs work 50-79%, Weak <50%) ---- */
.pg-band--strong { --band: var(--accent); }
.pg-band--improve { --band: var(--warn); }
.pg-band--weak { --band: var(--danger); }
.pg-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--band, var(--pg-intent, var(--site))); }
.pg-band-legend small { color: var(--text-muted); font-size: 11px; }
/* Bar, score, out-of and band tag in fixed columns so every row lines up. */
.pg-cell-bar { display: inline-grid; grid-template-columns: 72px 34px 30px 84px; align-items: center; column-gap: 6px; }
.pg-cell-bar b { text-align: right; }
.pg-cell-bar .pg-band-tag { justify-self: start; }
.pg-cell-bar .pg-mini span { background: var(--band); }
.pg-cell-bar b { color: var(--band); font-variant-numeric: tabular-nums; }
.pg-cell-bar small { color: var(--text-muted); font-size: 11px; margin-left: -4px; text-align: left; }
.pg-band-tag { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .03em; color: var(--band); border: 1px solid color-mix(in srgb, var(--band) 45%, transparent); border-radius: var(--radius-sm); padding: 0 6px; }
.pg-delta { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-muted); }
.pg-delta.is-up { color: var(--accent); }
.pg-delta.is-down { color: var(--danger); }
.pg-section-head .pg-legend { margin-left: auto; }

/* ---- the SERP: intent and who ranks ---- */
.pg-serp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 16px 28px; margin: 4px 0; }
@media (max-width: 900px) { .pg-serp-grid { grid-template-columns: minmax(0, 1fr); } }
.pg-serp-block .panel-lbl { margin-bottom: 7px; }
.pg-stack { display: flex; gap: 2px; height: 12px; border-radius: 4px; overflow: hidden; background: var(--bg-input); }
.pg-stack span { display: block; height: 100%; background: var(--pg-intent, var(--site)); }
.pg-stack-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: 12px; color: var(--text-2); }
.pg-stack-legend span { display: inline-flex; align-items: center; gap: 5px; }
.pg-stack-legend span.is-primary { color: var(--text); font-weight: 600; }
.pg-site--social { --site: #e5609b; }
.pg-site--news { --site: var(--intent-informational); }
.pg-site--brand { --site: var(--accent); }
.pg-site--review { --site: var(--intent-transactional); }
.pg-site--other { --site: var(--text-muted); }
:root[data-theme="light"] .pg-site--social { --site: #c02c74; }
.pg-site-groups { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
@media (max-width: 640px) { .pg-site-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pg-site-head { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); margin-bottom: 4px; }
.pg-site-head b { color: var(--text); }
.pg-site-list { display: grid; gap: 2px; font-size: 12px; color: var(--text-2); }
.pg-site-list span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-site-tag { font-size: 10px; font-weight: 600; color: var(--site); border: 1px solid color-mix(in srgb, var(--site) 45%, transparent); border-radius: var(--radius-sm); padding: 0 5px; margin-left: 4px; white-space: nowrap; }

.pg-score-val { color: var(--band, var(--text)); }
.pg-score-val .pg-band-tag { font-size: 11px; vertical-align: middle; letter-spacing: .03em; }
.pg-score-bar span { background: var(--band, var(--accent)); }

/* Scorecard factors: each criterion opens into the factors that make up its score. */
.pg-factors-all { margin-left: auto; font-size: 12px; }
.pg-rubric-intro { margin-top: -4px; }
.pg-rubric-intro a { color: var(--accent); }
.pg-crit-toggle { display: inline-flex; align-items: flex-start; gap: 8px; background: none; border: 0; padding: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.pg-crit-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.pg-crit-toggle .pg-chev { color: var(--text-muted); width: 10px; padding-top: 1px; }
.pg-rubric tr.pg-crit-row.is-open td { border-bottom-color: transparent; }
.pg-rubric tr.pg-factor-row td { padding-top: 6px; padding-bottom: 6px; background: var(--bg-panel-2); font-size: 12px; }
.pg-rubric tr.pg-factor-row td:first-child { padding-left: 34px; }
.pg-factor { font-family: var(--sans); color: var(--text-2); white-space: normal; display: inline-block; max-width: 340px; }
.pg-google { display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: .04em; color: var(--accent); border: 1px solid var(--accent-border); background: var(--accent-dim); border-radius: var(--radius-sm); padding: 0 5px; margin-left: 6px; vertical-align: 1px; }
.pg-fpill { display: inline-block; min-width: 52px; text-align: center; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 2px 9px; border: 1px solid transparent; }
.pg-fpill.is-yes { color: var(--accent); background: var(--accent-dim); border-color: var(--accent-border); }
.pg-fpill.is-partly { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: color-mix(in srgb, var(--warn) 12%, transparent); }
.pg-fpill.is-no { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.pg-fpill.is-na { color: var(--text-muted); }
.pg-rubric td.pg-factor-meet { text-align: left; color: var(--text-muted); font-family: var(--sans); font-size: 12px; }
.pg-meet { display: inline-block; width: 46px; height: 6px; border-radius: 3px; background: var(--border-hover); overflow: hidden; margin-right: 8px; vertical-align: 1px; }
.pg-meet > span { display: block; height: 100%; background: var(--text-muted); }

/* Content gap: the sections to add, each with where it goes and who covers it. */
.pg-cgap-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-family: var(--sans); }
.pg-cgap-item { display: grid; grid-template-columns: 52px minmax(0, 1fr) minmax(160px, 260px); gap: 12px; align-items: start; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); }
.pg-cgap-lvl { font-family: var(--sans); font-size: 11px; font-weight: 600; color: var(--accent); padding-top: 2px; }
.pg-cgap-body { display: grid; gap: 4px; min-width: 0; }
.pg-cgap-body b { font-size: 14px; color: var(--text); }
.pg-cgap-body span { font-size: 13px; color: var(--text-2); line-height: 1.45; }
.pg-cgap-body small { font-size: 12px; color: var(--text-muted); }
.pg-cgap-who { display: grid; gap: 5px; justify-items: start; min-width: 0; }
.pg-cgap-count { font-size: 12px; font-weight: 600; color: var(--text); }
.pg-cgap-sites { display: flex; flex-wrap: wrap; gap: 4px; }
.pg-cgap-sites span { font-size: 11px; color: var(--text-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1px 6px; overflow-wrap: anywhere; }
@media (max-width: 760px) { .pg-cgap-item { grid-template-columns: 44px minmax(0, 1fr); } .pg-cgap-who { grid-column: 2; } }

/* SERP features: chips that open a short summary. */
.pg-feat-chips { margin-bottom: 0; }
.pg-feat-chip { cursor: pointer; font: inherit; font-size: 12px; color: var(--text-2); }
.pg-feat-chip:hover { border-color: var(--border-hover); color: var(--text); }
.pg-feat-chip.is-open { border-color: var(--accent); background: var(--accent-dim); color: var(--text); }
.pg-feat-chip.is-mine b { color: var(--accent); }
.pg-feat-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pg-feat-detail { margin-top: 10px; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 14px; font-size: 13px; }
.pg-feat-head { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin-bottom: 6px; }
.pg-feat-head span { color: var(--text-muted); font-size: 12px; }
.pg-feat-detail ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; color: var(--text-2); line-height: 1.45; }
.pg-feat-detail li small { color: var(--text-muted); }
.pg-feat-detail li.is-mine { color: var(--accent); }
.pg-feat-detail a { color: inherit; }

.pg-unread { display: block; margin-top: 3px; font-size: 12px; color: var(--warn); white-space: normal; font-family: var(--sans); }
.pg-feat-icon { width: 13px; height: 13px; vertical-align: -2px; margin-right: 5px; color: var(--accent); }

/* ---- scorecard: facts vs judgments, passed checks ---- */
.pg-kind { display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: .06em; border-radius: var(--radius-sm); padding: 0 5px; margin-right: 7px; border: 1px solid var(--border); vertical-align: 1px; }
.pg-kind.is-fact { color: var(--text-2); }
.pg-kind.is-judgment { color: var(--intent-transactional); border-color: color-mix(in srgb, var(--intent-transactional) 45%, transparent); }
.pg-passed-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); cursor: pointer; }
.pg-passed-toggle input { accent-color: var(--accent); }
.pg-passed-row td { color: var(--text-muted); font-size: 12px; }

/* ---- content gap groups ---- */
.pg-cgap-note { margin: 0 0 12px; font-size: 13px; color: var(--text-2); }
.pg-cgap-group + .pg-cgap-group { margin-top: 16px; }
.pg-cgap-group h3 { margin: 0 0 8px; font-size: 13px; font-weight: 600; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.pg-cgap-group h3 small { font-weight: 400; color: var(--text-muted); font-size: 12px; }
.pg-need--essential h3 { color: var(--warn); }
.pg-need--essential .pg-cgap-item { border-color: color-mix(in srgb, var(--warn) 40%, var(--border)); }
.pg-need--optional .pg-cgap-item { border-style: dashed; }
.pg-cgap-body em { font-style: normal; color: var(--text-muted); }

/* ---- competitors: unread rows and the side panel ---- */
.pg-row.is-unread td { opacity: .55; }
.pg-row.is-unread:hover td, .pg-row.is-unread.is-open td { opacity: .85; }
.pg-row.is-open td { background: var(--row-hover); }
.pg-drawer { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(620px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; padding: 0; border: 0; border-left: 1px solid var(--border); background: var(--bg-panel); color: var(--text); display: none; flex-direction: column; box-shadow: -12px 0 40px rgba(0, 0, 0, .3); }
.pg-drawer[open] { display: flex; }
.pg-drawer::backdrop { background: rgba(0, 0, 0, .35); }
.pg-drawer-head { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px 12px; border-bottom: 1px solid var(--border); }
.pg-drawer-title { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 14px; }
.pg-drawer-title .pg-url { flex-basis: 100%; margin-top: 2px; }
.pg-drawer-rank { font-weight: 600; color: var(--text-muted); }
.pg-drawer-host { font-weight: 600; }
.pg-drawer-score { font-weight: 600; font-variant-numeric: tabular-nums; border-radius: var(--radius-sm); padding: 1px 7px; }
.pg-drawer-score.pg-heat--strong { color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, transparent); }
.pg-drawer-score.pg-heat--improve { color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); }
.pg-drawer-score.pg-heat--weak { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.pg-drawer-nav { display: flex; gap: 6px; flex: none; }
.pg-drawer-body { flex: 1; overflow-y: auto; padding: 16px 18px 24px; }
.pg-drawer .pg-pd { grid-template-columns: minmax(0, 1fr); border: 0; padding: 0; background: transparent; }

/* ---- short method notes, and the page-type filter ---- */
.pg-method { margin: -4px 0 12px; font-size: 12px; color: var(--text-muted); line-height: 1.5; }
.pg-method a { color: var(--text-2); }
.pg-type-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.pg-type-chip { font: inherit; font-size: 12.5px; color: var(--text-2); background: transparent; border: 1px solid var(--border); border-radius: 999px; padding: 3px 11px; cursor: pointer; }
.pg-type-chip small { color: var(--text-muted); margin-left: 2px; }
.pg-type-chip:hover { border-color: var(--border-hover); color: var(--text); }
.pg-type-chip.is-on { border-color: var(--accent-border); background: var(--accent-dim); color: var(--text); }

/* ---- compare with (benchmark by page type) ---- */
.pg-compare { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pg-compare-lbl { font-size: 12px; font-weight: 600; color: var(--text-muted); margin-right: 4px; }
.pg-type-chip em { font-style: normal; font-size: 11px; color: var(--accent); margin-left: 2px; }
.pg-type-chip:disabled { opacity: .5; cursor: not-allowed; }

/* Compare with: a segmented control, like the other report switches. */
.pg-compare .seg .pg-type-chip { border: 0; border-radius: 4px; background: transparent; box-shadow: none; padding: 0 12px; min-height: 30px; color: var(--text-muted); }
.pg-compare .seg .pg-type-chip.on { background: var(--bg-panel); color: var(--text); box-shadow: 0 0 0 1px var(--border); }
.pg-compare .seg .pg-type-chip small { color: var(--text-muted); margin-left: 2px; }
.pg-google, .pg-kind, .pg-tag { letter-spacing: 0; text-transform: none; font-size: 11px; }
/* Overview scores as one strip: your page, the benchmark, and the gap between them. */
.pg-score-cards.strip { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.pg-score-cards.strip > .card { padding: 16px 20px; }
.pg-score-val.is-neg { color: var(--danger); }
.pg-score-val.is-pos { color: var(--accent); }
.pg-score-val small { margin-left: 3px; }