.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; } }