/* ── Badges ──────────────────────────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--on-brand);
  white-space: nowrap;
  flex-shrink: 0;
}

.status-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.status-badge--preview {
  background: var(--warning-tint);
  color: var(--or);
  border: 1px solid var(--or);
}

/* ── Lifecycle status badges ─────────────────────────────────────────── */
.status-badge--draft             { background: var(--solid-draft); color: var(--on-brand); }
.status-badge--in-review         { background: var(--su); color: var(--on-or); }
.status-badge--changes-requested { background: var(--solid-warning); color: var(--on-or); } /* PI-6 */
.status-badge--published         { background: var(--solid-success); color: var(--on-brand); }
.status-badge--superseded        { background: var(--solid-purple); color: var(--on-brand); } /* PI-6 */
.status-badge--retired           { background: var(--solid-danger); color: var(--on-brand); }

.card-retired { opacity: .55; }

/* ── PI-6 / PI-21 — catalog facet badges (classification pill, certification,
   confidence, type chip, trust score) ─────────────────────────────────── */
.pi-pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 100px;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .03em;
  border: 1px solid transparent;
  white-space: nowrap;
  flex-shrink: 0;
}
.pi-pill--safe    { background: var(--success-tint); color: var(--success); border-color: var(--success-border); }
.pi-pill--info    { background: var(--info-tint); color: var(--info); border-color: var(--info-border); }
.pi-pill--warn    { background: var(--warning-tint); color: var(--warning); border-color: var(--warning-border); }
.pi-pill--danger  { background: var(--danger-tint); color: var(--danger); border-color: var(--danger-border); }
.pi-pill--neutral { background: var(--neutral-bg); color: var(--neutral-fg); border-color: var(--neutral-border); }

.pi-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .03em;
  white-space: nowrap;
  flex-shrink: 0;
}
.pi-badge--certified    { background: var(--success-tint); color: var(--success); border: 1px solid var(--success-border); }
.pi-badge--experimental { background: var(--purple-bg); color: var(--purple-fg); border: 1px solid var(--purple-border); }
/* PI-31 (v1.4) — edit-policy badges. Warning tone = Locked (view-only shares),
   info tone = Governed (view-only + classification-gated sharing). */
.pi-badge--locked       { background: var(--warning-tint); color: var(--warning); border: 1px solid var(--warning-border); }
.pi-badge--governed     { background: var(--info-tint); color: var(--info); border: 1px solid var(--info-border); }

.pi-type-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px 5px;
  border-radius: 100px;
  font-size: .64rem;
  font-weight: 600;
  color: var(--muted);
  background: var(--wash);
  border: 1px solid var(--border-soft);
  white-space: nowrap;
  flex-shrink: 0;
}
.pi-type-chip__icon {
  display: inline-flex;
  width: 13px;
  height: 13px;
  color: var(--accent);
}
.pi-type-chip__icon svg { width: 13px; height: 13px; }

.pi-trust {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 100px;
  font-size: .62rem;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

/* PI-38 — Collection member count + inline expandable member list. The wrapper
   is positioned so the popover list can anchor beneath the count chip without
   disturbing the card/row flow. */
.pi-coll { position: relative; display: inline-flex; }
.pi-coll-count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px 2px 6px;
  border-radius: 100px;
  font: inherit;
  font-size: .64rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--accent);
  background: var(--wash);
  border: 1px solid var(--border-soft);
  white-space: nowrap;
}
.pi-coll-count:hover { border-color: var(--accent); }
.pi-coll-count__icon { display: inline-flex; width: 13px; height: 13px; }
.pi-coll-count__icon svg { width: 13px; height: 13px; }
.pi-coll-members {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  min-width: 220px;
  max-width: 320px;
  max-height: 260px;
  overflow: auto;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}
