/* ==========================================================================
   events.css — EVENTS (js/events.js) and its editor (staff/events.html)
   --------------------------------------------------------------------------
   The calendar sits on the menu's paper, in the menu's own voice: Bitter at
   real reading sizes, burnt ink, hard dark edges, no rounded anything. Each
   kind of night has a colour (--k, set from js/events.js KINDS, the one
   place the colours live) for its marker bar and its little pixel icon.

   1. What's on soon
   2. The month grid (and, below 640px, the list that replaces it)
   3. A day's detail and the event cards
   4. The staff editor (staff/events.html)
   ========================================================================== */

.ev {
  max-width: 1680px;
  margin: 0 auto;
  color: var(--paper-ink);
  font-family: var(--font-menu);
}
/* The room's headings carry Rye and a hard oxblood shadow; none of that on
   the paper (the panel only resets h1 and h2). */
.ev :is(h2, h3, h4),
.sev :is(h1, h2, h3, h4) { text-shadow: none; will-change: auto; }
.ev__h {
  margin: 0 0 10px;
  color: var(--paper-dim);
  font: 700 13.5px/1.3 var(--font-menu);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.ev-note { margin: 0; color: var(--paper-dim); font: 16px/1.5 var(--font-menu); }
.ev-note--bad { color: var(--oxblood); font-weight: 700; }
.ev-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--burn);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.ev-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  background: var(--burn);
  color: var(--paper-hi);
  font: 700 11px/1.5 var(--font-menu);
  letter-spacing: .12em;
  text-transform: uppercase;
  vertical-align: 3px;
}
.ev-ico { flex: none; image-rendering: pixelated; }
.ev-nowrap { white-space: nowrap; }

/* A lit-up event: where a share link or a "what's on soon" line lands. */
.ev-is-lit { animation: ev-lit 2.4s ease-out; }
@keyframes ev-lit {
  0%, 40% { background-color: rgba(232, 163, 23, .45); }
  100% { background-color: transparent; }
}
@media (prefers-reduced-motion: reduce) { .ev-is-lit { animation: none; outline: 3px solid var(--burn); } }


/* ==========================================================================
   1. WHAT'S ON SOON
   First on the page, in plain words: tonight, tomorrow, Saturday. Each line
   takes you to its day below.
   ========================================================================== */
.ev-soon { margin: 0 0 22px; }
.ev-soon__list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ev-soon__list > li { flex: 1 1 240px; max-width: 440px; }
.ev-soon__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 12px;
  width: 100%;
  height: 100%;
  min-height: 58px;
  padding: 8px 14px 8px 12px;
  border: 2px solid var(--paper-rule);
  border-left: 6px solid var(--k, var(--paper-rule));
  background: rgba(255, 255, 255, .35);
  color: var(--burn);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.ev-soon__item:hover { border-color: var(--edge); border-left-color: var(--k, var(--edge)); background: rgba(232, 163, 23, .18); }
