/* ================== MEETUPS: the day sheet and the date rows ==================
   shared by the drawers (meetups.php, today.php — on top of global.css) and the public respond
   page (meetup.php, which does not load global.css), so the base pieces it needs are here too */

/* base pieces the public page needs */
.meetup_input { width: 100%; border: 1px solid #c3d1d4; border-radius: 8px; padding: 10px 12px; font-size: 15px; background: #f7fafa; margin-bottom: 8px; color: #16211f; }
.meetup_input:focus { outline: none; border-color: #0f7777; background: white; box-shadow: 0 0 0 3px #eaf7f8; }
.meetup_primary_button { background: #0f7777; color: white; border: 0; border-radius: 8px; padding: 10px 16px; font-weight: 700; font-size: .95em; white-space: nowrap; cursor: pointer; }
.meetup_primary_button:hover, .meetup_primary_button:focus { background: #0b5f5f; color: white; outline: none; }
.meetup_primary_button[disabled] { opacity: .6; cursor: default; }
.meetup_public_page .hide_me, .meetup_sheet .hide_me { display: none; }   /* the drawer pages get .hide_me from global.css; an !important here kept add_window() panels hidden */

/* the rows: one per candidate date, tap to open the sheet */
.meetup_selected_empty { color: #8a9a9f; font-size: .9em; padding: 6px 0; }
.meetup_date_row { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-top: 1px solid #eef1f2; }
.meetup_date_row:first-child { border-top: 0; }
.meetup_date_row_tap { cursor: pointer; }
.meetup_date_row_tap:hover .meetup_date_row_label { color: #0f7777; }
.meetup_date_row_main { flex: 1; min-width: 0; }
.meetup_date_row_label { font-weight: 700; font-size: .98em; color: #16211f; }
.meetup_date_row_mine { font-size: .9em; color: #1f8a5f; font-weight: 600; margin-top: 1px; }
.meetup_date_row_mine_no { color: #b8433a; }
.meetup_date_row_unset { color: #b57314; }
.meetup_date_row_others { font-size: .8em; color: #6c757d; margin-top: 3px; line-height: 1.4; }
.meetup_other_no { color: #b8433a; }
.meetup_date_row_tag { display: inline-block; font-size: .68em; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #1f8a5f; background: #eaf6f0; border-radius: 4px; padding: 1px 6px; margin-left: 6px; vertical-align: middle; }
.meetup_date_row_chevron { color: #b0b8bc; font-size: 11px; flex: none; }
.meetup_date_row_remove { background: transparent; border: 0; color: #b0b8bc; font-size: 22px; line-height: 1; cursor: pointer; padding: 4px 6px; flex: none; }
.meetup_date_row_remove:hover { color: #b8433a; }

/* the sheet: inside a drawer it sits at the bottom of the drawer; on the public page it is fixed
   to the viewport (a centered dialog on wide screens) */
.meetup_sheet_backdrop { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(15, 25, 27, .4); z-index: 40; }
.meetup_sheet { position: absolute; left: 0; right: 0; bottom: 0; background: white; border-radius: 16px 16px 0 0; padding: 16px 16px calc(18px + env(safe-area-inset-bottom)); z-index: 41; box-shadow: 0 -8px 30px rgba(0, 0, 0, .18); max-height: 92%; overflow-y: auto; -webkit-overflow-scrolling: touch; color: #16211f; font-size: 15px; }
body > .meetup_sheet_host .meetup_sheet_backdrop, body > .meetup_sheet_host .meetup_sheet { position: fixed; }
@media (min-width: 640px) {
  body > .meetup_sheet_host .meetup_sheet { left: 50%; right: auto; bottom: auto; top: 50%; transform: translate(-50%, -50%); width: 460px; max-height: 90vh; border-radius: 12px; padding-bottom: 16px; }
}
.meetup_sheet_head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.meetup_sheet_title { font-weight: 800; font-size: 1.15em; letter-spacing: -.01em; }
.meetup_sheet_copy { color: #6c757d; font-size: .88em; margin-top: 1px; }
.meetup_sheet_cancel { border: 0; background: transparent; font-size: 28px; line-height: 1; color: #8a9a9f; cursor: pointer; padding: 0 2px; margin-top: -4px; }
.meetup_sheet_shift { margin: 0 0 10px; font-size: .84em; color: #b57314; background: #fbf3e3; border-radius: 6px; padding: 7px 10px; }
/* Mine / Others tabs, half the sheet each */
.meetup_sheet_tabs { display: flex; background: #dfe7e8; border-radius: 9px; padding: 3px; margin: 12px 0 14px; }
.meetup_sheet_tab { flex: 1 1 50%; border: 0; background: transparent; color: #5c6b70; border-radius: 7px; padding: 8px 10px; font-weight: 700; font-size: .9em; cursor: pointer; }
.meetup_sheet_tab.is_active { background: white; color: #0f7777; box-shadow: 0 1px 2px rgba(22,33,31,.12); }
.meetup_sheet_tab:focus { outline: none; }
/* both panes sit in the same grid cell: the sheet stays the height of Mine on either tab */
.meetup_sheet_panes { display: grid; }
.meetup_sheet_pane { grid-area: 1 / 1; min-width: 0; }
.meetup_sheet_pane.is_hidden { visibility: hidden; pointer-events: none; }
.meetup_sheet_pane_others { display: flex; flex-direction: column; min-height: 0; }
.meetup_sheet_others_list { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; border: 1px solid #eef1f2; border-radius: 10px; }
/* the tick boxes (confirm date, final answer, delete): the site's custom_checkbox_container look —
   a 34×37 white box, 2px grey border, a green check when ticked. pinned so a page's own .btn
   rule (the public page sets min-height / padding on .btn) cannot stretch it */
.meetup_tick { width: 34px !important; height: 37px !important; min-height: 0 !important; padding: 0 !important; margin: 0; flex: none; display: inline-flex !important; align-items: center; justify-content: center; background: white !important; border: 2px solid grey !important; border-radius: 4px; outline: none !important; cursor: pointer; box-shadow: none; }
.meetup_tick:active { border-color: DimGray !important; }
.meetup_tick .custom_checkbox_checker { color: green; font-size: 14px; line-height: 1; top: 0; }
.meetup_tick .custom_checkbox_checker.hide_me { display: none; }
/* Everyone: a row per person — initials square + 24 hour chips; a pink band where everyone
   who answered is free */
.meetup_sheet_others_list { padding: 8px 10px 10px; }
.meetup_everyone_scale, .meetup_everyone_row, .meetup_everyone_overlay { display: grid; grid-template-columns: 28px repeat(24, 1fr); gap: 2px; align-items: center; }
.meetup_everyone_scale { margin-bottom: 4px; }
.meetup_everyone_tick { font-size: .62em; color: #a5b1b5; font-weight: 700; line-height: 1; }
.meetup_everyone { position: relative; display: flex; flex-direction: column; gap: 6px; }
.meetup_everyone_row { position: relative; }
.meetup_everyone_avatar { width: 28px; height: 28px; border-radius: 4px; background: #0f7777; color: white; font-size: .68em; font-weight: 800; display: flex; align-items: center; justify-content: center; letter-spacing: .02em; }
.meetup_everyone_row.is_no .meetup_everyone_avatar { background: #b8433a; }
.meetup_everyone_row.is_unset .meetup_everyone_avatar { background: #c3cdd0; }
.meetup_everyone_hour { display: block; height: 20px; border-radius: 3px; background: #eef1f2; }
.meetup_everyone_hour.is_free { background: #3d9f72; }
.meetup_everyone_row.is_no .meetup_everyone_hour { background: #f9dddb; }
.meetup_everyone_overlay { position: absolute; top: -3px; bottom: -3px; left: 0; right: 0; pointer-events: none; z-index: 1; align-items: stretch; grid-template-rows: 1fr; }
.meetup_everyone_band { display: block; height: 100%; border-radius: 3px; }
.meetup_everyone_band.is_overlap { background: rgba(255, 20, 147, .16); box-shadow: inset 0 0 0 1px rgba(255, 20, 147, .35); }
/* Any time / Not that day: under the hours, half the width each */
.meetup_chips { display: flex; gap: 8px; margin: 12px 0 0; }
.meetup_chip { flex: 1 1 50%; min-width: 0; border: 1px solid #c3d1d4; background: #f7fafa; color: #16211f; border-radius: 4px; padding: 10px 12px; font-size: .92em; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; line-height: 1.2; }
.meetup_chip_hint { font-size: .74em; color: #8a9a9f; font-weight: 500; }
.meetup_chip.is_active { background: #3d9f72; border-color: #3d9f72; color: white; }
.meetup_chip.is_active .meetup_chip_hint { color: rgba(255, 255, 255, .75); }
.meetup_chip_no.is_active { background: #b8433a; border-color: #b8433a; }
/* the hour circles: an AM line and a PM line, 12 to 11 each */
.meetup_hours { display: flex; flex-direction: column; gap: 6px; }
/* press and drag across the hours (meetups.js): the browser must not turn the drag into a scroll or a drawer swipe */
.meetup_hour { touch-action: none; }
.meetup_hours_row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.meetup_hour_ampm { display: block; font-size: .68em; font-weight: 600; color: #8a9a9f; margin-top: 3px; }
.meetup_hour.is_active .meetup_hour_ampm { color: rgba(255, 255, 255, .8); }
.meetup_hour.is_busy .meetup_hour_ampm { color: #c9736c; }
.meetup_hour { width: 100%; border-radius: 4px; border: 1px solid #c3d1d4; background: #f7fafa; color: #16211f; font-size: .95em; font-weight: 700; padding: 8px 0 6px; cursor: pointer; display: block; text-align: center; white-space: nowrap; line-height: 1; user-select: none; -webkit-user-select: none; }
.meetup_hour:hover { border-color: #3d9f72; }
.meetup_hour.is_active { background: #3d9f72; border-color: #3d9f72; color: white; }
.meetup_hour.is_busy, .meetup_hour.is_busy:hover { background: #f9dddb; border-color: #f0c9c5; color: #b8433a; cursor: not-allowed; opacity: 1; }
.meetup_hour.is_off { background: #f9dddb; border-color: #f0c9c5; color: #b8433a; }
/* hours other people said they are free: a faint cyan tint with a small count, under your own colour */
.meetup_hour { position: relative; }
.meetup_hour.is_others { background: #e3f1f2; border-color: #b6e2e5; }
.meetup_hour.is_others::after { content: attr(data-others); position: absolute; top: -6px; right: -4px; min-width: 16px; height: 16px; border-radius: 8px; background: #0f7777; color: white; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; padding: 0 3px; }
.meetup_hour.is_active.is_others { background: #3d9f72; border-color: #3d9f72; }
.meetup_hour.is_off.is_others { background: #f9dddb; border-color: #f0c9c5; }
.meetup_hour.is_off .meetup_hour_ampm { color: #c9736c; }
@media (max-width: 380px) { .meetup_hours_row { gap: 4px; } }
.meetup_link_button { background: transparent; border: 0; color: #0f7777; font-weight: 600; padding: 6px 0; cursor: pointer; font-size: .9em; }
/* the calendar colours, shared by the drawers and the public page: gold = best match so far,
   cyan = people share a time, light green = people are free (you included) but nothing
   overlaps yet, red = someone is out (or, on the dates step, you said Not that day),
   grey = no answers yet */
.meetup_cal_day.is_selected.is_good { background: #cdeedd; color: #1f6a48; }
.meetup_cal_day.is_selected.is_overlap { background: #0f7777; color: white; }
.meetup_cal_day.is_selected.is_best { background: #e9b949; color: #3d2f00; box-shadow: inset 0 0 0 1px #c99a1f; }
.meetup_cal_day.is_selected.is_bad, .meetup_cal_day.is_selected.is_out { background: #f9dddb; color: #b8433a; font-weight: 500; }
.meetup_cal_day.is_selected.is_unsure { background: #eef0f1; color: #16211f; border-color: #c3d1d4; }
.meetup_cal_day.is_selected.is_confirmed { box-shadow: 0 0 0 2px white, 0 0 0 4px #1f8a5f; }
.meetup_cal_day.is_inert { cursor: default; color: #8a9a9f; }
.meetup_cal_day.is_inert:hover { background: transparent; }
.meetup_sheet_error { background: #fbeceb; color: #b8433a; border: 1px solid #f0c9c5; border-radius: 8px; padding: 8px 12px; margin-top: 12px; font-size: .9em; }
.meetup_sheet_actions { margin-top: 14px; }
.meetup_sheet_actions .meetup_primary_button { width: 100%; padding: 12px; font-size: 1em; }
.meetup_sheet_actions .meetup_primary_button.hide_me { display: none; }