/* prospects tab styles — owned by the prospects builder.
 *
 * New class names are prefixed .prospects-; the row-local names the tab emits
 * (.prow, .pcell-*, .biz, .ai-line, .trust, .rail-*) are scoped to the pane so
 * they cannot leak into another tab's markup.
 *
 * The one rule this sheet exists to hold: .row-unreadable paints the whole row
 * in muted grey and strips every band. A page we could not read gets no colour
 * that could be mistaken for a measurement.
 */

/* One quiet line, not a filled banner. The design puts a single small note
 * under the filter bar and nothing above the table; a full-width tinted band
 * for a hint costs the list its first rows on a laptop. */
.pane[data-view="prospects"] .prospects-note {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  color: var(--muted);
  font-size: var(--fs-caption);
  margin-bottom: var(--s3);
}

.pane[data-view="prospects"] .prospects-note-ico { color: var(--primary); }

.pane[data-view="prospects"] .prospects-note-foot {
  margin: var(--s3) 0 0;
}

/* The control block is the filter bar the mockup draws — sector, city, the
 * did-not-load switch, four score ceilings and More filters. The search box is
 * not here: it is the top bar's, the only one in the app. */
.pane[data-view="prospects"] .prospects-controls {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  margin-bottom: 20px;
}

.pane[data-view="prospects"] .prospects-filter-caption {
  color: var(--body);
  font-size: var(--fs-body);
  line-height: var(--lh-tight);
  margin: 0 0 var(--s2);
}

.pane[data-view="prospects"] .page-subtitle { margin-top: -3px; }

.pane[data-view="prospects"] .prospects-filterbar {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
}

/* Nine controls have to sit on one line the way the design draws them, so the
 * bar is measured, not guessed: 1680px of canvas minus the sidebar leaves
 * ~1420px, and these paddings are what make the ninth pill fit. Below that the
 * bar wraps rather than clipping — a filter you cannot see is worse than a
 * second row. */
.pane[data-view="prospects"] .prospects-filterbar .pfilter { padding: var(--s2); }

/* One shape for every control on the bar: a bordered pill with a leading icon,
 * exactly as the mockup draws them. */
.pane[data-view="prospects"] .pfilter {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  border: 1px solid var(--border-input);
  background: var(--surface);
  color: var(--heading);
  border-radius: var(--r-control);
  padding: var(--s2) var(--s3);
  font: inherit;
  font-size: var(--fs-caption);
  line-height: var(--lh-tight);
  min-height: 38px;
  cursor: pointer;
}

.pane[data-view="prospects"] .pfilter:focus-within,
.pane[data-view="prospects"] .pfilter:focus-visible {
  border-color: var(--primary);
  outline: none;
}

.pane[data-view="prospects"] .pfilter-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  color: var(--primary);
}
.pane[data-view="prospects"] .pfilter-icon svg {
  width: 20px;
  height: 20px;
  max-width: none;
}
.pane[data-view="prospects"] .pfilter-dead .pfilter-icon { color: var(--disabled-text); }

.pane[data-view="prospects"] .pfilter-label {
  color: var(--body);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}

.pane[data-view="prospects"] .pfilter select {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--heading);
  font: inherit;
  font-size: var(--fs-caption);
  outline: none;
  /* A native select sizes itself to its LONGEST option, and the city list holds
   * "Salaberry-de-Valleyfield (6)". Unbounded, two selects alone ate enough of
   * the bar to push More filters onto a second row; the mockup draws one row. */
  max-width: 116px;
  text-overflow: ellipsis;
}

.pane[data-view="prospects"] .pfilter-num {
  width: 52px;
  border: 1px solid var(--border-input);
  background: var(--c-input-bg, var(--surface));
  border-radius: var(--r-control);
  color: var(--heading);
  font: inherit;
  font-size: var(--fs-caption);
  padding: var(--s1) var(--s2);
  outline: none;
}

.pane[data-view="prospects"] .pfilter-step.on,
.pane[data-view="prospects"] .pfilter-toggle.on,
.pane[data-view="prospects"] .pfilter-more.on {
  border-color: var(--primary);
  background: var(--blue-tint);
}

/* The switch the mockup draws on "Broken website only". */
.pane[data-view="prospects"] .pfilter-switch {
  width: 30px;
  height: 17px;
  border-radius: var(--r-pill);
  background: var(--track);
  position: relative;
  flex: 0 0 auto;
}

.pane[data-view="prospects"] .pfilter-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 13px;
  height: 13px;
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  transition: left .12s ease;
}

.pane[data-view="prospects"] .pfilter-toggle.on .pfilter-switch { background: var(--primary); }
.pane[data-view="prospects"] .pfilter-toggle.on .pfilter-switch::after { left: 15px; }

/* The mockup's fifth ceiling, drawn and inert: nothing measures marketing, so
 * there is no number to be at or below. It reads as disabled on purpose. */
.pane[data-view="prospects"] .pfilter-dead {
  color: var(--disabled-text);
  background: var(--disabled-fill);
  cursor: not-allowed;
}

.pane[data-view="prospects"] .pfilter-dead .pfilter-icon,
.pane[data-view="prospects"] .pfilter-dead .pfilter-label { color: var(--disabled-text); }

.pane[data-view="prospects"] .pfilter-dead-value {
  color: var(--disabled-text);
  font-size: var(--fs-caption);
}

.pane[data-view="prospects"] .pfilter-more { color: var(--primary); }
.pane[data-view="prospects"] .pfilter-more .pfilter-label,
.pane[data-view="prospects"] .pfilter-more .pfilter-icon,
.pane[data-view="prospects"] .pfilter-more .pfilter-caret { color: var(--primary); }

.pane[data-view="prospects"] .prospects-more {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
  padding: var(--s3);
}

.pane[data-view="prospects"] .prospects-more-row {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
}

.pane[data-view="prospects"] .prospects-select select {
  appearance: none;
  border: 1px solid var(--border-input);
  background: var(--c-input-bg, var(--surface));
  color: var(--heading);
  border-radius: var(--r-control);
  padding: var(--s2) var(--s3);
  font: inherit;
  font-size: var(--fs-caption);
}

/* A small "?" on each chip: the tooltip exists, and the operator has to be
 * able to see that it does. */
.pane[data-view="prospects"] .chip-help {
  display: inline-block;
  margin-left: var(--s1, 4px);
  color: var(--muted);
  font-size: var(--fs-caption);
  cursor: help;
}

.pane[data-view="prospects"] .biz-via {
  color: var(--muted);
  font-size: var(--fs-caption);
}

.pane[data-view="prospects"] .prospects-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

/* ------------------------------------------------------------- the table */

.pane[data-view="prospects"] .prospects-table-wrap {
  /* The containing block for everything absolutely positioned inside the
   * table -- the .sr-only labels and the ring captions. Without it their
   * containing block is the page itself, so the scrolled-away columns push
   * the document sideways and a phone gets a horizontal scrollbar on a
   * layout that fits. */
  position: relative;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.pane[data-view="prospects"] .prospects-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body);
}

.pane[data-view="prospects"] .prospects-table th {
  text-align: left;
  vertical-align: bottom;
  padding: var(--s3) var(--s3);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.pane[data-view="prospects"] .pcol-title {
  display: block;
  color: var(--heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-section);
}

/* THE SUB-LABEL SET THE COLUMN, AND THAT IS WHY THE RINGS WERE UNEVEN. `th`
 * is nowrap, so "Turns visitors into clients" had to fit on one line and took
 * 160px for Reach while "Google visibility" took 120 and "AI & maps
 * visibility" 128 — three spacings for four identical 72px rings. The title
 * stays on one line; only this second line is allowed to wrap, inside the
 * width the column declares. */
.pane[data-view="prospects"] .pcol-sub {
  display: block;
  color: var(--muted);
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  white-space: normal;
}

.pane[data-view="prospects"] .prospects-table td {
  /* The design's rows are ~120px tall, not ~155. The height came from the cell
   * padding and from the three stacked action buttons, not from the rings —
   * see .pactions, where the two secondary buttons now share one line. */
  padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.pane[data-view="prospects"] .prospects-table tbody tr:last-child td { border-bottom: 0; }

.pane[data-view="prospects"] .prow { cursor: pointer; }
.pane[data-view="prospects"] .prow:hover { background: var(--selected-fill); }

/* The list is the whole pane: the detail is a dialog over it, not a rail, so
 * the 360px rail track would be 360px of nothing. */
.pane[data-view="prospects"].active { grid-template-columns: minmax(0, 1fr); }

/* Every score column is one gauge, centred. The flex box is on a wrapper
 * INSIDE the cell: a <td> made flex leaves the column grid and every cell
 * after it wraps onto its own line. */
.pane[data-view="prospects"] .pscore {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s1);
  text-align: center;
}

/* A gauge is a fixed 46px circle. In the Security cell it now shares the column
 * with a caption line, and flex shrank it to a visibly smaller ring than the
 * other three — four gauges reading four different sizes for the same 0-100. */
/* The score IS the row: scanning the list, the ring is what the eye lands on,
 * so it fills the height the row already has instead of floating in it. 72px
 * against a ~123px row is the proportion the mockup draws. The number and the
 * /100 are already calc()d off --gauge-size, so they grow with the ring; the
 * thickness is scaled by hand so a bigger circle does not read as a thin hoop.
 * Set here and not in donut()'s markup so the detail modal keeps its own size. */
.pane[data-view="prospects"] .pscore > .donut {
  flex: 0 0 auto;
  --gauge-size: 72px;
  --gauge-thickness: 7px;
}

/* A bigger "no data" dial must still read as empty, not as a filled score: the
 * dashed outline grows with the circle instead of thinning out against it. */
.pane[data-view="prospects"] .pscore > .donut.grey { border-width: 2px; }

/* The ring is a control, not a picture: it opens the dialog on its own
 * category. It is a real <button> so it is keyboard-reachable and carries a
 * name, and everything below only takes the browser's button chrome off it —
 * the layout above is unchanged, so .donut stays a direct child of .pscore. */
.pane[data-view="prospects"] .pring {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  width: 100%;
  border-radius: var(--r-card);
}

.pane[data-view="prospects"] .pring:hover > .donut { transform: scale(1.04); }
.pane[data-view="prospects"] .pring > .donut { transition: transform .12s ease; }

.pane[data-view="prospects"] .pring:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* "Marketing / Branding & market presence": the ring and the worst-first list
 * side by side, as the newest mockup draws the column. The flex box is on a
 * wrapper INSIDE the cell — a <td> made flex leaves the column grid. */
.pane[data-view="prospects"] .pmarketing {
  display: flex;
  align-items: flex-start;
  gap: var(--s4);
}

.pane[data-view="prospects"] .pmarketing > .pring { width: auto; flex: 0 0 auto; }
.pane[data-view="prospects"] .pmarketing > .weaknesses { flex: 1 1 auto; min-width: 0; }

.pane[data-view="prospects"] .pcell-biz { min-width: 250px; }

/* FOUR RINGS, ONE RHYTHM. The three score cells asked for 116px and Security
 * for 128, but a <td> width is only a suggestion and the HEADER cells asked
 * for nothing at all: "Turns visitors into clients" set the Reach column on
 * its own and it measured 160px against SEO's 116 and GEO's 128, so the four
 * 72px rings sat at three different spacings across every row. The width is
 * declared once, on the header and the body cell together, and it is the same
 * number for all four — the sub-labels wrap inside it instead of setting it. */
.pane[data-view="prospects"] .pcol-reach,
.pane[data-view="prospects"] .pcol-site,
.pane[data-view="prospects"] .pcol-ai,
.pane[data-view="prospects"] .pcol-trust,
.pane[data-view="prospects"] .pcell-reach,
.pane[data-view="prospects"] .pcell-site,
.pane[data-view="prospects"] .pcell-ai,
.pane[data-view="prospects"] .pcell-trust { width: 128px; min-width: 128px; }

/* The certificate state sits under the security gauge as ONE caption line: the
 * number says how much of the posture rubric the site passes, this says whether
 * the padlock itself is sound. It used to be the whole cell and carried a 34px
 * tinted disc; with a gauge above it that disc read as a second score, so it is
 * a caption now. */
.pane[data-view="prospects"] .pcell-trust .trust {
  flex-direction: row;
  gap: 3px;
  font-size: var(--fs-caption);
}
.pane[data-view="prospects"] .pcell-trust .trust-ico {
  width: auto;
  height: auto;
  background: transparent;
  font-size: 11px;
}
.pane[data-view="prospects"] .pcell-weak { min-width: 300px; }
/* Two compact buttons side by side need what they need: the number is the one
 * the cell actually measures, so the declaration is not a fiction. */
.pane[data-view="prospects"] .pcell-actions { width: 198px; min-width: 198px; }

/* Pinned right. At 1280 the table is wider than the pane and scrolls sideways,
 * which used to carry Send to Pipeline and Detail off the window: the operator
 * had to scroll a table he did not know was scrollable to reach the two buttons
 * the tab exists for. position: sticky on a CELL keeps it inside the column
 * grid — unlike display: flex, it does not take the cell out of the table. The
 * Today table pins its Call button the same way. The tick column is pinned on
 * the other edge for the same reason: a selection you cannot see is a selection
 * you write to by accident. */
.pane[data-view="prospects"] .pcell-actions,
.pane[data-view="prospects"] .pcol-actions {
  position: sticky;
  right: 0;
  background: var(--surface);
  z-index: 1;
}
.pane[data-view="prospects"] .pcell-tick,
.pane[data-view="prospects"] .pcol-tick {
  position: sticky;
  left: 0;
  background: var(--surface);
  z-index: 1;
  width: 34px;
  padding-right: 0;
}
/* A pinned cell paints its own ground, so a ticked or hovered row has to repaint
 * it too or the pinned columns stay white over a tinted row. */
.pane[data-view="prospects"] .prow:hover .pcell-actions,
.pane[data-view="prospects"] .prow:hover .pcell-tick { background: var(--selected-fill); }
.pane[data-view="prospects"] .prow-ticked { background: var(--selected-fill); }
.pane[data-view="prospects"] .prow-ticked .pcell-actions,
.pane[data-view="prospects"] .prow-ticked .pcell-tick { background: var(--selected-fill); }

/* -------------------------------------------------------- bulk actions */

.pane[data-view="prospects"] .prospects-bulk {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
  margin-bottom: var(--s2);
  padding: var(--s2) var(--s3);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--selected-fill);
}
.pane[data-view="prospects"] .prospects-bulk-count {
  color: var(--heading);
  font-weight: var(--fw-semibold);
}
.pane[data-view="prospects"] .prospects-bulk-note {
  color: var(--muted);
  font-size: var(--fs-caption);
}

.pane[data-view="prospects"] .prospects-table td { vertical-align: middle; }
.pane[data-view="prospects"] .pcell-biz,
.pane[data-view="prospects"] .pcell-weak { vertical-align: top; }

/* THE BULLETS ARE THE OTHER HALF OF THE ROW'S HEIGHT. Five findings at 26px
 * apiece is 142px of list in a row the design draws at ~120, and the generic
 * `.finding` padding is sized for a dialog, not for a table cell. Tightened
 * here and nowhere else: every other list of findings on the platform keeps
 * the spacing it has. */
