/* Spatial refinement: shared edges, compact chrome, readable content. */
:root {
  --page-width: 1280px;
  --page-gutter: 32px;
  --panel-gap: 20px;
  --panel-inset: 24px;
  --section-gap: 28px;
}
.app-shell { max-width: var(--page-width); padding: 0 var(--page-gutter); }
.masthead { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; padding: 16px 0; }
.brand { justify-self: start; }
.brand-lockup { min-width: 80px; padding: 0; }
.brand .brand-wordmark { font-size: 46px; line-height: 1.2; }
.brand .brand-lockup small { line-height: 1.5; }
.masthead nav { gap: 28px; }
.masthead nav a, .masthead nav button { min-height: 44px; display: inline-flex; align-items: center; }
.demo-badge { justify-self: end; }
.page-intro { padding: 24px 0; }
.page-intro > div { display: flex; align-items: center; justify-content: space-between; gap: 32px; width: 100%; }
.page-intro h1 { font-size: 28px; line-height: 1.5; flex-shrink: 0; }
.intro-description { margin: 0; max-width: 45ch; }
.overview-grid { grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr); gap: var(--panel-gap); align-items: stretch; }
.status-card, .facts-card { padding: var(--panel-inset); border-radius: 24px; min-width: 0; }
.status-card { min-height: 320px; }
.status-copy { display: flex; flex-direction: column; justify-content: center; padding: 20px 0; }
.status-copy h2 { font-size: 36px; line-height: 1.4; }
.status-copy > p:last-child { margin-top: 12px; max-width: 52ch; }
.status-bottom { align-items: center; padding-top: 16px; gap: 16px; }
.facts-subtitle { margin: 4px 0 8px; }
.facts-list > div { padding: 10px 0; min-height: 44px; }
.facts-note { padding-top: 12px; }
.quick-actions { gap: var(--panel-gap); margin: 24px 0 var(--section-gap); }
.quick-action { padding: 16px 20px; min-height: 84px; gap: 12px; align-items: center; }
.quick-action > span:not(.round-icon) { min-width: 0; }
.quick-action .round-icon { width: 40px; height: 40px; }
.events-heading { margin: 0 0 16px; align-items: center; gap: 16px; }
.events-heading h2 { font-size: 22px; }
.filters button { min-height: 44px; }
.events-list { padding: 0 var(--panel-inset); }
.event-row { padding: 16px 0; gap: 16px; }
.event-meta { gap: 24px; }
.event-state { min-width: 92px; text-align: center; }
.events-footnote { padding: 0; margin: 12px 0 0; }
.detail-panel { padding: var(--panel-inset); margin: 0 0 var(--section-gap); }
.prototype-tools { margin-top: 24px; padding: 16px 0; }
footer { align-items: center; padding: 16px 0 24px; }
.footer-identity .brand-wordmark { font-size: 28px; }

@media (max-width: 1050px) {
  :root { --page-gutter: 24px; }
  .page-intro > div { display: block; }
  .intro-description { margin-top: 6px; max-width: none; }
  .overview-grid { grid-template-columns: minmax(0, 1.3fr) minmax(280px, 1fr); }
  .status-copy h2 { font-size: 32px; }
  .desktop-break { display: none; }
  .quick-action { padding: 16px; }
}
@media (max-width: 760px) {
  :root { --page-gutter: 20px; --panel-inset: 20px; --panel-gap: 16px; }
  .masthead { grid-template-columns: auto 1fr; gap: 8px 20px; padding: 12px 0; }
  .masthead nav { grid-column: 1 / -1; grid-row: 2; justify-content: space-between; gap: 16px; width: 100%; order: initial; }
  .demo-badge { margin: 0; }
  .overview-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
  .status-card { min-height: 0; }
  .status-copy { padding: 24px 0; }
  .status-bottom { flex-wrap: wrap; }
  .facts-card { padding: 20px; }
  .facts-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; }
  .facts-list > div { gap: 12px; }
  .facts-list > div:last-child { grid-column: 1 / -1; }
  .quick-actions { grid-template-columns: 1fr; gap: 12px; margin: 20px 0 28px; }
  .quick-action { flex-direction: row; text-align: right; min-height: 76px; padding: 14px 20px; }
  .quick-action strong { font-size: 15px; }
  .quick-action small { max-width: none; }
  .quick-action .action-arrow { display: block; }
  .evidence-grid, .method-grid { grid-template-columns: 1fr; }
}
@media (min-width: 601px) and (max-width: 760px) {
  .masthead { grid-template-columns: 1fr auto 1fr; gap: 16px; padding: 16px 0; }
  .masthead nav { grid-column: 2; grid-row: 1; width: auto; gap: 16px; }
  .quick-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .quick-action { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: start; padding: 16px 12px; gap: 8px; }
  .quick-action .round-icon { width: 36px; height: 36px; }
  .quick-action .action-arrow { display: none; }
}
@media (max-width: 480px) {
  :root { --page-gutter: 16px; --panel-inset: 20px; }
  .brand .brand-wordmark { font-size: 42px; }
  .brand-lockup { min-width: 72px; }
  .masthead nav { font-size: 14px; gap: 12px; }
  .page-intro { padding: 20px 0; }
  .page-intro h1 { font-size: 24px; }
  .intro-description { font-size: 14px; line-height: 1.8; }
  .status-copy h2 { font-size: 30px; }
  .status-copy { padding: 20px 0; }
  .card-wordmark { font-size: 12px; }
  .facts-list { grid-template-columns: 1fr; }
  .facts-list > div { padding: 8px 0; }
  .events-heading { align-items: flex-start; flex-direction: column; gap: 12px; }
  .events-heading h2 { font-size: 21px; }
  .filters { width: 100%; }
  .filters button { flex: 1; }
  .event-row { gap: 8px 12px; }
  .event-meta { gap: 12px; }
  .event-state { min-width: 0; }
  .event-copy h3 { font-size: 15px; }
  .events-footnote { gap: 6px; }
  .prototype-tools { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; }
  .prototype-tools > div { grid-column: 1 / -1; margin: 0; }
  .prototype-tools select { width: 100%; max-width: none; margin: 0; }
  footer { align-items: flex-start; gap: 8px; }
}