/*
 * HiveStatus status page stylesheet.
 *
 * The single source of the look of a public status page. The statuspage
 * service renders it with Go templates; the dashboard builder imports this
 * file and renders the same markup in React. Class names are a contract:
 * rename one only together with both renderers.
 *
 * Every rule is scoped under the root class .hs-page, which may sit on
 * <body> or on any element. Nothing outside the root is styled. Tokens are
 * custom properties on the root, so they work wherever it is.
 *
 * Root
 *   .hs-page                 root; set the brand with inline custom properties
 *                            --hs-brand, --hs-on-brand, --hs-brand-2, --hs-on-brand-2;
 *                            optional [data-theme="light"|"dark"] forces a theme,
 *                            otherwise prefers-color-scheme decides
 *   .hs-wrap                 centered column (max 880px)
 *   .hs-skip                 skip link, visible on focus
 *   .hs-visually-hidden      hidden but read by screen readers
 *
 * Header and footer
 *   .hs-masthead > .hs-wrap.hs-masthead__inner > a.hs-brand
 *     > img.hs-brand__logo (optional) + span.hs-brand__name
 *   .hs-footer               footer line
 *
 * Page head
 *   h1.hs-title [> span.hs-title__sub]   page name (day view: date and filter)
 *   p.hs-lead                description
 *   p.hs-crumbs              breadcrumb of the day view
 *
 * Sections, in any order
 *   section.hs-section [> div.hs-section__head > h2 + nav.hs-ranges]
 *   section.hs-banner.hs-banner--{operational|degraded|major_outage}
 *     > p.hs-banner__text + p.hs-banner__updated
 *   nav.hs-ranges > a.hs-ranges__item[aria-current="true" on the current one]
 *
 * Components and groups
 *   div.hs-component > div.hs-component__head > h3.hs-component__name + span.hs-status
 *     then p.hs-component__description (optional), div.hs-bar (optional)
 *   div.hs-group
 *     > details.hs-group__details[open unless collapsed by default]
 *         > summary.hs-group__summary > span.hs-group__name + span.hs-group__count + span.hs-status
 *         + div.hs-group__body > div.hs-component ...
 *     + div.hs-group__bar > div.hs-bar   the combined bar, shown only while collapsed
 *   span.hs-status.hs-status--{operational|degraded|major_outage}   label with a status dot
 *
 * Uptime bars
 *   div.hs-bar > ol.hs-pills[.hs-pills--wide when a narrow screen shows fewer]
 *     > li > (a|span).hs-pill[data-tier="excellent|good|degraded|down|no_data"]
 *       [> span.hs-pill__dot when an incident overlaps]
 *     + div.hs-bar__axis > span ... (span.hs-wide-only / span.hs-narrow-only)
 *   ul.hs-legend > li > span.hs-swatch[data-tier] | span.hs-swatch.hs-swatch--dot
 *   .hs-tip > p.hs-tip__date + dl + ul + a.hs-tip__more   tooltip, placed by script
 *
 * Incidents
 *   article.hs-incident > h3.hs-incident__title > a
 *     + p.hs-incident__meta > span.hs-badge.hs-badge--{minor|major|critical} + span ...
 *     + ol.hs-updates > li.hs-update > p.hs-update__head + p.hs-update__body
 *
 * Day view
 *   nav.hs-daynav > a[rel=prev] + a[rel=next]
 *   dl.hs-stats > div > dt + dd
 *
 * Misc
 *   p.hs-empty               empty state
 */