.pi-coll-members__list { list-style: none; margin: 0; padding: 0; }
.pi-coll-members__list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 6px;
  border-radius: 6px;
  font-size: .72rem;
}
.pi-coll-members__list li + li { border-top: 1px solid var(--border-soft); }
.pi-coll-members__list a { color: var(--heading); text-decoration: none; font-weight: 600; }
.pi-coll-members__list a:hover { color: var(--accent); text-decoration: underline; }
.pi-coll-members__missing { color: var(--muted); font-style: italic; }
.pi-trust--safe { background: var(--success-tint); color: var(--success); }
.pi-trust--info { background: var(--info-tint); color: var(--info); }
.pi-trust--warn { background: var(--warning-tint); color: var(--warning); }

/* ── PI-8 — per-type icon thumbnail tile (fallback when no image) ──────── */
.pi-typeicon {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tile);
  background-image: radial-gradient(circle at 30% 25%, rgba(255,255,255,.6), transparent 60%);
}
.pi-typeicon svg { width: 44%; height: 44%; opacity: .85; }
.pi-typeicon--list svg { width: 55%; height: 55%; }

/* Card + list facet rows */
.dash-card__title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.dash-card__facets,
.dash-list__facets {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 6px 0 2px;
}

/* ── PI-21 — collapsible "Classification & governance" section in modals ── */
.facet-fieldset {
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  margin: 4px 0 14px;
  background: var(--surface-2);
}
.facet-fieldset__summary {
  cursor: pointer;
  padding: 10px 14px;
  font-size: .8rem;
  font-weight: 700;
  color: var(--muted);
  list-style: none;
  user-select: none;
}
.facet-fieldset__summary::-webkit-details-marker { display: none; }
.facet-fieldset__summary::before {
  content: '▸';
  display: inline-block;
  margin-right: 8px;
  color: var(--st);
  transition: transform .15s ease;
}
.facet-fieldset[open] > .facet-fieldset__summary::before { transform: rotate(90deg); }
.facet-fieldset__body { padding: 4px 14px 12px; }
.facet-fieldset__note {
  font-size: .74rem;
  color: var(--st);
  margin: 4px 0 0;
}

/* PI-21 — segmented toggle (Add-modal Confidence: Experimental / Production) */
.facet-toggle-label {
  display: block;
  font-size: .76rem;
  font-weight: 600;
  color: var(--st);
  margin-bottom: 6px;
}
.segmented-toggle {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
}
.segmented-toggle__btn,
.segmented-toggle__clear {
  border: 0;
  background: transparent;
  font-weight: 600;
  color: var(--st);
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.segmented-toggle__btn {
  padding: 7px 16px;
  font-size: .8rem;
  border-right: 1px solid var(--border);
}
.segmented-toggle__btn:hover { background: var(--vb-tint); }
.segmented-toggle__btn.is-active { background: var(--vb); color: var(--on-brand); }
.segmented-toggle__clear {
  padding: 7px 12px;
  font-size: .78rem;
}
.segmented-toggle__clear:hover { color: var(--heading); }

/* PI-21 — multi-select Category chips (Add-Artifact modal) */
.category-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.category-chips:empty { display: none; }
.category-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px 3px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: .78rem;
  color: var(--muted);
}
.category-chip--primary {
  border-color: var(--accent);
  background: var(--vb-tint);
  font-weight: 600;
}
.category-chip__x {
  border: 0;
  background: transparent;
  color: var(--st);
  cursor: pointer;
  font-size: .72rem;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 50%;
}
.category-chip__x:hover { color: var(--heading); background: rgba(0,0,0,.06); }

/* ── Content-type badges (PI-4) ──────────────────────────────────────── */
/* Marks binary Artifacts (PDF / PowerPoint / Excel / Word) in the catalog. */
.content-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--on-brand);
  white-space: nowrap;
  flex-shrink: 0;
}
.content-badge--pdf  { background: var(--solid-danger); }
.content-badge--pptx { background: var(--or); }
.content-badge--xlsx { background: var(--solid-success); }
.content-badge--docx { background: var(--solid-info); }

