/* Shared living-reference content anatomy. The global page shell, identity,
   breadcrumb/site menu, and masthead placement live in app.css; reference.css
   owns only the reference workspace/panels/specimens below it. */
.reference-workspace {
  display: grid;
  gap: 22px;
  margin-top: 24px;
}

.reference-section-heading h2 {
  margin: 0;
  color: var(--text);
  font-size: 1.28rem;
  line-height: 1.2;
}

.reference-section {
  padding: var(--modal-padding-y) var(--modal-padding-x);
  overflow: visible;
}

.reference-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.reference-section-heading.page-toc-return-host {
  position: relative;
}

.reference-section-heading.page-toc-return-host > :first-child {
  min-width: 0;
  padding-inline-end: calc(var(--contextual-icon-control-size) + var(--ui-gap-2));
}

/* The eyebrow and return-to-contents control share the same panel-heading top
   edge. The icon therefore follows heading geometry directly instead of repeating
   eyebrow font/line-height arithmetic. Color is inherited from the shared
   .icon-button contract, matching utility-bar primary icons. */
.page-toc-return {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
}

.reference-section-heading > code {
  color: var(--muted);
  font-size: 0.72rem;
  text-align: right;
}

.reference-section-note {
  margin: -2px 0 14px;
  color: var(--muted);
  font-size: 0.86rem;
}

.reference-specimen-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.reference-specimen-grid--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.reference-specimen {
  display: grid;
  align-content: start;
  gap: var(--panel-card-gap);
  min-width: 0;
  padding: var(--panel-card-padding-y) var(--panel-card-padding-x);
  border: 1px dashed color-mix(in srgb, var(--border-strong) 58%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel-2) 42%, var(--panel));
}

.reference-specimen--span { grid-column: 1 / -1; }

.reference-specimen-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--panel-card-gap-inline);
  min-width: 0;
}

.reference-specimen-label strong {
  color: var(--text);
  font-size: 0.76rem;
}

.reference-specimen-label code {
  color: var(--muted);
  font-size: 0.68rem;
  text-align: right;
  overflow-wrap: anywhere;
}

.reference-copy {
  margin: 0;
  color: var(--muted);
  font-size: 0.76rem;
}

@media (max-width: 940px) {
  .reference-specimen-grid,
  .reference-specimen-grid--wide { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .reference-section-heading { align-items: flex-start; flex-direction: column; }
  .reference-section-heading > code { text-align: left; }
}