/* Refinement of the existing APH red, white and grey interface. */
body.aph2-theme {
  --vp-ink: #303743;
  --vp-muted: #596374;
  --vp-line: #e3e6eb;
  --vp-hover: #f7f8fa;
  --vp-focus: #b32b31;
}

/* Keep the title in the reading path while giving the figures the first screen. */
body.aph2-theme .r228-overview {
  gap: 16px;
}
body.aph2-theme #main-content .r228-home header.r228-hero {
  grid-column: 1 / -1;
  min-height: 100px;
  padding: 20px 24px;
  gap: 24px;
}
body.aph2-theme #main-content .r228-home header.r228-hero h1 {
  display: block !important;
  font-size: 24px !important;
  line-height: 1.4 !important;
  margin: 4px 0;
}
body.aph2-theme .r228-hero-brand strong { font-size: 20px; }
body.aph2-theme .r228-hero time { align-self: center; }
body.aph2-theme .r228-core { min-height: 220px; }
body.aph2-theme .r228-metric { min-height: 148px; }
body.aph2-theme .r228-card-heading h2 { font-size: 15px; line-height: 1.5; }
body.aph2-theme .r228-muted,
body.aph2-theme .r228-budget dt { color: var(--vp-muted); font-size: 12px; }
body.aph2-theme .r228-number,
body.aph2-theme .r228-budget dd { font-variant-numeric: tabular-nums; }

/* The percentage stays inside the ring; the complete gap gets its own line. */
body.aph2-theme .r228-collection-body { gap: 24px; padding-bottom: 24px; }
body.aph2-theme .r228-ring { width: 112px; height: 112px; }
body.aph2-theme .r228-ring > div { overflow: visible; }
body.aph2-theme .r228-ring strong { font-size: 20px; line-height: 1.2; }
body.aph2-theme .r228-ring small {
  position: absolute;
  top: 100%;
  left: 0;
  width: max-content;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.5;
  white-space: nowrap;
  color: var(--vp-muted);
}
body.aph2-theme .r228-collection-body dd { font-size: 20px; }

/* Replace the viewport-based absolute offset with the header's own flex flow. */
@media (min-width: 1024px) {
  body.aph2-theme header.sticky.top-0 > div:has(> .aph-header-status) > .ml-auto {
    order: 2;
    margin-left: 0 !important;
  }
  body.aph2-theme header.sticky.top-0 .aph-header-status.r7-unified-source-host {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    order: 1;
    width: auto !important;
    max-width: none !important;
    flex: 0 1 auto;
    margin-left: auto;
    margin-right: 16px;
    overflow: visible;
  }
  body.aph2-theme .aph-header-status .r7-unified-source-status {
    gap: 12px;
    justify-content: flex-end;
  }
  body.aph2-theme .aph-header-status .r7-unified-source-item { gap: 6px; padding-left: 10px; }
}

/* Use the established table rhythm and make states readable across modules. */
body.aph2-theme .r228-table { font-size: 13px; }
body.aph2-theme .r228-table tbody tr:hover,
body.aph2-theme .sprint-table tbody tr:hover { background: var(--vp-hover); }
body.aph2-theme .sprint-screen .sprint-muted,
body.aph2-theme .sprint-screen .sprint-metric-context { color: var(--vp-muted); }
body.aph2-theme .sprint-screen button,
body.aph2-theme .sprint-screen select,
body.aph2-theme .sprint-screen input:not([type="checkbox"]),
body.aph2-theme .sprint-screen summary { min-height: 44px; }
body.aph2-theme .sprint-source-detail > summary,
body.aph2-theme .sprint-notice > summary,
body.aph2-theme .sprint-disclosures summary { padding-block: 10px; }
body.aph2-theme .sprint-screen :is(button, select, input, summary):focus-visible,
body.aph2-theme .r228-screen :is(a, button, select, input, summary):focus-visible {
  outline: 2px solid var(--vp-focus);
  outline-offset: 3px;
}
body.aph2-theme .sprint-screen button,
body.aph2-theme .r228-toolbar button {
  transition: background-color 140ms ease-out, border-color 140ms ease-out;
}
@media (prefers-reduced-motion: reduce) {
  body.aph2-theme .sprint-screen button,
  body.aph2-theme .r228-toolbar button { transition: none; }
}

@media (min-width: 1200px) {
  body.aph2-theme .r228-overview { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  body.aph2-theme .r228-core { grid-column: span 3; }
  body.aph2-theme .r228-collection-card { grid-column: span 2; }
  body.aph2-theme .r228-metric > .r228-number { font-size: clamp(24px, 2vw, 32px); }
}
@media (min-width: 768px) and (max-width: 1199px) {
  body.aph2-theme .r228-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.aph2-theme .r228-overview > .r228-metric:last-child { grid-column: 1 / -1; }
  body.aph2-theme .r228-collection-body { gap: 16px; }
  body.aph2-theme .r228-collection-body dd { font-size: 18px; }
}
@media (max-width: 767px) {
  body.aph2-theme:has(.sprint-screen) main#main-content { padding-top: 52px !important; }
  body.aph2-theme .r228-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  body.aph2-theme .r228-core,
  body.aph2-theme .r228-collection-card { grid-column: 1 / -1; }
  body.aph2-theme #main-content .r228-home header.r228-hero { min-height: 104px; padding: 16px; gap: 8px; }
  body.aph2-theme #main-content .r228-home header.r228-hero h1 { font-size: 20px !important; }
  body.aph2-theme .r228-hero time { margin-left: auto; font-size: 12px; }
  body.aph2-theme .r228-metric { min-height: 132px; padding: 14px; }
  body.aph2-theme .r228-metric > .r228-number { font-size: 21px; }
  body.aph2-theme .r228-metric .r228-card-heading { gap: 8px; }
  body.aph2-theme .r228-metric .r228-card-heading h2 { font-size: 13px; }
  body.aph2-theme .r228-overview > .r228-metric:last-child { grid-column: 1 / -1; min-height: 104px; }
  body.aph2-theme .r228-ring { width: 96px; height: 96px; }
  body.aph2-theme .r228-ring strong { font-size: 18px; }
  body.aph2-theme .r228-collection-body { gap: 16px; }
  body.aph2-theme .r228-collection-body dd { font-size: 18px; }
  body.aph2-theme .sprint-screen .sprint-tabs { gap: 16px; }
}