/* ============================================
   Dashboard mockup — used in hero and steps
   Self-contained styles, scoped under .dash
   ============================================ */

.dash {
  background: #0E0D0B;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  text-align: left;
  padding: 20px 24px 28px;
  position: relative;
}

/* App nav */
.dash__nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 24px;
}
.dash__brand {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
}
.dash__navlinks {
  display: flex;
  gap: 28px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--text-muted);
}
.dash__navlinks span:first-child { color: var(--text-primary); }
.dash__user {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 10px;
}
.dash__user-dot {
  width: 22px; height: 22px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: var(--text-secondary);
}

/* Title row */
.dash__title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 20px;
}
.dash__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.dash__sub {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--text-muted);
}
.dash__period {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  border: 1px solid var(--border-default);
  padding: 6px 12px;
}

/* Health bar */
.dash__health {
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  padding: 18px 20px;
  margin-bottom: 20px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 32px;
  align-items: center;
}
.dash__health-bar {
  position: relative;
  height: 6px;
  background: var(--bg-base);
  border: 1px solid var(--border-subtle);
  margin-top: 12px;
}
.dash__health-bar-fill {
  position: absolute;
  top: -1px; bottom: -1px;
  left: -1px;
  width: 38%;
  background: linear-gradient(to right, var(--green) 0%, var(--green) 60%, var(--accent) 100%);
}
.dash__health-marker {
  position: absolute;
  top: -4px;
  left: 38%;
  width: 1px;
  height: 14px;
  background: var(--text-primary);
}
.dash__health-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.dash__health-num {
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}
.dash__health-delta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--green);
  margin-left: 8px;
}
.dash__health-delta--bad { color: var(--red); }

/* Metric tiles */
.dash__tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border-subtle);
  border: 1px solid var(--border-subtle);
  margin-bottom: 24px;
}
.dash__tile {
  background: var(--bg-base);
  padding: 16px 18px;
}
.dash__tile-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.dash__tile-value {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
  margin-bottom: 6px;
}
.dash__tile-value--gold { color: var(--accent); }
.dash__tile-value--green { color: var(--green); }
.dash__tile-trend {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
}

/* Charts row */
.dash__charts {
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  gap: 16px;
  margin-bottom: 24px;
}
.dash__panel {
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  padding: 16px 18px;
}
.dash__panel-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
}
.dash__panel-title {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--text-muted);
}
.dash__panel-tag {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-muted);
}

/* Donut */
.donut {
  display: flex;
  align-items: center;
  gap: 14px;
}
.donut svg { width: 84px; height: 84px; flex-shrink: 0; }
.donut__legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-secondary);
}
.donut__legend-row { display: flex; align-items: center; gap: 6px; }
.donut__legend-dot {
  width: 7px; height: 7px;
}

/* Trend chart */
.trend {
  height: 110px;
  position: relative;
}
.trend svg { width: 100%; height: 100%; }
.trend__axis {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-muted);
}

/* Leakage table */
.dash__table {
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
}
.dash__table-head {
  display: grid;
  grid-template-columns: 28px 1.4fr 1.6fr 1fr 1fr 1fr;
  gap: 16px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border-default);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--text-muted);
}
.dash__table-row {
  display: grid;
  grid-template-columns: 28px 1.4fr 1.6fr 1fr 1fr 1fr;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 12px;
  color: var(--text-primary);
  align-items: center;
}
.dash__table-row:last-child { border-bottom: none; }
.dash__table-rank {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
}
.dash__table-cell--mono {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--red);
}
.dash__table-cell--mute { color: var(--text-secondary); }
.dash__table-cell--gold { color: var(--accent); font-family: var(--font-mono); font-size: 11px; }
.dash__table-cell--green {
  color: var(--green);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
}

.dash__table-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-default);
}
.dash__table-title-text {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--text-primary);
}
.dash__table-title-meta {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--text-muted);
}

/* Compact variants for step shots */
.dash--compact { padding: 16px 20px 20px; }
.dash--compact .dash__nav,
.dash--compact .dash__title-row { display: none; }

/* Responsive
   On mobile we DELIBERATELY keep the full desktop dashboard layout so the
   whole thing reads as one cohesive dashboard "image". The shot wrappers
   in styles.css scale this entire block down via `zoom` so it fits the
   phone screen as a single proportionally-shrunk frame.
   ================================================================ */
@media (max-width: 768px) {
  /* No-op: dashboard keeps its desktop dimensions so it renders as one frame */
}