/* The status page's one stylesheet. The values are Gooma's design tokens (the same names and
   values as the design system's tokens.css) and the page follows the Claude Design canvas
   "Status da Gooma" (boards Main, 1440, and Celular, 390). Light only, as the canvas: the dark
   blocks are the design. No colour outside :root. */

@font-face {
  font-family: 'Open Sans';
  src: url('/assets/fonts/open-sans-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('/assets/fonts/open-sans-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('/assets/fonts/open-sans-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --canvas: #e3e3e3;
  --surface: #ffffff;
  --surface-muted: #f1f1f1;
  --surface-ink: #1f1f1f;
  --orb-ground: #050505;
  --fg-1: #000000;
  --fg-2: #666666;
  --fg-2-on-canvas: #5e5e5e;
  --fg-on-dark: #ffffff;
  --fg-on-media-muted: #d9d9d9;
  --line: #d4d4d4;
  --line-soft: #eaeaea;
  --line-strong: #aaaaaa;
  --line-on-media: rgba(255, 255, 255, 0.18);
  --accent: #b8f1fe;
  --accent-ink: #005467;
  --accent-ink-hover: #003845;
  --focus: var(--accent-ink);
  --status-ok-fill: #b6d79e;
  --status-ok-ink: #2f5d14;
  --status-warn-fill: #f2de9a;
  --status-warn-ink: #6b5200;
  --warn-soft: #fff5d6;
  --warn-strong: #e0b417;
  --status-danger-fill: #feaeae;
  --status-danger-ink: #9a0b0b;
  --danger-strong: #b83232;
  --status-off-fill: #dcdcdc;
  --status-off-ink: #4a4a4a;
  --scrim-side: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.6) 0%,
    rgba(0, 0, 0, 0.5) 40%,
    rgba(0, 0, 0, 0) 72%
  );
  --scrim-down: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.55) 34%,
    rgba(0, 0, 0, 0.72) 100%
  );
  --mesh-aurora-0: #07030e;
  --mesh-aurora-1: #3a22ff;
  --mesh-aurora-2: #ff4a2e;
  --mesh-aurora-3: #e03cff;
  --orb-aurora-0: #e07a8a;
  --orb-aurora-1: #f6d3be;
  --orb-aurora-2: #c98fa0;
  --mesh-mata-0: #010805;
  --mesh-mata-1: #5cff1c;
  --mesh-mata-2: #0f8a6a;
  --mesh-mata-3: #18dc78;
  --orb-mata-0: #7fc8b8;
  --orb-mata-1: #ddf3ec;
  --orb-mata-2: #4e9c8c;
  --mesh-ambar-0: #080500;
  --mesh-ambar-1: #ffd21a;
  --mesh-ambar-2: #ff6a00;
  --mesh-ambar-3: #a88410;
  --orb-ambar-0: #d8ab61;
  --orb-ambar-1: #f6e6c0;
  --orb-ambar-2: #c28186;
  --mesh-maresia-0: #000610;
  --mesh-maresia-1: #1f6dff;
  --mesh-maresia-2: #22d8c8;
  --mesh-maresia-3: #1fd67a;
  --orb-maresia-0: #8fd3c4;
  --orb-maresia-1: #e4f5f0;
  --orb-maresia-2: #5b6e4d;
  --radius-tile-xs: 10px;
  --radius-panel: 16px;
  --radius-tile: 18px;
  --radius-banner: 24px;
  --radius-media: 34px;
  --radius-pill: 999px;
  --duration-fast: 150ms;
  --duration-pulse: 1600ms;
  --ease-press: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-breath: cubic-bezier(0.45, 0, 0.55, 1);
  --font-sans: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-label: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* The sphere's place in the hero: right of the text on a wide screen (board Main). */
  --orb-x: 0.8;
  --orb-y: 0.46;
  --orb-size: 0.36;
}

