html body#nw-web.status-page .metrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 16px; }
html body#nw-web.status-page .metric strong { font-variant-numeric:tabular-nums; }
html body#nw-web.status-page .server-state { min-height:1.7em; }
/* The hit boxes stay still while only their painted marks form the hover wave. */
html body#nw-web.status-page .history-scroll{min-width:0;max-width:100%;overflow:visible}
html body#nw-web.status-page .history{grid-template-columns:repeat(var(--history-count,61),minmax(0,1fr));gap:0;min-height:48px;align-items:center;--history-up:#7cd5bcbb;--history-down:#f488a8cc;--history-unknown:#95a7d13d}
html[data-theme="light"] body#nw-web.status-page .history{--history-up:#318a79bb;--history-down:#bf5370cc;--history-unknown:#a9b8cf3d}
html[data-theme] body#nw-web#nw-web.status-page .history button[data-state]{position:relative;display:block;height:48px;min-width:0;padding:0;border:0;border-radius:0;background:transparent!important;opacity:1!important;transform:none!important;box-shadow:none!important;cursor:pointer;outline-offset:-1px;touch-action:pan-x pan-y}
html body#nw-web#nw-web.status-page .history button::before{content:"";position:absolute;inset:12px min(1.5px,15%);border-radius:2px;background:var(--history-mark,var(--history-unknown));pointer-events:none;transform:scaleY(calc(1 + var(--history-rise,0)));transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s ease,filter .18s ease}
html body#nw-web.status-page .history button[data-state="up"]{--history-mark:var(--history-up)}
html body#nw-web.status-page .history button[data-state="down"]{--history-mark:var(--history-down)}
html body#nw-web#nw-web.status-page .history button:is([data-hovered],[data-selected],[aria-expanded="true"])::before{filter:brightness(1.25);box-shadow:inset 0 0 0 1px #eaf8ff,0 0 8px #7cd5bc66}
html[data-theme="light"] body#nw-web#nw-web.status-page .history button:is([data-hovered],[data-selected],[aria-expanded="true"])::before{filter:brightness(1.05);box-shadow:inset 0 0 0 1px #122d49,0 0 8px #318a7966}
@media(max-width:700px),(any-pointer:coarse){
 html body#nw-web.status-page .history{touch-action:pan-y pinch-zoom}
 html[data-theme] body#nw-web#nw-web.status-page .history button[data-state]{touch-action:pan-y pinch-zoom}
}
html body#nw-web.status-page #status-notice { min-height:0;margin:0;padding:0;grid-area:1 / 1; }
/* A cached warning may clear after the page is visible. Its slot must not
   collapse and pull every country upward when the fresh report arrives. */
