/* 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;
}

.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. Hierarchy comes from structure — the venue anchor on
   its own line, a quiet metadata line (city/canton) beneath it — so the list reads
   the same logged in or out. Colour is an enhancement, not the separator: green
   now marks a tag you *follow* (your stuff), plus true links and the external-link
   arrow; muted grey = passive info; black = the event itself. */
.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. Colour no
   longer marks "followable" — at rest a followable tag inherits its neighbours'
   colour (venue = fg, city/canton = muted, styles = muted bold), identical to the
   logged-out plain tags, so the page reads the same either way. The follow
   affordance is the trailing heart; following lights the tag accent (see
   .event-tag.fav.followed). font:inherit keeps the button matching the row. */
.event-tag.fav {
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}

/* The one thing the accent colour now marks: a tag you follow — "this is yours".
   Three classes outrank .event-tag.venue and the base .event-tag, so a followed
   venue/city/style lights up regardless of its resting colour. */
.event-tag.fav.followed {
  color: var(--theme-accent-color);
}

.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, alone on its line
   so it reads as the anchor (not one oversized token in a mixed-size row). */
.event-where .venue {
  font-size: var(--font-size-lg);
  font-weight: bold;
}

/* City / canton: a quiet metadata line beneath the venue. Small + muted so it
   informs without competing — and still followable (each is a tag). */
.event-where-meta {
  font-size: var(--font-size-small);
  color: var(--theme-fg-muted);
}

.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 AND full foreground colour
   so they assert a clear tier above the muted, regular-weight subtitle and genres
   they sit between, without adding another font size to the row. The fg colour
   lives on the tags themselves (not the container) so it beats the base .event-tag
   muted; a followed style still wins to accent via .event-tag.fav.followed. */
.event-styles {
  font-weight: bold;
}

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

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

/* A genre matched by the active free-text query. Emphasise it so it stands out
   from its muted siblings — but stay in the text vocabulary (un-muted + bold),
   never the accent colour, which in this UI means "interactive/clickable". The
   match is information, not a link. */
.event-genres .genre.active {
  color: var(--theme-fg-color);
  font-weight: bold;
}

.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. It's now the
   sole "you can follow this" signal (colour no longer says it), so it stays
   visible — mobile-first, no hover to hide behind. */
.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. */
.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;
}

/* Not-yet-followed: a faint outline heart — present enough to be discoverable and
   tappable on touch, quiet enough not to clutter the row. */
.event-tag.fav:not(.followed) .fav-heart {
  opacity: 0.4;
}

/* Followed: solid favorite-coloured heart at full strength, so your follows are
   the only thing that stands out. */
.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);
}