/* === Venue announcements: posts and events, and their questions (MMB-25397, Ed TG 18002) ===
   js/venue-announcements-view.js draws them; js/venue-card.js (the card's list), js/venue-announcements.js (an
   announcement's questions sheet) and js/venue-announce.js (the owner's composer) wire them. They share the card's
   Reviews look (css/v084-prototype.css: .vf-list, .vf-meta, .vf-body, .vf-confirm, .vf-error...).

   The card's greys, with the app's one accent, its olive (--olive, css/v2-theme.css), where the eye should land
   (Ed TG 18031: "a pop … within the app brand"): an event's solid EVENT tag, its calendar chip and the dot that
   pulses while it's on, and the owner's answers, edged and tagged in olive as well as bold. Titles in the app's
   display face. Nothing else takes the olive: focus rings are white, hovered buttons stay white, red is only for an
   error. Every tap target is 44px tall. Loaded after modal-v2.css and places-v2.css, so at equal specificity these
   out-rank modal-v2.css's olive focus rings, fields and radios, and the theme's olive .btn hover.
   tests/venue-announcements-chrome.test.js measures it in Chrome. */

/* --- The card's list ------------------------------------------------------------------------------------ */

/* The owner's bar above it (Manage, + Announce, Star): each button as wide as its words, on one line, so
   "+ Announce", the way into the composer, doesn't break in two at 390px (v084-prototype.css gives each a third of
   the bar); on a phone too narrow for all three, they wrap as whole buttons. */
.venue-owner-banner { flex-wrap: wrap; }
.venue-owner-banner .btn { flex: 1 1 auto; white-space: nowrap; }

