/*
 * Sesign status page stylesheet. Served from 'self' as /assets/page.<sha256-8>.css (immutable).
 * Every colour is a custom property defined in the two :root blocks below (light, then dark);
 * status/test/render/contrast.test.js computes the WCAG ratio of each pair that is drawn together.
 * Fonts are self-hosted (no external origin). Sizes in rem.
 */

/* DM Sans (variable 400 to 700), body text */
@font-face {
  font-family: 'DM Sans';
  src: url('/assets/fonts/DMSans-Regular-Ext.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  src: url('/assets/fonts/DMSans-Regular.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Cabinet Grotesk Bold, titles */
@font-face {
  font-family: 'Cabinet Grotesk';
  src: url('/assets/fonts/CabinetGrotesk-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

/* Geist Mono, times and uptime figures */
@font-face {
  font-family: 'Geist Mono';
  src: url('/assets/fonts/GeistMono-Regular-Ext.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('/assets/fonts/GeistMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Colour tokens, light scheme (Sesign palette: primary #0D9488, slate #1E293B, cloud #F8FAFC) */
:root {
  color-scheme: light dark;
  --bg: #F8FAFC;
  --surface: #FFFFFF;
  --border: #E2E8F0;
  --text: #1E293B;
  --muted: #475569;
  --link: #0F766E;
  --focus: #0F766E;
  --chip-bg: #F1F5F9;
  --chip-text: #334155;
  --on-banner: #FFFFFF;

  --ok-text: #0F766E;
  --ok-bg: #CCFBF1;
  --ok-cell: #0D9488;
  --ok-banner: #0F766E;

  --warn-text: #92400E;
  --warn-bg: #FEF3C7;
  --warn-cell: #B45309;
  --warn-pattern: #FEF3C7;
  --warn-banner: #B45309;

  --down-text: #BE123C;
  --down-bg: #FFE4E6;
  --down-cell: #E11D48;
  --down-pattern: #FFE4E6;
  --down-banner: #BE123C;

  --maint-text: #1D4ED8;
  --maint-bg: #DBEAFE;
  --maint-cell: #2563EB;
  --maint-pattern: #DBEAFE;
  --maint-banner: #1D4ED8;

  --none-text: #475569;
  --none-bg: #E2E8F0;
  --none-cell: #64748B;
  --none-banner: #475569;
}

/* Colour tokens, dark scheme (same contrast targets) */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0F172A;
    --surface: #1E293B;
    --border: #334155;
    --text: #F1F5F9;
    --muted: #94A3B8;
    --link: #5EEAD4;
    --focus: #5EEAD4;
    --chip-bg: #334155;
    --chip-text: #E2E8F0;
    --on-banner: #FFFFFF;

    --ok-text: #5EEAD4;
    --ok-bg: #134E4A;
    --ok-cell: #14B8A6;
    --ok-banner: #0F766E;

    --warn-text: #FCD34D;
    --warn-bg: #451A03;
    --warn-cell: #F59E0B;
    --warn-pattern: #451A03;
    --warn-banner: #B45309;

    --down-text: #FDA4AF;
    --down-bg: #4C0519;
    --down-cell: #F43F5E;
    --down-pattern: #4C0519;
    --down-banner: #BE123C;

    --maint-text: #93C5FD;
    --maint-bg: #172554;
    --maint-cell: #60A5FA;
    --maint-pattern: #172554;
    --maint-banner: #1D4ED8;

    --none-text: #CBD5E1;
    --none-bg: #334155;
    --none-cell: #94A3B8;
    --none-banner: #475569;
  }
}

/* Base */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  /* Reflow (WCAG 1.4.10): a long unbroken token in owner text wraps instead of overflowing. */
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}
a {
  color: var(--link);
  text-underline-offset: 0.15em;
}
a:hover {
  text-decoration-thickness: 0.125rem;
}
:focus-visible {
  outline: 0.1875rem solid var(--focus);
  outline-offset: 0.125rem;
  border-radius: 0.25rem;
}
h1,
h2 {
  font-family: 'Cabinet Grotesk', 'DM Sans', system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
}
h1 {
  font-size: 1.75rem;
  margin: 1.25rem 0 1rem;
}
h2 {
  font-size: 1.375rem;
  margin: 2.5rem 0 1rem;
}
h3,
h4 {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  margin: 0;
}
/* Geist Mono for figures only (uptime percentages); French dates and times stay in DM Sans */
.num {
  font-family: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.9em;
}
/* Flex children may shrink below their content width, so long tokens wrap (WCAG 1.4.10). */
.top__inner > *,
.checked > *,
.card__head > *,
.component__head > *,
.component__state > *,
.affects > *,
.chips > *,
.update__meta > *,
.legend > * {
  min-width: 0;
}
.wrap {
  max-width: 55rem;
  margin: 0 auto;
  padding: 0 1rem;
}
.muted {
  color: var(--muted);
}
.url {
  overflow-wrap: anywhere;
  word-break: break-all;
}
.icon {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
}

/* Header */
.top {
  padding-top: 1.25rem;
}
.top__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
}
.top__logo {
  display: block;
  width: auto;
  height: 2rem;
}
.top__link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 1.125rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-weight: 600;
  text-decoration: none;
}

/* Overall state banner */
.banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-radius: 0.75rem;
  color: var(--on-banner);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.35;
}
.banner[hidden] {
  display: none;
}
.banner p {
  margin: 0;
}
.banner .icon {
  width: 1.75rem;
  height: 1.75rem;
}
.banner--operational {
  background: var(--ok-banner);
}
.banner--degraded {
  background: var(--warn-banner);
}
.banner--down {
  background: var(--down-banner);
}
.banner--maintenance {
  background: var(--maint-banner);
}
.banner--unknown {
  background: var(--none-banner);
}
.checked {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 1rem;
  margin: 0.5rem 0 0;
  color: var(--muted);
  font-size: 0.875rem;
}
.checked a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-weight: 600;
}

