
:root{--ground:#f3f3f1;--panel:#fff;--panel-2:#fafaf8;--ink:#1c1c1a;--ink-2:#45453f;--muted:#66665f;
--line:#e4e4e0;--line-2:#d3d3cc;--green:#00893d;--green-hover:#007a36;--green-press:#006b30;--green-ink:#00733a;
--green-tint:#eef6f1;--green-line:#bfe0cb;--danger-ink:#8f1d13;--danger-tint:#fdf1ef;--danger-line:#f1c6bf;
--warn-ink:#6b4500;--warn-tint:#fcf5e6;--warn-line:#ead4a3;--radius:10px;--radius-sm:6px;
/* One muted hue per competency, used only to group the report's chart and its list. */
--c0-ink:#00733a;--c0-tint:#e3f0e8;--c1-ink:#10607f;--c1-tint:#e2edf3;--c2-ink:#7d5800;--c2-tint:#f6eeda;
--c3-ink:#54479b;--c3-tint:#eae8f5;--c4-ink:#83405f;--c4-tint:#f4e9ef;
--font:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
--mono:ui-monospace,"Cascadia Mono",Consolas,monospace}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100dvh;display:flex;flex-direction:column;background:var(--ground);color:var(--ink);font:16px/1.55 var(--font);caret-color:var(--green)}
::selection{background:#cfe8d8;color:var(--ink)}
a{color:var(--green-ink);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid rgba(0,137,61,.4);outline-offset:2px}
img{display:block;max-width:100%;height:auto}
.wrap{width:100%;max-width:44rem;margin:0 auto;padding-left:1.5rem;padding-right:1.5rem}
.wide{max-width:74rem}
main{flex:1;padding-top:2.75rem;padding-bottom:3rem}
/* A page that is one card and nothing else sits in the middle of what is left of the screen,
   instead of hanging under the masthead with the rest of the window empty. */
main:has(>.pin-card,>.notice){display:flex;flex-direction:column;justify-content:center}
h1{font-size:1.75rem;line-height:1.2;font-weight:650;letter-spacing:-.01em;margin:0 0 .75rem;text-wrap:balance}
h2{font-size:1.25rem;line-height:1.3;font-weight:600;margin:0}
p{margin:0 0 1rem}
code{font-family:var(--mono);font-size:.875em}

.masthead{background:var(--panel);border-top:4px solid var(--green);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:.9rem;flex-wrap:nowrap;padding-top:1.15rem;padding-bottom:1.15rem}
.mark{display:inline-flex;border-radius:var(--radius-sm);outline-offset:3px}
.brand>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;color:var(--muted)}
.account{display:flex;align-items:center;gap:.5rem;margin-left:auto;min-width:0}
.whoami{flex:0 1 auto;max-width:11rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-2);font-size:.8125rem}
.signout{margin:0}
.signout .button{padding:.35rem .8rem}
.lang-menu{position:relative}
.lang-menu summary{list-style:none;display:flex;align-items:center;gap:.45rem;height:2.25rem;padding:0 .55rem 0 .6rem;
border-radius:var(--radius-sm);color:var(--ink-2);font-size:.875rem;font-weight:500;cursor:pointer;user-select:none;
transition:background-color .15s ease-out,color .15s ease-out}
.lang-menu summary::-webkit-details-marker{display:none}
/* The same row without a menu behind it: no hover, no pointer, no chevron. */
.lang-menu.is-fixed{display:flex;align-items:center;gap:.45rem;height:2.25rem;padding:0 .55rem 0 .6rem;
color:var(--muted);font-size:.875rem;font-weight:500}
.lang-menu.is-fixed svg{flex:none;color:var(--green-ink)}
.lang-menu summary svg{flex:none}
.lang-menu summary svg:first-child{color:var(--green-ink)}
.lang-menu summary svg:last-child{color:var(--muted);transition:transform .18s cubic-bezier(.2,.8,.2,1)}
.lang-menu summary:hover,.lang-menu[open] summary{background:var(--ground);color:var(--ink)}
.lang-menu[open] summary svg:last-child{transform:rotate(180deg)}
.lang-now-code{display:none;letter-spacing:.04em}
.lang-list{position:absolute;right:0;top:calc(100% + .5rem);z-index:20;width:13.5rem;padding:.35rem;margin:0;
background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--green);border-radius:8px;
box-shadow:0 14px 32px -12px rgba(28,28,26,.22),0 2px 6px rgba(28,28,26,.06);
display:flex;flex-direction:column;gap:1px;transform-origin:top right;animation:lang-open .16s cubic-bezier(.2,.8,.2,1)}
@keyframes lang-open{from{opacity:0;transform:translateY(-4px) scale(.98)}}
.lang-list button{appearance:none;display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;
min-height:2.5rem;padding:0 .75rem;border:0;border-radius:5px;background:none;color:var(--ink);font:inherit;
font-size:.9375rem;text-align:left;cursor:pointer}
.lang-list button:hover{background:var(--ground)}
.lang-list button:focus-visible{outline-offset:-2px}
.lang-list abbr{font-size:.75rem;font-weight:600;letter-spacing:.06em;color:var(--muted);text-decoration:none}
.lang-list button[aria-current]{background:var(--green-tint);color:var(--green-ink);font-weight:600;cursor:default}
.lang-list button[aria-current] svg{width:16px;height:16px}
.lang-choice select{font:inherit;padding:.6rem .75rem;border:1px solid var(--line-2);border-radius:var(--radius-sm);background:var(--panel);min-width:12rem}
.foot{padding-bottom:2.5rem;font-size:.8125rem;color:var(--muted)}

