/* [10759] The arena's left panel: the collapse to a slim rail and the compact rows (host/arena-rail.js,
 * features/arena_sidebar_compact.feature). Everything here is scoped under html.rail-compact, which the module sets only
 * while the flag rail_compact is on, so with the flag off this file changes nothing. Tokens only, both themes. */
:root{--rail-w:56px;--rail-row-h:36px}

/* the column: with the flag off #railCol is not a box at all and #roster stays the grid item it always was */
#railCol{display:contents}
#railSlot{display:none}
html.rail-compact #railCol{display:flex;flex-direction:column;gap:6px;min-height:0;min-width:0}
html.rail-compact #railCol>#roster{flex:1 1 auto;min-height:0}
html.rail-compact #railSlot:not([hidden]){display:flex;justify-content:flex-end}
.rail-toggle{background:var(--panel);border:1px solid var(--line);border-radius:8px;color:var(--ink-dim);font:inherit;font-size:14px;line-height:1;
  width:32px;height:26px;padding:0;cursor:pointer}
.rail-toggle:hover,.rail-toggle:focus-visible{color:var(--gold);border-color:var(--gold-line)}
@media(pointer:coarse){ .rail-toggle{width:44px;height:44px} }

/* collapsed, wide windows only: the rail is --rail-w wide, in reading mode too */
@media(min-width:821px){
  html.rail-min #commsWrap{grid-template-columns:var(--rail-w) 1fr}
  html.rail-min #railSlot:not([hidden]){justify-content:center}
  html.rail-min #roster{padding:6px 4px;overflow-x:hidden}
}
@media(min-width:1201px){
  html.rail-min #commsWrap.reading{grid-template-columns:var(--rail-w) minmax(360px,1fr) minmax(340px,40%)}
}
@media(min-width:1400px){
  html.rail-min #commsWrap.reading{grid-template-columns:var(--rail-w) minmax(420px,1fr) minmax(420px,42%)}
}
.rail{display:flex;flex-direction:column;align-items:center;gap:4px}
.rail-tile{position:relative;width:40px;height:36px;min-height:0;padding:0;display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  background:none;border:1px solid transparent;border-radius:10px;color:var(--gold);font:inherit;font-size:15px;cursor:pointer}
.rail-tile:hover{background:var(--panel2)}
.rail-tile.active{background:var(--gold-soft);border-color:var(--gold-line)}
.rail-tile:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.rail-new{border:1px dashed var(--gold-line)}
.rosteritem.rail-mate{gap:0}
.rail-mate .av-wrap{position:relative;display:inline-flex}
.rail-badge{position:absolute;top:-3px;right:-4px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--gold);
  color:var(--on-gold,#1A1A1A);font-size:10px;font-weight:700;line-height:16px;text-align:center;font-family:inherit}
.rail-badge.rail-dot{min-width:8px;width:8px;height:8px;padding:0;top:2px;right:2px}
/* the Needs you mark becomes a dot on the avatar: no words in the rail */
.rail-mate .needs-you{position:absolute;bottom:0;right:0;width:9px;height:9px;padding:0;margin:0;border-radius:50%;background:var(--warn);
  font-size:0;line-height:0;overflow:hidden;border:1px solid var(--panel)}
.rail-div{width:28px;border:0;border-top:1px solid var(--line);margin:4px 0}
@media(pointer:coarse){ .rail-tile,.rosteritem.rail-mate{width:44px;height:44px;min-height:44px} }

/* compact rows: one line each, about half the height */
html.rail-compact #roster .rosteritem,html.rail-compact #rosterSheetBody .rosteritem{padding:5px 8px;gap:8px}
html.rail-compact .rosteritem>div{min-width:0;flex:1 1 auto}
html.rail-compact .rosteritem .rname{font-size:13.5px;line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.rail-compact .rosteritem .rrole{text-transform:none;letter-spacing:0;font-size:11.5px;line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* teammates: the role sits after the name on the same line, dimmer */
html.rail-compact .rosteritem:not(.hudroom)>div{display:flex;align-items:baseline;gap:6px}
html.rail-compact .rosteritem:not(.hudroom)>div>.rname{flex:0 1 auto;min-width:0}
html.rail-compact .rosteritem:not(.hudroom)>div>.rrole{flex:1 1 0;min-width:0}
/* huddle rooms: the title only; the member line is the row's title and label */
html.rail-compact .hudroom>div>.rrole,html.rail-compact .rosteritem.rail-new-row>div>.rrole{display:none}
html.rail-compact .rosteritem .mini-av{width:22px!important;height:22px!important;font-size:10px;flex:0 0 22px}
html.rail-compact .hudroom .mini-av{width:20px!important;height:20px!important;flex:0 0 20px}
html.rail-compact .hudroom .hud-new.hud-new-n{font-weight:700}
html.rail-compact .hudhide{padding:2px 6px}
html.rail-compact .rosteritem .needs-you{padding:1px 6px}

/* where #roster is hidden (phone width) its column goes too */
@media(max-width:820px){ html.rail-compact #railCol{display:contents} html.rail-compact #railSlot{display:none!important} }
/* [10780] the column no longer goes when a file opens below 1200px: host/arena-reader-layout.css decides that now */
.mini-av.rail-person{background:var(--gold);color:var(--on-gold,#1A1A1A);border-radius:50%}
/* the who-to-chat sheet at phone width: every row a full touch target */
@media(max-width:820px){ html.rail-compact #rosterSheetBody .rosteritem{min-height:44px} }