/* A separate, flow-positioned attachment; the existing header keeps its height. */
.server-lifecycle {
  box-sizing: border-box;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-self: center;
  width: min(38rem, calc(100% - 1.5rem));
  margin: 0 auto;
  padding: .55rem .9rem .6rem;
  gap: .45rem;
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 .35rem .35rem;
  background: rgba(22, 22, 22, .94);
  color: var(--muted);
  text-decoration: none;
  text-align: center;
  font: 500 .7rem/1.35 system-ui, sans-serif;
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.server-lifecycle:hover, .server-lifecycle:focus-visible {
  background: #302a1d;
  border-color: var(--gold);
  box-shadow: 0 3px 18px rgba(201, 162, 75, .22);
}
.server-lifecycle:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.server-lifecycle-live { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .25rem .8rem; color: var(--ivory); }
#server-lifecycle-uptime { font-variant-numeric: tabular-nums; }
.server-lifecycle-timeline { display: grid; grid-template-columns: 1.2fr 1fr .9fr; gap: .5rem; }
.server-lifecycle-timeline > span { display: flex; flex-direction: column; gap: .08rem; min-width: 0; }
.server-lifecycle-timeline > span + span { border-left: 1px solid var(--line); padding-left: .5rem; }
.server-lifecycle-timeline b { font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ivory); }
.server-lifecycle-timeline .is-current b { color: var(--gold); }
@media (max-width: 440px) {
  .server-lifecycle { padding-inline: .5rem; font-size: .64rem; }
  .server-lifecycle-timeline { gap: .3rem; }
  .server-lifecycle-timeline > span + span { padding-left: .3rem; }
}
@media (prefers-reduced-motion: reduce) { .server-lifecycle { transition: none; } }

/* Separate snug uptime tab centered beneath the beta timeline. */
.server-uptime-box {
  width: max-content;
  max-width: calc(100% - 1.5rem);
  padding: .3rem .8rem;
  gap: 0;
  color: var(--ivory);
  white-space: nowrap;
}
