.status-page {
  --status-up: #23834f;
  --status-down: #c53c35;
  --status-unknown: #717678;
  --status-bar-up: #459964;
  --status-bar-down: #d24a42;
  --status-bar-unknown: #c9ccca;
  --status-up-soft: #edf5ee;
  --status-down-soft: #f9e9e6;
  --status-unknown-soft: #eeefec;
  background: #faf8f4;
}

.status-page::before { display: none; }
.status-page [hidden] { display: none !important; }
.status-page .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.status-page .container { max-width: 1120px; }
.status-header { background: #faf8f4; backdrop-filter: none; }
.status-header .container { justify-content: flex-start; gap: 64px; }
.status-header nav { align-self: stretch; gap: 32px; }
.status-header nav a { display: flex; align-items: center; border-bottom: 2px solid transparent; text-decoration: none; font-size: 14px; font-weight: 500; }
.status-header nav [aria-current] { border-color: var(--color-accent); font-weight: 700; }
.status-language { margin-left: auto; font-size: 14px; text-decoration: none; padding: 12px 4px; }
.status-main { padding-top: 44px; padding-bottom: 48px; }
.status-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.status-heading h1 { font-size: 36px; line-height: 1.15; }
.status-update { display: flex; align-items: center; gap: 18px; text-align: right; color: var(--color-muted); font-size: 12px; }
.status-update p + p { margin-top: 3px; }
.icon-button { flex: 0 0 44px; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--color-rule); border-radius: 6px; background: transparent; cursor: pointer; }
.icon-button:hover { background: var(--color-paper-2); }
.icon-button svg { width: 21px; height: 21px; }
.icon-button:disabled { cursor: wait; opacity: .6; }
.status-banner { display: flex; align-items: center; gap: 16px; padding: 20px 22px; background: var(--status-unknown-soft); border-radius: 6px; }
.status-banner[data-state="OPERATIONAL"] { background: var(--status-up-soft); }
.status-banner[data-state="PARTIAL_OUTAGE"], .status-banner[data-state="MAJOR_OUTAGE"] { background: var(--status-down-soft); }
.status-banner strong { font-family: var(--font-display); font-size: 22px; line-height: 1.25; }
.status-banner p { padding-left: 20px; border-left: 1px solid var(--color-rule); font-size: 14px; }
.status-dot { display: inline-block; width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; background: var(--status-unknown); }
.status-banner > .status-dot { width: 15px; height: 15px; flex-basis: 15px; }
[data-state="UP"] .status-dot, [data-state="OPERATIONAL"] > .status-dot { background: var(--status-up); }
[data-state="DOWN"] .status-dot, [data-state="PARTIAL_OUTAGE"] > .status-dot, [data-state="MAJOR_OUTAGE"] > .status-dot { background: var(--status-down); }
.status-error { margin: 16px 0; padding-left: 14px; border-left: 3px solid var(--status-down); color: var(--status-down); font-size: 14px; }
.status-counts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 28px 0 32px; }
.status-counts > div { padding: 0 24px; text-align: center; border-right: 1px solid var(--color-rule); }
.status-counts > div:last-child { border: 0; }
.status-counts dt { font-family: var(--font-mono); font-size: 28px; font-weight: 600; line-height: 1.25; }
.status-counts dd { margin: 4px 0 0; color: var(--color-muted); font-size: 14px; }
.status-toolbar { display: flex; justify-content: space-between; align-items: stretch; gap: 20px; border-bottom: 1px solid var(--color-rule); }
.status-tabs { display: flex; gap: 28px; }
.status-tabs button { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 0 12px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; font-size: 16px; font-weight: 600; color: var(--color-muted); cursor: pointer; }
.status-tabs button[aria-selected="true"] { color: var(--color-ink); border-color: var(--color-accent); }
.status-tabs span { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--color-muted); }
.status-filters { display: flex; gap: 12px; padding-bottom: 12px; }
.status-search { position: relative; display: flex; align-items: center; }
.status-search svg { position: absolute; left: 12px; width: 18px; height: 18px; color: var(--color-muted); pointer-events: none; }
.status-search input, .status-filters select { height: 42px; border: 1px solid var(--color-rule); border-radius: 5px; background: transparent; font-size: 14px; color: var(--color-ink); }
.status-search input { padding: 8px 12px 8px 38px; width: 240px; min-width: 0; }
.status-search input::placeholder { color: var(--color-muted); opacity: 1; }
.status-filters select { padding: 8px 30px 8px 12px; cursor: pointer; max-width: 180px; }
.status-history-note { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 0; color: var(--color-muted); font-size: 12px; line-height: 1.6; }
.status-history-note p { max-width: 660px; }
.status-legend { display: flex; gap: 14px; white-space: nowrap; }
.status-legend span { display: flex; align-items: center; gap: 6px; }
.status-legend i { width: 8px; height: 12px; background: var(--status-bar-unknown); border-radius: 2px; }
.status-legend i[data-state="UP"] { background: var(--status-bar-up); }
.status-legend i[data-state="DOWN"] { background: var(--status-bar-down); }
.monitor-columns, .monitor-row { display: grid; grid-template-columns: minmax(0, 1fr) 135px 330px; gap: 24px; align-items: center; }
.monitor-columns { padding: 12px 0; border-block: 1px solid var(--color-rule); color: var(--color-muted); font-size: 12px; font-weight: 600; }
.monitor-columns > div, .monitor-metrics { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 14px; }
.monitor-row { padding: 20px 0; border-bottom: 1px solid var(--color-rule); }
.monitor-main { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; column-gap: 16px; min-width: 0; }
.monitor-icon { grid-row: 1 / 3; width: 26px; height: 26px; color: var(--color-ink-2); }
.monitor-open { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; width: 100%; padding: 0 0 8px; border: 0; background: transparent; text-align: left; cursor: pointer; }
.monitor-open strong { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.monitor-open:hover strong { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }
.monitor-open small { font-size: 11px; color: var(--color-muted); white-space: nowrap; }
.monitor-state { display: flex; gap: 8px; align-items: center; font-size: 13px; line-height: 1.4; }
.monitor-state small { display: block; color: var(--color-muted); font-size: 11px; margin-top: 3px; }
.monitor-metrics > div { min-width: 0; }
.monitor-metrics strong { display: block; font-family: var(--font-mono); font-size: 14px; font-weight: 500; white-space: nowrap; }
.monitor-metrics small { display: block; font-size: 11px; color: var(--color-muted); margin-top: 4px; }
.history { grid-column: 2; min-width: 0; }
.history-bars { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; }
.history-day { display: block; min-width: 0; height: 26px; padding: 3px 0; border: 0; background: transparent; cursor: pointer; }
.history-day::before { content: ""; display: block; width: 100%; height: 100%; border-radius: 2px; background: var(--status-bar-unknown); }
.history-day[data-state="UP"]::before { background: var(--status-bar-up); }
.history-day[data-state="DOWN"]::before { background: var(--status-bar-down); }
.history-day[data-partial="true"]::before { box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .18); }
.history-day:hover::before, .history-day:focus-visible::before { filter: brightness(.85); }
.history-dates { display: flex; justify-content: space-between; gap: 16px; padding-top: 3px; color: var(--color-muted); font-size: 11px; }
.status-empty { padding: 42px 0; text-align: center; color: var(--color-muted); font-size: 14px; }
.status-list-note { padding: 12px 0; color: var(--color-muted); font-size: 12px; }
.status-incidents { margin-top: 40px; }
.status-section-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 18px; }
.status-section-heading h2, .status-method h2, .detail-section-title { font-size: 22px; line-height: 1.25; }
.status-section-heading p { color: var(--color-muted); font-size: 12px; }
.incident-row { display: grid; grid-template-columns: minmax(0, 1fr) 120px 170px minmax(0, 1.3fr); gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--color-rule); align-items: start; font-size: 13px; }
.incident-row:first-child { border-top: 1px solid var(--color-rule); }
.incident-name { font-weight: 600; overflow-wrap: anywhere; }
.incident-time, .incident-description small { color: var(--color-muted); font-size: 12px; }
.incident-description small { display: block; margin-top: 4px; }
.status-more { display: block; margin-top: 18px; padding: 10px 14px; border: 1px solid var(--color-rule); border-radius: 5px; background: transparent; font-size: 14px; cursor: pointer; }
.status-more:hover { border-color: var(--color-ink); }
.status-more:disabled, .status-more[aria-disabled="true"] { cursor: wait; opacity: .6; }
.status-method { display: grid; gap: 12px; max-width: 760px; margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--color-rule); color: var(--color-muted); font-size: 13px; }
.status-method h2 { font-size: 16px; color: var(--color-ink); }
.status-method p + p { margin: 0; }
.status-footer { padding: 22px 0; border-top: 1px solid var(--color-rule); background: transparent; color: var(--color-muted); font-size: 12px; }
.status-footer > div { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.status-footer a { text-decoration: none; }
.history-tooltip { position: fixed; z-index: 1001; max-width: min(300px, calc(100vw - 24px)); padding: 12px 14px; border: 1px solid var(--color-rule); border-radius: 5px; background: #fff; color: var(--color-ink); font-size: 12px; line-height: 1.6; box-shadow: 0 8px 28px rgba(0, 0, 0, .12); pointer-events: none; white-space: pre-line; }
#monitor-dialog { width: min(860px, calc(100vw - 32px)); max-height: calc(100svh - 40px); padding: 28px; border: 1px solid var(--color-rule); border-radius: 8px; color: var(--color-ink); background: #faf8f4; overscroll-behavior: contain; }
#monitor-dialog::backdrop { background: rgba(20, 20, 20, .38); }
.dialog-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; padding-bottom: 22px; border-bottom: 1px solid var(--color-rule); }
.dialog-heading h2 { font-size: 28px; line-height: 1.15; }
.dialog-heading p { color: var(--color-muted); font-size: 12px; margin-bottom: 6px; }
.detail-meta { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; margin-top: 20px; color: var(--color-muted); font-size: 12px; }
.detail-meta .monitor-state { color: var(--color-ink); }
.detail-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding-block: 24px; }
.detail-metrics strong { font-size: 18px; }
#detail-content > .history { margin-bottom: 28px; }
.detail-section-title { margin: 28px 0 16px; font-size: 18px; }
.response-plot { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 8px; margin-top: 8px; }
.response-scale { display: flex; flex-direction: column; justify-content: space-between; text-align: right; height: 160px; padding-block: 1px; color: var(--color-muted); font-family: var(--font-mono); font-size: 11px; line-height: 14px; }
.response-chart { width: 100%; height: 160px; }
.response-axis { display: flex; justify-content: space-between; gap: 20px; margin: 8px 0 14px 48px; color: var(--color-muted); font-family: var(--font-mono); font-size: 11px; line-height: 1.5; }
.response-axis span { min-width: 0; max-width: 50%; }
.response-axis span:last-child { text-align: right; }
.response-chart .chart-line { stroke: var(--color-accent); stroke-width: 2; fill: none; }
.response-chart .chart-point { fill: var(--color-accent); }
.response-chart .chart-rule { stroke: var(--color-rule); stroke-width: 1; }
.response-caption { color: var(--color-muted); font-size: 12px; }
.response-table { margin-top: 14px; font-size: 12px; }
.response-table summary { cursor: pointer; }
.response-table table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.response-table th, .response-table td { padding: 7px 8px; text-align: left; border-bottom: 1px solid var(--color-rule); }
#detail-content .incident-row { grid-template-columns: 110px 160px minmax(0, 1fr); gap: 18px; }

