/* ── 参考リンク ──────────────────────────────────────
   Same visual language as quadra-child/faq-item's own citations list
   (label chip + external-link icon), but its own standalone card.
   Padding/gap deliberately tighter than the original reference mockup —
   per explicit request ("make the padding/gap more closer than the
   mockup"). */
.gaia-reference-links {
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 12px;
  margin: 1.5rem 0;
  border: 1px solid var(--color-border-subtle, #ddd);
  border-radius: var(--radius-12, 12px);
  background: var(--color-grey-92, #f7f6f0);
}

.gaia-reference-links__label {
  flex: 0 0 auto;
  padding: 6px 14px;
  margin-top: -2px;
  background: var(--color-brand-primary, #49352d);
  color: var(--color-text-inverse, #fff);
  font-weight: var(--font-weight-bold, 700);
  font-size: var(--font-size-body-sm, 14px);
  border-radius: var(--radius-8, 8px);
}

.gaia-reference-links__list {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gaia-reference-links__entry {
  display: flex;
  flex-direction: column;
}

/* Plain inline <a> (not flex) so long link text wraps like normal text —
   the icon just rides along inline-block at the end, wrapping onto the
   last line with it. Same proven pattern as this theme's own
   .quadra-child-faq__citations-item a (an inline-flex version here was
   tried first but doesn't reliably wrap; flexbox's own text-wrapping
   rules for anonymous text items are real but easy to get wrong —
   plain inline flow has no such ambiguity). */
.gaia-reference-links__item {
  display: inline;
  color: var(--color-brand-accent-solid, #f0701c);
  font-size: var(--font-size-body-sm, 14px);
  line-height: var(--line-height-body-sm, 21px);
  text-decoration: none;
  overflow-wrap: break-word;
}
.gaia-reference-links__item:hover {
  text-decoration: underline;
}

.gaia-reference-links__description {
  margin: 0;
  font-size: var(--font-size-caption, 12px);
  line-height: var(--line-height-caption, 18px);
  color: var(--color-text-secondary, #5c5650);
}

/* Only rendered for target="_blank" links (see save() — an icon implying
   "opens in a new window" would be misleading on a same-tab link). */
.gaia-reference-links__icon {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 4px;
  vertical-align: -1px;
  background-color: currentColor;
  transition: transform 0.2s ease;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14L21 3'/%3E%3C/svg%3E")
    no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14L21 3'/%3E%3C/svg%3E")
    no-repeat center / contain;
}
/* Same "hop toward the destination" hover motion as
   .quadra-child-faq__citations-external-icon. */
.gaia-reference-links__item:hover .gaia-reference-links__icon {
  transform: translate(2px, -2px);
}

/* ══════════════════════════════════════════════════
   EDITOR — link rows (text/URL/target/remove per link)
══════════════════════════════════════════════════ */
.gaia-reference-links__edit-item {
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--color-border-subtle, #ddd);
}
.gaia-reference-links__edit-item:last-of-type {
  border-bottom: none;
}

.gaia-reference-links__edit-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.gaia-reference-links__edit-description {
  margin: 0 !important;
  font-size: var(--font-size-body-sm, 14px);
}
.gaia-reference-links__edit-text,
.gaia-reference-links__edit-url {
  margin: 0 !important;
}
.gaia-reference-links__edit-text {
  flex: 1.2 1 0;
}
.gaia-reference-links__edit-url {
  flex: 1 1 0;
}
.gaia-reference-links__edit-target {
  flex: 0 0 auto;
  margin: 0 !important;
  white-space: nowrap;
}
.gaia-reference-links__edit-remove {
  flex: 0 0 auto;
  width: 20px !important;
  height: 20px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: var(
    --color-brand-primary-wash-hover,
    rgba(73, 53, 45, 0.12)
  ) !important;
  color: var(--color-brand-primary, #49352d) !important;
}
.gaia-reference-links__edit-add {
  font-size: 0.85em !important;
  color: var(--color-text-muted, #999) !important;
}
.gaia-reference-links__edit-add:hover {
  color: var(--color-brand-primary, #49352d) !important;
}

/* Was: label stacks above the links list below 480px
   (flex-direction:column) — reported live as reading like two
   disconnected pieces (a floating badge, then a separate paragraph)
   rather than "参考" labeling the link right next to it. Removed: the
   label + list now stay side-by-side (row) at every width, same as
   desktop — .gaia-reference-links__item is plain inline text (see its
   own comment above), so long/wrapped text still wraps normally under
   where the list starts, not under the badge. */