/* Wik Desktop -- My Rooms (owner C). port: activity_crossroads.xml (pageRooms, crossroadsHeader) + CrossroadsActivity.kt buildRow
   (:873-985), divider (:987), sectionLabel (:1120), noteView (:1127), UnreadBadge.kt, styles_wik.xml WikCard / WikCardLabel,
   CardDrawable.kt. Colours are B's --c-* properties (core/tokens.js applyTheme); sizes that follow the text / icon level are set
   inline by rooms.js (core/size.js). 1 dp = 1 px. */

.rooms-root {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--c-page-bg);
  color: var(--c-text);
  overflow: hidden;
}

/* crossroadsHeader: minHeight 56dp, paddingTop 8dp, paddingStart/End 16dp, centre_vertical, fill = ThemeModule.chromeFill() */
.rooms-header {
  flex: none;
  display: flex;
  align-items: center;
  /* W1/77 A2-1 (W177A2_DESK): minHeight, paddings and box-sizing come from THE slot table (core/header.js dressHeader) */
  background: var(--c-chrome-fill);
}
.rooms-title { flex: none; display: flex; align-items: center; color: var(--c-accent-shown); font-weight: bold; }   /* W1/69 d4 (A-LK-001 names rooms.css:26): the picked accent, not the seed */
.rooms-title img { display: block; }
/* tvCrossroadsWallet: weight 1, marginStart 12dp, gravity end, 12sp c_subtext, one line */
.rooms-wallet-words {
  flex: 1 1 0;
  min-width: 0;
  margin-inline-start: 12px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-subtext);
  font: inherit;
  text-align: end;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.rooms-me { flex: none; margin-inline-start: var(--row-gap); }   /* W1/80 L11: THE grid gap between the header's icons (was 8) */
/* W1/96 DI (his "there is gap reserve between user icon and Wik room icon - make them at this size equal gaps as other gaps"): signed in, the
   wallet words are invisible and only hold the free space (weight 1) -- their 12 px start margin was a second gap beside .rooms-me's; gone,
   so where the slots fill the header the Wik room -> me gap is THE grid gap like every other */
