/* status page */

/* ── Entrance animations ── */
@keyframes statusIn {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes barGrow {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

.status-loading { padding: 24px 0; color: var(--dim); }

.status-overall {
  padding: 14px 0; font-size: 13px; font-weight: 600;
  border-bottom: 1px dashed var(--line); margin-bottom: 4px;
  animation: statusIn 0.3s ease both;
}
.status-overall::before { content: "$ "; color: var(--accent); }
.status-overall.up   { color: var(--accent); }
.status-overall.down { color: var(--danger); }
.status-overall.warn { color: var(--warn); }
.status-overall.nodata { color: var(--dim); }

/* Column header row above monitor list */
.monitor-thead {
  display: grid;
  grid-template-columns: 180px 72px 1fr 52px;
  gap: 16px;
  padding: 8px 0 6px;
  border-bottom: 1px dashed var(--line-strong);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
  animation: statusIn 0.3s 0.05s ease both;
}

.monitor {
  display: grid;
  grid-template-columns: 180px 72px 1fr 52px;
  gap: 16px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px dashed var(--line);
  animation: statusIn 0.25s ease both;
}
.monitor:last-child { border-bottom: none; }

.monitor-name { font-weight: 500; }

.monitor-status         { font-size: 12px; white-space: nowrap; }
.monitor-status.up      { color: var(--accent); }
.monitor-status.down    { color: var(--danger); }
.monitor-status.pending { color: var(--dim); }
.monitor-status.warn    { color: var(--warn); }
.monitor-status.unknown { color: var(--dim); }

.monitor-bars {
  display: flex;
  gap: 2px;
  align-items: flex-end;
  overflow: hidden;
  min-width: 0;           /* allow grid column to constrain this flex container */
}
.monitor-bar {
  flex: 1;
  min-width: 3px;
  height: 20px;
  border-radius: 1px;
  background: var(--line-strong);
  transform-origin: bottom;
  animation: barGrow 0.4s ease both;
}
.monitor-bar.up      { background: var(--accent); opacity: 0.75; }
.monitor-bar.down    { background: var(--danger); }
.monitor-bar.warn    { background: var(--warn); opacity: 0.8; }
.monitor-bar.nodata  { background: var(--line-strong); opacity: 0.5; }

.monitor-uptime { text-align: right; font-size: 12px; color: var(--dim); white-space: nowrap; }

.incident-section { padding: 20px 0; border-top: 1px dashed var(--line); }
.incident-section-head { font-size: 11px; letter-spacing: 0.1em; color: var(--dim); margin-bottom: 12px; }
.incident-row { padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: 13px; animation: fadeInUp 0.25s ease both; }
.incident-row:last-child { border-bottom: none; }
.incident-service { font-weight: 500; }
.incident-since { font-size: 12px; margin-top: 2px; }
.incident-cause { font-size: 12px; margin-top: 2px; }

.status-error-screen { padding: 96px 0; text-align: center; }
.status-error-screen .error-heading { margin: 12px 0; }
.status-error-screen .cta-row { margin-top: 24px; }
.status-retry-btn { cursor: pointer; }
.status-footer { margin-top: 8px; padding-bottom: 48px; color: var(--dim); font-size: 12px; }
.status-footer .prompt::before { content: "$ "; color: var(--accent); opacity: 0.5; }

/* ── Mobile ── */
@media (max-width: 720px) {
  /* Row 1: name | status | uptime — Row 2: full-width bars */
  .monitor {
    grid-template-columns: 1fr auto auto;
    grid-template-rows: auto auto;
    column-gap: 8px;
    row-gap: 5px;
  }
  .monitor-name   { grid-area: 1 / 1; }
  .monitor-status { grid-area: 1 / 2; font-size: 11px; white-space: nowrap; }
  .monitor-bars   {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    height: 10px;
    gap: 1px;
    align-items: stretch;
    overflow: hidden;
  }
  .monitor-bar {
    height: 10px;
    width: auto;
    flex: 1;
    min-width: 2px;
    border-radius: 1px;
  }
  .monitor-uptime { grid-area: 1 / 3; font-size: 11px; white-space: nowrap; text-align: right; }

  /* Match header columns to monitor columns */
  .monitor-thead  { grid-template-columns: 1fr auto auto; }
  .monitor-thead .mth-bars { display: none; }
}