:root {
  color-scheme: light;
  --bg: #f5f7fb;
  --panel: #ffffff;
  --panel-soft: #f8fafc;
  --text: #111827;
  --muted: #6b7280;
  --border: #e5e7eb;
  --shadow: 0 16px 50px rgba(15, 23, 42, 0.08);
  --green: #16a34a;
  --yellow: #ca8a04;
  --orange: #ea580c;
  --red: #dc2626;
  --blue: #2563eb;
  --gray: #64748b;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(circle at top left, #e0f2fe 0, transparent 34rem), var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.status-page {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
  padding: 40px 0 28px;
}

.status-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
  gap: 24px;
  align-items: stretch;
  margin-bottom: 24px;
}

.brand-row,
.status-hero-card,
.panel,
.notice,
.status-contact-panel {
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 24px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}

.brand-row {
  display: flex;
  gap: 18px;
  align-items: center;
  padding: 28px;
}

.brand-logo {
    width: 334px;
    height: 64px;
    object-fit: contain;
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--blue);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.78rem;
  display: none;
}

h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: clamp(2rem, 0, 0.4rem); line-height: 1.05; }
h2 { margin-bottom: 0; font-size: 1.25rem; }
h3 { margin-bottom: 8px; font-size: 1rem; }

.status-hero-card {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 28px;
}

.overall-label { margin-bottom: 6px; color: var(--muted); font-size: 0.9rem; }
#overall-status-text { font-size: 1.45rem; margin-bottom: 6px; }
.muted { color: var(--muted); font-size: 0.92rem; }

.status-dot {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border-radius: 999px;
  background: var(--gray);
  box-shadow: 0 0 0 6px rgba(100, 116, 139, 0.12);
}

.status-operational { background: var(--green); box-shadow: 0 0 0 6px rgba(22, 163, 74, 0.13); }
.status-degraded, .status-maintenance { background: var(--yellow); box-shadow: 0 0 0 6px rgba(202, 138, 4, 0.14); }
.status-partial_outage { background: var(--orange); box-shadow: 0 0 0 6px rgba(234, 88, 12, 0.14); }
.status-major_outage, .status-critical { background: var(--red); box-shadow: 0 0 0 6px rgba(220, 38, 38, 0.14); }
.status-unknown { background: var(--gray); }

.notice {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 14px 18px;
  margin-bottom: 20px;
  color: #7c2d12;
  background: #fff7ed;
  border-color: #fed7aa;
}

.notice[hidden],
.notice[aria-hidden="true"] {
  display: none !important;
}

.notice-success {
  color: #065f46;
  background: #ecfdf5;
  border-color: #a7f3d0;
}

.status-contact-panel {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  padding: 18px 22px;
  margin-bottom: 20px;
}

.status-contact-callout {
  display: flex;
  gap: 8px;
  align-items: baseline;
  color: var(--muted);
  font-weight: 700;
}

.status-contact-callout a {
  color: var(--text);
  font-size: 1.08rem;
  text-decoration: none;
}

.status-contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
}

.status-contact-title {
  color: var(--muted);
  font-weight: 700;
  margin-right: 4px;
}

.status-contact-links a {
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--blue);
  background: #fff;
  font-weight: 700;
  padding: 7px 12px;
  text-decoration: none;
}

.status-contact-links a:hover {
  background: #eff6ff;
  border-color: #bfdbfe;
}

.panel {
  padding: 22px;
  margin-bottom: 20px;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 18px;
}

.panel-header p { margin: 6px 0 0; color: var(--muted); }

.components-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.component-card,
.timeline-card,
.empty-state {
  background: var(--panel-soft);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 16px;
}

.component-top {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}

.component-title { display: flex; gap: 10px; align-items: center; min-width: 0; }
.component-title strong { overflow-wrap: anywhere; font-size:15px; }
.component-meta { margin-top: 8px; color: var(--muted); font-size: 0.88rem; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: #eef2ff;
  color: #3730a3;
  white-space: nowrap;
}

