/* Lobby additions: mic status per player, topic exclusion picker.
   Markup comes from js/ui/lobby.js. Colours are the printed-paper tokens from base.css:
   --ink / --ink-2 / --ink-3, --paper*, --accent (mustard), --good / --good-ink (sage), --bad / --bad-ink (terracotta). */

/* ---- who has a microphone: summary above the teams (a printed note) ---- */
.mic-summary {
  display: grid; gap: 4px; padding: .7rem 1rem;
  color: var(--ink); background: var(--grain), var(--paper-hi); border: var(--bw) solid var(--ink); border-radius: var(--rr-s); box-shadow: var(--print-s);
  font-size: .98rem;
}
.mic-summary p { margin: 0; }
.mic-summary p > .ico { margin-inline-end: .4em; }
.mic-summary b { font-weight: 800; }
.mic-summary.all-good { background: var(--grain), var(--good-bg); }
.mic-summary.problem { background: var(--grain), var(--bad-bg); }
.ms-line { font-weight: 600; }
.ms-line.bad { color: var(--bad-ink); font-weight: 700; }
.ms-line.warn { color: var(--ink); }
.ms-line.warn > .ico { color: var(--accent-d); }
.ms-line.wait { color: var(--ink-2); }
.ms-line.good { color: var(--good-ink); font-weight: 700; }
.ms-hint { color: var(--ink-2); font-size: .88rem; }

/* ---- one player: the chip, plus a status line right under it ---- */
.pl-wrap { display: grid; gap: 4px; }
.pl-status { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding-inline: .4em; font-size: .82rem; font-weight: 700; line-height: 1.25; }
.ps-state {
  display: inline-flex; align-items: center; gap: .3em; padding: .05em .65em; border-radius: 999px;
  color: var(--ink-2); background: var(--paper-hi); border: 2px solid var(--ink-line);
}
.ps-state .ico { inline-size: 1.05em; block-size: 1.05em; vertical-align: 0; }
.pl-status.mic-ok .ps-state { color: var(--good-ink); background: var(--good-bg); border-color: var(--good-ink); }
.pl-status.mic-blocked .ps-state { color: var(--bad-ink); background: var(--bad-bg); border-color: var(--bad-ink); }
.pl-status.mic-gone .ps-state { color: var(--ink-3); background: transparent; border-style: dashed; }
.pl-note { display: inline-flex; align-items: center; gap: .3em; color: var(--ink); background: var(--accent-soft); border-radius: 8px; padding: .05em .55em; }
.pl-note .ico { inline-size: 1.05em; block-size: 1.05em; vertical-align: 0; color: var(--accent-d); }

/* ---- topics (categories) ---- */
.topics-panel h2 { font-size: 1.4rem; margin-block-end: .5rem; }
.topics-body { display: grid; gap: .7rem; }
.topics-body p { margin: 0; }
.topic-chips { display: flex; flex-wrap: wrap; gap: 8px; padding-block-end: 3px; }
.topic-chip {
  display: inline-flex; align-items: center; gap: .4em; font: inherit; font-weight: 700; font-size: .95rem; cursor: pointer;
  min-block-size: 44px; padding: .3em .9em; color: var(--ink); background: var(--grain), var(--paper-hi);
  border: 2.5px solid var(--ink); border-radius: 999px; box-shadow: 0 3px 0 var(--ink);
  transition: background-color .12s, transform .08s, box-shadow .08s;
}
.topic-chip:hover { background-color: var(--accent-soft); }
.topic-chip:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.topic-chip:focus-visible { outline: 3px dashed var(--ink); outline-offset: 3px; }
.topic-chip .tc-mark { font-size: .85em; color: var(--good-ink); }
.topic-chip[aria-pressed="false"] { color: var(--ink-3); background: transparent; border-style: dashed; border-color: var(--ink-3); box-shadow: none; }
.topic-chip[aria-pressed="false"] .tc-mark { color: var(--bad-ink); }
.topic-chip[aria-pressed="false"] .tc-name { text-decoration: line-through; text-decoration-thickness: 2px; }
.topics-line { color: var(--ink-2); }
.topics-line.removed { color: var(--ink); }
.topics-line.removed b { color: var(--bad-ink); }
.topics-reset { justify-self: start; }