.hs-page {
  --hs-brand: #2563eb;
  --hs-on-brand: #ffffff;
  --hs-brand-2: #0f172a;
  --hs-on-brand-2: #ffffff;

  --hs-bg: #f7f8fa;
  --hs-surface: #ffffff;
  --hs-border: #e3e6eb;
  --hs-text: #111827;
  --hs-muted: #5b6472;
  --hs-tier-excellent: #15a34a;
  --hs-tier-good: #8fd9a8;
  --hs-tier-degraded: #e8b008;
  --hs-tier-down: #dc2626;
  --hs-tier-no-data: #d5d8de;
  --hs-ok: #15803d;
  --hs-warn: #a16207;
  --hs-bad: #b91c1c;
  --hs-banner-ok: #15803d;
  --hs-on-banner-ok: #ffffff;
  --hs-banner-warn: #e8b008;
  --hs-on-banner-warn: #1f1600;
  --hs-banner-bad: #b91c1c;
  --hs-on-banner-bad: #ffffff;
  --hs-dot: #374151;
  --hs-tip-bg: #111827;
  --hs-tip-text: #f9fafb;
  --hs-radius: 10px;

  margin: 0;
  background: var(--hs-bg);
  color: var(--hs-text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color-scheme: light;
}

.hs-page[data-theme="dark"] {
  --hs-bg: #0d1117;
  --hs-surface: #161b22;
  --hs-border: #2a313c;
  --hs-text: #e6e9ee;
  --hs-muted: #9aa4b2;
  --hs-tier-excellent: #2fbf62;
  --hs-tier-good: #9fdfb4;
  --hs-tier-degraded: #e3b11c;
  --hs-tier-down: #ef4444;
  --hs-tier-no-data: #3a414c;
  --hs-ok: #4ade80;
  --hs-warn: #facc15;
  --hs-bad: #f87171;
  --hs-dot: #cbd2dc;
  --hs-tip-bg: #f3f4f6;
  --hs-tip-text: #111827;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  .hs-page:not([data-theme="light"]) {
    --hs-bg: #0d1117;
    --hs-surface: #161b22;
    --hs-border: #2a313c;
    --hs-text: #e6e9ee;
    --hs-muted: #9aa4b2;
    --hs-tier-excellent: #2fbf62;
    --hs-tier-good: #9fdfb4;
    --hs-tier-degraded: #e3b11c;
    --hs-tier-down: #ef4444;
    --hs-tier-no-data: #3a414c;
    --hs-ok: #4ade80;
    --hs-warn: #facc15;
    --hs-bad: #f87171;
    --hs-dot: #cbd2dc;
    --hs-tip-bg: #f3f4f6;
    --hs-tip-text: #111827;
    color-scheme: dark;
  }
}

.hs-page,
.hs-page *,
.hs-page *::before,
.hs-page *::after { box-sizing: border-box; }

.hs-page a { color: inherit; }
.hs-page a:focus-visible,
.hs-page .hs-pill:focus-visible,
.hs-page .hs-group__summary:focus-visible { outline: 2px solid var(--hs-brand); outline-offset: 2px; }

.hs-page .hs-wrap { width: 100%; max-width: 880px; margin: 0 auto; padding: 0 16px; }

.hs-page .hs-skip { position: absolute; left: -9999px; }
.hs-page .hs-skip:focus { left: 16px; top: 8px; z-index: 10; background: var(--hs-surface); padding: 8px 12px; border-radius: 6px; }

.hs-page .hs-visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.hs-page .hs-masthead { background: var(--hs-brand-2); color: var(--hs-on-brand-2); }
.hs-page .hs-masthead__inner { display: flex; align-items: center; min-height: 64px; }
.hs-page .hs-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 600; font-size: 1.125rem; }
.hs-page .hs-brand__logo { height: 32px; width: auto; border-radius: 6px; }

.hs-page .hs-title { font-size: 1.75rem; line-height: 1.25; margin: 32px 0 8px; }
.hs-page .hs-title__sub { display: block; font-size: 1rem; font-weight: 500; color: var(--hs-muted); }
.hs-page .hs-lead { color: var(--hs-muted); margin: 0 0 24px; }
.hs-page .hs-crumbs { margin: 24px 0 0; color: var(--hs-muted); font-size: 0.9375rem; }

.hs-page .hs-banner {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px;
  margin: 24px 0 12px; padding: 16px 20px; border-radius: var(--hs-radius);
  background: var(--hs-banner-ok); color: var(--hs-on-banner-ok);
}
.hs-page .hs-banner--degraded { background: var(--hs-banner-warn); color: var(--hs-on-banner-warn); }
.hs-page .hs-banner--major_outage { background: var(--hs-banner-bad); color: var(--hs-on-banner-bad); }
.hs-page .hs-banner__text { margin: 0; font-weight: 600; font-size: 1.125rem; }
.hs-page .hs-banner__updated { margin: 0; font-size: 0.875rem; opacity: 0.9; }

