/* ═══════════════════════════════════════════════════════════════════════
   world-social.css — the Social tab in the Guild door (GH #2783, slice 2).

   The tab is the Rooms window's friends list moved (world-social.js), so a
   row is the navigator's row (`.ws-navrow.ws-friend`, world-skin.css) and
   its buttons are the world's planks (`.wr-plank.ws-friend-b`); the HUD
   pass's slate inks come from world-windows-v2.css, which already dresses
   every `.ws-sheet .ws-navrow`. This sheet only says what the tab adds:

     1. a friend row carries up to three planks (Message, Remove, More), so
        when they do not fit beside the name they drop UNDER it, rather than
        the name being cut to "kettlew..." (the served page, 1920x1080).
        With Invite to guild (#2404 GJ2) and the party's Invite a row can
        carry five, and the planks WRAP among themselves too: on the served
        page at 1512x870 the fourth pushed More (Block, mute or report) out
        past the row's edge, where nothing could press it
     2. the Blocked and Muted lists stand a little apart from the people

   Only under the skin: the tab is offered only with the skin on
   (world-shell.js `nativeOnly`), so with it off this matches nothing.

   ── THE LAYER ───────────────────────────────────────────────────────────
   `skin`, where the rows it refines are drawn (#2920 step 3b: a component's
   rules live in its own sheet, still in their layer).
   ═══════════════════════════════════════════════════════════════════════ */
@layer base, module, skin, nerm, corners;

@layer skin {

/* the name keeps room for a whole handle (a guest's is 18 characters); the
   planks wrap under it when the line cannot hold both, still right-aligned */
body.skin-majesty .ws-social .ws-friend { flex-wrap: wrap; row-gap: 4px; }
body.skin-majesty .ws-social .ws-friend > .ws-nav-t { flex: 1 1 11em; }
body.skin-majesty .ws-social .ws-friend-acts {
  margin-left: auto;
  /* never wider than the row: the planks wrap, right-aligned, instead of
     running off its edge (world-skin.css holds them `0 0 auto`, unwrapped) */
  flex: 0 1 auto;
  max-width: 100%;
  flex-wrap: wrap;
  justify-content: flex-end;
  row-gap: 4px;
}

/* the lists are about who you have shut out, not who you play with */
body.skin-majesty .ws-social-lists:not(:empty) { margin-top: 14px; }

} /* end of @layer skin */