/* static/performance-seo/seo.css · ROADMAP 5.9 (D-230) — Performance → SEO.
 *
 * Two parts:
 *   1. The Concreet skin, scoped to `.pf-seo` (decision C.6, Alex 2026-10-05:
 *      "Beim Design mehr an dem Design für unsere gerade neu gebaute
 *      Assessment section orientieren"). The same token values as the
 *      Assessment v2 skin (static/assessment-v2/av2.css, design-system §7.15),
 *      redefined on the SEO section's wrapper only. Custom properties cascade
 *      to descendants, so nothing outside `.pf-seo` can change. The token
 *      block is the only place in this file a colour literal may appear.
 *   2. The Overview's components (`.pfo-*`, Car B.2), built on the tokens.
 *
 * Adopted board: docs/design/mocks/2026-10-05-search-visibility-board.html.
 */

/* pf-seo-skin-tokens:start */
.pf-seo {
  --sans: "Archivo", "Arial Narrow", Arial, sans-serif;
  --serif: "Archivo", "Arial Narrow", Arial, sans-serif;
  --paper-0: #FFFFFF; --paper-1: #F1F0EC; --paper-2: #E6E4DE; --paper-3: #C9C6BE; --paper-4: #B3B0A8;
  --ink-0: #0D0D0B; --ink-1: #2E2D2A; --ink-2: #3A3935; --ink-3: #65635D; --ink-4: #6E6C66; --ink-5: #8F8D86;
  --accent: #0D0D0B;
  --concreet: #17B26F; --concreet-deep: #0B7A4A; --concreet-ink: #0B7A4A; --concreet-soft: #DDF3E8;
  --good: #0B7A4A; --good-soft: #DDF3E8; --kpi-tint: #FFFFFF;
  --pf-slab-shadow: 6px 6px 0 var(--paper-3);
  --pf-slab-shadow-hover: 8px 8px 0 var(--paper-4);
  --radius: 0; --r-card: 0; --r-sm: 0; --r-chip: 0; --r-badge: 0;
  font-family: var(--sans);
}
/* pf-seo-skin-tokens:end */

/* ── page heading (C.7 · the Assessment v2 DA1 exception, scoped) ─────── */
.pf-seo .pfo-vh { margin: var(--sp-5) 0 var(--sp-4); }
.pf-seo .pfo-vh h1 {
  margin: 0; font-family: var(--sans); font-weight: 800; text-transform: uppercase;
  letter-spacing: -.01em; font-size: 30px; line-height: 1.1; color: var(--ink-0);
}
.pf-seo .pfo-vh p { margin: var(--sp-1) 0 0; max-width: 80ch; color: var(--ink-3); font-size: var(--fs-body); }
@media (max-width: 640px) { .pf-seo .pfo-vh h1 { font-size: 22px; overflow-wrap: anywhere; } }

/* ── labels: uppercase, letter-spaced (§7.15 rule 3) ───────────────────── */
.pf-seo .pfo-pt, .pf-seo .pfo-k, .pf-seo .gsc-table th {
  font-family: var(--sans); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; font-size: var(--fs-meta);
}

/* ── KPI pillars: clickable (they switch the chart), so they carry the offset
      shadow — §7.15 rule 2: a shadow only on what you can click ─────────── */
.pfo-pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); margin: var(--sp-4) 0 var(--sp-5); }
@media (max-width: 900px) { .pfo-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pfo-pillar {
  display: flex; flex-direction: column; gap: var(--sp-2); text-align: left; cursor: pointer; min-width: 0;
  padding: var(--sp-4) var(--sp-5); background: var(--paper-0); color: var(--ink-0);
  border: 1px solid var(--ink-0); border-radius: 0; box-shadow: var(--pf-slab-shadow); font: inherit;
}
.pfo-pillar:hover { box-shadow: var(--pf-slab-shadow-hover); }
.pfo-pillar:focus-visible { outline: none; box-shadow: var(--pf-slab-shadow), var(--focus-ring); }
.pfo-pillar.on { box-shadow: inset 0 0 0 1px var(--ink-0), var(--pf-slab-shadow); }
.pfo-k { color: var(--ink-3); }
.pfo-v { font-size: 30px; line-height: 1.05; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pfo-s { font-size: var(--fs-body-s); color: var(--ink-2); }
.pfo-up { color: var(--good); } .pfo-dn { color: var(--bad); } .pfo-fl { color: var(--ink-3); }

/* ── basis mark (the Assessment's `● gemessen`) ────────────────────────── */
.pfo-basis {
  display: inline-flex; align-items: center; gap: var(--sp-1); font-family: var(--mono); font-size: var(--fs-micro);
  text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3);
}
.pfo-basis i { width: 6px; height: 6px; border-radius: 50%; display: block; background: var(--ink-1); }
.pfo-basis.e i { background: var(--amber); }

/* ── flat panels (§7.3 flat tier, squared by the skin; no shadow) ──────── */
.pfo-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); margin-bottom: var(--sp-6); }
@media (max-width: 900px) { .pfo-cols { grid-template-columns: 1fr; } }
.pfo-panel {
  background: var(--paper-0); border: 1px solid var(--paper-3); border-radius: 0; padding: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; margin-bottom: var(--sp-6);
}
.pfo-cols .pfo-panel { margin-bottom: 0; }
.pfo-ph { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; min-height: 30px; }
.pfo-ps { font-family: var(--mono); font-size: var(--fs-meta); color: var(--ink-3); }
.pfo-pf {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin-top: auto;
  padding-top: var(--sp-3); border-top: 1px solid var(--paper-2); font-family: var(--mono); font-size: var(--fs-meta); color: var(--ink-3);
}
.pfo-err { color: var(--bad); font-size: var(--fs-body-s); }

