/* web/events.css: the Events list, an event's page, New and Edit event, the event chooser and the QR face (module S4).
   Every class defined here begins with "events-" (design document 7.2). The shared classes are U2's, in web/style.css;
   these rules only place them on these screens. Sources: the boards named in each comment. */

/* The two pages: blocks 20px apart (Dashboard-Events:78, Dashboard-Event:78). */
.events-list, .events-page { display: flex; flex-direction: column; gap: 20px; }

/* A phone event row: "5 contacts" over the pill, at the right (Member-Events:38-41). */
.events-row-end { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 12px; color: #566579; }

/* The desktop list's Guest form pill hugs its words (Dashboard-Events:102). */
.events-pill { display: flex; }

/* A phone group: the heading flush left, 8px above its card (Member-Events:33-34). */
.events-group { gap: 8px; }
.events-group > .section-title { padding: 0; }

/* The desktop header card puts everything in one wrapping row (design-system.md 2.2, Dashboard-Event:83). */
.events-head .head-card-top { flex-wrap: wrap; }

/* The phone title row: the name and its line, "Edit" at the right (Member-Event:26-32). */
.events-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.events-title-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.events-title .detail-title { text-wrap: balance; }
.events-title .detail-sub { font-size: 14px; }
.events-new-contact { width: 100%; }

/* The Guest form card (design-system.md 3.16; Dashboard-Event:179-209, Member-Event:37-59). */
.events-guest-tools { display: flex; align-items: center; gap: 10px; }
.events-guest-body { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 4px 20px 20px; }
.events-guest-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.events-guest-code { display: flex; align-items: center; gap: 14px; }
/* The copy button in the address box: 36px square, never squeezed (Dashboard-Event:194). */
.events-guest .link-box .icon-btn { flex: none; width: 36px; height: 36px; }
.events-address { min-width: 0; font-size: 13px; overflow-wrap: anywhere; }
.events-site-off { margin: 0; padding: 4px 20px 20px; font-size: 14px; color: #566579; }
.events-qr { flex: none; display: block; max-width: 100%; height: auto; }
/* The phone card's three buttons: 48px, 14px text, so that three labels fit (Member-Event:54-57; design-system.md 3.1). */
.events-guest .btn-row > button { height: 48px; padding: 0 6px; font-size: 14px; }

/* The event's contacts and meetings: a next step may wrap onto balanced lines (Dashboard-Event:116, :174). */
.events-contacts .table-row > :last-child, .events-meetings .table-row > :last-child { white-space: normal; text-wrap: balance; }
/* A phone contact row: "added by" over the time (Member-Event:63-67). */
.events-added { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 12px; color: #566579; }

/* The event form: the two date fields share the row (design-system.md 3.2, Dashboard-New-Event:32-36). */
.events-dates .field-row .input { flex: 1 1 0; min-width: 0; }

/* The QR face (Member-Share:20-38): centred both ways, 28px between parts, white. */
.events-face { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; padding: 24px 16px; background: #ffffff; text-align: center; }
.events-face-head { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.events-face-title { margin: 0; font-size: 26px; line-height: 1.3; font-weight: 700; letter-spacing: -0.5px; color: #102c4a; text-wrap: balance; }
.events-face-sub { margin: 0; font-size: 15px; color: #566579; }
.events-face-off { margin: 0; font-size: 15px; color: #566579; }
.events-wordmark { margin: 0; display: flex; align-items: baseline; gap: 8px; color: #102c4a; }
.events-wordmark > span:first-child { font-size: 22px; font-weight: 700; letter-spacing: -0.5px; }
.events-wordmark > span:nth-child(2) { font-size: 18px; font-weight: 700; color: #bd293d; }
.events-wordmark > span:last-child { font-size: 11px; font-weight: 600; letter-spacing: 1.6px; }
/* "Done" over the face on the phone: 16px, 12px each side (Member-Share:22). U1's frame draws it; the class of the face's
   layer keeps every other full screen at the shared 15px and 8px (Member-New-Contact:22). */
.events-face-layer .phone-cancel { padding: 0 12px; font-size: 16px; font-weight: 600; }

@media (max-width: 871.98px) {
  /* The phone's event chooser is a list in the sheet, not a floating card (Member-Choose-Event:27-48). */
  .events-pick { border: 0; border-radius: 0; box-shadow: none; }
  /* Its rows flush, no rule above the first, no tint on the chosen one, a 20px radio in a 36px column; "New event"
     60px high with its dashed circle in that column (Member-Choose-Event:28-48). */
  .events-pick .picker-row { padding: 0; }
  .events-pick .picker-row:first-child { border-top: 0; }
  .events-pick .picker-row.is-chosen { background: transparent; }
  .events-pick .picker-row input { flex: none; width: 20px; height: 20px; margin: 0 8px; accent-color: #102c4a; }
  /* U2's phone rule .picker-list:has(> [role="radiogroup"]) > .picker-new would keep "New event" 48px in. The same
     selector with .events-pick outranks it: no padding, the circle first, 12px before its words (Member-Choose-Event:45). */
  .events-pick.picker-list:has(> [role="radiogroup"]) > .picker-new { height: 60px; gap: 12px; padding: 0; }
  /* The rows of the list (Member-Events:36) and of an event's contacts and meetings (Member-Event:63, :96). */
  .events-list .list-row { min-height: 72px; padding: 12px 14px; }
  .events-page .list-row { padding: 10px 16px; }
  /* The headings of an event's page, Guest form, Contacts and Meetings, at 15px (Member-Event:39, :61, :92). */
  .events-page .card-title { font-size: 15px; }
  .events-face { min-height: calc(100vh - 64px); box-sizing: border-box; }
  .events-site-off { padding: 0; }
}