/*
 * status.koraxlabs.io — the page's own layout, on top of the Night Watch kit (kit/night-watch.css).
 * Only tokens from the kit: no colour is defined here. A state is never colour alone: every pill
 * and banner carries its word, and every bar has a text summary.
 */

.status { position: relative; z-index: 1; max-width: 860px; margin: 0 auto; padding: 36px 20px 64px; }
.status__head { margin-bottom: 26px; }
.status__brand { display: inline-flex; padding: 0; margin: 0; color: inherit; text-decoration: none; }
.status__brand .brand__name, .status__brand .brand__eyebrow { display: block; }
.status__stale { margin: 0 0 22px; align-items: flex-start; }
.status__foot { margin-top: 34px; color: var(--text-3); font-size: 12.5px; max-width: 70ch; }
.status__foot p { margin: 0 0 8px; }
.status__foot a { color: var(--text-2); }
.status__foot a:hover { color: var(--signal); }
.status__noscript { max-width: 860px; margin: 0 auto; padding: 0 20px 40px; color: var(--text-2); }

/* The overall verdict */
.banner { --tone: var(--text-3); display: flex; align-items: center; gap: 16px; padding: 20px 22px; margin: 0 0 22px;
  border-radius: var(--radius); border: 1px solid color-mix(in oklab, var(--tone) 34%, transparent);
  background: color-mix(in oklab, var(--tone) 9%, transparent); }
.banner.is-up { --tone: var(--allow); }
.banner.is-degraded { --tone: var(--flag); }
.banner.is-down { --tone: var(--block); }
.banner.is-maintenance { --tone: var(--signal); }
.banner__dot { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--tone);
  box-shadow: 0 0 0 5px color-mix(in oklab, var(--tone) 18%, transparent); }
.banner__title { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; text-wrap: balance; }
.banner__sub { margin: 4px 0 0; color: var(--text-2); font-size: 13px; }

/* One service */
.comp { padding: 18px 20px 16px; border-top: 1px solid var(--line); }
.comp:first-child { border-top: 0; }
.comp__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.comp__title { margin: 0; font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; min-width: 0; }
.comp .pill { flex: none; }
.comp__foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; font-size: 12px; color: var(--text-3); }
.comp__uptime { color: var(--text-2); text-align: center; }

/* 90 days, one segment a day, oldest on the left */
.bar { display: flex; gap: 2px; height: 30px; margin-top: 13px; }
.bar__day { flex: 1 1 0; min-width: 0; border-radius: 2px; background: var(--ink-700); }
.bar__day.is-up { background: var(--allow); }
.bar__day.is-degraded { background: var(--flag); }
.bar__day.is-down { background: var(--block); }
.bar__day.is-maintenance { background: var(--signal); }
.bar__day:hover { filter: brightness(1.25); }

.daylegend { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; padding: 0; margin: 12px 2px 0; font-size: 12px; color: var(--text-3); }
.daylegend li { display: inline-flex; align-items: center; gap: 7px; }
.daylegend__swatch { width: 9px; height: 9px; border-radius: 3px; background: var(--ink-700); }
.daylegend__swatch.is-up { background: var(--allow); }
.daylegend__swatch.is-degraded { background: var(--flag); }
.daylegend__swatch.is-down { background: var(--block); }
.daylegend__swatch.is-maintenance { background: var(--signal); }

/* Incident and maintenance notes */
.status__past { margin-top: 34px; }
.status__none { margin: 0; color: var(--text-3); font-size: 13.5px; }
.note { --tone: var(--flag); padding: 18px 20px; margin: 0 0 14px; border-radius: var(--radius);
  border: 1px solid var(--line); border-left: 3px solid var(--tone); background: var(--ink-850); }
.note.is-maintenance { --tone: var(--signal); }
.note.is-closed { --tone: var(--line-2); }
.note__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.note__title { margin: 0; font-size: 15.5px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; text-wrap: balance; }
.note__meta { margin: 6px 0 0; font-size: 12.5px; color: var(--text-3); }
.note__updates { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 14px; }
.note__update { padding-left: 14px; border-left: 1px solid var(--line-2); }
.note__when { margin: 0; font-size: 12px; color: var(--text-3); }
.note__state { font-weight: 600; color: var(--text-2); }
.note__text { margin: 4px 0 0; font-size: 14px; color: var(--text); white-space: pre-line; overflow-wrap: anywhere; }

/* Subscribe by e-mail, and the two pages a mail link opens */
.subscribe { margin-top: 34px; }
.subscribe__lead { margin: 0 0 14px; color: var(--text-2); font-size: 13.5px; }
.subscribe__form { display: flex; gap: 10px; flex-wrap: wrap; }
.subscribe__form .input { flex: 1 1 240px; min-width: 0; min-height: 44px; }
.subscribe__form .btn { min-height: 44px; }
.subscribe__hp { display: none; }
.subscribe__msg { margin: 12px 0 0; font-size: 13.5px; color: var(--text); }
.subscribe__msg.is-bad { color: var(--block); }
.subscribe__privacy { margin: 14px 0 0; font-size: 12px; color: var(--text-3); max-width: 75ch; }
.status--narrow { max-width: 560px; }
.tokenpage__title { margin: 0; font-size: 21px; font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; }
.tokenpage__lead { margin: 8px 0 18px; color: var(--text-2); font-size: 14px; }
.tokenpage__back { margin: 18px 0 0; font-size: 13px; }
.tokenpage__back a { color: var(--text-2); }
#token-form .btn { min-height: 44px; }

@media (max-width: 520px) {
  .status { padding: 24px 16px 48px; }
  .banner { padding: 16px; gap: 13px; }
  .banner__title { font-size: 17px; }
  .comp { padding: 16px 14px 14px; }
  .note { padding: 16px 14px; }
  .note__head { flex-direction: column; gap: 8px; }
  .comp__head { align-items: flex-start; }
  .bar { gap: 1px; height: 26px; }
  .bar__day { border-radius: 1px; }
}