/* Reports page styles, scoped under .page-reports: the request form, the report list and the reader. */

.page-reports .report-page { display: grid; gap: 1.5rem; }
.page-reports .report-page > .page-header { margin-bottom: 0; }

/* request form */
.page-reports .report-request { gap: 1rem; padding: 1.25rem; }
.page-reports .report-request .section-title { font-size: var(--text-lg); }
.page-reports .report-form { display: grid; gap: 0.5rem; }
.page-reports .report-brief { min-height: 5.5rem; max-height: 18rem; }
.page-reports .report-note { font-size: var(--text-sm); color: var(--muted-foreground); }
.page-reports .report-form-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.5rem 0.75rem; margin-top: 0.25rem; }
.page-reports .report-request-status:empty { display: none; }
.page-reports .report-inline-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.5rem; }
.page-reports .report-accepted {
  display: grid; gap: 0.375rem; padding: 0.875rem 1rem; border-radius: var(--radius-lg);
  border: 1px solid color-mix(in oklab, var(--primary-accent) 25%, transparent);
  background: color-mix(in oklab, var(--primary-accent) 5%, transparent);
  animation: enter-up 200ms var(--ease);
}
.page-reports .report-accepted-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: var(--text-sm); }
.page-reports .report-accepted-head svg { width: 1rem; height: 1rem; color: var(--accent-text); }
.page-reports .report-accepted-brief { font-size: var(--text-sm); white-space: pre-wrap; overflow-wrap: anywhere; }

/* list */
.page-reports .report-library { display: grid; gap: 0.75rem; }
.page-reports .report-library-head { display: flex; align-items: center; gap: 0.5rem; }
.page-reports .report-library-head .section-title { font-size: var(--text-lg); }
.page-reports .report-search { position: relative; }
.page-reports .report-search svg { position: absolute; left: 0.625rem; top: 50%; width: 1rem; height: 1rem; translate: 0 -50%; color: var(--muted-foreground); pointer-events: none; }
.page-reports .report-search .input { padding-left: 2.125rem; }
.page-reports .report-list {
  list-style: none; margin: 0; padding: 0; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--card); box-shadow: var(--shadow-sm);
}
.page-reports .report-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; padding: 0.875rem 1rem;
  transition: background-color var(--duration) var(--ease);
  & + & { border-top: 1px solid var(--border); }
  &:hover { background: color-mix(in oklab, var(--muted) 50%, transparent); }
}
.page-reports .report-row-main { flex: 1 1 20rem; min-width: 0; display: grid; gap: 0.375rem; }
.page-reports .report-question {
  font-size: var(--text-sm); font-weight: 500; line-height: 1.4; color: var(--foreground); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
  border-radius: var(--radius-sm);
  &:hover { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
  &:focus-visible { outline: none; box-shadow: var(--ring-shadow); }
}
.page-reports .report-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; font-size: var(--text-xs); color: var(--muted-foreground); }
.page-reports .report-phase { color: var(--accent-text); }
.page-reports .report-row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; margin-left: auto; }
.page-reports .report-footnote { font-size: var(--text-xs); color: var(--muted-foreground); text-align: center; }
.page-reports .report-list-region[aria-busy="true"] .report-list { opacity: 0.7; }

/* reader */
.page-reports .report-reader { display: grid; gap: 1.25rem; }
.page-reports .report-back { margin-left: -0.75rem; }
.page-reports .report-header { gap: 0.625rem; margin-bottom: 0; }
.page-reports .report-title { line-height: 1.3; overflow-wrap: anywhere; text-wrap: balance; }
.page-reports .report-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.875rem; font-size: var(--text-xs); color: var(--muted-foreground); }
.page-reports .report-id { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; }
.page-reports .report-id code { font-family: var(--font-mono); overflow-wrap: anywhere; }
.page-reports .report-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.page-reports .report-actions:empty, .page-reports .report-meta:empty, .page-reports .report-status:empty { display: none; }
.page-reports .report-progress { gap: 0.625rem; }
.page-reports .report-progress-head { display: flex; align-items: center; gap: 0.5rem; font-size: var(--text-sm); }
.page-reports .report-progress-head svg { color: var(--accent-text); }
.page-reports .report-countdown { font-variant-numeric: tabular-nums; }
.page-reports .report-body { display: grid; gap: 0.75rem; }
.page-reports .report-disclaimer {
  font-size: var(--text-xs); color: var(--muted-foreground); padding: 0.5rem 0.75rem;
  border-left: 3px solid var(--border); background: color-mix(in oklab, var(--muted) 40%, transparent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.page-reports .report-status { display: grid; }

@media (max-width: 560px) {
  .page-reports .report-row-actions { margin-left: 0; }
  .page-reports .report-shortcut { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .page-reports .report-accepted { animation: none; }
}