.lede{font-size:1.125rem;color:var(--ink-2);max-width:36rem;margin-bottom:2rem}
.ai-flag{display:inline-flex;align-items:center;gap:.5rem;margin:0 0 1.25rem;padding:.3rem .85rem .3rem .65rem;
border:1px solid var(--green-line);border-radius:999px;background:var(--green-tint);color:var(--green-ink);
font-size:.875rem;font-weight:600}
.note{font-size:.9375rem;color:var(--muted)}

.facts{margin:0 0 2rem;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius)}
.facts div{display:grid;grid-template-columns:11rem 1fr;gap:1.5rem;padding:1.1rem 1.5rem;border-top:1px solid var(--line)}
.facts div:first-child{border-top:0}
.facts dt{font-weight:600}
.facts dd{margin:0;color:var(--ink-2)}
.confirm{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap}
.confirm p{margin:0;font-size:.875rem;color:var(--muted);max-width:24rem}

.button{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.9rem 1.5rem;
border:1px solid transparent;border-radius:var(--radius-sm);background:var(--green);color:#fff;font:inherit;
font-size:1rem;font-weight:600;line-height:1;text-decoration:none;white-space:nowrap;cursor:pointer;
transition:background-color .15s ease-out,border-color .15s ease-out}
.button:hover{background:var(--green-hover)}
.button:active{background:var(--green-press)}
.button:disabled{background:#e4e4df;color:var(--muted);cursor:not-allowed}
.button.secondary{background:var(--panel);border-color:var(--line-2);color:var(--ink)}
.button.secondary:hover{background:var(--panel-2);border-color:#bdbdb5}
.button.small{padding:.65rem 1rem;font-size:.9375rem}
.button.danger{background:var(--danger-ink);border-color:var(--danger-ink);color:#fff}
.button.danger:hover{background:#6f150e;border-color:#6f150e}
.danger-link{color:var(--danger-ink);font-size:.875rem}

.progress{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;margin:0 0 1rem}
.progress p{margin:0;color:var(--ink-2)}
.progress strong{color:var(--ink);font-variant-numeric:tabular-nums}
.meter{display:flex;gap:.35rem;width:9rem;flex:none}
.meter span{flex:1;height:6px;border-radius:3px;background:var(--line)}
.meter span.on{background:var(--green)}
.rounds{list-style:none;margin:0 0 1.25rem;padding:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius)}
.rounds li{display:grid;grid-template-columns:1fr auto;gap:1.5rem;align-items:center;padding:1.4rem 1.5rem;border-top:1px solid var(--line)}
.rounds li:first-child{border-top:0}
.rounds form{margin:0}
.round-meta{margin:.2rem 0 .55rem;color:var(--muted);font-size:.9375rem}
.round-desc{margin:0;color:var(--ink-2)}
.done{display:inline-flex;align-items:center;gap:.4rem;color:var(--green-ink);font-weight:600;font-size:.9375rem;white-space:nowrap}
.is-done h2,.is-done .round-desc{color:var(--muted)}

.stage{margin:0;padding:1.75rem;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
box-shadow:0 1px 2px rgba(28,28,26,.04),0 8px 24px -12px rgba(28,28,26,.10)}
.call-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 1.5rem;
margin:-1.75rem -1.75rem 0;padding:1.5rem 1.75rem;border-bottom:1px solid var(--line)}
.persona{display:flex;align-items:center;gap:1rem;min-width:0}
.persona h1{margin:0;font-size:1.5rem}
.persona-role{margin:.1rem 0 0;color:var(--muted);font-size:.9375rem}
.avatar{--level:0;position:relative;display:grid;place-items:center;flex:none;width:3.5rem;height:3.5rem;border-radius:50%;
background:var(--green-tint);box-shadow:inset 0 0 0 1px var(--green-line);color:var(--green-ink);font-size:1.0625rem;font-weight:650;letter-spacing:.02em}
.avatar::before,.avatar::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none}
.avatar::before{background:var(--green);opacity:calc(var(--level)*.22);transform:scale(calc(1 + var(--level)*.55))}
.avatar::after{box-shadow:0 0 0 2px var(--green);opacity:calc(var(--level)*1.4);transform:scale(calc(1.08 + var(--level)*.3))}
.situation{margin:1.35rem 0 0;padding:0 0 1.35rem;border-bottom:1px solid var(--line)}
.situation h2{margin:0 0 .2rem;color:var(--muted);font-size:.875rem;font-weight:600}
.situation p{margin:0;max-width:40rem;color:var(--ink-2)}
.call-status{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:1.5rem 0 0}
.stage-state{display:flex;align-items:center;gap:.6rem;margin:0;font-weight:600}
.stage-hint{margin:.4rem 0 0;max-width:38rem;color:var(--ink-2)}
.mic-meter{--level:0;display:inline-flex;align-items:center;gap:3px;height:1.25rem;padding:0 .15rem}
.mic-meter i{display:block;width:4px;height:100%;border-radius:2px;background:var(--green);transform-origin:center;
transform:scaleY(clamp(.18,calc(var(--level)*var(--k)),1));opacity:clamp(.35,calc(.35 + var(--level)*1.5),1)}
.mic-meter i:nth-child(1),.mic-meter i:nth-child(5){--k:1.2}
.mic-meter i:nth-child(2),.mic-meter i:nth-child(4){--k:2}
.mic-meter i:nth-child(3){--k:2.8}
.dot{position:relative;width:10px;height:10px;border-radius:50%;background:#c4c4bc;flex:none;transition:background-color .2s ease-out}
.dot.wait{background:#e0b44a}
.dot.live{background:var(--green)}
.dot.error{background:var(--danger-ink)}
.dot.done{background:var(--green-ink)}
.dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--green);opacity:0}
.stage[data-speaking="you"] .dot.live::after{animation:listening 1.8s cubic-bezier(.16,1,.3,1) infinite}
@keyframes listening{0%{opacity:.55;transform:scale(.6)}100%{opacity:0;transform:scale(1.5)}}
.timer{margin:0;color:var(--muted);font-size:.9375rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.timer [data-elapsed]{color:var(--ink);font-size:1.375rem;font-weight:650;letter-spacing:-.01em}

.captions{position:relative;display:flex;flex-direction:column;height:9.5rem;margin:1.25rem 0 0;padding:1rem 0 0;
overflow:hidden;border-top:1px solid var(--line);color:var(--ink)}
.caption-who{margin:0 0 .3rem;color:var(--green-ink);font-size:.8125rem;font-weight:600;letter-spacing:.01em;transition:opacity .25s ease-out}
.captions[data-speaker="you"] .caption-who{color:var(--muted)}
.caption-lines{display:flex;flex:1;flex-direction:column;justify-content:flex-end;gap:.4rem;min-height:0;
-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 1.5rem);mask-image:linear-gradient(to bottom,transparent 0,#000 1.5rem)}
.caption-line{display:block;max-width:40rem;font-size:1.25rem;line-height:1.45;font-weight:500;letter-spacing:-.005em;text-wrap:pretty;
transition:color .34s ease-out,opacity .34s cubic-bezier(.16,1,.3,1),transform .42s cubic-bezier(.16,1,.3,1),filter .34s cubic-bezier(.16,1,.3,1)}
.caption-word{opacity:0;filter:blur(2px);transition:opacity .12s ease-out,filter .16s ease-out}
.caption-word.is-said{opacity:1;filter:none}
.caption-line.is-past{color:#8a8a83}
.caption-line.is-leaving{opacity:0;filter:blur(3px);transition-duration:.24s}
.caption-empty{position:absolute;right:0;bottom:.15rem;left:0;margin:0;color:var(--muted);font-size:.9375rem;
opacity:0;transition:opacity .5s ease-out}
.captions.is-idle .caption-empty{opacity:1;transition-delay:.3s}
.captions.is-idle .caption-who{opacity:0}
.confirm-end{margin-top:1.25rem;padding:1rem 1.25rem;background:var(--warn-tint);border:1px solid var(--warn-line);border-radius:var(--radius);color:var(--warn-ink);
animation:rise .28s cubic-bezier(.16,1,.3,1)}
.confirm-end p{margin:0}
.confirm-end .actions{margin-top:.85rem}
@keyframes rise{from{opacity:0;transform:translateY(.35rem)}}
.actions form{margin:0}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin-top:1.25rem}
.report-link{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;margin:0 0 1.25rem}
.report-link span{color:var(--ink-2);font-size:.9375rem}
.sections{display:flex;gap:.25rem;margin:0 0 1.5rem;padding:.25rem;background:var(--panel);border:1px solid var(--line);border-radius:999px;width:max-content;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.sections a{flex:none;white-space:nowrap;padding:.4rem 1.1rem;border-radius:999px;color:var(--ink-2);font-size:.9375rem;font-weight:600;text-decoration:none}
.sections a:hover{background:var(--green-tint);color:var(--green-ink)}
.sections a[aria-current]{background:var(--green);color:#fff}
.testing-note{margin:0 0 1.25rem;padding:.7rem 1rem;background:var(--warn-tint);border:1px solid var(--warn-line);border-radius:var(--radius);color:var(--warn-ink);font-size:.9375rem}
.people{margin:0;padding:0;list-style:none}
.people li+li{margin-top:.5rem}
.people a{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem 1rem;padding:.85rem 1.1rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);color:var(--ink);text-decoration:none}
.people a:hover{border-color:var(--green);background:var(--green-tint)}
.people .who{font-weight:600}
.people .how-many{flex:1 1 auto;color:var(--muted);font-size:.9375rem}
.report-nav ul{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.75rem;padding:0;list-style:none}
.report-nav a{display:inline-block;padding:.35rem .85rem;border:1px solid var(--line-2);border-radius:999px;background:var(--panel);
color:var(--ink);font-size:.9375rem;text-decoration:none;transition:border-color .15s ease-out,background-color .15s ease-out}
.report-nav a:hover{border-color:var(--green);background:var(--green-tint)}
.report-block{margin:0 0 1.5rem;padding:1.5rem 1.75rem 1.25rem;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);scroll-margin-top:1rem}
.report-head{margin:0 0 .75rem}
.report-head h2{font-size:1.375rem}
.report-head p{margin:.2rem 0 0;max-width:40rem;color:var(--muted);font-size:.9375rem}
/* The skills radar: the web, the rim bands with the competency names, the shape. */
.radar-figure{margin:.5rem 0 1.25rem}
.radar{display:block;width:100%;max-width:29rem;height:auto;margin:0 auto}
.radar .grid{fill:none;stroke:var(--line);stroke-width:1}
.radar .spoke{stroke:var(--line);stroke-width:1}
.radar .spoke.off{stroke:var(--line-2);stroke-dasharray:2 3}
.radar .area{fill:var(--green);fill-opacity:.16;stroke:var(--green);stroke-width:2;stroke-linejoin:round}
.radar .dot{fill:var(--green)}
.radar .dot-off{fill:var(--panel);stroke:var(--line-2);stroke-width:1}
.radar .band{stroke:var(--panel);stroke-width:1.5}
.radar .band.c0{fill:var(--c0-tint)}.radar .band.c1{fill:var(--c1-tint)}.radar .band.c2{fill:var(--c2-tint)}.radar .band.c3{fill:var(--c3-tint)}.radar .band.c4{fill:var(--c4-tint)}
.radar .edge{fill:none;stroke-width:3;stroke-linecap:butt}
.radar .edge.c0{stroke:var(--c0-ink)}.radar .edge.c1{stroke:var(--c1-ink)}.radar .edge.c2{stroke:var(--c2-ink)}.radar .edge.c3{stroke:var(--c3-ink)}.radar .edge.c4{stroke:var(--c4-ink)}
.radar .label-path{fill:none;stroke:none}
.radar .tick{fill:var(--muted);font-family:var(--font);font-size:8.5px;paint-order:stroke;stroke:var(--panel);stroke-width:2.5px}
.radar .band-label.c0{fill:var(--c0-ink)}.radar .band-label.c1{fill:var(--c1-ink)}.radar .band-label.c2{fill:var(--c2-ink)}
.radar .band-label.c3{fill:var(--c3-ink)}.radar .band-label.c4{fill:var(--c4-ink)}
.radar .band-label{font-family:var(--font);font-weight:600;letter-spacing:.01em}
.skill-radar{max-width:23rem;margin:.5rem auto .75rem}
.skill-radar .skill-name{fill:var(--ink-2);font-family:var(--font);font-size:10.5px}
.skill-radar .skill-name.off{fill:var(--muted)}
.radar .area.c0{fill:var(--c0-ink);stroke:var(--c0-ink)}.radar .area.c1{fill:var(--c1-ink);stroke:var(--c1-ink)}
.radar .area.c2{fill:var(--c2-ink);stroke:var(--c2-ink)}.radar .area.c3{fill:var(--c3-ink);stroke:var(--c3-ink)}
.radar .area.c4{fill:var(--c4-ink);stroke:var(--c4-ink)}
.radar .dot.c0{fill:var(--c0-ink)}.radar .dot.c1{fill:var(--c1-ink)}.radar .dot.c2{fill:var(--c2-ink)}
.radar .dot.c3{fill:var(--c3-ink)}.radar .dot.c4{fill:var(--c4-ink)}
.radar-figure figcaption{max-width:32rem;margin:.35rem auto 0;color:var(--muted);font-size:.8125rem;text-align:center}
.comp-list{margin:0;padding:0;list-style:none}
.comp-row{padding:1rem 0;border-top:1px solid var(--line)}
.comp-row:first-child{border-top:0}
.comp-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.4rem 1.5rem}
.comp-head h3{margin:0;font-size:1.0625rem;font-weight:600;display:flex;align-items:center;gap:.5rem}
.comp-dot{flex:none;width:.6rem;height:.6rem;border-radius:2px}
.comp-dot.c0{background:var(--c0-ink)}.comp-dot.c1{background:var(--c1-ink)}.comp-dot.c2{background:var(--c2-ink)}
.comp-dot.c3{background:var(--c3-ink)}.comp-dot.c4{background:var(--c4-ink)}
.lvl{display:inline-flex;align-items:center;gap:.6rem}
.lvl-bar{display:inline-flex;gap:3px}
.lvl-bar i{display:block;width:1.35rem;height:.45rem;border-radius:2px;background:var(--line)}
.lvl-bar i.on{background:var(--green)}
.lvl-name{min-width:6.5rem;color:var(--ink-2);font-size:.9375rem;font-weight:600}
.lvl-none{color:var(--muted);font-size:.9375rem}
.feedback{display:grid;gap:.6rem;margin:.75rem 0 0}
.feedback div{display:grid;grid-template-columns:8.5rem 1fr;gap:1rem}
.feedback dt{color:var(--muted);font-size:.875rem;font-weight:600;padding-top:.1rem}
.feedback dd{margin:0;max-width:40rem}
.skills{margin:.6rem 0 0}
.skills summary{width:max-content;color:var(--green-ink);font-size:.875rem;font-weight:600;cursor:pointer}
.skills ul{margin:.5rem 0 0;padding:0;list-style:none}
.skills li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.25rem 1rem;padding:.35rem 0;font-size:.9375rem;color:var(--ink-2)}
.skills .lvl-bar i{width:.9rem;height:.35rem}
.skills .lvl-name{min-width:6rem;font-size:.875rem;font-weight:500}
.legend{margin:.75rem 0 0;color:var(--muted);font-size:.8125rem}
.report-empty{margin:0;color:var(--ink-2)}
.report-back{margin:0 0 .5rem;font-size:.9375rem}
.round-links{margin:0;padding:0;list-style:none}
.round-links li+li{margin-top:.5rem}
.round-links a{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem 1rem;padding:.85rem 1.1rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel-2);color:var(--ink);text-decoration:none}
.round-links a:hover{border-color:var(--green);background:var(--green-tint)}
.round-who{font-weight:600}
.round-when{flex:1 1 auto;color:var(--muted);font-size:.9375rem}
.round-open{color:var(--green-ink);font-weight:600;font-size:.9375rem}
.pin-card{max-width:30rem;margin-inline:auto;padding:2rem 2rem 1.5rem;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius)}
.sign-in{max-width:26rem;margin:1.5rem auto 0;padding:2.25rem 2.25rem 1.75rem;box-shadow:0 1px 2px rgba(28,28,26,.04),0 8px 24px rgba(28,28,26,.06)}
.sign-in h1{margin:0;font-size:1.625rem}
.sign-in-lede{margin:.4rem 0 1.5rem;color:var(--ink-2);font-size:.9375rem}
.sign-in .pin-input{width:100%!important;letter-spacing:.35em;text-align:left}
.sign-in .field{margin-bottom:1.15rem}
.sign-in-hint{margin:1.25rem 0 0;padding-top:1.1rem;border-top:1px solid var(--line);color:var(--muted);font-size:.875rem}
.button.wide{width:100%;justify-content:center}
.pin-card h1{font-size:1.5rem}
.pin-card>p{color:var(--ink-2)}
.pin-form{margin:1.25rem 0 0}
.pin-form .note{margin:0 0 .4rem;font-size:.875rem}
.pin-input{width:12rem!important;max-width:100%;font-size:1.5rem!important;letter-spacing:.4em;font-variant-numeric:tabular-nums;text-align:center}
.pin-links{margin:1.25rem 0 0;font-size:.9375rem;color:var(--muted)}
.link-button{padding:0;border:0;background:none;font:inherit;color:var(--green-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;cursor:pointer}
.link-button:hover{text-decoration-thickness:2px}
.pin-card .alert{margin:1rem 0 0}
.report-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;margin:0 0 1rem}
.report-foot form{margin:0}
.notice{max-width:30rem;margin-inline:auto;padding:2rem 2rem 1.25rem;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius)}
.narrow{max-width:26rem;margin:0 auto}

