/* item-page-fixes.css — overrides for item/index.html tray content */

/* Public notes card — give it a proper bordered box appearance in the tray.
   The .card class has no styles in site.css so we define them here. */
.vr-public-notes-card {
  border: 1px solid var(--vr-border, rgba(255,255,255,0.10));
  border-radius: 14px;
  background: var(--vr-surface, rgba(255,255,255,0.02));
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
}

.vr-public-notes-card .card-header {
  /* Override the inline style with !important */
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  min-width: 0 !important;
  padding: 12px 14px;
  border-bottom: 1px solid var(--vr-border, rgba(255,255,255,0.08));
  box-sizing: border-box;
}

.vr-public-notes-card .card-header h2 {
  margin: 0;
  flex-shrink: 0;
  font-size: 1rem;
}

.vr-public-notes-card .card-header .muted {
  font-size: 13px !important;
  min-width: 0;
  flex-shrink: 1;
  word-break: break-word;
}

.vr-public-notes-card .card-body {
  padding: 12px 14px;
  box-sizing: border-box;
}

/* Light theme card styling */
html[data-theme="light"] .vr-public-notes-card {
  border-color: rgba(15,23,42,0.12);
  background: #ffffff;
}

html[data-theme="light"] .vr-public-notes-card .card-header {
  border-bottom-color: rgba(15,23,42,0.08);
}

/* Tray body: ensure content is always box-sized within tray width */
.vr-tray-body,
#vrItemPublicNotesTrayBody {
  box-sizing: border-box;
  max-width: 100%;
  overflow-x: hidden;
}

/* Facet cards moved into tray: constrain to tray width */
.vr-in-tray {
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

.vr-in-tray .card-header,
.vr-in-tray .vr-verify-card-header {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  min-width: 0 !important;
}

.vr-in-tray .card-header span,
.vr-in-tray .card-header .muted {
  font-size: 13px;
  min-width: 0;
  flex-shrink: 1;
  word-break: break-word;
}