/* Hand queue: a clean list. Type as small caps, one primary action. Host view is large (24px+), director view compact. */
.hq{padding:0 0 6px}
.hq-head{display:flex;align-items:baseline;gap:12px;padding-bottom:10px;border-bottom:1px solid var(--hair)}
.hq-head .caps{color:var(--accent)}
.hq-n{font:600 18px/1 var(--serif);color:var(--text)}
.hq-empty{padding:14px 0;font:400 13px var(--sans);color:var(--muted)}
.hq-item{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--rule)}
.hq-hand{color:var(--accent);width:22px;height:22px}
.hq-name{display:block;font:600 22px/1.15 var(--serif);color:var(--text)}
.hq-meta{display:flex;gap:12px;align-items:baseline;margin-top:3px}
.hq-type{color:var(--accent-strong)}
.hq-time{font:400 12px var(--sans);color:var(--muted);font-variant-numeric:tabular-nums}
.hq-acts{display:flex;gap:4px;align-items:center}
.hq-item.later{opacity:.6}
.hq-set{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding-top:14px}
.hq-opt{background:none;border:0;border-bottom:1px solid transparent;padding:4px 0;cursor:pointer;font:500 13px var(--sans);color:var(--muted)}
.hq-opt.on{color:var(--text);border-bottom-color:var(--accent)}
.hq-set input[type=range]{accent-color:var(--accent);width:110px;border:0}
/* the tile badge on the host's view: drawn hand in a gold ring, slow soft glow until the host acts */
.hand-up{box-shadow:0 0 0 1px var(--accent);animation:hqglow 2.8s ease-in-out infinite}
.hand-badge{position:absolute;top:10px;right:10px;width:46px;height:46px;border-radius:50%;background:var(--raise);border:1px solid var(--accent);display:grid;place-items:center;z-index:2;color:var(--accent-strong)}
.hand-badge .hand-glyph{width:24px;height:24px}
@keyframes hqglow{0%,100%{box-shadow:0 0 0 1px var(--accent),0 0 0 0 rgba(139,69,19,0)}50%{box-shadow:0 0 0 1px var(--accent-strong),0 0 26px 4px rgba(139,69,19,.28)}}
@media (prefers-reduced-motion:reduce){.hand-up{animation:none}}
/* host (Ernst) on an iPad at arm's length: everything 24px and up */
body.host-mode .hq{margin:8px 0 22px}
body.host-mode .hq-head .caps{font-size:24px;letter-spacing:.1em}
body.host-mode .hq-n{font-size:28px}
body.host-mode .hq-empty{font-size:24px}
body.host-mode .hq-item{gap:20px;padding:20px 0}
body.host-mode .hq-hand{width:34px;height:34px}
body.host-mode .hq-name{font-size:40px}
body.host-mode .hq-type{font-size:24px;letter-spacing:.1em}
body.host-mode .hq-time{font-size:24px}
body.host-mode .hq-acts .btn{font-size:24px;letter-spacing:.1em;padding:18px 32px}
body.host-mode .hq-set{font-size:24px;gap:22px}
body.host-mode .hq-opt{font-size:24px}
body.host-mode .hq-set .caps{font-size:24px;letter-spacing:.1em}
body.host-mode .others{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))!important;pointer-events:auto}
body.host-mode .tile{position:relative}
body.host-mode .tile[hidden]{display:block!important}
body.host-mode .hq-item{grid-template-columns:auto 1fr;grid-template-areas:"hand who" "hand acts"}
body.host-mode .hq-hand{grid-area:hand;align-self:start;margin-top:8px}
body.host-mode .hq-who{grid-area:who}body.host-mode .hq-acts{grid-area:acts;gap:18px}
.hq-time{white-space:nowrap}