/* ── Tags ────────────────────────────────────────────────────────────── */
.tag {
  font-size: .67rem;
  padding: 2px 7px;
  background: var(--bg);
  border: 1px solid var(--fg);
  border-radius: 4px;
  color: var(--st);
}

/* ── Card action buttons (star + edit + share) ─────────────────────── */
.dash-card__actions .card-star,
.dash-card__actions .card-edit-btn,
.dash-card__actions .card-share-btn {
  background: none;
  border: none;
  padding: 3px 5px;
  border-radius: 4px;
  cursor: pointer;
  font-size: .95rem;
  line-height: 1;
  transition: background .1s, color .1s, transform .1s;
}
.dash-card__actions .card-star { color: var(--muted); }
.dash-card__actions .card-star:hover { background: var(--warning-tint); color: var(--su); transform: scale(1.15); }
.dash-card__actions .card-star.active { color: var(--su); }
.dash-card__actions .card-edit-btn { color: var(--muted); font-size: .82rem; }
.dash-card__actions .card-edit-btn:hover { background: var(--bg); color: var(--accent); }
.dash-card__actions .card-share-btn { color: var(--muted); font-size: .82rem; }
.dash-card__actions .card-share-btn:hover { background: var(--wash-blue); color: var(--accent); }

/* Generic action icon-buttons surfaced on hover (Launch / Download / Clone /
   Details). Shared by the grid card and the list-row toolbars so both views
   expose the same detail-page actions. */
.dash-card__actions .card-act-btn,
.dash-list__actions .card-act-btn,
.card-act-btn {
  background: none;
  border: none;
  padding: 3px 5px;
  border-radius: 4px;
  cursor: pointer;
  font-size: .82rem;
  line-height: 1;
  color: var(--muted);
  transition: background .1s, color .1s, transform .1s;
}
.card-act-btn:hover { background: var(--bg); color: var(--accent); }

/* Legacy selector — perm-grid / other surfaces may still use .card-actions */
.card-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity .14s;
}
.dash-card:hover .card-actions,
.card-actions:focus-within { opacity: 1; }
/* Always show star if it's active (favorited) */
.card-star.active { opacity: 1 !important; }
/* Force parent card-actions visible if star is active */
.dash-card:has(.card-star.active) .card-actions { opacity: 1; }

.card-star,
.card-edit-btn {
  background: none;
  border: none;
  padding: 3px 5px;
  border-radius: 4px;
  cursor: pointer;
  font-size: .95rem;
  line-height: 1;
  transition: background .1s, color .1s, transform .1s;
}
.card-star { color: var(--muted); }
.card-star:hover { background: var(--warning-tint); color: var(--su); transform: scale(1.15); }
.card-star.active { color: var(--su); }
.card-edit-btn { color: var(--muted); font-size: .82rem; }
.card-edit-btn:hover { background: var(--bg); color: var(--accent); }
.card-share-btn { color: var(--muted); font-size: .82rem; }
.card-share-btn:hover { background: var(--wash-blue); color: var(--accent); }

/* Share button in toolbar */
.toolbar-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--accent);
  border: 1px solid var(--vb);
  border-radius: 4px;
  background: none;
  cursor: pointer;
  font-family: inherit;
  transition: background .1s;
}
.toolbar-share-btn:hover { background: var(--wash-blue); }
/* Subtle variant (Clone / Edit) — filled neutral chip instead of outlined. */
.toolbar-share-btn--subtle {
  background: var(--wash);
  color: var(--heading);
  border: 1px solid var(--border);
}
.toolbar-share-btn--subtle:hover { background: var(--chip); }

