/* Content blocks: breadcrumb, FAQ, tables, callouts (08 §7.2). */
.breadcrumb { font-size: var(--text-small); color: var(--color-text-muted); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; margin: 0; }
.breadcrumb li + li::before { content: "›"; margin-right: var(--space-2); }
.breadcrumb a { color: inherit; }
.breadcrumb [aria-current="page"] { color: var(--color-text); }

/* FAQ: <details class="faq__item"><summary>Q</summary><div class="faq__answer">A</div></details> — works without JS */
.faq__item { border-bottom: 1px solid var(--color-border); }
.faq__item summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
  min-height: var(--tap-min); padding: var(--space-4) 0; cursor: pointer; list-style: none;
  font-size: var(--text-h3); font-weight: 600; line-height: 1.35;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: ""; flex: none; width: 10px; height: 10px; margin-right: var(--space-1);
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform var(--dur-base) var(--ease);
}
.faq__item[open] summary::after { transform: rotate(-135deg); }
.faq__answer { padding-bottom: var(--space-4); color: var(--color-text-muted); }

/* Tables: wrap in .table-wrap for horizontal scroll on small screens */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; font-size: var(--text-small); }
.table th, .table td { padding: var(--space-3); text-align: left; border-bottom: 1px solid var(--color-border); }
.table th { font-weight: 600; color: var(--color-text-muted); }
.table tbody tr:nth-child(even) { background: var(--color-surface); }
.table .num, .table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }

.callout { padding: var(--space-4) var(--space-5); background: var(--color-surface); border-left: 4px solid var(--color-primary); border-radius: var(--radius-sm); }
.callout--tip { border-left-color: var(--color-good); }
.callout--warning { border-left-color: var(--color-warn); }
.callout__title { font-weight: 600; margin-bottom: var(--space-1); }