/* Pages Opportunities
   (websites/templates/websites/website_pages_opportunities.html and
   website_pages_opportunity.html). Tokens from akoore.css only; the report
   frame and the post-its bring their own styles. */

.po-page .page-menu { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-3); }
/* The two <details> whose <summary> is a button ("Run a new analysis",
   "Not for me"): the site's generic details {} rule (the FAQ box) would
   draw a second border around the button's own (DOC_DESIGN_UI_KIT.md §4.3.1). */
.po-new-run, .po-reject { border: 0; background: none; padding: 0; margin: 0; }
.po-new-run > summary { list-style: none; cursor: pointer; display: inline-block; }
.po-new-run > summary::-webkit-details-marker { display: none; }
.po-new-run-form {
  display: flex; flex-direction: column; gap: var(--space-2); max-width: 560px;
  margin-top: var(--space-2); padding: var(--space-3);
  border: 1px solid var(--color-divider); background: var(--color-surface);
}
.po-new-run-form label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; }
.po-new-run-form input[type="number"] { max-width: 120px; }
.po-run-picker select { max-width: 100%; }

.po-lead { font-size: 17px; font-weight: 600; margin: 0; }
.po-sub { font-size: 13px; margin-top: 2px; overflow-wrap: anywhere; }
.po-why { margin: 4px 0 0; }
.po-month { margin: var(--space-4) 0 var(--space-2); }
.po-source {
  display: inline-block; margin: 0 4px 2px 0; padding: 1px 6px; font-size: 12px;
  border: 1px solid var(--color-divider); border-radius: 10px; white-space: nowrap;
}
.po-table td { vertical-align: top; }
.po-table .num, .po-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.po-you td { background: var(--color-surface); font-weight: 600; }

/* — The next pages: what the section is, then every month as cards — */
/* What a section says instead of data, and why (views.section_notes). */
.po-section-note { margin: 0 0 var(--space-3); max-width: 760px; font-size: 15px; }
.po-section-note--pending { padding: var(--space-2) var(--space-3); border: 1px dashed var(--color-divider); background: var(--color-surface); }
.po-explain { margin: 0 0 var(--space-3); max-width: 760px; }
.po-explain h3 { font-size: 16px; margin: var(--space-3) 0 4px; }
.po-explain h3:first-child { margin-top: 0; }
.po-explain p { margin: 0 0 var(--space-2); }
.po-left-out { margin: 0 0 var(--space-2); padding-left: 18px; }
.po-left-out li { margin-bottom: 4px; }
.po-left-out b { font-variant-numeric: tabular-nums; }
.po-brings { margin: 0; font-variant-numeric: tabular-nums; }
/* "How to do it": the steps of one page, for Google and for AI assistants. */
.po-how { margin: 4px 0 0; padding: var(--space-2) var(--space-3); }
.po-how-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-3); margin-top: var(--space-2); }
.po-how-lbl { margin: 0 0 4px; font-size: 13px; font-weight: 600; }
.po-how-steps { margin: 0; padding-left: 18px; font-size: 13px; }
.po-how-steps li { margin-bottom: 4px; overflow-wrap: anywhere; }
.po-card .todo-actions { margin-top: var(--space-2); }
.po-brings-label { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; opacity: .7; }

.po-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-3); margin: var(--space-3) 0; }
.po-card { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.po-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.po-card-no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--color-accent); color: var(--white); font-weight: 700; font-variant-numeric: tabular-nums;
}
.po-card-title { font-size: 18px; margin: 0; overflow-wrap: anywhere; }
.po-card-figures { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; font-variant-numeric: tabular-nums; }

.po-verdict { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; margin-top: auto; padding-top: var(--space-2); }
.po-verdict form { margin: 0; }
.po-reject > summary { list-style: none; cursor: pointer; }
.po-reject > summary::-webkit-details-marker { display: none; }
.po-reject form { display: flex; gap: 6px; margin-top: 6px; }

/* The SEO reading of a card: what ranks, the gap on the page, the effort. */
.po-seo { margin: 6px 0 0; padding: var(--space-2) 0 0; border-top: 1px solid var(--color-divider); display: grid; gap: 4px; }
.po-seo-line { margin: 0; font-size: 14px; }
.po-seo-lbl { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; opacity: .7; margin-right: 4px; }
.po-seo-gaps { margin: 0; padding-left: 18px; font-size: 14px; }
.po-seo-gaps li { margin-bottom: 2px; }
.po-seo-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); font-variant-numeric: tabular-nums; }
.po-spark { vertical-align: middle; overflow: visible; }
.po-spark--down { color: #b3261e; }
.po-spark--up { color: #1b7a3a; }
.po-spark--flat { color: currentColor; }
.po-ai-detail { margin: 0 0 var(--space-2); border: 0; background: none; padding: 0; }
.po-ai-detail > summary { cursor: pointer; font-weight: 600; }
.po-ai-q { margin: var(--space-2) 0 2px; font-style: italic; }
.po-ai-cited { margin: 0 0 var(--space-2); padding-left: 18px; }

.po-intents { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-3); }
.po-intent h3 { margin-top: 0; font-size: 16px; }
.po-intent ul { margin: 0; padding-left: 18px; }

.po-method li { margin-bottom: 4px; }

/* — The opportunity page — */
.po-op-head { margin-bottom: var(--space-3); }
.po-op-head h1 { margin: var(--space-2) 0 4px; overflow-wrap: anywhere; }
.po-op-block { margin-bottom: var(--space-3); }
.po-op-block h2 { margin-top: 0; font-size: 20px; }
.po-brief-facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px var(--space-3); margin: 0 0 var(--space-2); }
.po-brief-facts dt { font-weight: 600; }
.po-brief-facts dd { margin: 0; overflow-wrap: anywhere; }
.po-brief-summary { font-size: 16px; }
.po-brief h4 { margin: var(--space-3) 0 4px; font-size: 15px; }

@media (max-width: 640px) {
  .po-brief-facts { grid-template-columns: 1fr; }
  .po-brief-facts dd { margin-bottom: 6px; }
}