/* ── list switch: the baseline's segmented control, ink active (§7.5) ──── */
.pfo-seg { display: inline-flex; border: 1px solid var(--paper-4); overflow: hidden; }
.pfo-seg button {
  height: var(--nav-fil-h); padding: 0 var(--sp-3); border: 0; border-right: 1px solid var(--paper-4);
  background: var(--paper-0); color: var(--ink-2); font: inherit; font-size: var(--fs-body-s); cursor: pointer;
}
.pfo-seg button:last-child { border-right: 0; }
.pfo-seg button.on { background: var(--ink-0); color: var(--paper-0); }
.pfo-seg button:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ── list rows: name · bar · value · change ─────────────────────────────── */
.pfo-rows { display: flex; flex-direction: column; }
.pfo-r {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(48px, 110px) 56px 60px; gap: var(--sp-3);
  align-items: center; padding: 7px 0; border-bottom: 1px solid var(--paper-2); font-size: var(--fs-body-s);
}
.pfo-r:last-child { border-bottom: 0; }
.pfo-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-1); }
.pfo-tag { margin-left: var(--sp-1); font-family: var(--mono); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.pfo-bar { height: 6px; background: var(--paper-2); border-radius: var(--r-pill); overflow: hidden; }
.pfo-bar i { display: block; height: 100%; background: var(--ink-1); border-radius: var(--r-pill); }
.pfo-val { font-family: var(--mono); font-size: var(--fs-meta); text-align: right; color: var(--ink-0); font-variant-numeric: tabular-nums; }
.pfo-dl { font-family: var(--mono); font-size: var(--fs-micro); text-align: right; }
.pfo-empty { color: var(--ink-3); font-size: var(--fs-body-s); padding: var(--sp-3) 0; }
@media (max-width: 600px) { .pfo-r { grid-template-columns: minmax(0, 1fr) 48px 52px; } .pfo-r .pfo-bar { display: none; } }

/* ── chart (§7.13 geometry: 150px SVG, three gridlines, a baseline) ─────── */
.pfo-chart { width: 100%; height: 150px; display: block; }
.pfo-chart .g { stroke: var(--paper-2); stroke-width: 1; }
.pfo-chart .b { stroke: var(--paper-3); stroke-width: 1; }
.pfo-chart .cur { fill: none; stroke: var(--ink-0); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.pfo-chart .area { fill: var(--paper-2); stroke: none; }
.pfo-chart .pri { fill: none; stroke: var(--ink-4); stroke-width: 1.5; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.pfo-x { display: flex; justify-content: space-between; font-family: var(--mono); font-size: var(--fs-micro); color: var(--ink-4); padding-top: 2px; }
.pfo-keys { display: flex; flex-wrap: wrap; gap: var(--sp-4); font-size: var(--fs-body-s); color: var(--ink-2); }
.pfo-keys span { display: inline-flex; align-items: center; gap: var(--sp-2); }
.pfo-keys u { width: 14px; height: 2px; display: block; background: var(--ink-0); text-decoration: none; }
.pfo-keys u.pri { background: var(--ink-4); }

/* ── square controls inside the skin ────────────────────────────────────
   app.html's "Inputs everywhere — final sweep" rule (≈ 0-9-1) beats any class
   selector, so the field rules carry the panel id (1-x-x) — the same fix the
   Assessment v2 skin needed (design-system §7.15, 7.190 N11). */
.pf-seo .date-range-picker, .pf-seo .analytics-exclude-filter, .pf-seo .analytics-minimp,
.pf-seo .analytics-lang-filter, .pf-seo .analytics-toggle, .pf-seo .analytics-toggle button,
.pf-seo .analytics-export-btn, .pf-seo .analytics-subtab { border-radius: 0; }
#panel-analytics .pf-seo .analytics-toolbar input,
#panel-analytics .pf-seo .analytics-toolbar select { border-radius: 0; background: var(--paper-0); }
.pf-seo .btn { text-transform: uppercase; letter-spacing: .06em; font-weight: 700; font-size: var(--fs-meta); border-radius: 0; }

/* ── 5.9 B.3 · branded split panel ─────────────────────────────────────── */
.pfo-big { display: flex; gap: var(--sp-6); flex-wrap: wrap; }
.pfo-big .pfo-k { display: block; }
.pfo-v-s { font-size: 24px; }
.pfo-bars .bb { fill: var(--paper-4); }
.pfo-bars .bn { fill: var(--ink-1); }
.pfo-keys u.bb { background: var(--paper-4); }
.pfo-note { margin: 0; font-size: var(--fs-body-s); color: var(--ink-3); background: var(--paper-1); padding: var(--sp-2) var(--sp-3); }

/* ── 5.9 B.3 · the Brand terms drawer (§7.4: scrim + blur, drawer layer,
      no radius on the attached edge — the skin squares every corner) ───── */
.pfo-scrim { position: fixed; inset: 0; background: var(--scrim); backdrop-filter: blur(4px); z-index: var(--z-drawer); }
.pfo-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 440px; max-width: 100%; z-index: var(--z-drawer);
  background: var(--paper-0); box-shadow: var(--shadow-2); padding: var(--sp-6);
  display: flex; flex-direction: column; gap: var(--sp-4); overflow-y: auto;
}
.pfo-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.pfo-chip {
  display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--nav-fil-h); padding: 0 var(--sp-3);
  border: 1px solid var(--paper-4); background: var(--paper-0); color: var(--ink-1); font: inherit; font-size: var(--fs-body-s);
}
.pfo-chip:is(button) { cursor: pointer; }
.pfo-chip-off { color: var(--ink-3); border-style: dashed; }
.pfo-chip-x { display: inline-grid; place-items: center; border: 0; background: transparent; color: var(--ink-3); cursor: pointer; padding: 0; }
.pfo-chip-x:focus-visible, .pfo-chip:is(button):focus-visible { outline: none; box-shadow: var(--focus-ring); }
.pfo-addrow { display: flex; gap: var(--sp-2); }
#panel-analytics .pf-seo input.pfo-inp {
  flex: 1; min-width: 0; height: var(--ctl-h); padding: 0 var(--sp-3); border: 1px solid var(--paper-4);
  border-radius: 0; background: var(--paper-0); color: var(--ink-0); font: inherit; font-size: var(--fs-body);
}
#panel-analytics .pf-seo input.pfo-inp::placeholder { color: var(--ink-4); }
.pfo-drawer-end { margin-top: auto; display: flex; justify-content: flex-end; gap: var(--sp-2); }
/* §7.15 rule 1 · the green primary with ink text, scoped to this section */
.pf-seo .btn.btn-primary { background: var(--concreet); border-color: var(--concreet); color: var(--ink-0); }
.pf-seo .btn.btn-primary:disabled { opacity: .55; cursor: not-allowed; }
.pf-seo .analytics-bt-btn {
  height: var(--nav-fil-h); display: inline-flex; align-items: center; gap: var(--sp-2); padding: 0 var(--sp-3);
  border: 1px solid var(--paper-4); background: var(--paper-0); color: var(--ink-0); cursor: pointer;
  font-family: var(--sans); font-size: var(--fs-meta); font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
}
.pf-seo .analytics-bt-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* §10b · a fixed overlay reserves its own space: the operator bar would sit
   on the drawer's Save row. */
