/* QuickSync's approved Codex theme: matching tokens, Geist, pill controls and lavender hero. */
@font-face {
  font-family: Geist;
  src: url('/geist-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
:root {
  color-scheme: light;
  --ink: #0d0d0f;
  --body: #3f3f46;
  --muted: #6b6b76;
  --line: #ececf0;
  --surface: #f6f6f8;
  --accent: #4b57ee;
  --accent-tint: #eef0ff;
  --body-background-color: #fff;
  --body-text-color: var(--ink);
  --card-background-color: #fff;
  --nav-background-color: transparent;
  --nav-border-bottom-color: transparent;
  --nav-current-border-bottom-color: transparent;
  --card-border-color: var(--line);
  --up-border-left-color: #0f7b4f;
  --down-border-left-color: #b54708;
  --down-background-color: #fffaeb;
  --degraded-border-left-color: #b54708;
  --tag-color: #fff;
  --tag-up-background-color: #0f7b4f;
  --tag-down-background-color: #935a09;
  --tag-degraded-background-color: #935a09;
  --change-background-color: var(--accent-tint);
  --error-button-border-color: var(--ink);
  --error-button-background-color: var(--ink);
  --error-button-color: #fff;
  --submit-button-border-color: var(--ink);
  --submit-button-background-color: var(--ink);
  --submit-button-color: #fff;
  --graph-opacity: 1;
  --graph-filter: none;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; }
html body {
  margin: 0; padding: 0;
  background:
    radial-gradient(55% 45% at 18% 22%, rgba(199,210,254,.75), transparent 70%) top / 100% 660px no-repeat,
    radial-gradient(45% 50% at 82% 14%, rgba(221,214,254,.8), transparent 70%) top / 100% 660px no-repeat,
    radial-gradient(50% 40% at 30% 85%, rgba(233,213,255,.35), transparent 70%) top / 100% 660px no-repeat,
    linear-gradient(180deg, #f3f1ff, #f7f7ff 55%, #fff) top / 100% 660px no-repeat,
    #fff;
  color: var(--ink);
  font: 15px/1.6 Geist, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
::selection { background: #dedbff; color: var(--ink); }
a { color: inherit; text-underline-offset: 4px; }
a:focus-visible, button:focus-visible, input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 5px; }
#sapper .container { width: min(1080px,100%); max-width: 1080px; margin-inline: auto; padding-inline: 36px; }
#sapper nav { background: transparent; border: 0; padding: 0; margin: 0; overflow: visible; }
#sapper nav .container { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
#sapper nav .logo { margin: 0; padding: 0; float: none; display: flex; align-items: center; }
#sapper nav .logo img { width: 112px; height: 36px; margin: 0; border-radius: 0; }
/* Keep the original link's accessible name while displaying the brand artwork. */
#sapper nav .logo div { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#sapper nav ul { gap: 6px; }
#sapper nav ul a { padding: 8px 16px; font-size: 13px; font-weight: 500; border: 0; border-radius: 999px; transition: background .15s; }
#sapper nav ul a:hover, #sapper nav ul a[aria-current='page'] { background: #0d0d0f08; color: var(--ink); border: 0; }
#sapper nav li:last-child a { background: var(--ink); color: #fff; }
#sapper nav li:last-child a:hover { background: #2b2b33; }
#sapper main.container { padding-top: 40px; }
#sapper main > header { min-height: 260px; margin: 0 auto 38px; padding: 0; text-align: center; }
#sapper main > header::before { content: 'QuickSync service status'; display: block; margin-bottom: 22px; color: var(--muted); font-size: 14px; font-weight: 500; }
#sapper main h1 { margin: 0 0 24px; font-size: clamp(42px,5.6vw,72px); font-weight: 500; line-height: 1.04; letter-spacing: -.045em; text-wrap: balance; }
#sapper main h1 strong { font-weight: 500; background: linear-gradient(92deg,#4b57ee,#7c6cf6 55%,#b07cf7); background-clip: text; -webkit-background-clip: text; color: transparent; }
#sapper main > header .lead { max-width: 560px; margin: 0 auto; color: var(--body); font-size: 17px; line-height: 1.65; text-wrap: balance; }
#sapper main h2 { font-size: 22px; font-weight: 500; line-height: 1.3; letter-spacing: -.035em; }
#sapper main h3 { font-size: 16px; }
#sapper main article { position: relative; padding: 26px; border: 1px solid var(--line); border-radius: 20px; }
#sapper main > article.up {
  min-height: 82px; display: flex; align-items: center; gap: 14px;
  padding: 24px 28px; border: 1px solid #fff !important;
  background: #ffffffda; color: var(--ink); font-size: 18px; font-weight: 500;
  letter-spacing: -.35px; backdrop-filter: blur(10px);
  box-shadow: 0 1px 2px #0f0f1e04, 0 10px 28px -16px #1e1e5020;
}
#sapper main > article.up::after { content: 'Website & app availability'; margin-left: auto; color: var(--muted); font-size: 12px; font-weight: 400; letter-spacing: 0; }
#sapper main > article.up.status-icon::before { content: ''; flex: 0 0 24px; width: 24px; height: 24px; background: url('/status-operational.svg') center / contain no-repeat; }
#sapper main > article.up + section:empty { margin: 0; }
#sapper main > .f { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-top: 42px; margin-bottom: 20px; gap: 16px; }
#sapper main > .f h2 { margin: 0; }
#sapper main > .f > form.r { display: flex; flex-wrap: nowrap; gap: 3px; padding: 4px; border-radius: 999px; background: #0d0d0f05; border: 1px solid #0d0d0f06; }
#sapper main > .f > form.r > div { position: relative; }
/* Visually hidden rather than display:none so arrow keys still operate the radio group. */
#sapper main > .f > form.r input { display: block; position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
#sapper main > .f > form.r label { display: block; padding: 5px 14px; margin: 0; border-radius: 999px; cursor: pointer; font-size: 12px; color: var(--muted); transition: background .15s, color .15s; }
#sapper main > .f > form.r input:checked + label { background: var(--ink); color: #fff; font-weight: 500; }
#sapper main > .f > form.r label:hover { background: #0d0d0f0a; color: var(--ink); }
#sapper main > .f > form.r input:checked + label:hover { background: #2b2b33; color: #fff; }
#sapper main .live-status { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; background: transparent; }
#sapper main .live-status article.graph { margin: 0; padding: 27px; border: 1px solid var(--line) !important; background: #fff !important; transition: border-color .2s, box-shadow .2s; }
#sapper main .live-status article.graph:hover { border-color: #dcdce3 !important; box-shadow: 0 2px 6px #0f0f1e04,0 24px 50px -30px #28286e28; }
/* Upptime exports 600 × 400 charts. Reserve their full aspect ratio so no data is cropped. */
#sapper main .live-status article.graph::after { content: ''; display: block; position: relative; width: 100%; height: auto; aspect-ratio: 3 / 2; margin-top: 24px; background: var(--background) center / contain no-repeat; opacity: 1; filter: none; mask-image: none; }
#sapper main .live-status article.graph::before { content: none; position: absolute; top: 28px; right: 24px; padding: 4px 10px 4px 21px; border-radius: 999px; background: radial-gradient(circle at 10px 50%,#0f7b4f 2.5px,transparent 3px),#ecfdf3; color: #0f7b4f; font-size: 10px; font-weight: 500; line-height: 1.6; }
#sapper main .live-status article.up::before { content: 'Operational'; }
#sapper main .live-status article.down::before { content: 'Degraded'; color: #9b4a0c; background: radial-gradient(circle at 10px 50%,#b54708 2.5px,transparent 3px),#fffaeb; }
#sapper main .live-status article.degraded::before { content: 'Degraded'; color: #9b4a0c; background: radial-gradient(circle at 10px 50%,#b54708 2.5px,transparent 3px),#fffaeb; }
#sapper main .live-status h4 { margin: 0 100px 31px 0; font-size: 16px; font-weight: 500; line-height: 1.45; letter-spacing: -.035em; }
#sapper main .live-status h4 .icon { height: 18px; width: 18px; margin-right: 7px; border-radius: 4px; }
#sapper main .live-status h4 a::after { border-radius: 20px; }
#sapper main .live-status article > div { display: inline-flex; flex-direction: column; width: 48%; gap: 7px; color: var(--muted); font-size: 12px; }
#sapper main .live-status .data { padding: 0; background: none; color: var(--ink); font-size: 32px; font-weight: 500; line-height: 1.2; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
#sapper main .live-status article > div + div { border-left: 1px solid var(--line); padding-left: 24px; }
#sapper main .live-status .loading { grid-column: 1/-1; }
#sapper main article.down-active { background: #fffaeb; border-color: #fedf89; }
#sapper main article.degraded { background: #fffaeb; }
#sapper main .tag { border-radius: 999px; padding: 5px 12px; font-size: 12px; letter-spacing: 0; font-weight: 500; }
#sapper main .tag.open, #sapper main .tag.down, #sapper main .tag.degraded { background-color: #fffaeb !important; color: #935a09; }
#sapper main .tag.closed { background-color: #ecfdf3 !important; color: #0f7b4f; }
/* Incident notices use the same quiet cards and pill actions as quicksync.pro. */
#sapper main article.down-active { padding: 24px 26px; margin-bottom: 12px; border: 1px solid #f1d68b !important; background: #fffdf5; }
#sapper main article.down-active > .f { align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px 24px; }
#sapper main article.down-active > .f > div:first-child { min-width: 0; }
#sapper main article.down-active h4 { margin: 0 0 7px; font-size: 16px; font-weight: 500; letter-spacing: -.025em; line-height: 1.5; }
#sapper main article.down-active h4::before { content: ''; display: inline-block; width: 7px; height: 7px; margin: 0 10px 2px 0; border-radius: 50%; background: #c28416; }
#sapper main article.down-active h4 + div { color: var(--muted); font-size: 12px; line-height: 1.7; }
#sapper main article.down-active .r a { display: inline-flex; padding: 8px 16px; border-radius: 999px; background: var(--ink); color: #fff; text-decoration: none; font-size: 12px; font-weight: 500; white-space: nowrap; }
#sapper main article.down-active .r a:hover { background: #2b2b33; }
/* Keep incident metadata separate from the large uptime metrics on history pages. */
#sapper main:has(> h2 .tag) { max-width: 880px; padding-top: 44px; }
#sapper main:has(> h2 .tag) > h2 { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 0 0 28px; font-size: 34px; line-height: 1.2; }
#sapper main:has(> h2 .tag) > section > .f { align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; padding-bottom: 24px; margin-bottom: 28px; border-bottom: 1px solid var(--line); }
#sapper main:has(> h2 .tag) dl { margin: 0; padding: 0; border: 0; gap: 8px 12px; }
#sapper main:has(> h2 .tag) dd { color: var(--body); font-size: 14px; line-height: 1.6; margin: 0 18px 0 0; }
#sapper main:has(> h2 .tag) .r p { margin: 0; }
#sapper main:has(> h2 .tag) .r a { display: inline-flex; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 12px; font-weight: 500; text-decoration: none; }
#sapper main:has(> h2 .tag) section > article { margin-bottom: 14px; padding: 26px; background: #fff; }
#sapper main:has(> h2 .tag) section > article > p { color: var(--body); font-size: 16px; line-height: 1.75; margin: 0 0 20px; }
#sapper main:has(> h2 .tag) section > article > div { color: var(--muted); font-size: 12px; line-height: 1.8; }
#sapper main:has(> h2 .tag) section > article > div a { color: inherit; text-decoration: none; }
#sapper main:has(> h2 .tag) section > article > div a:hover { text-decoration: underline; }
#sapper main > footer { width: auto; margin: 28px 0 0; padding: 0; background: none; color: var(--body); opacity: 1; text-align: left; font-size: 13px; }
#sapper main > footer a { display: inline-flex; padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px; background: #fff; text-decoration: none; }
#sapper main > footer a:hover { background: var(--surface); }
#sapper main dl { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px 18px; padding: 20px 0; border-block: 1px solid var(--line); }
#sapper main dt { color: var(--muted); font-size: 13px; }
#sapper main dd { margin: 0 28px 0 0; font-size: 24px; font-variant-numeric: tabular-nums; }
#sapper main canvas { max-width: 100%; margin-top: 24px; }
#sapper main section > h2 { margin-top: 36px; }
#sapper > footer { width: 100%; margin: 64px 0 0; padding: 36px max(36px,calc((100% - 1008px)/2)); background: #000; color: #a3a3a8; text-align: left; opacity: 1; font-size: 13px; }
#sapper > footer p { margin: 0; }
.footer-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.footer-brand { display: inline-flex; align-items: center; text-decoration: none; }
.footer-brand img { display: block; width: 128px; height: 40px; }
.footer-support { margin-left: auto; padding: 8px 16px; background: #fff; border-radius: 999px; text-decoration: none; color: #000; font-size: 13px; font-weight: 500; white-space: nowrap; }
.footer-support:hover { text-decoration: underline; }
.footer-meta { display: block; padding-top: 20px; border-top: 1px solid #ffffff24; font-size: 12px; line-height: 1.8; margin-bottom: 12px; }
.footer-meta a { color: #fff; }
.monitoring-note { display: block; max-width: 780px; font-size: 12px; line-height: 1.8; color: #a3a3a8; text-wrap: pretty; }
@media (max-width: 760px) {
  #sapper .container { padding-inline: 24px; }
  #sapper nav .container { min-height: 76px; }
  #sapper nav .logo img { width: 104px; height: 33px; }
  #sapper nav ul a { font-size: 12px; padding: 8px 13px; }
  #sapper nav ul li:nth-child(2) { display: none; }
  #sapper main.container { padding-top: 32px; }
  #sapper main > header { min-height: 240px; margin-bottom: 28px; }
  #sapper main h1 { font-size: 56px; }
  #sapper main > header .lead { font-size: 16px; max-width: 480px; }
  #sapper main > article.up { padding: 22px; font-size: 17px; min-height: 78px; }
  #sapper main > article.up::after { display: none; }
  #sapper main .live-status { grid-template-columns: 1fr; gap: 16px; }
  #sapper > footer { margin-top: 44px; padding: 36px 24px 28px; }
}
@media (max-width: 460px) {
  #sapper main article.down-active { padding: 20px; }
  #sapper main article.down-active > .f { flex-direction: column; align-items: flex-start; gap: 14px; }
  #sapper main:has(> h2 .tag) > h2 { font-size: 28px; gap: 10px; }
  #sapper main:has(> h2 .tag) section > article { padding: 20px; }
  #sapper nav .container { gap: 12px; }
  #sapper nav .logo img { width: 100px; height: 32px; }
  #sapper nav ul { gap: 3px; }
  #sapper nav ul a { padding: 7px 11px; font-size: 11px; }
  #sapper main > header { min-height: 240px; }
  #sapper main > header::before { font-size: 12px; margin-bottom: 20px; }
  #sapper main h1 { font-size: 48px; letter-spacing: -.045em; }
  #sapper main > header .lead { font-size: 14px; }
  #sapper main > article.up { font-size: 16px; padding: 20px 16px; gap: 12px; }
  #sapper main > .f { margin-top: 32px; gap: 14px; }
  #sapper main > .f h2 { font-size: 21px; }
  #sapper main > .f > form.r label { padding: 5px 10px; }
  #sapper main .live-status article.graph { padding-inline: 22px; }
  #sapper main .live-status h4 { font-size: 15px; }
  #sapper main .live-status article.graph::before { right: 20px; }
  #sapper main .live-status .data { font-size: 30px; }
  .footer-top { gap: 16px; margin-bottom: 20px; }
  .footer-brand img { width: 112px; height: 36px; }
  .footer-support { font-size: 12px; padding: 8px 12px; }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media (max-width: 360px) {
  #sapper main .live-status article > div { font-size: 11px; letter-spacing: -.01em; white-space: nowrap; }
  #sapper main .live-status .data { font-size: 26px; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }

/* Keep timezone context close to incident dates, with room to wrap on mobile. */
#sapper .dates-timezone {
  margin: -8px 0 28px;
  color: #6b6b76;
  font-size: 12px;
  line-height: 1.6;
}
#sapper main > section dl dd { font-variant-numeric: tabular-nums; }

/* The overview shows current health; resolved history belongs to each service. */
#sapper main:has(> header) > section:has(> article.down:not(.down-active):not(.graph)) {
  display: none;
}