/* ==========================================================================
   f-drink.css — CAT-06 only. Tokens only: no colour, no font, no radius
   that is not already declared in tokens.css.

   index.html is shared and cannot be edited from this category, so this
   sheet is appended at runtime by js/features/drink/ui.js.
   ========================================================================== */

.d-count {
  padding: var(--s-3) var(--gutter);
  border-bottom: 1px solid var(--hairline);
  font-variant-numeric: tabular-nums;
}

.d-facets { padding: var(--s-3) var(--gutter); border-bottom: 1px solid var(--hairline); }
.d-facets + .d-facets { border-top: 0; }
.d-facet-label { display: block; margin-bottom: var(--s-2); }

.d-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-1);
  font-variant-numeric: tabular-nums;
}

.d-sub { display: block; color: var(--ink-muted); font-size: var(--t-small); margin-top: 2px; }

.d-out { opacity: 0.5; }
.d-struck { text-decoration: line-through; }

.d-keg-bar {
  display: block;
  height: 6px;
  width: 100%;
  border: 1px solid var(--hairline);
  margin-top: var(--s-2);
}
.d-keg-fill { display: block; height: 100%; background: var(--ink); }
.d-keg-fill[data-low="true"] { background: var(--accent); }

.d-scale { display: flex; gap: var(--s-1); align-items: center; }
.d-step { width: 14px; height: 6px; border: 1px solid var(--ink); }
.d-step[data-on="true"] { background: var(--ink); }

.d-seats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-2); padding: 0 var(--gutter); }
.d-seat {
  min-height: var(--tap);
  border: 1px solid var(--hairline);
  padding: var(--s-2);
  text-align: left;
  background: transparent;
  font-size: var(--t-small);
}
.d-seat[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.d-seat[disabled] { opacity: 0.4; }

.d-doc { padding: var(--s-5) var(--gutter); }
.d-doc h3 { margin-top: var(--s-5); }
.d-doc dl { margin-top: var(--s-3); }

.d-timer { font-variant-numeric: tabular-nums; }

.d-pad { padding: var(--s-4) var(--gutter); }
.d-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); padding: var(--s-4) var(--gutter); }

.d-table { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
.d-table th, .d-table td {
  text-align: left;
  padding: var(--s-2) var(--s-2);
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
}
.d-scroll { overflow-x: auto; padding-inline: var(--gutter); }