:root {
  color-scheme: light dark;
}

* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; }
h1, h2, p { margin-top: 0; }
code, pre { font: .85rem/1.45 ui-monospace, SFMono-Regular, Consolas, monospace; }

.overview-page,
.detail-page {
  --status-background: #fff;
  --status-surface: #fff;
  --status-text: #1f2328;
  --status-muted: #656d76;
  --status-line: #d0d7de;
  --status-hover: #f6f8fa;
  --status-header: #f6f8fa;
  --status-green: #1f883d;
  --status-yellow: #9a6700;
  --status-red: #cf222e;
  --status-gray: #57606a;
  --status-link: #0969da;
  min-height: 100vh;
  background: var(--status-background);
  color: var(--status-text);
  font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.overview-page .overview-shell,
.detail-page .detail-shell {
  width: min(920px, calc(100% - 40px));
  margin: 0 auto;
  padding: 48px 0 72px;
}

.status-header { margin-bottom: 28px; text-align: center; }
.overview-page h1 { margin: 0; font-size: 1.75rem; font-weight: 600; letter-spacing: -.025em; }
.overall-status { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 64px; padding: 16px 20px; border-radius: 6px; color: #fff; font-size: 1rem; text-align: center; }
.overall-status.status-green { background: var(--status-green); }
.overall-status.status-yellow { background: var(--status-yellow); }
.overall-status.status-red { background: var(--status-red); }
.overall-status.status-gray { background: var(--status-gray); }
.overall-status-icon { display: inline-flex; flex: none; align-items: center; }
.overall-status-icon .status-icon { width: 20px; height: 20px; stroke-width: 2.5; }
.history-intro { margin: 38px 0 14px; color: var(--status-muted); font-size: .875rem; }
.status-sections { display: grid; gap: 32px; }
.section-title { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 10px; font-size: 1rem; font-weight: 600; }
.section-status { display: inline-flex; align-items: center; }
.status-icon { display: block; flex: none; width: 16px; height: 16px; fill: none; stroke: currentcolor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.status-groups { display: grid; gap: 0; }
.status-group { overflow: hidden; border: 1px solid var(--status-line); border-radius: 0; background: var(--status-surface); }
.status-group:first-child { border-radius: 6px 6px 0 0; }
.status-group:last-child { border-radius: 0 0 6px 6px; }
.status-group:only-child { border-radius: 6px; }
.status-group + .status-group { border-top: 0; }
.service-summary { display: grid; grid-template-columns: minmax(110px, .28fr) minmax(240px, 1fr) 12px; align-items: center; gap: 18px; padding: 15px 20px; background: var(--status-header); cursor: pointer; list-style: none; }
.public-service-summary { grid-template-columns: minmax(110px, .28fr) minmax(240px, 1fr); cursor: default; }
.service-summary::-webkit-details-marker { display: none; }
.service-summary:hover { filter: brightness(.985); }
.service-summary:focus-visible { position: relative; z-index: 1; outline: 2px solid #0969da; outline-offset: -2px; }
.overview-page .service-title { display: flex; min-width: 0; align-items: center; gap: 8px; font-size: .95rem; font-weight: 600; }
.service-title-status { display: inline-flex; flex: none; }
.service-title-name { min-width: 0; overflow-wrap: anywhere; }
.service-history { display: grid; grid-template-columns: repeat(90, minmax(1px, 1fr)); height: 22px; gap: 1px; }
.service-history-bar { min-width: 0; border-radius: 1px; }
.service-toggle { width: 9px; height: 9px; border-right: 2px solid var(--status-muted); border-bottom: 2px solid var(--status-muted); transform: rotate(45deg) translate(-2px, -2px); transition: transform 120ms ease; }
.status-group[open] .service-toggle { transform: rotate(225deg) translate(-1px, -1px); }
.component-list { display: grid; border-top: 1px solid var(--status-line); }
.component-row { position: relative; color: inherit; transition: background-color 120ms ease; }
.component-row + .component-row { border-top: 1px solid var(--status-line); }
.component-row:hover { background: var(--status-hover); }
.component-detail-link { display: block; padding: 18px 20px 16px; color: inherit; text-decoration: none; }
.component-row-with-source .component-summary { padding-right: 34px; }
.component-source-link { position: absolute; z-index: 1; top: 13px; right: 15px; display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; border-radius: 6px; color: var(--status-muted); }
.component-source-link:hover { background: var(--status-surface); color: var(--status-link); }
.source-link-icon { display: block; width: 16px; height: 16px; fill: none; stroke: currentcolor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.component-detail-link:focus-visible,
.component-source-link:focus-visible,
.back-link:focus-visible,
.detail-page summary:focus-visible { outline: 2px solid #0969da; outline-offset: 2px; }
.component-summary { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 12px; }
.component-name { min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.component-status,
.detail-status,
.table-status { display: inline-flex; flex: none; align-items: center; gap: 7px; font-size: .82rem; font-weight: 500; }
.legend-dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; }
.status-text-green { color: var(--status-green); }
.status-text-yellow { color: var(--status-yellow); }
.status-text-red { color: var(--status-red); }
.status-text-gray { color: var(--status-gray); }
.component-history { display: grid; grid-template-columns: repeat(90, minmax(1px, 1fr)); height: 34px; gap: 2px; }
.history-bar { min-width: 0; border-radius: 1px; }
.status-green { background-color: var(--status-green); }
.status-yellow { background-color: var(--status-yellow); }
.status-red { background-color: var(--status-red); }
.status-gray { background-color: var(--status-gray); }
.history-axis { display: flex; justify-content: space-between; margin-top: 6px; color: var(--status-muted); font-size: .72rem; }
.status-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px 18px; margin-top: 18px; color: var(--status-muted); font-size: .75rem; }
.status-legend span { display: inline-flex; align-items: center; gap: 6px; }

.detail-nav { margin-bottom: 32px; }
.back-link { color: var(--status-muted); font-size: .875rem; text-decoration: none; }
.back-link:hover { color: var(--status-text); text-decoration: underline; }
.source-link { color: var(--status-link); font-weight: 600; text-decoration: none; }
.source-link:hover { text-decoration: underline; }
.detail-header { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.detail-kicker { margin-bottom: 6px; color: var(--status-muted); font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.detail-page h1 { margin: 0; font-size: 2rem; font-weight: 600; letter-spacing: -.03em; }
.detail-status { padding-bottom: 5px; }
.detail-status .status-icon { width: 18px; height: 18px; }
.detail-panel { overflow: hidden; margin-top: 24px; border: 1px solid var(--status-line); border-radius: 6px; background: var(--status-surface); }
.panel-title { margin: 0; padding: 14px 20px; border-bottom: 1px solid var(--status-line); background: var(--status-header); font-size: .95rem; font-weight: 600; }
.state-list { display: grid; grid-template-columns: minmax(160px, .35fr) 1fr; gap: 12px 28px; margin: 0; padding: 20px; }
.detail-page dt { color: var(--status-muted); }
.detail-page dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.detail-page code { overflow-wrap: anywhere; }
.table-wrap { overflow-x: auto; }
.detail-page table { width: 100%; border-collapse: collapse; }
.detail-page th,
.detail-page td { padding: 12px 14px; border-bottom: 1px solid var(--status-line); text-align: left; vertical-align: top; }
.detail-page tbody tr:last-child td { border-bottom: 0; }
.detail-page th { color: var(--status-muted); font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.table-status { white-space: nowrap; }
.detail-page details summary { cursor: pointer; color: var(--status-muted); }
.detail-page pre { max-width: 620px; max-height: 360px; margin-bottom: 0; padding: 12px; overflow: auto; border-radius: 4px; background: var(--status-hover); white-space: pre-wrap; }

@media (min-width: 800px) {
  .component-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .component-row + .component-row { border-top: 0; }
  .component-row { border-top: 1px solid var(--status-line); }
  .component-row:nth-child(-n + 2) { border-top: 0; }
}

@media (max-width: 700px) {
  .overview-page .overview-shell,
  .detail-page .detail-shell { width: min(100% - 24px, 920px); padding: 28px 0 48px; }
  .status-header { margin-bottom: 22px; }
  .overall-status { min-height: 56px; }
  .history-intro { margin-top: 30px; }
  .service-summary { grid-template-columns: 1fr 12px; gap: 10px 14px; padding: 13px 15px; }
  .public-service-summary { grid-template-columns: 1fr; }
  .service-history { grid-column: 1 / -1; grid-row: 2; height: 18px; }
  .service-toggle { grid-column: 2; grid-row: 1; }
  .panel-title { padding: 13px 15px; }
  .component-detail-link { padding: 16px 15px 14px; }
  .component-source-link { top: 11px; right: 10px; }
  .component-summary { align-items: flex-start; flex-direction: column; gap: 5px; }
  .component-history { height: 30px; gap: 1px; }
  .status-legend { justify-content: flex-start; }
  .detail-nav { margin-bottom: 24px; }
  .detail-header { align-items: flex-start; flex-direction: column; gap: 10px; margin-bottom: 24px; }
  .detail-page h1 { font-size: 1.75rem; }
  .detail-status { padding-bottom: 0; }
  .state-list { grid-template-columns: 1fr; gap: 3px; padding: 16px 15px; }
  .detail-page dd { margin-bottom: 10px; }
  .detail-page dd:last-child { margin-bottom: 0; }
  .detail-page table { min-width: 680px; }
}

@media (prefers-color-scheme: dark) {
  .overview-page,
  .detail-page {
    --status-background: #0d1117;
    --status-surface: #0d1117;
    --status-text: #e6edf3;
    --status-muted: #8c959f;
    --status-line: #30363d;
    --status-hover: #161b22;
    --status-header: #161b22;
    --status-green: #3fb950;
    --status-yellow: #d29922;
    --status-red: #f85149;
    --status-gray: #8c959f;
    --status-link: #58a6ff;
  }
  .overall-status.status-green { background: #238636; }
  .overall-status.status-yellow { background: #9e6a03; }
  .overall-status.status-red { background: #da3633; }
  .overall-status.status-gray { background: #484f58; }
  .component-detail-link:focus-visible,
  .component-source-link:focus-visible,
  .back-link:focus-visible,
  .source-link:focus-visible,
  .detail-page summary:focus-visible { outline-color: #58a6ff; }
  .service-summary:focus-visible { outline-color: #58a6ff; }
}