/* ── Taxonomy picker (in modals) ─────────────────────────────────────── */
.taxonomy-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.taxonomy-tag-btn {
  padding: 4px 12px;
  border-radius: 100px;
  border: 1.5px solid var(--border);
  background: var(--wh);
  color: var(--st);
  font-size: .75rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background .1s, border-color .1s, color .1s;
}
.taxonomy-tag-btn:hover { border-color: var(--accent); color: var(--accent); }
.taxonomy-tag-btn.selected {
  background: var(--vb);
  border-color: var(--accent);
  color: var(--on-brand);
}
.freeform-tags-row {
  margin-top: 6px;
}
.freeform-tags-row input {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--fg);
  border-radius: 5px;
  font-size: .84rem;
  font-family: inherit;
  outline: none;
  transition: border-color .12s;
}
.freeform-tags-row input:focus { border-color: var(--accent); }

/* Promote tag chip (edit modal) */
.promote-tags-row {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.promote-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px 3px 10px;
  border-radius: 100px;
  border: 1.5px solid var(--su);
  background: var(--warning-tint);
  color: var(--warning);
  font-size: .73rem;
  font-weight: 600;
}
.promote-tag-chip__btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: .65rem;
  color: var(--warning);
  padding: 0 2px;
  transition: color .1s;
}
.promote-tag-chip__btn:hover { color: var(--accent); }
.promote-chips-label {
  font-size: .7rem;
  color: var(--muted);
  font-style: italic;
}

/* ── Show-all-statuses toggle ─────────────────────────────────────────── */
.status-toggle-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 100px;
  border: 1.5px solid var(--border);
  background: var(--wh);
  font-size: .75rem;
  font-weight: 600;
  color: var(--st);
  cursor: pointer;
  font-family: inherit;
  transition: background .1s, border-color .1s, color .1s;
  margin-left: 4px;
}
.status-toggle-pill.active {
  background: var(--dn);
  border-color: var(--dn);
  color: var(--on-brand);
}

/* ── Lock badge on cards ─────────────────────────────────────────────── */
.lock-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--st);
  background: var(--wash);
  border: 1px solid var(--fg);
  border-radius: 4px;
  padding: 2px 7px;
}
.dash-card.is-locked { cursor: default; }
.dash-card.is-locked .dash-card__arrow { display: none; }

/* Invite-only badge on cards */
.invite-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: .65rem;
  font-weight: 700;
  background: var(--dn);
  color: var(--on-brand);
  border-radius: 4px;
  padding: 2px 7px;
}

/* ── Toast notification ──────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 28px;
  right: 28px;
  /* Must sit above the full-screen editor overlay (z-index 1300). */
  z-index: 1450;
  background: var(--dn);
  color: var(--on-brand);
  padding: 12px 20px;
  border-radius: 7px;
  font-size: .88rem;
  box-shadow: 0 6px 24px rgba(0,0,0,.2);
  animation: slideUp .18s ease;
  max-width: 360px;
}
.toast.toast--error { background: var(--solid-danger); }
.toast.toast--success { background: var(--solid-success); }
.toast.toast--warning { background: var(--solid-warning); color: var(--on-or); }

/* ── Error / loading states ──────────────────────────────────────────── */
.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 24px;
  color: var(--st);
  font-size: .9rem;
}

.error-page {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  text-align: center;
}
.error-page__code { font-size: 5rem; font-weight: 700; color: var(--muted); line-height: 1; }
.error-page__title { font-size: 1.4rem; color: var(--heading); margin: 12px 0 8px; }
.error-page__msg { color: var(--st); font-size: .9rem; margin-bottom: 28px; }

/* ── Shared buttons ─────────────────────────────────────────────────── */
.btn-primary {
  display: inline-block;
  padding: 10px 22px;
  background: var(--vb);
  color: var(--on-brand);
  border-radius: 5px;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  font-family: inherit;
  transition: background .15s;
}
.btn-primary:hover { background: var(--accent-strong); }

.btn-danger {
  padding: 7px 16px;
  background: none;
  border: 1px solid var(--danger);
  border-radius: 5px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--danger);
  cursor: pointer;
  font-family: inherit;
  transition: background .12s, color .12s;
}
.btn-danger:hover { background: var(--solid-danger); color: var(--on-brand); }