/* State badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
}
.badge .icon {
  width: 1rem;
  height: 1rem;
}
.badge--operational {
  color: var(--ok-text);
  background: var(--ok-bg);
}
.badge--degraded {
  color: var(--warn-text);
  background: var(--warn-bg);
}
.badge--down {
  color: var(--down-text);
  background: var(--down-bg);
}
.badge--maintenance {
  color: var(--maint-text);
  background: var(--maint-bg);
}
.badge--unknown,
.badge--nodata {
  color: var(--none-text);
  background: var(--none-bg);
}
.badge--info {
  color: var(--chip-text);
  background: var(--chip-bg);
}

/* Cards (incidents, maintenances, subscribe) */
.card {
  margin: 0 0 1rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--surface);
}
.card p {
  margin: 0.5rem 0 0;
}
.card p:first-child {
  margin-top: 0;
}
.card--down {
  border-left: 0.375rem solid var(--down-cell);
}
.card--degraded {
  border-left: 0.375rem solid var(--warn-cell);
}
.card--info {
  border-left: 0.375rem solid var(--none-cell);
}
.card--maintenance {
  border-left: 0.375rem solid var(--maint-cell);
}
.card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}
.card__title {
  font-size: 1.0625rem;
}
.affects {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  margin: 0.625rem 0 0;
  font-size: 0.8125rem;
  color: var(--muted);
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.chip {
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  background: var(--chip-bg);
  color: var(--chip-text);
  font-size: 0.8125rem;
}
.updates {
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}
.update {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}
.update__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.75rem;
  margin: 0;
  font-size: 0.875rem;
}
.update__meta time {
  color: var(--muted);
}
.update__body {
  margin: 0.25rem 0 0;
  white-space: pre-line;
}
.period {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
}