.pfo-drawer:is(body.op-bar-on *) { bottom: var(--op-bar-h); }

/* ── 5.9 B.4 · Query counting lines, the country code chip ──────────────
   §7.13's ink ramp — never --bad or --amber, which mean error and gap. */
.pfo-lines polyline { fill: none; stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.pfo-lines .s1 { stroke: var(--ink-0); } .pfo-lines .s2 { stroke: var(--ink-3); }
.pfo-lines .s3 { stroke: var(--paper-5); } .pfo-lines .s4 { stroke: var(--ink-4); stroke-dasharray: 2 3; }
.pfo-keys u.s1 { background: var(--ink-0); } .pfo-keys u.s2 { background: var(--ink-3); }
.pfo-keys u.s3 { background: var(--paper-5); } .pfo-keys u.s4 { background: repeating-linear-gradient(90deg, var(--ink-4) 0 2px, transparent 2px 5px); }
.pfo-keys b { color: var(--ink-0); font-variant-numeric: tabular-nums; }
.pfo-cc {
  display: inline-block; min-width: 34px; margin-right: var(--sp-2); padding: 1px var(--sp-1); text-align: center;
  font-family: var(--mono); font-size: var(--fs-micro); color: var(--ink-2); background: var(--paper-2);
}

/* ── 5.9 B.5 · New rankings table (squared §7.3 table idiom) ───────────── */
.pfo-tw { overflow-x: auto; }
.pfo-tbl { border-collapse: collapse; width: 100%; font-size: var(--fs-body-s); }
.pfo-tbl th {
  font-family: var(--sans); font-size: var(--fs-meta); font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-3); text-align: left; padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--paper-3); white-space: nowrap;
}
.pfo-tbl td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--paper-2); color: var(--ink-1); }
.pfo-tbl tr:last-child td { border-bottom: 0; }
.pfo-tbl .pfo-num { text-align: right; font-family: var(--mono); font-size: var(--fs-meta); font-variant-numeric: tabular-nums; width: 110px; }
.pfo-tbl .pfo-idx { width: 34px; font-family: var(--mono); font-size: var(--fs-meta); color: var(--ink-4); }
.pfo-tbl .pfo-key { font-weight: 600; color: var(--ink-0); overflow-wrap: anywhere; }
@media (max-width: 600px) { .pfo-tbl .pfo-num { width: auto; } .pfo-tbl th:nth-child(4), .pfo-tbl td:nth-child(4) { display: none; } }
/* the right half of a panel head wraps on a phone instead of leaving the panel (judge B5.5) */
.pfo-ph-r { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; justify-content: flex-end; min-width: 0; }

