/**
 * Meetings (js/ui/meetings-home.js), 2026-10-16, meetings item 3.
 * The mock's look: a segmented tab strip, one card per meeting with a kind
 * tile, its stage badge, when, how it was arranged and one action word.
 * Slate + teal tokens, dark-mode values below.
 */
.meetings-home-modal .mh-content {
  max-width: 640px;
  width: 96%;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
}
.meetings-home-modal .modal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.meetings-home-modal .mh-head-actions { display: flex; align-items: center; gap: 8px; }
.meetings-home-modal .mh-head-actions .btn { min-height: 44px; }

.meetings-home-modal .mh-tabs {
  display: flex;
  gap: 4px;
  margin: 0 20px;
  padding: 4px;
  border-radius: 14px;
  background: #e8eef2;
}
.meetings-home-modal .mh-tab {
  flex: 1 1 auto;
  white-space: nowrap;
  min-height: 44px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: #334155;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 4px;
}
/* Label over its count (2026-10-17, owner: "Some overlap but great
   direction"): four equal columns that fit at phone width. */
.meetings-home-modal .mh-tab {
  flex: 1 1 0;
  min-width: 0;
  min-height: 52px;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 4px 2px;
  overflow: hidden;
}
.meetings-home-modal .mh-tab-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.meetings-home-modal .mh-count { height: 16px; }
.meetings-home-modal .mh-count-slot { display: block; height: 16px; }
.meetings-home-modal .mh-tab.is-on { background: #fff; color: var(--primary-700, #0f766e); box-shadow: 0 1px 2px rgba(15, 23, 42, .08), 0 3px 10px rgba(15, 23, 42, .08); }
.meetings-home-modal .mh-count {
  min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px;
  font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center;
  background: #cbd5e1; color: #1e293b;
}
.meetings-home-modal .mh-count--needs { background: #b91c1c; color: #fff; }

.meetings-home-modal .mh-body { overflow-y: auto; padding: 14px 20px; }
.meetings-home-modal .mh-hint { margin: 0 2px 10px; font-size: 13px; color: var(--text-secondary, #64748b); }
.meetings-home-modal .mh-empty { margin: 24px 0; text-align: center; font-size: 14px; color: var(--text-secondary, #64748b); }
.meetings-home-modal .mh-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.meetings-home-modal .mh-open {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid var(--border-color, #e3e9ee);
  background: var(--bg-primary, #fff);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.meetings-home-modal .mh-open:hover { border-color: var(--primary-600, #0d9488); }
.meetings-home-modal .mh-tile { flex: none; width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 17px; }
.meetings-home-modal .mh-tile--pick { background: #ccfbf1; color: #0f766e; }
.meetings-home-modal .mh-tile--vote { background: #fef3c7; color: #92400e; }
.meetings-home-modal .mh-tile--book { background: #dbeafe; color: #1d4ed8; }
.meetings-home-modal .mh-tile--days { background: #ede9fe; color: #5b21b6; }
.meetings-home-modal .mh-words { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.meetings-home-modal .mh-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.meetings-home-modal .mh-title { font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meetings-home-modal .mh-badge { flex: none; font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 999px; }
.meetings-home-modal .mh-badge--needs { background: #fee2e2; color: #991b1b; }
.meetings-home-modal .mh-badge--collecting { background: #fef3c7; color: #92400e; }
.meetings-home-modal .mh-badge--confirmed { background: #ccfbf1; color: #115e59; }
.meetings-home-modal .mh-badge--done,
.meetings-home-modal .mh-badge--cancelled { background: #e2e8f0; color: #334155; }
.meetings-home-modal .mh-when { font-size: 14px; font-weight: 600; color: #334155; }
.meetings-home-modal .mh-how { font-size: 12.5px; color: #64748b; }
.meetings-home-modal .mh-action {
  flex: none; align-self: center; min-height: 40px; padding: 0 14px; border-radius: 10px;
  display: inline-flex; align-items: center; background: var(--primary-700, #0f766e); color: #fff; font-size: 14px; font-weight: 800;
}
@media (max-width: 480px) {
  .meetings-home-modal .mh-tabs { margin: 0 12px; }
  .meetings-home-modal .mh-body { padding: 12px; }
  .meetings-home-modal .mh-tab { font-size: 12.5px; gap: 3px; padding: 4px 2px; }
  .meetings-home-modal .mh-open { flex-wrap: wrap; }
  .meetings-home-modal .mh-action { margin-left: 52px; }
}

body.dark-mode .meetings-home-modal .mh-tabs { background: #1e293b; }
body.dark-mode .meetings-home-modal .mh-tab { color: #cbd5e1; }
body.dark-mode .meetings-home-modal .mh-tab.is-on { background: #334155; color: #5eead4; }
body.dark-mode .meetings-home-modal .mh-count { background: #475569; color: #f1f5f9; }
body.dark-mode .meetings-home-modal .mh-count--needs { background: #b91c1c; color: #fff; }
body.dark-mode .meetings-home-modal .mh-open { background: #0f172a; border-color: #334155; }
body.dark-mode .meetings-home-modal .mh-when { color: #e2e8f0; }
body.dark-mode .meetings-home-modal .mh-how { color: #94a3b8; }
body.dark-mode .meetings-home-modal .mh-tile--pick { background: rgba(20, 184, 166, .18); color: #5eead4; }
body.dark-mode .meetings-home-modal .mh-tile--vote { background: rgba(245, 158, 11, .18); color: #fcd34d; }
body.dark-mode .meetings-home-modal .mh-tile--book { background: rgba(59, 130, 246, .2); color: #93c5fd; }
body.dark-mode .meetings-home-modal .mh-tile--days { background: rgba(139, 92, 246, .2); color: #c4b5fd; }
body.dark-mode .meetings-home-modal .mh-badge--collecting { background: rgba(245, 158, 11, .2); color: #fcd34d; }
body.dark-mode .meetings-home-modal .mh-badge--confirmed { background: rgba(20, 184, 166, .2); color: #5eead4; }
body.dark-mode .meetings-home-modal .mh-badge--done,
body.dark-mode .meetings-home-modal .mh-badge--cancelled { background: #334155; color: #e2e8f0; }

/* The Meetings count on the ⋮ menu row: the Activity count's style
   (notification-inbox.css), not the grey "Pro" label base. */
.menu-item-badge#meetings-needs-badge {
  background: var(--primary-500, #14b8a6);
  color: #fff;
  opacity: 1;
  font-size: 10px;
  font-weight: 700;
  min-width: 18px;
  padding: 2px 6px;
  justify-content: center;
  border-radius: 999px;
}

/* A booking is a ticket here too (2026-10-18, owner-approved bookings mock):
   a date tile in place of the icon, both clocks, the Bookings window's words;
   a request's chip is amber like its ticket there. */
.meetings-home-modal .mh-tile--date { flex-direction: column; gap: 1px; height: 46px; background: #ccfbf1; color: #0f766e; font-size: 9.5px; font-weight: 700; line-height: 1.1; letter-spacing: .04em; text-transform: uppercase; }
.meetings-home-modal .mh-tile--date b { font-size: 17px; font-weight: 800; letter-spacing: 0; }
.meetings-home-modal .mh-tile--ask { background: #fef3c7; color: #b45309; }
.meetings-home-modal .mh-clocks { display: flex; flex-wrap: wrap; gap: 2px 12px; font-variant-numeric: tabular-nums; }
.meetings-home-modal .mh-clock small { margin-left: 2px; font-size: 12px; font-weight: 500; color: #64748b; }
.meetings-home-modal .mh-badge--needs { background: #fef3c7; color: #b45309; }
body.dark-mode .meetings-home-modal .mh-tile--date { background: rgba(45, 212, 191, .14); color: #5eead4; }
body.dark-mode .meetings-home-modal .mh-tile--ask { background: rgba(251, 191, 36, .14); color: #fcd34d; }
body.dark-mode .meetings-home-modal .mh-clock small { color: #94a3b8; }
body.dark-mode .meetings-home-modal .mh-badge--needs { background: rgba(251, 191, 36, .14); color: #fcd34d; }

/* ONE LIST, ONE ROW SHAPE (owner 2026-10-21, canvas board E2): every kind
   wears the same teal tile, the glyph says the kind; a row whose kind has a
   link or actions carries Copy link and a ⋮ beside it; "Your links" sits
   under every tab with a key for its state colours. */
.meetings-home-modal .mh-tile--pick,
.meetings-home-modal .mh-tile--vote,
.meetings-home-modal .mh-tile--book,
.meetings-home-modal .mh-tile--days,
.meetings-home-modal .mh-tile--mylink,
.meetings-home-modal .mh-tile--grouplink { background: var(--primary-50, #f0fdfa); color: var(--primary-700, #0f766e); box-shadow: inset 0 0 0 1px var(--primary-200, #99f6e4); }
.meetings-home-modal .mh-row { position: relative; }
.meetings-home-modal .mh-row--acts .mh-open { padding-right: 150px; }
.meetings-home-modal .mh-acts { position: absolute; top: 12px; right: 12px; display: flex; gap: 4px; }
.meetings-home-modal .mh-copy { min-height: 44px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--slate-300, #cbd5e1); background: var(--bg-primary, #fff); color: var(--primary-700, #0f766e); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.meetings-home-modal .mh-more { width: 40px; min-height: 44px; border-radius: 10px; border: 1px solid var(--border-color, #e2e8f0); background: var(--bg-primary, #fff); color: #475569; font-size: 16px; cursor: pointer; }
.meetings-home-modal .mh-copy:focus-visible, .meetings-home-modal .mh-more:focus-visible, .meetings-home-modal .mh-menu-item:focus-visible { outline: 2px solid var(--primary-500, #14b8a6); outline-offset: 2px; }
.meetings-home-modal .mh-menu { position: absolute; top: 50px; right: 0; z-index: 5; min-width: 180px; padding: 6px; border-radius: 12px; border: 1px solid var(--border-color, #e2e8f0); background: var(--bg-primary, #fff); box-shadow: 0 8px 24px rgba(15, 23, 42, .14); display: flex; flex-direction: column; }
.meetings-home-modal .mh-menu[hidden] { display: none; }
.meetings-home-modal .mh-menu-item { min-height: 44px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: #1e293b; font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
.meetings-home-modal .mh-menu-item:hover { background: var(--primary-50, #f0fdfa); }
.meetings-home-modal .mh-menu-item--end { color: #b91c1c; }
.meetings-home-modal .mh-menu-item--end.is-armed { background: #fee2e2; font-weight: 700; }
.meetings-home-modal .mh-kind { font-size: 12px; color: #475569; }
.meetings-home-modal .mh-badge--live { background: #ccfbf1; color: #115e59; }
.meetings-home-modal .mh-badge--paused { background: #fef3c7; color: #92400e; }
.meetings-home-modal .mh-badge--ended { background: #e2e8f0; color: #334155; }
.meetings-home-modal .mh-links { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border-color, #e2e8f0); }
.meetings-home-modal .mh-links-title { margin: 0 2px 10px; font-size: 14px; font-weight: 800; color: #334155; }
.meetings-home-modal .mh-key { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 2px 0; font-size: 12px; color: #475569; }
.meetings-home-modal .mh-key span { display: inline-flex; align-items: center; gap: 6px; }
.meetings-home-modal .mh-sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
@media (max-width: 480px) {
  /* The actions drop under the words on a phone, so titles keep their room. */
  .meetings-home-modal .mh-row--acts .mh-open { padding-right: 14px; padding-bottom: 66px; }
  .meetings-home-modal .mh-acts { top: auto; bottom: 12px; right: auto; left: 66px; }
  .meetings-home-modal .mh-menu { top: 50px; left: 0; right: auto; }
}
body.dark-mode .meetings-home-modal .mh-tile--pick,
body.dark-mode .meetings-home-modal .mh-tile--vote,
body.dark-mode .meetings-home-modal .mh-tile--book,
body.dark-mode .meetings-home-modal .mh-tile--days,
body.dark-mode .meetings-home-modal .mh-tile--mylink,
body.dark-mode .meetings-home-modal .mh-tile--grouplink { background: rgba(20, 184, 166, .16); color: #5eead4; box-shadow: inset 0 0 0 1px rgba(94, 234, 212, .35); }
body.dark-mode .meetings-home-modal .mh-copy, body.dark-mode .meetings-home-modal .mh-more, body.dark-mode .meetings-home-modal .mh-menu { background: #1e293b; border-color: #334155; color: #e2e8f0; }
body.dark-mode .meetings-home-modal .mh-copy { color: #5eead4; }
body.dark-mode .meetings-home-modal .mh-menu-item { color: #e2e8f0; }
body.dark-mode .meetings-home-modal .mh-menu-item:hover { background: rgba(20, 184, 166, .16); }
body.dark-mode .meetings-home-modal .mh-menu-item--end { color: #fca5a5; }
body.dark-mode .meetings-home-modal .mh-menu-item--end.is-armed { background: rgba(185, 28, 28, .3); }
body.dark-mode .meetings-home-modal .mh-kind, body.dark-mode .meetings-home-modal .mh-key, body.dark-mode .meetings-home-modal .mh-links-title { color: #cbd5e1; }
body.dark-mode .meetings-home-modal .mh-links { border-top-color: #334155; }
body.dark-mode .meetings-home-modal .mh-badge--live { background: rgba(20, 184, 166, .2); color: #5eead4; }
body.dark-mode .meetings-home-modal .mh-badge--paused { background: rgba(245, 158, 11, .2); color: #fcd34d; }
body.dark-mode .meetings-home-modal .mh-badge--ended { background: #334155; color: #e2e8f0; }