Assessor_2.0/src/styles/ai-overview.css

80 lines
6.5 KiB
CSS

.ai-overview-page { align-content: start; }
.ai-overview-header { display: flex; align-items: end; justify-content: space-between; gap: var(--segment-gap); }
.ai-overview-header > div:first-child { display: grid; gap: var(--space-2); }
.ai-overview-header span { color: var(--client-info-muted); font-size: var(--type-label-size); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--ls-caps); }
.ai-overview-header h1 { margin: 0; font-size: var(--type-h1-size); font-weight: var(--fw-semibold); }
.ai-overview-header p { margin: 0; color: var(--client-info-muted); font-size: var(--type-body-size); line-height: var(--lh-prose); }
.ai-overview-actions { display: flex; align-items: center; gap: var(--space-3); }
.ai-overview-state { padding: var(--space-1) var(--space-3); background: var(--tile-surface); }
.ai-overview-state.is-failed { color: var(--client-info-red); }
.ai-overview-state.is-stale { color: var(--client-info-amber); }
.ai-overview-state.is-succeeded { color: var(--client-info-green); }
.ai-overview-notice,
.ai-overview-error { margin: 0; padding: var(--space-3) var(--space-4); border-left: var(--marker-width) solid var(--client-info-amber); background: var(--tile-surface); font-size: var(--type-body-size); line-height: var(--lh-prose); }
.ai-overview-error { border-left-color: var(--client-info-red); }
.ai-overview-empty { display: grid; place-content: center; min-height: 280px; padding: var(--tile-inset); background: var(--tile-surface); text-align: center; }
.ai-overview-empty h2 { margin: 0 0 var(--space-3); font-size: var(--type-h2-size); }
.ai-overview-empty p { max-width: 680px; margin: 0; color: var(--client-info-muted); font-size: var(--type-body-size); line-height: var(--lh-prose); }
.ai-overview-content { display: grid; gap: var(--segment-gap); }
.ai-overview-executive,
.ai-overview-section { padding: var(--tile-inset); background: var(--tile-surface); }
.ai-overview-executive { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-5) var(--space-8); }
.ai-overview-executive > div > span { color: var(--client-info-muted); font-size: var(--type-label-size); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--ls-caps); }
.ai-overview-executive p { margin: var(--space-3) 0 0; font-size: var(--type-body-size); line-height: var(--lh-prose); }
.ai-overview-executive > p { grid-column: 1 / -1; padding-top: var(--space-4); border-top: var(--border-hair) solid var(--client-info-line); }
.ai-overview-executive dl { display: flex; gap: var(--space-6); margin: 0; }
.ai-overview-executive dl div { display: grid; gap: var(--space-1); }
.ai-overview-executive dt { color: var(--client-info-muted); font-size: var(--type-label-size); font-weight: var(--fw-semibold); text-transform: uppercase; }
.ai-overview-executive dd { margin: 0; font-size: var(--type-h3-size); font-weight: var(--fw-semibold); text-transform: capitalize; }
.ai-overview-section { display: grid; align-content: start; gap: var(--space-4); }
.ai-overview-section > h2 { margin: 0; font-size: var(--type-h2-size); font-weight: var(--fw-semibold); }
.ai-overview-section p,
.ai-overview-section li,
.ai-overview-section dd { font-size: var(--type-body-size); line-height: var(--lh-prose); }
.ai-overview-section > p { margin: 0; }
.ai-overview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--segment-gap); }
.ai-overview-theme,
.ai-overview-stack article { padding: var(--tile-inset); border-left: var(--marker-width) solid var(--chart-color, var(--client-info-neutral)); background: var(--client-info-surface); }
.ai-overview-theme h3,
.ai-overview-stack h3,
.ai-overview-priorities h3,
.ai-overview-roadmap h3 { margin: var(--space-2) 0; font-size: var(--type-h3-size); font-weight: var(--fw-semibold); }
.ai-overview-theme p,
.ai-overview-stack p,
.ai-overview-priorities p { margin: var(--space-2) 0; }
.ai-overview-theme small,
.ai-overview-priorities small { color: var(--client-info-muted); font-size: var(--type-meta-size); text-transform: capitalize; }
.ai-overview-refs { color: var(--client-info-muted); overflow-wrap: anywhere; }
.ai-overview-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.ai-overview-tags li { padding: var(--space-1) var(--space-2); background: var(--client-info-surface); font-size: var(--type-table-body-size); }
.ai-overview-priorities { display: grid; gap: var(--segment-gap); margin: 0; padding: 0; list-style: none; }
.ai-overview-priorities > li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--space-4); padding: var(--tile-inset); background: var(--client-info-surface); }
.ai-overview-priorities > li > b { font-size: var(--type-h2-size); font-weight: var(--fw-semibold); }
.ai-overview-priorities dl { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin: var(--space-3) 0 0; }
.ai-overview-priorities dt { color: var(--client-info-muted); font-size: var(--type-label-size); font-weight: var(--fw-semibold); }
.ai-overview-priorities dd { margin: var(--space-1) 0 0; }
.ai-overview-roadmap { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--segment-gap); }
.ai-overview-roadmap article { padding: var(--tile-inset); background: var(--client-info-surface); }
.ai-overview-roadmap article > b { font-size: var(--type-h2-size); font-weight: var(--fw-semibold); }
.ai-overview-roadmap h4 { margin: var(--space-4) 0 var(--space-2); font-size: var(--type-h4-size); font-weight: var(--fw-semibold); }
.ai-overview-roadmap ul,
.ai-overview-section > ul { margin: 0; padding-left: var(--space-5); }
.ai-overview-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--segment-gap); }
.ai-overview-stack { display: grid; gap: var(--segment-gap); }
.ai-overview-stack article { border-left-color: var(--client-info-neutral); }
.ai-overview-stack strong { display: block; margin-top: var(--space-3); font-size: var(--type-label-size); font-weight: var(--fw-semibold); text-transform: uppercase; }
.ai-overview-none { color: var(--client-info-muted); }
.ai-overview-footer { color: var(--client-info-muted); font-size: var(--type-meta-size); }
@media (max-width: 1100px) {
.ai-overview-roadmap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
.ai-overview-header,
.ai-overview-executive { display: grid; grid-template-columns: 1fr; align-items: start; }
.ai-overview-grid,
.ai-overview-split,
.ai-overview-roadmap,
.ai-overview-priorities dl { grid-template-columns: 1fr; }
}