/* meeting screen. Wide screens: the cue column leads, understanding sits beside it. Phones: one column, cues first. */
body[data-screen=live] #app { max-width:660px; }
@media (min-width:980px) {
  body[data-screen=live] #app { max-width:1120px; }
  .lv { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(300px,.85fr); gap:34px; align-items:start; } .lv-side { position:sticky; top:12px; max-height:calc(100dvh - var(--dock) - 24px); overflow:auto; padding-bottom:12px; }
  .dock-in { max-width:1120px; }
}
.dims { list-style:none; margin:0; padding:0; } .dims li { display:grid; grid-template-columns:9.5em 1fr; gap:8px; padding:7px 0; border-bottom:1px solid var(--rule); font-size:15px; } .dims li:last-child { border-bottom:0; }
.dims li.wide { grid-template-columns:1fr; }
.dims b { font-weight:600; color:var(--soft); } .dims li.unk span { color:var(--soft); opacity:.55; } .dims li.low span::after { content:" (استنتاج)"; color:var(--brass-text); font-size:12px; }
.dims li.high b { color:var(--primary); } .dims li.new { animation:slip .3s ease-out; background:color-mix(in srgb, var(--primary) 10%, transparent); }
.thr { margin:8px 0; padding:10px 14px; border-inline-start:4px solid var(--brass); background:var(--sunk); border-radius:10px; font-size:15px; } .thr small { display:block; color:var(--soft); margin-top:2px; }
.led { display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; } .led span { font-size:13px; border:1.5px solid var(--rule); border-radius:999px; padding:3px 12px; background:var(--panel); } .led .gave { border-color:var(--coral); } .led .got { border-color:var(--jade); }
.risk { font:700 12px var(--body); border-radius:999px; padding:2px 10px; border:1.5px solid currentColor; } .risk.low { color:var(--jade); } .risk.med { color:var(--brass-text); } .risk.high { color:var(--coral); animation:slip .3s ease-out; }
.say { display:block; margin-top:10px; padding:10px 14px; border-radius:12px; background:var(--sunk); font:500 18px/1.65 var(--body); } .say b { color:var(--primary); font:700 12px var(--body); margin-inline-end:6px; }
.when { display:inline-block; font:600 11px var(--body); background:var(--sunk); color:var(--soft); border-radius:6px; padding:1px 8px; margin-inline-start:8px; vertical-align:middle; }
.bar { display:flex; align-items:center; gap:12px; font-size:14px; color:var(--soft); padding-top:4px; }
.bar .stage { display:none; }
.dot { width:10px; height:10px; border-radius:50%; background:var(--jade); display:inline-block; margin-inline-end:8px; } .dot.off { background:var(--brass); } .dot.talk { background:var(--sky); box-shadow:0 0 0 5px color-mix(in srgb, var(--sky) 24%, transparent); }
#tm { font:500 14px var(--mono); direction:ltr; }
.meter { height:4px; background:var(--sunk); border-radius:2px; overflow:hidden; flex:1; } .meter i { display:block; height:100%; width:0; background:var(--primary); transition:width .12s linear; }
.stagebar { display:flex; margin:18px 2px 6px; position:relative; } .stagebar::before { content:""; position:absolute; inset-inline:calc(100% / 12); top:7px; height:2px; background:var(--rule); }
.stagebar span { flex:1; text-align:center; font-size:11px; line-height:1.3; color:var(--soft); position:relative; padding-top:22px; }
.stagebar span::before { content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:16px; height:16px; border-radius:50%; background:var(--paper); border:2px solid var(--rule); }
.stagebar span.done::before { background:var(--primary); border-color:var(--primary); } .stagebar span.cur::before { border-color:var(--primary); box-shadow:0 0 0 4px color-mix(in srgb, var(--primary) 25%, transparent); background:var(--paper); }
.stagebar span.cur { color:var(--ink); font-weight:700; } .stagebar span.done { color:var(--primary); }
.live { min-height:46px; color:var(--soft); font-size:15px; padding:10px 14px; margin:14px 0 4px; background:var(--sunk); border-radius:12px; }
#live .lv-main > h2:first-child { margin-top:14px; }
@media (max-width:979px) {
  /* phone on the table: two lines of what was heard, the limits on one swipeable row, so the cue starts in the first half of the screen */
  .live { min-height:0; font-size:14px; line-height:1.55; padding:8px 12px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  #live .rules { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; } #live .rules::-webkit-scrollbar { display:none; } #live .rule { white-space:nowrap; flex:none; }
}
#cues { margin-top:6px; }
/* the signature: the cue you should read now is a pearl on the cloth, wrapped in nacre; older cues step back */
.cue { --hue:var(--primary); position:relative; overflow:hidden; border:2px solid transparent; border-radius:var(--r-lg); padding:16px 18px; margin:12px 0; font:600 24px/1.55 var(--body); box-shadow:var(--shadow); animation:slip .28s ease-out;
  background:linear-gradient(var(--panel),var(--panel)) padding-box, var(--nacre) border-box; }
.cue::after { content:""; position:absolute; inset:0; background:linear-gradient(105deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%); transform:translateX(120%); animation:sheen 1.4s .15s ease-out 1 both; pointer-events:none; }
[dir=rtl] .cue::after { transform:translateX(-120%); animation-name:sheen-rtl; }
@keyframes sheen { to { transform:translateX(-120%); } } @keyframes sheen-rtl { to { transform:translateX(120%); } }
.cue .verb { display:inline-block; font:700 16px/1 var(--display); color:var(--on-primary); background:var(--hue); border-radius:8px; padding:6px 11px 7px; margin:0 0 8px; letter-spacing:.02em; }
.cue small { display:block; font:400 14px/1.55 var(--body); color:var(--soft); margin-top:6px; }
.cue.ask { --hue:var(--sky); } .cue.verify { --hue:var(--brass-text); } .cue.close { --hue:var(--plum); } .cue.answer { --hue:var(--primary); }
.cue.verify .verb { color:#fff; } @media (prefers-color-scheme: dark) { .cue .verb { color:#0A1235; } .cue.verify .verb { color:#1E1400; } }
.cue.alert { --hue:var(--coral); background:linear-gradient(var(--panel),var(--panel)) padding-box, linear-gradient(135deg,var(--coral),#F2A15A) border-box; box-shadow:0 0 0 5px color-mix(in srgb, var(--coral) 16%, transparent), var(--shadow); }
.cue.old { font-size:16px; font-weight:500; padding:10px 14px; border-width:1px; border-color:var(--rule); background:transparent; box-shadow:none; animation:none; border-radius:var(--r); }
.cue.old::after { display:none; } .cue.old .verb { font-size:12px; padding:4px 8px 5px; margin:0 0 4px; } .cue.old small, .cue.old .say { display:none; }
@keyframes slip { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.check { list-style:none; padding:0; margin:2px 0 0; } .check li { padding:6px 0; font-size:15px; border-bottom:1px dashed var(--rule); } .check li:last-child { border:0; }
.check li.met { color:var(--jade); font-weight:500; } .check li.partial { color:var(--brass-text); } .check li.open { color:var(--soft); }
.facts { display:flex; flex-wrap:wrap; gap:8px; } .fact { background:var(--panel); border:1px solid var(--rule); border-radius:10px; padding:6px 12px; font-size:14px; }
.tr { color:var(--soft); font-size:15px; max-height:200px; overflow:auto; white-space:pre-wrap; }
.dock { position:fixed; inset-inline:0; bottom:0; z-index:5; display:flex; justify-content:center; padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter:blur(12px); border-top:1px solid var(--rule); }
.dock-in { display:flex; gap:10px; width:100%; max-width:660px; }
.dock .main { margin:0; width:auto; flex:1; padding:12px 8px; font:700 15px/1.3 var(--body); min-height:52px; box-shadow:none; } .dock .ghost { flex:0 0 28%; } .dock .closer { flex:1.4; background:var(--brass); color:var(--on-brass); border:0; }
#end { background:var(--panel); color:var(--ink); border:1.5px solid var(--rule); } #end.armed { background:var(--coral); border-color:var(--coral); color:#fff; }

.rules { display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 2px; } .rule { font:600 13px var(--body); border-radius:999px; padding:4px 12px; border:1.5px solid var(--rule); background:var(--panel); color:var(--soft); }
.rule.cap { border-color:var(--brass); color:var(--brass-text); } .rule.red { border-color:var(--coral); color:var(--coral); } .rule.watch { border-color:var(--primary); color:var(--primary); }

/* the listening panel: the first thing a seller checks is "is it hearing us?", so it answers in colour, motion and words */
.listen { --h:var(--jade); display:flex; align-items:center; gap:14px; padding:12px 16px; border-radius:var(--r-lg); background:color-mix(in srgb, var(--h) 11%, var(--panel)); border:1.5px solid color-mix(in srgb, var(--h) 45%, transparent); transition:background .25s, border-color .25s; }
.listen .mic { position:relative; flex:none; width:48px; height:48px; border-radius:50%; display:grid; place-items:center; background:var(--h); color:#fff; }
.listen .mic::before, .listen .mic::after { content:""; position:absolute; inset:0; border-radius:50%; border:2px solid var(--h); opacity:0; }
.listen[data-state=wait] .mic::before { animation:ring 2.4s ease-out infinite; }
.listen[data-state=talk] .mic::before { animation:ring 1.1s ease-out infinite; } .listen[data-state=talk] .mic::after { animation:ring 1.1s .45s ease-out infinite; }
@keyframes ring { from { transform:scale(1); opacity:.55; } to { transform:scale(1.7); opacity:0; } }
.listen .ltxt { display:grid; line-height:1.35; min-width:0; flex:1 1 auto; } .listen .ltxt b { font:700 19px var(--display); color:var(--ink); } .listen .ltxt small { color:var(--soft); font:500 13px var(--body); }
.listen .eq { display:flex; align-items:center; gap:3px; height:30px; flex:none; } .listen .eq i { width:4px; height:4px; border-radius:2px; background:var(--h); transition:height .09s linear; }
.listen[data-state=paused] .eq i, .listen[data-state=ended] .eq i { height:4px !important; opacity:.45; }
.listen #tm { flex:none; font:500 15px var(--mono); color:var(--soft); }
.listen .meter { display:none; } .listen .stage { display:none; }
.listen[data-state=talk] { --h:var(--sky); } .listen[data-state=think] { --h:var(--primary); } .listen[data-state=paused] { --h:var(--brass); } .listen[data-state=ended] { --h:var(--soft); }
.listen[data-state=think] .mic::before { animation:ring 1.6s ease-out infinite; }
@media (prefers-reduced-motion: reduce) { .listen .mic::before, .listen .mic::after { animation:none !important; opacity:.35; transform:scale(1.25); } }
@media (max-width:380px) { .listen .eq { display:none; } }
#risk { margin-top:8px; display:inline-block; }