/* Breakout rooms (public/breakouts.js, ported from the Fam room). The rooms bar is a submenu of the Chat cell, always out
   under the section bar while the chat shows (member requests, Ethan: "the same style as the button bar"): felt-red cells
   in heavy tracked Libre Franklin caps split by faint white hairlines, under a white rule; the room you're in is white
   paper in a thick red frame with red letters, like the open section. MENU (members and settings) first, then EVERYONE,
   each breakout with the Bii heads of who's in it, then + BREAKOUT, every cell one width (the widest's, or a fair share
   of the bar when they all fit). New messages elsewhere get a small white square (red on the lit cell). The cells
   scroll sideways when there are many. */
/* It drops by growing (member request, Ethan: "push the bar down as the submenu extends"): coming back to the chat the
   height runs 0 → 40px, so the chat below rides down with it; the cells sit on its bottom edge, so it
   reads as the strip sliding out from under the section bar. Closed it keeps no height and can't be tabbed into. */
.chat > .rooms { --c: #d3121c; position: relative; z-index: 1; flex: none; display: flex; align-items: flex-end; height: 0; min-width: 0;
  overflow: hidden; visibility: hidden; background: var(--c); border-top: 0 solid #fff; user-select: none; -webkit-user-select: none;
  transition: height .2s cubic-bezier(.3, 0, .2, 1), border-top-width .2s cubic-bezier(.3, 0, .2, 1), visibility 0s .2s; }
.chat > .rooms > * { height: 38px; }
.chat > .rooms.open:not(:empty) { height: 40px; border-top-width: 2px; visibility: visible;
  transition: height .2s cubic-bezier(.3, 0, .2, 1), border-top-width .2s cubic-bezier(.3, 0, .2, 1), visibility 0s; }