.badge-operational { background: #dcfce7; color: #166534; }
.badge-degraded, .badge-maintenance { background: #fef3c7; color: #92400e; }
.badge-partial_outage { background: #ffedd5; color: #9a3412; }
.badge-major_outage, .badge-critical { background: #fee2e2; color: #991b1b; }
.badge-unknown { background: #e2e8f0; color: #334155; }

.stack { display: grid; gap: 14px; }
.timeline-card h3 { margin-bottom: 6px; }
.timeline-card p { margin-bottom: 10px; color: #374151; }
.timeline-meta { display: flex; flex-wrap: wrap; gap: 8px; color: var(--muted); font-size: 0.86rem; }
.timeline-updates { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 12px; display: grid; gap: 10px; }
.timeline-update { padding-left: 12px; border-left: 3px solid #cbd5e1; }
.timeline-update time { display: block; color: var(--muted); font-size: 0.8rem; margin-bottom: 3px; }

.empty-state { color: var(--muted); }

.ghost-button {
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 700;
  cursor: pointer;
}

.ghost-button:hover { background: #f8fafc; }

.status-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  color: var(--muted);
  font-size: 0.88rem;
  padding: 12px 2px 0;
}
.status-footer a { color: var(--blue); text-decoration: none; font-weight: 700; }

@media (max-width: 760px) {
  .status-page { width: min(100% - 20px, 1120px); padding-top: 20px; }
  .status-hero { grid-template-columns: 1fr; }
  .brand-row, .status-hero-card, .panel, .status-contact-panel { border-radius: 18px; padding: 18px; }
  .panel-header { flex-direction: column; }
  .components-grid { grid-template-columns: 1fr; }
  .status-footer { flex-direction: column; align-items: flex-start; }
  .status-contact-panel { flex-direction: column; align-items: flex-start; }
  .status-contact-links { justify-content: flex-start; }
}

/* RC1.14 - compact public history with scrollable detail modal */
#past-incidents.stack,
#past-maintenance.stack {
  display: grid;
  gap: 12px;
}

.history-compact-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: 14px;
  align-items: center;
  background: var(--panel-soft);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 14px 16px;
}

.history-compact-main {
  min-width: 0;
}

.history-compact-main h3 {
  margin: 0 0 4px;
  overflow-wrap: anywhere;
}

.history-compact-main p {
  margin: 0;
  color: #374151;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.history-compact-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.history-compact-meta {
  min-width: 130px;
  color: var(--muted);
  font-size: 0.84rem;
  text-align: right;
}

.history-compact-meta strong,
.history-compact-meta span {
  display: block;
}

.history-compact-meta strong {
  color: var(--text);
  font-weight: 800;
}

.history-detail-button {
  appearance: none;
  border: 1px solid #197547;
  border-radius: 999px;
  background: #1f8f55;
  color: #fff;
  cursor: pointer;
  font-weight: 800;
  padding: 9px 14px;
  white-space: nowrap;
}

.history-detail-button:hover,
.history-detail-button:focus-visible {
  background: #197547;
  border-color: #14633c;
  outline: none;
}

.status-modal-open {
  overflow: hidden;
}

.status-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.48);
}

.status-modal-backdrop[hidden] {
  display: none !important;
}

.status-modal {
  width: min(820px, 100%);
  max-height: min(760px, calc(100vh - 48px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.22);
}

.status-modal-header {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  padding: 22px 24px;
  border-bottom: 1px solid var(--border);
}

.status-modal-header h2 {
  margin: 0;
  font-size: 1.35rem;
}

.status-modal-body {
  overflow-y: auto;
  padding: 22px 24px 24px;
}

.status-modal-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.status-modal-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.status-modal-meta-item {
  background: var(--panel-soft);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 12px;
}

.status-modal-meta-item span,
.status-modal-meta-item strong {
  display: block;
}

.status-modal-meta-item span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.status-modal-meta-item strong {
  margin-top: 4px;
  overflow-wrap: anywhere;
}

.status-modal-section {
  margin-top: 18px;
}

.status-modal-section p {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: #374151;
}

.status-modal .timeline-updates {
  max-height: 360px;
  overflow-y: auto;
  padding-right: 6px;
}

@media (max-width: 900px) {
  .history-compact-card {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .history-compact-badges,
  .history-compact-meta {
    justify-content: flex-start;
    text-align: left;
  }

  .history-detail-button {
    justify-self: start;
  }
}

/* RC1.14.1 - soften public status history typography */
.public-history-row,
.public-history-row *,
.status-history-row,
.status-history-row *,
.public-status-history,
.public-status-history * {
  font-weight: 400 !important;
}

.public-history-row strong,
.public-history-row b,
.status-history-row strong,
.status-history-row b,
.public-history-title,
.status-history-title {
  font-weight: 650 !important;
}

.public-history-row .status-pill,
.public-history-row .pill,
.public-history-row .badge,
.status-history-row .status-pill,
.status-history-row .pill,
.status-history-row .badge {
  font-weight: 650 !important;
  letter-spacing: 0.01em !important;
}

.public-history-row time,
.status-history-row time,
.public-history-date,
.status-history-date {
  font-weight: 600 !important;
}

.public-history-row .button,
.public-history-row .btn,
.public-history-row button,
.status-history-row .button,
.status-history-row .btn,
.status-history-row button {
  font-weight: 650 !important;
}

.public-history-row p,
.public-history-row small,
.status-history-row p,
.status-history-row small {
  font-weight: 400 !important;
}

/* RC1.14.2 - soften public history date/button weight */
.public-history-row,
.public-history-row *,
.status-history-row,
.status-history-row * {
  font-weight: 400 !important;
}

/* Title should be readable but not heavy */
.public-history-row strong,
.public-history-row b,
.public-history-title,
.status-history-row strong,
.status-history-row b,
.status-history-title {
  font-weight: 600 !important;
}

/* Date should not shout */
.public-history-row time,
.status-history-row time,
.public-history-date,
.status-history-date,
.public-history-meta,
.status-history-meta {
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  color: #1f2f3d !important;
}

/* Updates text should be quiet */
.public-history-row small,
.status-history-row small,
.public-history-updates,
.status-history-updates {
  font-size: 0.9rem !important;
  font-weight: 400 !important;
  color: #64748b !important;
}

/* Pills should remain clear but lighter */
.public-history-row .pill,
.public-history-row .badge,
.public-history-row .status-pill,
.status-history-row .pill,
.status-history-row .badge,
.status-history-row .status-pill {
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
}

/* View details should be a Forge CTA, but not oversized/bold-heavy */
.public-history-row button,
.public-history-row .button,
.public-history-row .btn,
.public-history-row .status-history-detail-link,
.status-history-row button,
.status-history-row .button,
.status-history-row .btn,
.status-history-row .status-history-detail-link {
  min-width: 120px !important;
  max-width: 140px !important;
  padding: 9px 14px !important;
  border-radius: 999px !important;
  background: #1f8f55 !important;
  border: 1px solid #197547 !important;
  color: #ffffff !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  box-shadow: none !important;
}

.public-history-row button:hover,
.public-history-row .button:hover,
.public-history-row .btn:hover,
.public-history-row .status-history-detail-link:hover,
.status-history-row button:hover,
.status-history-row .button:hover,
.status-history-row .btn:hover,
.status-history-row .status-history-detail-link:hover {
  background: #197547 !important;
  border-color: #14633c !important;
  box-shadow: none !important;
}

/* RC1.14.3 - final public history typography weight */
.public-history-row,
.public-history-row *,
.status-history-row,
.status-history-row * {
  font-weight: 500 !important;
}

.public-history-row strong,
.public-history-row b,
.public-history-title,
.status-history-row strong,
.status-history-row b,
.status-history-title {
  font-weight: 500 !important;
}

.public-history-row time,
.status-history-row time,
.public-history-date,
.status-history-date,
.public-history-meta,
.status-history-meta {
  font-weight: 500 !important;
}

.public-history-row small,
.status-history-row small,
.public-history-updates,
.status-history-updates {
  font-weight: 500 !important;
}

.public-history-row .pill,
.public-history-row .badge,
.public-history-row .status-pill,
.status-history-row .pill,
.status-history-row .badge,
.status-history-row .status-pill {
  font-weight: 500 !important;
}

.public-history-row button,
.public-history-row .button,
.public-history-row .btn,
.public-history-row .status-history-detail-link,
.status-history-row button,
.status-history-row .button,
.status-history-row .btn,
.status-history-row .status-history-detail-link {
  font-weight: 500 !important;
}

/* RC1.14.4 - fix over-heavy public history detail typography */
.history-detail-button {
  font-weight: 500 !important;
}

.history-compact-meta strong {
  font-weight: 500 !important;
}

/* Final service card alignment */
.component-card {
  min-height: 100px;
}

.component-top {
  display: grid !important;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  column-gap: 10px;
  align-items: start;
  justify-content: initial !important;
}

.component-title {
  display: contents !important;
}

.component-title .status-dot {
  grid-column: 1;
  grid-row: 1;
  margin-top: 2px;
}

.component-title strong {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.25;
}

.component-top .badge {
  grid-column: 3;
  grid-row: 1;
  align-self: start;
  justify-self: end;
  white-space: nowrap;
}

.component-meta {
  margin-left: 36px;
}

/* Final capsule sizing */
.component-top .badge,
.badge {
  padding: 4px 9px !important;
  font-size: 0.68rem !important;
  line-height: 1.1 !important;
  letter-spacing: 0.035em !important;
}

.component-top {
  grid-template-columns: 24px minmax(0, 1fr) auto;
}

.component-title .status-dot {
  width: 16px;
  height: 16px;
  flex-basis: 16px;
}

.component-meta {
  margin-left: 34px;
}

/* Services: 5 cards per row on desktop */
.components-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.component-card {
  min-width: 0;
}

.component-top {
  grid-template-columns: 24px minmax(0, 1fr) auto !important;
  column-gap: 8px !important;
}

.component-title strong {
  font-size: 0.92rem !important;
  line-height: 1.18 !important;
}

.component-top .badge {
  padding: 4px 8px !important;
  font-size: 0.62rem !important;
}

.component-meta {
  margin-left: 32px !important;
  font-size: 0.82rem !important;
}

@media (max-width: 1280px) {
  .components-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 980px) {
  .components-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  .components-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 520px) {
  .components-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Services: 5 columns without ugly title wrapping */
.components-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.component-card {
  min-height: 132px !important;
  padding: 16px !important;
}

.component-top {
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr) !important;
  grid-template-areas:
    "dot title"
    ". badge" !important;
  column-gap: 10px !important;
  row-gap: 8px !important;
  align-items: start !important;
}

.component-title {
  display: contents !important;
}

.component-title .status-dot {
  grid-area: dot !important;
  width: 16px !important;
  height: 16px !important;
  margin-top: 2px !important;
}

.component-title strong {
  grid-area: title !important;
  font-size: 0.9rem !important;
  line-height: 1.2 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

.component-top .badge {
  grid-area: badge !important;
  justify-self: start !important;
  padding: 4px 8px !important;
  font-size: 0.62rem !important;
  line-height: 1.1 !important;
  max-width: 100% !important;
}

.component-meta {
  margin-left: 34px !important;
  margin-top: 10px !important;
  font-size: 0.82rem !important;
  line-height: 1.25 !important;
}

@media (max-width: 1320px) {
  .components-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1020px) {
  .components-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  .components-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 520px) {
  .components-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Services: compact cards and hide group/meta text */
.component-meta {
  display: none !important;
}

.component-card {
  min-height: 104px !important;
  padding: 14px 16px !important;
}

.component-top {
  grid-template-areas:
    "dot title"
    ". badge" !important;
  row-gap: 8px !important;
}

.component-title .status-dot {
  margin-top: 1px !important;
}

.component-title strong {
  font-size: 0.92rem !important;
  line-height: 1.18 !important;
}

.component-top .badge {
  justify-self: start !important;
  padding: 3px 8px !important;
  font-size: 0.62rem !important;
}

/* Services: align operational pills across cards */
.component-card {
  height: 128px !important;
  min-height: 128px !important;
  padding: 14px 16px !important;
}

.component-top {
  height: 100% !important;
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr) !important;
  grid-template-rows: 42px 24px 1fr !important;
  grid-template-areas:
    "dot title"
    ". badge"
    ". ." !important;
  column-gap: 10px !important;
  row-gap: 4px !important;
  align-items: start !important;
}

.component-title {
  display: contents !important;
}

.component-title .status-dot {
  grid-area: dot !important;
  margin-top: 1px !important;
}

.component-title strong {
  grid-area: title !important;
  min-height: 42px !important;
  max-height: 42px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  font-size: 0.92rem !important;
  line-height: 1.18 !important;
}

.component-top .badge {
  grid-area: badge !important;
  align-self: start !important;
  justify-self: start !important;
  padding: 3px 8px !important;
  font-size: 0.62rem !important;
  line-height: 1.1 !important;
}

.component-meta {
  display: none !important;
}

/* Services: remove excess vertical whitespace while keeping badge baseline aligned */
.component-card {
  height: auto !important;
  min-height: 96px !important;
  padding: 14px 16px !important;
}

.component-top {
  height: auto !important;
  grid-template-rows: 36px 22px !important;
  grid-template-areas:
    "dot title"
    ". badge" !important;
  row-gap: 2px !important;
}

.component-title strong {
  min-height: 36px !important;
  max-height: 36px !important;
  line-height: 1.15 !important;
}

.component-top .badge {
  align-self: start !important;
}

.components-grid {
  align-items: start !important;
}

/* Header contact/action buttons - Hosting UK orange */
.status-contact-links a {
  background: #f05a28 !important;
  border-color: #f05a28 !important;
  color: #ffffff !important;
  box-shadow: 0 6px 16px rgba(240, 90, 40, 0.18);
}

.status-contact-links a:hover,
.status-contact-links a:focus-visible {
  background: #d94b1f !important;
  border-color: #d94b1f !important;
  color: #ffffff !important;
  outline: none;
}