/* ==========================================================================
   ROOMS — browse, create, manage
   Rides on community.css for tokens and buttons. .page-cmp is set by the page,
   so --cmx-* resolve; declared again here so the file stands alone if that
   class is ever dropped (this exact omission has cost two bugs already).
   ========================================================================== */
.rmWrap {
  --cmx-hair:  rgb(255 255 255 / .09);
  --cmx-pane:  rgb(255 255 255 / .04);
  --cmx-pane2: rgb(255 255 255 / .07);
  position: relative; z-index: 1;
  max-width: 72rem; margin-inline: auto;
  padding: var(--s-8) var(--gutter) var(--s-20);
}

.rmHead { display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-6); }
.rmHead h1 { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 500;
  color: var(--text-hi); margin: 0; }
.rmHead p { margin: .3rem 0 0; color: var(--text-lo); font-size: var(--fs-sm); }

.rmSearch { display: flex; gap: var(--s-3); margin: var(--s-6) 0 var(--s-4); }
.rmSearch input {
  flex: 1; padding: .8rem 1.1rem; border-radius: var(--radius-pill);
  border: 1px solid var(--cmx-hair); background: var(--surface-1); color: var(--text-hi);
  font: inherit; font-size: var(--fs-body); outline: none;
}
.rmSearch input:focus { border-color: var(--y-yellow); }

.rmGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: var(--s-4); margin-bottom: var(--s-8); }

/* A COLUMN, not an auto-flow grid. The topic line is one or two lines
   depending on the room, and with align-content:start the buttons landed
   wherever the text ended — so no two cards in a row had their actions on the
   same line. A flex column with a spacer above the actions pins them to a
   common baseline whatever the text does. */
.rmCard {
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-5); min-height: 12.5rem;
  border-radius: var(--radius-lg); border: 1px solid var(--cmx-hair);
  background: var(--surface-1);
  /* No translate on hover — see the note at .cmxRoom in community.css. Moving
     an element on its own hover is a feedback loop, not a flourish. */
  transition: border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
}
.rmCard[hidden] { display: none; }

/* A room with people in it right now is the single most useful thing on this
   page, so it is the only card that gets colour. */
.rmCard.is-live { border-color: rgb(62 158 95 / .4); }
.rmCard.is-live::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 80% at 50% 0%, rgb(62 158 95 / .07), transparent 60%);
}
.rmCard { position: relative; }
.rmCard:hover {
  border-color: rgb(240 198 74 / .45); background: var(--cmx-pane);
  box-shadow: 0 10px 30px -18px rgb(0 0 0 / .8);
}
.rmCard__top { display: flex; gap: var(--s-3); align-items: flex-start; }
.rmCard__emoji { font-size: 1.6rem; line-height: 1; flex: none; }
.rmCard__id { min-width: 0; }
.rmCard__id h3 {
  margin: 0; font-size: var(--fs-body-lg); font-weight: 600; color: var(--text-hi);
  line-height: 1.25;
}
.rmCard__tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .3rem; }
.rmCard__tags:empty { display: none; }

/* Clamped to two lines. One long description used to make its whole row
   taller than every other row on the page. */
.rmCard__topic {
  margin: 0; font-size: var(--fs-sm); color: var(--text-lo); line-height: var(--lh-body);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

.rmTag {
  padding: .1rem .4rem; border-radius: var(--radius-pill);
  border: 1px solid var(--cmx-hair); background: var(--cmx-pane);
  font-size: .55rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-lo);
}
.rmTag--official { border-color: rgb(240 198 74 / .45); color: var(--accent-ink); }
.rmTag--lock { border-color: rgb(255 255 255 / .18); }
.rmTag--own { border-color: rgb(62 158 95 / .45); color: var(--y-green); }

.rmCard__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0;
  font-family: var(--font-mono); font-size: .62rem; color: var(--text-lo); }
.rmCard__dot { opacity: .4; }
.rmCard__new { opacity: .65; }
.rmCard__live { display: inline-flex; align-items: center; gap: .3rem; color: var(--y-green); }
/* margin-top:auto is the spacer — it eats the leftover height so the action
   row sits on the bottom edge of every card regardless of the text above it. */
.rmCard__act { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
  margin-top: auto; padding-top: var(--s-2); }
.rmCard__note { font-size: var(--fs-xs); color: var(--text-lo); }

/* ── invite ──────────────────────────────────────────────────────────────── */
.rmInvite {
  padding: var(--s-6); margin-bottom: var(--s-6);
  border-radius: var(--radius-lg); border: 1px solid rgb(240 198 74 / .4);
  background: linear-gradient(160deg, rgb(240 198 74 / .1), transparent 70%), var(--surface-1);
}
.rmInvite__eyebrow { margin: 0; font-family: var(--font-mono); font-size: .6rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); }
.rmInvite h2 { margin: .3rem 0 0; font-family: var(--font-display); font-size: var(--fs-h3);
  font-weight: 500; color: var(--text-hi); }