/* The palette of the hero follows the state: mata (operando), ambar (instável), aurora (fora do ar), maresia (sem leitura). */
:root[data-palette='mata'] {
  --orb-b0: var(--mesh-mata-0);
  --orb-b1: var(--mesh-mata-1);
  --orb-b2: var(--mesh-mata-2);
  --orb-b3: var(--mesh-mata-3);
  --orb-o0: var(--orb-mata-0);
  --orb-o1: var(--orb-mata-1);
  --orb-o2: var(--orb-mata-2);
}
:root[data-palette='ambar'] {
  --orb-b0: var(--mesh-ambar-0);
  --orb-b1: var(--mesh-ambar-1);
  --orb-b2: var(--mesh-ambar-2);
  --orb-b3: var(--mesh-ambar-3);
  --orb-o0: var(--orb-ambar-0);
  --orb-o1: var(--orb-ambar-1);
  --orb-o2: var(--orb-ambar-2);
}
:root[data-palette='aurora'] {
  --orb-b0: var(--mesh-aurora-0);
  --orb-b1: var(--mesh-aurora-1);
  --orb-b2: var(--mesh-aurora-2);
  --orb-b3: var(--mesh-aurora-3);
  --orb-o0: var(--orb-aurora-0);
  --orb-o1: var(--orb-aurora-1);
  --orb-o2: var(--orb-aurora-2);
}
:root[data-palette='maresia'] {
  --orb-b0: var(--mesh-maresia-0);
  --orb-b1: var(--mesh-maresia-1);
  --orb-b2: var(--mesh-maresia-2);
  --orb-b3: var(--mesh-maresia-3);
  --orb-o0: var(--orb-maresia-0);
  --orb-o1: var(--orb-maresia-1);
  --orb-o2: var(--orb-maresia-2);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--canvas);
  color: var(--fg-1);
  font: 400 14px/1.5 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
}
h1,
h2,
h3,
p,
ol,
dl,
dd {
  margin: 0;
}
ol {
  padding: 0;
  list-style: none;
}
a {
  color: var(--accent-ink);
}
a:hover {
  color: var(--accent-ink-hover);
}
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---- Design system pieces (the panel's ui-* recipes) --------------------------------------- */
/* Written again here, by hand, from the panel's stylesheet (apps/web): the page has no bundler
   and loads nothing but this file, and the panel's recipes come with its whole token set. No test
   keeps the two in step; a change of ui-badge or ui-orb-media in the panel is copied here. */
.ui-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--radius-pill);
  padding: 4px 9px;
  font: 400 12px/1.5 var(--font-sans);
  white-space: nowrap;
  background: var(--surface-muted);
  color: var(--fg-2);
}
.ui-badge-dot {
  display: inline-block;
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}
.ui-badge[data-tone='ok'] {
  background: var(--status-ok-fill);
  color: var(--status-ok-ink);
}
.ui-badge[data-tone='warn'] {
  background: var(--status-warn-fill);
  color: var(--status-warn-ink);
}
.ui-badge[data-tone='danger'] {
  background: var(--status-danger-fill);
  color: var(--status-danger-ink);
}
.ui-badge[data-tone='off'] {
  background: var(--status-off-fill);
  color: var(--status-off-ink);
}
.ui-badge[data-pulse] .ui-badge-dot {
  animation: ui-badge-pulse var(--duration-pulse) var(--ease-breath) infinite;
}
@keyframes ui-badge-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.6);
    opacity: 0.45;
  }
}

.ui-icon-tile {
  display: inline-grid;
  flex: none;
  place-items: center;
  background: var(--accent);
  color: var(--accent-ink);
}
.ui-icon-tile .material-icon {
  display: block;
  fill: currentColor;
}
.ui-icon-tile[data-size='md'] {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-tile-xs);
}
.ui-icon-tile[data-size='md'] .material-icon {
  width: 20px;
  height: 20px;
}
.ui-icon-tile[data-size='lg'] {
  width: 54px;
  height: 54px;
  border-radius: var(--radius-tile);
}
.ui-icon-tile[data-size='lg'] .material-icon {
  width: 38px;
  height: 38px;
}

/* The orb's container: a static composition of the palette that shows until the live element draws,
   and instead of it without WebGL (apps/web/src/shared/ui/orb-media.css). */