/* Components and 90-day bars */
.components {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--surface);
}
.component {
  padding: 1.25rem 1.25rem 0.5rem;
}
.component + .component {
  border-top: 1px solid var(--border);
}
.component__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}
.component__name {
  font-size: 1.0625rem;
}
.component__state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
}
.component__reason {
  color: var(--muted);
  font-size: 0.875rem;
}
.component__desc {
  margin: 0.25rem 0 0.875rem;
  color: var(--muted);
  font-size: 0.875rem;
}
.bar {
  display: flex;
  gap: 2px;
  height: 2.25rem;
}
.component__head + .bar {
  margin-top: 0.875rem;
}
.cell {
  flex: 1 1 0;
  min-width: 0;
  border: 1px solid var(--ok-cell);
  border-radius: 2px;
  background-color: var(--ok-cell);
}
.cell--degraded {
  border-color: var(--warn-cell);
  background-color: var(--warn-cell);
  background-image: radial-gradient(circle, var(--warn-pattern) 1px, transparent 1.3px);
  background-size: 4px 4px;
  background-position: center;
}
.cell--down {
  border-color: var(--down-cell);
  background-color: var(--down-cell);
  background-image: repeating-linear-gradient(135deg, transparent 0 2px, var(--down-pattern) 2px 3.5px);
}
.cell--maintenance {
  border-color: var(--maint-cell);
  background-color: var(--maint-cell);
  background-image: repeating-linear-gradient(0deg, transparent 0 3px, var(--maint-pattern) 3px 4.5px);
}
.cell--nodata {
  border-color: var(--none-cell);
  background: transparent;
}
.legend {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  margin-top: 0.5rem;
  color: var(--muted);
  font-size: 0.8125rem;
}
.legend-30[hidden] {
  display: none;
}
.legend__uptime {
  color: var(--text);
}
.days > summary,
.more > summary {
  display: list-item;
  min-height: 2.75rem;
  padding: 0.625rem 0;
  color: var(--link);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}
.days__list {
  margin: 0 0 0.75rem;
  padding-left: 1.25rem;
  font-size: 0.875rem;
}
.days__list li + li {
  margin-top: 0.25rem;
}
.days__titles {
  display: block;
  color: var(--muted);
}
.days__empty {
  margin: 0 0 0.75rem;
  color: var(--muted);
  font-size: 0.875rem;
}

/* Incident history */
.history {
  margin: 0;
  padding: 0;
  list-style: none;
}
.day {
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--border);
}
.day__date {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}
.day__empty {
  margin: 0.125rem 0 0;
  color: var(--muted);
  font-size: 0.875rem;
}
.hist {
  margin-top: 0.75rem;
}
.hist__meta {
  margin: 0.125rem 0 0;
  color: var(--muted);
  font-size: 0.875rem;
}
.more {
  margin-top: 0.5rem;
}
.more__note {
  color: var(--muted);
  font-weight: 400;
}

/* Not found page */
.notfound p {
  margin: 0 0 1rem;
}
.notfound a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-weight: 600;
}

/* Footer */
.foot {
  margin-top: 3rem;
  padding: 1.5rem 0 2.5rem;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.875rem;
}
.foot p {
  margin: 0 0 0.25rem;
}
.foot a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}
.foot__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.25rem;
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}

/* Phone width: only the last 30 days of each bar, the uptime figure on its own line */
@media (max-width: 599.98px) {
  h1 {
    font-size: 1.5rem;
  }
  .banner {
    padding: 0.875rem 1rem;
    font-size: 1.0625rem;
  }
  .component {
    padding: 1rem 0.875rem 0.375rem;
  }
  .card {
    padding: 0.875rem 1rem;
  }
  .cell:nth-child(-n + 60) {
    display: none;
  }
  .legend-90 {
    display: none;
  }
  .legend-30[hidden] {
    display: inline;
  }
  .legend__uptime {
    order: 3;
    flex-basis: 100%;
  }
}

/* Keep the bar colours and patterns in Windows high contrast mode (badges and banners follow the
   system colours; their state is in the text) */
@media (forced-colors: active) {
  .cell {
    forced-color-adjust: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto;
  }
}