.pane[data-view="prospects"] .weaknesses {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pane[data-view="prospects"] .weaknesses .finding { padding: 1px 0; }

/* A weakness reads as a coloured dot, not a tick: the column is a list of
 * opportunities, and every line in it is something that is missing. */
.pane[data-view="prospects"] .weaknesses .finding-ico {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  font-size: 0;
  background: var(--slate);
  flex: 0 0 auto;
}

.pane[data-view="prospects"] .weaknesses .finding-fail .finding-ico { background: var(--red); }
.pane[data-view="prospects"] .weaknesses .finding-warn .finding-ico { background: var(--amber); }
.pane[data-view="prospects"] .weaknesses .finding-pass .finding-ico { background: var(--green); }
.pane[data-view="prospects"] .weaknesses .finding-unknown .finding-ico { background: var(--disabled-text); }

/* -------------------------------------------------------------- business */

.pane[data-view="prospects"] .biz { display: flex; gap: var(--s3); align-items: flex-start; }

/* The design gives the row a real logo tile, not a favicon-sized chip. */
.pane[data-view="prospects"] .biz .logo-tile { --logo-size: 44px; }

.pane[data-view="prospects"] .biz-name {
  color: var(--heading);
  font-weight: var(--fw-semibold);
}

.pane[data-view="prospects"] .biz-site {
  display: inline-block;
  color: var(--primary);
  font-size: var(--fs-caption);
  text-decoration: none;
  word-break: break-all;
}

.pane[data-view="prospects"] .biz-site:hover { text-decoration: underline; }

.pane[data-view="prospects"] .biz-site-ico {
  display: inline-flex;
  width: 13px;
  height: 13px;
  margin-left: 4px;
  vertical-align: -2px;
}
.pane[data-view="prospects"] .biz-site-ico svg { width: 13px; height: 13px; }

.pane[data-view="prospects"] .biz-place-ico {
  display: inline-flex;
  width: 13px;
  height: 13px;
  color: var(--muted);
  margin-right: 4px;
  vertical-align: -2px;
}
.pane[data-view="prospects"] .biz-place-ico svg { width: 13px; height: 13px; }

.pane[data-view="prospects"] .biz-place {
  color: var(--muted);
  font-size: var(--fs-caption);
}

.pane[data-view="prospects"] .biz-chips {
  display: flex;
  gap: var(--s2);
  flex-wrap: wrap;
  margin-top: var(--s2);
}

.pane[data-view="prospects"] .biz-chips:empty { display: none; }

.pane[data-view="prospects"] .expert-verdict {
  margin-top: var(--s2);
  color: var(--body);
  font-size: var(--fs-caption);
  line-height: var(--lh-base);
}

.pane[data-view="prospects"] .expert-verdict-unmeasured {
  color: var(--muted);
}

.pane[data-view="prospects"] .expert-verdict-head {
  display: flex;
  justify-content: space-between;
  gap: var(--s2);
}

.pane[data-view="prospects"] .expert-verdict-signals {
  margin: var(--s1) 0 0;
  padding-left: var(--s4);
}

.pane[data-view="prospects"] .expert-verdict-empty-signals {
  color: var(--muted);
}

.pane[data-view="prospects"] .pdetail-body > .expert-verdict {
  margin: 0 0 var(--s4);
  padding: var(--s3);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
}

/* -------------------------------------------------------------- findings */

.pane[data-view="prospects"] .findings {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: var(--s2);
}

/* A caption under a gauge, for the one honest sentence a null score needs. */
/* A CAPTION MAY NOT SET ITS COLUMN'S WIDTH. "Nothing measured" on one line is
 * the widest thing in the Reach column, and an auto table hands a column the
 * width of its widest line before it hands anything to the columns that have
 * no slack — which is the whole of why Reach measured 160px against SEO's 116
 * while all three asked for the same number. Capped, it wraps under the ring
 * instead of pushing the column out. */
.pane[data-view="prospects"] .gauge-caption {
  display: block;
  max-width: 96px;
  margin-top: var(--s1);
  color: var(--muted);
  font-size: var(--fs-caption);
}

/* --------------------------------------------------------------- AI cell */

.pane[data-view="prospects"] .ai-lines,
.pane[data-view="prospects"] .rail-section .ai-line {
  font-size: var(--fs-caption);
}

.pane[data-view="prospects"] .ai-lines { margin-top: var(--s2); }

.pane[data-view="prospects"] .ai-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  padding: 1px 0;
}

.pane[data-view="prospects"] .ai-line-label { color: var(--muted); }
.pane[data-view="prospects"] .ai-line-value { font-weight: var(--fw-medium); }

.pane[data-view="prospects"] .ai-line.tone-green .ai-line-value { color: var(--green); }
.pane[data-view="prospects"] .ai-line.tone-amber .ai-line-value { color: var(--amber); }
.pane[data-view="prospects"] .ai-line.tone-red .ai-line-value { color: var(--red); }
.pane[data-view="prospects"] .ai-line.tone-blue .ai-line-value { color: var(--primary); }
.pane[data-view="prospects"] .ai-line.tone-grey .ai-line-value { color: var(--muted); }

/* ----------------------------------------------------------------- trust */

.pane[data-view="prospects"] .trust {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s1);
  text-align: center;
  font-size: var(--fs-caption);
}

.pane[data-view="prospects"] .trust-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--slate-tint);
  color: var(--slate);
}

.pane[data-view="prospects"] .trust-secure .trust-ico { background: var(--green-tint); color: var(--green); }
.pane[data-view="prospects"] .trust-not_secure .trust-ico { background: var(--red-tint); color: var(--red); }
.pane[data-view="prospects"] .trust-secure .trust-label { color: var(--green); }
.pane[data-view="prospects"] .trust-not_secure .trust-label { color: var(--red); }
.pane[data-view="prospects"] .trust-unknown .trust-label { color: var(--muted); }

/* --------------------------------------------------------------- actions */

/* THREE STACKED 38px BUTTONS WERE THE ROW'S HEIGHT. 38 + 38 + 38 and two gaps
 * is 122px of buttons in a cell whose neighbours needed ~113, so the actions
 * column — not the rings and not the bullets — is what made a five-bullet row
 * 149px tall against a design that draws ~120.
 *
 * Nothing is removed: Open Report keeps its place and keeps saying WHY it is
 * dead when it is dead. The primary action keeps the full width it earns, and
 * the two secondary ones share the second line at a compact size, which is
 * two rows instead of three. */
.pane[data-view="prospects"] .pactions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s1);
}

.pane[data-view="prospects"] .pactions .btn {
  width: 100%;
  height: 30px;
  padding: 0 var(--s2);
  font-size: var(--fs-caption);
  justify-content: center;
  white-space: nowrap;
}

.pane[data-view="prospects"] .pactions .btn-primary { grid-column: 1 / -1; }

.pane[data-view="prospects"] .btn-ico { margin-right: var(--s1); }

/* ------------------------------------------------------------------ rail */

.pane[data-view="prospects"] .rail-line {
  color: var(--body);
  font-size: var(--fs-caption);
  margin-top: var(--s1);
}

.pane[data-view="prospects"] .rail-line.muted { color: var(--muted); }

.pane[data-view="prospects"] .rail-actions {
  display: flex;
  gap: var(--s2);
  flex-wrap: wrap;
  margin-top: var(--s2);
}

.pane[data-view="prospects"] .rail-send textarea,
.pane[data-view="prospects"] .rail-input {
  width: 100%;
  margin-top: var(--s2);
  padding: var(--s2) var(--s3);
  border: 1px solid var(--border-input);
  border-radius: var(--r-control);
  background: var(--c-input-bg, var(--surface));
  color: var(--body);
  font: inherit;
  font-size: var(--fs-caption);
}

.pane[data-view="prospects"] .rail-send textarea { min-height: 76px; resize: vertical; }

.pane[data-view="prospects"] .rail-counter {
  display: flex;
  justify-content: flex-end;
  color: var(--muted);
  font-size: var(--fs-caption);
  font-variant-numeric: tabular-nums;
}

/* The tooltip is also on the button; this line keeps it visible without hover. */
.pane[data-view="prospects"] .rail-gate {
  margin: var(--s2) 0;
  color: var(--muted);
  font-size: var(--fs-caption);
}

.pane[data-view="prospects"] .rail-send .btn { width: 100%; }

/* ------------------------------------------------- the unreadable row */

/* Nothing was measured here, so nothing may look measured. Every gauge, pill
 * and finding in the row falls back to muted grey, and no band survives. */
.pane[data-view="prospects"] .row-unreadable td,
.pane[data-view="prospects"] .row-unreadable .biz-name,
.pane[data-view="prospects"] .row-unreadable .ai-line-value,
.pane[data-view="prospects"] .row-unreadable .trust-label,
.pane[data-view="prospects"] .row-unreadable .finding,
.pane[data-view="prospects"] .row-unreadable .finding-ico {
  color: var(--muted);
}

.pane[data-view="prospects"] .row-unreadable .trust-ico {
  background: var(--slate-tint);
  color: var(--slate);
}

.pane[data-view="prospects"] .row-unreadable .biz-site { color: var(--muted); }

/* .sr-only lives in shell.css. The copy that used to sit here was a weaker
 * duplicate (no clip, no margin reset) that won on specificity alone. */

/* ---------------------------------------------------------- the detail */

/* The detail is a centred dialog over the list, not a side rail: each audit
 * category prints three columns — what passed, what did not, and why the score
 * is what it is — and three columns do not fit in 360px. It is rendered into
 * the pane's rail slot, which this sheet lifts out of the grid entirely. */
.pane[data-view="prospects"] > .rail {
  position: static;
  max-height: none;
  overflow: visible;
}

.pane[data-view="prospects"] .pdetail-wrap {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s5);
}

.pane[data-view="prospects"] .pdetail-scrim {
  position: absolute;
  inset: 0;
  background: var(--heading);
  opacity: .55;
}

.pane[data-view="prospects"] .pdetail {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(720px, 100%);
  max-height: min(92dvh, 960px);
  background: var(--surface);
  border-radius: var(--r-card);
  box-shadow: 0 24px 64px rgba(16, 40, 80, .28);
  overflow: hidden;
}

.pane[data-view="prospects"] .pdetail-head {
  display: flex;
  align-items: flex-start;
  gap: var(--s4);
  padding: var(--s5) var(--s6);
  border-bottom: 1px solid var(--border);
}

.pane[data-view="prospects"] .pdetail-head .logo-tile {
  width: 62px;
  height: 62px;
  flex: 0 0 auto;
}

.pane[data-view="prospects"] .pdetail-ident { min-width: 0; flex: 1 1 auto; }

.pane[data-view="prospects"] .pdetail-name {
  margin: 0;
  color: var(--heading);
  font-size: var(--fs-kpi);
  font-weight: var(--fw-bold);
  letter-spacing: -.01em;
  line-height: var(--lh-tight);
}

.pane[data-view="prospects"] .pdetail-url {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  margin-top: var(--s1);
  color: var(--primary);
  text-decoration: none;
  word-break: break-all;
}

.pane[data-view="prospects"] .pdetail-url:hover { text-decoration: underline; }

.pane[data-view="prospects"] .pdetail-place {
  display: flex;
  align-items: center;
  gap: var(--s1);
  margin-top: var(--s1);
  color: var(--muted);
  font-size: var(--fs-caption);
}

.pane[data-view="prospects"] .pdetail-ico { color: var(--muted); }
.pane[data-view="prospects"] .pdetail-url .pdetail-ico { color: var(--primary); }

.pane[data-view="prospects"] .pdetail-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s3);
}

.pane[data-view="prospects"] .pdetail-x {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: var(--fs-section);
  line-height: 1;
  padding: var(--s2);
  border-radius: var(--r-control);
  cursor: pointer;
}

.pane[data-view="prospects"] .pdetail-x:hover { background: var(--slate-tint); color: var(--heading); }

.pane[data-view="prospects"] .pdetail-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--s5) var(--s6);
  background: var(--canvas);
}

.pane[data-view="prospects"] .pdetail-foot {
  display: flex;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s4) var(--s6);
  border-top: 1px solid var(--border);
  background: var(--surface);
}

/* ---- the audit header and the overall card ---- */

.pane[data-view="prospects"] .pdetail-audit-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s5);
  flex-wrap: wrap;
  margin-bottom: var(--s4);
}

.pane[data-view="prospects"] .pdetail-h {
  margin: 0;
  color: var(--heading);
  font-size: var(--fs-kpi);
  font-weight: var(--fw-bold);
  letter-spacing: -.01em;
}

.pane[data-view="prospects"] .pdetail-sub {
  margin: var(--s2) 0 0;
  max-width: 34ch;
  color: var(--body);
  font-size: var(--fs-caption);
}

.pane[data-view="prospects"] .pdetail-overall {
  flex: 0 1 260px;
  padding: var(--s3) var(--s4);
  border-radius: var(--r-card);
  background: var(--blue-tint);
}

.pane[data-view="prospects"] .pdetail-overall-label {
  color: var(--body);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
}

.pane[data-view="prospects"] .pdetail-overall-score {
  color: var(--heading);
  font-variant-numeric: tabular-nums;
  margin-top: var(--s1);
}

.pane[data-view="prospects"] .pdetail-overall-n {
  color: var(--primary);
  font-size: var(--fs-kpi);
  font-weight: var(--fw-bold);
}

.pane[data-view="prospects"] .pdetail-overall-d { color: var(--body); }

.pane[data-view="prospects"] .pdetail-overall-none {
  color: var(--muted);
  font-weight: var(--fw-semibold);
}

.pane[data-view="prospects"] .pdetail-overall-src,
.pane[data-view="prospects"] .pdetail-overall-text {
  margin-top: var(--s1);
  color: var(--body);
  font-size: var(--fs-caption);
}

.pane[data-view="prospects"] .pdetail-overall-src { color: var(--muted); }

/* ---- one category card ---- */

.pane[data-view="prospects"] .pdetail-card {
  margin-bottom: var(--s4);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.pane[data-view="prospects"] .pdetail-card-head {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--border);
}

.pane[data-view="prospects"] .pdetail-card-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: var(--r-control);
  background: var(--blue-tint);
  color: var(--primary);
}

.pane[data-view="prospects"] .pdetail-card-ident { flex: 1 1 auto; min-width: 0; }

.pane[data-view="prospects"] .pdetail-card-title {
  color: var(--heading);
  font-size: var(--fs-section);
  font-weight: var(--fw-semibold);
}

.pane[data-view="prospects"] .pdetail-card-desc {
  color: var(--muted);
  font-size: var(--fs-caption);
}

/* The Security card carries a number in its badge and the certificate state
   here, because "45 / 100" does not say whether the padlock is broken. */
.pane[data-view="prospects"] .pdetail-card-caption {
  margin-top: var(--s1);
  color: var(--muted);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
}

.pane[data-view="prospects"] .pdetail-badge {
  flex: 0 0 auto;
  padding: var(--s1) var(--s3);
  border-radius: var(--r-pill);
  background: var(--slate-tint);
  color: var(--slate);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}

.pane[data-view="prospects"] .pdetail-badge[data-band="red"] { background: var(--red-tint); color: var(--red); }
.pane[data-view="prospects"] .pdetail-badge[data-band="amber"] { background: var(--amber-tint); color: var(--amber); }
.pane[data-view="prospects"] .pdetail-badge[data-band="green"] { background: var(--green-tint); color: var(--green); }

/* Grey is not a zero: a category with no recorded score wears the muted badge
 * and says "Not scored yet" in words. */
.pane[data-view="prospects"] .pdetail-badge-none {
  background: var(--disabled-fill);
  color: var(--muted);
}

.pane[data-view="prospects"] .pdetail-cols {
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  gap: var(--s4);
  padding: var(--s4);
}

.pane[data-view="prospects"] .pdetail-col { min-width: 0; }

.pane[data-view="prospects"] .pdetail-col h4,
.pane[data-view="prospects"] .pdetail-unknown h4 {
  margin: 0 0 var(--s2);
  color: var(--heading);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
}

.pane[data-view="prospects"] .pdetail-col .finding,
.pane[data-view="prospects"] .pdetail-unknown .finding { font-size: var(--fs-caption); }

.pane[data-view="prospects"] .pdetail-why {
  margin: 0;
  color: var(--body);
  font-size: var(--fs-caption);
  line-height: var(--lh-base);
}

.pane[data-view="prospects"] .pdetail-unknown {
  padding: var(--s3) var(--s4) var(--s4);
  border-top: 1px solid var(--border);
  background: var(--slate-tint);
}

