@layer components {
  .report-config { margin-bottom: var(--space-5); }
  .report-config-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
    align-items: start;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
  }
  .report-config-row .report-config { margin-bottom: 0; min-width: 0; }
  .report-config fieldset {
    margin: 0;
    padding: var(--space-5);
  }
  .report-config legend {
    float: left;
    width: 100%;
    padding: 0;
    margin-bottom: var(--space-4);
    font-size: 13.5px;
    letter-spacing: -0.01em;
    color: var(--text-primary);
  }
  .report-config fieldset > * { clear: both; }
  .report-config fieldset > * + * { margin-top: var(--space-4); }

  .report-config-fields {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-6);
  }
  .report-config .report-config-field {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
    margin: 0;
  }
  .report-config-field-name,
  .report-config-label {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-secondary);
  }
  .report-config-label { display: block; margin-bottom: var(--space-2); }

  .provider-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }
  .report-config .provider-options label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-1) var(--space-3) var(--space-1) var(--space-2);
    font-size: 12.5px;
    font-weight: 400;
    background: var(--bg-primary);
    border: 0.5px solid var(--border-strong);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: background var(--speed-fast) var(--ease-out),
                border-color var(--speed-fast) var(--ease-out);
  }
  .report-config .provider-options label:hover { background: var(--bg-secondary); }
  .report-config .provider-options label:has(input:checked) {
    background: var(--accent-soft);
    border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  }
  .report-config .provider-options input[type="checkbox"] { margin: 0; }

  .report-config-toggles {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  .report-config .report-config-toggles label {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin: 0;
    font-weight: 400;
  }
  .report-config .report-config-toggles input[type="checkbox"] { margin: 3px 0 0; }

  .report-config-note > summary {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-secondary);
    transition: color var(--speed-fast) var(--ease-out);
  }
  .report-config-note > summary:hover { color: var(--text-primary); }
  .report-config-note > p { margin: var(--space-2) 0 0; max-width: 68ch; }

  .report-config-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-4);
    padding-top: var(--space-4);
    border-top: 0.5px solid var(--border);
  }
  .report-config-footer .muted { margin: 0; flex: 1 1 260px; }
  .report-credit-context { flex: 1 1 260px; }
  .report-credit-context p { margin: 0; }
  .report-credit-summary { width: fit-content; font-weight: 500; }

  .report-methodology { margin-bottom: var(--space-3); }
  .report-methodology > summary { transition: color var(--speed-fast) var(--ease-out); }
  .report-methodology > summary:hover { color: var(--text-primary); }
  .report-methodology > p { margin: var(--space-2) 0 0; }

  .report-status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-4);
    padding: var(--space-1) var(--space-3);
    font-size: 12.5px;
    font-weight: 500;
    background: var(--bg-secondary);
    border: 0.5px solid var(--border);
    border-radius: var(--radius-full);
    color: var(--text-secondary);
  }
  .report-status svg { flex-shrink: 0; }
  .report-status-completed {
    background: var(--success-bg);
    border-color: var(--success-border);
    color: var(--success-text);
  }
  .report-status-failed {
    background: var(--danger-bg);
    border-color: var(--danger-border);
    color: var(--danger-text);
  }
  .badge.report-status-pending,
  .badge.report-status-processing {
    background: var(--info-bg);
    border-color: var(--info-border);
    color: var(--info-text);
  }

  .report-answers {
    padding: var(--space-4) var(--space-5);
    margin: var(--space-4) 0;
  }
  .report-answers-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-3);
    margin-bottom: var(--space-3);
  }
  .report-answers-header h2 {
    margin: 0;
    font-size: 13.5px;
  }
  .report-answers .report-prompt:last-child { padding-bottom: 0; }

  .report-prompt {
    padding: var(--space-4) 0;
    border-top: 0.5px solid var(--border);
  }
  .report-prompt > summary {
    font-size: 13.5px;
    font-weight: 500;
  }
  .report-prompt-title { transition: color var(--speed-fast) var(--ease-out); }
  .report-prompt > summary:hover .report-prompt-title { color: var(--accent); }
  .report-prompt-summary { display: contents; }
  .report-prompt-flags {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-left: var(--space-2);
    vertical-align: middle;
    font-weight: 400;
  }
  .report-prompt-rivals {
    display: block;
    margin-top: var(--space-1);
    max-width: 72ch;
    font-size: 13px;
    font-weight: 400;
  }

  .report-result {
    padding-top: var(--space-4);
    margin-top: var(--space-4);
    border-top: 0.5px dashed var(--border);
  }
  .report-result > h3 { margin-top: 0; font-size: 12.5px; color: var(--text-secondary); }

  .report-markdown { overflow-wrap: break-word; }
  .report-markdown > :first-child { margin-top: 0; }
  .report-markdown > :last-child { margin-bottom: 0; }
  .report-markdown h1, .report-markdown h2, .report-markdown h3,
  .report-markdown h4, .report-markdown h5, .report-markdown h6 {
    margin: var(--space-5) 0 var(--space-2);
    line-height: 1.25;
  }
  .report-markdown h1 { font-size: 22px; }
  .report-markdown h2 { font-size: 14px; }
  .report-markdown h3 { font-size: 13.5px; }
  .report-markdown p, .report-markdown ul, .report-markdown ol,
  .report-markdown blockquote, .report-markdown pre, .report-markdown table {
    margin: 0 0 var(--space-3);
  }
  .report-markdown ul, .report-markdown ol { padding-left: var(--space-6); }
  .report-markdown blockquote {
    margin-left: 0;
    padding-left: var(--space-3);
    border-left: 3px solid var(--border-strong);
    color: var(--text-secondary);
  }
  .report-markdown pre {
    background: var(--bg-tertiary);
    border: 0.5px solid var(--border);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    overflow-x: auto;
    scrollbar-width: thin;
  }
  .report-markdown pre code { background: none; border: none; padding: 0; }
  .report-markdown img { max-width: 100%; height: auto; }
  .report-markdown table {
    display: block;
    width: max-content;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .report-sources { margin-top: var(--space-4); font-size: 12.5px; }
  .report-sources h4 { margin: var(--space-3) 0 var(--space-1); font-size: 12.5px; }
  .report-sources ol { margin: 0; padding-left: var(--space-5); }
  .report-sources li { word-break: break-word; }

  .analysis { margin-top: var(--space-4); }
  .analysis-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
  }

  .report-share {
    margin: var(--space-4) 0;
    padding: var(--space-3) var(--space-4);
    background: var(--bg-secondary);
    border: 0.5px dashed var(--border-strong);
    border-radius: var(--radius-md);
  }
  .report-share p { margin: 0 0 var(--space-2); max-width: 68ch; }
  .report-share code { word-break: break-all; }
  .report-share-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
  }

  .report-metrics,
  .report-trends,
  .cited-sources,
  .report-history {
    padding: var(--space-4) var(--space-5);
    margin: var(--space-4) 0;
  }
  .report-metrics > h2,
  .report-trends > h2,
  .cited-sources > h2,
  .report-history > .section-header { margin: 0 0 var(--space-3); }
  .report-history > .section-header h2 { font-size: 13.5px; }
  .report-metrics h3,
  .report-trends h3,
  .cited-sources h3 { margin: var(--space-4) 0 var(--space-1); font-size: 13.5px; }

  .metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-3);
    margin: 0;
  }
  .metrics-grid dd { font-size: 25px; }
  .metrics-grid dd .metric-sub {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--text-tertiary);
  }

  .metrics-providers, .metrics-changes, .metrics-standings,
  .metrics-prompt-changes, .metrics-share {
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 0.5px solid var(--border);
  }
  .report-metrics > div > h3:first-child { margin-top: 0; }
  .metrics-changes ul, .metrics-prompt-changes ul {
    margin: 0;
    padding-left: var(--space-5);
  }
  .metrics-changes li { font-weight: 500; }

  .missing-prompt { font-weight: 500; }

  .report-metrics p { max-width: 68ch; }
  .report-metrics td { font-variant-numeric: tabular-nums; }
  .report-metrics h3[title], .report-metrics h4[title],
  .report-metrics dt[title], .share-chart figcaption[title] { cursor: help; }

  .report-trends .metrics-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
  .report-trends .metrics-grid > div,
  .visibility-snapshot-grid > div {
    display: flex;
    flex-direction: column;
  }
  .report-trends .metrics-grid dd,
  .visibility-snapshot-grid dd {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--space-2);
  }
  .report-trends .sparkline,
  .visibility-snapshot-grid .sparkline { margin-top: auto; }
  .trend-figure {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-1) var(--space-2);
  }
  .report-trends td { font-variant-numeric: tabular-nums; }
  .report-trends > p { max-width: 68ch; }
  .report-trends .metrics-grid + p { margin-top: var(--space-3); }

  .sparkline { display: block; margin-top: var(--space-1); max-width: 100%; height: auto; }
  .sparkline polyline {
    fill: none;
    stroke: var(--chart-1);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .sparkline polygon { fill: color-mix(in srgb, var(--chart-1) 10%, transparent); }
  .sparkline circle { fill: var(--chart-1); }

  .visibility-snapshot { margin: var(--space-5) 0 var(--space-6); }
  .visibility-snapshot-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-4);
    margin-bottom: var(--space-3);
  }
  .visibility-snapshot-header h3 { margin: 0; }
  .visibility-snapshot-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .visibility-snapshot-grid > div { min-width: 0; }
  .visibility-snapshot-grid dt[title] { cursor: help; }
  .visibility-snapshot-latest {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
    margin: var(--space-3) 0 0;
    font-size: 12.5px;
  }

  @media (max-width: 640px) {
    .visibility-snapshot-grid { grid-template-columns: 1fr; }
  }

  .chart-color-1 { --chart-color: var(--chart-1); }
  .chart-color-2 { --chart-color: var(--chart-2); }
  .chart-color-3 { --chart-color: var(--chart-3); }
  .chart-color-4 { --chart-color: var(--chart-4); }
  .chart-color-5 { --chart-color: var(--chart-5); }
  .chart-color-other { --chart-color: var(--text-tertiary); }

  .metrics-share .share-charts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-3);
  }
  .share-chart {
    flex: 1 1 280px;
    max-width: 480px;
    margin: 0;
  }
  .share-chart figcaption {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: var(--space-3);
  }
  .share-chart-body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-5);
  }
  .donut-wrap { position: relative; flex-shrink: 0; }
  .donut-chart { display: block; }
  .donut-chart circle { fill: none; stroke: var(--chart-color); }
  .donut-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    pointer-events: none;
  }
  .donut-center-value {
    font-size: 19px;
    font-weight: 500;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
  }
  .donut-center-label {
    font-size: 10.5px;
    color: var(--text-tertiary);
    max-width: 68px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .chart-legend {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1 1 150px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-1) var(--space-2);
    font-size: 13px;
  }
  .chart-legend li { display: contents; }
  .chart-legend li .muted {
    justify-self: end;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .chart-swatch {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
    background: var(--chart-color);
  }
  .chart-brand { font-weight: 500; }

  .provider-bars {
    display: grid;
    grid-template-columns: auto minmax(120px, 1fr) auto;
    gap: var(--space-2) var(--space-3);
    align-items: center;
    max-width: 480px;
    margin-bottom: var(--space-4);
  }
  .provider-bars h4 {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-secondary);
  }
  .provider-bar-row { display: contents; }
  .provider-bar-label { font-size: 13.5px; }
  .provider-bar-value {
    justify-self: end;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
  }
  .metrics-providers th:not(:first-child),
  .metrics-providers td:not(:first-child) { text-align: right; }
  .metrics-providers td:first-child { white-space: nowrap; }
  .fraction-bar {
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--chart-grid);
    overflow: hidden;
  }
  .fraction-bar-fill {
    height: 100%;
    border-radius: inherit;
    background: var(--chart-1);
  }

  .metrics-standings .fraction-bar,
  .cited-domains .fraction-bar {
    min-width: 90px;
    margin-top: var(--space-1);
  }
  .metrics-standings th:nth-child(2),
  .metrics-standings th:nth-child(3) { width: 28%; min-width: 150px; }

  .report-history td { font-variant-numeric: tabular-nums; }
  .report-history td:first-child a { font-weight: 500; }
  .history-pager {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    margin-top: var(--space-3);
    font-size: 13px;
  }

  .cited-sources ol { margin: 0; padding-left: var(--space-5); }
  .cited-sources li { word-break: break-word; }

  .cited-domains { margin-top: var(--space-4); }
  .cited-domains > summary {
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--text-secondary);
    transition: color var(--speed-fast) var(--ease-out);
  }
  .cited-domains > summary:hover { color: var(--text-primary); }
  .cited-domains > p { margin-top: var(--space-1); }

  .opportunities {
    counter-reset: opportunity;
    list-style: none;
    margin: 0 0 var(--space-5);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }
  .opportunity {
    margin: 0;
    counter-increment: opportunity;
    padding: var(--space-4) var(--space-5);
    word-break: break-word;
  }

  .opportunity-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
  }
  .opportunity-header::before {
    content: counter(opportunity);
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 0.5px solid var(--border);
    border-radius: var(--radius-full);
    background: var(--bg-secondary);
    font-size: 11px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
  }
  .opportunity-heading {
    display: inline-flex;
    flex: 1 1 240px;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-2);
    min-width: 0;
  }

  .opportunity-kind-coverage { background: var(--info-bg); border-color: var(--info-border); color: var(--info-text); }
  .opportunity-kind-visibility { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning-text); }
  .opportunity-kind-framing { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger-text); }

  .opportunity-tier-high { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger-text); }

  .opportunity-uplift {
    background: var(--success-bg);
    border-color: var(--success-border);
    color: var(--success-text);
    font-variant-numeric: tabular-nums;
  }

  .opportunity-explanation { margin: var(--space-2) 0 0; max-width: 72ch; }

  .opportunity-prompt-details { margin: var(--space-2) 0 0; }
  .opportunity-prompt-details > summary {
    font-weight: 500;
    font-size: 12.5px;
    color: var(--text-secondary);
    transition: color var(--speed-fast) var(--ease-out);
  }
  .opportunity-prompt-details > summary:hover { color: var(--text-primary); }

  .opportunity-prompt {
    margin: var(--space-2) 0 0;
    padding: 0 0 0 var(--space-3);
    border-left: 2px solid var(--border);
    color: var(--text-secondary);
    font-style: italic;
    max-width: 72ch;
  }

  .opportunity-action { margin: var(--space-2) 0 0; max-width: 72ch; }
  .opportunity-action-label { font-weight: 600; }

  .opportunities-more { margin: 0 0 var(--space-5); }
  .opportunities-more > summary {
    font-weight: 500;
    font-size: 13.5px;
    letter-spacing: -0.01em;
    color: var(--text-secondary);
    transition: color var(--speed-fast) var(--ease-out);
  }
  .opportunities-more > summary:hover { color: var(--text-primary); }
  .opportunities-more > .opportunities { margin-top: var(--space-3); }

  .opportunity-summary-card > summary {
    font-weight: 500;
    font-size: 12.5px;
    color: var(--text-secondary);
    transition: color var(--speed-fast) var(--ease-out);
  }
  .opportunity-summary-card > summary:hover { color: var(--text-primary); }
  .opportunity-summary-body { margin-top: var(--space-3); font-size: 14px; }
  .opportunity-summary-card > p { margin: var(--space-3) 0 0; }
  .opportunity-summary { margin: 0 0 var(--space-5); }
  .opportunities-reanalyze { margin-top: var(--space-4); }

  .generated-prompts { margin: var(--space-3) 0; }
}