.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }

.day h2 { font-family: var(--font-hand); font-weight: 400; font-size: 22px; margin: 22px 0 8px; }
.day h2 .count { color: var(--muted); font-size: 17px; }
.day h2 .count { font-weight: 400; }
.events { list-style: none; margin: 0; padding: 0; background: var(--panel); border: var(--o); border-radius: 12px; box-shadow: 4px 4px 0 var(--ink); overflow: hidden; }
.ev { display: grid; grid-template-columns: 76px 1fr; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--line); }
.ev:first-child { border-top: 0; }
.ev .time { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 14px; }
.ev .time small { display: block; font-weight: 400; color: var(--muted); font-size: 12px; }
.ev .title { font-weight: 600; color: var(--text); text-decoration: none; }
.ev a.title:hover { color: var(--red-ink); text-decoration: underline; }
.ev .meta { color: var(--muted); font-size: 13px; margin-top: 2px; }
.ev .tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; margin-right: 6px; }
.ev .tag.sports { color: var(--red-ink); }
.ev .tag.arts { color: var(--good-ink); }
.ev .tag.community { color: var(--warn-ink); }
.ev.away { opacity: 0.75; }
.empty { padding: 14px; color: var(--muted); }
.sources { margin-top: 28px; }

@media (max-width: 720px) {
  /* Each event becomes a full-width row you can hit with a thumb; the title
     link used to be 18px tall, which is a target only a mouse can use. */
  .ev { grid-template-columns: 58px 1fr; gap: 10px; padding: 10px 12px; }
  .ev .title { display: block; padding: 8px 0; min-height: 44px; }
  .ev .tag { font-size: 12px; }
  .ev .meta { font-size: 13px; }
  .ev .time { font-size: 13px; }
  .ev .time small { font-size: 12px; }
}

#submit-event { margin-bottom: 1.5rem; padding: 1rem; }
#submit-event summary { cursor: pointer; font-weight: bold; }
#event-form { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1rem; margin-top:1rem; }
#event-form label { display:grid; gap:.35rem; }
#event-form input, #event-form select, #event-form textarea { width:100%; padding:.6rem; font:inherit; }
#event-message { grid-column:1/-1; }

/* Community contributors wear a small newspaper press credential. */
.event-contributor { --credit:#b7793e; position:relative; display:flex; align-items:center; flex-wrap:wrap; gap:10px; width:fit-content; max-width:100%; margin-top:12px; padding:9px 12px; border:1.5px solid var(--credit); border-radius:12px; background:linear-gradient(120deg,transparent,color-mix(in srgb,var(--credit) 14%,transparent)); box-shadow:2px 2px 0 color-mix(in srgb,var(--credit) 35%,transparent); }
.event-contributor.silver { --credit:#789099; }
.event-contributor.gold { --credit:#b68b24; }
.event-contributor-avatar { position:relative; display:grid; place-items:center; flex:0 0 44px; width:44px; height:44px; border:2px solid var(--credit); border-radius:50%; background:var(--panel); box-shadow:0 0 0 3px color-mix(in srgb,var(--credit) 15%,transparent); }
.event-avatar { display:grid; place-items:center; width:40px; height:40px; font-size:27px; }
.event-avatar img { width:100%; height:100%; object-fit:contain; border-radius:50%; }
.event-contributor-copy { display:grid; min-width:0; overflow-wrap:anywhere; }
.event-contributor-copy small { font-size:10px; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); }
.event-contributor-copy strong { font-size:14px; }
.event-contributor-stats { font-size:11px; color:var(--muted); }
.event-contributor-badge { display:inline-flex; gap:4px; align-items:center; padding:5px 8px; border:1px dashed var(--credit); border-radius:5px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.event-contributor-badge > span { font-size:17px; color:var(--credit); animation:contributor-spark 2s ease-in-out 2; }
@keyframes contributor-spark { 50% { transform:scale(1.2) rotate(25deg); } }
@media (prefers-reduced-motion:reduce) { .event-contributor-badge > span { animation:none; } }

.ev[data-slide-card] { display:block; }
.event-summary { display:grid; grid-template-columns:76px minmax(0,1fr); gap:12px; }
.event-expand-hint { margin-top:10px; color:var(--muted); }
.event-slide-body { margin-left:88px; }
@media(max-width:600px) { .event-summary { grid-template-columns:58px minmax(0,1fr); gap:10px; } .event-slide-body { margin-left:0; } }

/* Event cards open a compact detail sheet; official links stay inside it. */
.ev:has(.event-card) { display:block; padding:0; }
.event-card { display:grid; grid-template-columns:76px minmax(0,1fr); align-items:start; gap:12px; width:100%; padding:16px; text-align:left; background:transparent; color:var(--ink); border:0; border-radius:12px; box-shadow:none; font:inherit; cursor:pointer; }
.event-card:hover { background:color-mix(in srgb,var(--good) 6%,var(--paper)); transform:none; box-shadow:none; }
.event-card:focus-visible { outline:3px solid var(--good); outline-offset:2px; }
.event-card-copy { display:grid; gap:4px; min-width:0; overflow-wrap:anywhere; }
.event-card .event-expand-hint { margin-top:7px; }
.ev > .event-contributor { margin:0 16px 14px; }
.tonight-event-dialog { width:min(520px,calc(100vw - 28px)); padding:24px; }
.event-dialog-heading { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.event-dialog-heading .kicker { margin:0; }
.tonight-event-dialog h2 { margin:14px 0 20px; font-size:clamp(24px,5vw,32px); line-height:1.15; overflow-wrap:anywhere; }
.event-facts { margin:0; display:grid; gap:14px; }
.event-facts > div { display:grid; grid-template-columns:76px minmax(0,1fr); gap:12px; }
.event-facts dt { font-size:12px; color:var(--ink-soft); padding-top:2px; }
.event-facts dd { margin:0; font-size:14px; overflow-wrap:anywhere; line-height:1.5; }
.event-facts small { display:block; color:var(--ink-soft); font-size:11px; margin-top:4px; }
.event-description { white-space:pre-line; line-height:1.6; font-size:14px; overflow-wrap:anywhere; margin:20px 0; }
.event-attendance-box { margin-top:20px; padding:16px; border:1px solid var(--line); border-radius:14px; background:var(--paper-2); }
.event-attendance-box h3 { margin:0 0 8px; }
.tonight-event-dialog .actions { flex-wrap:wrap; }
@media(max-width:600px) { .event-card { grid-template-columns:58px minmax(0,1fr); gap:10px; padding:14px; }.tonight-event-dialog { padding:18px; }.event-facts > div { grid-template-columns:58px minmax(0,1fr); }.event-attendance-box .btn { width:100%; } }
