/* A compact tap board shared by the inline list and quick-access dialog. */
.taplist-open { overflow: hidden; }
.taplist-preview, .taplist-dialog {
 color: #211f19;
 background: var(--colour-paper);
 font-family: var(--font-body);
 box-sizing: border-box;
 container-type: inline-size;
}
.taplist-preview {
 margin-block: 32px;
 padding: clamp(16px, 2.2vw, 28px);
 border-radius: 6px;
 border-top: 3px solid var(--colour-olive);
}
.taplist-board-header, .taplist-header {
 display: flex;
 justify-content: space-between;
 align-items: baseline;
 flex-wrap: wrap;
 gap: 8px 20px;
 margin-bottom: 16px;
}
.taplist-preview .taplist-preview-title, .taplist-header h2 {
 font-family: var(--font-display);
 font-size: clamp(28px, 3vw, 36px);
 font-weight: var(--font-weight-display);
 line-height: 1.1;
 letter-spacing: var(--tracking-heading);
 margin: 0;
}
.taplist-note {
 color: #625c51;
 font-size: .75rem;
 line-height: 1.4;
 margin: 0 0 12px;
}
.taplist-board-header .taplist-note { margin: 0; }
.taplist-items { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 24px; list-style: none; padding: 0; margin: 0; }
.taplist-item {
 display: grid;
 grid-template-columns: 2ch 36px minmax(0, 1fr);
 align-content: start;
 align-items: start;
 gap: 8px;
 border-top: 1px solid #d2c8b8;
 padding: 10px 0;
 box-sizing: border-box;
}
.tap-number {
 padding-top: 2px;
 color: var(--colour-olive);
 font: 700 .75rem/1.4 var(--font-body);
 font-variant-numeric: tabular-nums;
}
.tap-art { width: 36px; height: 36px; overflow: hidden; border-radius: 3px; background: #ece5d8; }
.tap-label { display: block; width: 36px; height: 36px; object-fit: contain; background: var(--colour-paper); }
.tap-details { min-width: 0; overflow-wrap: anywhere; }
.taplist-item h3 { margin: 0 0 2px; font: 700 1rem/1.2 var(--font-body); letter-spacing: -.015em; }
.taplist-item p { margin: 0; font-size: .75rem; line-height: 1.35; color: #625c51; }
.taplist-item .tap-brewery { color: #211f19; }
.tap-meta { display: flex; align-items: baseline; gap: 8px; }
.tap-style { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tap-abv { flex: none; font-variant-numeric: tabular-nums; }
.taplist-item .tap-price {
 display: flex;
 flex-wrap: wrap;
 gap: 2px 12px;
 list-style: none;
 padding: 0;
 margin: 4px 0 0;
 color: var(--colour-olive);
 font: 700 .8125rem/1.35 var(--font-body);
 font-variant-numeric: tabular-nums;
}
.taplist-empty { grid-column: 1 / -1; padding: 16px 0; font-size: 1rem; line-height: 1.4; }
.taplist-close {
 display: inline-flex;
 justify-content: center;
 align-items: center;
 min-height: 44px;
 padding: 10px 14px;
 border: 1px solid var(--colour-olive);
 border-radius: 4px;
 background: var(--colour-olive);
 color: var(--colour-paper);
 font: 700 .875rem/1.4 var(--font-body);
 cursor: pointer;
 flex: none;
}
.taplist-close:hover { background: #383e1e; }
.taplist-close:focus-visible, .taplist-fallback:focus-visible { outline: 3px solid var(--colour-berry); outline-offset: 4px; }
.taplist-fallback { color: var(--colour-olive); text-decoration: underline; text-underline-offset: 3px; }
.taplist-dialog { width: min(1240px, calc(100% - 24px)); max-height: 88svh; overflow-y: auto; padding: clamp(16px, 2.2vw, 28px); border: 1px solid #c5bcad; border-radius: 6px; overscroll-behavior: contain; }
.taplist-dialog::backdrop { background: #050807bb; backdrop-filter: blur(7px); }
.taplist-header { align-items: center; }
/* Respond to the available board width on either page and inside the dialog. */
@container (min-width: 580px) {
 .taplist-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (min-width: 980px) {
 .taplist-items { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Only reserve a small loading area; the live board can contain any number of beers. */
.taplist-items.is-loading { min-height: 120px; }