/* wide screens: the lobby is a two-column grid (teams | settings); the summary and the topics span both */
@media (min-width: 900px), (orientation: landscape) and (max-height: 500px) and (min-width: 600px) {
  .lobby > .mic-summary, .lobby > .topics-panel { grid-column: 1 / -1; }
}

/* ---- bots (host adds them per team; they are read-only for everyone else) ---- */
.pl.bot { background: var(--paper-2); border-style: dashed; border-color: var(--ink-3); }
.bot-tag { margin-inline-start: .45em; font-size: .72rem; font-weight: 700; color: var(--ink-2); background: var(--paper-hi); border: 1.5px solid var(--ink-line); border-radius: 99px; padding: 0 .5em; vertical-align: .1em; }
.pl .mic.bot-mark { color: var(--ink-2); }
.rm-bot {
  display: inline-grid; place-items: center; inline-size: 34px; block-size: 34px; padding: 0; flex: none; margin-block: -3px; cursor: pointer;
  background: var(--grain), var(--paper); border: 2px solid var(--ink); border-radius: 50%; color: var(--ink); box-shadow: 0 2px 0 var(--ink);
  transition: background-color .12s, transform .08s, box-shadow .08s; touch-action: manipulation;
}
.rm-bot .ico { inline-size: 14px; block-size: 14px; vertical-align: 0; }
.rm-bot:hover { background-color: var(--bad-bg); }
.rm-bot:active { transform: translateY(2px); box-shadow: none; }
.rm-bot:focus-visible { outline: 3px dashed var(--ink); outline-offset: 3px; }
.btn.add-bot { justify-self: stretch; background: transparent; border-style: dashed; border-color: var(--ink-3); color: var(--ink-2); box-shadow: none; font-weight: 700; }
.btn.add-bot .ico { margin-inline-end: .3em; vertical-align: -.2em; }
.btn.add-bot:hover:not(:disabled) { background: var(--paper-hi); color: var(--ink); border-color: var(--ink); box-shadow: none; transform: none; }
.btn.add-bot:active:not(:disabled) { transform: translateY(1px); }
.btn.add-bot:disabled { opacity: .45; box-shadow: none; border-color: var(--ink-3); }

