/*
 * Trip collaboration (round 96): the People sheet, the per-stop suggest /
 * comment buttons, the publish row in the share panel, the invite page.
 * Brand tokens only (main.css); the sheet mirrors My Trips' share dialog
 * (.trip-share-*) so the two read as one family.
 */

/* --- toolbar bits ------------------------------------------------- */
.btn-itinerary-share.has-badge { position: relative; padding-right: 30px; }
.collab-badge {
  position: absolute; top: -6px; right: 6px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--pop); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}
.share-publish-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  margin: 0 0 10px; padding: 10px 12px; border-radius: 8px;
  background: var(--bg-soft); color: var(--muted); font-size: 12.5px; line-height: 1.5;
}
.share-publish-row.is-stale { background: #FFF7E6; color: #7A4B00; border: 1px solid #F5D89A; }
.share-publish-row.is-stale span { flex: 1 1 200px; }
.share-expiry { margin: -4px 0 10px !important; }
.nearby-btn.btn-suggest, .nearby-btn.btn-comment { margin-left: 6px; }
.nearby-btn.btn-comment { padding-left: 8px; padding-right: 8px; }

/* --- the sheet ----------------------------------------------------- */
/* Round 97: restyled after the founder's two mocks -- the people on the
 * trip peek over the top edge, a pill role picker with a black Invite
 * button, a roster that says what each person can do, invite links as
 * cards. A bottom sheet under 720px, a centred dialog above it. */
/* minmax(0, 1fr): the card's width is the viewport's, never its content's
 * min-content (five nowrap tabs used to widen the sheet past a phone). */
.collab-sheet { position: fixed; inset: 0; z-index: 70; display: grid; grid-template-columns: minmax(0, 1fr); place-items: end center; padding: 0; }
.collab-sheet[hidden] { display: none; }
.collab-backdrop { position: absolute; inset: 0; background: rgba(20, 33, 61, 0.5); }
/* A FIXED height, not a max-height: every tab fills the same card, so
 * switching People -> History -> Activity never resizes or re-centres
 * it -- the body scrolls inside instead (founder, round 97b). */
.collab-card {
  /* min-width: 0 (round 122l). The card is a grid item, and a grid item's
     default min-width is its min-content -- which the invite-role <select>
     set to 487px on a 393px phone, because a select's intrinsic width is
     its LONGEST option ("Editor -- Can change the plan directly and invite
     suggestors and viewers."). The card overflowed the viewport, the
     document's scroll width followed it, and the fixed nav, sized to the
     document, pushed "Continue planning" and the avatar off the right edge
     on every phone the sheet was opened on. Found the moment the sheet
     became reachable from a My Trips card. */
  position: relative; width: 100%; max-width: 720px; min-width: 0; height: 88vh; height: 88dvh;
  display: flex; flex-direction: column;
  background: var(--bg); color: var(--ink);
  border-radius: 26px 26px 0 0; box-shadow: 0 -20px 60px rgba(var(--shadow-ink), 0.3);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
/* The suggest-a-change form is one short form, not a tabbed card: it
 * sizes to its content. */
.collab-sheet.is-compact .collab-card { height: auto; max-height: 88vh; max-height: 88dvh; }
@media (min-width: 720px) {
  .collab-sheet { place-items: center; padding: 56px 16px 16px; }
  .collab-card { border-radius: 26px; height: min(84vh, 760px); height: min(84dvh, 760px); box-shadow: 0 30px 70px rgba(var(--shadow-ink), 0.28); }
  .collab-sheet.is-compact .collab-card { height: auto; max-height: 84vh; max-height: 84dvh; }
}

/* the avatar stack over the top edge */
.collab-avatar-stack {
  /* z-index (round 272, Taiga #116): .collab-head is position: relative and comes later in the card, so it was painted
     over the lower half of the + -- a tap on its middle reached the header and did nothing. */
  position: absolute; top: -32px; left: 0; right: 0; z-index: 2;
  display: flex; justify-content: center; align-items: center;
  pointer-events: none;
}
.collab-avatar-stack > * { pointer-events: auto; }
.collab-avatar-stack:empty { display: none; }
.collab-avatar {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 14px; letter-spacing: 0.02em;
  background: linear-gradient(145deg, var(--accent-bright), var(--accent));
}
.collab-avatar.is-tone-0 { background: linear-gradient(145deg, #FFB4AA, #F58276); }
.collab-avatar.is-tone-1 { background: linear-gradient(145deg, #C4A7FF, #9171ED); }
.collab-avatar.is-tone-2 { background: linear-gradient(145deg, #8FE3DC, #2BB5A6); }
.collab-avatar.is-tone-3 { background: linear-gradient(145deg, #FFD48A, #F2A23A); }
.collab-avatar.is-tone-4 { background: linear-gradient(145deg, #A9C9FF, #5B8DEF); }
.collab-avatar--lg {
  width: 64px; height: 64px; font-size: 20px; margin-left: -14px;
  border: 4px solid var(--bg); box-shadow: 0 8px 22px rgba(var(--shadow-ink), 0.18);
}
.collab-avatar--lg.is-more { background: var(--bg-soft); color: var(--muted); font-size: 16px; }
.collab-avatar-stack > :first-child { margin-left: 0; }
.collab-avatar-add {
  width: 56px; height: 56px; margin-left: -10px; border-radius: 50%; cursor: pointer;
  border: 4px solid var(--bg); background: var(--bg-soft); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 22px rgba(var(--shadow-ink), 0.18);
  transition: background var(--duration-quick) var(--ease-warm), color var(--duration-quick) var(--ease-warm), transform var(--duration-quick) var(--ease-warm);
}
.collab-avatar-add:hover { background: var(--accent-bg-soft); color: var(--accent-ink); transform: translateY(-2px); }
.collab-avatar-add:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* header (round 97b, the founder's mock): a plain lavender eyebrow, the
 * trip's name big and uppercase, a bare X -- all left-aligned under the
 * avatar stack. */
.collab-head { position: relative; padding: 44px 56px 10px 24px; text-align: left; }
.collab-head-text { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.collab-eyebrow {
  margin: 0; color: #8A8FB9;
  font-size: 13px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase;
}
.collab-head h3 { margin: 0; font-family: var(--font-display); font-size: 30px; font-weight: 800; line-height: 1.1; letter-spacing: -0.01em; text-transform: uppercase; text-wrap: balance; }
.collab-close {
  position: absolute; top: 18px; right: 18px; width: 36px; height: 36px; border-radius: 50%; border: none;
  background: transparent; color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--duration-quick) var(--ease-warm), transform var(--duration-quick) var(--ease-warm);
}
.collab-close .ui-icon { stroke-width: 2; }
.collab-close:hover { background: var(--bg-soft); transform: rotate(90deg); }

/* tabs */
/* flex-shrink 0: a scroll container's minimum height is 0, so a tall
 * roster used to squash the tab row to half its text. */
.collab-head, .collab-tabs { flex-shrink: 0; }
.collab-tabs {
  display: flex; gap: 4px; margin: 6px 24px 0; padding: 6px; border-radius: 100px;
  background: var(--accent-bg-soft); overflow-x: auto; scrollbar-width: none;
}
.collab-tabs::-webkit-scrollbar { display: none; }
.collab-tabs:empty { display: none; }
.collab-tab {
  flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px 14px; border: none; border-radius: 100px; background: transparent; color: var(--ink);
  font: inherit; font-size: 12.5px; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap; cursor: pointer;
  transition: background var(--duration-quick) var(--ease-warm), color var(--duration-quick) var(--ease-warm);
}
.collab-tab .ui-icon { flex-shrink: 0; stroke-width: 2; }
.collab-tab:hover { background: rgba(255, 255, 255, 0.6); }
.collab-tab.is-active { background: var(--ink); color: var(--on-ink); }
/* On a phone the five tabs scroll inside the pill; only the active one
 * carries its icon so the row stays short. */
@media (max-width: 719px) {
  .collab-tabs { margin: 6px 16px 0; }
  .collab-tab { padding: 10px 14px; font-size: 12px; }
  .collab-tab:not(.is-active) .ui-icon { display: none; }
}

/* body */
.collab-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 18px 24px 24px; font-size: 15px; line-height: 1.5; }
.collab-body h4 { margin: 18px 0 4px; font-size: 15px; }
.collab-body h5, .collab-label { margin: 22px 0 10px; font-size: 14px; font-weight: 800; color: var(--ink); text-transform: uppercase; letter-spacing: 0.02em; }
@media (max-width: 719px) { .collab-body { padding: 16px 16px 22px; } }
.collab-body > .collab-label:first-child, .collab-invite > .collab-label:first-child { margin-top: 0; }
.collab-muted { color: var(--muted); font-size: 14px; margin: 0 0 8px; }
.collab-note { margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; background: var(--accent-bg-soft); color: var(--accent-ink); font-size: 14px; }
.collab-error { color: var(--danger); }
.collab-primary { padding: 8px 16px; border: none; border-radius: 8px; background: linear-gradient(135deg, var(--accent-dark) 0%, var(--accent) 100%); color: #fff; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.collab-primary:disabled { opacity: 0.6; cursor: default; }
.collab-sheet .secondary-btn { padding: 8px 14px; border: 1px solid var(--border); border-radius: 100px; background: var(--bg-soft); color: var(--ink); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.collab-sheet .share-link-row { margin: 8px 0 10px; }
.collab-sheet .share-link-input { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-soft); color: var(--ink); font: inherit; font-size: 12.5px; }
.collab-sheet .share-panel-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.collab-mini-btn { padding: 8px 18px; border: 1.5px solid var(--border); border-radius: 100px; background: var(--bg); color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: border-color var(--duration-quick) var(--ease-warm), color var(--duration-quick) var(--ease-warm), background var(--duration-quick) var(--ease-warm); }
.collab-mini-btn:hover { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-bg-soft); }
.collab-mini-btn.is-danger { color: var(--danger); }
.collab-mini-btn.is-danger:hover { border-color: var(--danger); background: var(--danger-bg); color: var(--danger); }
.collab-select, .collab-input { font: inherit; font-size: 13px; color: var(--ink); background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; max-width: 100%; }
.collab-input { width: 100%; box-sizing: border-box; margin: 8px 0; resize: vertical; }
.collab-x { border: none; background: none; color: var(--muted); cursor: pointer; padding: 2px 4px; margin-left: auto; display: inline-flex; }

/* pill selects: the native control, our chrome */
.collab-select-wrap { position: relative; display: inline-flex; min-width: 0; }
.collab-select-wrap .collab-select {
  width: 100%; max-width: 100%; min-width: 0; height: 54px; padding: 0 44px 0 18px; border-radius: 14px;
  border: 1.5px solid #DCD6F3; background: var(--accent-bg-soft); font-size: 16px; font-weight: 500;
  appearance: none; -webkit-appearance: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
.collab-select-wrap .collab-select:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg-soft); }
.collab-select-wrap::after {
  content: ""; position: absolute; right: 20px; top: 50%; width: 9px; height: 9px; pointer-events: none;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-70%) rotate(45deg);
}
.collab-select-wrap.is-compact .collab-select { height: 36px; padding: 0 32px 0 14px; border-radius: 100px; font-size: 13px; font-weight: 700; background: var(--bg-soft); border-color: transparent; }
.collab-select-wrap.is-compact::after { right: 12px; width: 6px; height: 6px; }

/* people: the invite row */
.collab-invite { margin: 0 0 6px; }
.collab-invite-row { display: flex; flex-direction: column; gap: 14px; }
.collab-invite-row .collab-select-wrap { flex: 0 0 auto; width: 100%; }
.collab-invite-row .collab-primary {
  width: 100%; height: 54px; padding: 0 24px; border-radius: 100px; background: var(--accent); color: #fff;
  font-size: 17px; font-weight: 700; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--duration-quick) var(--ease-warm), transform var(--duration-quick) var(--ease-warm), box-shadow var(--duration-quick) var(--ease-warm);
}
.collab-invite-row .collab-primary:hover { background: var(--accent-dark); transform: translateY(-1px); box-shadow: 0 10px 24px rgba(var(--accent-rgb), 0.28); }
.collab-invite-row .collab-primary:disabled { transform: none; box-shadow: none; }
.collab-invite-help { margin: 10px 2px 0; }
#collab-invite-result { margin-top: 14px; border-radius: 12px; }
/* the link made here, shown again rather than made again (21 Oct 2026) */
#collab-invite-result.is-flash { animation: collab-invite-flash 1.2s ease-out; }
@keyframes collab-invite-flash { 0% { box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.45); } 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); } }
@media (prefers-reduced-motion: reduce) { #collab-invite-result.is-flash { animation: none; } }
.collab-sheet .collab-linkbar {
  display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 0 7px 0 18px; height: 54px;
  border: 1.5px solid var(--border); border-radius: 100px; background: var(--bg-soft);
}
.collab-linkbar .ui-icon { color: var(--muted); flex-shrink: 0; }
.collab-sheet .collab-linkbar .share-link-input { flex: 1 1 auto; min-width: 0; width: auto; padding: 0; border: none; background: transparent; font-size: 14px; }
.collab-sheet .collab-linkbar .collab-copy-btn { flex-shrink: 0; height: 40px; padding: 0 16px; border: 1.5px solid var(--border); background: var(--bg); color: var(--ink); font-size: 14px; }
.collab-sheet .collab-linkbar .collab-copy-btn:hover { border-color: var(--accent); color: var(--accent-ink); }
.collab-sheet #collab-invite-result .share-channel-row { margin-top: 0; padding-top: 0; border-top: none; }

/* people: the roster */
.collab-members { list-style: none; margin: 0; padding: 0; }
.collab-member { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.collab-member:last-child { border-bottom: none; }
.collab-member-main { flex: 1 1 160px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.collab-member-name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-weight: 800; font-size: 16px; line-height: 1.25; text-transform: uppercase; letter-spacing: 0.02em; }
.collab-member-name em { font-style: normal; color: var(--muted); font-weight: 500; font-size: 13px; text-transform: none; letter-spacing: 0; padding: 2px 10px; border-radius: 100px; background: var(--bg-soft); }
.collab-member-sub { font-size: 14px; color: var(--ink); line-height: 1.45; }
.collab-role-pill { flex-shrink: 0; padding: 7px 16px; border-radius: 100px; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; background: var(--bg-soft); color: var(--muted); }
.collab-role-pill.is-owner { background: var(--ink); color: var(--on-ink); }
.collab-role-pill.is-editor { background: var(--success-bg); color: var(--success); }
.collab-role-pill.is-suggestor { background: #FFF7E6; color: #7A4B00; }
.collab-role-pill.is-viewer { background: var(--accent-bg-soft); color: var(--accent-ink); }
.collab-member-controls { display: flex; flex-wrap: wrap; gap: 8px; flex-basis: 100%; padding-left: 58px; }
.collab-foot { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); text-align: center; }

/* people: live invite links */
.collab-invites { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.collab-invite-card { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 15px; }
.collab-invite-card:last-child { border-bottom: none; }
.collab-invite-meta { flex: 1 1 200px; min-width: 0; color: var(--ink); }
.collab-invite-meta b { font-weight: 600; }

/* suggestions */
.collab-suggestions, .collab-comments, .collab-versions, .collab-feed { list-style: none; margin: 0; padding: 0; }
.collab-suggestion { padding: 12px 0; border-bottom: 1px solid var(--border); }
.collab-suggestion-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 4px; }
.collab-status-pill { padding: 2px 8px; border-radius: 100px; font-size: 11px; font-weight: 700; background: var(--bg-soft); color: var(--muted); }
.collab-status-pill.is-pending { background: #FFF7E6; color: #7A4B00; }
.collab-status-pill.is-accepted { background: var(--success-bg); color: var(--success); }
.collab-status-pill.is-rejected, .collab-status-pill.is-stale_conflict { background: var(--danger-bg); color: var(--danger); }
.collab-ops { margin: 4px 0; padding-left: 18px; }
.collab-suggestion-note { margin: 4px 0; color: var(--muted); font-style: italic; }
.collab-suggestion-actions { display: flex; gap: 8px; margin-top: 8px; }
.collab-form { display: flex; flex-direction: column; gap: 6px; }
.collab-radio { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.collab-inline { display: flex; flex-wrap: wrap; gap: 8px; padding-left: 24px; }

/* discussion */
.collab-comments { max-height: 40vh; overflow-y: auto; }
.collab-comment { padding: 8px 0; border-bottom: 1px solid var(--border); }
.collab-comment p { margin: 2px 0 0; white-space: pre-wrap; word-break: break-word; }
.collab-comment-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; }
.collab-target-chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 100px; background: var(--bg-soft); color: var(--muted); font-size: 11.5px; }
.collab-target-chip.is-live { margin: 8px 0 0; background: var(--accent-bg-soft); color: var(--accent-ink); }
.collab-composer { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); }

/* history */
.collab-version { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.collab-version.is-head { background: linear-gradient(90deg, var(--accent-bg-soft), transparent); margin: 0 -8px; padding: 10px 8px; border-radius: 8px; }
.collab-version-no { flex-shrink: 0; width: 38px; font-weight: 700; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.collab-version-text { flex: 1 1 auto; min-width: 0; }

/* activity */
.collab-feed li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 8px 0; border-bottom: 1px solid var(--border); }

/* toast */
.collab-toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 12px);
  z-index: 90; padding: 10px 16px; border-radius: 100px; background: var(--ink); color: var(--on-ink);
  font-size: 13px; font-weight: 600; box-shadow: 0 8px 24px rgba(var(--shadow-ink), 0.3);
  opacity: 0; pointer-events: none; transition: opacity 180ms var(--ease-warm), transform 180ms var(--ease-warm);
  max-width: min(92vw, 480px); text-align: center;
}
.collab-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.collab-toast.is-error { background: var(--danger); color: #fff; }
.collab-toast.is-ok { background: var(--success); color: #fff; }
@media (prefers-reduced-motion: reduce) { .collab-toast { transition: none; } }

/* --- invite page --------------------------------------------------- */
.invite-main { max-width: 560px; margin: 0 auto; padding: 0 16px 64px; }
.marketing-hero--compact + main.invite-main { padding-top: 32px; }
.invite-card .primary-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border: none; border-radius: 10px;
  background: linear-gradient(135deg, var(--accent-dark) 0%, var(--accent) 100%); color: #fff;
  font: inherit; font-weight: 700; font-size: 14px; text-decoration: none; cursor: pointer;
  box-shadow: 0 8px 20px rgba(var(--accent-rgb), 0.22);
}
.invite-card .primary-btn:disabled { opacity: 0.6; cursor: default; }
/* [hidden] alone loses to display:inline-flex (CLAUDE.md, round 61). */
.invite-card .primary-btn[hidden], .collab-sheet [hidden] { display: none !important; }
.invite-card .nav-link { color: var(--muted); font-weight: 600; text-decoration: none; }
.invite-card .nav-link:hover { color: var(--accent-ink); }
.invite-card { background: var(--bg); border: 1px solid var(--border); border-radius: 18px; padding: 24px; box-shadow: 0 12px 40px rgba(var(--shadow-ink), 0.08); }
.invite-eyebrow { margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-ink); }
.invite-card h2 { margin: 0 0 8px; font-family: var(--font-display); font-size: 26px; line-height: 1.15; text-wrap: balance; }
.invite-meta { margin: 0 0 14px; color: var(--muted); font-size: 14px; }
.invite-role { margin: 0 0 18px; padding: 12px 14px; border-radius: 10px; background: var(--accent-bg-soft); color: var(--accent-ink); font-size: 13.5px; line-height: 1.5; }
.invite-role b { display: block; margin-bottom: 2px; text-transform: uppercase; letter-spacing: 0.05em; font-size: 11px; }
.invite-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.invite-status { margin: 12px 0 0; font-size: 13px; color: var(--muted); }
.invite-status.is-error { color: var(--danger); }

/* Round 109: editing your own comment in place. */
.collab-edit-actions { display: inline-flex; gap: 8px; align-items: center; margin-top: 6px; }
.collab-link-btn { border: none; background: none; color: var(--muted); cursor: pointer; font: inherit; font-size: 13px; text-decoration: underline; padding: 0; }