/* The home page deliberately inherits the dashboard design tokens and base
   components from style.css. Keep this layer flat and motion-free. */
.home-topbar { min-height: 57px; }
.home-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.home-brand-word { letter-spacing: .025em; }

.home-main { padding-top: 0; }
.home-intro { padding: 54px 0 36px; border-bottom: 1px solid var(--line); margin-bottom: 30px; }
.home-eyebrow { color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; margin-bottom: 10px; }
.home-intro h1 { max-width: 720px; color: var(--tx); font-size: clamp(30px, 5vw, 44px);
  line-height: 1.15; letter-spacing: -.035em; }
.home-lead { max-width: 680px; margin-top: 14px; color: var(--tx2); font-size: 16px; }

.home-section-head { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
.home-section-head h2, .home-note h2 { color: var(--tx); font-size: 16px; font-weight: 650; }
.home-section-head p, .home-note p { margin-top: 5px; color: var(--tx2); font-size: 13px; }

.pool-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.pool-card { display: flex; flex-direction: column; min-height: 322px; padding: 22px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.pool-card:hover { border-color: var(--line2); }
.pool-card-head { display: flex; align-items: center; gap: 13px; }
.pool-mark { display: grid; place-items: center; width: 48px; height: 48px; flex: 0 0 48px;
  border: 1px solid var(--line2); border-radius: 11px; background: var(--card2);
  color: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: .04em; }
.pool-name { min-width: 0; }
.pool-name h3 { overflow: hidden; color: var(--tx); font-size: 17px; font-weight: 700;
  text-overflow: ellipsis; white-space: nowrap; }
.pool-name span { color: var(--tx2); font-size: 12px; }
.pool-state { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; padding: 4px 8px;
  border: 1px solid var(--line); border-radius: 999px; color: var(--tx2); font-size: 11px; white-space: nowrap; }
.pool-state-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tx2); }
.pool-state.live { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, var(--line)); }
.pool-state.live .pool-state-dot { background: var(--ok); }
.pool-state.wait { color: var(--pending); border-color: color-mix(in srgb, var(--pending) 40%, var(--line)); }
.pool-state.wait .pool-state-dot { background: var(--pending); }
.pool-state.down { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); }
.pool-state.down .pool-state-dot { background: var(--danger); }

.pool-description { min-height: 42px; margin-top: 18px; color: var(--tx2); font-size: 13px; }
.pool-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 20px 0;
  padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pool-metrics div { min-width: 0; padding: 0 12px; border-left: 1px solid var(--line); }
.pool-metrics div:first-child { padding-left: 0; border-left: 0; }
.pool-metrics div:last-child { padding-right: 0; }
.pool-metrics dt { overflow: hidden; color: var(--tx2); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.pool-metrics dd { overflow: hidden; margin-top: 7px; color: var(--tx); font-size: 15px; font-weight: 650;
  font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.home-cta { display: block; margin-top: auto; padding: 10px 14px; border: 1px solid var(--line2);
  border-radius: 9px; color: var(--tx); font-size: 13px; font-weight: 600; text-align: center; text-decoration: none; }
.home-cta:hover { border-color: var(--accent); color: var(--accent); }

.home-note { display: flex; align-items: center; justify-content: space-between; gap: 20px;
  margin-top: 24px; margin-bottom: 0; }

@media (max-width: 720px) {
  .home-intro { padding: 38px 0 28px; }
  .pool-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .home-topbar { flex-wrap: nowrap; }
  .home-actions { gap: 6px; }
  .home-intro h1 { font-size: 30px; }
  .pool-card { min-height: 0; padding: 18px 16px; }
  .pool-card-head { align-items: flex-start; }
  .pool-state { padding: 3px 7px; }
  .pool-metrics { grid-template-columns: 1fr; gap: 12px; }
  .pool-metrics div, .pool-metrics div:first-child, .pool-metrics div:last-child {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    padding: 0; border: 0;
  }
  .pool-metrics dd { margin-top: 0; }
}