/*
 * styleLevel2.css — Level 2 policy builder styles (Session 6): decision
 * table, treatment/ranking chips, lock indicator and the annual review bar.
 * Split from style.css (at the 300-line cap) as styleDashboard.css was in
 * Session 5. Reuses the legend-chip/legend-text classes from
 * styleDashboard.css for the state swatches.
 */

.policy-panel {
  max-width: 900px;
  margin: 0 0 1rem 0;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 0.7rem 1rem 0.9rem;
}

.policy-head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.policy-title {
  margin: 0;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #556;
}

.policy-lock { font-size: 0.8rem; color: #a35a00; }
.policy-lock.policy-lock-open { color: #2e7d32; }
.policy-lock.shake { animation: hud-shake 0.4s ease; color: #c62828; }

.policy-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.22rem 0;
}

.policy-state {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: 0 0 11rem;
  font-size: 0.85rem;
  color: #333;
}

.policy-chips { display: inline-flex; flex-wrap: wrap; gap: 0.4rem; }

.policy-chip {
  padding: 0.28rem 0.75rem;
  border: 1px solid #bbb;
  border-radius: 999px;
  background: #fff;
  color: #222;
  font-size: 0.82rem;
  cursor: pointer;
}
.policy-chip:hover { background: #f0f0ea; }
.policy-chip.chip-active {
  background: #2e5e8c;
  border-color: #2e5e8c;
  color: #fff;
}

.policy-ranking {
  margin-top: 0.4rem;
  padding-top: 0.5rem;
  border-top: 1px solid #eee;
}

/* Annual review bar: appears during the year-boundary pause (criterion 3). */
.policy-review {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 0.6rem;
  padding: 0.45rem 0.8rem;
  background: #fdf6e3;
  border: 1px solid #e5d9a8;
  border-radius: 6px;
  font-size: 0.85rem;
}
.policy-review.hidden { display: none; }

.review-text { font-weight: 600; color: #5a4a00; }
.review-count { color: #8a7a30; }

.review-continue {
  margin-left: auto;
  padding: 0.3rem 0.9rem;
  border: none;
  border-radius: 4px;
  background: #2e5e8c;
  color: #fff;
  font-size: 0.85rem;
  cursor: pointer;
}
.review-continue:hover { background: #24496d; }