/* ── 5.9 B.6 · Striking distance (board view "Striking distance", T.15) ──
   The view's scope line under the lede; the band switch's count; the table's
   best-page and next-step cells. All on the tokens, no new colour. */
.pf-seo .pfo-vh .pfo-scope { display: block; margin-top: var(--sp-2); font-family: var(--mono); font-size: var(--fs-meta); color: var(--ink-3); }
.pfo-mini { font-family: var(--mono); font-size: var(--fs-micro); color: var(--ink-3); letter-spacing: .04em; }
.pfo-seg button.on .pfo-mini { color: var(--paper-2); }
.pfo-tbl .pfo-pg { min-width: 0; overflow-wrap: anywhere; font-family: var(--mono); font-size: var(--fs-meta); }
.pfo-tbl .pfo-pg a { color: var(--ink-1); text-decoration: none; }
.pfo-tbl .pfo-pg a:hover { text-decoration: underline; }
.pfo-tbl .pfo-act { white-space: nowrap; width: 1%; }
.pfo-added { display: inline-flex; align-items: center; gap: var(--sp-1); font-family: var(--mono); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .06em; color: var(--good); }
/* Below 600px each row is a card: the query as its title, then label : value
   pairs (labels are real `.pfo-stk-l` elements copied from the <thead> by
   _seoStackTables), the next step full width at the bottom. No sideways scroll. */
.pfo-stk-l { display: none; }
@media (max-width: 600px) {
  .pfo-seg.pfo-seg-n { flex-wrap: wrap; }
  .pfo-tbl.pfo-stk, .pfo-tbl.pfo-stk tbody { display: block; width: 100%; }
  .pfo-tbl.pfo-stk tr:first-child:has(th) { display: none; }
  .pfo-tbl.pfo-stk tr { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-3) 0; border-bottom: 1px solid var(--paper-3); }
  .pfo-tbl.pfo-stk tr:last-child { border-bottom: 0; }
  .pfo-tbl.pfo-stk td:nth-child(n) { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); padding: 0; border: 0; width: auto; text-align: right; min-width: 0; }
  .pfo-tbl.pfo-stk td.pfo-idx { display: none; }
  .pfo-tbl.pfo-stk td.pfo-key { display: block; text-align: left; font-size: var(--fs-body); }
  .pfo-tbl.pfo-stk td.pfo-pg { overflow-wrap: anywhere; }
  .pfo-tbl.pfo-stk .pfo-stk-l {
    display: block; flex: none; text-align: left; font-family: var(--sans); font-size: var(--fs-micro); font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3);
  }
  .pfo-tbl.pfo-stk td.pfo-act { display: block; width: 100%; margin-top: var(--sp-2); white-space: normal; }
  .pfo-tbl.pfo-stk td.pfo-act .btn { width: 100%; justify-content: center; }
  .pfo-tbl.pfo-stk td.pfo-act .pfo-added { width: 100%; justify-content: center; }
}
/* 5.9 B.6 · the best page's own position beside it, small and muted, so the
   query's position is never read as the page's (judge B6.4) */
