/* Onyx Status */
/* Powered by Hangouts Cloud and Claude */

.masthead-container .masthead { height: auto !important; min-height: 64px; display: flex; align-items: center; justify-content: space-between; }
.masthead .logo-container { height: auto !important; display: flex; align-items: center; margin: 0 !important; }
.masthead .logo-container .site-logo { display: block; height: 34px !important; width: 34px !important; max-width: none !important; max-height: none !important; color: var(--ds-gray-1000, #000); }
.masthead .logo-container a { display: inline-flex; align-items: center; }
.masthead .updates-dropdown-container .show-updates-dropdown { text-decoration: none; }
.masthead .subscribe-text-short { display: none; }
@media (max-width: 480px) { .masthead .subscribe-text-full { display: none; } .masthead .subscribe-text-short { display: inline; } }

:root { --ease: cubic-bezier(.22, 1, .36, 1); --ease-io: cubic-bezier(.45, 0, .2, 1); }

/* Uptime popup: styled like the Contact button (same fill, border, radius and text), with the Minecraft loading-screen card's tail and spring-out from the tail tip. */
#uptime-tooltip { display: block !important; position: absolute; top: 0; left: 0; width: 0; height: 0; z-index: 1000; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-6px) scale(.94); filter: blur(3px); will-change: transform, opacity, filter; transition: opacity .2s var(--ease-io), transform .24s var(--ease-io), filter .2s var(--ease-io), visibility 0s .24s; }
#uptime-tooltip.open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; filter: blur(0); transition: opacity .34s var(--ease), transform .55s var(--ease), filter .4s var(--ease), visibility 0s; }
@media (prefers-reduced-motion: reduce) { #uptime-tooltip, #uptime-tooltip.open { transition: opacity .1s linear, visibility 0s; transform: none; filter: none; } }
#uptime-tooltip .pointer-container, #uptime-tooltip .tooltip-box { position: absolute; transition: left .4s var(--ease), top .4s var(--ease); }
#uptime-tooltip.snap .pointer-container, #uptime-tooltip.snap .tooltip-box { transition: none; }
#uptime-tooltip .pointer-container { width: 16px; height: 15px; margin-left: -8px; top: auto; z-index: 3; pointer-events: none; }
#uptime-tooltip .pointer-container svg { display: block; }
#uptime-tooltip .tail-fill { fill: var(--ds-background-100); }
#uptime-tooltip .tail-line { stroke: var(--ds-gray-400); stroke-width: 1; }
#uptime-tooltip .tooltip-box { width: 325px; max-width: min(325px, calc(100vw - 16px)); padding: 15px 17px 17px; background: var(--ds-background-100) !important; border: 1px solid var(--ds-gray-400) !important; border-radius: 6px !important; box-shadow: none; color: var(--ds-gray-1000); font-size: 14px; font-weight: 500; z-index: 2; }
#uptime-tooltip .date { margin: 0 0 4px; font-size: 14px; font-weight: 500; color: var(--ds-gray-1000); }
/* error / warning / success / info notes inside the popup: tinted fill and border, Gravity icon in the tone color */
#uptime-tooltip .note { --tone: var(--ds-blue-900); display: flex; align-items: center; gap: 10px; height: auto; margin: 12px 0 0; padding: 9px 12px; border: 1px solid color-mix(in oklab, var(--tone) 30%, transparent); border-radius: 4px; background: color-mix(in oklab, var(--tone) 11%, transparent); color: var(--ds-gray-1000); font-size: 14px; font-weight: 500; line-height: 20px; }
#uptime-tooltip .note .gi { color: var(--tone); vertical-align: 0; }
#uptime-tooltip .note .text { min-width: 0; }
#uptime-tooltip .tone-error { --tone: var(--ds-red-900); }
#uptime-tooltip .tone-warning { --tone: var(--ds-amber-900); }
#uptime-tooltip .tone-ok { --tone: var(--ds-green-900); }
#uptime-tooltip .tone-info { --tone: var(--ds-blue-900); }
#uptime-tooltip .outage-field { justify-content: space-between; }
#uptime-tooltip .outage-field .label { display: inline-flex; align-items: center; gap: 10px; margin: 0; }
#uptime-tooltip .outage-field .duration { color: var(--ds-gray-900); font-variant-numeric: tabular-nums; font-weight: 400; white-space: nowrap; }
#uptime-tooltip .outage-field .value-hrs { margin-right: .25em; }
#uptime-tooltip .related-events { padding-left: 0; }
#uptime-tooltip .related-events #related-event-header { margin: 16px 0 6px; color: var(--ds-gray-900); font-size: 12px; line-height: 16px; letter-spacing: .06em; }
#uptime-tooltip .related-events ul { margin: 0; padding: 0; list-style: none; }
#uptime-tooltip .related-events li { margin: 0 0 6px; line-height: 20px; font-weight: 500; }
#uptime-tooltip .related-events li:last-child { margin-bottom: 0; }
#uptime-tooltip li a { color: var(--ds-gray-1000) !important; text-decoration: underline; text-decoration-color: var(--ds-gray-400); text-underline-offset: 3px; transition: text-decoration-color .2s ease; }
#uptime-tooltip li a:hover { text-decoration-color: var(--ds-gray-1000); }

.availability-time-line-graphic { width: 100%; }
.availability-time-line-graphic rect { outline: none; }
/* the invisible stroke widens each bar's hit area across the gaps, so sweeping along a row never "leaves" a bar */
.availability-time-line-graphic rect { stroke: transparent; stroke-width: 4px; vector-effect: non-scaling-stroke; pointer-events: all; transition: opacity .2s var(--ease), fill .4s var(--ease); }
.availability-time-line-graphic rect:hover, .availability-time-line-graphic rect:focus { opacity: .8; }
.incident-container .updates-container .update small { display: block; margin-top: 4px; }

/* the captured theme sets dark-mode body text to a near-black gray; use the readable one everywhere */
:root body { color: var(--ds-gray-1000) !important; }

/* no Vercel triangle: the captured theme draws it as the logo link's background and clips the link to 20px */
.masthead .logo-container, .masthead .logo-container a { background-image: none !important; width: auto !important; height: auto !important; overflow: visible !important; }

/* long row names wrap instead of being cut off on phones */
.components-container .component-inner-container .name { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; max-width: 70%; }

/* Scheduled-offline rows (Bedrock): gray, never red. */
.component-inner-container.status-offline .component-status { color: var(--ds-gray-900, #6b7280); }
.component-inner-container.status-offline .icon-indicator { color: var(--ds-gray-900, #6b7280); }

/* smooth, shared transitions for everything else that changes on hover or when the status changes */
.masthead .show-updates-dropdown { transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease) !important; }
.component-inner-container .component-status, .component-inner-container .icon-indicator { transition: color .4s var(--ease); }
a { transition: color .2s var(--ease), text-decoration-color .2s var(--ease), opacity .2s var(--ease); }
.logo-container a { transition: opacity .25s var(--ease); }
.logo-container a:hover { opacity: .8; }
@media (prefers-reduced-motion: reduce) { .availability-time-line-graphic rect, .masthead .show-updates-dropdown, .page-status, .components-section, .incidents-list, a { transition-duration: .01ms !important; } }

/* Articles follow straight on from the bars: no heading, and the same 24px rhythm the bar rows use. */
.layout-content.status.status-index .components-section { margin-bottom: 0 !important; }
.layout-content.status .incidents-list { margin-top: 24px !important; }
#days .status-day:first-child { margin-top: 0 !important; }
#days .status-day + .status-day { margin-top: 28px !important; }

/* Popups never intercept a mouse (it passes straight to the bar underneath); touch screens keep them tappable. */
@media (hover: hover) and (pointer: fine) { #uptime-tooltip, #uptime-tooltip.open { pointer-events: none; } }

/* Nothing shows until there is a real status, then it fades in quickly (no "Checking" flash on open or reload). */
.page-status, .components-section, .incidents-list { opacity: 0; transition: opacity .3s var(--ease); }
body[data-shown] .page-status, body[data-shown] .components-section, body[data-shown] .incidents-list { opacity: 1; }
body[data-ready] .page-status { transition: opacity .3s var(--ease), background-color .5s var(--ease), color .5s var(--ease); }

/* Contact: the popup card's language, a hair brighter on hover. */
.masthead .show-updates-dropdown:hover { background-color: color-mix(in oklab, var(--ds-gray-1000) 7%, var(--ds-background-100)) !important; border-color: var(--ds-gray-500) !important; }
.masthead .show-updates-dropdown:active { background-color: color-mix(in oklab, var(--ds-gray-1000) 3%, var(--ds-background-100)) !important; }