/* gigs.css — scoped to the gigs module.
 *
 * Status is a treatment here too, matching the calendar's logic: a cancelled
 * or played show recedes so the next confirmed one is the loudest thing.
 */

/* No padding here: .view__body already pads, and a module stacking its own on
 * top is how two modules end up with different margins. Width only. */
.gigs { max-width: 860px; }

.gigs__section { margin-bottom: var(--s-6); }
.gigs__section .label { display: block; margin-bottom: var(--s-3); }
.gigs__rows { display: flex; flex-direction: column; gap: var(--s-2); }

/* ---- one show --------------------------------------------------------- */
.gig {
  --hue: var(--muted);
  border: 1px solid var(--line);
  border-left: 3px solid var(--hue);
  border-radius: var(--radius);
  background: var(--panel);
  overflow: hidden;
  transition: border-color var(--t-fast) var(--ease);
}
.gig:hover { border-color: var(--faint); border-left-color: var(--hue); }

.gig.is-enquiry   { --hue: var(--faint); border-style: dashed; border-left-style: solid; }
.gig.is-held      { --hue: var(--p-website); }
.gig.is-confirmed { --hue: var(--success); }
.gig.is-played    { --hue: var(--muted); }
.gig.is-cancelled { --hue: var(--danger); }

/* Played and cancelled recede, so the next confirmed show is the loudest
 * thing on the page -- the same rule the calendar applies to `posted`. */
.gig.is-played, .gig.is-cancelled { opacity: .62; }
.gig.is-cancelled .gig__venue { text-decoration: line-through; }

.gig__main {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  width: 100%;
  padding: var(--s-3) var(--s-4);
  text-align: left;
}
.gig__main:hover { background: var(--panel-2); }

/* ---- the date block --------------------------------------------------- */
.gig__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 46px;
  flex: none;
  line-height: 1.05;
  padding-top: 2px;
}

.gig__weekday {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.gig__day {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.gig__month {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---- the show --------------------------------------------------------- */
.gig__body { flex: 1; min-width: 0; }

.gig__head {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  flex-wrap: wrap;
}

.gig__venue {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  min-width: 0;
}

.gig__status {
  font-size: var(--t-meta);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--hue);
  padding: 2px 6px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--hue) 14%, transparent);
  flex: none;
}

.gig__meta {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  margin: 3px 0 0;
  font-size: var(--t-card);
  color: var(--muted);
}
.gig__dot { color: var(--faint); }
.gig__fee { color: var(--text); font-weight: 600; }

/* ---- availability -----------------------------------------------------
 * The thing a band cannot do in a group chat: six answers, visible at once. */
.avail {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-4);
  border-top: 1px solid var(--line);
  background: var(--bg);
}

.avail__me {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: var(--t-meta);
  font-weight: 600;
  color: var(--muted);
  flex: none;
  transition: background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.avail__me:hover { border-color: var(--faint); color: var(--text); }
.avail__me:active { transform: scale(.97); }

.avail__me.is-yes {
  color: var(--success);
  border-color: color-mix(in srgb, var(--success) 45%, transparent);
  background: color-mix(in srgb, var(--success) 12%, transparent);
}
.avail__me.is-no {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 45%, transparent);
  background: color-mix(in srgb, var(--danger) 12%, transparent);
}
.avail__me.is-maybe {
  color: var(--p-website);
  border-color: color-mix(in srgb, var(--p-website) 45%, transparent);
  background: color-mix(in srgb, var(--p-website) 12%, transparent);
}

.avail__others { display: flex; align-items: center; gap: 3px; flex: 1; min-width: 0; }

.avail__chip { position: relative; display: inline-flex; }

/* An unanswered bandmate is dimmed rather than hidden: the gap is the
 * information, and hiding it is how "nobody asked me" happens. */
.avail__chip.is-unanswered .disc { opacity: .3; }

.avail__mark {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  font-size: 8px;
  line-height: 11px;
  text-align: center;
  font-weight: 700;
  border: 1px solid var(--bg);
}
.avail__chip.is-yes .avail__mark { background: var(--success); color: var(--on-accent); }
.avail__chip.is-no .avail__mark { background: var(--danger); color: var(--on-accent); }
.avail__chip.is-maybe .avail__mark { background: var(--p-website); color: var(--on-accent); }

.avail__count {
  font-size: var(--t-meta);
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  flex: none;
}
.avail__count.is-complete { color: var(--success); }

@media (max-width: 819px) {
  .gig__main { padding: var(--s-3); gap: var(--s-3); }
  .avail { padding: var(--s-2) var(--s-3); flex-wrap: wrap; }
}