:root {
  --window-max-width: 1500px;
  --brewery-cols: minmax(240px, 1.4fr) minmax(180px, 1fr) 112px;
  --breweries-gap: 10px;
  --breweries-control-height: 34px;
}

body > main {
  max-width: none;
  height: 100vh;
  overflow: hidden;
}

.breweries-app {
  display: grid;
  grid-template-columns: minmax(520px, 1.2fr) minmax(420px, 0.8fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: var(--breweries-gap);
  align-items: stretch;
  height: calc(100vh - 120px);
}

.search-bar {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: end;
}

.search-bar label {
  display: grid;
  gap: 4px;
  margin: 0;
}

.search-bar input,
.search-bar button {
  height: var(--breweries-control-height);
}

.status {
  grid-column: 1 / -1;
  color: #f66;
}

.brewery-list {
  min-height: 0;
  height: 100%;
  overflow-y: auto;
  border: 1px solid var(--rule);
  outline: none;
}

.brewery-header,
.brewery-row {
  display: grid;
  grid-template-columns: var(--brewery-cols);
  gap: 12px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--rule);
}

.brewery-header {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg);
  color: var(--dim);
}

.brewery-header [data-column] {
  cursor: pointer;
  user-select: none;
}

.brewery-header [data-column]:hover {
  color: var(--bright);
}

.brewery-header [data-column][data-sort-state="asc"]::after {
  content: " ▲";
}

.brewery-header [data-column][data-sort-state="desc"]::after {
  content: " ▼";
}

.brewery-row.selected {
  background: var(--selected);
}

.brewery-row strong {
  color: var(--bright);
  font-weight: 600;
}

.brewery-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brewery-detail {
  min-width: 420px;
  min-height: 0;
  height: 100%;
  overflow-y: auto;
  border: 1px solid var(--rule);
  padding: 16px;
}

.brewery-detail h2 {
  min-height: 1.5em;
}

.brewery-detail dl {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 8px 12px;
  margin: 0;
}

.brewery-detail dt {
  color: var(--dim);
}

.brewery-detail dd {
  margin: 0;
  min-height: 1.5em;
}

.brewery-detail a {
  color: var(--accent);
}