.op-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:.85rem;padding-bottom:.85rem}
.op-bar form{margin:0}
.op-id{display:flex;align-items:center;gap:.85rem;flex-wrap:wrap}
.op-id strong{font-weight:650}
.op-id span{color:var(--muted);font-size:.875rem;padding-left:.85rem;border-left:1px solid var(--line-2)}
.summary{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin:0 0 1.75rem;overflow:hidden;
background:var(--line);border:1px solid var(--line);border-radius:var(--radius)}
.summary div{padding:1rem 1.25rem;background:var(--panel)}
.summary dt{font-size:.8125rem;color:var(--muted)}
.summary dd{margin:.15rem 0 0;font-size:1.375rem;font-weight:600;font-variant-numeric:tabular-nums}
.grid2{display:grid;grid-template-columns:3fr 2fr;gap:1.5rem;margin-bottom:2.25rem}
.grid2>*{min-width:0}
.panel{padding:1.5rem;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius)}
.panel h2{margin-bottom:.4rem}
.panel form{margin:0}
.field{margin-bottom:1rem}
label{display:block;margin-bottom:.4rem;font-size:.9375rem;font-weight:600}
input[type=password],input[type=text],input[type=email],select{min-width:0;padding:.6rem .75rem;border:1px solid var(--line-2);border-radius:var(--radius-sm);
background:#fff;color:var(--ink);font:inherit}
input[type=password],input[type=text],input[type=email]{width:100%}
input[type=password]:focus-visible,input[type=text]:focus-visible,input[type=email]:focus-visible,select:focus-visible{outline:3px solid rgba(0,137,61,.3);outline-offset:1px;border-color:var(--green)}
input[type=file]{max-width:100%;font:inherit;font-size:.9375rem;color:var(--ink-2)}
input[type=file]::file-selector-button{margin-right:.75rem;padding:.55rem .9rem;border:1px solid var(--line-2);
border-radius:var(--radius-sm);background:var(--panel);color:var(--ink);font:inherit;font-weight:600;cursor:pointer}
input[type=file]::file-selector-button:hover{background:var(--panel-2)}
.sample{margin:0 0 1.1rem;padding:.65rem .85rem;overflow-x:auto;background:var(--panel-2);border:1px solid var(--line);
border-radius:var(--radius-sm);font-family:var(--mono);font-size:.8125rem;line-height:1.6;white-space:pre}
.section-title{margin:0 0 .75rem}
.table-wrap{overflow-x:auto;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius)}
table{width:100%;border-collapse:collapse;font-size:.9375rem;font-variant-numeric:tabular-nums}
th{padding:.7rem 1rem;background:var(--panel-2);border-bottom:1px solid var(--line);color:var(--muted);
font-size:.8125rem;font-weight:600;text-align:left;white-space:nowrap}
th:first-child{border-top-left-radius:var(--radius)}
th:last-child{border-top-right-radius:var(--radius)}
td{padding:.65rem 1rem;border-top:1px solid var(--line);vertical-align:top}
tbody tr:first-child td{border-top:0}
td.num{width:4rem;color:var(--muted)}
table.data td{white-space:nowrap}
.tag{display:inline-block;padding:.1rem .55rem;border-radius:999px;font-size:.8125rem;font-weight:600;white-space:nowrap}
.tag.ok{background:var(--green-tint);color:var(--green-ink)}
.tag.wait{background:#eeeeea;color:var(--muted)}
.tag:not(.ok):not(.wait){background:#fff4d6;color:#7a5200}
.rdots{display:inline-flex;gap:.25rem;margin-left:.4rem;vertical-align:middle}
.rdot{display:inline-grid;place-items:center;width:1.35rem;height:1.35rem;border-radius:50%;font-size:.75rem;font-weight:650}
.rdot.done{background:var(--green);color:#fff}
.rdot.started{background:#fff4d6;color:#7a5200;box-shadow:inset 0 0 0 1px #e0b44a}
.rdot.none{background:transparent;color:var(--muted);box-shadow:inset 0 0 0 1px var(--line-2)}
.title-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.title-side{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.tile-note{margin:.2rem 0 0;font-size:.8125rem;color:var(--muted)}
.summary .of{font-size:.9375rem;font-weight:500;color:var(--muted)}
.summary dd .now{color:var(--green-ink)}
/* Live indicator: quiet when current, amber when the page lost the server, grey when signed out. */
.live{display:flex;align-items:center;gap:.45rem;margin:0 0 .75rem;font-size:.8125rem;color:var(--muted);
font-variant-numeric:tabular-nums}
.live .dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--line-2);flex:none}
.live[data-state=on] .dot{background:var(--green);box-shadow:0 0 0 0 rgba(0,137,61,.45);animation:pulse 2.4s ease-out infinite}
.live[data-state=stale]{color:var(--warn-ink)}
.live[data-state=stale] .dot{background:#e0b44a}
.live[data-state=off] .dot{background:var(--line-2)}
@keyframes pulse{70%{box-shadow:0 0 0 .4rem rgba(0,137,61,0)}100%{box-shadow:0 0 0 0 rgba(0,137,61,0)}}
#rounds{margin-bottom:2.25rem}
#rounds .table-wrap{margin-top:1rem}
#rounds td{white-space:nowrap}
#rounds .of{color:var(--muted);font-size:.875rem}
.bar{display:inline-block;width:8rem;height:.45rem;margin-right:.55rem;vertical-align:middle;overflow:hidden;
background:var(--line);border-radius:999px}
.bar i{display:block;height:100%;background:var(--green);border-radius:999px}
.tag.now:not(.ok):not(.wait){background:var(--green);color:#fff}
.field .note{margin:0 0 .4rem}
.empty{padding:2rem 1.5rem;color:var(--muted)}
.alert{margin:0 0 1.5rem;padding:1rem 1.25rem;border:1px solid;border-radius:var(--radius)}
.alert h2{margin-bottom:.3rem;font-size:1rem}
.alert p:last-child,.alert ul:last-child{margin-bottom:0}
.alert ul{margin:.3rem 0 0;padding-left:1.1rem}
.alert.ok{background:var(--green-tint);border-color:var(--green-line);color:#0b4d2a}
.alert.error{background:var(--danger-tint);border-color:var(--danger-line);color:var(--danger-ink)}
.alert.warn{background:var(--warn-tint);border-color:var(--warn-line);color:var(--warn-ink)}
.stack>*+*{margin-top:1.5rem}

@media (max-width:640px){
.wrap{padding-left:1.1rem;padding-right:1.1rem}
main{padding-top:2rem}
h1{font-size:1.5rem}
.facts div{grid-template-columns:1fr;gap:.2rem;padding:1rem 1.15rem}
.rounds li{grid-template-columns:1fr;gap:1rem;padding:1.2rem 1.15rem}
.grid2{grid-template-columns:1fr}
.summary{grid-template-columns:repeat(2,1fr)}
.report-block{padding:1.15rem 1.15rem 1rem}
.pin-card{padding:1.4rem 1.2rem 1.2rem}
.feedback div{grid-template-columns:1fr;gap:.1rem}
.lvl-bar i{width:1rem}
.progress{flex-direction:column;align-items:flex-start;gap:.6rem}
.brand .mark:first-child img{width:104px}
/* On a phone the masthead takes two rows: the logos, then the address, the language
   and the way out. The words "in collaboration with" go; both logos stay. */
.brand{flex-wrap:wrap;gap:.5rem}
.brand>span{display:none}
.brand .mark:not(:first-child) img{width:28px;height:28px}
.account{flex:1 0 100%;margin-left:0;gap:.4rem}
.whoami{flex:1 1 auto;max-width:none;font-size:.8125rem}
.signout{margin-left:auto}
.signout .button{padding:.3rem .6rem;font-size:.75rem}
.lang-now{display:none}
.lang-now-code{display:inline}
.lang-menu summary{gap:.3rem;padding:0 .3rem 0 .4rem}
.op-id span{border-left:0;padding-left:0}
}
@media (max-width:640px){
.stage{padding:1.25rem}
.call-head{margin:-1.25rem -1.25rem 0;padding:1.15rem 1.25rem}
.persona h1{font-size:1.3125rem}
.avatar{width:3rem;height:3rem;font-size:.9375rem}
.captions{height:11rem}
.caption-line{font-size:1.125rem}
}
@media (prefers-reduced-motion:reduce){
*{transition:none!important}
.caption-line{transition:opacity .2s linear!important}
.caption-line.is-leaving{transform:none;filter:none}
.caption-word{filter:none;transition:opacity .15s linear!important}
.stage[data-speaking="you"] .dot.live::after{animation:none}
.live[data-state=on] .dot{animation:none}
.avatar::before,.avatar::after{transform:none}
.mic-meter i{transform:none}
.confirm-end{animation:none}
.lang-list{animation:none}
}
