:root {
  color-scheme: light;
  --status-bg: #f4f7fb;
  --status-surface: #ffffff;
  --status-border: #dbe4ee;
  --status-text: #172033;
  --status-muted: #65748b;
  --status-green: #138a55;
  --status-green-bg: #eaf8f1;
  --status-blue: #1473e6;
  --status-blue-bg: #eaf3ff;
  --status-yellow: #a96800;
  --status-yellow-bg: #fff7df;
  --status-orange: #c45117;
  --status-orange-bg: #fff0e7;
  --status-red: #c02d3b;
  --status-red-bg: #ffebee;
  --status-shadow: 0 14px 38px rgba(31, 48, 73, 0.08);
}

* { box-sizing: border-box; }

body.status-public-body {
  background: var(--status-bg);
  color: var(--status-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  margin: 0;
  min-height: 100vh;
}

.status-public-shell {
  margin: 0 auto;
  max-width: 920px;
  padding: 42px 20px 64px;
}

.status-public-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
}

.status-public-brand {
  align-items: center;
  display: flex;
  gap: 12px;
}

.status-public-logo {
  border-radius: 12px;
  height: 46px;
  object-fit: contain;
  width: 46px;
}

.status-public-brand h1 { font-size: 1.15rem; margin: 0; }
.status-public-brand p,
.status-public-updated { color: var(--status-muted); font-size: 0.82rem; margin: 3px 0 0; }

.status-public-summary {
  align-items: center;
  background: var(--status-surface);
  border: 1px solid var(--status-border);
  border-left: 5px solid var(--state-color);
  border-radius: 16px;
  box-shadow: var(--status-shadow);
  display: flex;
  gap: 16px;
  margin-bottom: 28px;
  padding: 22px 24px;
}

.status-public-summary-dot {
  background: var(--state-color);
  border-radius: 999px;
  box-shadow: 0 0 0 7px var(--state-bg);
  flex: 0 0 auto;
  height: 13px;
  width: 13px;
}

.status-public-summary h2 { font-size: 1.15rem; margin: 0 0 4px; }
.status-public-summary p { color: var(--status-muted); margin: 0; }

.status-public-section { margin-top: 30px; }
.status-public-section-title { font-size: 1rem; margin: 0 0 12px; }

.status-public-components,
.status-public-stack { display: grid; gap: 10px; }

.status-public-component {
  align-items: center;
  background: var(--status-surface);
  border: 1px solid var(--status-border);
  border-radius: 12px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 15px 17px;
}

.status-public-component h3 { font-size: 0.94rem; margin: 0 0 3px; }
.status-public-component p { color: var(--status-muted); font-size: 0.8rem; margin: 0; }

.status-public-badge {
  background: var(--state-bg);
  border: 1px solid color-mix(in srgb, var(--state-color) 28%, transparent);
  border-radius: 999px;
  color: var(--state-color);
  flex: 0 0 auto;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 5px 9px;
}

.status-public-card {
  background: var(--status-surface);
  border: 1px solid var(--status-border);
  border-radius: 14px;
  box-shadow: 0 5px 18px rgba(31, 48, 73, 0.04);
  padding: 19px;
}

.status-public-card-head {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.status-public-card h3 { font-size: 1rem; margin: 0 0 5px; }
.status-public-card p { color: var(--status-muted); line-height: 1.55; margin: 10px 0 0; }
.status-public-meta { color: var(--status-muted); font-size: 0.78rem; }
.status-public-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.status-public-tag { background: #edf2f7; border-radius: 999px; color: #536176; font-size: 0.72rem; padding: 4px 8px; }

.status-public-timeline {
  border-left: 2px solid var(--status-border);
  margin: 18px 0 0 7px;
  padding-left: 18px;
}

.status-public-update { padding: 0 0 17px; position: relative; }
.status-public-update:last-child { padding-bottom: 0; }
.status-public-update::before {
  background: var(--status-surface);
  border: 3px solid var(--status-blue);
  border-radius: 50%;
  content: "";
  height: 10px;
  left: -24px;
  position: absolute;
  top: 4px;
  width: 10px;
}
.status-public-update strong { font-size: 0.82rem; }
.status-public-update time { color: var(--status-muted); display: block; font-size: 0.72rem; margin-top: 2px; }
.status-public-update p { font-size: 0.86rem; margin-top: 5px; }

.status-public-empty {
  background: var(--status-surface);
  border: 1px dashed var(--status-border);
  border-radius: 12px;
  color: var(--status-muted);
  padding: 18px;
  text-align: center;
}

.status-public-history summary { cursor: pointer; font-weight: 700; list-style-position: inside; }
.status-public-history[open] summary { margin-bottom: 12px; }
.status-public-footer { color: var(--status-muted); font-size: 0.76rem; margin-top: 38px; text-align: center; }

.state-operacional { --state-color: var(--status-green); --state-bg: var(--status-green-bg); }
.state-em_manutencao { --state-color: var(--status-blue); --state-bg: var(--status-blue-bg); }
.state-desempenho_degradado { --state-color: var(--status-yellow); --state-bg: var(--status-yellow-bg); }
.state-indisponibilidade_parcial { --state-color: var(--status-orange); --state-bg: var(--status-orange-bg); }
.state-indisponibilidade_total { --state-color: var(--status-red); --state-bg: var(--status-red-bg); }

@media (max-width: 640px) {
  .status-public-shell { padding: 24px 14px 48px; }
  .status-public-header,
  .status-public-card-head { align-items: flex-start; flex-direction: column; }
  .status-public-updated { text-align: left; }
  .status-public-summary { padding: 18px; }
  .status-public-component { align-items: flex-start; flex-direction: column; gap: 10px; }
}