@media (max-width: 68rem) {
  .monitor-columns, .monitor-row { grid-template-columns: minmax(0, 1fr) 115px 270px; gap: 18px; }
  .status-history-note { flex-wrap: wrap; gap: 10px; }
  .monitor-metrics strong { font-size: 12px; }
}
@media (max-width: 54rem) {
  .status-toolbar { flex-wrap: wrap; }
  .status-tabs { order: 2; width: 100%; }
  .status-filters { flex: 1; padding-bottom: 0; }
  .status-search { flex: 1; }
  .status-search input { width: 100%; }
  .monitor-columns { display: none; }
  .monitor-row { grid-template-columns: minmax(0, 1fr) auto; gap: 14px 18px; }
  .monitor-metrics { grid-column: 1 / -1; margin-left: 48px; }
  .monitor-metrics strong { font-size: 14px; }
  .monitor-state { max-width: 130px; }
  .incident-row { grid-template-columns: minmax(0, 1fr) 120px; gap: 10px 18px; }
  .incident-description { grid-column: 1 / -1; }
  .status-section-heading { flex-wrap: wrap; gap: 8px; }
}
@media (max-width: 42rem) {
  .status-header .container { gap: 16px; flex-wrap: wrap; padding-block: 12px; min-height: 68px; }
  .status-header .logo { order: 0; }
  .status-language { order: 1; padding: 2px 4px; }
  .status-header nav { order: 2; flex: 0 0 100%; justify-content: flex-start; gap: 26px; min-height: 30px; }
  .status-header nav a { padding-bottom: 6px; }
  .status-main { padding-top: 28px; }
  .status-heading { align-items: flex-start; flex-direction: column; gap: 16px; margin-bottom: 22px; }
  .status-heading h1 { font-size: 30px; }
  .status-update { width: 100%; justify-content: space-between; text-align: left; }
  .status-banner { display: grid; grid-template-columns: 15px minmax(0, 1fr); gap: 10px 12px; padding: 18px; }
  .status-banner strong { font-size: 20px; }
  .status-banner p { grid-column: 2; padding: 0; border: 0; font-size: 13px; }
  .status-counts > div { padding: 0 6px; }
  .status-counts dt { font-size: 24px; }
  .status-counts dd { font-size: 12px; }
  .status-filters { gap: 8px; }
  .status-filters select { max-width: 136px; padding: 8px; font-size: 13px; }
  .status-search input { font-size: 13px; }
  .status-tabs { gap: 24px; }
  .monitor-main { grid-template-columns: 24px minmax(0, 1fr); gap: 10px; }
  .monitor-icon { width: 20px; height: 20px; }
  .monitor-row { grid-template-columns: minmax(0, 1fr); gap: 12px; padding-block: 18px; }
  .monitor-state { grid-row: 2; margin-left: 34px; max-width: none; }
  .monitor-metrics { grid-column: 1; margin-left: 34px; gap: 8px; }
  .monitor-metrics strong { font-size: 13px; }
  .monitor-open { flex-wrap: wrap; gap: 2px 12px; }
  .monitor-open strong { font-size: 14px; }
  .history-bars { gap: 3px; }
  .incident-row, #detail-content .incident-row { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
  #detail-content .incident-description { grid-column: 1 / -1; }
  #monitor-dialog { padding: 20px; width: calc(100vw - 20px); }
  .dialog-heading h2 { font-size: 24px; }
  .detail-metrics { gap: 10px; }
  .detail-metrics strong { font-size: 14px; }
  .response-chart { height: 160px; }
  .status-footer > div { flex-direction: column; gap: 8px; }
}