:root {
  --navy-950: #050E1A; --navy-900: #071322; --navy-800: #0B1B30; --navy-line: #26415F;
  --ivory: #F7F2E8; --ivory-line: #E6DDCB; --white: #FFFFFF; --gold: #E0A526; --red: #9A3324;
  --text: #0B1B30; --muted: #4A5A6E; --on-dark: #C8D4E2;
  --ok: #1F7A4D; --ok-bg: #E6F4EC;
  --degraded: #8A6100; --degraded-bg: #FFF6DB;
  --partial: #B34700; --partial-bg: #FFEEDF;
  --major: #B3261E; --major-bg: #FDECEA;
  --maintenance: #1F5FA8; --maintenance-bg: #E8F0FB;
  --unknown: #5B6878; --unknown-bg: #EEF1F4;
  --radius: 8px;
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ivory); color: var(--text); font-size: 16px; line-height: 1.5; font-weight: 400; }
a { color: var(--navy-800); }
a:focus-visible, summary:focus-visible, main:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
h1, h2, h3 { line-height: 1.2; font-weight: 700; margin: 0; }
p { margin: 0; }
.wrap { max-width: 760px; margin: 0 auto; padding: 0 24px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -48px; background: var(--white); color: var(--navy-900); padding: 8px 16px; border-radius: var(--radius); z-index: 10; }
.skip:focus { top: 16px; }

.site-header { background: var(--navy-900); color: var(--white); border-top: 4px solid var(--gold); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 24px; padding-bottom: 24px; }
.brand { display: flex; align-items: center; gap: 16px; }
.logo-link { display: block; flex-shrink: 0; }
.logo-link img { display: block; height: 32px; width: auto; }
.site-header h1 { font-size: 20px; color: var(--white); }
.subtitle { font-size: 14px; color: var(--on-dark); margin-top: 4px; }
.site-link { color: var(--white); font-size: 14px; font-weight: 600; text-underline-offset: 4px; }
.site-link:hover { color: var(--gold); }

main { padding-top: 32px; padding-bottom: 48px; }
section + section, .notice + section { margin-top: 40px; }
section h2 { font-size: 18px; margin-bottom: 16px; }

.overall { background: var(--white); border: 1px solid var(--ivory-line); border-left: 6px solid var(--unknown); border-radius: var(--radius); padding: 24px; }
.overall[data-tone="ok"] { border-left-color: var(--ok); }
.overall[data-tone="degraded"] { border-left-color: var(--degraded); }
.overall[data-tone="partial"] { border-left-color: var(--partial); }
.overall[data-tone="major"] { border-left-color: var(--major); }
.overall[data-tone="maintenance"] { border-left-color: var(--maintenance); }
.overall-row { display: flex; align-items: center; gap: 12px; }
.overall-row .status-icon svg { width: 28px; height: 28px; }
.overall-text { font-size: 22px; font-weight: 700; line-height: 1.2; }
.overall-meta { margin-top: 8px; font-size: 14px; color: var(--muted); }

.notice { margin-top: 16px; padding: 12px 16px; border-radius: var(--radius); background: var(--degraded-bg); color: #5C4100; border: 1px solid #F0D890; font-size: 14px; }

.status-icon { display: inline-flex; color: var(--unknown); flex-shrink: 0; }
.status-icon[data-tone="ok"], [data-tone="ok"] > .status-icon { color: var(--ok); }
[data-tone="degraded"] > .status-icon { color: var(--degraded); }
[data-tone="partial"] > .status-icon { color: var(--partial); }
[data-tone="major"] > .status-icon { color: var(--major); }
[data-tone="maintenance"] > .status-icon { color: var(--maintenance); }
.status-icon[data-tone="degraded"] { color: var(--degraded); }
.status-icon[data-tone="partial"] { color: var(--partial); }
.status-icon[data-tone="major"] { color: var(--major); }
.status-icon[data-tone="maintenance"] { color: var(--maintenance); }

.components { list-style: none; margin: 0; padding: 0; background: var(--white); border: 1px solid var(--ivory-line); border-radius: var(--radius); }
.component { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 24px; }
.component + .component { border-top: 1px solid var(--ivory-line); }
.component-name { display: block; font-weight: 600; }
.component-note { display: block; font-size: 14px; }
.pill { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; white-space: nowrap; padding: 4px 12px 4px 8px; border-radius: 999px; background: var(--unknown-bg); color: var(--unknown); }
.pill .status-icon svg { width: 16px; height: 16px; }
.pill[data-tone="ok"] { background: var(--ok-bg); color: var(--ok); }
.pill[data-tone="degraded"] { background: var(--degraded-bg); color: var(--degraded); }
.pill[data-tone="partial"] { background: var(--partial-bg); color: var(--partial); }
.pill[data-tone="major"] { background: var(--major-bg); color: var(--major); }
.pill[data-tone="maintenance"] { background: var(--maintenance-bg); color: var(--maintenance); }

.card { background: var(--white); border: 1px solid var(--ivory-line); border-left: 4px solid var(--unknown); border-radius: var(--radius); padding: 16px 24px; display: grid; gap: 8px; }
.card + .card { margin-top: 16px; }
.card[data-tone="degraded"] { border-left-color: var(--degraded); }
.card[data-tone="partial"] { border-left-color: var(--partial); }
.card[data-tone="major"] { border-left-color: var(--major); }
.card[data-tone="maintenance"] { border-left-color: var(--maintenance); }
.card h3 { font-size: 17px; }
.tag { display: inline-block; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--navy-800); }
.muted { color: var(--muted); font-size: 14px; }

.timeline { list-style: none; margin: 8px 0 0; padding: 0 0 0 16px; border-left: 2px solid var(--ivory-line); display: grid; gap: 16px; }
.timeline-head { font-size: 14px; color: var(--muted); }
.timeline-head strong { color: var(--text); font-weight: 600; }
.timeline-body { white-space: pre-wrap; overflow-wrap: anywhere; }

.history { border-left-color: var(--ivory-line); }
.history summary { cursor: pointer; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; list-style-position: outside; }
.history-title { font-weight: 600; }
.history[open] summary { margin-bottom: 8px; }

.fineprint { margin-top: 16px; font-size: 13px; color: var(--muted); }

.site-footer { border-top: 1px solid var(--ivory-line); background: var(--white); font-size: 14px; color: var(--muted); }
.footer-inner { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 24px; padding-bottom: 24px; }
.site-footer nav { display: flex; gap: 16px; flex-wrap: wrap; }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--navy-900); }

@media (max-width: 560px) {
  .wrap { padding: 0 16px; }
  .brand { align-items: flex-start; }
  .overall { padding: 16px; }
  .overall-text { font-size: 19px; }
  .component { padding: 16px; align-items: flex-start; flex-direction: column; gap: 8px; }
  .card { padding: 16px; }
}