/* room.css -- owner D. The room screen's chrome (activity_main.xml): toolbar, room rail, Users row, the list and the
   jump pill; F's folder bar and composer sit in .room-folders / .room-composer. Prefix .room- only (CONTRACT §8.9). */

.room-screen {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--c-page-bg);
  color: var(--c-text);
  position: relative;
}

/* toolbar: paddingStart 16dp, end 4dp, top 3dp; the wordmark, then the chips one gap apart (dockHeaderRight :3988) */
.room-toolbar {
  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); the
     hairline is painted (an inset shadow), so it takes no layout and the slots' y equals the start page's */
  background: var(--c-chrome-fill);
  /* W1/80 L11: no hairline under the toolbar (his "remove the long lines"); its icons sit on THE grid (core/header.js GRID) */
  flex: 0 0 auto;
  min-width: 0;
  /* W1/93 USERSROW R2: its FOOT (as every row below has one) is the slot table's padding-bottom (core/header.js HEADER_SLOTS, --row-foot),
     inside the header's one height -- no border here */
}
.room-wordmark { border: 0; padding: 0; margin: 0; background: transparent; cursor: pointer; display: flex; }
.room-wordmark img { display: block; width: auto; }
/* W1/102 R100 J (CONTRACT_R100 AM3; his "only once at leftmost corner, so when both blocks are opened, only the settings block has it"):
   two panes with the side panel's start header shown (app.js paneMark -> #wk-app[data-mark="left"]) -- the room's mark steps out (its
   only job, openCrossroads, is the left mark's there); a frame page on top, the panel aside or one pane: the room's mark returns */
.wk-app[data-mark="left"] .room-wordmark { display: none; }
.room-toolchips { display: flex; align-items: center; gap: 0; /* W1/80 L11: each chip carries THE grid gap as its end margin (chip.js) */ min-width: 0; overflow-x: auto; scrollbar-width: none;
  padding-block: var(--row-foot, 0px); margin-block: calc(-1 * var(--row-foot, 0px)); }   /* W1/83 DESKFIX G3: room for the lit ring above / below (this scroller clips both axes); the margin keeps the header's height */
.room-chipconn, .room-chiproom { display: flex; align-items: center; }
/* W1/77 A2-9 (W177A2_DESK): the room's name beside its icon -- the free space up to the gear, one line, ellipsized */
.room-headname { flex: 1 1 0; min-width: 0; margin-inline: 5px 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--c-text);
  font-weight: var(--w-base); }   /* AND-FRAME round 5: 5 dp after the picture (the chip words' own gap), SizeTokens.main, plain */
.room-headname[hidden] { display: none; }
.room-chiproom { overflow: visible; position: relative; }   /* W1/83 DESKFIX G3: the lit ring is drawn outside the picture (was overflow hidden -- the picture is clipped by its own squircle, identity.js) */
.room-headsel { position: absolute; pointer-events: none; }   /* W1/83 DESKFIX G3: room.js paintHeadLit */
.room-headsel[hidden] { display: none; }   /* W2a: no 30% radius -- the room picture inside is already WikShape.squircle (identity.js clip; IconPackManager.kt:380) */
.room-headart { display: block; }

/* the two rows of chips: horizontal scrollers. W1/80 L11 (his "Remove the long line lines ... unify them to create equally spaced grid"):
   no hairline; ONE gap, --row-gap (size.js rowChipGapPx), before each row (from the row above / the header) and at its start, and after
   each chip (its end margin, chip.js) -- every chip of the rails and the header is one gap from its neighbours, across and down.
   W1/83 DESKFIX A (his "the active border gets cropped"): + a FOOT of --row-foot (size.js rowFootPadPx = ceil(gap / 2), the lit ring's
   cap): the ring is drawn outside the chip and this scroller clips both axes, so without the foot its bottom edge was cut.
   W1/93 USERSROW (his "equal grid both vertically and horizontally", "use unified paddings"): the gap ABOVE the row is its LEAD, the
   same --row-foot -- the previous row's foot + this lead = --row-vgap (size.js rowVGapPx), the step down equals the step across (the
   chips' end margin, --row-gap) instead of gap + foot; the ring keeps its room on both edges */
.room-bar {
  display: flex;
  align-items: center;
  gap: 0;
  padding: var(--row-foot, 0px) 0 var(--row-foot, 0px) var(--row-gap);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  flex: 0 0 auto;
  background: var(--c-chrome-fill);
}
.room-bar::-webkit-scrollbar { display: none; }
.room-bar[hidden] { display: none; }
.room-folders:empty { display: none; }
.room-folders { flex: 0 0 auto; }

