/* Layout and pointer effects extend the shared FastVPS shell and experience CSS. */
.fastvps-status-page .status-overview { padding-top: 0; border-top: 0; }
.status-summary { display: flex; align-items: center; gap: 24px; margin: 0 0 28px; padding: 28px; border: 1px solid var(--line); background: var(--panel); }
.status-summary h2 { font-size: clamp(1.25rem,2vw,1.65rem); line-height: 1.35; margin: 0 0 8px; color: var(--ink); }
.status-summary p { margin: 0; color: var(--muted); font-size: .9375rem; }
.status-summary .button { margin-left: auto; flex: 0 0 auto; }
.status-dot { width: 12px; height: 12px; flex: 0 0 12px; border-radius: 50%; background: #ffcc7b; box-shadow: 0 0 20px #ffcc7b33; }
.status-summary.online .status-dot { background: #73e9ad; box-shadow: 0 0 20px #73e9ad33; }
.status-summary.offline .status-dot { background: #ff9999; box-shadow: 0 0 20px #ff999933; }
.status-components { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 20px; }
.status-reveal { min-width: 0; }
.status-components .component { padding: 26px 22px; margin: 0; border-radius: 0; min-width: 0; height: 100%; }
.status-components h3 { font-size: 1.25rem; margin: 0 0 26px; }
.status-components strong { display: block; color: #ffcc7b; font-size: .9375rem; }
.status-components [data-state=online] strong { color: #97edba; }
.status-components [data-state=offline] strong { color: #ffadad; }
.status-components p { color: var(--muted); margin: 12px 0 0; font: .875rem/1.6 ui-monospace,monospace; }
.status-meta { margin-top: 24px !important; font-size: .9375rem !important; color: var(--muted) !important; }
.status-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.status-detail-grid > section { min-width: 0; }
.status-detail-grid h2 { margin: 0 0 16px; font-size: clamp(1.5rem,2.4vw,2.1rem); line-height: 1.2; }
.status-detail-grid p { color: var(--muted); line-height: 1.75; }
.status-detail-grid .notice { border: 1px solid var(--line); padding: 24px; margin-top: 20px; background: var(--panel); }
.status-detail-grid .notice small { color: var(--cyan); }
.status-detail-grid .notice h3 { margin: 12px 0; }
.status-detail-grid .notice p { white-space: pre-line; overflow-wrap: anywhere; }
.status-history { list-style: none; padding: 0; margin: 28px 0 0; }
.status-history li { display: grid; gap: 8px; border-top: 1px solid var(--line); padding: 20px 12px; color: var(--ink); }
.status-history time { color: var(--muted); font-size: .875rem; }
.status-explainer { padding: 0; margin: 0; border-left: 2px solid var(--cyan); padding-left: 24px; }
.status-explainer p { max-width: 960px; }
.fastvps-status-page [role=status]:empty { display: none; }
/* Reveal transforms belong to wrappers, so pointer transitions never inherit a reveal delay. */
@media (hover:hover) and (pointer:fine) {
  .status-history [data-fastvps-hover]:hover { translate: 6px 0; }
}
@media (max-width: 1000px) { .status-components { grid-template-columns: repeat(2,minmax(0,1fr)); } .status-detail-grid { gap: 32px; } }
@media (max-width: 640px) { .status-summary { flex-wrap: wrap; gap: 16px; padding: 22px; } .status-summary > div { flex: 1; } .status-summary .button { width: 100%; margin: 0; } .status-components,.status-detail-grid { grid-template-columns: 1fr; } .status-components .component { padding: 24px; } .status-components h3 { margin-bottom: 16px; } }
@media (prefers-reduced-motion:reduce) {
  .status-history [data-fastvps-hover]:hover { translate: none; }
}
@media print {
  html.fastvps-motion-ready .fastvps-status-page [data-fastvps-reveal] { opacity: 1; filter: none; transform: none; }
}