.rooms-header:has(.rooms-me) .rooms-wallet-words { margin-inline-start: 0; }
/* ivCrossroadsWallet: marginStart 8dp; CapsuleDrawable fill + statusFrame */
.rooms-wallet {
  flex: none;
  position: relative;
  margin-inline-start: var(--row-gap);   /* W1/80 L11: THE grid gap (was 8) */
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.rooms-wallet-glyph { position: absolute; inset: 0; display: flex; box-sizing: border-box; }
.rooms-wallet-glyph img, .rooms-wallet-glyph span, .rooms-wallet-glyph svg { width: 100%; height: 100%; object-fit: contain; display: block; }
.rooms-wallet-form { color: var(--c-icon-tint); }
.rooms-wallet-ring { position: absolute; inset: 0; pointer-events: none; }
/* PICS-W182 (D5): the start header's gear after the wallet -- the room gear's rule (room.css .shp-roomgear), one grid gap before it */
.rooms-gear { flex: none; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; background: none;
  color: var(--c-icon-tint); cursor: pointer; margin-inline-start: var(--row-gap); }
/* W1/83 DESKFIX D: Wik's own gear picture (ic_settings), FIT_CENTER in the whole slot, untinted (CrossroadsActivity.kt:3661-3665) */
.rooms-gear > img.wk-drawable { display: block; width: 100%; height: 100%; object-fit: contain; }

/* pageRooms: NestedScrollView > LinearLayout paddingStart/End 16dp, paddingTop 4dp, paddingBottom 24dp */
.rooms-page {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 16px 24px 16px;
}
/* r2 (ICVU): the card label and the card are core's ONE primitive (kit.cardLabel / kit.card, base.css .wk-kit-card*) -- WikCardLabel
   and WikCard (CardDrawable: cardFill, 12dp corner, no shadow); cardRooms' 4dp top / bottom padding is passed by rooms.js. */

/* buildRow: horizontal, centre_vertical, minHeight 56dp, padding 0 / 6dp, selectableItemBackground */
.rooms-row {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 56px;
  padding: 6px 0;
  margin: 0;
  box-sizing: border-box;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}
/* extra (desktop): pointer hover / press feedback where the phone draws its ripple (DELIVERY ledger) */
.rooms-row:hover { background: color-mix(in srgb, var(--c-text) 5%, transparent); }
.rooms-row:active { background: color-mix(in srgb, var(--c-text) 10%, transparent); }
.rooms-row:focus-visible { outline: 2px solid var(--c-accent-shown); outline-offset: -2px; }
/* a fixed row whose screen D1 does not have: drawn, not live (Material's disabled emphasis, 38 %) */
.rooms-row-off { cursor: default; opacity: 0.38; }
.rooms-row-off:hover, .rooms-row-off:active { background: none; }

.rooms-row-icon {
  flex: none;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rooms-row-icon > img, .rooms-row-art { width: 100%; height: 100%; object-fit: contain; display: block; }
/* textCol: weight 1, padding 12dp start / 8dp end */
.rooms-row-text {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 0 8px 0 12px;
}
.rooms-row-title, .rooms-row-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rooms-row-title { color: var(--c-text); }
.rooms-row-sub { color: var(--c-dim); }

/* UnreadBadge.view: c_badge circle, white bold count, centred */
.rooms-badge {
  flex: none;
  box-sizing: border-box;
  background: var(--c-badge);
  color: #FFFFFF;          /* UnreadBadge.kt: Color.WHITE */
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
}
/* the row's action icons: iconChipDp square, marginStart 6dp, padding 2dp, full colour */
.rooms-row-action { flex: none; margin-inline-start: 6px; padding: 2px; box-sizing: border-box; cursor: pointer; }
.rooms-row-action img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* ic_chevron_right 20 x 20dp tinted c_dim (auto-mirrored) */
.rooms-row-chevron { flex: none; width: 20px; height: 20px; color: var(--c-dim); }
.rooms-row-chevron svg { width: 100%; height: 100%; display: block; }
:root[dir="rtl"] .rooms-row-chevron svg { transform: scaleX(-1); }

/* divider: 1dp, cardBorder, alpha 0.5 */
.rooms-divider { height: 1px; background: var(--c-card-border); opacity: 0.5; }
/* sectionLabel: c_dim, padding 14dp top / 4dp bottom */
.rooms-section { color: var(--c-dim); padding: 14px 0 4px 0; }
/* noteView: c_dim, padding 12dp top and bottom */
.rooms-note { color: var(--c-dim); padding: 12px 0; }

/* serverPickerRow: horizontal, padding 8dp top / 4dp bottom; the picker takes the row (weight 1) */
.rooms-picker-row { display: flex; padding: 8px 0 4px 0; }
.rooms-picker {
  flex: 1 1 0;
  min-width: 0;
  min-height: 48px;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--c-text);
  font: inherit;
  cursor: pointer;
}
.rooms-picker option { background: var(--c-card-fill); color: var(--c-text); }

/* W175B BIDI r4 (W1/75): user text takes its FIRST-STRONG paragraph direction, as Android's TextView (TEXT_DIRECTION_FIRST_STRONG) --
   room names and their second line in the start page lists. A Latin line in the ar layout keeps its period on the right. */
/* W175B BIDI r5: a LABEL keeps its place -- its text takes its own direction, its alignment the parent's (Android: the row lays the TextView out) */
.rooms-row-title, .rooms-row-sub { unicode-bidi: plaintext; }
/* W175B BIDI r5b: match-parent did not hold under plaintext (measured); the page direction pins it */
.rooms-row-title:dir(ltr), .rooms-row-sub:dir(ltr) { text-align: left; }
.rooms-row-title:dir(rtl), .rooms-row-sub:dir(rtl) { text-align: right; }

/* W1/80 L3 (§6.539) -- port: CrossroadsActivity.kt:1527 loadMoreRow: Load more under a long room list (Explore, every "More on <host>",
   core/pager.js) -- start-aligned words in the accent, MAIN size (inline), 48 tall, the whole width, the row's ripple; a real button */
.wk-loadmore { display: flex; align-items: center; width: 100%; min-height: 48px; margin: 0; padding: 0; box-sizing: border-box; border: 0;
  background: none; color: var(--c-text-accent); font: inherit; text-align: start; cursor: pointer; }
.wk-loadmore:hover { background: color-mix(in srgb, var(--c-text) 5%, transparent); }
.wk-loadmore:active { background: color-mix(in srgb, var(--c-text) 10%, transparent); }
.wk-loadmore:focus-visible { outline: 2px solid var(--c-accent-shown); outline-offset: -2px; }
/* W1/80 L13: the language picker -- a .rooms-picker that opens the many-choice list; the chosen codes on one line, cut at the end */
.wk-langpick { display: flex; align-items: center; gap: 4px; text-align: start; }
.wk-langpick-words { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-langpick-mark { flex: none; color: var(--c-dim); }