/* One button (its title) over the whole item: a tap anywhere on it opens its questions. */
.venue-announcement { position: relative; }
.venue-announcement-photo {
  display: block; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  margin: 0 0 8px; border-radius: var(--radius); background: var(--bg-input);
}
.venue-announcement-title { margin: 0; }
.venue-announcement-open {
  display: inline; margin: 0; padding: 0; border: 0; border-radius: 0; background: none;
  color: var(--text-primary); font: inherit; font-family: var(--font-display); font-size: 19px; font-weight: 700;
  line-height: 1.15; letter-spacing: 0.01em; text-transform: none; text-align: left; overflow-wrap: anywhere;
  cursor: pointer;
}
.venue-announcement-open::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius); }
.modal .venue-announcement-open:focus-visible { outline: none; }
.modal .venue-announcement-open:focus-visible::after { outline: 2px solid var(--text-primary); outline-offset: 2px; }
@media (hover: hover) {
  .venue-announcement-open:hover { text-decoration: underline; text-underline-offset: 3px; }
}
/* Its words, three lines on the card; the questions sheet has them all. */
.venue-announcement-body {
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* An event: the solid olive EVENT tag, "On now" in olive after a pulsing dot, and its calendar chip beside it. */
.venue-announcement-tag {
  display: inline-block; padding: 0 6px; border-radius: 3px; background: var(--olive); color: var(--bg);
  font-size: 10px; font-weight: 800; line-height: 16px; letter-spacing: 0.08em; text-transform: uppercase;
  vertical-align: 1px;
}
.vt-announcement[data-phase="ended"] .venue-announcement-tag { background: var(--text-muted); }
.venue-announcement.is-event .vf-meta { margin-top: 3px; color: var(--text-secondary); font-weight: 600; }
.venue-live { color: var(--olive-hi); font-weight: 700; }
.venue-live-dot {
  display: inline-block; width: 8px; height: 8px; margin: 0 6px 1px 1px; border-radius: 50%;
  background: var(--olive); vertical-align: middle; animation: venue-live-pulse 1.6s ease-out infinite;
}
@keyframes venue-live-pulse {
  0% { box-shadow: 0 0 0 0 rgba(164, 174, 144, 0.6); }
  70% { box-shadow: 0 0 0 7px rgba(164, 174, 144, 0); }
  100% { box-shadow: 0 0 0 0 rgba(164, 174, 144, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .venue-live-dot { animation: none; }
}
.venue-announcement-row { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.venue-announcement-text { flex: 1; min-width: 0; }
/* The chip: the month on an olive band, the day large in the display face, the weekday under it. */
.venue-cal {
  flex: none; display: flex; flex-direction: column; align-items: center; box-sizing: border-box; width: 46px;
  overflow: hidden; border: 1px solid var(--olive); border-radius: 8px; background: var(--s1);
  font-family: var(--font-display); font-weight: 700; line-height: 1; text-transform: uppercase; text-align: center;
}
.venue-cal-mon {
  align-self: stretch; padding: 3px 0 2px; background: var(--olive); color: var(--bg);
  font-size: 11px; letter-spacing: 0.1em;
}
.venue-cal-d { padding-top: 4px; font-size: 22px; color: var(--ink-hi); }
.venue-cal-wd { padding: 2px 0 5px; font-size: 10px; letter-spacing: 0.1em; color: var(--ink-mid); }
.venue-cal-lg { width: 56px; border-radius: 10px; }
.venue-cal-lg .venue-cal-mon { font-size: 12px; padding: 4px 0 3px; }
.venue-cal-lg .venue-cal-d { padding-top: 5px; font-size: 28px; }
.venue-cal-lg .venue-cal-wd { font-size: 11px; padding-bottom: 6px; }
.venue-cal.is-ended { border-color: var(--line2); }
.venue-cal.is-ended .venue-cal-mon { background: var(--text-muted); }
.venue-announcement-count { margin: 6px 0 0; font-size: 12px; font-weight: 600; color: var(--text-secondary); }

/* "Show N more" / "Show fewer": a <details>, so it opens with no script. */
.venue-announcements-more { margin: 0; }
.venue-announcements-more > summary {
  display: inline-flex; align-items: center; min-height: 44px; list-style: none; cursor: pointer;
  color: var(--text-primary); font-size: 12px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}
.venue-announcements-more > summary::-webkit-details-marker { display: none; }
.venue-announcements-more .when-open { display: none; }
.venue-announcements-more[open] .when-open { display: inline; }
.venue-announcements-more[open] .when-closed { display: none; }
.venue-announcements-more > .vf-list { border-top: 1px solid var(--border); }
.venue-announcements-more > .vf-list > .vf-item:first-child { padding-top: 10px; }
.modal .venue-announcements-more > summary:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 2px; }

/* --- Shared by both sheets ------------------------------------------------------------------------------ */

.modal-sheet.venue-thread-sheet,
.modal-sheet.venue-announce-sheet { max-width: 100%; }
.venue-thread-sheet [hidden],
.venue-announce-sheet [hidden] { display: none !important; }
.venue-thread-sheet *:focus-visible,
.venue-announce-sheet *:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 2px; }
.venue-thread-sheet .modal-header h2,
.venue-announce-sheet .modal-header h2 { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.venue-thread-sheet .modal-header .icon-btn,
.venue-announce-sheet .modal-header .icon-btn { flex: none; width: 44px; height: 44px; font-size: 18px; }
/* Text buttons: underlined words, like the card's Reviews and Tips, 44px tall. */
.venue-thread-sheet .vf-link,
.venue-announce-sheet .vf-link {
  display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding: 0; border: 0; border-radius: 0;
  background: none; color: var(--text-primary); font: inherit; font-size: 13px; font-weight: 600; letter-spacing: 0;
  text-transform: none; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.venue-thread-sheet .vf-link[disabled],
.venue-thread-sheet .vf-link[aria-disabled="true"] { color: var(--text-muted); cursor: default; }
/* Phones zoom into a box whose text is under 16px when it's tapped: these are 16px. */
.venue-thread-sheet .vf-text,
.venue-announce-sheet .va-input {
  width: 100%; box-sizing: border-box; font-size: 16px; line-height: 1.4;
}
.venue-thread-sheet .vf-text:focus,
.venue-announce-sheet .va-input:focus {
  border-color: var(--text-primary); box-shadow: 0 0 0 1px var(--text-primary); outline: none;
}

/* --- An announcement's questions ------------------------------------------------------------------------ */

.vt { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.vt-announcement { min-width: 0; }
.vt-announcement:focus { outline: none; }
.vt-photo {
  display: block; width: 100%; max-width: 100%; max-height: 60vh; object-fit: contain;
  margin: 0 0 10px; border-radius: var(--radius); background: var(--bg-input);
}
.vt-when { display: flex; align-items: center; gap: 14px; min-width: 0; margin: 0 0 6px; }
.vt-when-text { flex: 1; min-width: 0; }
.vt-kind { margin: 0; font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.vt-range { margin: 4px 0 0; font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--text-primary); }
.vt-announcement .vt-words { font-size: 14px; }
.vt-questions { padding-top: 12px; border-top: 1px solid var(--border); min-width: 0; }
.vt-questions h3 {
  margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase;
  color: var(--text-muted);
}
.vt-questions h3:focus { outline: none; }
.vt-note { margin: 0 0 10px; }
.vt .vf-form { margin: 0 0 12px; }
.vt .vf-text { min-height: 84px; resize: vertical; }
.vt .vf-form-actions { gap: 8px 16px; margin-top: 10px; }
.vt .vf-submit {
  min-height: 44px; padding: 10px 18px; border: 0; border-radius: var(--radius);
  background: var(--text-primary); color: var(--bg-primary); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.vt .vf-submit[disabled] { opacity: 0.6; cursor: progress; }
.vt-question { padding: 10px 0; border-top: 1px solid var(--border); min-width: 0; }
.vt-question:first-child { padding-top: 0; border-top: 0; }
.vt-question:focus, .vt-answer:focus { outline: none; }
.vt-answers { list-style: none; margin: 6px 0 0; padding: 0 0 0 12px; border-left: 2px solid var(--line2); }
.vt-answer { padding: 6px 0 0; min-width: 0; }
/* The owner's answer: bold, tagged OWNER in solid olive, on an olive wash with an olive edge that takes the place
   of the thread's grey line beside it, so it stands out of the thread. */
.vt-owner-tag {
  display: inline-block; padding: 0 6px; border-radius: 3px; background: var(--olive); color: var(--bg);
  font-size: 10px; font-weight: 800; line-height: 15px; letter-spacing: 0.08em; text-transform: uppercase; vertical-align: 1px;
}
.vt-answer.is-owner {
  margin: 6px 0 0 -14px; padding: 8px 10px 8px 11px; border-left: 3px solid var(--olive);
  border-radius: 0 var(--radius) var(--radius) 0; background: var(--olive-dim);
}
.vt-answer.is-owner .vf-meta { color: var(--text-secondary); }   /* the wash lifts the ground: muted grey reads under 4.5:1 */
.vt-answer.is-owner .vf-author { color: var(--text-primary); }
.vt-answer.is-owner .vt-words { font-weight: 700; color: var(--text-primary); }
.vt .vf-more { margin-top: 4px; }

/* --- The owner's composer ------------------------------------------------------------------------------- */

.va-form { display: flex; flex-direction: column; gap: 14px; margin: 0; min-width: 0; }
.va-note { margin: 0; font-size: 12px; line-height: 1.45; color: var(--text-secondary); }
.va-kind { margin: 0; padding: 0; border: 0; min-width: 0; }
.venue-announce-sheet .va-label {
  display: block; margin: 0 0 6px; padding: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-secondary);
}
/* Post or Event: two radio buttons drawn as one segmented choice (arrow keys move between them). */
.va-segs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.venue-announce-sheet .va-seg {
  position: relative; display: block; margin: 0; cursor: pointer; letter-spacing: 0; text-transform: none;
}
.venue-announce-sheet .va-seg input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer;
}
.va-seg-face {
  display: flex; flex-direction: column; gap: 2px; box-sizing: border-box; min-height: 52px; padding: 9px 12px;
  border: 1px solid var(--line2); border-radius: var(--radius); background: transparent;
}
.va-seg-face b { font-size: 14px; color: var(--text-primary); }
.va-seg-face small { font-size: 11px; line-height: 1.3; color: var(--text-muted); }
.va-seg:hover .va-seg-face { border-color: var(--text-secondary); }
.va-seg input:checked + .va-seg-face {
  border-color: var(--text-primary); background: var(--bg-input); box-shadow: inset 0 0 0 1px var(--text-primary);
}
.va-seg input:focus-visible + .va-seg-face { outline: 2px solid var(--text-primary); outline-offset: 2px; }
.va-field { min-width: 0; }
.venue-announce-sheet .va-input { min-height: 44px; }
.venue-announce-sheet textarea.va-input { min-height: 120px; resize: vertical; }
.venue-announce-sheet .va-input[aria-invalid="true"] { border-color: var(--danger); }
/* From and Until side by side when there's room for both; one under the other on a phone. */
.va-dates { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.va-count { margin: 4px 0 0; font-size: 11px; color: var(--text-muted); text-align: right; }
.va-hint { margin: 4px 0 0; font-size: 12px; line-height: 1.45; color: var(--text-muted); }
/* Errors: the one red thing, a red edge beside the words. */
.va-error {
  margin: 6px 0 0; padding-left: 8px; border-left: 2px solid var(--danger);
  font-size: 12px; font-weight: 600; line-height: 1.45; color: var(--text-primary); overflow-wrap: anywhere;
}
.va-error:empty { display: none; }
.va-photo { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.va-thumb {
  display: block; max-width: 100%; max-height: 220px; object-fit: contain;
  border: 1px solid var(--line2); border-radius: var(--radius); background: var(--bg-input);
}
.va-fname { margin: 0; font-size: 12px; color: var(--text-secondary); overflow-wrap: anywhere; }
.va-busy { margin: 0; font-size: 13px; color: var(--text-secondary); }
.va-photo-actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* Buttons: the app's dark-fill, white-edge primary; white on hover, never the theme's olive. The shell edges every
   hovered .btn-primary in --accent-hover with !important (v084-prototype.css, the "white bubbles" override), and the
   theme makes that olive: only !important keeps this one white, on a phone too, where a tap leaves it hovered. */
.venue-announce-sheet .btn { min-height: 44px; font-size: 13px; }
.venue-announce-sheet .btn:hover { border-color: var(--text-primary); color: var(--text-primary); }
.venue-announce-sheet .btn-primary:hover { border-color: var(--text-primary) !important; }
.venue-announce-sheet .btn:disabled { opacity: 0.5; cursor: default; }
/* The file box covers its button, so a tap anywhere on it opens the phone's photo picker. */
.venue-announce-sheet .va-pick {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center;
  margin: 0; letter-spacing: 0; text-transform: none;
}
.va-pick input[type="file"] {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; font-size: 0;
}
.va-pick:focus-within { outline: 2px solid var(--text-primary); outline-offset: 2px; }
.va-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.venue-announce-sheet .va-send { min-height: 48px; font-size: 14px; }