/* Make padding/border included in element width (not added on top).
   This is the modern default reset — without it sizing gets confusing. */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Turn the page into a vertical flex container so the header sticks to
   the top and main content fills the rest of the viewport height. */
body {
  margin: 0;
  font-family: sans-serif;
  background: #e8e8e8;
  color: #222;

  height: 100vh;          /* exactly the viewport — no page-level scrolling */
  overflow: hidden;
  display: flex;
  flex-direction: column; /* stack children vertically */
}

/* Fixed header bar at the top. */
header {
  background: #1a1a2e;
  color: #eee;
  padding: 1rem 2rem;     /* rem = relative to root font size (~16px) */
}

/* Lay out header contents horizontally, bottoms aligned.
   flex-end aligns all children to the bottom edge so the title and the
   info block (counts + legend) share the same baseline floor. */
header {
  position: relative; /* anchor for .home-link absolute positioning */
  display: flex;
  align-items: flex-end;
  gap: 1.5rem;
}

/* Remove default top/bottom margin so the h1 doesn't push outside the header. */
header h1 {
  margin: 0;
  font-size: 1.5rem;
}

/* Count + legend stacked vertically next to the title. */
.header-info {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.header-counts {
  color: #aaa;
  font-size: 0.9rem;
}

.header-legend {
  color: #999;
  font-size: 0.75rem;
}

/* Small unobtrusive home link pinned to the top-right corner of the header. */
.home-link {
  position: absolute;
  top: 0.35rem;
  right: 0.75rem;
  font-size: 0.7rem;
  color: #666;
}
.home-link a {
  color: #777;
}
.home-link a:hover {
  color: #aaa;
}

/* Main content area fills remaining viewport height and splits into two columns. */
main {
  flex: 1;
  display: flex;
  min-height: 0; /* needed for flex children to scroll independently */
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

/* Left column: search + scrollable event listing.
   flex: 65 and flex: 35 below are grow ratios — the columns split available space 65/35.
   (flex shorthand with one value sets flex-grow; shrink defaults to 1, basis to 0.) */
.left-col {
  flex: 65;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 2rem;
  overflow-y: auto;
}

/* Right column: sticky stats panel. */
.right-col {
  flex: 35;
  padding: 2rem;
  border-left: 1px solid #bbb;
  overflow-y: auto;
}

/* Wrapper positions the clear button relative to the input. */
.search-wrap {
  position: relative;
  margin-bottom: 1rem;
}

/* Full-width search input above the event list. */
.search-box {
  display: block;
  width: 100%;
  padding: 0.5rem 2.5rem 0.5rem 0.75rem; /* right padding leaves room for clear button */
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  /* Hide the browser's native clear button */
  -webkit-appearance: none;
}
.search-box::-webkit-search-cancel-button {
  display: none;
}

/* Pulsing glow while search debounce is pending.
   Animates box-shadow (not border) so it's visible even when the input is focused.
   outline: none suppresses the browser focus ring so the glow isn't hidden under it. */
@keyframes search-pulse {
  0%, 100% { box-shadow: 0 0 0 2px transparent; }
  50%       { box-shadow: 0 0 0 3px #7a9cc0; }
}
.search-pending {
  outline: none;
  animation: search-pulse 0.7s ease-in-out infinite;
}

/* Clear button overlaid on the right side of the input. */
.search-clear {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  padding: 0 0.75rem;
  background: none;
  border: none;
  cursor: pointer;
  color: #999;
  font-size: 0.85rem;
}
.search-clear:hover {
  color: #333;
}

/* Stats panel heading. */
.stats-heading {
  margin: 0 0 0.75rem 0;
  font-size: 1rem;
  color: #444;
  padding-top: 1.5rem;
  border-top: 1px solid #bbb;
}


/* Inline label appended to the event count in the toolbar: how the query was interpreted. */
.search-mode-label {
  font-size: 0.75rem;
  color: #aaa;
}

/* Summary block at the top of the stats panel. Always visible, reacts to search. */
.stats-summary {
  margin: 0 0 1.5rem 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr auto; /* label left, value right */
  gap: 0.2rem 1rem;
  font-size: 0.85rem;
}

/* Each row is itself a grid item spanning both columns via subgrid. */
.stats-summary-row {
  display: contents; /* lets dt and dd participate directly in the parent grid */
}

.stats-summary dt {
  color: #888;
  font-weight: normal;
}

.stats-summary dd {
  margin: 0;
  text-align: right;
  font-variant-numeric: tabular-nums; /* keep numbers from shifting width as they change */
}

/* Emphasised summary row: active when search mode matches (Events or Performances). */
.stats-summary dt.stat-active,
.stats-summary dd.stat-active {
  color: #222;
  font-weight: 600;
}

/* Wrapper for year table — limits height so performer table stays visible. */
.stats-table-scroll {
  max-height: 12rem;
  overflow-y: auto;
  margin-bottom: 0.5rem;
}

/* Performer stats table. */
.stats-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.stats-table th {
  padding: 0;
  font-weight: normal;
  border-bottom: none;
}

/* Column header row: static label text + inline sort button. */
.sort-row th {
  padding-bottom: 0.25rem;
  text-align: left;
  font-size: 0.85rem;
  color: #555;
  white-space: nowrap;
}

.sort-btn {
  font-size: 0.75rem;
  color: #777;
  background: #f5f5f5;
  border: 1px solid #bbb;
  border-radius: 3px;
  cursor: pointer;
  padding: 0;
  width: 1.4em;
  height: 1.4em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}

.sort-btn:hover {
  background: #e8e8e8;
  border-color: #999;
  color: #333;
}

/* Active sort: non-reversible columns — show state but don't invite interaction. */
.sort-btn.sort-active.sort-locked {
  background: #d8d8d8;
  border-color: #aaa;
  color: #444;
  cursor: default;
}

.sort-btn.sort-active.sort-locked:hover {
  background: #d8d8d8;
  border-color: #aaa;
  color: #444;
}

/* Active sort: reversible column — invite re-click to flip direction. */
.sort-btn.sort-active:not(.sort-locked) {
  background: #d8d8d8;
  border-color: #aaa;
  color: #444;
  font-weight: 600;
}


.stats-table td {
  padding: 0.2rem 0.5rem;
  border-bottom: 1px solid #eee;
}

/* Count column: fixed width, tabular numbers, left-aligned, no wrapping. */
.stats-table td:nth-child(2) {
  width: 5rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}


/* Toolbar above the event list: count on the left, mini toggle centred, sort on the right.
   1fr auto 1fr: the two outer columns share space equally; the middle column is exactly
   as wide as its content, which keeps the mini toggle visually centred. */
.listing-toolbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  margin-bottom: 0.5rem;
}

.listing-toolbar .sort-toggle {
  justify-self: end;
}

.event-count {
  font-size: 0.85rem;
  color: #888;
}

.mini-toggle {
  font-size: 0.8rem;
  color: #555;
  cursor: pointer;
  user-select: none;
}

.mini-toggle.mini-toggle-disabled {
  color: #bbb;
  cursor: default;
}

.sort-toggle {
  font-size: 0.8rem;
  color: #555;
  background: #efefef;
  border: 1px solid #bbb;
  border-radius: 4px;
  cursor: pointer;
  padding: 2px 8px;
}

.sort-toggle:hover {
  background: #e2e2e2;
  border-color: #999;
  color: #222;
}

/* Scroll-to-top button: sticky in the bottom-right corner of the left column.
   align-self: flex-end pushes it to the right edge within the flex column. */
.scroll-top-btn {
  position: sticky;
  bottom: 0.1rem;
  align-self: flex-end;
  margin-right: -1.5rem;
  font-size: 0.85rem;
  color: #555;
  background: #efefef;
  border: 1px solid #bbb;
  border-radius: 4px;
  cursor: pointer;
  padding: 4px 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.scroll-top-btn:hover {
  background: #e2e2e2;
  border-color: #999;
  color: #222;
}

/* Each event is a horizontal row of fields. gap adds space between them. */
.event-row {
  display: flex;
  gap: 1rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid #ddd;
  align-items: flex-start; /* date/location sit at the top when title spans multiple lines */
}

/* Fixed-width date column so all titles align vertically.
   flex: 0 0 7rem = don't grow, don't shrink, always exactly 7rem wide. */
.event-date {
  flex: 0 0 7rem;
  color: #666;
  font-size: 0.9rem;
}

/* Title takes all remaining space; stacks performers vertically. */
.event-title {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

/* Optional festival/event name shown above performers. */
.event-name-prefix {
  color: #888;
  font-size: 0.85rem;
}

/* Muted parenthetical detail after performer name, e.g. "acoustic". */
.performer-detail {
  color: #888;
  font-size: 0.85rem;
}

/* One performer per line, with optional inline mini badge. */
.event-performer {
}

/* Performer name that matches the current search query. */
.performer-match {
  font-weight: 600;
}

/* Mini-concert badge: small, bordered, muted. */
.mini-badge {
  font-size: 0.7rem;
  color: #888;
  background: #eef3fb;
  border-radius: 3px;
  padding: 0 3px;
  line-height: 1.5;
  vertical-align: middle;
}

/* Custom tooltip for the mini-badge when a data-tooltip attribute is present.
   Using CSS ::after instead of the native title attribute because the browser's
   built-in tooltip delay (~1s) is too slow for comfortable discoverability. */
.mini-badge[data-tooltip] {
  position: relative;
  cursor: help;
}
.mini-badge[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  width: 260px;
  white-space: normal;
  background: #333;
  color: #fff;
  font-size: 0.75rem;
  line-height: 1.4;
  padding: 5px 8px;
  border-radius: 4px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  transition-delay: 0.25s;
  z-index: 10;
}
.mini-badge[data-tooltip]:hover::after {
  opacity: 1;
}

/* Location is muted, doesn't need to dominate. */
.event-location {
  color: #666;
  font-size: 0.9rem;
  text-align: right;
}

/* Muted event comment appended after location, e.g. " · 2". */
.event-comment {
  color: #aaa;
  font-size: 0.85rem;
}