.ui-orb-media {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
  border-radius: inherit;
  background: var(--orb-b0, var(--orb-ground));
  container-type: size;
}
.ui-orb-media-fallback {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      55% 75% at 18% 82%,
      color-mix(in srgb, var(--orb-b1) 38%, transparent),
      transparent 70%
    ),
    radial-gradient(
      45% 70% at 52% 12%,
      color-mix(in srgb, var(--orb-b2) 34%, transparent),
      transparent 70%
    ),
    radial-gradient(
      40% 65% at 96% 92%,
      color-mix(in srgb, var(--orb-b3) 32%, transparent),
      transparent 70%
    ),
    var(--orb-b0);
}
.ui-orb-media-fallback::after {
  content: '';
  position: absolute;
  left: calc(var(--orb-x) * 100% - var(--orb-size) * 100cqmin);
  top: calc(var(--orb-y) * 100% - var(--orb-size) * 100cqmin);
  width: calc(var(--orb-size) * 200cqmin);
  height: calc(var(--orb-size) * 200cqmin);
  border-radius: 50%;
  background: radial-gradient(
    circle at 34% 28%,
    var(--orb-o1),
    var(--orb-o0) 45%,
    var(--orb-o2) 100%
  );
  box-shadow: 0 0 calc(var(--orb-size) * 70cqmin) color-mix(in srgb, var(--orb-o0) 32%, transparent);
}
.ui-orb-media > .ui-orb-media-live {
  opacity: 0;
  transition: opacity 240ms ease-out;
}
.ui-orb-media[data-state='live'] > .ui-orb-media-live {
  opacity: 1;
}

