/* =========================================================================
   CITY RIVALS — room browser
   Everything here is scoped under .cr-browse, the screen's own root.

   The screen is one panel holding one flat list. A room is a band, not a
   card: hairlines divide them, hover fills the band, and the whole band is
   the button, so the target is a row rather than a chip at the end of one.
   Only three classes exist that the design system did not already have —
   the row, its ghost while loading, and the "Join" affordance on the row.
   ========================================================================= */

.cr-browse{
  flex:1;
  min-height:0;
  overflow-y:auto;
  padding:var(--s4) var(--s3);
}

.cr-browse .browse-panel{
  max-width:880px;
  margin:0 auto;
}

.cr-browse .browse-count{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:44vw;
}
.cr-browse .browse-count.is-stale{color:var(--danger)}

/* ---- the list ----------------------------------------------------------
   Rows bleed to the panel edge so the hover band and the dividers read as
   one list rather than a stack of inset strips. */
.cr-browse .browse-body{padding:0}
.cr-browse .room-list{display:flex;flex-direction:column}

.cr-browse .room-row{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) 234px auto;
  grid-template-areas:"av id facts go";
  align-items:center;
  gap:var(--s3);
  width:100%;
  min-height:60px;
  padding:var(--s2) var(--s3);
  text-align:left;
  transition:background var(--dur) var(--ease);
}
.cr-browse .room-row + .room-row{border-top:1px solid var(--line-soft)}
.cr-browse .room-row:hover:not(:disabled){background:var(--surface-2)}
.cr-browse .room-row:active:not(:disabled){transform:translateY(1px)}
.cr-browse .room-row:disabled{opacity:.42}
.cr-browse .room-row:focus-visible{outline-offset:-2px}

.cr-browse .room-row > .avatar{grid-area:av}

.cr-browse .room-id{grid-area:id;min-width:0;line-height:1.25}
.cr-browse .room-id strong{
  display:block;
  font-family:var(--font-display);
  font-size:var(--t-md);
  font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cr-browse .room-sub{
  display:flex;align-items:baseline;gap:6px;
  min-width:0;
  font-size:var(--t-xs);
  color:var(--ink-3);
}
.cr-browse .room-sub b{font-weight:600;letter-spacing:.04em;color:var(--ink-3)}
.cr-browse .room-sub i{
  font-style:normal;
  min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cr-browse .room-sub i::before{content:"·";margin-right:6px}

.cr-browse .room-facts{grid-area:facts}

/* the trailing affordance: a chip that lights up with the row */
.cr-browse .room-go{
  grid-area:go;
  display:inline-flex;align-items:center;justify-content:center;gap:4px;
  height:28px;padding:0 var(--s2) 0 10px;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--surface-2);
  color:var(--ink-2);
  font-size:var(--t-xs);font-weight:700;
  white-space:nowrap;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
}
.cr-browse .room-go .ic{width:14px;height:14px}
.cr-browse .room-row:hover:not(:disabled) .room-go,
.cr-browse .room-row:focus-visible .room-go{
  background:var(--info);border-color:transparent;color:var(--on-accent);
}
/* the row being acted on stays legible while the rest of the list waits */
.cr-browse .room-row.is-joining{opacity:1;background:var(--surface-2)}
.cr-browse .room-row.is-joining .room-go{
  background:var(--info);border-color:transparent;color:var(--on-accent);
}
.cr-browse .room-row.is-joining .room-go .ic{display:none}

.cr-browse .room-list-note{
  padding:var(--s2) var(--s3) var(--s3);
  border-top:1px solid var(--line-soft);
}

/* ---- loading -----------------------------------------------------------
   Three inert bands the width of the rows that are coming. Nothing pulses:
   this screen has no ambient motion. */
.cr-browse .browse-loading{display:flex;flex-direction:column}
.cr-browse .room-ghost{
  height:60px;
  margin:0 var(--s3);
  background:var(--surface-2);
  border-radius:var(--r);
}
.cr-browse .room-ghost:first-child{margin-top:var(--s3)}
.cr-browse .room-ghost + .room-ghost{margin-top:var(--s2)}
.cr-browse .room-ghost:nth-child(2){opacity:.66}
.cr-browse .room-ghost:nth-child(3){opacity:.38}
.cr-browse .browse-loading .hint{padding:var(--s3);text-align:center}

/* ---- empty / error ------------------------------------------------------ */
.cr-browse .browse-empty{padding:var(--s6) var(--s4)}
.cr-browse .browse-empty .btn{margin-top:var(--s4)}
.cr-browse .browse-empty .hint{margin-top:var(--s3)}

.cr-browse .browse-error{
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3);
  padding:var(--s3);
}
.cr-browse .browse-error .notice{width:100%}

/* ---- foot: the sign-in line, absent entirely when signed in ------------- */
.cr-browse .browse-foot:empty{display:none}
.cr-browse .browse-foot{
  padding:var(--s2) var(--s3);
  border-top:1px solid var(--line);
}
.cr-browse .browse-signin .hint{min-width:0}

/* ---- narrow -------------------------------------------------------------
   The facts drop under the name and the row becomes two lines. */
@media (max-width:620px){
  .cr-browse{padding:var(--s3) var(--s2)}
  .cr-browse .room-row{
    grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:
      "av id go"
      "av facts facts";
    row-gap:var(--s2);
    align-items:center;
    padding:var(--s3);
  }
  .cr-browse .room-row > .avatar{align-self:start;margin-top:2px}
  .cr-browse .room-facts{max-width:320px}
  .cr-browse .browse-empty{padding:var(--s5) var(--s3)}
}

@media (pointer:coarse){
  .cr-browse .room-row{min-height:64px}
  .cr-browse .room-go{height:32px}
}