.room-arrow { flex: 0 0 auto; }   /* the arrow is B's chip (r3 R3-2); nothing of its own look here */
.room-railchip { cursor: pointer; flex: 0 0 auto; }
.room-railchip:focus-visible { outline: 2px solid var(--c-accent-shown); outline-offset: 1px; }
.room-more {
  flex: 0 0 auto; border: 0; margin: 0; padding: 0 10px; cursor: pointer;
  border-radius: 999px; background: var(--c-card-fill); color: var(--c-icon); line-height: 1;
}

/* the plain chip, used only until B's chip.js is shipped (IconChip: capsule, square art flush left, words, frame) */
.room-chip {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 999px; background: var(--c-card-fill);
  box-shadow: inset 0 0 0 2px var(--chip-frame, transparent);
  padding-inline-end: 0; position: relative; color: var(--c-icon);
}
.room-chip-label { padding-inline-end: 12px; white-space: nowrap; font-size: 13px; }
.room-chip-art { display: flex; border-radius: 999px; overflow: hidden; }
.room-chip.room-chip-on { background: var(--c-active-fill, color-mix(in srgb, var(--c-accent-shown) 35%, var(--c-card-fill))); }
/* W1/73 BTNFILL (W173BTNFILL): Fill -- the plate (above) and the plate's ink; Outline keeps the d8r2 mix and ink (the property absent) */
.room-chip.room-chip-on .room-chip-label { color: var(--c-active-ink, inherit); }
.room-chip-badge {
  position: absolute; top: -2px; left: 30px; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box;
  border-radius: 8px; background: var(--c-badge, #675ff5); color: #fff; font-size: 10px; line-height: 16px; text-align: center;
}
.room-art { display: block; object-fit: cover; }
.room-art-char { display: inline-flex; align-items: center; justify-content: center; }

/* the list and the pill */
.room-listwrap { position: relative; flex: 1 1 auto; min-height: 0; display: flex; }
.room-list {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding-top: 4px;
  padding-bottom: 4px;
  box-sizing: border-box;
  min-width: 0;
  overflow-anchor: none;        /* the end is held by room.js (stackFromEnd), not by the browser's scroll anchoring */
  position: relative;           /* the rows' offsetTop is measured from the list (read marks, scroll to a post) */
}
/* D3 (B3, CONSULT_7 §2): the floating pills' ONE corner -- the Jump pill lowest, "Stop anthem" standing on it (column-reverse),
   FloatingPill.GAP_DP 8 between; max 75 % of the pane, the words ellipsized from the end (AnthemStopButton.kt). The corner itself
   takes no pointer: only a shown pill does. */
.room-floaters {
  position: absolute;
  inset-inline-end: 6px;
  bottom: 8px;                  /* FloatingPill.GAP_DP above the send bar */
  max-width: 75%;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: 8px;
  pointer-events: none;
}
.room-jump {
  position: static;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: auto;
  border: 0;
  margin: 0;
  padding: 8px 14px;            /* PAD_V_DP 8 */
  border-radius: 999px;
  background: var(--c-card-fill);
  color: var(--c-text);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
  cursor: pointer;
  white-space: nowrap;
}
.room-jump[hidden] { display: none; }
.room-composer { flex: 0 0 auto; }
.room-composer:empty { display: none; }

/* D2 (CONTRACT_D2 §3.3): a room on its way (the switch dialled, its AUTH_OK not yet in) keeps the room it replaces ON SCREEN --
   nothing is emptied, no bar moves -- but nothing of it is live: the list and the composer take no input until the new room's
   first complete render swaps in. */
.room-screen[data-pending] .room-list, .room-screen[data-pending] .room-composer, .room-screen[data-pending] .room-folders { pointer-events: none; }
/* the screen's FIRST room: unseen until its first complete render (AUTH_OK, or the connect timeout) -- never popped in bar by bar */
.room-screen[data-first] { visibility: hidden; }
/* D2 seams: the room chip opens the Room page only when pack J provides it; the toolbar's pack actions (room.toolbarActions) */
.room-chiproom.room-chip-tappable { cursor: pointer; }
.room-toolactions { display: flex; align-items: center; gap: 4px; }
.room-toolactions:empty { display: none; }
.room-toolact { display: flex; align-items: center; justify-content: center; color: var(--c-icon-tint); flex: 0 0 auto; }
.room-toolact .post-glyph { width: 60%; height: 60%; }
/* r2 (R3 L2): a long list is cheap -- a post row off screen is not laid out or painted (content-visibility), it holds the height it
   last had (contain-intrinsic-size auto); Android draws only the rows in view (RecyclerView). Nothing is rebuilt by it. */
.room-rows > .post-row { content-visibility: auto; contain-intrinsic-size: auto 140px; }

/* ── K (wave 2) ─────────────────────────────────────────────────────────────────────────────────────────────────────────── */
/* the bars menu: the three rows' order (style.order from bars_order) and a hidden row -- in place, no bar rebuilt */
.room-listwrap { order: 10; }
.room-composer { order: 11; }
.room-rail[data-bars-off], .room-presence[data-bars-off], .room-folders[data-bars-off] { display: none; }
/* the rail's drag: the held chip lifts while it moves among its neighbours */
.room-railchip.room-dragging { opacity: .75; cursor: grabbing; }

/* the file post editor (showFileEditDialog): 72 dp thumbnails, a remove disc, the caption */
.rx-fe { display: flex; flex-direction: column; gap: 8px; padding: 8px 16px 0; min-width: 0; }
.rx-fe-strip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.rx-fe-cell {
  position: relative; flex: 0 0 72px; width: 72px; height: 72px; border-radius: 8px; overflow: hidden; box-sizing: border-box;
  background: rgba(0, 0, 0, .31); box-shadow: inset 0 0 0 1px var(--c-logo-frame, #3d86ff);
}
.rx-fe-pic { width: 100%; height: 100%; object-fit: cover; display: block; }
.rx-fe-name { padding: 4px; font-size: 10px; color: var(--c-text); overflow-wrap: anywhere; overflow: hidden; height: 100%; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; text-align: center; }
.rx-fe-x {
  position: absolute; top: 2px; inset-inline-end: 2px; width: 24px; height: 24px; padding: 0; border-radius: 50%; cursor: pointer;
  background: rgba(4, 10, 38, .78); color: #fff; border: 1px solid var(--c-logo-cyan, #34d3f2); font-size: 12px; line-height: 22px;
}
.rx-fe-caption {
  width: 100%; box-sizing: border-box; resize: vertical; max-height: 9em; font: inherit; color: var(--c-text);
  background: transparent; border: 0; border-bottom: 1px solid var(--c-card-border); padding: 6px 0;
}
.rx-fe-caption::placeholder { color: var(--c-dim, var(--c-subtext)); }
/* r2: the editor's two outlined buttons (MaterialButton outlined: c_brand_ink words, c_logo_frame stroke) */
.rx-fe-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.rx-fe-action {
  border: 1px solid var(--c-logo-frame, #3d86ff); border-radius: 18px; background: transparent; color: var(--c-brand-ink, var(--c-logo-cyan, #34d3f2));
  padding: 6px 14px; font: inherit; font-size: 14px; cursor: pointer;
}

/* r5 (CONSULT_6 R): the rows scroll by a mouse drag (core/hscroll.js) -- no text selection or native drag out of a chip meanwhile */
.room-bar, .room-toolchips { user-select: none; }

/* W2b-requested (A-SA-005): the room's gear at the toolbar's end -> Settings on Appearance (room.js, W2b DELIVERY r2.4 item 1) */
.shp-roomgear { flex: none; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; background: none;
  color: var(--c-icon-tint); cursor: pointer; }
/* W1/83 DESKFIX D: the gear is Wik's own picture (ic_settings), FIT_CENTER in the whole slot, untinted (MainActivity.kt:1443-1447) */
.shp-roomgear > img.wk-drawable { display: block; width: 100%; height: 100%; object-fit: contain; }

/* ── W1/70 DLY: the body under the bars, the SIDE column, the SURFACES, the ROTATED row ─────────────────────────────────────────── */
/* the body: the side column (the rotated row) beside the list (activity_main.xml barsRail + rvMessages) */
.room-body { order: 10; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: row; position: relative; }
/* W1/83 DESKFIX B (his "the main message window has no division and roll under them at the very last possible place, give it some
   padding"): the rows block ends in a band of its own chrome fill before the list -- the posts scroll out under that edge, the last row's
   foot + this band below its chips (the same spacing as row to row). No line (W1/80 L11). Desktop extra: Android's list runs under its
   opaque bars with no band (activity_main.xml rvMessages); asked for here in his words. A border: no element, no layout owner moved, the
   list's own 4 px top padding kept. W1/93 USERSROW: the band is a LEAD (--row-foot: foot + lead = --row-vgap, row to row) and it sits
   over the LIST only -- over the whole body it pushed the rotated column a band + its own padding down (his "offset more vertically when
   rotated": its first chip 2 gaps under the rows, 1 gap from the edge); the column pads its own lead (below) */
.room-body > .room-listwrap { flex: 1 1 auto; min-width: 0; border-top: var(--row-foot, 2px) solid var(--c-chrome-fill); }
/* port: MainActivity.kt:3586 applyBarsRail -- a column down the left edge, at most BARS_RAIL_MAX_SHARE 0.4 of the posts' width; the
   rotated bar stands in it WHOLE, its chips stacked; it is drawn only while it holds something */
.room-side { flex: 0 0 auto; display: flex; flex-direction: row; max-width: 40%; min-height: 0; background: var(--c-chrome-fill); }   /* W1/80 L11: no line */
.room-side[hidden] { display: none; }
.room-side:not(:has(> :not([hidden]):not([data-bars-off]):not([data-surface-off]):not(:empty))) { display: none; }
/* W1/80 L11: THE grid, no line. W1/93 USERSROW (his "equal grid both vertically and horizontally"): the column is a row stood up -- its
   start inset --row-gap (the row's), its lead and foot --row-foot (the row's: the first chip --row-vgap under the last row's chips, as row
   to row), chip to chip --row-vgap (the step down = the step across) */
.room-side > .room-bar, .room-side > .room-folders { flex: 0 0 auto; flex-direction: column; align-items: flex-start; overflow-x: hidden;
  overflow-y: auto; padding: var(--row-foot) 0 var(--row-foot) var(--row-gap); min-height: 0; gap: var(--row-vgap); }
.room-side > .room-folders .fold-root { background: transparent; gap: var(--row-vgap); }
.room-side > .room-folders .fold-row { flex-direction: column; align-items: flex-start; overflow: visible; padding: 0; gap: var(--row-vgap); }
/* W1/37 CHROME R13: the arrow pinned at the column's top, the chips scrolling under it */
.room-side .room-arrow, .room-side .fold-arrow { position: sticky; top: 0; inset-inline-start: auto; z-index: 1; flex: 0 0 auto; }
/* the Wik filters (buildWikScopeRow :4771) and, W1/93 USERSROW, the Direct messages people (buildDmPeopleRow :5610) in the sub-chat
   row's slot: a row; a column when that row is rotated */
.room-wikchips, .room-dmlist { display: flex; align-items: center; }
.room-side .room-wikchips, .room-side .room-dmlist { flex-direction: column; align-items: flex-start; gap: var(--row-vgap); }
/* the surface: the feed laid over the list (WallFeed inserted over rvMessages, MainActivity.kt:5015); the list INVISIBLE, the send bar
   GONE while the surface hides the room (applySurface :5009-5011) */
.room-surface { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; min-height: 0; background: var(--c-page-bg); }
.room-surface[hidden] { display: none; }
.room-surface-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.room-surface-body > * { flex: 1 1 auto; min-height: 0; }
.room-floaters { z-index: 3; }
.room-screen[data-surface-hides] .room-list { visibility: hidden; }
.room-screen[data-surface-hides] .room-composer { display: none; }
.room-folders[data-surface-off] { display: none; }
.room-surfchip { cursor: pointer; flex: 0 0 auto; }
.room-surfchip[data-busy] { opacity: .55; cursor: progress; }   /* §D16: its surface is on its way (past 300 ms), not yet selected */
/* the rolled-out names (barsToggleLabels :3899): an overlay beside the rail -- the posts never move */
.room-railnames { position: absolute; z-index: 4; overflow: hidden; pointer-events: none; }
.room-railnames-in { position: relative; }
.room-railname { position: absolute; left: 0; display: flex; align-items: center; box-sizing: border-box; max-width: 60vw; padding: 0 9px;
  margin: 0; border: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: auto; cursor: pointer;
  background: var(--c-chrome-fill); color: var(--c-text); }
/* W1/83 GROUPSYNC -- the rail's groups (port: MainActivity.kt buildRailGroupFace; RailPlate.kt band / hover plate). Colours are the
   theme's tokens only (core/tokens.js, RULE 58). */
.room-railblock { display: inline-flex; flex: 0 0 auto; align-items: center; }
.room-side .room-railblock { flex-direction: column; }
/* rolled out: ONE band from the face's start to the last room's end.
   W1/90 DESK-ICON (item 3): the band in the chips' squircle shape, not a 999px circle -- port RailPlate.kt (hover false): card2 fill, the
   chip border 1 px inside the silhouette, drawn BEHIND the chips by the two pseudo layers below, cut by room.js bandShape (--rg-fill /
   --rg-ring). Along the row (MainActivity.kt:4727-4733, railBlockEnds :4739): half a gap (--rg-half, set by room.js railBlock) before
   the face, the block's start pulled back by that half, half a gap after the last room, then half a gap of margin. */
.room-railblock[data-open] { position: relative; isolation: isolate; padding-inline-start: var(--rg-half, 0px);
  margin-inline-start: calc(-1 * var(--rg-half, 0px)); margin-inline-end: var(--rg-half, 0px); }
.room-railblock[data-open]::before, .room-railblock[data-open]::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.room-railblock[data-open]::before { background: var(--c-card2-fill); clip-path: var(--rg-fill, none); }
.room-railblock[data-open]::after { background: var(--c-card-border); clip-path: var(--rg-ring, none); }
.room-railblock[data-open]:not(.room-side .room-railblock) > .wk-chip:last-child { margin-inline-end: var(--rg-half, 0px) !important; }   /* beats the chip's own inline gap (chip.js) */
.room-side .room-railblock[data-open] { padding-inline-start: 0; padding-block-start: var(--row-gap); margin-inline-start: 0; margin-inline-end: 0; margin-block-end: var(--row-gap); }
.room-railface { cursor: pointer; flex: 0 0 auto; }
.room-railface:focus-visible { outline: 2px solid var(--c-accent-shown); outline-offset: 1px; }
/* the face: one chip-sized square, a 2x2 of its first four rooms' pictures.
   W1/90 DESK-ICON (item 3): port MainActivity.kt:4768-4777 buildGroupFace -- each cell placed by room.js railFace (groupFaceCells: an
   outer pad of side/12 on all four sides and side/12 between, so the chip's outline passes OUTSIDE the corner pictures) */
.rg-face { position: relative; display: block; width: 100%; height: 100%; }
.rg-cell { position: absolute; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.rg-cell > .wk-identity, .rg-cell > img, .rg-cell > svg { width: 100%; height: 100%; }
/* hover to group: the target's square at 0.9 inside a full-size rounded plate (RailPlate hover: card2 fill, the lit accent outline 1.5) */
/* r2 (review NIT, lane OPEN 2): the plate in the chip's own squircle / capsule, not a rectangle -- port RailPlate.kt (hover true): card2
   fill + litAccent (--c-lit, tokens.js litAccent = frameSentBase) 1.5 px inside the silhouette, cut by room.js plateShape (--rg-plate / --rg-plate-ring) at arming; the chip's own
   fill (every direct .wk-shape child: the chip has one, its backdrop) steps aside while armed; drawn under the square (z-index -1 in the chip's isolated stack) */
.rg-armed > .wk-shape { visibility: hidden; }
.rg-armed::before, .rg-armed::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.rg-armed::before { background: var(--c-card2-fill); clip-path: var(--rg-plate, none); }
.rg-armed::after { background: var(--c-lit, var(--c-accent-shown)); clip-path: var(--rg-plate-ring, none); }
.rg-armed > .wk-chip-square { transform: scale(.9); transition: transform 120ms ease-out; }
.rg-armed.rg-still > .wk-chip-square { transition: none; }
/* a face carried: its rolled-out rooms and band hide for the drag (the group moves as one) */
.room-railblock.rg-carry { background: none; box-shadow: none; padding: 0; margin-inline-start: 0; }
.room-railblock.rg-carry::before, .room-railblock.rg-carry::after { display: none; }
.room-railblock.rg-carry > .room-railchip { display: none; }
.room-railface.room-dragging { opacity: .75; cursor: grabbing; }

/* ── W1/94 D1c (item 9c, his "menu opacity has no visible effect"): the list runs UNDER the bars ───────────────────────────────────
   Measured: chrome_opacity WAS applied (--c-chrome-fill / --c-chrome-card alpha) but the bars were flex siblings of the list, so only
   the page colour stood behind them. Android scrolls rvMessages under its bars (clipToPadding=false, padded by their heights). Here: room.js
   underBars measures how far the list's box lies below the screen's top (the toolbar + the shown rows + the band) and above its foot (the
   composer) -> --under-top / --under-bottom on .room-screen and data-under; the list's box grows by them over the bars and pads its content
   by them, so the first / last post rests where it did (and the end, the jump pill, the scroll anchor are unchanged), while a post scrolled
   on passes UNDER a see-through bar. The bars stand above the list (z 2); the band above the list (W1/83 DESKFIX B) is drawn by a layer
   of its own over the list instead of the list wrapper's border (a border paints under a positioned list). */
.room-screen[data-under] > .room-toolbar, .room-screen[data-under] > .room-bar, .room-screen[data-under] > .room-folders,
.room-screen[data-under] > .room-composer { position: relative; z-index: 2; }
.room-screen[data-under] .room-body > .room-listwrap { border-top-color: transparent; }
.room-screen[data-under] .room-body > .room-listwrap::before { content: ''; position: absolute; left: 0; right: 0; top: calc(-1 * var(--row-foot, 2px));
  height: var(--row-foot, 2px); background: var(--c-chrome-fill); z-index: 2; pointer-events: none; }
.room-screen[data-under] .room-list { position: absolute; left: 0; right: 0; top: calc(-1 * var(--under-top, 0px)); bottom: calc(-1 * var(--under-bottom, 0px));
  padding-top: calc(4px + var(--under-top, 0px)); padding-bottom: calc(4px + var(--under-bottom, 0px)); scroll-padding-top: var(--under-top, 0px);
  scroll-padding-bottom: var(--under-bottom, 0px); }

/* ── W1/102 R100 round 7 (operator: "yes everything in this release"): a TURNED phone browser -- the gate of round 6 (html[data-wk-web],
   set by the web adapter only, + a coarse pointer) + landscape. Measured at 844x390 before: toolbar 54 + rooms 54 + folders 54 + people 54
   = 216 px of chrome over a 114 px list. Port of Android's landscape (W1/99 AROT, DisplayPrefs.Rules.railRows with both switches at their
   defaults: every shown row stands as a RAIL beside the list -- MainActivity.kt "rail 4: the header + the three rows, side by side"): the
   rooms / folders / people rows become vertical rails at the start edge (in that fixed order, not bars_order), chips as their squares --
   NO names in the rails (Android's rail rolls them out with its arrow: that is room.js JS, not ported; the arrows step out here); the
   list and the composer take the rest, the list the full height under the toolbar. The header stays ONE row on top (Android turns it into a rail too; here its wordmark and name would turn sideways -- a stated
   difference). Desktop app, desktop browsers and an upright phone: this block never matches. */
@media (orientation: landscape) and (pointer: coarse) {
  html[data-wk-web] .room-screen { display: grid; grid-template-columns: auto auto auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; }
  html[data-wk-web] .room-screen > .room-toolbar { grid-column: 1 / -1; grid-row: 1; }
  html[data-wk-web] .room-screen > .room-rail { grid-column: 1; grid-row: 2 / 4; }
  html[data-wk-web] .room-screen > .room-folders { grid-column: 2; grid-row: 2 / 4; }
  html[data-wk-web] .room-screen > .room-presence { grid-column: 3; grid-row: 2 / 4; }
  html[data-wk-web] .room-screen > .room-body { grid-column: 4; grid-row: 2; }
  html[data-wk-web] .room-screen > .room-composer { grid-column: 4; grid-row: 3; }
  html[data-wk-web] .room-screen > .room-rail,
  html[data-wk-web] .room-screen > .room-presence,
  html[data-wk-web] .room-screen > .room-folders { flex-direction: column; align-items: center; overflow-x: hidden; overflow-y: auto; min-height: 0;
    scrollbar-width: none; border-inline-end: 1px solid var(--c-divider-hair, var(--c-card-border)); }
  html[data-wk-web] .room-screen > .room-folders .fold-root,
  html[data-wk-web] .room-screen > .room-folders .fold-row { flex-direction: column; align-items: center; }
  html[data-wk-web] .room-screen > .room-rail .wk-chip-label,
  html[data-wk-web] .room-screen > .room-presence .wk-chip-label,
  html[data-wk-web] .room-screen > .room-folders .wk-chip-label { display: none; }
  html[data-wk-web] .room-screen > .room-rail > .room-arrow,
  html[data-wk-web] .room-screen > .room-presence > .room-arrow,
  html[data-wk-web] .room-screen > .room-folders .fold-arrow { display: none; }
}