/* =============================================================================
   GreySheet Design System — book references (GSID ViewItem "Descriptions" section).

   Figma 85:30727 — "Resource 1/2/3" rows beneath the reverse description: a
   space-between row per reference, small-body-regular label on the left, 30px
   icon button on the right.

   Loads AFTER custom-style-2026-07-24.css. New rules only — nothing here
   overrides an existing GSDS rule. All rules scoped under `.gsds`, tokens only.
   ============================================================================= */

/* Row list — matches the Figma frame's spacing/padding/sm container. */
.gsds .gs-bookrefs {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-padding-sm) 0;
}

/* A native <button> reset into a full-width row. */
.gsds .gs-bookrefs__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-gap-xs);
  width: 100%;
  padding: var(--spacing-padding-sm);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.gsds .gs-bookrefs__row:hover,
.gsds .gs-bookrefs__row:focus-visible {
  background: var(--color-surface-sunken);
  text-decoration: none;
}

.gsds .gs-bookrefs__label {
  font-family: var(--text-small-body-regular-font-family);
  font-size: var(--text-small-body-regular-font-size);
  line-height: var(--text-small-body-regular-line-height);
  color: var(--color-text-primary);
}

/* The Figma "small-button": 30px square, radius/sm, 16px glyph. */
.gsds .gs-bookrefs__go {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
}
.gsds .gs-bookrefs__go > i {
  width: 16px;
  height: 16px;
  font-size: 16px;
  line-height: 1;
}
.gsds .gs-bookrefs__row:hover .gs-bookrefs__go { color: var(--color-text-brand); }

/* Source of the modal's HTML — never displayed in place. */
.gsds .gs-bookrefs__store { display: none; }

/* A book write-up is long-form prose; the 500px default dialog is sized for the
   short feedback modal, so widen it for this one. */
.gsds .gs-modal__dialog--wide { max-width: 760px; }

/* .gs-modal__close sets a 32px box but is a flex child of .gs-modal__head with no
   flex-basis, so a long title (ours wraps to two lines on a phone) squeezes it to
   ~21px wide — an awkward tap target. Scoped to this dialog so the feedback modal
   keeps its current behaviour. */
.gsds .gs-modal__dialog--wide .gs-modal__close { flex: 0 0 auto; }

/* Head is title + subtitle here, not a single line — let the text block shrink
   rather than overflow, and keep it top-aligned against the close button. */
.gsds .gs-modal__dialog--wide .gs-modal__head { align-items: flex-start; }
.gsds .gs-modal__dialog--wide .gs-modal__head > div:first-child { min-width: 0; }

/* Reference body: CMS-authored HTML (<section class="wp-paragraph"><p>…), so style
   generic descendants rather than assuming GSDS classes are present. */
.gsds .gs-bookrefs__content {
  font-family: var(--text-medium-body-regular-font-family);
  font-size: var(--text-medium-body-regular-font-size);
  line-height: var(--text-medium-body-regular-line-height);
  color: var(--color-text-primary);
}
.gsds .gs-bookrefs__content p { margin: 0 0 var(--spacing-gap-sm); }
.gsds .gs-bookrefs__content section + section { margin-top: var(--spacing-gap-sm); }
.gsds .gs-bookrefs__content h1,
.gsds .gs-bookrefs__content h2,
.gsds .gs-bookrefs__content h3,
.gsds .gs-bookrefs__content h4 {
  font-family: var(--text-h3-font-family);
  font-weight: var(--text-h3-font-weight);
  font-size: var(--text-h3-font-size);
  line-height: var(--text-h3-line-height);
  margin: var(--spacing-gap-sm) 0 var(--spacing-gap-mini);
}
.gsds .gs-bookrefs__content ul,
.gsds .gs-bookrefs__content ol { margin: 0 0 var(--spacing-gap-sm); padding-left: var(--spacing-gap-md); }
.gsds .gs-bookrefs__content img { max-width: 100%; height: auto; }
.gsds .gs-bookrefs__content table { width: 100%; border-collapse: collapse; }
.gsds .gs-bookrefs__content td,
.gsds .gs-bookrefs__content th {
  padding: var(--spacing-gap-mini) var(--spacing-gap-xs);
  border-bottom: var(--stroke-weight-stroke-default) solid var(--color-border-default);
  text-align: left;
}
.gsds .gs-bookrefs__content > *:last-child { margin-bottom: 0; }