/* The public status page's own styles (layouts/status_page). No app stylesheet or scripts load there.
   The page's brand colours come in as --sp-brand, --sp-brand-ink and --sp-brand-tint on <body>. */
* { box-sizing: border-box; }
body { margin: 0; background: #F6F7F9; color: #14161B; font-family: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: var(--sp-brand); }
a:hover { opacity: .85; }
.min-w-0 { min-width: 0; }
.sp-hidden-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.sp-wrap { max-width: 860px; margin: 0 auto; padding: 40px 24px 56px; }
.sp-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 36px; }
.sp-brand { display: flex; align-items: center; gap: 12px; min-width: 0; color: inherit; text-decoration: none; }
.sp-logo { width: 40px; height: 40px; border-radius: 10px; background: var(--sp-brand-tint); color: var(--sp-brand); display: flex; align-items: center; justify-content: center; font-weight: 700; flex: none; overflow: hidden; }
.sp-logo img { width: 100%; height: 100%; object-fit: contain; }
.sp-name { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 22px; overflow-wrap: anywhere; }
.sp-btn { font: inherit; font-weight: 600; font-size: 15px; padding: 12px 18px; border-radius: 10px; border: 1px solid #D5D7DC; background: #fff; color: #14161B; cursor: pointer; text-decoration: none; display: inline-block; }
.sp-btn-brand { background: var(--sp-brand); border-color: var(--sp-brand); color: var(--sp-brand-ink); }
.sp-subscribe { position: relative; }
.sp-subscribe > summary { list-style: none; }
.sp-subscribe > summary::-webkit-details-marker { display: none; }
.sp-subscribe-panel { position: absolute; right: 0; top: calc(100% + 8px); width: min(340px, calc(100vw - 32px)); background: #fff; border: 1px solid #E4E5E8; border-radius: 14px; padding: 16px; box-shadow: 0 12px 32px rgba(20, 22, 27, .12); z-index: 2; }
.sp-subscribe-panel p { margin: 0 0 10px; font-size: 14px; color: #4A505C; }
.sp-input { font: inherit; font-size: 15px; width: 100%; padding: 11px 13px; border: 1.5px solid #D5D7DC; border-radius: 10px; margin-bottom: 10px; }
.sp-notice { border-radius: 12px; padding: 12px 16px; font-size: 14px; margin-bottom: 20px; background: #fff; border: 1px solid #E4E5E8; }
.sp-banner { border: 1px solid; border-radius: 16px; padding: 22px 24px; display: flex; gap: 14px; align-items: flex-start; margin-bottom: 12px; }
.sp-banner svg { flex: none; margin-top: 2px; }
.sp-banner-title { font-weight: 700; font-size: 19px; }
.sp-banner-body { font-size: 15px; margin-top: 4px; line-height: 1.5; white-space: pre-line; }
.sp-banner-meta { font-size: 13px; margin-top: 8px; opacity: .85; }
.sp-card { background: #fff; border: 1px solid #E4E5E8; border-radius: 16px; margin-top: 24px; }
.sp-component { padding: 20px 24px; border-bottom: 1px solid #EEEFF1; }
.sp-component:last-child { border-bottom: 0; }
.sp-component-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.sp-component-name { font-weight: 600; font-size: 16px; }
.sp-component-desc { font-size: 13px; color: #5B616E; margin-top: 2px; }
.sp-component-state { font-size: 14px; font-weight: 600; white-space: nowrap; }
.sp-bars { display: flex; gap: 2px; height: 32px; margin-top: 12px; }
.sp-bars span { flex: 1 1 0; border-radius: 2px; min-width: 0; }
.sp-bars-foot { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: #5B616E; margin-top: 8px; }
.sp-h2 { font-family: "Bricolage Grotesque", sans-serif; font-size: 24px; margin: 40px 0 16px; }
.sp-list { display: flex; flex-direction: column; gap: 12px; }
.sp-story { background: #fff; border: 1px solid #E4E5E8; border-radius: 14px; padding: 20px 24px; }
.sp-story-meta { font-size: 13px; color: #5B616E; }
.sp-story-title { font-weight: 600; font-size: 16px; margin: 4px 0 6px; }
.sp-story-body { font-size: 15px; color: #4A505C; line-height: 1.5; white-space: pre-line; }
.sp-story-updates { list-style: none; margin: 12px 0 0; padding: 0; border-top: 1px solid #EEEFF1; }
.sp-story-updates li { padding: 10px 0 0; font-size: 14px; color: #4A505C; line-height: 1.5; }
.sp-story-updates strong { color: #14161B; }
.sp-empty { color: #5B616E; font-size: 15px; }
.sp-foot { margin-top: 40px; text-align: center; font-size: 13px; color: #5B616E; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; }
@media (max-width: 600px) {
  .sp-wrap { padding: 24px 16px 40px; }
  .sp-head { margin-bottom: 24px; }
  .sp-banner, .sp-component, .sp-story { padding: 16px; }
  .sp-bars { gap: 1px; height: 28px; }
  .sp-subscribe-panel { left: 0; right: auto; }
}