/*
 * agent-fluid-autonomy.css — the earned-autonomy meter (founder direction 2026-05-29).
 *
 * Styling for the always-visible widget that makes self-learning VISIBLE: the
 * brand's current rung on the autonomy ladder (Assisted → Learning → Supervised
 * → Auto-staged), the progress bar to the next rung, and the single thing
 * blocking it. The render function in agent-fluid-autonomy.js emits semantic
 * class names; all visual styling lives here.
 *
 * Token discipline (CLAUDE.md): build INSIDE the Netscape frame. NO new color
 * tokens — reuse the existing --approve / --ink / --panel / --line vars, each
 * with a sensible fallback so the widget renders standalone (matching the
 * pattern the renderer already used inline). The earned/filled color is
 * --approve; structural lines + dimmed (locked) rungs use --line.
 *
 * Wiring: add "/agent-fluid-autonomy.css" to the static allowlist and include
 * it alongside agent-fluid.css in the dashboard frame.
 */

/* ── Container ─────────────────────────────────────────────────────────── */

.autonomy-meter {
  border: 1px solid var(--hairline, #2f2f2f);
  background: var(--card, #1f1f1f);
  color: var(--fg-strong, #f4f4f4);
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.4;
}

/* Empty / no-state placeholder collapses to nothing visible. */
.autonomy-meter--empty {
  border: none;
  padding: 0;
  background: transparent;
}

/* ── Header row: label + at-a-glance stat ──────────────────────────────── */

.autonomy-meter__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.autonomy-meter__label {
  font-weight: 700;
}

.autonomy-meter__stat {
  opacity: 0.7;
  white-space: nowrap;
}

.autonomy-meter__headline {
  opacity: 0.8;
  margin: 3px 0;
}

/* ── Ladder track: 4 named rungs, current highlighted, locked dimmed ───── */

.autonomy-meter__ladder {
  display: flex;
  gap: 4px;
  margin: 8px 0 6px;
}

.autonomy-meter__rung {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
}

/* The colored bar segment for each rung. */
.autonomy-meter__rung-bar {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: var(--hairline, #2f2f2f);
}

.autonomy-meter__rung-name {
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: 0.02em;
  opacity: 0.75;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* Earned rungs (at-or-below the current tier) fill with the approve color. */
.autonomy-meter__rung--on .autonomy-meter__rung-bar {
  background: var(--state-done-dot, #22c55e);
}

.autonomy-meter__rung--on .autonomy-meter__rung-name {
  opacity: 0.8;
}

/* Locked rungs (above the current tier) stay dimmed. */
.autonomy-meter__rung--locked .autonomy-meter__rung-bar {
  background: var(--hairline, #2f2f2f);
}

.autonomy-meter__rung--locked .autonomy-meter__rung-name {
  opacity: 0.6;
}

/* The current rung is highlighted: full-strength label + a marker dot. */
.autonomy-meter__rung--current .autonomy-meter__rung-name {
  font-weight: 700;
  opacity: 1;
}

.autonomy-meter__rung--current .autonomy-meter__rung-bar {
  box-shadow: 0 0 0 1px var(--state-done-dot, #22c55e);
}

/* ── Progress bar to the next rung ─────────────────────────────────────── */

.autonomy-meter__barwrap {
  height: 5px;
  background: var(--hairline, #2f2f2f);
  border-radius: 3px;
  overflow: hidden;
}

.autonomy-meter__bar {
  height: 100%;
  background: var(--state-done-dot, #22c55e);
  transition: width 200ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .autonomy-meter__bar {
    transition: none;
  }
}

/* ── Next-rung / top-rung line ─────────────────────────────────────────── */

.autonomy-meter__next {
  margin-top: 5px;
  opacity: 0.85;
}

.autonomy-meter__next--top {
  opacity: 0.7;
}

/* Persistent D-006 guarantee — shown at every rung so the climbing ladder can
   never read as "auto-publishing." */
.autonomy-meter__guarantee {
  margin-top: 6px;
  padding-top: 5px;
  border-top: 1px solid var(--hairline, #2f2f2f);
  font-size: 10px;
  letter-spacing: 0.02em;
  opacity: 0.65;
}