/* ==========================================================================
   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; }