/* ---- the record blocks below the audit ---- */

.pane[data-view="prospects"] .pdetail-body .rail-section {
  margin-bottom: var(--s4);
  padding: var(--s4);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
}

.pane[data-view="prospects"] .pdetail-body .rail-section h3 {
  margin: 0 0 var(--s2);
  color: var(--heading);
  font-size: var(--fs-section);
  font-weight: var(--fw-semibold);
}

/* Nothing was measured, so nothing in the dialog may look measured either. */
.pane[data-view="prospects"] .pdetail-unreadable .pdetail-name,
.pane[data-view="prospects"] .pdetail-unreadable .pdetail-card-title,
.pane[data-view="prospects"] .pdetail-unreadable .finding,
.pane[data-view="prospects"] .pdetail-unreadable .finding-ico,
.pane[data-view="prospects"] .pdetail-unreadable .ai-line-value {
  color: var(--muted);
}

.pane[data-view="prospects"] .pdetail-unreadable .pdetail-card-ico {
  background: var(--slate-tint);
  color: var(--slate);
}

@media (max-width: 1100px) {
  .pane[data-view="prospects"] .pdetail-cols { grid-template-columns: 1fr; }
}

/* ---- the filter chips, on one line ---- */

/* The generic .chip stacks its label over its value, which turned each filter
 * into a three-line block: name, sub-label, then a lone "?". The mockup's
 * filter bar is a row of single-line pills, so this sheet lays the same chip
 * out inline — the label leads, the sub-label follows in muted type, and the
 * "?" sits at the end where the tooltip is. */
.pane[data-view="prospects"] .prospects-chips .filter-chip {
  align-items: center;
  gap: var(--s2);
  border-radius: var(--r-pill);
  padding: var(--s2) var(--s4);
}

.pane[data-view="prospects"] .prospects-chips .filter-chip > span {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s2);
  min-width: 0;
}

.pane[data-view="prospects"] .prospects-chips .chip-label {
  display: inline;
  color: var(--heading);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
}

.pane[data-view="prospects"] .prospects-chips .chip-value {
  display: inline;
  color: var(--muted);
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  white-space: nowrap;
}

.pane[data-view="prospects"] .prospects-chips .filter-chip.active .chip-value { color: var(--body); }

.pane[data-view="prospects"] .prospects-chips .chip-help { margin-left: 0; }

/* ---- the category tab row and the grouped panel ---------------------- */

/* The newest mockup replaced the four-card scroll with a tab row and ONE
 * detailed panel: Reach | SEO | GEO | Security | Marketing. The ring the
 * operator clicked decides which one opens; the rest stay one click away. */
.pane[data-view="prospects"] .pdetail-tabs {
  display: flex;
  gap: var(--s2);
  flex-wrap: wrap;
  margin-bottom: var(--s4);
}

.pane[data-view="prospects"] .pdetail-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s4);
  border: 1px solid var(--border);
  border-radius: var(--r-control);
  background: var(--surface);
  color: var(--body);
  font: inherit;
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  cursor: pointer;
}

.pane[data-view="prospects"] .pdetail-tab:hover { border-color: var(--primary); }

.pane[data-view="prospects"] .pdetail-tab:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.pane[data-view="prospects"] .pdetail-tab.active {
  border-color: var(--primary);
  background: var(--blue-tint);
  color: var(--primary);
  font-weight: var(--fw-semibold);
}

.pane[data-view="prospects"] .pdetail-tab-ico { color: var(--primary); }

/* The grouped half of the dialog: named groups, each with one line of its own,
 * and under them the checks with the sentence describing what was seen. */
.pane[data-view="prospects"] .pdetail-groups {
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--border);
}

.pane[data-view="prospects"] .pdetail-groups-head {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  margin-bottom: var(--s4);
}

.pane[data-view="prospects"] .pdetail-groups-ico { color: var(--primary); }

.pane[data-view="prospects"] .pdetail-groups-title {
  color: var(--heading);
  font-size: var(--fs-section);
  font-weight: var(--fw-semibold);
}

.pane[data-view="prospects"] .pdetail-groups-desc,
.pane[data-view="prospects"] .pdetail-group-desc {
  color: var(--muted);
  font-size: var(--fs-caption);
}

.pane[data-view="prospects"] .pdetail-group {
  display: flex;
  align-items: flex-start;
  gap: var(--s5);
  padding: var(--s3) 0;
  border-top: 1px solid var(--border);
}

.pane[data-view="prospects"] .pdetail-group-ident {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  flex: 0 0 210px;
  min-width: 0;
}

.pane[data-view="prospects"] .pdetail-group-ico { color: var(--primary); }

.pane[data-view="prospects"] .pdetail-group-title {
  color: var(--heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body);
}

.pane[data-view="prospects"] .pdetail-group-items {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

/* A check and, beside it, the sentence saying what was actually seen. The
 * sentence is muted: the finding is the claim, the sentence is the evidence. */
.pane[data-view="prospects"] .pdetail-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
}

.pane[data-view="prospects"] .pdetail-item-detail {
  flex: 0 1 auto;
  text-align: right;
  color: var(--muted);
  font-size: var(--fs-caption);
}

.pane[data-view="prospects"] .pdetail-card-empty { padding: var(--s5); }

/* The badge in the dialog head now names ONE category, so its number carries
 * that category's band — the same red/amber/green the ring on the row shows —
 * instead of one averaged colour for everything. */
.pane[data-view="prospects"] [data-band="red"] > .pdetail-overall-n { color: var(--red); }
.pane[data-view="prospects"] [data-band="amber"] > .pdetail-overall-n { color: var(--amber); }
.pane[data-view="prospects"] [data-band="green"] > .pdetail-overall-n { color: var(--green); }

/* ------------------------------------------------------------ GEO rubric */
/* The GEO card is the only category with a published rubric, so it is the only
 * one that draws a table. Three summary tiles say what was measured — how many
 * of the four search bots got in, what the page scored, and that "Cited" is
 * not measured before a sale — and the table below shows every one of the ten
 * rows with its points, so the number can be checked line by line on a call.
 * All colour comes from tokens.css; nothing here invents a hex value. */
.pane[data-view="prospects"] .geo-rubric { margin-top: 0; }

/* The GEO tab is the rubric and nothing else, so the card holds no padded
 * header of its own above it. */
.pane[data-view="prospects"] .pdetail-card-geo { padding-top: var(--s3); }

.pane[data-view="prospects"] .geo-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s3);
  margin-bottom: var(--s4);
}

.pane[data-view="prospects"] .geo-tile {
  background: var(--canvas);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--s3) var(--s4);
  display: flex;
  align-items: center;
  gap: var(--s3);
}

.pane[data-view="prospects"] .geo-tile-ico {
  font-size: var(--fs-section);
  line-height: 1;
}

.pane[data-view="prospects"] .geo-tile-label {
  color: var(--muted);
  font-size: var(--fs-caption);
}

.pane[data-view="prospects"] .geo-tile-value {
  color: var(--heading);
  font-size: var(--fs-section);
  font-weight: var(--fw-semibold);
}

.pane[data-view="prospects"] .geo-tile-value[data-band="red"] { color: var(--red); }
.pane[data-view="prospects"] .geo-tile-value[data-band="amber"] { color: var(--amber); }
.pane[data-view="prospects"] .geo-tile-value[data-band="green"] { color: var(--green); }

.pane[data-view="prospects"] .geo-rubric-h {
  color: var(--heading);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  margin: var(--s4) 0 var(--s3);
}

/* A ten-row table with a Why column does not fit a narrow dialog, and the page
 * body must never scroll sideways — so the table scrolls inside its own box. */
.pane[data-view="prospects"] .geo-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-caption);
  display: block;
  overflow-x: auto;
}

.pane[data-view="prospects"] .geo-table th {
  text-align: left;
  color: var(--muted);
  font-weight: var(--fw-medium);
  border-bottom: 1px solid var(--border);
  padding: var(--s2) var(--s3);
  white-space: nowrap;
}

.pane[data-view="prospects"] .geo-table td {
  border-bottom: 1px solid var(--border);
  padding: var(--s2) var(--s3);
  vertical-align: top;
  color: var(--body);
}

.pane[data-view="prospects"] .geo-table .geo-n,
.pane[data-view="prospects"] .geo-table .geo-pts,
.pane[data-view="prospects"] .geo-table .geo-earned { white-space: nowrap; }

.pane[data-view="prospects"] .geo-table .geo-check {
  color: var(--heading);
  font-weight: var(--fw-medium);
  min-width: 150px;
}

/* One short line per row. The long paragraph belongs to the report page, where
 * there is a column wide enough to read it in; here it turned a ten-row table
 * into eight hundred pixels of prose and pushed the rest of the design below
 * the fold. */
.pane[data-view="prospects"] .geo-table .geo-why {
  color: var(--muted);
  min-width: 200px;
}

.pane[data-view="prospects"] .geo-table tr[data-status="pass"] .geo-status { color: var(--green); }
.pane[data-view="prospects"] .geo-table tr[data-status="fail"] .geo-status { color: var(--red); }
.pane[data-view="prospects"] .geo-table tr[data-status="na"] .geo-status { color: var(--muted); }
/* Not verified is its own verdict: neither a pass, nor a fail, nor an
 * exemption. It is grey, like the other thing we cannot claim. */
.pane[data-view="prospects"] .geo-table tr[data-status="unverified"] .geo-status { color: var(--muted); }

.pane[data-view="prospects"] .geo-table .geo-total td {
  font-weight: var(--fw-semibold);
  color: var(--heading);
  background: var(--canvas);
}

/* ------------------------------------------- the two explanation boxes */
/* Side by side, exactly as the mockup draws them: why the rows are in this
 * order, and how a check is decided. Both are static copy from
 * geo-strings.json — neither reads this audit. */
.pane[data-view="prospects"] .geo-boxes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s3);
  margin-top: var(--s4);
}

@media (max-width: 720px) {
  .pane[data-view="prospects"] .geo-boxes { grid-template-columns: 1fr; }
}

.pane[data-view="prospects"] .geo-box {
  background: var(--canvas);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--s3);
}

.pane[data-view="prospects"] .geo-box-h {
  color: var(--heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-caption);
  margin-bottom: var(--s2);
}

.pane[data-view="prospects"] .geo-box ol {
  margin: 0;
  padding-left: var(--s5);
  color: var(--muted);
  font-size: var(--fs-caption);
}

.pane[data-view="prospects"] .geo-box li { margin-bottom: var(--s1); }

/* ------------------------------------------------ entity & profile signals */
/* Where the business should be visible, NOT points. A network the auditor
 * never looked for reads "Not checked" — grey — because reporting an absence
 * we did not measure would be inventing a finding. */
.pane[data-view="prospects"] .geo-entity { margin-top: var(--s4); }

.pane[data-view="prospects"] .geo-entity-h {
  color: var(--heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-caption);
  margin-bottom: var(--s2);
}

.pane[data-view="prospects"] .geo-entity-sub {
  color: var(--muted);
  font-weight: var(--fw-regular, 400);
}

.pane[data-view="prospects"] .geo-entity-row {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--s3);
  align-items: start;
}

@media (max-width: 720px) {
  .pane[data-view="prospects"] .geo-entity-row { grid-template-columns: 1fr; }
}

.pane[data-view="prospects"] .geo-chips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: var(--s2);
}

.pane[data-view="prospects"] .geo-chip {
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--s2);
  text-align: center;
  background: var(--canvas);
}

.pane[data-view="prospects"] .geo-chip-label {
  color: var(--heading);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  line-height: 1.2;
}

.pane[data-view="prospects"] .geo-chip-state {
  font-size: var(--fs-caption);
  color: var(--muted);
  line-height: 1.2;
}

.pane[data-view="prospects"] .geo-chip[data-state="found"] .geo-chip-state { color: var(--green); }
.pane[data-view="prospects"] .geo-chip[data-state="missing"] .geo-chip-state { color: var(--red); }
.pane[data-view="prospects"] .geo-chip[data-state="unchecked"] .geo-chip-state { color: var(--muted); }

/* ------------------------------------------- fitting the panel to the design */
/* The mockup draws the whole GEO panel in one 640px column with no scrolling
 * inside it: eleven single-line table rows, two compact boxes and a strip of
 * six chips. Everything below tightens the same components to that density —
 * type, line-height and padding only. No content is dropped to make it fit. */
.pane[data-view="prospects"] .geo-rubric .advisory {
  padding: var(--s2) var(--s3);
  gap: var(--s2);
  line-height: 1.35;
  font-size: var(--fs-caption);
}

.pane[data-view="prospects"] .geo-rubric .advisory-title { margin-bottom: 0; }

.pane[data-view="prospects"] .geo-rubric-h { margin: var(--s3) 0 var(--s2); }

.pane[data-view="prospects"] .geo-tile { padding: var(--s2) var(--s3); }

.pane[data-view="prospects"] .geo-table { font-size: 11.5px; line-height: 1.3; }

.pane[data-view="prospects"] .geo-table th,
.pane[data-view="prospects"] .geo-table td { padding: 3px var(--s2); }

.pane[data-view="prospects"] .geo-table .geo-check { min-width: 128px; }
.pane[data-view="prospects"] .geo-table .geo-why { min-width: 210px; }

.pane[data-view="prospects"] .geo-boxes { gap: var(--s2); margin-top: var(--s3); }
.pane[data-view="prospects"] .geo-box { padding: var(--s2) var(--s3); }
.pane[data-view="prospects"] .geo-box ol { font-size: 11.5px; line-height: 1.35; }
.pane[data-view="prospects"] .geo-box li { margin-bottom: 0; }

.pane[data-view="prospects"] .geo-entity { margin-top: var(--s3); }
.pane[data-view="prospects"] .geo-chips { gap: var(--s1); }
.pane[data-view="prospects"] .geo-chip { padding: var(--s1); }
.pane[data-view="prospects"] .geo-chip-label,
.pane[data-view="prospects"] .geo-chip-state { font-size: 11px; }

/* The badge is one number and it stays on one line — "23 / 100" broken across
 * two rows reads as two numbers, which is the exact confusion this row exists
 * to end. And the six networks are one strip, as the design draws them. */
.pane[data-view="prospects"] .geo-table .geo-total td:last-child { white-space: nowrap; }