.ev-soon__item .ev-ico { grid-row: span 2; }
.ev-soon__when {
  color: #6E4A12;
  font: 700 12.5px/1.3 var(--font-menu);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.ev-soon__what { font: 600 18px/1.3 var(--font-menu); }
.ev-soon__item.is-off .ev-soon__what { color: var(--paper-dim); }


/* ==========================================================================
   2. THE MONTH
   Beside the day's detail when there's room; the detail drops under it on
   a narrower sheet. Below 640px the grid gives way to a list of the
   month's dates (a seven-column calendar on a 390px screen is unreadable).
   ========================================================================== */
.ev-main { display: grid; gap: 28px; }
@container (min-width: 1000px) {
  .ev-main { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
  .ev-detail { position: sticky; top: 0; }
}

.ev-cal { container-type: inline-size; }
.ev-cal__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin: 0 0 12px;
}
.ev-cal__month {
  min-width: 9.2em;
  margin: 0;
  color: var(--burn);
  font: 400 30px/1.2 var(--font-display);
  text-align: center;
}
.ev-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border: 2px solid var(--edge);
  background: linear-gradient(var(--paper-hi), #CDB78E);
  color: var(--burn);
  font: 700 13px/1 var(--font-menu);
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}
.ev-nav:hover { background: linear-gradient(#EAD9B4, #D8C298); }
.ev-nav--now { margin-left: auto; }
.ev-cal__status:empty { display: none; }
.ev-cal__status { margin: 0 0 10px; }

.ev-grid {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}
.ev-grid th {
  padding: 6px 8px;
  border-bottom: 2px solid var(--paper-rule);
  color: var(--paper-dim);
  font: 700 12.5px/1.3 var(--font-menu);
  letter-spacing: .14em;
  text-align: left;
  text-transform: uppercase;
}
.ev-cell {
  height: 90px;
  padding: 0;
  border: 1px solid rgba(80, 60, 35, .35);
  vertical-align: top;
}
.ev-cell--out { background: rgba(160, 130, 90, .12); }

/* A day: its number (today's filled in), then what's on. */
.ev-day {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  align-content: start;
  gap: 4px 6px;
  width: 100%;
  height: 100%;
  min-height: 90px;
  padding: 5px 6px 7px;
  border: 0;
  background: transparent;
  color: var(--burn);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.ev-day:hover { background: rgba(232, 163, 23, .14); }
.ev-day:focus-visible { outline-offset: -4px; }
.ev-day.is-sel { background: rgba(232, 163, 23, .26); box-shadow: inset 0 0 0 3px var(--burn); }
.ev-day__n {
  justify-self: start;
  min-width: 28px;
  padding: 1px 5px;
  font: 700 16px/1.3 var(--font-menu);
  text-align: center;
}
.ev-day.is-today .ev-day__n { background: var(--burn); color: var(--paper-hi); }
.ev-day__today {
  align-self: center;
  color: #6E4A12;
  font: 700 11px/1.2 var(--font-menu);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.ev-day__evs {
  display: flex;
  flex-direction: column;
  gap: 3px;
  grid-column: 1 / -1;
  min-width: 0;
}
/* Past days dimmed: still there to look back on, clearly gone. */
.ev-day.is-past { color: rgba(42, 22, 8, .55); }
.ev-day.is-past .ev-day__evs { opacity: .55; }

.ev-chip {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  min-width: 0;
  padding: 2px 4px 2px 3px;
  border-left: 3px solid var(--k, var(--paper-rule));
  background: rgba(255, 255, 255, .4);
  font: 600 13.5px/1.25 var(--font-menu);
}
/* a long name gets two lines, then an ellipsis */
.ev-chip__t {
  display: -webkit-box;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  overflow-wrap: break-word;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.ev-chip .ev-ico { margin-top: 2px; }
.ev-chip__at { flex: none; color: var(--paper-dim); font-size: 12.5px; font-weight: 400; }
.ev-chip.is-off .ev-chip__t { text-decoration: line-through; }
.ev-chip--more { border-left-color: transparent; background: none; color: var(--paper-dim); font-style: italic; font-weight: 400; }

/* Times go first when the days get narrow: the name matters more. */
@container (max-width: 1000px) {
  .ev-chip__at { display: none; }
}
/* A narrow grid keeps the markers and drops the names (they're in each
   day's name for screen readers, and in its detail). */
@container (max-width: 720px) {
  .ev-cell, .ev-day { height: 72px; min-height: 72px; }
  .ev-day__today { display: none; }
  .ev-day__evs { flex-flow: row wrap; gap: 3px; }
  .ev-chip { padding: 0; border: 0; background: none; }
  .ev-chip__t, .ev-chip__at { display: none; }
  .ev-chip--more { font-size: 12px; }
}

.ev-list { display: none; margin: 0; padding: 0; list-style: none; }
.ev-list__day { margin: 0 0 22px; }
.ev-list__day.is-past { opacity: .6; }
.ev-list__h {
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--paper-rule);
  color: var(--burn);
  font: 700 17px/1.3 var(--font-menu);
}
.ev-list__h:focus { outline: none; }
.ev-list__h:focus-visible { outline: 4px solid var(--burn); outline-offset: 2px; }

@media (max-width: 640px) {
  .ev-grid { display: none; }
  .ev-list { display: block; }
  .ev-main .ev-detail { display: none; }        /* the list holds each day's detail */
  .ev-cal__month { min-width: 0; flex: 1; font-size: 24px; }
  .ev-nav--now { margin-left: 0; }
  .ev-soon__list > li { flex-basis: 100%; max-width: none; }
}


/* ==========================================================================
   3. A DAY, AND ITS EVENTS
   The day's card matches ABOUT's "Find us" box; each event in it has its
   kind's bar down the left.
   ========================================================================== */
.ev-detail {
  padding: 18px 20px 20px;
  border: 4px solid var(--edge);
  background: linear-gradient(var(--paper-hi), #CDB78E);
  box-shadow: inset 0 0 0 2px var(--paper-sh);
}
.ev-detail__day {
  margin: 0 0 12px;
  color: var(--burn);
  font: 700 20px/1.3 var(--font-menu);
}
.ev-detail__day:focus { outline: none; }
.ev-detail__day:focus-visible { outline: 4px solid var(--burn); outline-offset: 2px; }
.ev-detail > .ev-note--bad { margin-bottom: 12px; }

.ev-occs { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.ev-occ {
  padding: 10px 12px 12px 14px;
  border-left: 4px solid var(--k, var(--paper-rule));
  background: rgba(255, 255, 255, .35);
  font: 16px/1.45 var(--font-menu);
}
.ev-occ p { margin: 0; }
.ev-occ__kind {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #6E4A12;
  font: 700 12px/1.3 var(--font-menu);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.ev-occ__title { margin: 4px 0 2px; color: var(--burn); font: 700 19px/1.3 var(--font-menu); }
.ev-occ__title:focus { outline: none; }
/* A long word with no spaces wraps instead of pushing out of the day card. */
.ev-occ__title, .ev-occ__note, .ev-occ__cover { overflow-wrap: anywhere; min-width: 0; }
.ev-occ.is-off .ev-occ__title { text-decoration: line-through; text-decoration-thickness: 2px; }
.ev-occ__when b { color: var(--burn); font-weight: 700; }
.ev-occ__rep { color: var(--paper-dim); }
.ev-occ__cover { color: var(--burn); font-weight: 700; }
.ev-occ__note { max-width: 46ch; margin-top: 4px !important; color: var(--paper-dim); font: italic 15px/1.5 var(--font-menu); }
.ev-occ__moved, .ev-occ__results { color: var(--paper-dim); font-size: 15px; }
.ev-occ__results a { color: var(--burn); }
.ev-occ__flags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px !important; }
.ev-flag {
  padding: 2px 6px;
  border: 2px solid var(--edge);
  color: var(--burn);
  font: 700 11.5px/1.3 var(--font-menu);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.ev-flag--off { background: var(--oxblood); color: var(--bone); }
.ev-occ__acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ev-occ__said:empty { display: none; }
.ev-occ__said { margin-top: 6px !important; color: var(--burn); font-size: 15px; }
.ev-copy {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 6px;
  border: 2px solid var(--paper-rule);
  background: var(--paper-hi);
  color: var(--burn);
  font: 14px/1.4 ui-monospace, Consolas, monospace;
}

.ev-btn {
  min-height: 40px;
  padding: 8px 12px;
  border: 2px solid var(--edge);
  background: #C9B289;
  color: var(--burn);
  font: 700 12.5px/1 var(--font-menu);
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}
.ev-btn:hover { background: #D6C29B; }
.ev-btn--gold { background: linear-gradient(#D0A94C, #B08A3C); }
.ev-btn--gold:hover { background: linear-gradient(#DDB65A, #BE9544); }
.ev-btn--bad { background: var(--oxblood); color: var(--bone); }
.ev-btn--bad:hover { background: var(--red-bright); }
.ev-btn:disabled { opacity: .55; cursor: default; }



/* ==========================================================================
   4. THE STAFF EDITOR (staff/events.html)
   Its own page, the same barnwood and paper: the month on the left, the
   chosen day on the right with its events and the add / edit form.
   ========================================================================== */
.sev {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 16px clamp(8px, 3vw, 48px) 24px;
  background:
    repeating-linear-gradient(90deg, #4A3323 0 28px, var(--wood) 28px 32px, #44301F 32px 60px, var(--edge) 60px 64px);
  color: var(--paper-ink);
  font-family: var(--font-menu);
}
.sev__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding: 8px 16px;
  border: 4px solid var(--edge);
  background: linear-gradient(#543924, var(--wood));
  box-shadow: inset 0 4px 0 #6B4A2F;
  color: var(--bone);
}
.sev__title { margin: 0 auto 0 0; text-shadow: none; will-change: auto; }
.sev__who { margin: 0; font: 15px/1.4 var(--font-menu); }
.sev__bar a,
.sev__bar button {
  padding: 10px 14px;
  border: 4px solid var(--edge);
  background: linear-gradient(#5C4029, #42301F);
  color: var(--bone);
  font: 700 13px/1 var(--font-menu);
  letter-spacing: .12em;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
}
.sev__bar a:hover,
.sev__bar button:hover { background: linear-gradient(#6E4E33, #4E3825); }
.sev__sheet {
  flex: 1;
  margin-top: 16px;
  padding: 24px clamp(12px, 2.5vw, 36px) 40px;
  border: 4px solid var(--edge);
  background:
    radial-gradient(120% 90% at 20% 0%, var(--paper-hi), transparent 60%),
    repeating-linear-gradient(0deg, rgba(150, 120, 80, .05) 0 4px, transparent 4px 8px),
    var(--paper);
  box-shadow: inset 0 0 0 4px var(--paper-sh);
  container-type: inline-size;
}
.sev__sheet :focus-visible { outline-color: var(--burn); }
.sev__rule {
  max-width: 80ch;
  margin: 0 0 20px;
  padding: 10px 14px;
  border-left: 4px solid #6E4A12;
  background: rgba(255, 255, 255, .3);
  color: var(--paper-ink);
  font: 15.5px/1.5 var(--font-menu);
}
.sev .ev-main { max-width: 1680px; }
@container (min-width: 1000px) {
  .sev .ev-main { grid-template-columns: minmax(0, 1fr) 420px; }
}
.sev-day__add { width: 100%; margin-top: 14px; }
.sev-occ__acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.sev-confirm {
  margin-top: 10px;
  padding: 10px 12px;
  border: 2px solid var(--edge);
  background: rgba(255, 255, 255, .45);
}
.sev-confirm p { margin: 0 0 8px !important; font-weight: 700; }
.sev-confirm .sev-occ__acts { margin-top: 0; }

/* The form: what, name, when, and how it repeats. */
.sev-form {
  display: grid;
  gap: 14px;
  margin-top: 16px;
  padding: 16px;
  border: 4px solid var(--edge);
  background: var(--paper-hi);
}
.sev-form__h { margin: 0; color: var(--burn); font: 700 19px/1.3 var(--font-menu); }
.sev-form__h:focus { outline: none; }
.sev-form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.sev-form legend,
.sev-form label > span:first-child,
.sev-lbl {
  display: block;
  margin: 0 0 4px;
  padding: 0;
  color: var(--paper-dim);
  font: 700 12.5px/1.3 var(--font-menu);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.sev-form input[type="text"],
.sev-form input[type="date"],
.sev-form input[type="time"],
.sev-form select,
.sev-form textarea {
  width: 100%;
  min-height: 42px;
  padding: 8px 10px;
  border: 2px solid var(--paper-rule);
  border-radius: 0;
  background: #FFF8E8;
  color: var(--burn);
  font: 16px/1.3 var(--font-menu);
}
.sev-form textarea { min-height: 72px; resize: vertical; }
.sev-form input:focus-visible,
.sev-form select:focus-visible,
.sev-form textarea:focus-visible { outline: 3px solid var(--burn); outline-offset: 0; border-color: var(--edge); }
.sev-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px; }
.sev-hint { margin: 4px 0 0; color: var(--paper-dim); font: italic 14px/1.4 var(--font-menu); }

/* The kind picker and the scope choice: big radio chips. */
.sev-kinds,
.sev-scope { display: flex; flex-wrap: wrap; gap: 6px; }
.sev-chip { position: relative; }
.sev-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.sev-chip span {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 6px 10px 6px 8px;
  border: 2px solid var(--paper-rule);
  border-left: 5px solid var(--k, var(--paper-rule));
  background: rgba(255, 255, 255, .5);
  color: var(--burn);
  font: 600 15px/1.2 var(--font-menu);
}
.sev-chip input:checked + span { border-color: var(--edge); border-left-color: var(--k, var(--edge)); background: rgba(232, 163, 23, .35); box-shadow: inset 0 0 0 1px var(--edge); }
.sev-chip input:focus-visible + span { outline: 3px solid var(--burn); outline-offset: 2px; }
.sev-check { display: flex; align-items: flex-start; gap: 8px; font: 15.5px/1.4 var(--font-menu); }
.sev-check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--burn); }
.sev-err:empty { display: none; }
.sev-err { margin: 0; padding: 8px 10px; border-left: 4px solid var(--oxblood); background: rgba(140, 28, 19, .1); color: var(--oxblood); font: 700 15px/1.4 var(--font-menu); }
.sev-form__foot { display: flex; flex-wrap: wrap; gap: 8px; }
.sev-form__foot .ev-btn--gold { flex: 1; min-height: 46px; }
.sev-said:empty { display: none; }
.sev-said { margin: 12px 0 0; padding: 8px 10px; border-left: 4px solid #3F5A2A; background: rgba(63, 90, 42, .12); color: var(--burn); font: 700 15px/1.4 var(--font-menu); }

/* The editor keeps the grid at every width (Phil taps a day to add to it). */
.sev .ev-grid { display: table; }
@media (max-width: 640px) {
  .sev .ev-main .ev-detail { display: block; }
  .sev__bar { padding: 8px; }
}

/* On a phone (css/mobile.css's breakpoint: the panel is the whole screen):
   SHARE and ADD TO CALENDAR are 44px targets. The month is already a list
   under 640px (above). */
@media (max-width: 1023px), (max-width: 1151px) and (max-height: 679px), (max-height: 500px) {
  .panel .ev-btn { min-height: 44px; }
}