/* ---- custom word packs: the host writes them, everyone else only reads a name and a count (js/ui/packs-panel.js) ---- */
.packs-panel h2 { font-size: 1.4rem; margin-block-end: .5rem; }
.packs-body { display: grid; gap: .8rem; }
.packs-body p { margin: 0; }
.packs-empty { color: var(--ink-3); font-family: var(--f-hand); font-size: 1.15rem; padding: .3rem 0; }
.pack-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pack-row {
  display: grid; gap: 6px; padding: .45rem .75rem .65rem; color: var(--ink);
  background: var(--grain), var(--paper-hi); border: 2px solid var(--ink-line); border-radius: var(--rr-xs);
  transition: background-color .15s, border-color .15s;
}
.pack-row.on { background: var(--grain), var(--accent-soft); border-color: var(--ink); }
.pack-toggle {
  display: flex; align-items: center; gap: .8em; inline-size: 100%; min-block-size: 48px; padding: 0; margin: 0; cursor: pointer;
  font: inherit; text-align: start; color: var(--ink); background: transparent; border: 0;
}
.pack-toggle:focus-visible { outline: 3px dashed var(--ink); outline-offset: 4px; }
.pack-id { flex: 1; min-inline-size: 0; display: grid; gap: 1px; }
.pack-name { font-weight: 800; font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pack-meta { color: var(--ink-2); font-size: .88rem; font-weight: 600; }
.pack-toggle[aria-checked="true"] .tg-sw { background: var(--accent); }
.pack-toggle[aria-checked="true"] .tg-sw::after { transform: translateX(20px); }
.pack-btns, .pack-tools, .pack-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pack-btns .btn .ico, .pack-tools .btn .ico, .pack-actions .btn .ico { margin-inline-end: .35em; vertical-align: -.22em; }
.pack-btns .btn.sm { padding-inline: .65em; }
.pack-btns .btn .ico { margin-inline-end: .25em; }
.btn.pack-del.armed { background: var(--grain), var(--bad-bg); border-color: var(--bad-ink); color: var(--bad-ink); }
.pack-note { display: flex; align-items: flex-start; gap: .5em; color: var(--ink-2); font-size: .92rem; }
.pack-note .ico { margin-block-start: .15em; }
.pack-note.warn { color: var(--bad-ink); font-weight: 700; }
.pack-note.warn .ico { color: var(--bad-ink); }
.pack-line {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3em .5em; padding: .5rem .8rem;
  background: var(--paper-hi); border: 2px dashed var(--ink-3); border-radius: var(--rr-xs);
}
.pack-line b { font-weight: 800; }
.pack-line.none { color: var(--ink-2); }
.pack-clear { margin-inline-start: auto; }

/* the editor (a modal card; its own scroll, so the printed inner frame of .modal-box is dropped like in the avatar editor) */
.pack-modal .pack-box { inline-size: min(100%, 560px); max-block-size: calc(100dvh - 24px); overflow: auto; text-align: start; align-content: start; gap: 10px; }
.pack-box::before { display: none; }
.pack-box h2::after { margin-inline: 0; }
.pack-box .field { margin-block-end: 0; }
.pack-text { min-block-size: 11.5em; resize: vertical; line-height: 1.55; font-size: 1.05rem; }
.pack-import-text { min-block-size: 6em; }
.pack-help { color: var(--ink-2); font-size: .9rem; }
.pack-ex { font: inherit; font-weight: 700; color: var(--ink); background: var(--paper-2); border-radius: 6px; padding: 0 .4em; unicode-bidi: isolate; }
.pack-live { font-weight: 700; color: var(--ink-2); min-block-size: 1.4em; }
.pack-live.ok { color: var(--good-ink); }
.pack-live .bad { color: var(--bad-ink); }
.pack-live .soft { color: var(--ink-3); font-weight: 600; }
.pack-issues { margin: 0; padding-block: 0; padding-inline: 1.3em 0; color: var(--bad-ink); font-size: .9rem; display: grid; gap: 2px; }
.pack-issues:empty { display: none; }
.pack-err { margin: 0; color: var(--bad-ink); font-weight: 700; font-size: .9rem; }
.pack-import { display: grid; gap: 8px; padding: .7rem; background: var(--paper-2); border: 2px dashed var(--ink-3); border-radius: var(--rr-xs); }
.pack-actions { padding-block-start: 4px; }
.pack-actions .pack-import-btn { margin-inline-start: auto; }

@media (min-width: 900px), (orientation: landscape) and (max-height: 500px) and (min-width: 600px) {
  .lobby > .packs-panel { grid-column: 1 / -1; }
}

/* ---- streamer mode, copy code, removing a player ---- */
.code-tiles.hidden-code .code-tile { letter-spacing: 0; color: var(--ink-soft, #6b6f86); }
.stream-btn.on { border-color: var(--accent, #e3a72f); background: color-mix(in srgb, var(--accent, #e3a72f) 18%, transparent); }
.rm-player { opacity: .55; }
.rm-player:hover, .rm-player:focus-visible { opacity: 1; }

/* ---- host tools: rename a team, move a player, team size cap (2026-10-27) ---- */
.team-name.editable { font: inherit; color: inherit; background: none; border: 0; padding: 0 .1em; cursor: text; border-radius: 6px; text-align: start; }
.team-name.editable .ico { inline-size: .8em; block-size: .8em; color: var(--ink-3); vertical-align: 0; }
.team-name.editable:hover { background: var(--accent-soft); }
.team-name.editable:hover .ico { color: var(--ink); }
.team-name-input { font: inherit; font-size: 1.1rem; inline-size: 100%; max-inline-size: 11em; padding: .1em .4em; color: var(--ink); background: var(--paper-hi); border: 2px solid var(--ink); border-radius: 8px; }
.team-name-input:focus { outline: 3px solid var(--accent); outline-offset: 1px; }
.move-sel {
  flex: none; max-inline-size: 7.5em; font: inherit; font-size: .8rem; font-weight: 700; color: var(--ink-2); cursor: pointer;
  padding: .25em .35em; background: var(--paper); border: 2px solid var(--ink-line); border-radius: 8px;
}
.move-sel:hover { border-color: var(--ink); color: var(--ink); }
.move-sel:focus-visible { outline: 3px dashed var(--ink); outline-offset: 2px; }
.team-col.full .team-count { background: var(--accent); }
.pl:has(.move-sel) { flex-wrap: wrap; row-gap: 4px; }
.pl .move-sel { max-inline-size: 6.5em; }
.pl .pname { min-inline-size: 4em; }
.topics-line.stream { display: flex; align-items: center; gap: .4em; font-weight: 700; color: var(--ink); }
.pack-text.drop { outline: 3px dashed var(--accent-d); outline-offset: 2px; background: var(--accent-soft); }
.pack-file .ico, .pack-new .ico { margin-inline-end: .3em; vertical-align: -.2em; }

/* topics collapsed to one line; the start button is always on screen (sticky bar at the bottom) */
.topics-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.topics-head h2 { margin: 0 !important; }
.topics-sum { flex: 1; font-weight: 600; color: var(--ink-2); }
.topics-body { margin-block-start: .8rem; }
.lobby-actions {
  position: sticky; inset-block-end: 0; z-index: 20; margin-inline: -14px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: var(--kraft-grain), var(--kraft-d); border-block-start: var(--bw) solid var(--ink);
  border-radius: var(--rr) var(--rr) 0 0; box-shadow: 0 -4px 0 rgba(29, 39, 68, .18);
}
.lobby-actions .start-hint { color: var(--paper-hi); text-shadow: 0 1px 0 rgba(29, 39, 68, .5); }
.lobby-actions .start-hint { flex-basis: 100%; margin: 0; }
.lobby-actions .start-hint:empty { display: none; }

/* "?" help bubble next to a setting: hover, keyboard focus or a tap shows what it does */
.toggle-row { display: flex; align-items: center; gap: 8px; }
.toggle-row .toggle { flex: 1; min-inline-size: 0; }
.set-label { display: inline-flex; align-items: center; gap: .4em; }
.help-tip {
  position: relative; flex: none; display: inline-grid; place-items: center; inline-size: 24px; block-size: 24px; cursor: help;
  font-family: var(--f-head); font-size: .85rem; line-height: 1; color: var(--ink); background: var(--paper-hi);
  border: 2px solid var(--ink); border-radius: 50%; box-shadow: 0 2px 0 var(--ink);
}
.help-tip:focus-visible { outline: 3px dashed var(--ink); outline-offset: 2px; }
.help-tip::after {
  content: attr(data-tip); position: absolute; z-index: 30; inset-block-end: calc(100% + 10px); inset-inline-end: -8px;
  inline-size: max-content; max-inline-size: min(280px, 80vw); padding: .5em .75em; white-space: normal; text-align: start;
  font-family: var(--f-body); font-size: .88rem; font-weight: 500; line-height: 1.45; color: var(--paper-hi); background: var(--ink);
  border-radius: 10px; box-shadow: var(--print); opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .15s, transform .15s, visibility .15s;
  pointer-events: none;
}
.help-tip:hover::after, .help-tip:focus::after { opacity: 1; visibility: visible; transform: none; }
.set-label .help-tip::after { inset-inline-end: auto; inset-inline-start: -8px; }   /* label tips open toward the panel's inside */