.pfo-tbl .pfo-ppos { color: var(--ink-4); font-size: var(--fs-micro); white-space: nowrap; }

/* ── 5.9 B.7 · Cannibalization (board view "Cannibalization", T.16) ──
   One line per competing page inside the table's pages cell: the path, its
   impression share as a .pfo-bar, its position and its clicks. On the tokens,
   no new colour. On a phone the pages cell sits under its label at full width. */
.pfo-tbl.pfo-can td { vertical-align: top; }
.pfo-tbl .pfo-cmp { min-width: 0; width: 46%; }
.pfo-cpg { display: grid; grid-template-columns: minmax(0, 1fr) 64px 40px 48px 64px; align-items: center; gap: var(--sp-2); padding: 2px 0; }
.pfo-cpg a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: var(--fs-meta); color: var(--ink-1); text-decoration: none; }
.pfo-cpg a:hover { text-decoration: underline; }
.pfo-cpg-n { font-family: var(--mono); font-size: var(--fs-micro); color: var(--ink-3); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) {
  .pfo-tbl.pfo-stk td.pfo-cmp { display: block; width: 100%; text-align: left; }
  .pfo-tbl.pfo-stk td.pfo-cmp .pfo-stk-l { margin-bottom: var(--sp-1); }
  /* the path takes its own line; bar, share, position and clicks sit under it */
  .pfo-cpg { grid-template-columns: minmax(0, 1fr) 36px 44px 60px; row-gap: 2px; padding: 4px 0; }
  .pfo-cpg a { grid-column: 1 / -1; white-space: normal; overflow-wrap: anywhere; }
}

/* ── 5.9 B.8 · Decay map (board view "Decay", T.17) ──
   Page × month heat map. A cell is shaded by its clicks as a share of the
   page's own best month (--f, set per cell, 0–85 %): the board's ink scale,
   --ink-1 mixed into --paper-1, tokens only. The best month carries an ink
   ring. The loss vs that month is an --amber pill (an actionable gap, §7.13).
   A month grid has no card form: on a phone it scrolls inside .pfo-hmw with
   the page column sticky, and the page itself never scrolls sideways. */
.pfo-hmw { overflow-x: auto; max-width: 100%; }
.pfo-tbl.pfo-hm { border-collapse: separate; border-spacing: 2px; width: auto; min-width: 100%; }
.pfo-tbl.pfo-hm th, .pfo-tbl.pfo-hm td { border-bottom: 0; }
.pfo-tbl.pfo-hm th.pfo-hm-m { padding: 0 0 var(--sp-1); text-align: center; font-size: var(--fs-micro); letter-spacing: .02em; }
.pfo-tbl.pfo-hm td.pfo-hc {
  min-width: 40px; height: 26px; padding: 0 var(--sp-1); text-align: center; font-family: var(--mono); font-size: var(--fs-micro);
  font-variant-numeric: tabular-nums; color: var(--ink-0); background: color-mix(in srgb, var(--ink-1) var(--f, 0%), var(--paper-1));
}
.pfo-tbl.pfo-hm td.pfo-hc.hi { color: var(--paper-0); }
.pfo-tbl.pfo-hm td.pfo-hc.pk { box-shadow: inset 0 0 0 2px var(--ink-0); }
/* judge B8.3 · the text switch sits where both sides clear 4.5:1 (app.html
   SEO_HM_DARK_MAX / SEO_HM_LIGHT_MIN; tests/test_5_9_seo_skin.py computes it) */
