/* Events (member request, Ethan: "an events tab at the top of the screen, like Partiful"). See DESIGN.md "Events".
   The tab is a cell of the section bar (style.css .tabbar); each event's date is a little felt board of its own. */

.chat > .events, .chat > .ev-bar { position: relative; z-index: 1; }

/* ---------- the list ---------- */
.events { flex: 1; overflow-y: auto; padding: 14px 14px 8px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; background: #fff; }
.ev-bar { flex: none; padding: 8px 12px calc(10px + var(--sab)); background: #fff; }
.ev-new { width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 17px; }
.ev-new svg { width: 20px; height: 20px; }

/* the date: a felt board with white letters */
.ev-date { flex: none; width: 62px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px 0 9px;
  background: var(--felt); color: var(--letter); font-family: var(--board); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; text-shadow: 0 1px 0 #0006; border-radius: 3px; }
.ev-date .wd, .ev-date .mo { font-size: 14px; line-height: 1; opacity: .85; padding-left: .12em; }
.ev-date .dn { font-size: 34px; line-height: .95; letter-spacing: .02em; }

.evc { margin: 0 0 14px; background: #fff; border: 1.5px solid var(--rule); border-radius: 4px; padding: 12px; scroll-margin-top: 12px; }
.evc.past { opacity: .62; }
.evc.flash { animation: ev-flash 1.4s ease-out; }
@keyframes ev-flash { 0%, 30% { border-color: var(--red); box-shadow: 0 0 0 2px var(--red); } 100% { box-shadow: 0 0 0 0 transparent; } }
.evc-top { display: flex; gap: 12px; align-items: flex-start; }
.evc-head { flex: 1; min-width: 0; }
.evc h3 { margin: 0 0 4px; font-size: 20px; line-height: 1.2; overflow-wrap: anywhere; }
.ev-soon { display: block; color: var(--red); font-weight: 700; font-size: 14.5px; line-height: 1.2; margin: 1px 0 2px; }
.ev-meta { display: flex; gap: 6px; align-items: flex-start; font-size: 15px; line-height: 1.35; color: var(--ink-2); margin-top: 2px; }
.ev-meta svg { flex: none; width: 16px; height: 16px; margin-top: 1.5px; color: var(--red); }
.ev-meta a { color: inherit; text-decoration-color: var(--rule); text-underline-offset: 2px; overflow-wrap: anywhere; }
.ev-host { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 14.5px; color: var(--ink-2); }
.ev-host b { color: var(--c, var(--ink)); }
.ev-host .mface { width: 26px; height: 26px; margin: -3px 0; }
.evc .mface img, .evc .mface svg, .ev-msg .mface img, .ev-msg .mface svg { display: block; width: 100%; height: 100%; }
.ev-details { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--rule); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 16px; }

/* Going / Maybe / Can't go */
.ev-rsvp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 12px; }
.ev-r { min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 7px; border: 0; background: var(--note); color: var(--note-ink); font-weight: 700; font-size: 15.5px; padding: 0 6px; }
.ev-r b { font: 600 17px/1 var(--board); letter-spacing: .04em; opacity: .75; }
.ev-r.on { background: var(--red); color: #fff; }
.ev-r.on b { opacity: 1; }
.ev-r[data-rsvp="no"].on { background: var(--ink); }

/* who's coming */
.ev-guests { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 10px; min-height: 40px; padding: 2px 0; border: 0; background: none; text-align: left; font-size: 15px; color: var(--ink-2); }
.ev-guests .grow { flex: 1; min-width: 0; }
.ev-faces { display: flex; flex: none; }
.ev-faces:empty { display: none; }
.ev-face { width: 30px; height: 30px; margin-right: -8px; }
.ev-face:last-child { margin-right: 0; }
.ev-face .mface { display: block; width: 100%; height: 100%; }
.ev-face.maybe { opacity: .55; }
.ev-more { flex: none; color: var(--red); font-weight: 700; font-size: 14.5px; }
.ev-list { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--rule); }
.ev-gl + .ev-gl { margin-top: 10px; }
.ev-gh { font-weight: 700; font-size: 14.5px; margin-bottom: 4px; }
.ev-gh span { color: var(--ink-3); font-weight: 400; }
.ev-gp { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.ev-gu { display: inline-flex; align-items: center; gap: 5px; font-size: 15px; font-weight: 700; color: var(--c, var(--ink)); }
.ev-gu .mface { width: 28px; height: 28px; }

.ev-own { display: flex; gap: 18px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--rule); }
.ev-link { border: 0; background: none; padding: 6px 0; min-height: 36px; color: var(--ink-2); font-weight: 700; font-size: 15px; text-decoration: underline; text-underline-offset: 3px; }
.ev-link.danger { color: var(--danger); }

.ev-pastbtn { display: block; width: 100%; margin: 6px 0 14px; min-height: 44px; border: 0; background: var(--note); color: var(--note-ink); font-weight: 700; font-size: 15px; }

.ev-empty { display: flex; gap: 16px; align-items: center; padding: 24px 6px; color: var(--ink-2); }
.ev-empty p { margin: 0; max-width: 34ch; }
.ev-empty b { color: var(--ink); }
.ev-empty-date { flex: none; width: 62px; height: 78px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 2px dashed var(--felt); border-radius: 3px; color: var(--felt); font: 600 34px/1 var(--board); }
.ev-empty-date .wd, .ev-empty-date .mo { font-size: 12px; }

/* ---------- the card a new event drops in the chat ---------- */
.ev-msg { margin: 14px 0; max-width: min(92%, 380px); }
.ev-msg-who { font-size: 13.5px; color: var(--ink-2); margin: 0 0 4px 2px; }
.ev-mini-card { border: 1.5px solid var(--rule); border-radius: 4px; background: #fff; padding: 10px; }
.ev-mini { display: flex; gap: 12px; align-items: center; width: 100%; padding: 0; border: 0; background: none; text-align: left; color: var(--ink); }
.ev-mini .grow { flex: 1; min-width: 0; }
.ev-mini b { display: block; font-size: 17px; line-height: 1.25; overflow-wrap: anywhere; }
.ev-mini span:not(.ev-soon):not(.wd):not(.dn):not(.mo) { display: block; font-size: 14.5px; color: var(--ink-2); margin-top: 2px; line-height: 1.3; }
.ev-mini .ev-date { width: 54px; padding: 6px 0 7px; }
.ev-mini .ev-date .dn { font-size: 28px; }
.ev-mini .ev-date .wd, .ev-mini .ev-date .mo { font-size: 12.5px; }
.ev-mini-card .ev-rsvp { margin-top: 10px; }
.ev-mini-card .ev-r { min-height: 40px; font-size: 15px; }
.ev-mini.gone { border: 1.5px dashed var(--rule); border-radius: 4px; padding: 10px 12px; }
.ev-msg.cancelled .ev-mini b { text-decoration: line-through; text-decoration-color: var(--red); }
.ev-msg.cancelled .ev-soon { color: var(--ink-2); }

/* ---------- post / edit sheet ---------- */
.ev-form { display: grid; gap: 12px; margin-top: 14px; }
.ev-form label { display: flex; flex-direction: column; gap: 5px; min-width: 0; font-weight: 700; font-size: 15px; }
.ev-form .ev-opt { font-weight: 400; color: var(--ink-3); }
.ev-form .field { font-size: 17px; font-weight: 400; }
.ev-form textarea.field { resize: vertical; min-height: 84px; line-height: 1.4; }
.ev-when { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 10px; align-items: start; }
.ev-when .d { grid-column: 1 / -1; }
.ev-form input[type="date"], .ev-form input[type="time"] { width: 100%; height: 50px; -webkit-appearance: none; appearance: none; min-height: 50px; display: block; text-align: left; }
.ev-form input::-webkit-date-and-time-value { text-align: left; }
.ev-form .btn { min-height: 50px; font-size: 17px; }
.ev-form .err:empty { min-height: 0; }

@media (prefers-reduced-motion: reduce) { .evc.flash { animation: none; border-color: var(--red); } }

/* ---------- the billboard (member request, Ethan: "a billboard in the Bii lobby that has all of the functionality of the
   events tab") ----------
   Tapping the Lobby's billboard opens the same list under the section bar like the bookshelf: the lodge's black header
   with "Coming up" in white letterboard caps, a felt strip of the board's marquee bulbs under it, then the cards on white. */
.evb {
  position: fixed; left: 0; right: 0; top: var(--app-top, 0px); height: var(--app-h); z-index: 30; display: flex; flex-direction: column;
  background: #000; opacity: 0; transition: opacity .18s;
  /* paper and ink, dark mode too (like the chat) */
  --ink: #0b1a2e; --ink-2: #4a5f7d; --ink-3: #8694a9; --rule: #d2dcec; --note: #e6eeff; --note-ink: #0d254a; --paper: #fff; --red: #1259d3;
  color: var(--ink);
}
.evb.in { opacity: 1; }
body.tabs-on .evb { top: calc(var(--app-top, 0px) + var(--tabs-y, 0px)); height: calc(var(--app-h) - var(--tabs-y, 0px)); max-width: 760px; margin: 0 auto; }
body.in-board { background: #000; }
.evb :focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.evb-top { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr) minmax(0, 1fr); align-items: center; gap: 8px;
  padding: calc(8px + env(safe-area-inset-top)) 10px 8px; background: #0d0a09; }
body.tabs-on .evb-top { padding-top: 8px; }
.evb-back { justify-self: start; min-height: 40px; padding: 0 14px; border: 0; background: #141b2a; color: #fff; font-weight: 700; font-size: 15px; }
.evb-title { margin: 0; text-align: center; color: #f5f8ff; font: 600 24px/1 var(--board); text-transform: uppercase; letter-spacing: .14em; padding-left: .14em; white-space: nowrap; }
/* the marquee: warm bulbs on the felt, lit in turn */
.evb-bulbs { flex: none; height: 14px; background-color: var(--felt, #1150b8);
  background-image: radial-gradient(circle at 50% 50%, #ffe7c4 0 3px, rgba(255, 196, 150, .35) 3.5px, transparent 5.5px);
  background-size: 18px 14px; background-position: 0 0; }
@media (prefers-reduced-motion: no-preference) {
  .evb-bulbs { animation: evb-chase .84s steps(1) infinite; }
  @keyframes evb-chase { 50% { background-position: 9px 0; } }
}
.evb-list { flex: 1; min-height: 0; }
.evb-bar { padding-bottom: calc(10px + var(--sab)); }