/* ============================================================
   Policy step
   Either write a policy, or reuse an existing proto — in which
   case you get a summary card and a read-only question list.
   ============================================================ */

.policy__textarea {
  min-height: 150px;
  line-height: 1.55;
}

/* ---------- Reused policy summary ---------- */

.policy-card {
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  padding: 16px 18px;
}

.policy-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.policy-card__head .link-btn {
  margin-left: auto;
}

.policy-card__id {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--accent-lt);
  background: rgba(20, 184, 166, .12);
  border: 1px solid rgba(20, 184, 166, .3);
  border-radius: var(--r-sm);
  padding: 3px 7px;
}

.policy-card__name {
  font-size: 14.5px;
  color: var(--text);
}

.policy-card__meta {
  font-size: 12.5px;
  color: var(--text-4);
  margin-top: 8px;
}

.policy-card__note {
  font-size: 12.5px;
  color: var(--text-5);
  margin: 10px 0 0;
}

/* ---------- Inherited questions ---------- */

/* Read-only inventory of a reused proto's questions — the live preview shows how they
   look; this shows what you're getting. */
.proto-qlist {
  list-style: none;
  margin: 13px 0 0;
  padding: 0;
  border-top: 1px solid var(--border);
  counter-reset: pq;
}

.proto-qlist__item {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 8px 0;
  counter-increment: pq;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
  color: var(--text-2);
}

/* Own counter, not counter(list-item): these rows are flex, not display:list-item. */
.proto-qlist__item::before {
  content: counter(pq) '.';
  color: var(--text-5);
  font-size: 12px;
  flex-shrink: 0;
  min-width: 14px;
  font-feature-settings: 'tnum';
}

.proto-qlist__type {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 11.5px;
  color: var(--text-5);
}