/* judge B8.6 · a month Search Console no longer holds enough of: hatched, no value */
.pfo-tbl.pfo-hm td.pfo-hc.na { background: repeating-linear-gradient(135deg, var(--paper-1) 0 4px, var(--paper-2) 4px 8px); }
.pfo-tbl.pfo-hm th.pfo-hm-m.na { color: var(--ink-4); }
/* judge B8.5 · no click in the recent months: said in words, muted, not as -100 % */
.pfo-gap.z { color: var(--ink-3); background: var(--paper-2); white-space: normal; text-align: left; }
.pfo-dec-elsewhere { margin-top: var(--sp-3); }
.pfo-tbl.pfo-hm .pfo-hp { position: sticky; left: 0; z-index: 1; background: var(--paper-0); max-width: 260px; padding: 0 var(--sp-3) 0 0; text-align: left; }
.pfo-tbl.pfo-hm .pfo-hp a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: var(--fs-meta); color: var(--ink-1); text-decoration: none; }
.pfo-tbl.pfo-hm .pfo-hp a:hover { text-decoration: underline; }
.pfo-tbl.pfo-hm td.pfo-hl { padding: 0 0 0 var(--sp-3); white-space: nowrap; }
.pfo-tbl.pfo-hm td.pfo-act { padding: 0 0 0 var(--sp-2); }
.pfo-gap {
  display: inline-block; min-width: 52px; padding: 2px var(--sp-2); text-align: center; font-family: var(--mono); font-size: var(--fs-meta);
  font-variant-numeric: tabular-nums; color: var(--amber-ink); background: var(--amber-soft);
}
.pfo-hl-n { display: block; margin-top: 2px; font-size: var(--fs-micro); color: var(--ink-3); }
@media (max-width: 600px) {
  /* the generic table rule hides a 4th column on a phone; here it is a month */
  .pfo-tbl.pfo-hm th:nth-child(4), .pfo-tbl.pfo-hm td:nth-child(4) { display: table-cell; }
  .pfo-tbl.pfo-hm .pfo-hp { max-width: 132px; }
}

/* ── 5.9 B.9 · CTR by position (board view "CTR", T.18 / T.20) ──
   One row per position band: the band label (mono, uppercase), the band CTR as
   a .pfo-bar in ink (never green, never red — a CTR is not a verdict), the
   value, and the band's page count. A band with too few pages has an empty
   track and a dash, its page count saying why. The pages below the curve reuse
   the .pfo-stk table and the .pfo-gap amber pill (an actionable gap, §7.13).
   On the tokens, no new colour. */
.pfo-ctrr {
  display: grid; grid-template-columns: 96px minmax(0, 1fr) 64px minmax(120px, 230px); gap: var(--sp-3);
  align-items: center; padding: 7px 0; border-bottom: 1px solid var(--paper-2); font-size: var(--fs-body-s);
}
.pfo-ctrr:last-child { border-bottom: 0; }
.pfo-ctrr-b { font-family: var(--mono); font-size: var(--fs-meta); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-1); white-space: nowrap; }
.pfo-ctrr-n { font-family: var(--mono); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.pfo-ctrr.thin .pfo-val { color: var(--ink-4); }
.pfo-tbl.pfo-ctrt .pfo-gap { min-width: 0; }
.pfo-tbl .pfo-ctr-band { white-space: nowrap; color: var(--ink-2); }
@media (max-width: 600px) {
  /* label · value on one line, the bar and the page count under them */
  .pfo-ctrr { grid-template-columns: minmax(0, 1fr) 64px; row-gap: var(--sp-1); }
  .pfo-ctrr .pfo-bar { grid-column: 1 / -1; grid-row: 2; }
  .pfo-ctrr-n { grid-column: 1 / -1; }
}

/* 5.9 perf · stale-while-revalidate. While the toolbar's new period loads,
   the previous one stays on screen, dimmed, instead of a blank page or a
   loading line (renderAnalytics sets .pfo-busy + aria-busy). Only the data
   dims; the tabs and the toolbar stay at full strength and usable. */
/* Everything under the toolbar — the Overview's panels and the Opportunities
   and Clusters markup alike (judge P.5) — but never the brand-terms drawer. */
.pf-seo .analytics-toolbar ~ :not(.pfo-scrim):not(.pfo-drawer) { transition: opacity .18s ease; }
.pf-seo.pfo-busy .analytics-toolbar ~ :not(.pfo-scrim):not(.pfo-drawer) { opacity: .5; }
@media (prefers-reduced-motion: reduce) {
  .pf-seo .analytics-toolbar ~ :not(.pfo-scrim):not(.pfo-drawer) { transition: none; }
}

/* 5.9 perf · loading skeletons. A panel whose read is in flight holds about
   the height of what lands (measured at 1512 px: chart body 224, list bodies
   ~350), so the page does not grow by a screen when it does. Paper tokens
   only; the pulse stops under prefers-reduced-motion. */
.pf-seo .pfo-skel { display: flex; flex-direction: column; gap: var(--sp-5); padding: var(--sp-4) 0; }
.pf-seo .pfo-skel-chart { min-height: 224px; padding: 0; background: var(--paper-1); border-radius: var(--r-chip); }
.pf-seo .pfo-skel-rows { min-height: 300px; }
.pf-seo .pfo-skel i { display: block; height: 11px; border-radius: var(--r-badge); background: var(--paper-2); }
.pf-seo .pfo-skel i:nth-child(3n+1) { width: 88%; }
.pf-seo .pfo-skel i:nth-child(3n+2) { width: 72%; }
.pf-seo .pfo-skel i:nth-child(3n) { width: 61%; }
.pf-seo .pfo-skel-v { display: inline-block; width: 4.2em; height: .8em; border-radius: var(--r-badge); background: var(--paper-2); vertical-align: middle; }
.pf-seo .pfo-skel-s { display: inline-block; width: 9em; height: .8em; border-radius: var(--r-badge); background: var(--paper-2); vertical-align: middle; }
.pf-seo .pfo-skel, .pf-seo .pfo-skel-v, .pf-seo .pfo-skel-s { animation: pfo-pulse 1.4s ease-in-out infinite; }
@keyframes pfo-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) {
  .pf-seo .pfo-skel, .pf-seo .pfo-skel-v, .pf-seo .pfo-skel-s { animation: none; }
}
.pf-seo .analytics-bt-btn:disabled { opacity: .5; cursor: default; }

