/* Filter fields as underlined inputs rather than full boxes — lighter, reads as
   a form line, consistent with the de-boxed list below. */
.input-wrapper {
  padding: var(--gap-small) 0;
  border-bottom: var(--border-width) solid var(--theme-accent-color);
  line-height: var(--filter-input-line-height);
  position: relative;

  &:has(.tag) {
    input::placeholder {
      color: transparent;
    }
  }
}

.filter-icon {
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  color: var(--border-color);
}

.filter-button {
  line-height: var(--filter-input-line-height);
}

.searchbar {
  gap: 5vw;
}

.filter-select {
  line-height: var(--filter-input-line-height);
}

/* Date group heading: a single hairline rule instead of the old 5px double
   border — a quiet section divider, not a decorative slab. */
.date {
  align-items: baseline;
  color: var(--theme-fg-color);
  font-weight: bold;
  padding-bottom: var(--gap-small);
  border-bottom: var(--calendar-border-width) solid var(--theme-accent-color);
}

/* A heart before a list date that holds a followed venue/style — the list-view
   echo of the calendar's day marker. Favorite colour (never green: it's a state
   marker, not a control); normal weight so it doesn't shout over the date. */
.date-favorite-marker {
  margin-right: 0.5ch;
  color: var(--theme-favorite-color);
  font-weight: normal;
}

.date-favorite-marker::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  background-color: currentColor;
  -webkit-mask: var(--heart-fill) center / contain no-repeat;
  mask: var(--heart-fill) center / contain no-repeat;
}

/* Venue-led row, zero boxes. Colour does the work: green = interactive
   (followable tags, links, the external-link arrow), raspberry = a favorite you
   follow, muted grey = passive info, black = the event itself. The venue is the
   headline; time/genres stay quiet. */
.event {
  display: flex;
  justify-content: space-between;
  gap: var(--gap-medium);
}

.event-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-xsmall);
}

/* Plain informational tags: genres, and tags for logged-out visitors who can't
   follow. Muted; the venue stays foreground as the headline. */
.event-tag {
  color: var(--theme-fg-muted);
}

.event-tag.venue {
  color: var(--theme-fg-color);
}

/* Followable tags (logged-in): the whole tag IS the follow toggle, so it reads
   as interactive — accent colour says "you can follow this", clicking toggles.
   font:inherit makes the button match the row; the venue's headline size/weight
   still come from .event-where .venue (defined later, so it wins on size).
   Placed after .event-tag.venue so a followable venue reads accent, not fg. */
.event-tag.fav {
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  color: var(--theme-accent-color);
  cursor: pointer;
}

.event-tag.fav:hover .fav-label {
  text-decoration: underline;
}

/* Read-only link back into the filtered list (notification digests only, where
   there's no filter form). */
.filter-link {
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  color: var(--theme-accent-color);
  cursor: pointer;
}

.filter-link:hover {
  text-decoration: underline;
}

/* Venue is the headline: the largest, boldest thing in the row. */
.event-where .venue {
  font-size: var(--font-size-lg);
  font-weight: bold;
}

.event-title {
  font-weight: bold;
  overflow-wrap: anywhere;
}

.event-title a {
  color: var(--theme-fg-color);
  text-decoration: none;
}

/* The title is an external link (off-site, marked by the green ↗ which carries
   the clickable signal at rest). It stays black for headline hierarchy; hover
   just underlines, so the headline never changes colour. */
.event-title a:hover {
  text-decoration: underline;
}

.event-link-marker {
  /* The only link signal on the (black) title, so give it a touch more presence
     than the title text — but stay typographic, not icon-sized. line-height:1
     keeps the larger glyph from inflating the title's line. */
  font-size: 1.2em;
  line-height: 1;
  color: var(--theme-accent-color);
  font-weight: normal;
}

/* Time leads the title at full size but in muted grey, so it reads before the
   act without competing with the venue headline above it. */
.event-time {
  margin-right: 0.8ch;
  color: var(--theme-fg-muted);
  font-weight: normal;
}

.event-subtitle {
  color: var(--theme-fg-muted);
  font-size: var(--font-size-small);
}

.event-subtitle p {
  margin: 0;
}

.event-styles,
.event-genres {
  font-size: var(--font-size-small);
}

/* Styles are the primary, followable descriptor — bold them so they assert a tier
   above the muted, regular-weight subtitle and genres they sit between, without
   adding another font size to the row. */
.event-styles {
  font-weight: bold;
}