html body#nw-web.status-page .status-notice-slot { display:grid;margin-bottom:24px;font-size:14px;line-height:1.7; }
html body#nw-web.status-page .status-guide { grid-template-columns:minmax(0,1.7fr) minmax(300px,1fr); gap:24px 48px; margin-top:48px; margin-bottom:56px; padding-top:28px; align-items:center; }
html body#nw-web.status-page .status-explanation { align-self:start; font-size:14px; line-height:1.75; padding-top:0; }
html body#nw-web.status-page .status-guide > h2 { grid-column:1 / -1; margin:0; font-size:clamp(26px,2.5vw,34px); }
html body#nw-web.status-page .status-explanation h3 { display:inline; margin:0; font-size:inherit; line-height:inherit; color:var(--nw-theme-ink,#fff); }
html body#nw-web.status-page .status-explanation h3::after { content:" — "; }
html body#nw-web.status-page .status-guide-top { margin:0 0 26px; }
html body#nw-web.status-page .status-glossary { display:block; }
html body#nw-web.status-page .status-glossary > div { margin-bottom:20px; }
html body#nw-web.status-page .status-glossary > div:last-child { margin-bottom:0; }
html body#nw-web.status-page .status-glossary p { display:inline; margin:0; }
html body#nw-web.status-page .status-guide-art { width:100%; height:auto; max-height:none; align-self:center; object-fit:contain; object-position:center; mask-image:none; -webkit-mask-image:none; }
@media(max-width:1050px){html body#nw-web.status-page .status-guide{grid-template-columns:minmax(0,1fr) 280px;gap:28px}html body#nw-web.status-page .status-glossary{grid-template-columns:1fr}html body#nw-web.status-page .status-guide-art{height:auto}}
@media(max-width:700px){html body#nw-web.status-page .status-guide{grid-template-columns:1fr;margin-top:32px;margin-bottom:36px;gap:28px}html body#nw-web.status-page .status-guide-art{width:min(100%,333px);height:auto;justify-self:center}html body#nw-web.status-page .status-explanation{font-size:14px}}

/* Reserve translated messages at every width, including the first frame. */
html body#nw-web.status-page .status-tools { display:grid;grid-template-columns:minmax(0,1fr);align-items:start;padding-bottom:24px; }
html body#nw-web.status-page :is(#status-summary,#status-updated) { display:grid;font-variant-numeric:tabular-nums; }
html body#nw-web.status-page [data-status-live],html body#nw-web.status-page .status-reserve { grid-area:1 / 1; }
html body#nw-web.status-page .status-reserve { visibility:hidden;pointer-events:none; }

/* Metadata always returns to its content height when a warning clears. */
html body#nw-web.status-page .status-reserve{display:none}
 html body#nw-web.status-page .status-notice-slot:has(#status-notice[hidden]){margin-bottom:0}
 html body#nw-web.status-page .status-meta{display:flow-root}

/* The text defines the desktop row height; artwork fits that row without
   contributing its intrinsic portrait height. Mobile keeps its own row. */
html body#nw-web.status-page .status-guide-art-frame{display:contents}
@media(min-width:701px){
 html body#nw-web.status-page .status-guide-art-frame{display:block;position:relative;align-self:stretch;min-width:0;min-height:0}
html body#nw-web.status-page .status-guide-art-frame>.status-guide-art{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center top}
}

/* A history mark opens a compact, language-panel-style check detail card. */
html body#nw-web#nw-web .status-check-popover{box-sizing:border-box;position:fixed!important;inset:auto;right:auto!important;bottom:auto!important;width:min(320px,calc(100vw - 24px));max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);overflow-y:auto;margin:0!important;padding:16px 20px 12px!important;border:0!important;border-radius:16px;background:rgba(6,17,39,.24)!important;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 16px 40px rgba(1,8,26,.22)!important;color:var(--nw-theme-ink,#fff);isolation:isolate;z-index:10020!important;font:500 14px/1.5 Manrope,Arial,sans-serif;transition:top .18s ease,left .18s ease}
html body#nw-web#nw-web .status-check-popover:before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:url("asset-80a736c7761cf67f4988.webp") center/cover;opacity:.0544}
html[data-theme="light"] body#nw-web#nw-web .status-check-popover{background:rgba(237,242,250,.24)!important;box-shadow:0 16px 40px rgba(38,69,112,.22)!important}
html[data-theme="light"] body#nw-web#nw-web .status-check-popover:before{background-image:url("clouds-light-e649aa1ea841.webp")}
html body#nw-web#nw-web .status-check-popover[hidden]{display:none!important}
html body#nw-web#nw-web .status-check-popover.is-positioning{visibility:hidden!important;animation:none!important}
html body#nw-web#nw-web .status-check-popover:not([hidden]){animation:nwStatusCheckIn .24s cubic-bezier(.2,.8,.2,1) both}
html body#nw-web#nw-web .status-check-row{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:8px 0;box-sizing:border-box}
html body#nw-web#nw-web .status-check-row:not(:last-child):after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line,linear-gradient(90deg,transparent,#b8c5e88c 18%,#b8c5e88c 82%,transparent));pointer-events:none}
html body#nw-web#nw-web .status-check-row>span{color:var(--muted,#c4ccdc);font-size:12px}
html body#nw-web#nw-web .status-check-row>strong{min-width:0;text-align:right;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
html body#nw-web#nw-web .status-check-popover:focus{outline:none}
@keyframes nwStatusCheckIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){html body#nw-web#nw-web .status-check-popover:not([hidden]){animation:none!important}html body#nw-web.status-page .history button::before{transition:none!important;transform:none!important}}

/* The check dialog is mounted on body, outside the zoomed status grid. Scale
   its own box and type with that grid; viewport positioning stays in pixels. */
@media(min-width:1921px){
 html body#nw-web#nw-web .status-check-popover{
  width:min(calc(320px * var(--nw-wide-scale,1)),calc(100vw - 24px));
  padding:calc(16px * var(--nw-wide-scale,1)) calc(20px * var(--nw-wide-scale,1)) calc(12px * var(--nw-wide-scale,1))!important;
  border-radius:calc(16px * var(--nw-wide-scale,1))!important;
  font-size:calc(14px * var(--nw-wide-scale,1));
 }
 html body#nw-web#nw-web .status-check-row{
  gap:calc(12px * var(--nw-wide-scale,1));
  min-height:calc(44px * var(--nw-wide-scale,1));
  padding:calc(8px * var(--nw-wide-scale,1)) 0;
 }
 html body#nw-web#nw-web .status-check-row>span{font-size:calc(12px * var(--nw-wide-scale,1))}
 html body#nw-web#nw-web .status-check-row>strong{font-size:calc(13px * var(--nw-wide-scale,1))}
}

