/* The component gallery (#/components). */
.gallery { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 2rem; align-items: start; }
.gallery-toc { position: sticky; top: calc(var(--sticky-top) + 0.75rem); max-height: calc(100vh - 5rem); overflow: auto; display: grid; gap: 1rem; font-size: var(--text-sm); }
.gallery-toc h2 { font-size: var(--text-label); color: var(--muted-foreground); margin-bottom: 0.25rem; }
.gallery-jump { text-align: start; padding: 0.125rem 0; cursor: pointer; }
.gallery-jump:hover { text-decoration: underline; }
.gallery-jump[data-kind="customised"]::after { content: " ●"; color: var(--warning); font-size: var(--text-marker); vertical-align: 2px; }
.gallery-jump[data-kind="ours"]::after { content: " ●"; color: var(--info); font-size: var(--text-marker); vertical-align: 2px; }
.gallery-section { font-size: var(--text-section); margin: 2rem 0 0.75rem; padding-bottom: 0.375rem; border-bottom: 1px solid var(--border); }
.gallery-section:first-child { margin-top: 0; }
.gallery-entry { display: grid; gap: 0.625rem; padding: 1.25rem 0 1.5rem; border-bottom: 1px solid var(--border); scroll-margin-top: calc(var(--sticky-top) + 1rem); }
.gallery-entry > header { display: flex; align-items: center; gap: 0.625rem; }
.gallery-entry > header h3 { font-size: var(--text-base); }
.gallery-call code, .gallery-code, .gallery-options code { font-family: var(--font-mono); font-size: var(--text-label); }
.gallery-call code { background: var(--muted); padding: 0.125rem 0.375rem; border-radius: var(--radius-sm); }
.gallery-built, .gallery-notes { color: var(--muted-foreground); max-width: 56rem; }
.gallery-built b { color: var(--foreground); font-weight: 600; }
.gallery-custom { background: var(--warning-surface); padding: 0.625rem 0.875rem; border-radius: var(--radius-md); max-width: 56rem; }
.gallery-entry[data-kind="ours"] .gallery-custom { background: var(--info-surface); }
.gallery-custom b { font-weight: 600; }
.gallery-example { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.gallery-live { padding: 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.gallery-live > :is(.tile-row, .band, .gallery-type, .out-chart, .tree, .week-picker, .note, .inline-edit, .breadcrumb, .page-header, .card, .table-container, .alert, .empty, .chip-field, .stepper, .description-list, .page-header, .item, .field, .pager, .chart-svg, .chart-legend, .skeleton-stack, .skeleton-table, .skeleton-chart, .tile, .progress, .gallery-swatches, .gallery-icons, .choice-card, .input-group, hr) { flex-basis: 100%; }
.gallery-live > .tile { flex-basis: 16rem; }
.gallery-live > .lib-card { flex-basis: 16rem; max-width: 18rem; }
.gallery-live code { white-space: pre-wrap; word-break: break-word; }
.gallery-code { margin: 0; padding: 0.625rem 1rem; background: var(--muted); border-top: 1px solid var(--border); white-space: pre-wrap; word-break: break-word; }
.gallery-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 0.5rem; }
.gallery-type { display: grid; gap: 0.5rem; }
.gallery-type p { display: flex; align-items: baseline; gap: 1rem; }
.gallery-type code { flex: 0 0 9rem; font-family: var(--font-mono); font-size: var(--text-label); color: var(--muted-foreground); }
.gallery-swatches figure { margin: 0; display: flex; gap: 0.5rem; align-items: center; font-size: var(--text-label); }
.gallery-swatches span { width: 1.75rem; height: 1.75rem; border-radius: var(--radius-sm); border: 1px solid var(--border); flex: none; }
.gallery-icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: 0.5rem; }
.gallery-icons span { display: flex; gap: 0.5rem; align-items: center; font-size: var(--text-label); }
.gallery-tip-target { border-bottom: 1px dashed var(--muted-foreground); cursor: help; }
.gallery-now { stroke: var(--chart-current); }
.gallery-ya { stroke: var(--chart-comparison); stroke-dasharray: 5 3; }
.gallery-examples { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: 0.625rem; }
.gallery-examples:empty { display: none; }
.gallery-example[data-wide] { grid-column: 1 / -1; }
.gallery-options td { white-space: normal; vertical-align: top; }
.gallery-options td:first-child { width: 1%; white-space: nowrap; }
.gallery-options td:nth-child(2) { width: 15rem; }
/* A picker's calendar is drawn open in its example, in the flow rather than floating over the next one. */
.gallery-live .week-picker > .popover { flex-direction: column; align-items: flex-start; }
.gallery-live .week-picker [data-popover] { position: static; margin-top: 0.25rem; }
.gallery-live > .tree { border: 1px solid var(--border); border-radius: var(--radius-lg); }

/* Narrow main column (QUA-03). Last, so it overrides the rules above. */
@container main (width < 56rem) {
  .gallery { grid-template-columns: minmax(0, 1fr); }
  .gallery-toc { position: static; max-height: none; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
}