/* Genres are display-only (not filters): muted, so the colour alone says
   "not clickable". */
.event-genres {
  color: var(--theme-fg-muted);
}

.event-genres .genre.active {
  color: var(--theme-accent-color);
}

.meta-edit {
  margin-left: 0.4ch;
  color: var(--theme-fg-muted);
}

/* The follow heart trails its tag and inherits the tag's font-size, so the big
   venue header gets a big heart and a small style tag a small one. Outline and
   muted when not followed; solid and accent when followed. */
.fav-heart {
  margin-left: 0.4ch;
}

/* A masked Phosphor heart: the mask is the shape, background-color paints it, so
   it inherits a theme colour and the tag's em size. Outline + muted by default,
   solid + favorite when followed. */
.fav-heart::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  background-color: var(--theme-fg-muted);
  -webkit-mask: var(--heart-outline) center / contain no-repeat;
  mask: var(--heart-outline) center / contain no-repeat;
}

.event-tag.fav.followed .fav-heart::before {
  background-color: var(--theme-favorite-color);
  -webkit-mask-image: var(--heart-fill);
  mask-image: var(--heart-fill);
}

/* Real, inert separator between terms — a sibling element, not a pseudo on the
   button, so only the link text is hoverable/clickable, never the dot. */
.sep {
  margin: 0 0.5ch;
  color: var(--theme-fg-muted);
  font-weight: normal;
}

/* Admin delete: a quiet line-icon, not a boxed button. */
.event-delete {
  color: var(--theme-fg-muted);
}

.event-delete:hover {
  color: var(--theme-warn-color);
}

/* Past events recede but stay legible. */
.event.past,
.date-events.past .date {
  opacity: 0.5;
}

/* Cancelled events stay listed (so a follower sees the show was called off) but
   the title is struck through and prefixed with a warning-coloured badge. */
.event.cancelled .event-title a {
  text-decoration: line-through;
}

.event-cancelled {
  font-weight: bold;
  text-transform: uppercase;
  color: var(--theme-warn-color);
}

/* List / Calendar as a plain text toggle, not filled buttons: the active view
   is bold accent, the other a muted link. */
.view-switcher {
  gap: var(--gap-medium);

  .button {
    border: 0;
    padding: 0;
    background: none;
    color: var(--theme-fg-muted);
    text-decoration: none;
  }

  .button:hover {
    text-decoration: underline;
  }

  .button.active {
    color: var(--theme-accent-color);
    font-weight: bold;
    background: none;
  }
}

/* "My favorites" filter shortcut, sitting in the view-switcher row. A flat, muted
   text link with a leading heart (the .button.* specificity matches the view
   switcher's, beating the boxed a.button base). The heart is outline + muted when
   off; when the favorites filter is applied the label bolds and the heart fills
   in the favorite accent — echoing the follow-heart language used elsewhere. */
.button.favorites-filter-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4ch;
  border: 0;
  padding: 0;
  background: none;
  color: var(--theme-fg-muted);
  text-decoration: none;
}

/* The display above overrides the UA [hidden] rule, so re-assert it (at matching
   specificity) — the shortcut renders hidden until the user follows something. */
.button.favorites-filter-link[hidden] {
  display: none;
}

.button.favorites-filter-link:hover {
  text-decoration: underline;
}

.favorites-filter-link .fav-heart {
  margin-left: 0;
}

.button.favorites-filter-link.active {
  color: var(--theme-favorite-color);
  font-weight: bold;
}

.favorites-filter-link.active .fav-heart::before {
  background-color: var(--theme-favorite-color);
  -webkit-mask-image: var(--heart-fill);
  mask-image: var(--heart-fill);
}