/* ---- Page ------------------------------------------------------------------------------------ */
.sp-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 32px 24px 72px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
main,
.sp-live {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.sp-eyebrow {
  font: 700 11px/1.4 var(--font-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.sp-card {
  background: var(--surface);
  border-radius: var(--radius-panel);
}

.sp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.sp-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--fg-1);
}
.sp-brand img {
  display: block;
  height: 36px;
  width: auto;
}
.sp-brand .sp-eyebrow {
  color: var(--fg-2-on-canvas);
  padding-left: 14px;
  border-left: 1px solid var(--line-strong);
}
.sp-nav {
  display: flex;
  gap: 24px;
  align-items: center;
}
.sp-link {
  color: var(--fg-1);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.sp-link:hover {
  color: var(--fg-1);
  text-decoration: underline;
}
.sp-notice {
  padding: 10px 16px;
  border-radius: var(--radius-tile-xs);
  background: var(--warn-soft);
  color: var(--status-warn-ink);
  font-size: 13px;
}

.sp-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-media);
  background: var(--orb-ground);
  min-height: 440px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.sp-hero-media,
.sp-scrim {
  position: absolute;
  inset: 0;
}
.sp-hero-media {
  border-radius: inherit;
}
.sp-scrim {
  pointer-events: none;
  background: var(--scrim-side);
}
.sp-hero-copy {
  position: relative;
  padding: 48px 52px 24px;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.sp-hero-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.sp-checked {
  font-size: 13px;
  color: var(--fg-on-media-muted);
  font-variant-numeric: tabular-nums;
}
.sp-h1 {
  font-size: 46px;
  line-height: 1.06;
  font-weight: 600;
  letter-spacing: -0.035em;
  color: var(--fg-on-dark);
  text-wrap: balance;
}
.sp-hero-text {
  font-size: 16px;
  line-height: 1.6;
  color: var(--fg-on-media-muted);
  max-width: 520px;
}
.sp-stats-wrap {
  position: relative;
  padding: 0 52px 40px;
}
.sp-stats {
  max-width: 620px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.sp-stat {
  display: flex;
  flex-direction: column-reverse;
  gap: 6px;
  padding-top: 16px;
  border-top: 1px solid var(--line-on-media);
}
.sp-stat dt {
  font-size: 13px;
  color: var(--fg-on-media-muted);
}
.sp-stat dd {
  font-size: 30px;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fg-on-dark);
  font-variant-numeric: tabular-nums;
}

.sp-active {
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.sp-active-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sp-active h2 {
  font-size: 22px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.025em;
}
.sp-updates {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.sp-update {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 16px;
}
.sp-update time {
  font-size: 14px;
  font-weight: 600;
  color: var(--fg-2);
  font-variant-numeric: tabular-nums;
}
.sp-update div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sp-update-label {
  font-size: 14px;
  font-weight: 600;
}
.sp-update-text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-2);
}

.sp-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sp-section h2 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.025em;
}
.sp-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.sp-section-head span {
  font-size: 13px;
  color: var(--fg-2-on-canvas);
}

.sp-components {
  overflow: hidden;
}
.sp-component {
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.sp-component + .sp-component {
  border-top: 1px solid var(--line-soft);
}
.sp-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.sp-row-name {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.sp-name {
  font-size: 15px;
  font-weight: 600;
}
.sp-desc {
  font-size: 13px;
  color: var(--fg-2);
}
.sp-row-state {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

/* The browser could not refresh for 5 minutes (client/main.ts): no component claims a state either. */
:root[data-outdated='true'] .sp-row-state .ui-badge {
  visibility: hidden;
}
.sp-uptime {
  font-size: 13px;
  color: var(--fg-2);
  font-variant-numeric: tabular-nums;
}
.sp-bars {
  display: flex;
  gap: 2px;
  align-items: flex-end;
}
.sp-bar {
  flex: 1 1 0;
  min-width: 0;
  height: 34px;
  border-radius: 3px;
  transition: transform var(--duration-fast) var(--ease-press);
}
.sp-bar:hover {
  transform: scaleY(1.18);
}
.sp-bar[data-level='ok'],
.sp-swatch[data-level='ok'] {
  background: var(--status-ok-fill);
}
.sp-bar[data-level='short'],
.sp-swatch[data-level='short'] {
  background: var(--warn-strong);
}
.sp-bar[data-level='long'],
.sp-swatch[data-level='long'] {
  background: var(--danger-strong);
}
.sp-bar[data-level='none'],
.sp-swatch[data-level='none'] {
  background: var(--status-off-fill);
}
.sp-axis {
  padding: 0 28px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sp-axis-ticks {
  display: flex;
  justify-content: space-between;
  height: 5px;
  border-top: 1px solid var(--line-strong);
}
.sp-axis-ticks span {
  width: 1px;
  background: var(--line-strong);
}
.sp-axis-labels {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--fg-2);
  font-variant-numeric: tabular-nums;
}
.sp-legend {
  display: flex;
  gap: 8px 16px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--fg-2-on-canvas);
}
.sp-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.sp-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

.sp-offline {
  background: var(--surface-ink);
  color: var(--fg-on-dark);
  border-radius: var(--radius-banner);
  padding: 32px;
  display: flex;
  gap: 24px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.sp-offline-copy {
  flex: 1 1 320px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sp-offline h2 {
  font-size: 20px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.sp-offline p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--fg-on-media-muted);
  max-width: 640px;
}

.sp-trust {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.sp-trust-card {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}
.sp-trust-card h3 {
  font-size: 15px;
  font-weight: 600;
}
.sp-trust-card p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-2);
}

.sp-history {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sp-inc {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 24px;
}
.sp-inc-date {
  padding-top: 22px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-2-on-canvas);
  font-variant-numeric: tabular-nums;
}
.sp-inc-card {
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sp-inc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.sp-inc-card h3 {
  font-size: 15px;
  font-weight: 600;
}
.sp-inc-when {
  font-size: 13px;
  color: var(--fg-2);
  font-variant-numeric: tabular-nums;
}
.sp-inc-card p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-1);
}
.sp-empty {
  padding: 22px 24px;
  font-size: 14px;
  color: var(--fg-2);
}

.sp-footer {
  border-top: 1px solid var(--line);
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--fg-2-on-canvas);
}

/* ---- Phone (board Celular, 390): the sphere above the text, everything in one column -------- */
@media (max-width: 620px) {
  :root {
    --orb-x: 0.62;
    --orb-y: 0.2;
    --orb-size: 0.3;
  }
  .sp-wrap {
    padding: 20px 16px 48px;
    gap: 20px;
  }
  main,
  .sp-live {
    gap: 20px;
  }
  .sp-nav {
    gap: 16px;
  }
  .sp-hero-copy {
    padding: 208px 24px 24px;
    max-width: none;
  }
  .sp-scrim {
    background: var(--scrim-down);
  }
  .sp-stats-wrap {
    padding: 0 24px 28px;
  }
  .sp-stats {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .sp-h1 {
    font-size: 32px;
  }
  .sp-active {
    padding: 24px 20px;
  }
  .sp-component {
    padding: 20px;
  }
  .sp-axis {
    padding: 0 20px 20px;
  }
  .sp-trust {
    grid-template-columns: 1fr;
  }
  .sp-inc {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .sp-inc-date {
    padding-top: 0;
  }
  .sp-bars {
    gap: 1px;
  }
  .sp-bar {
    height: 30px;
    border-radius: 2px;
  }
  .sp-row-head {
    flex-direction: column;
    align-items: flex-start;
  }
  .sp-offline {
    padding: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ui-badge[data-pulse] .ui-badge-dot {
    animation: none;
  }
  .ui-orb-media > .ui-orb-media-live,
  .sp-bar {
    transition: none;
  }
  .sp-bar:hover {
    transform: none;
  }
}