body.ev-on .chat > .rooms { display: none; }
@media (prefers-reduced-motion: reduce) { .chat > .rooms, .chat > .rooms.open:not(:empty) { transition: none; } }
.chat > .rooms.still, .chat > .rooms.still.open:not(:empty) { transition: none; }
.rooms-list { flex: 1; min-width: 0; display: flex; overflow-x: auto;
  scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  mask-image: linear-gradient(to right, #000 calc(100% - 16px), transparent); -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 16px), transparent); }
.rooms-list::-webkit-scrollbar { display: none; }
/* equal cells: at max-content size a 1fr grid makes every column the widest cell's width; min-width fills the bar */
.rooms-row { flex: none; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: max-content; min-width: 100%; height: 100%; }
.room-sign { position: relative; min-width: 0; height: 100%; margin: 0; padding: 0 14px;
  display: flex; align-items: center; justify-content: center; gap: 6px; border: 0; background: var(--c); color: #fff;
  font: 800 13px/1 "Libre Franklin", "Helvetica Neue", Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; cursor: pointer; -webkit-tap-highlight-color: transparent; text-rendering: geometricPrecision; }
.room-sign::before { content: ""; position: absolute; inset: 0; border: 5px solid var(--c); pointer-events: none; }
.room-sign + .room-sign::after { content: ""; position: absolute; left: 0; top: 11px; bottom: 11px; width: 1px;
  background: rgba(255, 255, 255, .45); pointer-events: none; }
.room-sign.on::after, .room-sign.on + .room-sign::after { display: none; }
.room-sign .room-n { min-width: 0; max-width: 150px; padding-left: .08em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-sign.on { background: #fff; color: var(--c); }
.room-sign:active { filter: brightness(.94); }
/* the hard-button rim shows on press, not as a standing ring on the lit room (its fill says you're in it) */
#rooms .room-sign.on:not(:active, [data-hit], :focus-visible) { outline-color: transparent !important; }
.room-dot { display: none; flex: none; width: 7px; height: 7px; background: #fff; font-style: normal; }
.room-sign.new .room-dot { display: block; }
.room-sign.on .room-dot { background: var(--c); }
.room-more { display: grid; place-items: center; width: 16px; height: 16px; margin-right: -4px; opacity: .6; font-style: normal; }
.room-more svg { width: 16px; height: 16px; }
.room-new svg { flex: none; width: 13px; height: 13px; }
.bo-heads { flex: none; display: inline-flex; }
.bo-heads .bo-face { width: 24px; height: 24px; margin-left: -8px; }
.bo-heads .bo-face:first-child { margin-left: -3px; }
.bo-face { display: block; }
.bo-face .mface { display: block; width: 100%; height: 100%; }
.bo-face .mface img, .bo-face .mface svg { display: block; width: 100%; height: 100%; }
@media (max-width: 380px) { .room-sign { letter-spacing: .05em; padding: 0 8px; } }
@media (max-width: 350px) { .room-sign { font-size: 11.5px; letter-spacing: .04em; padding: 0 6px; } }
/* the Chat cell wears the Bii heads of the breakout you're in, before its label */
.tab-heads { order: -1; flex: none; display: inline-flex; font-style: normal; }
.tab-heads[hidden] { display: none; }
.tab-heads .bo-face { width: 24px; height: 24px; margin-left: -8px; }
.tab-heads .bo-face:first-child { margin-left: 0; }

/* the start of a breakout: its name on a small felt plate, and who can see it */
.bo-intro { display: grid; justify-items: center; gap: 8px; max-width: 36ch; margin: 14px auto 4px; text-align: center; }
.bo-intro b { display: inline-block; max-width: 100%; padding: 6px 12px 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: var(--felt); color: #fff; font: 600 22px/1 var(--board); letter-spacing: .14em; text-transform: uppercase; }
.bo-intro span { color: var(--ink-2); font-size: 14.5px; line-height: 1.4; }

/* the sheets: people to pick are their Bii heads on paper disks; a pick gets a felt-red ring and a red tick */
.bo-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 10px 4px; }
.bo-p { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; margin: 0; padding: 2px 0; border: 0; background: none;
  color: var(--c, var(--ink)); font: 700 13.5px/1.2 var(--font); -webkit-tap-highlight-color: transparent; }
button.bo-p { cursor: pointer; }
@media (prefers-color-scheme: dark) { .bo-p { color: color-mix(in oklab, var(--c, #fff) 45%, white); } }
.bo-p-face { position: relative; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--paper);
  box-shadow: inset 0 0 0 1.5px var(--rule); transition: box-shadow .12s, background-color .12s; }
.bo-p-face .bo-face { width: 50px; height: 50px; }
.bo-p-n { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.bo-p:active .bo-p-face { scale: .94; }
.bo-p.on .bo-p-face { background: var(--note); box-shadow: 0 0 0 3px var(--red); }
.bo-tick { position: absolute; right: -3px; bottom: -3px; display: none; place-items: center; width: 22px; height: 22px;
  background: var(--red); color: #fff; box-shadow: 0 0 0 2px var(--wall-2); font-style: normal; }
.bo-tick svg { width: 13px; height: 13px; }
.bo-p.on .bo-tick { display: grid; }
.bo-here { position: absolute; right: 2px; bottom: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 2px var(--wall-2); }
/* the whole face is the pick; buttons.css's pressed rim would box the name too */
.sheet .bo-pick button.bo-p.bo-p { outline: 0 !important; }
.sheet button.bo-p:focus-visible .bo-p-face { box-shadow: 0 0 0 3px var(--focus); }
.sheet .bo-go { display: block; width: 100%; margin-top: 16px; }
.sheet .bo-name { font-size: 17px; }
.bo-rename { display: flex; gap: 8px; }
.bo-rename .field { flex: 1; min-width: 0; }
.bo-rename .btn { flex: none; }
.sheet .bo-leave { margin-top: 18px; }
.bo-leave .item:not(.armed) .grow > div:first-child { color: var(--danger); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .bo-p-face { transition: none; } }