.simple-calendar {
  .table {
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
  }

  .calendar-heading {
    margin-bottom: var(--gap-small);
  }

  /* The month anchors the calendar — bold, but no taller than the toolbar so the
     view switcher stays pinned to the same spot as in list view. */
  .calendar-title {
    font-size: var(--font-size-lg);
    font-weight: bold;
  }

  th {
    padding: var(--gap-small);
    text-align: center;
    font-weight: normal;
    color: var(--theme-fg-muted);
    /* A thicker accent rule under the weekday header, mirroring the list date. */
    border-bottom: var(--border-width) solid var(--theme-accent-color);
  }

  /* A defined hairline grid (no fills) keeps cells distinguishable without the
     heavy filled boxes of before. */
  .day {
    position: relative;
    border: var(--calendar-border-width) solid var(--theme-accent-color);
    /* Minimum height; busy cells grow to fit their in-flow .day-content. */
    height: 7rem;
    vertical-align: top;

    /* Adjacent-month days recede instead of being filled differently. */
    &.prev-month, &.next-month {
      opacity: 0.4;
    }

    /* Hover: a soft green wash — green = interactive, which also keeps the
       pink/rose family exclusively for the favorite marker (no collision with a
       darker-pink hover). */
    &:has(.calendar-day-link:hover) {
      background-color: var(--theme-accent-muted);
    }

    /* Selected: green wash plus an inset accent frame that ties the day to its
       drawer below. */
    &:has(.calendar-day-link.selected) {
      background-color: var(--theme-accent-muted);
      box-shadow: inset 0 0 0 var(--border-width) var(--theme-accent-color);
    }
  }

  .day-content {
    padding: var(--gap-small);
  }

  /* Transparent click target covering the cell's full (row) height. */
  .calendar-day-link {
    position: absolute;
    inset: 0;
    cursor: pointer;
  }

  .calendar-day-number {
    display: block;
    text-align: left;
    font-size: var(--font-size-small);

    /* Today: a filled accent badge so it can't get lost in the grid. Stays
       display:block (shrink-wrapped) so it keeps the same line height as plain
       day numbers — an inline-block badge would push the cell's venues down. */
    &.today {
      width: fit-content;
      font-weight: bold;
      padding: 0 0.45em;
      color: var(--theme-bg-color);
      background-color: var(--theme-accent-color);
    }
  }

  /* A followed location or style on this day: a small solid heart tucked into
     the top-right corner. Decorative and click-through, so the full-cell day
     link underneath still receives the tap. */
  .day-favorite-marker {
    position: absolute;
    top: var(--gap-small);
    right: var(--gap-small);
    font-size: var(--font-size-small);
    line-height: 1;
    color: var(--theme-favorite-color);
    pointer-events: none;

    &::before {
      content: "";
      display: block;
      width: 1em;
      height: 1em;
      background-color: currentColor;
      -webkit-mask: var(--heart-fill) center / contain no-repeat;
      mask: var(--heart-fill) center / contain no-repeat;
    }
  }

  /* Wide screens: a deduped, favorites-first venue summary. Titles are dropped
     (they never fit a 1/7 column); full detail is one tap away in the panel. */
  .day-venues {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .day-venue {
    font-size: 70%;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    &.more {
      color: var(--theme-fg-muted);
      font-style: italic;
    }
  }

  .day-venue-count {
    color: var(--theme-fg-muted);
  }

  /* Narrow screens (mobile-first default): a count instead of unreadable text. */
  .day-count {
    display: block;
    margin-top: var(--gap-small);
    text-align: center;
    font-size: var(--font-size-small);
    color: var(--theme-fg-muted);
  }

  @media (min-width: 600px) {
    .day-venues { display: block; }
    .day-count { display: none; }
  }

  /* Inline expanding row: the day-detail frame rendered full-width beneath the
     week of the clicked day. The lighter page background (vs. the muted cells)
     plus bold accent rules top and bottom frame it as a distinct drawer lifted
     out of the calendar grid, rather than blending in as just another cell. */
  .day-detail-row td {
    border: 0;
    border-block: var(--border-width) solid var(--theme-accent-color);
    /* Full-width horizontally so the drawer's events line up with the List view
       (same partial) and the page's left/right edges; the bold accent rules and
       lighter background still read it as lifted out of the grid. */
    padding-block: var(--gap-large);
    padding-inline: 0;
    background-color: var(--theme-bg-color);
  }
}

.day-detail {
  border-top: var(--border-width) solid var(--theme-accent-color);
  padding-top: var(--gap-medium);
}

/* Inside the inline row the cell already supplies the frame; the accent divider
   and padding above would be redundant. */
.day-detail-row .day-detail {
  border-top: 0;
  padding-top: 0;
}

.day-detail-header {
  /* Bottom-align so the close button sits down on the date's double rule,
     capping the end of the line instead of floating in the vertical middle. */
  align-items: flex-end;
  gap: var(--gap-small);
}

/* The date keeps its full-width double underline; the close button caps it. */
.day-detail-header .date {
  flex: 1;
}

.day-detail-close {
  flex: none;
  border: 0;
  padding: 0;
  background: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--theme-accent-color);
  text-decoration: none;
  cursor: pointer;
}

.day-detail-close:hover,
.day-detail-close:focus-visible {
  color: var(--theme-fg-color);
}