.rmInvite__topic { margin: .3rem 0 var(--s-3); color: var(--text-mid); font-size: var(--fs-sm); }

.rmManage {
  padding: var(--s-6); margin-bottom: var(--s-6);
  border-radius: var(--radius-lg); border: 1px solid var(--cmx-hair); background: var(--surface-1);
}
.rmManage header { display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-3); margin-bottom: var(--s-4); }
.rmManage h2 { margin: 0; font-family: var(--font-display); font-size: var(--fs-h3);
  font-weight: 500; color: var(--text-hi); }
.rmPeople { display: grid; gap: var(--s-2); }

.rmInviteBox { padding: var(--s-4); margin-bottom: var(--s-5);
  border-radius: var(--radius); border: 1px dashed var(--cmx-hair); background: var(--cmx-pane); }
.rmInviteBox__row { display: flex; gap: var(--s-2); margin-top: var(--s-3); flex-wrap: wrap; }
.rmInviteBox__row input {
  flex: 1; min-width: 12rem; padding: .55rem .8rem; border-radius: var(--radius);
  border: 1px solid var(--cmx-hair); background: var(--surface-0); color: var(--text-mid);
  font-family: var(--font-mono); font-size: var(--fs-xs); outline: none;
}

/* ── create ──────────────────────────────────────────────────────────────── */
.rmNew {
  position: fixed; inset: 0; z-index: 420;
  display: grid; place-items: center; padding: clamp(.5rem, 3vw, 2rem);
  --cmx-hair: rgb(255 255 255 / .09); --cmx-pane: rgb(255 255 255 / .04);
  --cmx-pane2: rgb(255 255 255 / .07);
  animation: cmxFadeIn .2s var(--ease-out);
}
.rmNew[hidden] { display: none; }
.rmNew__veil { position: absolute; inset: 0; border: 0; cursor: pointer;
  background: rgb(3 3 5 / .8); backdrop-filter: blur(10px); }
.rmNew__box {
  position: relative; z-index: 1; width: min(34rem, 100%); max-height: 92dvh;
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--cmx-hair); background: var(--surface-1);
  box-shadow: 0 50px 130px -40px rgb(0 0 0 / .95);
  animation: cmxPeekIn .26s var(--ease-out);
}
.rmNew__box > header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--cmx-hair);
  background: var(--cmx-pane);
}
.rmNew__box > header h2 { margin: 0; font-family: var(--font-display);
  font-size: var(--fs-h3); font-weight: 500; color: var(--text-hi); }
.rmNew__body { padding: var(--s-5); overflow-y: auto; min-height: 0; display: grid; gap: var(--s-4);
  scrollbar-width: thin; scrollbar-color: rgb(240 198 74 / .5) transparent; }
.rmNew__foot { display: flex; gap: var(--s-3); padding: var(--s-4) var(--s-5);
  border-top: 1px solid var(--cmx-hair); background: var(--cmx-pane); }
.rmNew__err { margin: 0; font-size: var(--fs-sm); color: var(--y-red); }
.rmNew__err[hidden] { display: none; }
.pdField--emoji input { width: 5rem; text-align: center; font-size: 1.2rem; }
[data-policy][hidden] { display: none; }

@media (max-width: 46rem) {
  .rmWrap { padding: var(--s-5) var(--s-3) var(--s-16); }
  .rmGrid { grid-template-columns: minmax(0, 1fr); }
  .rmNew { padding: 0; }
  .rmNew__box { width: 100%; height: 100dvh; max-height: none; border-radius: 0; border: 0; }
  .rmSearch input { font-size: 1rem; }   /* 16px — below it iOS zooms on focus */
}
@media (prefers-reduced-motion: reduce) { .rmNew, .rmNew__box { animation: none; } }


/* ── FILTER CHIPS ───────────────────────────────────────────────────────────
   One grid filtered in place, rather than a "Your rooms" grid stacked above a
   "Browse" grid that repeated the same cards. A room you own appeared twice,
   and the page grew longer the more rooms you joined.
   ══════════════════════════════════════════════════════════════════════════ */
.rmChips {
  display: flex; gap: .4rem; flex-wrap: wrap; margin: 0 0 var(--s-4);
}
.rmChip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .9rem; border-radius: var(--radius-pill); cursor: pointer;
  border: 1px solid var(--cmx-hair); background: var(--cmx-pane);
  font: inherit; font-size: var(--fs-xs); font-weight: 600; color: var(--text-lo);
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
}
.rmChip i { font-style: normal; font-family: var(--font-mono); font-size: .6rem; opacity: .7; }
.rmChip:hover { color: var(--text-hi); border-color: rgb(255 255 255 / .18); }
.rmChip.is-on { background: var(--y-yellow); color: var(--y-black); border-color: transparent; }
.rmChip.is-on i { opacity: .75; }
.rmChip--live.is-on { background: var(--y-green); color: var(--y-white); }

