/* Off The Couch status page. Standalone public artifact styled with the
   platform's brand tokens (marketing site _marketing-tokens.scss and the
   console theme palette). It must never import from the console app.

   Palette:
     background #1e1e2f, cards rgba(30,30,47,0.6)
     pink #e14eca interactive, teal #2ec9b7 informational accents
     operational #00f2c3, degraded #ff8d72, outage #fd5d93, maintenance #1d8cf8 */

:root {
  --bg: #1e1e2f;
  --card: rgba(30, 30, 47, 0.6);
  --card-solid: #232338;
  --border: rgba(255, 255, 255, 0.08);
  --text: #ffffff;
  --muted: rgba(255, 255, 255, 0.8);
  --muted-2: rgba(255, 255, 255, 0.7);
  --muted-3: rgba(255, 255, 255, 0.6);
  --primary: #e14eca;
  --teal: #2ec9b7;
  --operational: #00f2c3;
  --degraded: #ff8d72;
  --outage: #fd5d93;
  --maintenance: #1d8cf8;
  --nodata: rgba(255, 255, 255, 0.12);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

.wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 16px;
}

h2 {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 12px;
  color: #ffffff;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* header */
.site-header {
  border-bottom: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.24);
}
.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 18px;
  padding-bottom: 18px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  font-size: 17px;
  color: #ffffff;
  letter-spacing: 0.2px;
}
.brand img { height: 48px; width: auto; display: block; }
.brand:hover { text-decoration: none; }
.page-title {
  color: var(--teal);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

/* sample data note */
.sample-note {
  margin: 16px 0 0;
  padding: 8px 12px;
  border: 1px dashed var(--degraded);
  border-radius: 8px;
  color: var(--degraded);
  font-size: 13px;
}

/* banner */
.banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 24px 0;
  padding: 16px 18px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--card);
  font-size: 16px;
  font-weight: 600;
}
.banner.operational { background: rgba(0, 242, 195, 0.10);  border-color: rgba(0, 242, 195, 0.4); }
.banner.degraded    { background: rgba(255, 141, 114, 0.10); border-color: rgba(255, 141, 114, 0.4); }
.banner.maintenance { background: rgba(29, 140, 248, 0.10);  border-color: rgba(29, 140, 248, 0.4); }
.banner.outage      { background: rgba(253, 93, 147, 0.10);  border-color: rgba(253, 93, 147, 0.4); }
.banner-dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--muted-3);
  flex: none;
}
.banner.operational .banner-dot { background: var(--operational); }
.banner.degraded .banner-dot    { background: var(--degraded); }
.banner.maintenance .banner-dot { background: var(--maintenance); }
.banner.outage .banner-dot      { background: var(--outage); }

/* components card */
.components-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 18px;
  margin-bottom: 28px;
}
.components-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
}
.legend { display: flex; gap: 14px; font-size: 12px; color: var(--muted-3); }
.legend-item { display: inline-flex; align-items: center; gap: 5px; }

.component {
  padding: 14px 0 10px;
  border-top: 1px solid var(--border);
}
.component:first-of-type { border-top: none; }

.component-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.component-name {
  font-weight: 600;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.component-meta {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 13px;
  color: var(--muted-2);
}
.uptime { color: var(--teal); font-weight: 600; }
.status-label { font-weight: 600; }
.status-label.operational { color: var(--operational); }
.status-label.degraded    { color: var(--degraded); }
.status-label.maintenance { color: var(--maintenance); }
.status-label.outage      { color: var(--outage); }

.dot {
  width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none;
}
.dot-operational { background: var(--operational); }
.dot-degraded    { background: var(--degraded); }
.dot-maintenance { background: var(--maintenance); }
.dot-outage      { background: var(--outage); }
.dot-nodata      { background: var(--nodata); }

/* tick strip */
.ticks {
  display: flex;
  gap: 2px;
  margin-top: 8px;
}
.tick {
  flex: 1 1 0;
  max-width: 6px;
  height: 34px;
  border-radius: 2px;
  background: var(--nodata);
  cursor: default;
}
.tick.ok      { background: var(--operational); }
.tick.partial { background: var(--degraded); }
.tick.bad     { background: var(--outage); }

.strip-caption {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--muted-3);
  margin-top: 4px;
}

/* incidents */
.incident-list { margin-bottom: 28px; }
.incident {
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--muted-3);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.incident.degraded    { border-left-color: var(--degraded); }
.incident.outage      { border-left-color: var(--outage); }
.incident.maintenance { border-left-color: var(--maintenance); }
.incident-title { font-weight: 600; color: #ffffff; margin: 0 0 2px; }
.incident-components { font-size: 12px; color: var(--muted-3); margin: 0 0 10px; }
.incident-update { margin: 8px 0 0; font-size: 14px; color: var(--muted); }
.incident-update .u-status { font-weight: 600; color: #ffffff; text-transform: capitalize; }
.incident-update .u-time { color: var(--muted-3); font-size: 12px; margin-left: 6px; }
.incident-update p { margin: 2px 0 0; }
.empty-note { color: var(--muted-3); font-size: 14px; }

/* footer */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 20px 0 32px;
  font-size: 13px;
  color: var(--muted-3);
}
.site-footer p { margin: 4px 0; }
.generated { font-size: 12px; }

/* tooltip */
.tooltip {
  position: fixed;
  z-index: 10;
  background: #ffffff;
  color: #1e1e2f;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 6px;
  pointer-events: none;
  white-space: nowrap;
}

*:focus { outline: none; }
*:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

@media (max-width: 480px) {
  .component-meta { width: 100%; justify-content: space-between; }
  .legend { display: none; }
}