/* ── 5.9 B.10 · Clusters (board CL.1–CL.8, list state) ──────────────────
   One .pfo-tbl.pfo-stk row per Content Cluster: the name, how it is defined
   and its basis mark; numbers in mono; a 120×26 weekly impressions line in
   ink (§7.13, its own scale); the share of non-brand impressions as a
   .pfo-bar with its printed %. "Not in any cluster" is always the last row,
   on a --paper-1 band. Rows are not clickable in this car (the drill-down is
   B.11), so nothing here carries a hover or the offset shadow. */
.pfo-tbl.pfo-cltb, .pfo-tbl.pfo-clut { min-width: 0; }
.pfo-tbl.pfo-cltb td { vertical-align: top; }
.pfo-tbl .pfo-cln { display: block; font-weight: 700; color: var(--ink-0); }
.pfo-tbl .pfo-cldef { display: block; margin: 2px 0 var(--sp-1); font-family: var(--mono); font-size: var(--fs-micro); font-weight: 400; color: var(--ink-3); }
.pfo-tbl .pfo-num .pfo-cld { margin-left: var(--sp-1); }   /* inline, as on the board: 5 ▲ +2 */
.pfo-tbl .pfo-clsplit { margin-top: 0; }
.pfo-clfoot { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pfo-clfoot > span { display: block; }
.pfo-clu-panel .pfo-pt:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.pfo-tbl.pfo-cltb .pfo-num { width: 88px; white-space: nowrap; }
.pfo-tbl .pfo-clsp { width: 132px; }
.pfo-spark { display: block; width: 120px; height: 26px; }
.pfo-spark line { stroke: var(--paper-3); stroke-width: 1; }
.pfo-spark polyline { fill: none; stroke: var(--ink-0); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.pfo-tbl .pfo-clsh { width: 160px; }
.pfo-tbl .pfo-clsh .pfo-bar { display: inline-block; width: calc(100% - 56px); vertical-align: middle; }
.pfo-tbl .pfo-clsh .pfo-val { display: inline-block; width: 52px; text-align: right; font-family: var(--mono); font-size: var(--fs-meta); }
.pfo-tbl tr.pfo-clrest td { background: var(--paper-1); }
.pfo-tbl tr.pfo-clrest .pfo-cln { font-weight: 700; color: var(--ink-1); }
.pfo-clempty { margin: 0; }
.pfo-cllink { color: var(--ink-0); text-decoration: underline; text-underline-offset: 2px; font-family: var(--sans); }
.pfo-cllink:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.pfo-clrrh { margin: 0; text-align: right; }
.pfo-r.pfo-clrr { grid-template-columns: minmax(0, 1fr) minmax(48px, 140px) 64px 120px; }
.pfo-r.pfo-clrr .pfo-nm { white-space: normal; }
.pfo-r.pfo-clrr .pfo-mini { text-align: right; }
.pfo-tbl .pfo-clwhy { color: var(--ink-3); font-size: var(--fs-meta); }
.pfo-tbl tr.pfo-clcrit td { background: var(--paper-0); }
.pfo-clch { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.pfo-clch select { height: var(--nav-fil-h); max-width: 100%; font: inherit; border: 1px solid var(--paper-4); background: var(--paper-0); color: var(--ink-0); }
.pfo-clch select:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.pfo-clch .pfo-clchn { flex-basis: 100%; }
.pfo-clch .pfo-err { flex-basis: 100%; }
.pfo-clnone { border: 0; }
@media (max-width: 600px) {
  /* a cluster is a compact card: name, definition and basis, then the
     numbers two per line, the trend and the share bar full width (judge M.7) */
  .pfo-tbl.pfo-stk.pfo-cltb tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--sp-4); }
  .pfo-tbl.pfo-stk.pfo-cltb td.pfo-key, .pfo-tbl.pfo-stk.pfo-cltb td.pfo-clsp,
  .pfo-tbl.pfo-stk.pfo-cltb td.pfo-clsh, .pfo-tbl.pfo-stk.pfo-cltb td.pfo-nolbl { grid-column: 1 / -1; }
  .pfo-tbl.pfo-stk.pfo-cltb td.pfo-clsh { flex-wrap: wrap; align-items: center; }
  .pfo-tbl.pfo-stk.pfo-cltb td.pfo-clsh .pfo-stk-l { flex-basis: 100%; }
  .pfo-tbl.pfo-stk.pfo-cltb td.pfo-clsh .pfo-bar { flex: 1; width: auto; }
  .pfo-tbl.pfo-stk td.pfo-nolbl { display: block; text-align: left; }
  .pfo-tbl.pfo-stk .pfo-clwhy { text-align: right; }
  .pfo-r.pfo-clrr { grid-template-columns: minmax(0, 1fr) 64px; }
  .pfo-r.pfo-clrr .pfo-bar { grid-column: 1 / -1; grid-row: 2; }
  .pfo-r.pfo-clrr .pfo-mini { grid-column: 1 / -1; text-align: left; }
}

/* ── 5.9 B.11 · Clusters → one cluster (board CL.5, T.21j–m) ───────────────
   A cluster row opens its drill-down: the row takes the click (hover band,
   no offset shadow — it is a table row, not a card), the name is a real
   button so the keyboard reaches it. The drill-down reuses the Overview's
   pillars, chart, list rows, Query counting and Countries; only the head,
   the back link and the Pages rows (five columns) are new. */
.pfo-tbl tr.pfo-clr { cursor: pointer; }
.pfo-tbl tr.pfo-clr:hover td { background: var(--paper-1); }
.pfo-tbl .pfo-clopen {
  padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--ink-0);
  text-align: left; cursor: pointer; overflow-wrap: anywhere;
}
.pfo-tbl tr.pfo-clr:hover .pfo-clopen { text-decoration: underline; text-underline-offset: 2px; }
.pfo-tbl .pfo-clopen:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.pfo-clback {
  display: inline-flex; align-items: center; gap: var(--sp-1); padding: var(--sp-1) 0; border: 0; background: none;
  font-family: var(--sans); font-weight: 700; font-size: var(--fs-meta); text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-1); cursor: pointer;
}
.pfo-clback:hover { color: var(--ink-0); text-decoration: underline; text-underline-offset: 2px; }
.pfo-clback:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.pfo-cldh { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--sp-3); margin: var(--sp-3) 0 var(--sp-1); }
.pfo-cldhl { min-width: 0; flex: 1 1 320px; }
.pfo-cldh .pfo-cldt { margin: 0 0 var(--sp-1); font-family: var(--sans); font-weight: 700; font-size: 22px; line-height: 1.2; color: var(--ink-0); overflow-wrap: anywhere; }
.pfo-cldh .pfo-cldt:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.pfo-cldh .pfo-cldef { display: block; margin: 2px 0 var(--sp-1); font-family: var(--mono); font-size: var(--fs-micro); color: var(--ink-3); }
.pfo-cldh .btn { display: inline-flex; align-items: center; gap: var(--sp-1); text-decoration: none; }
.pfo-cldn { margin: 0; }
.pfo-r.pfo-cldpg { grid-template-columns: minmax(0, 1fr) minmax(40px, 90px) 40px 76px 48px; }
@media (max-width: 600px) {
  .pfo-r.pfo-cldpg { grid-template-columns: minmax(0, 1fr) 40px 76px; }
  .pfo-r.pfo-cldpg .pfo-dl:last-child { display: none; }
}