/* Multi-person campus proposal surface shared by mobile H5 and desktop Web. */
.social-proposal-modal-open { overflow: hidden; }

#matchView {
  --social-brand: var(--hz-teal-500, var(--brand, #57B7B7));
  --social-brand-deep: var(--hz-teal-600, var(--brand-deep, #3E9595));
  --social-brand-soft: var(--hz-teal-100, var(--brand-soft, #E6F3F1));
  --social-warm: var(--hz-coral-500, var(--warm, #FF9A3D));
  --social-warm-deep: var(--hz-coral-600, var(--warm-deep, #E87522));
  --social-warm-soft: var(--hz-coral-100, var(--warm-soft, #FDEBD8));
  --social-ink: var(--hz-ink, var(--ink, #2A3A2E));
  --social-muted: var(--hz-muted, var(--muted, #6F7A70));
}

#matchView .social-proposal-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(43, 105, 101, 0.22);
  border-left: 5px solid var(--social-warm);
  border-radius: 8px;
  color: var(--social-ink);
  background: #fff;
  box-shadow: 0 18px 42px -30px rgba(34, 65, 57, 0.5);
}

#matchView .social-proposal-card.is-forming { border-left-color: var(--social-warm-deep); }
#matchView .social-proposal-card.is-confirmed,
#matchView .social-proposal-card.is-starting_soon,
#matchView .social-proposal-card.is-in_progress { border-left-color: var(--social-brand-deep); }
#matchView .social-proposal-card.is-completed { border-left-color: #6f7d78; }

.social-proposal-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 24px 26px 20px;
  border-bottom: 1px solid rgba(43, 105, 101, 0.12);
}

.social-proposal-card-head > div { min-width: 0; flex: 1; }
.social-proposal-card-head span,
.social-proposal-sheet > header span,
.social-room-sheet > header span {
  display: block;
  color: var(--social-brand-deep);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0;
}

.social-proposal-card-head h3 {
  margin: 5px 0 7px;
  overflow-wrap: anywhere;
  color: var(--social-ink);
  font-size: 28px;
  line-height: 1.16;
  letter-spacing: 0;
}

.social-proposal-card-head p {
  margin: 0;
  color: var(--social-muted);
  font-size: 13px;
  line-height: 1.5;
}

.social-proposal-card-state {
  display: grid;
  flex: 0 0 150px;
  gap: 8px;
  min-width: 0;
}

.social-proposal-card-state > strong {
  flex: 0 0 auto;
  padding: 8px 10px;
  border: 1px solid rgba(47, 127, 122, 0.18);
  border-radius: 6px;
  color: var(--social-brand-deep);
  background: var(--social-brand-soft);
  font-size: 12px;
  line-height: 1.3;
  text-align: center;
}

#matchView .social-proposal-head-action {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  margin: 0;
  padding: 8px 10px;
  font-size: 11px;
}

.social-proposal-ticket {
  display: grid;
  grid-template-columns: 1.2fr 1fr 0.75fr;
  border-bottom: 1px solid rgba(43, 105, 101, 0.12);
  background: color-mix(in srgb, var(--social-brand-soft) 62%, white);
}

.social-proposal-ticket > div {
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
  padding: 17px 24px;
}

.social-proposal-ticket > div + div { border-left: 1px solid rgba(43, 105, 101, 0.12); }
.social-proposal-ticket small,
.social-proposal-reasons > small,
.social-proposal-next small,
.social-proposal-group > div > small,
.social-proposal-detail-facts small {
  color: #718079;
  font-size: 10px;
  font-weight: 800;
}

.social-proposal-ticket strong {
  overflow-wrap: anywhere;
  color: #203b33;
  font-size: 15px;
  line-height: 1.35;
}

.social-proposal-ticket em,
.social-proposal-detail-facts em {
  color: var(--social-brand-deep);
  font-size: 10px;
  font-style: normal;
}

.social-proposal-reasons {
  display: grid;
  gap: 7px;
  margin: 20px 26px 16px;
  padding-left: 14px;
  border-left: 3px solid var(--social-warm);
}

.social-proposal-reasons > small { color: var(--social-warm-deep); }
.social-proposal-reasons p {
  position: relative;
  margin: 0;
  padding-left: 14px;
  color: #45564f;
  font-size: 12px;
  line-height: 1.45;
}

.social-proposal-reasons p::before {
  content: "";
  position: absolute;
  top: 0.58em;
  left: 1px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--social-warm);
}

.social-proposal-group-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  align-items: center;
  gap: 18px;
  padding: 0 26px 18px;
}

.social-proposal-members {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.social-proposal-members li {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.social-proposal-members li > span,
.social-proposal-members li > img {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(47, 127, 122, 0.14);
  border-radius: 50%;
  object-fit: cover;
  color: #367a76;
  background: #edf6f3;
  font-size: 13px;
  font-weight: 850;
}

.social-proposal-members li.is-open > span {
  border-style: dashed;
  color: #8e9b96;
  background: #fff;
}

.social-proposal-members li strong,
.social-proposal-members li small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.social-proposal-members li strong { color: #344941; font-size: 12px; }
.social-proposal-members li small { margin-top: 2px; color: #7c8984; font-size: 10px; }

.social-proposal-members.is-compact {
  display: flex;
  align-items: center;
  gap: 0;
}

.social-proposal-members.is-compact li { display: block; width: 34px; }
.social-proposal-members.is-compact li + li { margin-left: -7px; }
.social-proposal-members.is-compact li > div { display: none; }
.social-proposal-members.is-compact li > span,
.social-proposal-members.is-compact li > img {
  width: 34px;
  height: 34px;
  border: 3px solid #fff;
  font-size: 10px;
}

.social-proposal-progress { display: grid; gap: 7px; }
.social-proposal-progress > span {
  height: 6px;
  overflow: hidden;
  border-radius: 3px;
  background: #dfe8e4;
}

.social-proposal-progress b { display: block; height: 100%; border-radius: inherit; background: var(--social-brand); }
.social-proposal-progress small { color: #61716a; font-size: 10px; font-weight: 750; }

.social-proposal-next {
  display: grid;
  gap: 4px;
  margin: 0 26px 18px;
  padding: 12px 14px;
  border-left: 3px solid var(--social-warm);
  background: color-mix(in srgb, var(--social-warm-soft) 72%, white);
}

.social-proposal-next small { color: var(--social-warm-deep); }
.social-proposal-next strong { color: #3b4b44; font-size: 12px; font-weight: 700; line-height: 1.5; }

#matchView .social-proposal-main-action {
  display: none;
  width: calc(100% - 52px);
  min-height: 46px;
  margin: 0 26px 10px;
}

.social-proposal-trust {
  margin: 0;
  padding: 0 26px 18px;
  color: #7f8d87;
  font-size: 10px;
  text-align: center;
}

.social-proposal-empty-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid rgba(43, 105, 101, 0.12);
  background: #f5f9f7;
}

.social-proposal-empty-steps span {
  padding: 16px 12px;
  color: #397e79;
  font-size: 11px;
  font-weight: 750;
  text-align: center;
}

.social-proposal-empty-steps span + span { border-left: 1px solid rgba(43, 105, 101, 0.12); }

.social-proposal-backdrop,
.social-room-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1800;
  display: grid;
  place-items: center;
  padding: 28px;
  background: rgba(26, 40, 35, 0.58);
  backdrop-filter: blur(10px);
}

.social-proposal-backdrop.hidden,
.social-room-backdrop.hidden { display: none; }

.social-proposal-sheet,
.social-room-sheet {
  position: relative;
  width: min(100%, 760px);
  max-height: calc(100dvh - 56px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 8px;
  background: #fffdfa;
  box-shadow: 0 30px 90px rgba(17, 37, 31, 0.32);
}

.social-proposal-sheet {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.social-proposal-sheet > header {
  padding: 28px 70px 20px 28px;
  border-bottom: 1px solid #dce5e1;
  background: #f3f8f6;
}

.social-proposal-sheet > header h2,
.social-room-sheet > header h2 {
  margin: 5px 0 4px;
  overflow-wrap: anywhere;
  color: #1e332b;
  font-size: 27px;
  line-height: 1.16;
  letter-spacing: 0;
}

.social-proposal-sheet > header p,
.social-room-sheet > header p { margin: 0; color: #68766f; font-size: 12px; line-height: 1.45; }

.social-proposal-close {
  position: absolute;
  z-index: 2;
  top: 18px;
  right: 18px;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid #d6e1dd;
  border-radius: 50%;
  color: #54645d;
  background: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.social-proposal-detail-scroll { min-height: 0; overflow-y: auto; }
.social-proposal-detail-facts {
  display: grid;
  grid-template-columns: 1.2fr 1fr 0.75fr;
  border-bottom: 1px solid #dce5e1;
}

.social-proposal-detail-facts > div { display: grid; align-content: start; gap: 4px; min-width: 0; padding: 18px 26px; }
.social-proposal-detail-facts > div + div { border-left: 1px solid #dce5e1; }
.social-proposal-detail-facts strong { overflow-wrap: anywhere; color: #253d34; font-size: 14px; line-height: 1.4; }

.social-proposal-group {
  display: grid;
  grid-template-columns: 185px minmax(0, 1fr);
  gap: 26px;
  padding: 2px 28px 22px;
}

.social-proposal-group > div { display: grid; align-content: start; gap: 5px; }
.social-proposal-group > div > strong { color: var(--social-brand-deep); font-size: 18px; }
.social-proposal-group > div > span { color: #74817b; font-size: 11px; }
.social-proposal-group .social-proposal-members { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.social-proposal-safety {
  margin: 0;
  padding: 18px 28px 20px;
  border-top: 1px solid #dce5e1;
  background: #f5f9f7;
}

.social-proposal-safety strong { color: var(--social-brand-deep); font-size: 12px; }
.social-proposal-safety p { margin: 5px 0 0; color: #66756e; font-size: 11px; line-height: 1.55; }
.social-proposal-sheet > footer { padding: 16px 28px 22px; border-top: 1px solid #dce5e1; background: #fff; }

.social-proposal-detail-actions,
.social-proposal-confirm > div {
  display: grid;
  grid-template-columns: minmax(120px, 0.42fr) minmax(0, 1fr);
  gap: 10px;
}

.social-proposal-detail-actions button,
.social-proposal-confirm > div > button,
.social-proposal-feedback > button { width: 100%; min-width: 0; margin: 0; }

.social-proposal-confirm { display: grid; gap: 8px; }
.social-proposal-confirm > strong { color: #223a31; font-size: 14px; }
.social-proposal-confirm > p { margin: 0 0 6px; color: #697871; font-size: 11px; line-height: 1.5; }
.social-proposal-reason-options { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.social-proposal-reason-options button,
.social-room-departure button {
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid #cddbd6;
  border-radius: 6px;
  color: #326f6b;
  background: #f7faf9;
  font: inherit;
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
}

.social-proposal-feedback { display: grid; gap: 12px; }
.social-proposal-feedback h3 { margin: 0; color: #20352d; font-size: 17px; }
.social-proposal-feedback fieldset { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; border: 0; }
.social-proposal-feedback legend { width: 100%; margin-bottom: 6px; color: #66756f; font-size: 11px; font-weight: 750; }
.social-proposal-feedback label { display: flex; align-items: center; gap: 6px; color: #344840; font-size: 12px; }
.social-proposal-rating { display: flex; gap: 6px; }
.social-proposal-rating input { position: absolute; opacity: 0; pointer-events: none; }
.social-proposal-rating span { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid #cad9d4; border-radius: 50%; background: #fff; }
.social-proposal-rating input:checked + span { border-color: var(--social-brand-deep); color: #fff; background: var(--social-brand-deep); }
.social-proposal-safe { margin-bottom: 2px; }

.social-room-sheet {
  display: grid;
  grid-template-rows: auto auto minmax(220px, 1fr) auto;
  width: min(100%, 860px);
  height: min(760px, calc(100dvh - 56px));
  background: #f5f7f5;
}

.social-room-sheet.has-departure { grid-template-rows: auto auto auto minmax(220px, 1fr) auto; }

.social-room-sheet > header {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 18px 22px;
  border-bottom: 1px solid #d7e1dd;
  background: #fff;
}

.social-room-sheet > header > button {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid #d6e1dd;
  border-radius: 50%;
  color: var(--social-brand-deep);
  background: #fff;
  font-size: 21px;
  cursor: pointer;
}

.social-room-sheet > header h2 { font-size: 20px; }
.social-room-members { padding: 12px 22px; border-bottom: 1px solid #d7e1dd; background: #fff; }
.social-room-departure { display: flex; align-items: center; gap: 8px; padding: 10px 22px; border-bottom: 1px solid #d7e1dd; background: #fff9ec; }
.social-room-departure small { margin-right: auto; color: #8d651d; font-size: 10px; font-weight: 800; }
.social-room-departure button { min-height: 34px; background: #fff; }

.social-room-messages {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 22px;
}

.social-room-messages article { align-self: flex-start; max-width: min(75%, 520px); }
.social-room-messages article.is-mine { align-self: flex-end; }
.social-room-messages article.is-system { align-self: center; max-width: 90%; text-align: center; }
.social-room-messages article small { display: block; margin: 0 5px 3px; color: #74817b; font-size: 9px; }
.social-room-messages article p { margin: 0; padding: 10px 12px; border-radius: 8px; color: #34483f; background: #fff; box-shadow: inset 0 0 0 1px #dbe4e0; font-size: 12px; line-height: 1.5; }
.social-room-messages article.is-mine p { color: #fff; background: var(--social-brand-deep); box-shadow: none; }
.social-room-messages article.is-system p { padding: 6px 10px; color: #6b7872; background: transparent; box-shadow: none; font-size: 10px; }
.social-room-messages time { display: block; margin: 3px 5px 0; color: #8a9691; font-size: 8px; text-align: right; }
.social-room-empty { margin: auto; color: #7a8882; font-size: 12px; }

.social-room-compose {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px;
  gap: 9px;
  padding: 14px 18px;
  border-top: 1px solid #d7e1dd;
  background: #fff;
}

.social-room-compose label { min-width: 0; }
.social-room-compose input { width: 100%; height: 44px; padding: 0 14px; border: 1px solid #d1dcd8; border-radius: 8px; color: #263a32; background: #f7f9f8; font: inherit; font-size: 12px; }
.social-room-compose button { width: 100%; min-width: 0; margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

@media (max-width: 700px) {
  .social-proposal-card-head { gap: 10px; padding: 18px 16px 15px; }
  .social-proposal-card-head h3 { font-size: 21px; }
  .social-proposal-card-state { flex-basis: 112px; }
  .social-proposal-card-state > strong { font-size: 10px; }
  #matchView .social-proposal-head-action { display: none; }
  .social-proposal-ticket { grid-template-columns: 1fr 1fr; }
  .social-proposal-ticket > div { padding: 13px 14px; }
  .social-proposal-card > .social-proposal-ticket > div:nth-child(3) { display: none; }
  .social-proposal-card > .social-proposal-reasons p:nth-of-type(n + 3) { display: none; }
  .social-proposal-reasons { margin: 16px 17px 14px; }
  .social-proposal-group-row { grid-template-columns: minmax(0, 1fr) 120px; gap: 10px; padding: 0 17px 15px; }
  .social-proposal-next { margin: 0 17px 15px; }
  #matchView .social-proposal-main-action { display: block; width: calc(100% - 34px); margin: 0 17px 9px; }
  .social-proposal-trust { padding: 0 17px 15px; }
  .social-proposal-empty-steps span { padding: 13px 7px; font-size: 9px; }
  .social-proposal-backdrop,
  .social-room-backdrop { padding: 12px; }
  .social-proposal-sheet { max-height: calc(100dvh - 24px); }
  .social-proposal-sheet > header { padding: 22px 58px 16px 18px; }
  .social-proposal-sheet > header h2 { font-size: 22px; }
  .social-proposal-close { top: 13px; right: 13px; width: 36px; height: 36px; }
  .social-proposal-detail-facts { grid-template-columns: 1fr 1fr; }
  .social-proposal-detail-facts > div { padding: 14px 16px; }
  .social-proposal-detail-facts > div:nth-child(3) { grid-column: 1 / -1; border-top: 1px solid #dce5e1; border-left: 0; }
  .social-proposal-sheet .social-proposal-reasons { margin-right: 18px; margin-left: 18px; }
  .social-proposal-group { grid-template-columns: 1fr; gap: 13px; padding: 0 18px 18px; }
  .social-proposal-group .social-proposal-members { grid-template-columns: 1fr 1fr; }
  .social-proposal-safety { padding: 15px 18px; }
  .social-proposal-sheet > footer { padding: 13px 18px 17px; }
  .social-proposal-detail-actions,
  .social-proposal-confirm > div { grid-template-columns: 1fr 1.35fr; }
  .social-proposal-reason-options { grid-template-columns: 1fr !important; }
  .social-room-sheet { width: 100%; height: calc(100dvh - 24px); }
  .social-room-sheet > header { padding: 14px; }
  .social-room-members { padding: 10px 14px; }
  .social-room-departure { flex-wrap: wrap; padding: 9px 14px; }
  .social-room-departure small { width: 100%; margin-right: 0; }
  .social-room-departure button { flex: 1 1 30%; }
  .social-room-messages { padding: 14px; }
  .social-room-compose { grid-template-columns: minmax(0, 1fr) 72px; padding: 10px; }
}

@media (max-width: 380px) {
  .social-proposal-card-head { flex-direction: column; }
  .social-proposal-card-state { width: auto; flex: 0 0 auto; align-self: flex-start; }
  .social-proposal-group-row { grid-template-columns: 1fr; }
  .social-proposal-detail-actions,
  .social-proposal-confirm > div { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .social-proposal-backdrop,
  .social-room-backdrop { scroll-behavior: auto; }
}