/* Participant page, Summary view: stage donut and statistic tiles. */

/* summary: donut on the left, every statistic beside it in two rows */
.sum{height:100%;display:grid;grid-template-rows:minmax(0,min(100%,540px));align-content:start;grid-template-columns:clamp(180px,21vw,300px) minmax(0,1fr);gap:clamp(12px,1.6vw,22px);min-height:0}
.macro{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:clamp(6px,1.2vh,12px);min-height:0;min-width:0;border:1px solid var(--line);padding:clamp(10px,1.6vh,16px) clamp(12px,1.2vw,18px);background:var(--panel);container-type:inline-size}
.macro:hover{background:var(--panel-hi)}
.macro:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.macro .donut{flex:1;min-height:0;position:relative}
.macro svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.macro .lg{display:grid;gap:clamp(2px,.7vh,7px);flex:none}
.macro .li{display:grid;grid-template-columns:11px 1fr auto;align-items:center;gap:9px}
.macro .li i{width:11px;height:11px;border-radius:3px}
.macro .li .nm{font-size:13.5px}
.macro .li .pct{font-family:var(--cond);font-weight:600;font-size:19px;line-height:1}
.macro .li .mn{font-family:var(--mono);font-size:10.5px;color:var(--ink2);margin-left:8px;display:inline-block;min-width:54px;text-align:right}
.macro .nt{font-family:var(--mono);font-size:9.5px;color:var(--ink3);flex:none}
@container (max-width:235px){.macro .li .mn{display:none}.macro .dh{letter-spacing:.08em;white-space:nowrap}}
.tiles{height:100%;display:flex;flex-direction:column;gap:clamp(8px,1.6vh,16px);min-height:0;min-width:0}
.trow{flex:1;min-height:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(8px,1vw,14px)}
.tgrp{display:flex;flex-direction:column;gap:clamp(5px,.9vh,8px);min-height:0;min-width:0}
.tgrp .dh{white-space:nowrap}
.tg{flex:1;min-height:0;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:clamp(8px,1vw,14px)}
.cu{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;align-items:center;min-height:0;min-width:0;gap:3px;text-align:center;container-type:inline-size}
.cu:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.chipb{--bar:var(--info);--fg:var(--ink);width:100%;flex:1;min-height:0;border-radius:5px;background:var(--panel);border-top:5px solid var(--bar);border-bottom:5px solid var(--bar);border-left:1px solid var(--line);border-right:1px solid var(--line);display:grid;place-items:center}
.cu:hover .chipb{background:var(--panel-hi)}
.cv{font-family:var(--cond);font-weight:600;line-height:1;color:var(--fg);white-space:nowrap;font-size:clamp(15px,min(26cqw,7vh),46px)}
.cv .u{color:inherit;opacity:.75;font-size:max(9px,.3em);margin-left:3px}
.cn{font-size:12.5px;font-weight:500;line-height:1.15}
.cs{font-size:11px;color:var(--ink2);line-height:1.15;text-wrap:balance}
@container (max-width:104px){.cs{min-height:2.3em}}
.tone-good .chipb{--bar:var(--good)}
.tone-watch .chipb{--bar:var(--watch);--fg:var(--watch)}
.tone-concern .chipb{--bar:var(--concern);--fg:var(--concern)}
.tone-severe .chipb{--bar:var(--severe);--fg:var(--severe-ink)}
.tone-none{cursor:default}
.tone-none .chipb{--bar:transparent;border:1px dashed var(--none);background:transparent}
.tone-none .cv{color:var(--ink3)}