/* happnet — tailnet status dashboard
   Catppuccin Mocha · Shantell Sans + Fira Code */

@import url('https://fonts.googleapis.com/css2?family=Shantell+Sans:wght@400;500;600;700&family=Fira+Code:wght@400;500;600;700&display=swap');

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
::selection { background: #f5c2e7; color: #11111b; }

/* ---- palette --------------------------------------------------------- */
:root {
  --base:    #1e1e2e;
  --mantle:  #181825;
  --text:    #cdd6f4;
  --subtext: #bac2de;
  --overlay-1: #6c7086;
  --overlay-0: #585b70;
  --surface-2: #585b70;
  --surface-1: #45475a;
  --muted:   #9399b2;
  --green:   #a6e3a1;
  --red:     #f38ba8;
  --mauve:   #cba6f7;
}

/* ---- page ------------------------------------------------------------ */
.page {
  min-height: 100dvh;
  width: 100%;
  background: var(--base);
  color: var(--text);
  font-family: 'Shantell Sans', system-ui, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 24px 40px;
}

.wrap {
  max-width: 580px;
  width: 100%;
}

/* ---- header ---------------------------------------------------------- */
.header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 4px;
}

.pfp {
  width: 50px;
  height: 50px;
  image-rendering: pixelated;
  display: block;
  flex: none;
  transform-origin: 50% 50%;
  will-change: transform;
  animation: wobble 4.2s ease-in-out infinite, fade 0.63s ease-out both;
}

.title {
  margin: 0;
  font-size: 33px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text);
}

/* ---- terminal body --------------------------------------------------- */
.terminal {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 22px;
  font-family: 'Fira Code', monospace;
  font-feature-settings: 'liga' 1, 'calt' 1;
  font-variant-ligatures: contextual;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0;
}

.prompt-top {
  color: var(--overlay-1);
  line-height: 1.7;
  margin-bottom: 4px;
  white-space: nowrap;
}

.row {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

/* a flex element that eats remaining width and clips its dashes */
.fill {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

/* ---- device box ------------------------------------------------------ */
.box {
  color: var(--surface-1);
  overflow: hidden;
}

.dev-name { color: var(--mauve); font-weight: 600; }

.status-down   { color: var(--red);   font-weight: 600; }
.status-active { color: var(--green); }

.connector { color: var(--overlay-0); }

.svc-online  { color: var(--text); }
.svc-offline { color: var(--muted); }

.marker-online  { color: var(--green); }
.marker-offline { color: var(--red); font-weight: 600; }

.down-tag {
  color: var(--red);
  font-weight: 600;
  letter-spacing: 0.06em;
}

/* ---- footer prompt --------------------------------------------------- */
.prompt-bottom {
  margin-top: 14px;
  line-height: 1.5;
}

.prompt-bottom .host-mei  { color: var(--green); }
.prompt-bottom .host-name { color: var(--mauve); }
.chevron { color: var(--mauve); }

.caret {
  color: var(--mauve);
  animation: blink 1.1s step-end infinite;
}

/* ---- legend footer --------------------------------------------------- */
.legend {
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 18px;
  font-family: 'Fira Code', monospace;
  font-feature-settings: 'liga' 1, 'calt' 1;
  font-size: 12px;
  color: var(--surface-1);
  letter-spacing: 0.02em;
}

.legend .item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.legend .dot-online  { color: var(--green); }
.legend .dot-offline { color: var(--red); }
.legend .spacer { flex: 1; }

/* ---- entrance + idle animation -------------------------------------- */
@keyframes wobble {
  0%   { transform: rotate(-4deg); }
  50%  { transform: rotate(4deg); }
  100% { transform: rotate(-4deg); }
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

.rise { animation: rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; }
.delay-1 { animation-delay: 0.05s; }
.delay-2 { animation-delay: 0.14s; }
.box.rise:nth-of-type(1) { animation-delay: 0.22s; }
.box.rise:nth-of-type(2) { animation-delay: 0.34s; }

@media (prefers-reduced-motion: reduce) {
  .pfp, .rise, .caret { animation: none; }
}

.is-refresh .rise { animation: none; opacity: 1; transform: none; }
.is-refresh .pfp  { animation: wobble 4.2s ease-in-out infinite; }