/* hosting screens (2026-10-15 handoff): host setup, live host controls, karaoke, Save this live, Recordings.
   Hex colors only in token files. Classes: hx-* (rooms) and rc-* (recordings). */

:is(.route-rooms, .route-recordings) .proto-tag { display: inline-flex; align-items: center; padding: 1px 7px; border: 1px dashed var(--hb-warning); border-radius: var(--radius-sm); color: var(--hb-warning); background: var(--tint-warning); font-size: 12px; font-weight: 700; letter-spacing: .01em; white-space: nowrap; vertical-align: middle; }
:is(.route-rooms, .route-recordings) .preview-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 12px; border: 1px dashed var(--line-strong); border-radius: var(--radius-md); background: var(--raised); color: var(--hb-muted); font-size: 14px; }
:is(.route-rooms, .route-recordings) .preview-switch > span { font-weight: 700; }
:is(.route-rooms, .route-recordings) .preview-switch select { min-height: 40px; max-width: 100%; padding: 4px 8px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--hb-text); background: var(--hb-surface); font: inherit; }
:is(.route-rooms, .route-recordings) .preview-switch input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--hb-primary); }
:is(.route-rooms, .route-recordings) .preview-switch button { min-height: 40px; padding: 4px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--hb-text); background: var(--hb-surface); font: inherit; font-weight: 700; cursor: pointer; }
:is(.route-rooms, .route-recordings) .preview-switch button.active { border-color: var(--hb-primary); color: var(--hb-primary); background: var(--tint-primary); }
:is(.route-rooms, .route-recordings) :is(button, select, input, a, summary):focus-visible { outline: 3px solid var(--hb-focus); outline-offset: 2px; }

/* Host setup */
.hx-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hx-draft { font-size: 14px; font-weight: 700; color: var(--hb-muted); }
.hx-block { padding: 16px; }
.hx-block h2, .hx-panel h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 18px; font-weight: 800; }
.hx-block > * + *, .hx-panel > * + * { margin-top: 12px; }
.hx-features { margin: 18px 0 0; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--hb-surface); }
.hx-features legend, .hx-modes legend { margin-bottom: 8px; padding: 0; font-weight: 800; }
.hx-features { padding: 12px 16px; }
.hx-features legend { float: left; width: 100%; }
.hx-feature-grid { clear: left; display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 20px; }
.hx-features > * + * { margin-top: 0; }
.hx-option { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 4px; border-top: 1px solid var(--line); cursor: pointer; font-weight: 650; }
.hx-feature-grid .hx-option:first-child { border-top: 0; }
.hx-option input { width: 20px; height: 20px; accent-color: var(--hb-primary); }
.hx-option .icon { width: 20px; height: 20px; color: var(--hb-muted); }
.hx-option:has(input:checked) { color: var(--hb-primary); }
.hx-option:has(input:checked) .icon { color: var(--hb-primary); }
.hx-modes { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0; padding: 0; border: 0; }
.hx-modes .hx-option { border-top: 0; }
.hx-fixed-mode { color: var(--hb-muted); }
.hx-audience { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 10px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.hx-audience > span { font-weight: 700; }
.hx-audience small { flex-basis: 100%; color: var(--hb-muted); }
.hx-stepper { display: inline-flex; align-items: center; gap: 4px; }
.hx-stepper .icon-button { width: 44px; height: 44px; border: 1px solid var(--line-strong); font-size: 22px; font-weight: 800; }
.hx-stepper .icon-button:disabled { opacity: .45; cursor: not-allowed; }
.hx-stepper output { min-width: 44px; text-align: center; font-size: 20px; font-weight: 800; }
.hx-facts { display: grid; gap: 0; margin: 0; }
.hx-facts > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 10px 0; border-top: 1px solid var(--line); }
.hx-facts > div:first-child { border-top: 0; }
.hx-facts dt { color: var(--hb-muted); font-size: 14px; font-weight: 700; }
.hx-facts dd { margin: 0; font-weight: 650; }
.hx-facts dd small { display: block; margin-top: 2px; color: var(--hb-muted); font-size: 13px; font-weight: 500; }
.hx-meter, .rc-meter { display: block; height: 8px; margin-top: 6px; overflow: hidden; border-radius: 4px; background: var(--tint-hemp); }
.hx-meter i, .rc-meter i { display: block; height: 100%; border-radius: 4px; background: var(--hb-thread-teal); }
.hx-meter i.w-0, .rc-meter i.w-0 { width: 0%; }
.hx-meter i.w-5, .rc-meter i.w-5 { width: 5%; }
.hx-meter i.w-10, .rc-meter i.w-10 { width: 10%; }
.hx-meter i.w-15, .rc-meter i.w-15 { width: 15%; }
.hx-meter i.w-20, .rc-meter i.w-20 { width: 20%; }
.hx-meter i.w-25, .rc-meter i.w-25 { width: 25%; }
.hx-meter i.w-30, .rc-meter i.w-30 { width: 30%; }
.hx-meter i.w-35, .rc-meter i.w-35 { width: 35%; }
.hx-meter i.w-40, .rc-meter i.w-40 { width: 40%; }
.hx-meter i.w-45, .rc-meter i.w-45 { width: 45%; }
.hx-meter i.w-50, .rc-meter i.w-50 { width: 50%; }
.hx-meter i.w-55, .rc-meter i.w-55 { width: 55%; }
.hx-meter i.w-60, .rc-meter i.w-60 { width: 60%; }
.hx-meter i.w-65, .rc-meter i.w-65 { width: 65%; }
.hx-meter i.w-70, .rc-meter i.w-70 { width: 70%; }
.hx-meter i.w-75, .rc-meter i.w-75 { width: 75%; }
.hx-meter i.w-80, .rc-meter i.w-80 { width: 80%; }
.hx-meter i.w-85, .rc-meter i.w-85 { width: 85%; }
.hx-meter i.w-90, .rc-meter i.w-90 { width: 90%; }
.hx-meter i.w-95, .rc-meter i.w-95 { width: 95%; }
.hx-meter i.w-100, .rc-meter i.w-100 { width: 100%; }
.hx-detail { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--raised); }
.hx-detail summary { min-height: 44px; padding: 10px 12px; cursor: pointer; font-weight: 750; color: var(--hb-primary); }
.hx-detail ul { display: grid; gap: 6px; margin: 0; padding: 0 14px 12px 32px; }
.hx-note { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: var(--radius-md); background: var(--tint-hemp); }
.hx-note .icon { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; color: var(--hb-muted); }
.hx-fine { color: var(--hb-muted); font-size: 14px; }
.hx-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.hx-toggle { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; cursor: pointer; }
.hx-toggle input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--hb-primary); }
.hx-toggle input:disabled + span { opacity: .6; }
.hx-toggle span { display: grid; }
.hx-toggle small { color: var(--hb-muted); }
.hx-block:not(.surface-card):not(.hx-features) { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--hb-surface); }