.hs-page .hs-section { margin: 32px 0; }
.hs-page .hs-section h2 { font-size: 1.125rem; margin: 0 0 12px; }
.hs-page .hs-section__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 12px; }
.hs-page .hs-section__head h2 { margin: 0; }

.hs-page .hs-ranges { display: inline-flex; border: 1px solid var(--hs-border); border-radius: 8px; overflow: hidden; background: var(--hs-surface); }
.hs-page .hs-ranges__item { padding: 4px 10px; font-size: 0.875rem; text-decoration: none; color: var(--hs-muted); }
.hs-page .hs-ranges__item + .hs-ranges__item { border-left: 1px solid var(--hs-border); }
.hs-page .hs-ranges__item[aria-current] { background: var(--hs-brand); color: var(--hs-on-brand); }

.hs-page .hs-component,
.hs-page .hs-group {
  background: var(--hs-surface); border: 1px solid var(--hs-border); border-radius: var(--hs-radius);
  padding: 16px; margin-bottom: 12px;
}
.hs-page .hs-component__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.hs-page .hs-component__name { margin: 0; font-size: 1rem; }
.hs-page .hs-component__description { margin: 4px 0 0; color: var(--hs-muted); font-size: 0.875rem; }

.hs-page .hs-group__summary {
  display: flex; align-items: baseline; gap: 12px; cursor: pointer; list-style: none;
}
.hs-page .hs-group__summary::-webkit-details-marker { display: none; }
.hs-page .hs-group__summary::before {
  content: ""; flex: none; align-self: center; width: 7px; height: 7px;
  border-right: 2px solid var(--hs-muted); border-bottom: 2px solid var(--hs-muted);
  transform: rotate(-45deg); margin: 0 2px;
}
.hs-page .hs-group__details[open] > .hs-group__summary::before { transform: rotate(45deg); }
.hs-page .hs-group__name { font-weight: 600; }
.hs-page .hs-group__count { color: var(--hs-muted); font-size: 0.875rem; margin-right: auto; }
.hs-page .hs-group__body { margin-top: 12px; }
.hs-page .hs-group__body > .hs-component { margin: 0; border-radius: 0; border-width: 1px 0 0; padding: 12px 0 0; background: transparent; }
.hs-page .hs-group__body > .hs-component + .hs-component { margin-top: 12px; }
/* The combined bar stands in for the components while the group is closed. */
.hs-page .hs-group__details[open] ~ .hs-group__bar { display: none; }

.hs-page .hs-status { display: inline-flex; align-items: center; gap: 6px; font-size: 0.875rem; font-weight: 600; white-space: nowrap; }
.hs-page .hs-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--hs-ok); }
.hs-page .hs-status--degraded::before { background: var(--hs-tier-degraded); }
.hs-page .hs-status--major_outage::before { background: var(--hs-tier-down); }

.hs-page .hs-bar { margin-top: 12px; }
.hs-page .hs-pills { display: flex; gap: 2px; list-style: none; margin: 0; padding: 8px 0 0; }
.hs-page .hs-pills > li { flex: 1 1 0; min-width: 0; display: flex; }
.hs-page .hs-pill {
  position: relative; display: block; width: 100%; height: 32px; border-radius: 3px;
  background: var(--hs-tier-no-data);
}
.hs-page .hs-pill:hover { filter: brightness(0.9); }
.hs-page .hs-pill[data-tier="excellent"], .hs-page .hs-swatch[data-tier="excellent"] { background: var(--hs-tier-excellent); }
.hs-page .hs-pill[data-tier="good"], .hs-page .hs-swatch[data-tier="good"] { background: var(--hs-tier-good); }
.hs-page .hs-pill[data-tier="degraded"], .hs-page .hs-swatch[data-tier="degraded"] { background: var(--hs-tier-degraded); }
.hs-page .hs-pill[data-tier="down"], .hs-page .hs-swatch[data-tier="down"] { background: var(--hs-tier-down); }
.hs-page .hs-pill[data-tier="no_data"], .hs-page .hs-swatch[data-tier="no_data"] { background: var(--hs-tier-no-data); }
.hs-page .hs-pill__dot {
  position: absolute; top: -7px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px;
  border-radius: 50%; background: var(--hs-dot);
}