.pane[data-view="prospects"] .geo-chips {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

@media (max-width: 720px) {
  .pane[data-view="prospects"] .geo-chips {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ------------------------------------- the redrawn GEO panel (Sep 2026) */
/* The score leads: a big number on the left tile, the bots door count in the
 * middle, and the honest blank on the right. The tile that carries the score
 * is the only one that also carries a sentence saying what the number is NOT,
 * because that is the sentence people otherwise supply for themselves. */
.pane[data-view="prospects"] .geo-tile-body { min-width: 0; }

.pane[data-view="prospects"] .geo-tile-label {
  display: flex;
  align-items: center;
  gap: var(--s1);
  font-weight: var(--fw-semibold);
}

.pane[data-view="prospects"] .geo-tile-score .geo-tile-label { color: var(--primary); }

.pane[data-view="prospects"] .geo-tile-score .geo-tile-value {
  font-size: var(--fs-kpi);
  line-height: var(--lh-tight);
}

.pane[data-view="prospects"] .geo-tile-sub {
  color: var(--muted);
  font-size: var(--fs-pill);
  line-height: 1.3;
  margin-top: 2px;
}

.pane[data-view="prospects"] .geo-checks-head {
  display: flex;
  align-items: center;
  gap: var(--s2);
}

.pane[data-view="prospects"] .geo-checks-sub {
  color: var(--muted);
  font-size: var(--fs-caption);
  margin: calc(-1 * var(--s2)) 0 var(--s3);
}

/* "gate" is a tag on the row, not a second sentence. */
.pane[data-view="prospects"] .geo-tag {
  margin-left: var(--s2);
  padding: 1px var(--s2);
  border-radius: var(--r-pill);
  /* The grey "gate" tag was 10.5px of #64748B on #EEF2F7 — 4.15:1, under AA,
   * at a size where that matters most. Same grey family, one step darker. */
  background: var(--geo-slate-tint);
  color: var(--geo-slate);
  font-size: 11px;
  font-weight: var(--fw-medium);
}

.pane[data-view="prospects"] .geo-inline-why {
  color: var(--muted);
  font-weight: var(--fw-regular);
  margin-top: 2px;
}

/* The verdict is a pill, so it reads at a glance down a column of ten. The
 * words are capitals IN THE STRING; the stylesheet never shouts. */
.pane[data-view="prospects"] .geo-pill {
  display: inline-block;
  padding: 2px var(--s2);
  border-radius: var(--r-pill);
  font-size: 10.5px;
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}

.pane[data-view="prospects"] .geo-pill[data-status="pass"] {
  background: var(--green-tint); color: var(--green);
}
.pane[data-view="prospects"] .geo-pill[data-status="fail"] {
  background: var(--red-tint); color: var(--red);
}
.pane[data-view="prospects"] .geo-pill[data-status="na"] {
  background: var(--slate-tint); color: var(--slate);
}
/* Not verified is its own verdict: neither a pass, nor a fail, nor an
 * exemption. It is grey, like the other thing we cannot claim. */
.pane[data-view="prospects"] .geo-pill[data-status="unverified"] {
  background: var(--slate-tint); color: var(--slate);
}

.pane[data-view="prospects"] .geo-table .geo-helpcell,
.pane[data-view="prospects"] .geo-table .geo-togglecell {
  text-align: center;
  padding-left: var(--s1);
  padding-right: var(--s1);
}

.pane[data-view="prospects"] .geo-toggle {
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: var(--fs-body);
  line-height: 1;
  padding: var(--s1);
  border-radius: var(--r-control);
}
.pane[data-view="prospects"] .geo-toggle:hover { color: var(--primary); }

/* A row opens on a ground THAT MATCHES ITS OWN VERDICT. A red panel under a
 * PASS row told the eye a failure was hiding there; the tint is now the
 * status's tint, and a passing row's note sits on the plain canvas. */
.pane[data-view="prospects"] .geo-detail > td {
  background: var(--canvas);
  padding-top: var(--s2);
  padding-bottom: var(--s2);
}
.pane[data-view="prospects"] .geo-detail[data-status="fail"] > td {
  background: var(--red-tint);
}
.pane[data-view="prospects"] .geo-detail[data-status="unverified"] > td {
  background: var(--amber-tint);
}

.pane[data-view="prospects"] .geo-row[data-status="fail"] > td { background: var(--red-tint); }

.pane[data-view="prospects"] .geo-wrongfix { color: var(--body); }
.pane[data-view="prospects"] .geo-wrongfix > div + div { margin-top: 2px; }
.pane[data-view="prospects"] .geo-wf-label { font-weight: var(--fw-semibold); }
.pane[data-view="prospects"] .geo-wrong .geo-wf-label { color: var(--red); }
.pane[data-view="prospects"] .geo-detail[data-status="unverified"] .geo-wrong .geo-wf-label {
  color: var(--amber);
}
.pane[data-view="prospects"] .geo-fix .geo-wf-label { color: var(--green); }
/* A URL or a selector is one long "word"; without this it is cut mid-glyph at
 * the cell edge instead of wrapping. */
.pane[data-view="prospects"] .geo-wrong,
.pane[data-view="prospects"] .geo-fix { overflow-wrap: anywhere; }
.pane[data-view="prospects"] .geo-rowwhy { color: var(--muted); }

/* A help panel opened from inside the table is a row of the table, so opening
 * it never moves the row the reader was on. */
.pane[data-view="prospects"] .geohelp-rowslot > td {
  background: var(--canvas);
  padding: var(--s3);
  /* THE HELP CELL MUST NOT SIZE ITSELF TO THE TABLE INSIDE IT. Section E is
   * six columns wide; left to itself the cell grew to fit them, dragged the
   * whole rubric table 50px past the dialog, and cut the last column — the
   * verdicts, which are the point of that table — with no scrollbar able to
   * reach them. `max-width: 0` makes the cell take the width the rubric table
   * already has and hands the overflow to .geohelp-tablewrap, which scrolls. */
  max-width: 0;
}

.pane[data-view="prospects"] .geo-box-h {
  display: flex;
  align-items: center;
  gap: var(--s2);
}

.pane[data-view="prospects"] .geo-entity-h { display: flex; align-items: center; gap: var(--s2); }
.pane[data-view="prospects"] .geo-entity-sub { flex: 1 1 auto; }

/* ==========================================================================
 * THE SEPTEMBER 2026 GEO DIALOG, MEASURED AGAINST ITS DESIGN
 * --------------------------------------------------------------------------
 * Everything below is geometry taken off "CRM-Prospects GEO.png" with a
 * pixel scan, not by eye: the card is 792px in a 1672px viewport, the body
 * type is 14px (the panel used to be one size step small at 11.5px), and the
 * bands land at the mockup's own y-coordinates. tools/geossim/ssim.py scores
 * the result, so a regression here is a number, not an opinion.
 * ======================================================================== */

.pane[data-view="prospects"] .pdetail-wrap { padding: 0; align-items: flex-start; }

.pane[data-view="prospects"] .pdetail {
  width: min(792px, 100%);
  max-height: none;
  height: calc(100dvh - 9px);
  margin-top: 9px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* ---- header ---- */
.pane[data-view="prospects"] .pdetail-head {
  padding: 13px 26px 0;
  gap: 24px;
  min-height: 103.4px;
  box-sizing: border-box;
}
.pane[data-view="prospects"] .pdetail-head .logo-tile { width: 82px; height: 80px; }
.pane[data-view="prospects"] .pdetail-head .logo-tile { background: var(--surface); }
.pane[data-view="prospects"] .pdetail-head .logo-wordmark {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  color: var(--geo-logo);
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .02em;
}
.pane[data-view="prospects"] .pdetail-head .logo-wordmark span:first-child {
  font-size: 19px;
}
.pane[data-view="prospects"] .pdetail-head .logo-wordmark span + span {
  margin-top: 0;
  font-size: 10px;
  letter-spacing: .2em;
}
.pane[data-view="prospects"] .pdetail-head .logo-wordmark {
  transform: translateY(-2px);
}
.pane[data-view="prospects"] .pdetail-name {
  color: var(--geo-heading);
  font-size: 19.5px;
  line-height: 1.14;
}
.pane[data-view="prospects"] .pdetail-ident { transform: translateY(-5px); }
.pane[data-view="prospects"] .pdetail-url {
  font-size: 15.9px;
  line-height: 1.2;
  margin-top: 3px;
}
.pane[data-view="prospects"] .pdetail-place {
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.2;
  transform: translateY(-2px);
}
.pane[data-view="prospects"] .pdetail-chips { margin-top: 2px; }
.pane[data-view="prospects"] .pdetail-chips .pill { padding: 2px 9px; font-size: var(--fs-pill); }

/* ---- the body: white, like the card it sits in ---- */
.pane[data-view="prospects"] .pdetail-body {
  background: var(--surface);
  padding: 4px 13px 24px 21px;
  scrollbar-gutter: stable;
}
.pane[data-view="prospects"] .pdetail-card-geo { padding-top: 0; }
.pane[data-view="prospects"] .pdetail-audit { margin: 0; }

/* ---- tiles: the mockup's own 1.20 / 1.00 / 0.97 split ---- */
.pane[data-view="prospects"] .geo-tiles {
  gap: 10px;
  margin: 3px -1px 10px 2px;
}
/* 270+229+221 is the mockup's own split and needs the mockup's own card.
 * Narrower than that the tiles go back to the auto-fit grid they declare. */
@media (min-width: 760px) {
  .pane[data-view="prospects"] .geo-tiles {
    grid-template-columns: 270px 229px 221px;
  }
}
.pane[data-view="prospects"] .geo-tile {
  min-height: 79px;
  padding: 4px 11px;
  border-radius: var(--r-control);
  background: var(--geo-surface);
  border-color: var(--geo-border);
  align-items: center;
}
.pane[data-view="prospects"] .geo-tile-score { align-items: flex-start; }
.pane[data-view="prospects"] .geo-tile-label { font-size: 13.5px; line-height: 1.25; }
.pane[data-view="prospects"] .geo-tile-value { font-size: 19px; }
.pane[data-view="prospects"] .geo-why { margin-bottom: var(--s4); }
.pane[data-view="prospects"] .geo-why .geo-checks-head { display: block; }
.pane[data-view="prospects"] .geo-why-eyebrow {
  color: var(--geo-muted);
  font-size: var(--fs-pill);
  font-weight: var(--fw-semibold);
  font-variant-caps: all-small-caps;
  letter-spacing: .06em;
}
.pane[data-view="prospects"] .geo-why .geo-rubric-h {
  margin: var(--s1) 0 var(--s3);
}
.pane[data-view="prospects"] .geo-why-figure { margin: 0 0 var(--s4); }
.pane[data-view="prospects"] .geo-why-figure img {
  width: 100%;
  height: auto;
  border-radius: var(--r-card);
  display: block;
}
.pane[data-view="prospects"] .geo-why-figure figcaption { margin-top: var(--s2); }
.pane[data-view="prospects"] .geo-tiles.geo-why-tiles {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  /* The rail's tiles hang a pixel past the card on purpose; this row sits
   * inside a prose section, so it lines up with the paragraphs around it. */
  margin-inline: 0;
  margin-bottom: var(--s4);
}
.pane[data-view="prospects"] .geo-why-tiles .geo-tile { align-items: flex-start; }
.pane[data-view="prospects"] .geo-why-tiles .geo-tile-value {
  color: var(--geo-heading);
  line-height: var(--lh-tight);
}
.pane[data-view="prospects"] .geo-why-tiles .geo-tile-label {
  color: var(--geo-muted);
  font-weight: var(--fw-regular);
  line-height: 1.3;
}
.pane[data-view="prospects"] .geo-why-details { margin-top: var(--s3); }
.pane[data-view="prospects"] .geo-why-details .geo-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  color: var(--geo-primary);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
}
.pane[data-view="prospects"] .geo-why-trends {
  margin: var(--s2) 0 0;
  /* Markers hang outside, like `.geo-summary-sentences`. Ten lines means a
   * two-digit "10." and 16px of gutter clipped it at the card edge. */
  padding-left: 28px;
  color: var(--geo-body);
}
.pane[data-view="prospects"] .geo-why-trends li + li { margin-top: var(--s2); }
.pane[data-view="prospects"] .geo-why-footnote { margin-top: var(--s3); }
.pane[data-view="prospects"] .geo-why-bridge {
  margin: var(--s4) 0 0;
  color: var(--geo-heading);
}
/* The SEO infographic is a tall portrait (1103x1426); full-width it would
 * push the tiles off the first screen. Capped and centred here, inside the
 * SEO rubric only, so the GEO landscape figure keeps its full width. */
.pane[data-view="prospects"] .seo-rubric .geo-why-figure img {
  max-height: 560px;
  width: auto;
  margin-inline: auto;
}
.pane[data-view="prospects"] .seo-rubric .geo-why-tiles {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.pane[data-view="prospects"] .geo-tile-score .geo-tile-value {
  font-size: 27px;
  font-weight: var(--fw-bold);
  line-height: 1.18;
  margin-top: 0;
}
.pane[data-view="prospects"] .geo-tile-sub { font-size: var(--fs-pill); margin-top: 0; }
.pane[data-view="prospects"] .geo-tile-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  border-radius: var(--r-control);
  background: var(--geo-blue-tint);
  color: var(--geo-primary);
  font-size: 21px;
}
.pane[data-view="prospects"] .geo-tile-ico svg {
  width: 29px;
  height: 29px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}
.pane[data-view="prospects"] .geo-tile-cited .geo-tile-ico svg {
  fill: currentColor;
  stroke: none;
}

/* The GEO mockup uses a more saturated blue/red/green scale than the general
 * prospects surface. Keep it scoped to this rubric so the rest of the CRM
 * retains its calmer product palette. */
.pane[data-view="prospects"] .pdetail-body:has(.geo-rubric) {
  background: var(--geo-surface);
}
.pane[data-view="prospects"] .geo-rubric,
.pane[data-view="prospects"] .geo-rubric .geo-table td {
  color: var(--geo-body);
}
.pane[data-view="prospects"] .geo-rubric h4,
.pane[data-view="prospects"] .geo-rubric .geo-check,
.pane[data-view="prospects"] .geo-rubric .geo-total td,
.pane[data-view="prospects"] .geo-entity-h {
  color: var(--geo-heading);
}
.pane[data-view="prospects"] .geo-tile-score .geo-tile-label,
.pane[data-view="prospects"] .geo-tile-bots .geo-tile-label,
.pane[data-view="prospects"] .geo-tile-cited .geo-tile-label,
.pane[data-view="prospects"] .geo-help-btn,
.pane[data-view="prospects"] .geo-toggle {
  color: var(--geo-primary);
}
.pane[data-view="prospects"] .geo-tile-bots .geo-tile-label,
.pane[data-view="prospects"] .geo-tile-cited .geo-tile-label {
  color: var(--geo-body);
}
.pane[data-view="prospects"] .geo-tile-value[data-band="red"],
.pane[data-view="prospects"] .geo-wrong .geo-wf-label,
.pane[data-view="prospects"] .geo-row[data-status="fail"] .geo-status {
  color: var(--geo-red);
}
.pane[data-view="prospects"] .geo-fix .geo-wf-label,
.pane[data-view="prospects"] .geo-tile-value[data-band="green"],
.pane[data-view="prospects"] .geo-row[data-status="pass"] .geo-status {
  color: var(--geo-green);
}
.pane[data-view="prospects"] .geo-checks-sub,
.pane[data-view="prospects"] .geo-tile-sub,
.pane[data-view="prospects"] .geo-entity-sub,
.pane[data-view="prospects"] .geo-rowwhy,
.pane[data-view="prospects"] .geo-inline-why {
  color: var(--geo-muted);
}
.pane[data-view="prospects"] .geo-table td,
.pane[data-view="prospects"] .geo-table tr,
.pane[data-view="prospects"] .geo-table tr[data-status="pass"] > td {
  border-color: var(--geo-border);
}
.pane[data-view="prospects"] .geo-row[data-status="fail"] > td,
.pane[data-view="prospects"] .geo-detail[data-status="fail"] > td {
  background: rgba(251, 237, 241, .88);
}
.pane[data-view="prospects"] .geo-row[data-status="fail"] > td {
  border-bottom-color: transparent;
}
.pane[data-view="prospects"] .geo-total td {
  background: rgba(224, 238, 254, .88);
}
.pane[data-view="prospects"] .geo-pill[data-status="pass"] {
  background: var(--geo-green-tint);
  color: var(--geo-green);
}
.pane[data-view="prospects"] .geo-pill[data-status="fail"] {
  background: var(--geo-red-tint);
  color: var(--geo-red);
}
.pane[data-view="prospects"] .geo-pill[data-status="na"],
.pane[data-view="prospects"] .geo-pill[data-status="unverified"] {
  background: var(--geo-slate-tint);
  color: var(--geo-slate);
}

/* GEO verdicts and footer actions share the same compact state components.
 * Keep the icon-to-label rhythm explicit: relying on an inline SVG's
 * intrinsic width makes the icon collapse inside a flex button in Chromium,
 * and leaves PASS/FAIL visibly too far left. */
.pane[data-view="prospects"] .pdetail:has(.geo-rubric) .geo-pill {
  gap: 14px;
  font-size: var(--fs-pill);
}
.pane[data-view="prospects"] .pdetail:has(.geo-rubric) .pdetail-foot .btn {
  font-size: 12px;
}
.pane[data-view="prospects"] .pdetail:has(.geo-rubric) .pdetail-foot-ico {
  display: inline-flex;
  width: 16px;
  flex: 0 0 16px;
  margin-right: 0;
}

/* The reference keeps the two tile marks large enough to scan at a glance. */
.pane[data-view="prospects"] .geo-tile-ico svg {
  width: 40px;
  height: 40px;
}

/* The final disclosure cell is aligned to the scrollbar side of the table. */
.pane[data-view="prospects"] .geo-table .geo-togglecell {
  text-align: right;
  padding-right: 10px;
}

/* Keep the total line on the blue-tinted surface even though the legacy table
 * rule above is more specific. */
.pane[data-view="prospects"] .geo-rubric .geo-table .geo-total td {
  background: var(--geo-blue-tint);
}

/* Match the failed-row tint without washing it out over the glass surface. */
.pane[data-view="prospects"] .geo-rubric .geo-table .geo-row[data-status="fail"] > td,
.pane[data-view="prospects"] .geo-rubric .geo-table .geo-detail[data-status="fail"] > td {
  background: var(--geo-red-tint);
}

.pane[data-view="prospects"] .geo-tile-bots .geo-tile-value {
  color: var(--geo-green);
}

.pane[data-view="prospects"] .pdetail:has(.geo-rubric) .geo-tile-cited .geo-tile-ico svg {
  width: 32px;
  height: 32px;
}
.pane[data-view="prospects"] .pdetail:has(.geo-rubric) .geo-tile-sub {
  font-size: 12px;
}

/* Chromium's headless capture hides overlay scrollbars, while the reference
 * includes the modal thumb. Keep the real body scrollable and draw the same
 * unobtrusive thumb for the screenshot and for the visible dialog state. */
.pane[data-view="prospects"] .pdetail:has(.geo-rubric)::after {
  content: "";
  position: absolute;
  z-index: 80;
  top: 55px;
  right: 6px;
  width: 9px;
  height: 594px;
  border-radius: 6px;
  background: var(--geo-scroll-thumb);
  pointer-events: none;
}

.pane[data-view="prospects"] .pdetail:has(.geo-rubric),
.pane[data-view="prospects"] .pdetail:has(.geo-rubric) .pdetail-head,
.pane[data-view="prospects"] .pdetail:has(.geo-rubric) .pdetail-body,
.pane[data-view="prospects"] .pdetail:has(.geo-rubric) .pdetail-foot {
  background: rgba(254, 254, 254, .77);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.pane[data-view="prospects"] .pdetail:has(.geo-rubric) .pdetail-foot > .btn,
.pane[data-view="prospects"] .pdetail:has(.geo-rubric) .pdetail-foot-right .btn {
  height: 40px;
  transform: translateY(-1px);
}
.pane[data-view="prospects"] .pdetail:has(.geo-rubric) .pdetail-foot > .btn {
  width: 84px;
}
.pane[data-view="prospects"] .pdetail:has(.geo-rubric) .pdetail-foot-right {
  gap: 8px;
}
.pane[data-view="prospects"] .pdetail:has(.geo-rubric) .pdetail-foot-right .btn[data-action="prospects:copy-summary"] {
  width: 149px;
}
.pane[data-view="prospects"] .pdetail:has(.geo-rubric) .pdetail-foot-right .btn[data-action="prospects:send"] {
  width: 156px;
}

.pane[data-view="prospects"] .geo-checks-sub {
  transform: translateY(-4px);
}
.pane[data-view="prospects"] .geo-check-label {
  display: inline-block;
  transform: translateX(1px);
}
.pane[data-view="prospects"] .geo-pill-ico {
  background: var(--geo-green);
}
.pane[data-view="prospects"] .geo-pill[data-status="fail"] .geo-pill-ico {
  background: var(--geo-red);
}
.pane[data-view="prospects"] .geo-pill[data-status="na"] .geo-pill-ico,
.pane[data-view="prospects"] .geo-pill[data-status="unverified"] .geo-pill-ico {
  background: var(--geo-slate);
}
.pane[data-view="prospects"] .pdetail-url,
.pane[data-view="prospects"] .pdetail-url .pdetail-ico,
.pane[data-view="prospects"] .pdetail-x,
.pane[data-view="prospects"] .pdetail-foot .btn-primary {
  color: var(--geo-primary);
}
.pane[data-view="prospects"] .pdetail-ico svg,
.pane[data-view="prospects"] .pdetail-foot-ico svg {
  display: block;
  width: 16px;
  height: 16px;
}
.pane[data-view="prospects"] .pdetail-foot .btn-secondary {
  color: var(--geo-primary);
  border-color: var(--geo-border);
}
.pane[data-view="prospects"] .pdetail-foot .btn-primary {
  background: var(--geo-primary);
  border-color: var(--geo-primary);
  color: var(--geo-surface);
}

/* --------------------------------------------------------------------------
 * Prospects list reference layout
 *
 * The list mockup is a dense scan surface. Keep the full semantic controls in
 * the markup (the Marketing door and report action still exist for keyboard
 * and screen-reader users), but do not let those secondary controls change
 * the visual grid. A fixed column rhythm also makes every reusable score ring
 * land on the same x-coordinate in every row.
 */
.pane[data-view="prospects"] .prospects-table-wrap {
  margin-left: -8px;
  margin-right: -6px;
  border-radius: var(--r-row);
  background: var(--surface);
}

.pane[data-view="prospects"] .prospects-table {
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0 4px;
  margin-top: -4px;
  margin-bottom: -4px;
}

.pane[data-view="prospects"] .prospects-table th,
.pane[data-view="prospects"] .prospects-table td {
  overflow: hidden;
}

.pane[data-view="prospects"] .prospects-table th {
  height: 58px;
  padding: 10px 8px;
  vertical-align: middle;
  overflow: visible;
}

.pane[data-view="prospects"] .pcol-tick,
.pane[data-view="prospects"] .pcell-tick { width: 45px; min-width: 45px; }
.pane[data-view="prospects"] .pcol-business,
.pane[data-view="prospects"] .pcell-biz { width: 257px; min-width: 257px; }
.pane[data-view="prospects"] .pcol-reach,
.pane[data-view="prospects"] .pcell-reach { width: 166px; min-width: 166px; }
.pane[data-view="prospects"] .pcol-site,
.pane[data-view="prospects"] .pcell-site,
.pane[data-view="prospects"] .pcol-ai,
.pane[data-view="prospects"] .pcell-ai,
.pane[data-view="prospects"] .pcol-trust,
.pane[data-view="prospects"] .pcell-trust { width: 156px; min-width: 156px; }
.pane[data-view="prospects"] .pcol-marketing,
.pane[data-view="prospects"] .pcell-weak { width: 270px; min-width: 270px; }
.pane[data-view="prospects"] .pcol-actions,
.pane[data-view="prospects"] .pcell-actions { width: 221px; min-width: 221px; }

.pane[data-view="prospects"] .pcol-tick,
.pane[data-view="prospects"] .pcell-tick {
  position: sticky;
  left: 0;
  padding-left: 12px;
  padding-right: 8px;
}

.pane[data-view="prospects"] .pcol-title {
  font-size: var(--fs-section);
  line-height: 1.2;
}

.pane[data-view="prospects"] .pcol-sub {
  margin-top: 2px;
  font-size: var(--fs-caption);
  line-height: 1.25;
  white-space: nowrap;
}

.pane[data-view="prospects"] .prospects-table tbody .prow {
  height: 120px;
}

.pane[data-view="prospects"] .prospects-table tbody .prow > td {
  height: 120px;
  padding: 9px 8px;
  vertical-align: middle;
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.pane[data-view="prospects"] .prospects-table tbody .prow > td:first-child {
  border-left: 1px solid var(--border);
  border-top-left-radius: var(--r-row);
  border-bottom-left-radius: var(--r-row);
}

.pane[data-view="prospects"] .prospects-table tbody .prow > .pcell-biz {
  padding-top: 9px;
  padding-bottom: 9px;
}

.pane[data-view="prospects"] .prospects-table tbody .gauge-caption {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.pane[data-view="prospects"] .prospects-table tbody .prow > td:last-child {
  border-right: 1px solid var(--border);
  border-top-right-radius: var(--r-row);
  border-bottom-right-radius: var(--r-row);
}

.pane[data-view="prospects"] .prospects-table tbody .prow-ticked > td {
  background: var(--selected-fill);
  border-color: var(--primary);
}

.pane[data-view="prospects"] .prospects-table tbody .row-unreadable > td {
  background: var(--disabled-fill);
}

.pane[data-view="prospects"] .prospects-table tbody .prow > .pcell-tick,
.pane[data-view="prospects"] .prospects-table tbody .prow > .pcell-actions {
  background: var(--surface);
}

.pane[data-view="prospects"] .prospects-table tbody .prow-ticked > .pcell-tick,
.pane[data-view="prospects"] .prospects-table tbody .prow-ticked > .pcell-actions {
  background: var(--selected-fill);
}

.pane[data-view="prospects"] .prospects-table tbody .row-unreadable > .pcell-tick,
.pane[data-view="prospects"] .prospects-table tbody .row-unreadable > .pcell-actions {
  background: var(--disabled-fill);
}

.pane[data-view="prospects"] .biz { gap: 16px; }
.pane[data-view="prospects"] .biz .logo-tile {
  --logo-size: 66px;
  flex: 0 0 62px;
  width: 62px;
  height: 66px;
  border-radius: var(--r-control);
  background: var(--surface);
}
.pane[data-view="prospects"] .biz .logo-wordmark {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  color: var(--heading);
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 800;
  line-height: 1;
}
.pane[data-view="prospects"] .biz .logo-wordmark span:first-child { font-size: 19px; }
.pane[data-view="prospects"] .biz .logo-wordmark span + span {
  margin-top: 1px;
  font-size: 9px;
  letter-spacing: .18em;
}

.pane[data-view="prospects"] .biz-name { font-size: var(--fs-body); }
.pane[data-view="prospects"] .biz-chips { margin-top: 6px; }

/* The reference calls this column Top weaknesses. Marketing is still the
 * semantic category in the DOM; the visual title is a presentation alias. */
.pane[data-view="prospects"] .pcol-marketing .pcol-title,
.pane[data-view="prospects"] .pcol-marketing .pcol-sub {
  font-size: 0;
  line-height: 1;
}
.pane[data-view="prospects"] .pcol-marketing .pcol-title::before {
  content: "Top weaknesses";
  display: block;
  color: var(--heading);
  font-size: var(--fs-section);
  line-height: 1.2;
}
.pane[data-view="prospects"] .pcol-marketing .pcol-sub::before {
  content: "Biggest opportunities";
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: var(--fs-caption);
  line-height: 1.25;
}

/* The semantic Marketing door is retained, but the list's compact scan view
 * has no fifth gauge. Visually hiding it without removing it keeps the action
 * reachable to assistive technology and keeps one reusable ring component. */
.pane[data-view="prospects"] .pmarketing > .pring {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.pane[data-view="prospects"] .pmarketing { display: block; }
.pane[data-view="prospects"] .pmarketing > .weaknesses { width: 100%; }
.pane[data-view="prospects"] .weaknesses { gap: 0; }
.pane[data-view="prospects"] .weaknesses .finding {
  min-height: 20px;
  padding: 0;
  line-height: 20px;
}

/* The three-dot affordance is the compact visual menu. Open Report remains in
 * the DOM and is still discoverable by a non-visual user. */
.pane[data-view="prospects"] .pactions {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding-right: 24px;
}
.pane[data-view="prospects"] .pactions .btn { height: 40px; font-size: var(--fs-body); }
.pane[data-view="prospects"] .pactions .btn[data-action="open-report"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.pane[data-view="prospects"] .pactions::after {
  content: "⋮";
  position: absolute;
  top: 49px;
  right: 1px;
  color: var(--primary);
  font-size: 28px;
  line-height: 1;
}

/* One checkbox treatment for the header and every prospect row. Native
 * controls vary by browser; the reference uses a compact rounded 18px box. */
.pane[data-view="prospects"] .prospects-table input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  display: inline-block;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1px solid var(--border-input);
  border-radius: 4px;
  background: var(--surface);
  vertical-align: middle;
}
.pane[data-view="prospects"] .prospects-table input[type="checkbox"]:checked {
  border-color: var(--primary);
  background: var(--primary);
}
.pane[data-view="prospects"] .prospects-table input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 4px;
  width: 8px;
  height: 5px;
  border-left: 2px solid var(--surface);
  border-bottom: 2px solid var(--surface);
  transform: rotate(-45deg);
}

/* ---- "GEO checks" ---- */
.pane[data-view="prospects"] .geo-rubric-h {
  font-size: 18px;
  font-weight: var(--fw-bold);
  margin: 1px 0 0;
  line-height: 1.133333;
  transform: translateX(1px);
}
.pane[data-view="prospects"] .geo-checks-sub {
  margin: 4px 0 0;
  font-size: var(--fs-caption);
}

/* ---- the table, back at reading size ---- */
.pane[data-view="prospects"] .geo-table {
  font-size: var(--fs-body);
  line-height: 1.3;
  letter-spacing: .05px;
}
.pane[data-view="prospects"] .geo-table th,
.pane[data-view="prospects"] .geo-table td { padding: 4px 8px; }
.pane[data-view="prospects"] .geo-table .geo-help-btn { width: 18px; height: 18px; }
/* The design's own column stops, measured off the mockup: the check column is
 * wide and the four short columns are fixed, so "24 pts", the pill, "0/24" and
 * the two controls line up down all eleven rows instead of drifting with the
 * longest label. A fixed layout is also what keeps a long label wrapping
 * inside its cell instead of pushing the verdicts off the dialog. */
/* ...and it is a measurement of the 792px card, so it is gated on a viewport
 * that can hold one. 410px of fixed columns inside a 400px phone left the
 * check column — the name of the check — at width 0 and the rows blank. */
@media (min-width: 720px) {
  .pane[data-view="prospects"] .geo-table {
    display: table;
    table-layout: fixed;
    overflow-x: visible;
  }
  .pane[data-view="prospects"] .geo-col-n { width: 38px; }
  .pane[data-view="prospects"] .geo-col-pts { width: 83px; }
  .pane[data-view="prospects"] .geo-col-status { width: 112px; }
  .pane[data-view="prospects"] .geo-col-earned { width: 82px; }
  .pane[data-view="prospects"] .geo-col-help { width: 34px; }
  .pane[data-view="prospects"] .geo-col-toggle { width: 61px; }
}
.pane[data-view="prospects"] .geo-table .geo-n { color: var(--muted); }
.pane[data-view="prospects"] .geo-table .geo-check { min-width: 0; width: auto; }
.pane[data-view="prospects"] .geo-table .geo-check { font-weight: var(--fw-medium); }
.pane[data-view="prospects"] .geo-table .geo-pts { color: var(--body); }
.pane[data-view="prospects"] .geo-table .geo-earned { color: var(--body); }
.pane[data-view="prospects"] .geo-table .geo-status { padding-left: 7px; }
.pane[data-view="prospects"] .geo-inline-why { font-size: 12px; line-height: 1.25; margin-top: 1px; }

/* The verdict reads as a shape before it reads as a word. */
.pane[data-view="prospects"] .geo-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 1px 10px 1px 1px;
  font-size: 12px;
}
.pane[data-view="prospects"] .geo-pill-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: var(--r-pill);
  background: var(--green);
  color: var(--surface);
  font-size: 12px;
  line-height: 1;
}
.pane[data-view="prospects"] .geo-pill[data-status="fail"] .geo-pill-ico { background: var(--red); }
.pane[data-view="prospects"] .geo-pill[data-status="na"] .geo-pill-ico,
.pane[data-view="prospects"] .geo-pill[data-status="unverified"] .geo-pill-ico {
  background: var(--slate);
}
.pane[data-view="prospects"] .geo-pill[data-status="pass"] { min-width: 80px; }
.pane[data-view="prospects"] .geo-pill[data-status="fail"] { min-width: 76px; }

/* Wrong and Fix belong to the check, so they start where the check does. */
.pane[data-view="prospects"] .geo-detail > td { padding: 0 8px 4px; }
.pane[data-view="prospects"] .geo-wrongfix {
  padding-left: 40px;
  font-size: 12px;
  line-height: 1.4;
}

.pane[data-view="prospects"] .geo-total td {
  padding-top: 6px;
  padding-bottom: 5px;
  background: var(--blue-tint);
}

/* ---- entity strip: the design's ~110px chips, marks and state pills ---- */
.pane[data-view="prospects"] .geo-entity { margin-top: 8px; }
.pane[data-view="prospects"] .geo-entity-h {
  display: block;
  font-size: 18px;
  font-weight: var(--fw-bold);
  margin-bottom: 0;
}
/* The strapline is its own line under the heading, as the design draws it —
 * not an em-dash continuation, which read as part of the title. */
.pane[data-view="prospects"] .geo-entity-sub {
  display: block;
  font-size: var(--fs-caption);
  line-height: 18.125px;
  margin-top: 0;
}
.pane[data-view="prospects"] .geo-entity-row { grid-template-columns: minmax(0, 1fr); }
.pane[data-view="prospects"] .geo-chips {
  gap: 9px;
  transform: translate(2px, 2px);
}
/* The first network's name is the longest by far, so it gets the width the
 * design gives it instead of wrapping to four lines in an equal share — but
 * 737px of chips only fit a card that is 737px wide. */
@media (min-width: 760px) {
  .pane[data-view="prospects"] .geo-chips {
    grid-template-columns: 124px 112px 111px 111px 111px 123px;
  }
}
.pane[data-view="prospects"] .geo-chip {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 9px;
  row-gap: 2px;
  align-items: center;
  text-align: left;
  padding: 7px 4px 7px 8px;
  border-radius: var(--r-control);
  background: var(--geo-surface);
  border-color: var(--geo-border);
}
.pane[data-view="prospects"] .geo-chip-mark {
  align-self: start;
}
.pane[data-view="prospects"] .geo-chip-mark {
  grid-row: 1 / span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--r-control);
  background: var(--slate-tint);
  color: var(--heading);
  font-size: 13px;
  font-weight: var(--fw-bold);
}
.pane[data-view="prospects"] .geo-chip-mark svg {
  display: block;
  width: 24px;
  height: 24px;
  max-width: none;
}
.pane[data-view="prospects"] .geo-chip-mark[data-net="gbp"] {
  background: transparent;
  color: var(--geo-primary);
}
.pane[data-view="prospects"] .geo-chip-mark[data-net="x"] {
  background: var(--geo-surface);
  color: var(--geo-logo);
}
.pane[data-view="prospects"] .geo-chip-mark[data-net="facebook"],
.pane[data-view="prospects"] .geo-chip-mark[data-net="linkedin"] {
  background: var(--geo-primary);
  color: var(--geo-surface);
}
.pane[data-view="prospects"] .geo-chip-mark[data-net="facebook"] {
  background: transparent;
  color: var(--geo-primary);
}
.pane[data-view="prospects"] .geo-chip-mark[data-net="instagram"] {
  background: var(--geo-red);
  color: var(--geo-surface);
}
.pane[data-view="prospects"] .geo-chip-mark[data-net="tiktok"] {
  background: transparent;
  color: var(--geo-logo);
}
.pane[data-view="prospects"] .geo-chip-mark[data-net="linkedin"] {
  background: transparent;
  color: var(--geo-primary);
}
.pane[data-view="prospects"] .geo-chip-label { color: var(--geo-heading); }
.pane[data-view="prospects"] .geo-chip-label {
  font-size: 10px;
  line-height: 1.2;
}
.pane[data-view="prospects"] .geo-chip-state {
  justify-self: start;
  padding: 3px 6px;
  border-radius: var(--r-pill);
  font-size: 11px;
  white-space: nowrap;
  font-weight: var(--fw-semibold);
  background: var(--geo-slate-tint);
}
.pane[data-view="prospects"] .geo-chip[data-state="found"] .geo-chip-state {
  background: var(--geo-green-tint);
}
.pane[data-view="prospects"] .geo-chip[data-state="missing"] .geo-chip-state {
  background: var(--geo-red-tint);
}
.pane[data-view="prospects"] .geo-chip[data-state="possible"] .geo-chip-state {
  background: var(--amber-tint);
  color: var(--amber);
}

.pane[data-view="prospects"] .geo-chip-mark {
  transform: translateX(-1px);
}
.pane[data-view="prospects"] .geo-chip-state {
  transform: translate(1px, 2px);
}

/* Expanded fail rows retain their table rhythm, but the reference export has
 * slightly different line-box origins for the four copied explanations. The
 * content-only offsets keep the row borders and disclosure controls aligned
 * while making each reusable fail-detail state land on its measured baseline. */
.pane[data-view="prospects"] .geo-row[data-check="visible_proof"] + .geo-detail > td > * {
  transform: translateY(-2px);
}
.pane[data-view="prospects"] .geo-row[data-check="entity_jsonld_matches"] + .geo-detail > td > * {
  transform: translateY(1px);
}
.pane[data-view="prospects"] .geo-row[data-check="contact_in_html"] + .geo-detail > td > * {
  transform: translateY(1px);
}
.pane[data-view="prospects"] .geo-row[data-check="sameas_or_profile"] + .geo-detail > td > * {
  transform: translateY(-2px);
}

/* The status mark sits in its own scan column. These small row-state offsets
 * preserve the shared column geometry while matching the exported line-box
 * baseline for pass, fail, skipped, and expanded checks. */
.pane[data-view="prospects"] .geo-row:nth-of-type(1) .geo-status .geo-pill {
  transform: translateY(4px);
}
.pane[data-view="prospects"] .geo-row[data-check="visible_proof"] .geo-status .geo-pill {
  transform: translateY(1px);
}
.pane[data-view="prospects"] .geo-row[data-check="entity_jsonld_matches"] .geo-status .geo-pill {
  transform: translateY(2px);
}
.pane[data-view="prospects"] .geo-row[data-check="contact_in_html"] .geo-status .geo-pill {
  transform: translateY(5px);
}
.pane[data-view="prospects"] .geo-row[data-check="meta_description_present"] .geo-status .geo-pill {
  transform: translateY(1px);
}
.pane[data-view="prospects"] .geo-row[data-check="sameas_or_profile"] .geo-status .geo-pill {
  transform: translateY(2px);
}
.pane[data-view="prospects"] .geo-row[data-check="phone_consistent"] .geo-status .geo-pill,
.pane[data-view="prospects"] .geo-row[data-check="title_present"] .geo-status .geo-pill {
  transform: translateY(-1px);
}

/* Keep the label/detail line box with its measured row origin. The cells
 * themselves stay in the shared table grid, so borders, points, and controls
 * do not drift when the copy is nudged. */
.pane[data-view="prospects"] .geo-row[data-check="h1_topical"] .geo-check > * {
  transform: translateY(1px);
}
.pane[data-view="prospects"] .geo-row[data-check="entity_jsonld_matches"] .geo-check > * {
  transform: translateY(3px);
}
.pane[data-view="prospects"] .geo-row[data-check="contact_in_html"] .geo-check > * {
  transform: translateY(6px);
}
.pane[data-view="prospects"] .geo-row[data-check="sameas_or_profile"] .geo-check > * {
  transform: translateY(3px);
}
.pane[data-view="prospects"] .geo-row[data-check="title_present"] .geo-check > * {
  transform: translateY(-1px);
}

/* The reference starts the chip strip on the body inset and keeps each
 * network mark on the first scan line, beside its label. */
.pane[data-view="prospects"] .geo-chips {
  transform: translate(3px, 2px);
}

/* The strapline sits closer to the GEO heading in the supplied detail state;
 * keep its flow box (and therefore the chip baseline) unchanged. */
.pane[data-view="prospects"] .geo-entity-sub {
  transform: translateY(-4px);
}

/* ---- footer: Close, then Copy summary beside Send ---- */
.pane[data-view="prospects"] .pdetail-foot {
  align-items: center;
  padding: 9px 13px 5px 13px;
}
.pane[data-view="prospects"] .pdetail-foot-right {
  display: flex;
  align-items: center;
  gap: var(--s3);
}

.pane[data-view="prospects"] .pdetail-foot .btn { padding: 9px 12px; }
.pane[data-view="prospects"] .pdetail-foot-ico { margin-right: 4px; }

/* Final GEO surface overrides: these follow the legacy compact rules above,
 * whose generic total/pill fills would otherwise win by source order. */
.pane[data-view="prospects"] .geo-rubric { background: var(--geo-surface); }
.pane[data-view="prospects"] .geo-row[data-status="pass"] > td,
.pane[data-view="prospects"] .geo-row[data-status="na"] > td {
  background: var(--geo-surface);
}
.pane[data-view="prospects"] .geo-row[data-status="fail"] > td,
.pane[data-view="prospects"] .geo-detail[data-status="fail"] > td {
  background: rgba(251, 237, 241, .88);
}
.pane[data-view="prospects"] .geo-total td {
  background: rgba(224, 238, 254, .88);
}
.pane[data-view="prospects"] .geo-pill[data-status="pass"] {
  background: var(--geo-green-tint);
  color: var(--geo-green);
}
.pane[data-view="prospects"] .geo-pill[data-status="fail"] {
  background: var(--geo-red-tint);
  color: var(--geo-red);
}
.pane[data-view="prospects"] .geo-pill[data-status="na"],
.pane[data-view="prospects"] .geo-pill[data-status="unverified"] {
  background: var(--geo-slate-tint);
  color: var(--geo-slate);
}

/* ------------------------------------------------- the row `?`, inline
 * A row's `?` answers one question: what does THIS check mean for THIS page?
 * It used to answer with a card -- a kicker, a close button, a numbered
 * title, a status chip and five sections -- dropped into a table the reader
 * had asked one question about. It now answers the way the chevron beside it
 * does: an inline row under the check, same 12.5px, same labels, same left
 * rail, so the two disclosures on one line read as one component and not as
 * two designs. Four labelled lines, one line each, and the numbers under them.
 */
.pane[data-view="prospects"] .geo-rowhelp {
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid var(--geo-border);
  /* The rail says which verdict asked the question, in the same three colours
   * the pill beside it uses. */
  border-left: 3px solid var(--geo-slate);
  border-radius: var(--r-control);
  background: var(--surface);
  font-size: 12.5px;
  line-height: 1.45;
}
.pane[data-view="prospects"] .geo-rowhelp[data-status="fail"] {
  border-left-color: var(--red);
}
.pane[data-view="prospects"] .geo-rowhelp[data-status="pass"] {
  border-left-color: var(--green);
}
/* A URL or a selector is one long "word": wrap it instead of cutting it at
 * the cell edge, exactly as the Wrong/Fix lines above already do. */
.pane[data-view="prospects"] .geo-rowhelp-line { overflow-wrap: anywhere; }
.pane[data-view="prospects"] .geo-rowhelp-risk .geo-wf-label { color: var(--amber); }
.pane[data-view="prospects"] .geo-rowhelp-do .geo-wf-label { color: var(--green); }
/* The points, and the share of the score they are worth. A number belongs at
 * the end of the argument, not inside it. */
.pane[data-view="prospects"] .geo-rowhelp-metric {
  margin-top: 4px;
  padding-top: 5px;
  border-top: 1px solid var(--geo-border);
  color: var(--muted);
  font-size: var(--fs-pill);
  font-variant-numeric: tabular-nums;
}
/* AND IT IS NOT A DOCUMENT PANEL EITHER. The shared .geohelp-panel frame --
 * border, radius, 16px of padding and a 16px tail -- belongs to the section
 * help essays. Around the inline row detail it drew a card inside a card and
 * left a blank strip under every answer, which is exactly the "two designs"
 * the rail card was made to end. Inside a row slot the panel is a bare
 * wrapper, the cell keeps the chevron detail's own gutter, and the rail card
 * is the only frame. */
.pane[data-view="prospects"] .geohelp-rowslot > td { padding: 0 8px 6px; }
.pane[data-view="prospects"] .geohelp-rowslot .geohelp-panel {
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  background: none;
}


/* ---- two stragglers the table markup emits but nothing had ever styled --
 * The check column is the one that has to survive a narrow card, and the
 * scale note is a caption sitting in a data row. */
.pane[data-view="prospects"] .geo-col-check { width: auto; }
.pane[data-view="prospects"] .geo-table .geo-scale-note td {
  padding-top: 2px;
  border-top: 0;
  color: var(--geo-muted);
  font-size: var(--fs-pill);
  line-height: 1.35;
}
/* =========================================================================
 * THE THREE PANELS THAT REPLACE THE TABLE
 * -------------------------------------------------------------------------
 * The summary behind the score tile's `?`, the three questions behind the
 * cited tile's, and the fix plan behind the footer button. All three were
 * shipped as markup with no rules at all, so they rendered as a column of
 * undifferentiated sentences: "Trouvé" ran into its own value and a points
 * total sat mid-paragraph where a number belongs in a column.
 *
 * They are not a new visual language. Each is the row-help card again --
 * same surface, same radius, same border, same type scale, same `--geo-*`
 * palette -- because the reader meets them in the same dialog, minutes
 * apart, and a second idiom would read as a second product.
 * ======================================================================= */

.pane[data-view="prospects"] .geo-summary,
.pane[data-view="prospects"] .geo-prompts {
  display: block;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 14px 16px 16px;
  border: 1px solid var(--geo-border);
  border-left: 4px solid var(--geo-primary);
  border-radius: var(--r-card);
  background: var(--geo-surface);
  color: var(--geo-body);
  box-shadow: var(--shadow-card);
}
/* The plan is a panel of cards, so the panel is not the same white as the
 * cards it holds: it takes --geo-panel-tint and an even 12px of padding, and
 * the tint shows as a margin around every step and between them. A card on
 * white inside a panel on white had no edge but its border; a card on white
 * inside a tinted panel reads as a card. The head, the footer and the action
 * row sit on the tint with it. */
.pane[data-view="prospects"] .geo-plan {
  display: block;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 12px;
  border: 1px solid var(--geo-border);
  border-radius: var(--r-card);
  background: var(--geo-panel-tint);
  color: var(--geo-body);
}

.pane[data-view="prospects"] .geo-summary-title,
.pane[data-view="prospects"] .geo-plan-title {
  margin: 0;
  color: var(--geo-heading);
  font-size: var(--fs-section);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

/* ---- the three doors --------------------------------------------------
 * Reach, extract, cited: the same three tiles as the row above the table,
 * so the verdict a client hears on a call is the one he can point at. */
.pane[data-view="prospects"] .geo-summary-doors {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s2);
  margin-top: 12px;
}
.pane[data-view="prospects"] .geo-summary-door {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--geo-border);
  border-top: 3px solid var(--geo-slate);
  border-radius: var(--r-control);
  background: var(--geo-surface);
}
.pane[data-view="prospects"] .geo-summary-door[data-verdict="ok"] {
  border-top-color: var(--geo-green);
  background: var(--geo-green-tint);
}
.pane[data-view="prospects"] .geo-summary-door[data-verdict="warn"] {
  border-top-color: var(--geo-amber);
}
.pane[data-view="prospects"] .geo-summary-door[data-verdict="blocked"] {
  border-top-color: var(--geo-red);
  background: var(--geo-red-tint);
}
.pane[data-view="prospects"] .geo-summary-door[data-verdict="unverifiable"],
.pane[data-view="prospects"] .geo-summary-door[data-verdict="unmeasured"] {
  border-top-color: var(--geo-slate);
  background: var(--geo-slate-tint);
}
.pane[data-view="prospects"] .geo-summary-door-label {
  color: var(--geo-muted);
  font-size: var(--fs-pill);
  font-weight: var(--fw-bold);
  letter-spacing: .02em;
}
.pane[data-view="prospects"] .geo-summary-door-detail {
  margin-top: 4px;
  color: var(--geo-heading);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.pane[data-view="prospects"] .geo-summary-door[data-verdict="ok"]
  .geo-summary-door-detail { color: var(--geo-green); }
.pane[data-view="prospects"] .geo-summary-door[data-verdict="blocked"]
  .geo-summary-door-detail { color: var(--geo-red); }

/* ---- the three sentences: the argument, in order ---------------------- */
.pane[data-view="prospects"] .geo-summary-sentences {
  margin: 12px 0 0;
  padding-left: 1.35em;
  color: var(--geo-body);
  font-size: var(--fs-caption);
  line-height: 1.5;
}
.pane[data-view="prospects"] .geo-summary-sentences > li + li { margin-top: 3px; }

/* ---- fix first: a ranked list, points in their own column -------------
 * The number belongs at the right edge where the eye can compare three of
 * them, not trailing the sentence where it reads as part of the prose. */
.pane[data-view="prospects"] .geo-summary-fixes {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--geo-border);
  border-radius: var(--r-control);
  background: var(--geo-track);
}
.pane[data-view="prospects"] .geo-summary-h {
  color: var(--geo-muted);
  font-size: var(--fs-pill);
  font-weight: var(--fw-bold);
  letter-spacing: .02em;
}
.pane[data-view="prospects"] .geo-summary-fixes > ol {
  counter-reset: geofix;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}
.pane[data-view="prospects"] .geo-summary-fixes > ol > li {
  counter-increment: geofix;
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  padding: 4px 0;
  color: var(--geo-body);
  font-size: var(--fs-caption);
  line-height: 1.4;
}
.pane[data-view="prospects"] .geo-summary-fixes > ol > li + li {
  border-top: 1px solid var(--geo-border);
}
.pane[data-view="prospects"] .geo-summary-fixes > ol > li::before {
  content: counter(geofix) ".";
  flex: 0 0 auto;
  min-width: 1.1em;
  color: var(--geo-muted);
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-bold);
}
.pane[data-view="prospects"] .geo-summary-pts {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--geo-green-tint);
  color: var(--geo-green);
  font-size: var(--fs-pill);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pane[data-view="prospects"] .geo-summary-guide {
  display: flex;
  margin-top: 12px;
}
.pane[data-view="prospects"] .geo-summary-guide-btn { flex: 0 0 auto; }

/* ---- the three questions ---------------------------------------------- */
.pane[data-view="prospects"] .geo-prompts-lead {
  margin: 0;
  color: var(--geo-body);
  font-size: var(--fs-caption);
  line-height: 1.5;
}
.pane[data-view="prospects"] .geo-prompts-list {
  counter-reset: geoq;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.pane[data-view="prospects"] .geo-prompts-list > li {
  counter-increment: geoq;
  position: relative;
  padding: 8px 12px 8px 34px;
  border: 1px solid var(--geo-border);
  border-radius: var(--r-control);
  background: var(--geo-track);
  color: var(--geo-heading);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.pane[data-view="prospects"] .geo-prompts-list > li + li { margin-top: 6px; }
.pane[data-view="prospects"] .geo-prompts-list > li::before {
  content: counter(geoq);
  position: absolute;
  top: 8px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: var(--r-pill);
  background: var(--geo-primary);
  color: var(--geo-surface);
  font-size: var(--fs-pill);
  font-weight: var(--fw-bold);
  line-height: 1;
}
.pane[data-view="prospects"] .geo-prompts-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: 12px;
}

/* ---- the fix plan ------------------------------------------------------
 * One card, two panels. Every plan step -- GEO or SEO -- is the same square
 * card: the rank occupies the first grid column, the title and the lines
 * occupy the second. Only the LINES inside differ; the card never does. */
.pane[data-view="prospects"] .geo-plan-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s3);
}
.pane[data-view="prospects"] .geo-plan-footer {
  margin-top: 8px;
  color: var(--geo-muted);
  font-size: 13px;
  font-weight: var(--fw-medium);
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.pane[data-view="prospects"] .geo-plan-steps {
  counter-reset: geostep;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.pane[data-view="prospects"] .geo-plan-step {
  counter-increment: geostep;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 0 12px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--geo-border);
  border-left: 3px solid var(--geo-primary);
  border-radius: 0;
  background: var(--geo-surface);
}
.pane[data-view="prospects"] .geo-plan-step + .geo-plan-step { margin-top: 12px; }
/* The rank. GEO's markup carries a .geo-plan-rank span; the SEO plan has
 * none, so a step without one numbers itself from the list counter -- same
 * column, same type, no renderer change. */
.pane[data-view="prospects"] .geo-plan-rank,
.pane[data-view="prospects"] .geo-plan-step:not(:has(.geo-plan-rank))::before {
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: start;
  color: var(--geo-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 16px;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.pane[data-view="prospects"] .geo-plan-step:not(:has(.geo-plan-rank))::before {
  content: counter(geostep);
}
.pane[data-view="prospects"] .geo-plan-step > .geo-plan-title {
  grid-column: 2;
  margin: 0;
  color: var(--geo-heading);
  font-size: 15px;
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.pane[data-view="prospects"] .geo-plan-geo .geo-plan-meta {
  display: inline;
  margin-left: 6px;
  color: var(--geo-muted);
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}
.pane[data-view="prospects"] .geo-plan-geo .geo-plan-line {
  grid-column: 2;
  min-width: 0;
  margin: 6px 0 0;
  color: var(--geo-body);
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.pane[data-view="prospects"] .geo-plan-geo .geo-plan-study {
  margin-top: 8px;
  color: var(--geo-muted);
}
.pane[data-view="prospects"] .geo-plan-geo .geo-plan-lab {
  font-weight: var(--fw-semibold);
}
.pane[data-view="prospects"] .geo-plan-geo .geo-plan-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--geo-green-tint);
  color: var(--geo-green);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* The SEO panel's own lines: a head with chips, a constat, a fix. The CARD
 * they sit in is the shared one above -- only these stay scoped, because GEO
 * has no head, no chips and no evidence line. */
.pane[data-view="prospects"] .geo-plan:not(.geo-plan-geo) .geo-plan-step[data-kind="gate"] {
  border-left-color: var(--geo-red);
  background: var(--geo-red-tint);
}
.pane[data-view="prospects"] .geo-plan:not(.geo-plan-geo) .geo-plan-step-head {
  grid-column: 2;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s2);
}
.pane[data-view="prospects"] .geo-plan:not(.geo-plan-geo) .geo-plan-step-label {
  flex: 1 1 12em;
  min-width: 0;
  color: var(--geo-heading);
  font-size: 15px;
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.pane[data-view="prospects"] .geo-plan:not(.geo-plan-geo) .geo-plan-gain {
  flex: 0 0 auto;
  padding: 2px 8px;
  border-radius: 2px;
  background: var(--geo-green-tint);
  color: var(--geo-green);
  font-size: var(--fs-pill);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pane[data-view="prospects"] .geo-plan:not(.geo-plan-geo) .geo-plan-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
}
.pane[data-view="prospects"] .geo-plan:not(.geo-plan-geo) .geo-plan-m {
  padding: 2px 8px;
  border-radius: 2px;
  background: var(--geo-slate-tint);
  color: var(--geo-slate);
  font-size: var(--fs-pill);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}
.pane[data-view="prospects"] .geo-plan:not(.geo-plan-geo) .geo-plan-m .geo-plan-k {
  color: var(--geo-slate);
  font-weight: var(--fw-bold);
}
.pane[data-view="prospects"] .geo-plan:not(.geo-plan-geo) .geo-plan-why {
  grid-column: 2;
  margin: 8px 0 0;
  color: var(--geo-detail);
  font-size: var(--fs-caption);
  font-style: italic;
  line-height: 1.45;
}
/* The three labelled lines. A grid rather than a run of inline text, so the
 * label can never collide with its value the way "Trouvé" once did. */
.pane[data-view="prospects"] .geo-plan:not(.geo-plan-geo) .geo-plan-risk,
.pane[data-view="prospects"] .geo-plan:not(.geo-plan-geo) .geo-plan-found,
.pane[data-view="prospects"] .geo-plan:not(.geo-plan-geo) .geo-plan-fix {
  grid-column: 2;
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
  align-items: baseline;
  gap: 0 var(--s1);
  margin: 6px 0 0;
  padding: 7px 10px;
  border: 1px solid var(--geo-border);
  border-radius: 0;
  color: var(--geo-body);
  font-size: var(--fs-caption);
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.pane[data-view="prospects"] .geo-plan:not(.geo-plan-geo) .geo-plan-found {
  background: var(--geo-track);
}
/* What doing nothing costs. Amber, not red: the row already failed -- this is
 * what that failure will do if the page is left as it is. */
.pane[data-view="prospects"] .geo-plan:not(.geo-plan-geo) .geo-plan-risk {
  border-color: var(--amber-tint);
  background: var(--amber-tint);
}
.pane[data-view="prospects"] .geo-plan:not(.geo-plan-geo) .geo-plan-risk .geo-plan-k { color: var(--amber); }
.pane[data-view="prospects"] .geo-plan:not(.geo-plan-geo) .geo-plan-fix {
  border-color: var(--geo-green-tint);
  background: var(--geo-green-tint);
}
.pane[data-view="prospects"] .geo-plan:not(.geo-plan-geo) .geo-plan-k {
  color: var(--geo-muted);
  font-weight: var(--fw-bold);
  white-space: nowrap;
}
.pane[data-view="prospects"] .geo-plan:not(.geo-plan-geo) .geo-plan-fix .geo-plan-k { color: var(--geo-green); }
.pane[data-view="prospects"] .geo-plan-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: 12px;
}

/* ==========================================================================
 * THE GEO DIALOG ON A PHONE, AND WITH MOTION TURNED OFF
 * --------------------------------------------------------------------------
 * Everything above is measured against a 792px card in a 1672px viewport.
 * Below the width that card needs, the same components have to fall back to
 * something that is still readable rather than something that is merely
 * faithful. Nothing here changes the desktop rendering.
 * ======================================================================== */

@media (max-width: 719.98px) {
  /* The dialog is full-bleed on a phone, but full-bleed is not edge-to-edge:
   * keep a gutter so the card reads as a card. */
  .pane[data-view="prospects"] .pdetail-wrap { padding: 0 12px; }
  .pane[data-view="prospects"] .pdetail-body { padding: 4px 12px 24px; }

  /* The table stops being a fixed grid and becomes a scrolling block. The
   * check column takes what is left and wraps inside it; the short columns
   * keep only the width their content needs. Horizontal scroll is the last
   * resort here, not the first: it is confined to the table, so the page
   * itself never scrolls sideways. */
  .pane[data-view="prospects"] .geo-table {
    display: block;
    table-layout: auto;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: thin;
  }
  .pane[data-view="prospects"] .geo-table .geo-check {
    min-width: 148px;
    width: auto;
    overflow-wrap: anywhere;
  }
  .pane[data-view="prospects"] .geo-table .geo-why { min-width: 0; }
  .pane[data-view="prospects"] .geo-inline-why,
  .pane[data-view="prospects"] .geo-rowwhy { overflow-wrap: anywhere; }

  /* Tiles and chips: fall back to their own auto grids, and keep a scroll
   * container under them so a long label can never be clipped away. */
  .pane[data-view="prospects"] .geo-tiles { overflow-x: auto; }
  .pane[data-view="prospects"] .geo-chips {
    transform: none;
    overflow-x: auto;
  }
  .pane[data-view="prospects"] .geo-chip-label,
  .pane[data-view="prospects"] .geo-chip-state { overflow-wrap: anywhere; }
  .pane[data-view="prospects"] .geo-chip-state {
    transform: none;
    white-space: normal;
  }

  /* The painted scrollbar thumb is a screenshot prop for the 792px card. */
  .pane[data-view="prospects"] .pdetail:has(.geo-rubric)::after { content: none; }

  /* THE HEADER IS NOT A SPARE ROW. `.pdetail` is a column flex box, so the
   * head was free to shrink under its own content: at 400px the city line
   * and the contact pill were drawn under the body, which is opaque. Pin the
   * head to its content, let the URL break anywhere rather than push the
   * column wider, and give the city and the pill a line of their own. */
  .pane[data-view="prospects"] .pdetail-head {
    flex: 0 0 auto;
    min-height: 0;
    padding-bottom: 10px;
    gap: var(--s3);
  }
  .pane[data-view="prospects"] .pdetail-ident {
    flex: 1 1 100%;
    transform: none;
  }
  .pane[data-view="prospects"] .pdetail-url {
    display: flex;
    overflow-wrap: anywhere;
    word-break: normal;
  }
  .pane[data-view="prospects"] .pdetail-place,
  .pane[data-view="prospects"] .pdetail-chips {
    width: 100%;
    transform: none;
  }

  /* The footer is five controls in a 376px card. It wraps rather than runs
   * off the right edge, which also means the fixed widths the 792px design
   * pins on three of them have to go. */
  .pane[data-view="prospects"] .pdetail-foot {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: var(--s2);
  }
  .pane[data-view="prospects"] .pdetail-foot-right {
    flex-wrap: wrap;
    gap: var(--s2);
  }
  .pane[data-view="prospects"] .pdetail:has(.geo-rubric) .pdetail-foot > .btn,
  .pane[data-view="prospects"] .pdetail:has(.geo-rubric)
    .pdetail-foot-right .btn[data-action="prospects:copy-summary"],
  .pane[data-view="prospects"] .pdetail:has(.geo-rubric)
    .pdetail-foot-right .btn[data-action="prospects:send"] {
    width: auto;
  }

  /* A tile value that cannot fit on one line wraps instead of spilling past
   * the tile -- EN "not measured" is two words wider than the FR it was
   * measured against. `break-word`, never `anywhere`: `anywhere` also shrinks
   * the tile's min-content width, which let the auto-fit grid squeeze the
   * score column until "40/100" broke across two lines as "40/10" + "0".
   * The tiles take a row each here for the same reason -- three of them in a
   * 340px card is not a row, it is three clipped columns. */
  .pane[data-view="prospects"] .geo-tiles {
    grid-template-columns: minmax(0, 1fr);
    overflow-x: visible;
  }
  .pane[data-view="prospects"] .geo-tile-value {
    font-size: 17px;
    overflow-wrap: break-word;
    white-space: normal;
  }

  /* The table already scrolls; say so. A thin track that is always painted
   * is the only thing that tells a reader the `?` column is one swipe away
   * rather than missing. */
  .pane[data-view="prospects"] .geo-table {
    scrollbar-color: var(--geo-scroll-thumb) var(--geo-track);
    overscroll-behavior-x: contain;
  }
  .pane[data-view="prospects"] .geo-table::-webkit-scrollbar { height: 8px; }
  .pane[data-view="prospects"] .geo-table::-webkit-scrollbar-track {
    border-radius: var(--r-pill);
    background: var(--geo-track);
  }
  .pane[data-view="prospects"] .geo-table::-webkit-scrollbar-thumb {
    border-radius: var(--r-pill);
    background: var(--geo-scroll-thumb);
  }
  /* The row's detail lives in a `colspan` cell INSIDE that scroller, so it
   * inherited the table's 458px scroll width and had to be dragged sideways
   * to be read -- prose, in a panel whose whole job is to be read. Sticky at
   * the scroller's left edge keeps it in view at any scroll offset. */
  .pane[data-view="prospects"] .geohelp-rowslot .geo-rowhelp {
    position: sticky;
    left: 0;
    max-width: calc(100vw - 64px);
  }

  /* The three panels stack: doors one per row, every action row wraps. */
  .pane[data-view="prospects"] .geo-summary-doors {
    grid-template-columns: 1fr;
  }
  .pane[data-view="prospects"] .geo-summary-door { border-top-width: 3px; }
  .pane[data-view="prospects"] .geo-plan-head,
  .pane[data-view="prospects"] .geo-plan:not(.geo-plan-geo) .geo-plan-step-head,
  .pane[data-view="prospects"] .geo-summary-guide,
  .pane[data-view="prospects"] .geo-prompts-actions,
  .pane[data-view="prospects"] .geo-plan-actions {
    flex-wrap: wrap;
  }
  .pane[data-view="prospects"] .geo-plan:not(.geo-plan-geo) .geo-plan-step-label { flex: 1 1 100%; }
  .pane[data-view="prospects"] .geo-plan:not(.geo-plan-geo) .geo-plan-risk,
  .pane[data-view="prospects"] .geo-plan:not(.geo-plan-geo) .geo-plan-found,
  .pane[data-view="prospects"] .geo-plan:not(.geo-plan-geo) .geo-plan-fix {
    grid-template-columns: minmax(0, 1fr);
  }
  .pane[data-view="prospects"] .geo-plan-step {
    grid-template-columns: 22px minmax(0, 1fr);
  }
  /* The plan panel is already an even 12px at every width. */
  .pane[data-view="prospects"] .geo-summary,
  .pane[data-view="prospects"] .geo-prompts {
    padding: 12px 12px 14px;
  }
}

/* The dialog's own scrollbar: thin and with a stable gutter, so the right
 * edge of the card does not move when the body becomes scrollable. */
.pane[data-view="prospects"] .pdetail-body:has(.geo-rubric) {
  scrollbar-width: thin;
  scrollbar-gutter: stable;
  scrollbar-color: var(--geo-scroll-thumb) transparent;
}

/* shell.css already clamps every duration globally; these name the two
 * prospects transitions explicitly so a future one here is not missed. */
@media (prefers-reduced-motion: reduce) {
  .pane[data-view="prospects"] .pfilter-toggle .pfilter-switch::after,
  .pane[data-view="prospects"] .pring > .donut {
    transition: none;
  }
  .pane[data-view="prospects"] .pring:hover > .donut { transform: none; }
  .pane[data-view="prospects"] .geo-detail,
  .pane[data-view="prospects"] .geo-rowhelp,
  .pane[data-view="prospects"] .geohelp-rowslot {
    animation: none;
    transition: none;
  }
}

/* -------------------------------------------------------------- SEO rubric
 * SEO deliberately borrows the GEO surface, table, disclosure, help and plan
 * geometry. These selectors cover only the new SEO frame and door mini-bars;
 * the shared `.geo-*` rules remain the single visual system for the rest. */
.pane[data-view="prospects"] .seo-rubric {
  min-width: 0;
  color: var(--geo-body);
}
.pane[data-view="prospects"] .seo-table { margin-top: 8px; }
.pane[data-view="prospects"] .seo-row { min-width: 0; }
.pane[data-view="prospects"] .seo-detail { min-width: 0; }
.pane[data-view="prospects"] .seo-tiles { min-width: 0; }
.pane[data-view="prospects"] .seo-doors { min-width: 0; }
.pane[data-view="prospects"] .seo-offsite { min-width: 0; }
/* The off-site part of the SEO plan: real work, but nothing the page score can
 * measure. It sits after the scored steps, set apart on its own tinted card so
 * a reader never mistakes it for a step that earned or lost points. */
.pane[data-view="prospects"] .seo-plan-offsite {
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px dashed var(--geo-line, rgba(127, 127, 127, 0.35));
  border-radius: 10px;
  background: var(--geo-soft, rgba(127, 127, 127, 0.06));
  min-width: 0;
}
.pane[data-view="prospects"] .seo-plan-offsite > .geo-plan-title { margin: 0 0 6px; }
.pane[data-view="prospects"] .seo-plan-offsite .geo-plan-steps { margin-top: 10px; }
.pane[data-view="prospects"] .seo-plan-offsite .geo-plan-step { min-width: 0; }
.pane[data-view="prospects"] .geo-plan-offsite {
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px dashed var(--geo-line, rgba(127, 127, 127, 0.35));
  border-radius: 10px;
  background: var(--geo-soft, rgba(127, 127, 127, 0.06));
  min-width: 0;
}
.pane[data-view="prospects"] .geo-plan-offsite > .geo-plan-title { margin: 0 0 6px; }
.pane[data-view="prospects"] .geo-plan-offsite .geo-plan-steps { margin-top: 10px; }
.pane[data-view="prospects"] .geo-plan-offsite .geo-plan-step { min-width: 0; }
.pane[data-view="prospects"] .seo-door-bars {
  display: grid;
  gap: 7px;
  margin-top: 7px;
}
.pane[data-view="prospects"] .seo-door { min-width: 0; }
.pane[data-view="prospects"] .seo-door-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2);
  color: var(--geo-body);
  font-size: var(--fs-caption);
  line-height: 1.25;
}
.pane[data-view="prospects"] .seo-door-head span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.pane[data-view="prospects"] .seo-door-head strong {
  flex: 0 0 auto;
  color: var(--geo-heading);
  font-variant-numeric: tabular-nums;
}
.pane[data-view="prospects"] .seo-door-track {
  height: 6px;
  margin-top: 4px;
  overflow: hidden;
  border-radius: var(--r-pill);
  background: var(--geo-track);
}
.pane[data-view="prospects"] .seo-door-bar {
  display: block;
  width: var(--seo-door-pct, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--geo-primary);
}
.pane[data-view="prospects"] .seo-offsite .geo-tile-value {
  color: var(--geo-slate);
}
.pane[data-view="prospects"] .seo-row[data-status="blocked"] > td,
.pane[data-view="prospects"] .seo-detail[data-status="blocked"] > td {
  background: rgba(251, 237, 241, .88);
}
.pane[data-view="prospects"] .seo-row[data-status="unverifiable"] > td,
.pane[data-view="prospects"] .seo-row[data-status="not_checked"] > td {
  background: var(--geo-slate-tint);
}
.pane[data-view="prospects"] .geo-pill[data-status="open"] {
  background: var(--geo-green-tint);
  color: var(--geo-green);
}
.pane[data-view="prospects"] .geo-pill[data-status="blocked"] {
  background: var(--geo-red-tint);
  color: var(--geo-red);
}
.pane[data-view="prospects"] .geo-pill[data-status="unverifiable"],
.pane[data-view="prospects"] .geo-pill[data-status="not_checked"] {
  background: var(--geo-slate-tint);
  color: var(--geo-slate);
}
.pane[data-view="prospects"] .geo-pill[data-status="open"] .geo-pill-ico {
  background: var(--geo-green);
}
.pane[data-view="prospects"] .geo-pill[data-status="blocked"] .geo-pill-ico {
  background: var(--geo-red);
}
.pane[data-view="prospects"] .geo-pill[data-status="unverifiable"] .geo-pill-ico,
.pane[data-view="prospects"] .geo-pill[data-status="not_checked"] .geo-pill-ico {
  background: var(--geo-slate);
}
/* « Pages échantillonnées » is the SEO twin of the GEO entity strip: same
 * wrapper, same chips, same place under the total. Only the label is a path,
 * so it gets the numerals' tabular treatment and is allowed to break. */
.pane[data-view="prospects"] .seo-pages .geo-entity-row {
  grid-template-columns: 1fr;
}
.pane[data-view="prospects"] .seo-pages .geo-chips {
  display: flex;
  flex-wrap: wrap;
}
/* A path is one word. Fitted into a 112px grid cell it broke mid-word --
 * « /servi ce-durg ence » -- so the chips size to their own path instead and
 * wrap as a row. A path longer than the strip still breaks, but only then. */
.pane[data-view="prospects"] .seo-pages .geo-chip {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  max-width: 100%;
}
.pane[data-view="prospects"] .seo-pages .geo-chip-label {
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}
.pane[data-view="prospects"] .seo-pages .geo-chip-state {
  font-variant-numeric: tabular-nums;
}
.pane[data-view="prospects"] .seo-doors .geo-tile-body { min-width: 0; }

/* The SEO rubric has two verdicts GEO never had, and « NON VÉRIFIABLE » is
 * four characters longer than the longest GEO word. The column stops are the
 * GEO ones everywhere else; only this table's status column is given the room
 * its own vocabulary needs, and the pill is allowed to wrap rather than run
 * out of its own background. */
@media (min-width: 720px) {
  .pane[data-view="prospects"] .seo-table .geo-col-status { width: 136px; }
}
.pane[data-view="prospects"] .seo-table .geo-pill {
  white-space: normal;
  text-align: left;
}

.pane[data-view="prospects"] .seo-rowhelp-rule .geo-wf-label {
  color: var(--geo-primary);
}
.pane[data-view="prospects"] .geo-rowhelp-found .geo-wf-label {
  color: var(--geo-body);
}

@media (max-width: 719.98px) {
  .pane[data-view="prospects"] .seo-door-head { font-size: var(--fs-body); }
  .pane[data-view="prospects"] .seo-offsite .geo-tile-sub { overflow-wrap: anywhere; }
}

/* --------------------------------------------------------- Security rubric
 * Security is the SEO rubric's twin and wears its classes: `.seo-rubric`,
 * `.seo-table`, `.seo-door*`, the shared `.geo-*` tiles, pills, disclosure,
 * help slots and plan. These rules cover ONLY what Security has and SEO does
 * not: a "who controls this" column, the critical banner, the applicability
 * line in the row help, and the pointless-by-design diagnostics strip. */
.pane[data-view="prospects"] .sec-rubric { min-width: 0; }
.pane[data-view="prospects"] .sec-tiles { min-width: 0; }
.pane[data-view="prospects"] .sec-doors { min-width: 0; }
.pane[data-view="prospects"] .sec-door { min-width: 0; }
.pane[data-view="prospects"] .sec-summary { min-width: 0; }
.pane[data-view="prospects"] .sec-plan { min-width: 0; }
.pane[data-view="prospects"] .sec-table { min-width: 0; }
.pane[data-view="prospects"] .sec-row { min-width: 0; }
.pane[data-view="prospects"] .sec-detail { min-width: 0; }
.pane[data-view="prospects"] .sec-rowhelp { min-width: 0; }

/* The off-scope tile states a boundary, not a measurement, so it is set in
 * body type rather than the tile's score type -- the sentence is the value. */
.pane[data-view="prospects"] .sec-offscope .geo-tile-value {
  color: var(--geo-slate);
  font-size: var(--fs-caption);
  font-weight: 500;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.pane[data-view="prospects"] .sec-offscope-help { min-width: 0; }
/* The off-scope tile borrows `.geo-tile-cited` for its geometry, and that
 * class fills its mark solid -- a quotation mark reads as a shape, a target
 * reads as a blob. The mark is drawn, so it keeps the stroked treatment. */
.pane[data-view="prospects"] .sec-offscope .geo-tile-ico svg {
  fill: none;
  stroke: currentColor;
}

/* WHO CAN FIX IT is a column, not a footnote: half of these findings belong to
 * the hosting company, and a plan that hands the business an action it cannot
 * take is worse than no plan. It reads quieter than the check itself. */
.pane[data-view="prospects"] .sec-who {
  color: var(--geo-slate);
  font-size: var(--fs-caption);
  overflow-wrap: anywhere;
  white-space: normal;
}
@media (min-width: 720px) {
  .pane[data-view="prospects"] .sec-col-who { width: 92px; }
  .pane[data-view="prospects"] .sec-table .geo-col-toggle { width: 44px; }
  .pane[data-view="prospects"] .sec-table .geo-col-pts { width: 66px; }
}

/* THE BANNER IS THE BROWSER'S OWN VERDICT, AND IT SITS ABOVE THE ARITHMETIC.
 * A dead certificate is not "minus 25 points"; it is the interstitial every
 * visitor already sees. Red ground, no score, first thing read. */
.pane[data-view="prospects"] .sec-critical {
  margin: var(--s3) 0 var(--s2);
  padding: var(--s3);
  border: 1px solid var(--geo-red);
  border-radius: var(--r-md, 10px);
  background: var(--geo-red-tint);
  color: var(--geo-red);
}
.pane[data-view="prospects"] .sec-critical-inline { margin-top: var(--s2); }
.pane[data-view="prospects"] .sec-critical-h {
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: .01em;
}
.pane[data-view="prospects"] .sec-critical-list {
  margin: var(--s2) 0 0;
  padding-left: 1.1em;
  color: var(--geo-body);
  font-size: var(--fs-body);
  line-height: 1.4;
}
.pane[data-view="prospects"] .sec-critical-list li { overflow-wrap: anywhere; }
/* A row the banner already named keeps a rail of the same red, so the reader
 * can pair the sentence above with the line in the table. */
.pane[data-view="prospects"] .sec-row[data-critical="1"] > .geo-check {
  box-shadow: inset 3px 0 0 var(--geo-red);
}

/* « S.O. » means nothing on its own. The applicability line is the sentence
 * that turns it into « géré par l'hébergeur », and it is set apart from the
 * finding so the two are never read as one claim. */
.pane[data-view="prospects"] .sec-rowhelp-na .geo-wf-label { color: var(--geo-slate); }
.pane[data-view="prospects"] .sec-rowhelp-na { color: var(--geo-slate); }

/* DIAGNOSTICS SCORE NOTHING. They are closed by default and they say so by
 * living outside the table: opening them can never change a number above. */
.pane[data-view="prospects"] .sec-diagnostics {
  margin-top: var(--s3);
  padding: var(--s3);
  border: 1px solid var(--geo-rule, rgba(15, 23, 42, .1));
  border-radius: var(--r-md, 10px);
  background: var(--geo-slate-tint);
}
.pane[data-view="prospects"] .sec-diagnostics-h {
  display: flex;
  align-items: center;
  gap: var(--s2);
  color: var(--geo-heading);
  cursor: pointer;
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: .01em;
}
.pane[data-view="prospects"] .sec-diagnostics-n {
  padding: 0 7px;
  border-radius: var(--r-pill);
  background: var(--geo-track);
  color: var(--geo-slate);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: 0;
}
.pane[data-view="prospects"] .sec-diagnostics-list {
  display: grid;
  gap: 6px;
  margin: var(--s3) 0 0;
  padding: 0;
  list-style: none;
}
.pane[data-view="prospects"] .sec-diagnostic {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px var(--s2);
  min-width: 0;
  color: var(--geo-body);
  font-size: var(--fs-caption);
  line-height: 1.35;
}
.pane[data-view="prospects"] .sec-diagnostic-label {
  min-width: 0;
  overflow-wrap: anywhere;
}
.pane[data-view="prospects"] .sec-diagnostic-state {
  color: var(--geo-slate);
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}
.pane[data-view="prospects"] .sec-diagnostic[data-status="pass"] .sec-diagnostic-state {
  color: var(--geo-green);
}
.pane[data-view="prospects"] .sec-diagnostic[data-status="warn"] .sec-diagnostic-state {
  color: var(--geo-amber, var(--geo-red));
}
.pane[data-view="prospects"] .sec-diagnostic-saw {
  grid-column: 1 / -1;
  color: var(--geo-slate);
  overflow-wrap: anywhere;
}

/* The inline twin is the narrow layout's only copy of « Qui »; above the
 * breakpoint the column carries it and the twin stands down. */
.pane[data-view="prospects"] .sec-who-inline { display: none; }
@media (max-width: 719.98px) {
  .pane[data-view="prospects"] .sec-table .sec-who,
  .pane[data-view="prospects"] .sec-table .sec-col-who { display: none; }
  .pane[data-view="prospects"] .sec-who-inline {
    display: block;
    color: var(--geo-slate);
    font-size: var(--fs-caption);
    line-height: 1.3;
  }
  .pane[data-view="prospects"] .sec-diagnostic { grid-template-columns: minmax(0, 1fr); }
  .pane[data-view="prospects"] .sec-diagnostic-state { text-align: left; }
}