/* Live room */
.hx-hostview { justify-content: space-between; }
.hx-panel { padding: 16px; }
.hx-panel > header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hx-panel > header h2 { margin: 0; }
.hx-facts-row { grid-template-columns: minmax(0, 1fr); }
.hx-alert { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-left: 4px solid var(--hb-thread-navy); border-radius: var(--radius-md); background: var(--tint-hemp); font-weight: 650; }
.hx-alert .icon { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; }
.hx-alert.warn { border-left-color: var(--hb-warning); background: var(--tint-warning); }
.hx-alert.danger { border-left-color: var(--hb-danger); background: var(--tint-danger); }
.hx-transfer { display: grid; gap: 10px; justify-items: start; }
.hx-rec-bar { position: sticky; top: calc(var(--header-height) + 6px); z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; border: 2px solid var(--hb-danger); border-radius: var(--radius-md); color: var(--hb-text); background: var(--tint-danger); font-weight: 650; }
.hx-rec-bar .danger-button { margin-left: auto; }
.hx-rec-bar strong { color: var(--hb-danger); letter-spacing: .06em; }
.hx-rec-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--hb-danger); }
@media (prefers-reduced-motion: no-preference) { .hx-rec-dot { animation: hx-pulse 1.6s ease-in-out infinite; } }
@keyframes hx-pulse { 50% { opacity: .35; } }
.hx-consent { display: grid; gap: 0; margin-bottom: 0; padding: 0; list-style: none; }
.hx-consent li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.hx-consent li:first-child { border-top: 0; }
.hx-consent li > span:not(.avatar) { flex: 1 1 auto; font-weight: 650; }
.hx-consent .avatar, .hx-queue .avatar, .hx-lead .avatar { flex: 0 0 auto; }
.hx-consent em { font-style: normal; font-size: 14px; font-weight: 700; color: var(--hb-muted); }
.hx-consent em.yes { color: var(--hb-success); }
.hx-guest-prompt { display: grid; gap: 8px; padding: 12px; border: 1px dashed var(--line-strong); border-radius: var(--radius-md); background: var(--raised); }
.hx-guest-prompt small { color: var(--hb-muted); font-weight: 800; letter-spacing: .04em; }
.hx-guest-consent { border: 2px solid var(--hb-primary); }
.hx-ended { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 14px 16px; }
.hx-ended > div { flex: 1 1 240px; }
.hx-ended p { color: var(--hb-muted); }