.rmEmpty { grid-column: 1 / -1; margin: var(--s-6) 0; text-align: center;
  font-size: var(--fs-sm); color: var(--text-lo); }
.rmEmpty[hidden] { display: none; }

/* ── Manage: settings, add people, members ──────────────────────────────── */
.rmSettings, .rmAdd {
  padding: var(--s-4); margin-bottom: var(--s-5);
  border: 1px solid var(--cmx-hair); border-radius: var(--radius); background: var(--cmx-pane);
}
.rmSettings__set { border: 0; padding: 0; margin: 0 0 var(--s-4); display: grid; gap: .45rem; }
.rmSettings__set legend { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-lo); margin-bottom: .35rem; }
.rmOpt { display: flex; gap: .7rem; align-items: flex-start; padding: .65rem .8rem; cursor: pointer;
  border: 1px solid var(--cmx-hair); border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out); }
.rmOpt:has(input:checked) { border-color: rgb(240 198 74 / .55); background: rgb(240 198 74 / .06); }
.rmOpt input { margin-top: .2rem; accent-color: var(--y-yellow); }
.rmOpt span, .rmAdd__row span { display: grid; gap: .1rem; min-width: 0; }
.rmOpt b, .rmAdd__row b { color: var(--text-hi); font-size: var(--fs-sm); font-weight: 600; }
.rmOpt i, .rmAdd__row i { color: var(--text-mid); font-size: .78rem; font-style: normal; }
.rmSettings__foot { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-3); }
.rmSettings__foot .rmCard__note { margin: 0; }

.rmAdd__q { width: 100%; margin: var(--s-2) 0; padding: .55rem .8rem; border-radius: var(--radius-pill);
  border: 1px solid var(--cmx-hair); background: var(--surface-1, transparent); color: var(--text-hi); }
.rmAdd__list { display: grid; gap: .3rem; max-height: 18rem; overflow-y: auto; padding-right: .2rem; }
.rmAdd__row { display: flex; align-items: center; gap: .7rem; padding: .45rem .6rem; cursor: pointer;
  border-radius: var(--radius); }
.rmAdd__row:hover { background: var(--cmx-pane2); }
.rmAdd__row:has(input:checked) { background: rgb(240 198 74 / .08); }
.rmAdd__row input { accent-color: var(--y-yellow); }
.rmAdd__row[hidden] { display: none; }
.pdN--quiet { background: var(--cmx-pane2); color: var(--text-mid); }

/* ── Manage: every block is the same card with the same rhythm ────────────
   Settings and Add people were cards while Requests and Members were loose
   headings, so the page had four spacings. The Add button also sat on the
   card's bottom edge, and the member-count pill hung below the heading's
   baseline. One card, one heading row, one gap. */
.rmSettings, .rmAdd, .rmSec {
  display: grid; gap: var(--s-3);
  padding: var(--s-5); margin: 0 0 var(--s-5);
  border: 1px solid var(--cmx-hair); border-radius: var(--radius); background: var(--cmx-pane);
}
.rmSec:last-child { margin-bottom: 0; }
.rmSec__h { display: flex; align-items: center; gap: .5rem; margin: 0 !important; line-height: 1.2; }
.rmSec__h .pdN { margin: 0; line-height: 1; display: inline-grid; place-items: center; min-height: 1.3rem; }
.rmSettings > .rmCard__note, .rmAdd > .rmCard__note, .rmSec > .rmCard__note { margin: 0; }
.rmSettings__set { margin: 0; }
.rmAdd__q { margin: 0; }
.rmSettings__foot { margin-top: var(--s-1, .25rem); flex-wrap: wrap; }
.rmSettings__foot .cmxBtn { min-height: 2.5rem; padding-inline: 1.2rem; }
.rmSec__empty { max-width: none; padding: var(--s-4); border-radius: var(--radius); border: 1px dashed var(--cmx-hair);
  text-align: center; color: var(--text-lo); }
.rmSec .dmReq { margin: 0; }

@media (max-width: 46rem) {
  .rmManage { padding: var(--s-4); }
  .rmSettings, .rmAdd, .rmSec { padding: var(--s-4); }
  .rmManage header { flex-wrap: wrap; }
  .rmSettings__foot .cmxBtn { flex: 1; justify-content: center; }
  .rmInviteBox__row input { min-width: 0; flex-basis: 100%; }
}
.rmSettings > .rmCard__note, .rmAdd > .rmCard__note { max-width: none; }