.hs-page .hs-bar__axis { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: 0.75rem; color: var(--hs-muted); }
.hs-page .hs-narrow-only { display: none; }

/* A narrow screen shows the newest 30 of 90 days; the rendering is the same. */
@media (max-width: 640px) {
  .hs-page .hs-pills--wide > li:nth-last-child(n+31) { display: none; }
  .hs-page .hs-wide-only { display: none; }
  .hs-page .hs-narrow-only { display: inline; }
  .hs-page .hs-title { font-size: 1.5rem; }
}

.hs-page .hs-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; list-style: none; margin: 12px 0 0; padding: 0; font-size: 0.75rem; color: var(--hs-muted); }
.hs-page .hs-legend li { display: inline-flex; align-items: center; gap: 6px; }
.hs-page .hs-swatch { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.hs-page .hs-swatch--dot { width: 5px; height: 5px; border-radius: 50%; background: var(--hs-dot); }

.hs-page .hs-incident {
  background: var(--hs-surface); border: 1px solid var(--hs-border);
  border-radius: var(--hs-radius); padding: 14px 16px; margin-bottom: 12px; scroll-margin-top: 16px;
}
.hs-page .hs-incident:target { box-shadow: 0 0 0 2px var(--hs-brand); }
.hs-page .hs-incident__title { margin: 0; font-size: 1rem; }
.hs-page .hs-incident__title a { text-decoration: none; }
.hs-page .hs-incident__title a:hover { text-decoration: underline; }
.hs-page .hs-incident__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 4px 0 0; font-size: 0.8125rem; color: var(--hs-muted); }
.hs-page .hs-badge { font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; font-size: 0.6875rem; padding: 1px 6px; border-radius: 4px; border: 1px solid currentColor; }
.hs-page .hs-badge--minor { color: var(--hs-muted); }
.hs-page .hs-badge--major { color: var(--hs-warn); }
.hs-page .hs-badge--critical { color: var(--hs-bad); }
.hs-page .hs-updates { list-style: none; margin: 12px 0 0; padding: 0; border-top: 1px solid var(--hs-border); }
.hs-page .hs-update { padding: 10px 0 0; }
.hs-page .hs-update__head { margin: 0; font-size: 0.875rem; }
.hs-page .hs-update__head time { color: var(--hs-muted); margin-left: 6px; }
.hs-page .hs-update__body { margin: 2px 0 0; white-space: pre-line; overflow-wrap: anywhere; }

.hs-page .hs-daynav { display: flex; justify-content: space-between; margin: 8px 0 0; font-size: 0.9375rem; }
.hs-page .hs-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin: 12px 0 0; }
.hs-page .hs-stats div { margin: 0; }
.hs-page .hs-stats dt { font-size: 0.75rem; color: var(--hs-muted); }
.hs-page .hs-stats dd { margin: 0; font-weight: 600; }

.hs-page .hs-empty { color: var(--hs-muted); }

.hs-page .hs-footer { padding-top: 16px; padding-bottom: 32px; color: var(--hs-muted); font-size: 0.875rem; text-align: center; }

.hs-page .hs-tip {
  position: fixed; z-index: 20; max-width: min(300px, calc(100vw - 32px));
  background: var(--hs-tip-bg); color: var(--hs-tip-text); border-radius: 8px;
  padding: 10px 12px; font-size: 0.8125rem; line-height: 1.4;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.25);
}
.hs-page .hs-tip[hidden] { display: none; }
.hs-page .hs-tip__date { font-weight: 600; margin: 0 0 4px; }
.hs-page .hs-tip dl { display: grid; grid-template-columns: auto auto; gap: 0 12px; margin: 0; }
.hs-page .hs-tip dd { margin: 0; text-align: right; }
.hs-page .hs-tip ul { margin: 6px 0 0; padding-left: 16px; }
.hs-page .hs-tip__more { display: inline-block; margin-top: 6px; }

@media (prefers-reduced-motion: no-preference) {
  .hs-page .hs-pill { transition: filter 0.1s; }
}