/* Karaoke */
.hx-karaoke { padding: 16px; }
.hx-karaoke > * + * { margin-top: 12px; }
.hx-karaoke > header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hx-karaoke h2 { margin: 0; font-size: 18px; font-weight: 800; }
.hx-karaoke h3 { font-size: 15px; font-weight: 800; color: var(--hb-muted); }
.hx-lead { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px; border-radius: var(--radius-md); background: var(--tint-primary); }
.hx-lead > div { display: grid; flex: 1 1 160px; }
.hx-lead small { color: var(--hb-primary); font-weight: 800; letter-spacing: .04em; }
.hx-lead strong { font-size: 20px; }
.hx-lead span { color: var(--hb-muted); }
.hx-queue { display: grid; gap: 0; margin-bottom: 0; padding: 0; list-style: none; counter-reset: hxq; }
.hx-queue li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); counter-increment: hxq; }
.hx-queue li::before { content: counter(hxq) "."; min-width: 20px; font-weight: 800; color: var(--hb-muted); }
.hx-queue li:first-child { border-top: 0; }
.hx-queue li > span:not(.avatar) { display: grid; }
.hx-queue small { color: var(--hb-muted); }
.hx-track { display: grid; gap: 6px; font-weight: 700; }
.hx-track select { min-height: 44px; padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); color: var(--hb-text); background: var(--hb-surface); font: inherit; }

/* Recordings library */
.rc-summary { display: grid; gap: 0; padding: 4px 16px; }
.rc-summary > div { padding: 12px 0; border-top: 1px solid var(--line); }
.rc-summary > div:first-child { border-top: 0; }
.rc-summary dt { color: var(--hb-muted); font-size: 14px; font-weight: 700; }
.rc-summary dd { margin: 0; font-weight: 700; }
.rc-summary dd small { display: block; color: var(--hb-muted); font-size: 13px; font-weight: 500; }
.rc-list { display: grid; gap: 0; margin-bottom: 0; padding: 0; list-style: none; }
.rc-item { display: grid; gap: 10px; padding: 14px 16px; border-top: 1px solid var(--line); }
.rc-item:first-child { border-top: 0; }
.rc-item-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; }
.rc-item-head h2 { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 800; }
.rc-item-head h2 .icon { width: 18px; height: 18px; color: var(--hb-muted); }
.rc-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--hb-muted); font-size: 14px; }
.rc-state { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 800; background: var(--tint-hemp); color: var(--hb-text); }
.rc-state.ready { background: var(--tint-accent); color: var(--hb-success); }
.rc-state.failed { background: var(--tint-danger); color: var(--hb-danger); }
.rc-state.processing { background: var(--tint-warning); color: var(--hb-warning); }
.rc-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.rc-actions .secondary-button, .rc-actions .danger-button { min-height: 44px; }
.rc-step { display: grid; gap: 8px; padding: 12px; border: 1px dashed var(--line-strong); border-radius: var(--radius-md); background: var(--raised); }
.rc-settle { border: 1px solid var(--line); border-radius: var(--radius-md); }
.rc-settle summary { min-height: 44px; padding: 10px 12px; cursor: pointer; font-weight: 750; color: var(--hb-primary); }
.rc-settle dl { display: grid; gap: 0; margin: 0; padding: 0 12px 10px; }
.rc-settle dl > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 6px 0; border-top: 1px solid var(--line); }
.rc-settle dt { color: var(--hb-muted); }
.rc-settle dd { margin: 0; font-weight: 700; text-align: right; }
.rc-settle dd small { display: block; color: var(--hb-muted); font-weight: 500; font-size: 13px; }

@media (min-width: 700px) {
  .hx-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hx-feature-grid .hx-option:nth-child(2) { border-top: 0; }
  .hx-facts > div { grid-template-columns: minmax(150px, 220px) minmax(0, 1fr); gap: 12px; align-items: baseline; }
  .hx-facts-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .hx-facts-row > div { grid-template-columns: minmax(0, 1fr); align-content: start; border-top: 0; padding: 4px 0; }
  .rc-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .rc-summary > div { border-top: 0; }
}