.period-filter-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 16px;
  border: 1px solid #dbe3ec;
  border-radius: 8px;
  padding: 16px 24px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.period-filter-panel strong { display: block; font-size: 18px; }
.period-filter-controls { display: flex; align-items: end; gap: 10px; }
.period-filter-controls label { display: grid; gap: 5px; color: #667085; font-size: 12px; font-weight: 750; }
.period-filter-controls select,
.period-filter-controls input {
  min-height: 40px;
  border: 1px solid #cfd8e3;
  border-radius: 8px;
  padding: 0 12px;
  background: #fff;
  color: #101828;
  font: inherit;
}
.period-filter-controls select { min-width: 190px; }
.period-filter-controls input { min-width: 160px; }
.period-filter-controls [hidden] { display: none; }

.ranking-tabs {
  display: flex;
  gap: 8px;
  padding: 0 24px 18px;
  overflow-x: auto;
}

.ranking-tabs button {
  flex: 0 0 auto;
  min-height: 40px;
  border: 1px solid #cfd8e3;
  border-radius: 8px;
  padding: 0 14px;
  background: #fff;
  color: #344054;
  font-weight: 750;
}

.ranking-tabs button.active {
  border-color: #0f8277;
  background: #0f8277;
  color: #fff;
}

.method-grid,
.performance-grid,
.performance-matrix,
.audit-metrics {
  display: grid;
  align-items: start;
  gap: 12px;
  padding: 0 24px 24px;
}

.v2-shell > * { box-sizing: border-box; width: 100%; }
.v2-shell .panel-head { align-items: flex-start; gap: 16px; }

.method-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.performance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.performance-matrix { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.audit-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.method-grid article,
.performance-card,
.matrix-quadrant,
.audit-metrics article {
  min-width: 0;
  border: 1px solid #dbe3ec;
  border-radius: 8px;
  background: #fbfcfe;
}

.method-grid article,
.audit-metrics article { padding: 16px; }
.method-grid h3,
.method-grid p { margin: 0; }
.method-grid p { margin-top: 8px; color: #475467; line-height: 1.45; }
.method-grid small { display: block; margin-top: 10px; color: #667085; line-height: 1.4; }
.method-footnote { margin: 0; border-top: 1px solid #e1e7ef; padding: 14px 24px 18px; color: #667085; font-size: 13px; line-height: 1.45; }
.attribution-footnote { background: #f0fdfa; color: #155e57; }

.performance-card { display: grid; gap: 14px; padding: 18px; }
.performance-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.performance-card-head h3 { margin: 3px 0 0; font-size: 20px; }
.performance-primary { color: #101828; font-size: 34px; line-height: 1; white-space: nowrap; }
.performance-primary small { color: #667085; font-size: 13px; }
.performance-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.performance-summary div { border-radius: 6px; padding: 10px; background: #f2f4f7; }
.performance-summary span { display: block; color: #667085; font-size: 12px; }
.performance-summary strong { display: block; margin-top: 3px; font-size: 17px; }
.performance-coverage { color: #475467; font-size: 13px; }
.matrix-label { width: fit-content; max-width: 100%; white-space: normal; }
.evidence-links { display: flex; flex-wrap: wrap; gap: 7px; }
.evidence-links a { border: 1px solid #b7ddd8; border-radius: 999px; padding: 6px 10px; background: #f0fdfa; color: #08766c; font-size: 12px; font-weight: 750; text-decoration: none; }
.risk-proof { border-top: 1px solid #f2c7c3; padding-top: 12px; }
.risk-proof > strong { display: block; margin-bottom: 8px; color: #b42318; font-size: 13px; }
.risk-compact-list { display: grid; gap: 7px; }
.risk-compact { border: 1px solid #f0c7a5; border-left: 4px solid #d97706; border-radius: 6px; background: #fff; }
.risk-compact.risk-critical { border-color: #efb4b0; border-left-color: #b42318; }
.risk-compact.risk-learning_pattern { border-color: #bad3f3; border-left-color: #2563a8; }
.risk-compact summary { display: grid; gap: 3px; padding: 9px 10px; cursor: pointer; }
.risk-compact summary span { color: #9a3412; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.risk-compact.risk-critical summary span { color: #b42318; }
.risk-compact.risk-learning_pattern summary span { color: #1d4f91; }
.risk-compact summary strong { color: #344054; font-size: 12px; line-height: 1.35; }
.risk-compact > div { display: grid; gap: 7px; padding: 0 10px 10px; border-top: 1px solid #eef1f5; }
.risk-compact blockquote { margin: 8px 0 0; color: #475467; font-size: 12px; line-height: 1.4; }

.matrix-quadrant { padding: 18px; }
.matrix-quadrant h3 { margin: 0; }
.matrix-quadrant p { margin: 6px 0 14px; color: #667085; line-height: 1.4; }
.matrix-manager-list { display: flex; flex-wrap: wrap; gap: 8px; }
.matrix-manager-list a { border-radius: 999px; padding: 7px 10px; background: #fff; color: #344054; font-size: 13px; font-weight: 750; text-decoration: none; box-shadow: inset 0 0 0 1px #d0d5dd; }
.matrix-quadrant.high_result_high_quality { border-color: #8fd4ca; background: #f0fdfa; }
.matrix-quadrant.high_result_low_quality { border-color: #f5c59f; background: #fff7ed; }
.matrix-quadrant.low_result_high_quality { border-color: #b8cff8; background: #eff6ff; }
.matrix-quadrant.low_result_low_quality { border-color: #f2b8b5; background: #fff1f0; }

.audit-metrics strong { display: block; margin-top: 6px; font-size: 26px; }
.audit-metrics span,
.audit-metrics small { color: #667085; }
.audit-metrics small { display: block; margin-top: 6px; line-height: 1.35; }
.audit-content[hidden] { display: none; }
.audit-panel.is-collapsed .audit-panel-note { display: none; }
.audit-panel.is-collapsed .panel-head { border-bottom: 0; }
.audit-examples { display: grid; gap: 1px; border-top: 1px solid #e1e7ef; background: #e1e7ef; }
.audit-example { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px 24px; background: #fff; }
.audit-example p { margin: 0; color: #475467; line-height: 1.4; }
.audit-arrow { color: #b42318; font-weight: 850; }
.audit-review-note { grid-column: 1 / -1; margin: 0; padding-top: 10px; border-top: 1px solid #e6ebf2; color: #344054; font-size: 13px; }

.performance-table { min-width: 1080px; }
.performance-table td small { display: block; margin-top: 4px; color: #667085; }

@media (max-width: 1050px) {
  .method-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .period-filter-panel { align-items: stretch; flex-direction: column; padding: 14px; }
  .period-filter-controls { align-items: stretch; flex-direction: column; }
  .period-filter-controls select,
  .period-filter-controls input { width: 100%; min-width: 0; }
  .method-grid,
  .performance-grid,
  .performance-matrix,
  .audit-metrics { grid-template-columns: 1fr; padding-inline: 14px; }
  .ranking-tabs { padding-inline: 14px; }
  .performance-summary { grid-template-columns: 1fr; }
  .audit-example { grid-template-columns: 1fr; padding: 14px; }
  .audit-arrow { transform: rotate(90deg); width: fit-content; }
}