/* [10780] The Reader's layout (host/arena-reader-layout.js, features/reader_roster_toggle.feature): which widths keep
 * the team list beside the chat while a file is open, the list's own show and hide, and the Reader in full window.
 * Loaded after arena.css and arena-rail.css; every rule is scoped under #v-comms so it wins on specificity, not on
 * order alone. Tokens only, both themes.
 *
 * Opening a file used to drop the list below 1200px (arena.css 10200, #commsWrap.reading #roster{display:none}).
 * Now: wider than 1000px the three columns fit and the list stays, narrower at 1001-1200px. Between 821 and 1000px they
 * do not; there the list collapses to its toggle while a file is open, unless the person chose to show it, and then
 * all three squeeze. The person's choice to hide it holds at every width above 820px. At 820px and narrower the list
 * was never a column (arena.css); there the toggle is hidden and the avatar's hamburger badge opens the who-to-chat sheet. */

/* the toggle, first in the chat header */
.panel-toggle{flex:0 0 auto;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;padding:0;
  border-radius:8px;border:1px solid var(--line);background:var(--panel);color:var(--ink-dim);cursor:pointer}
.panel-toggle:hover,.panel-toggle:focus-visible{color:var(--gold);border-color:var(--gold-line)}
.panel-toggle:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.panel-toggle svg{width:18px;height:18px;display:block}
html.panel-hidden .panel-toggle{color:var(--gold)}
@media(pointer:coarse){ .panel-toggle{width:44px;height:44px} }
/* [10794] Serena, 3 Nov 2026: a phone showed two buttons that both opened the who-to-chat sheet; keep the avatar's
 * hamburger badge. At 820px and narrower the list is never a column, so this toggle has nothing of its own to do there. */
@media(max-width:820px){ #v-comms .panel-toggle{display:none} }

@media(min-width:1001px) and (max-width:1200px){
  #v-comms #commsWrap.reading{grid-template-columns:180px minmax(300px,1fr) minmax(300px,40%)}
}
@media(min-width:821px) and (max-width:1000px){
  html:not(.panel-shown):not(.rail-min) #v-comms #commsWrap.reading #railCol,
  html:not(.panel-shown):not(.rail-min) #v-comms #commsWrap.reading #roster{display:none}
  html:not(.panel-shown):not(.rail-min) #v-comms #commsWrap.reading{grid-template-columns:minmax(300px,1fr) minmax(300px,46%)}
  html.panel-shown:not(.rail-min) #v-comms #commsWrap.reading{grid-template-columns:150px minmax(240px,1fr) minmax(260px,42%)}
}
/* the slim rail (rail_compact, collapsed) is already the small form: it stays beside a file at every width */
@media(min-width:821px) and (max-width:1200px){
  html.rail-min #v-comms #commsWrap.reading{grid-template-columns:var(--rail-w) minmax(280px,1fr) minmax(300px,42%)}
}
/* the person hid the list: gone at every width above the phone, with or without a file open */
@media(min-width:821px){
  html.panel-hidden #v-comms #commsWrap #railCol,html.panel-hidden #v-comms #commsWrap #roster{display:none}
  html.panel-hidden #v-comms #commsWrap{grid-template-columns:minmax(0,1fr)}
  html.panel-hidden #v-comms #commsWrap.reading{grid-template-columns:minmax(300px,1fr) minmax(320px,46%)}
}

/* the Reader in full window: over the list, the chat and the top bar, under every overlay (z-index 80 and up), so a
 * dialog opened from inside the file still shows. The view is a stacking context of its own (.view z-index:1), so it
 * is the view that is lifted, and only while the Reader is full. */
html.reader-full #v-comms{z-index:60}
/* A view slides in on entry (vIn: a transform for 0.35s). A transformed ancestor becomes the containing block of a
 * fixed box, so a Reader expanded during the slide was the view's height, not the window's, until the slide ended
 * (Rebecca, #524: 854 of 900px 80ms after expand). Full window ends the slide at once. */
html.reader-full #v-comms{animation:none;transform:none}
#v-comms #readPane.rp-full{position:fixed;inset:0;z-index:60;border:0;border-radius:0;width:auto;height:auto;min-width:0}
#v-comms #readPane.rp-full #readPaneBody .pbdoc{max-width:none} /* 10288: full screen means full screen */
#v-comms #readPane.rp-full #readPaneBody iframe:not(.rp-frame){height:calc(100vh - 120px)!important}
#v-comms #readPane.rp-full #readPaneBody > img{max-height:calc(100vh - 120px);max-width:100%;display:block;margin:0 auto}
#v-comms #readPane.rp-full #readPaneBody pre{max-height:calc(100vh - 120px)!important} /* txt, csv, json: 60vh in the side pane */
#v-comms #readPane.rp-full .sheetview-wrap{max-height:calc(100vh - 200px)!important}
#v-comms #readPane.rp-full .deckview img{width:auto!important;max-width:100%!important;max-height:calc(100vh - 230px);margin:0 auto}
#readPaneExpand[aria-pressed="true"]{color:var(--gold);border-color:var(--gold-line)}