/* Stage Explorer — page-specific styles
   Base styles, variables, and dark mode provided by ../shared/styles.css */

/* --- Select --- */
.select-section { padding-top: 1.5rem; padding-bottom: 0; border-bottom: none; }
.select-section label { display: block; font-weight: 600; margin-bottom: 0.25rem; font-size: 0.9rem; color: var(--muted); }
select {
  padding: 0.5rem 1rem;
  font-size: 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--fg);
  min-width: 280px;
  transition: border-color 0.15s;
}
select:focus { outline: none; border-color: var(--accent); }

/* --- Detail cards (extend shared .card) --- */
.detail-card { transition: none; }
.detail-card:hover { transform: none; box-shadow: var(--shadow); }
.detail-card h3 { color: var(--accent); margin-bottom: 0.5rem; }
.detail-card.highlight {
  background: var(--accent-light);
  border-color: var(--accent);
  border-left: 3px solid var(--accent);
}

/* --- Hint text --- */
.hint { font-size: 0.85rem; color: var(--muted); margin-bottom: 0.75rem; line-height: 1.5; }

/* --- Table overrides --- */
.detail-card th { width: 130px; vertical-align: top; font-size: 0.9rem; }
.detail-card td { font-size: 0.9rem; }

/* --- Delegation chain layers --- */
.chain-layer {
  padding: 0.65rem 0.85rem;
  margin-bottom: 0.3rem;
  border-radius: var(--radius-sm);
  background: var(--code-bg);
  border-left: 3px solid var(--border);
}
.chain-layer.l0 { border-left-color: #B8860B; }
.chain-layer.l1 { border-left-color: #C49A3C; }
.chain-layer.l2 { border-left-color: #5B7553; }
.chain-layer.l3 { border-left-color: #9B4444; }
.chain-layer strong { font-size: 0.95rem; }
.chain-layer small { color: var(--muted); font-size: 0.82rem; }

/* --- Chain arrow --- */
.chain-arrow { text-align: center; color: var(--muted); font-size: 0.8rem; margin: 0.15rem 0; }

/* --- Budget badge --- */
.budget {
  float: right;
  font-size: 0.75rem;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  background: var(--card-bg);
  color: var(--muted);
  border: 1px solid var(--border);
}

/* --- Budget bar --- */
.budget-bar {
  display: flex;
  height: 2rem;
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-top: 0.5rem;
  box-shadow: var(--shadow);
}
.budget-segment {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  transition: width 0.3s;
}