/* Research surfaces share the application's light/dark design tokens. */
#predictionsDashboardView { min-width: 0; color: var(--text); }
html.view-predictions .dashboard-page > .container { grid-template-rows: max-content 1fr; }
#predictionsDashboardView:not([data-state="ready"]) #pred-results,
#predictionsDashboardView[data-state="ready"] #pred-unavailable,
#predictionsDashboardView [hidden] { display: none !important; }
#pred-unavailable {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: clamp(24px, 4vw, 48px);
}
.pred-state-label { color: var(--primary); font-size: .75rem; font-weight: 700; letter-spacing: .09em; }
#pred-unavailable h2 { color: var(--text-head); font-size: clamp(1.4rem, 3vw, 2rem); margin: 14px 0 12px; }
#pred-unavailable p { max-width: 65ch; color: var(--text-secondary); line-height: 1.7; }
#pred-unavailable details { margin-top: 24px; border-top: 1px solid var(--border); padding-top: 16px; }
#predictionsDashboardView[data-state="loading"] #pred-unavailable-details { display: none; }
#pred-unavailable summary { cursor: pointer; color: var(--text); padding: 8px 0; }
.pred-state-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
#predictionsDashboardView button,
#predictionsDashboardView input:not([type="checkbox"]),
#predictionsDashboardView select { min-height: 44px; }
#predictionsDashboardView :is(input, select) { color-scheme: light; }
html.dark #predictionsDashboardView :is(input, select) { color-scheme: dark; }
#predictionsDashboardView input::placeholder { color: var(--text-muted); opacity: 1; }
#predictionsDashboardView :focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
#predictionsDashboardView #pred-stale-banner { background: var(--warning-bg); color: var(--warning-text); border-color: var(--warning-text); }
#pred-results > .card { min-width: 0; }
.pred-analysis-placeholder { padding: 32px 12px; color: var(--text-secondary); text-align: center; }
#predictionsDashboardView .pred-rank-number { color: var(--surface); }
html.dark #predictionsDashboardView .pred-rank-number { color: #101613; }
@media (max-width: 600px) {
  #pred-results > .card { padding: 16px !important; }
  #pred-results h3 { line-height: 1.5; }
  #predSearchInput { width: 100%; min-width: 0 !important; }
  .pred-state-actions { flex-direction: column; align-items: stretch; }
}