/* A reversible, data-driven walkthrough of the three-alternative example. */
#borda-example .example-workspace { position:relative; display:grid; grid-template-columns:235px 260px 1fr; gap:22px; height:460px; margin-top:32px; }
#borda-example h2 { font-size:1.65em; }
.example-workspace h3 { font-size:.83em; margin:0 0 26px; white-space:nowrap; }
.example-profile { position:relative; min-width:0; }
.example-people { position:absolute; top:56px; left:0; width:640px; display:grid; grid-template-columns:1fr 1fr; grid-auto-flow:column; grid-template-rows:repeat(10, 34px); gap:3px 45px; transition:opacity .45s; }
.example-person { display:flex; align-items:center; gap:20px; font-size:.73em; }
.example-person-index { width:24px; font-size:.72em; color:var(--muted); text-align:right; }
.example-order { white-space:nowrap; }
.example-grouped { opacity:0; visibility:hidden; transition:opacity .5s; }
.example-workspace[data-grouped="true"] .example-people { opacity:0; visibility:hidden; }
.example-workspace[data-grouped="true"] .example-grouped { opacity:1; visibility:visible; }
.example-table-head, .example-profile-row { display:grid; grid-template-columns:1fr 65px; align-items:center; gap:8px; }
.example-table-head { font-size:.64em; color:var(--muted); height:35px; margin-top:-10px; }
.example-table-head > :last-child { text-align:center; }
.example-profile-row { height:51px; font-size:.76em; }
.example-profile-row .example-letter { display:inline-block; min-width:19px; border-radius:2px; transition:color .3s, background .3s; }
.example-profile-row .example-relation { font-size:.85em; margin:0 4px; }
.example-mass { text-align:center; padding:3px 0; transition:color .3s, background .3s; border-radius:2px; }
.example-total { border-top:1px solid #bbb; padding-top:12px; margin-top:8px; display:flex; justify-content:space-between; font-size:.78em; }
.example-total strong { width:65px; text-align:center; font-weight:400; }
.example-histograms, .example-scores { border-left:1px solid #bbb; padding-left:20px; min-width:0; }
.example-histograms h3, .example-scores h3 { font-size:.79em; }
.example-reveal { opacity:0; visibility:hidden; transition:opacity .5s ease; }
.example-reveal.example-visible { opacity:1; visibility:visible; }
.example-hist-row { height:128px; display:grid; grid-template-columns:25px 1fr; gap:10px; align-items:center; }
.example-alt { color:var(--accent); font-size:1.05em; font-weight:400; }
.example-hist { height:108px; display:flex; justify-content:space-around; gap:15px; position:relative; padding:0 7px; }
.example-hist::after { content:""; position:absolute; top:85px; left:0; right:0; border-top:1px solid #c7c7c7; }
.example-bin { width:26px; height:86px; position:relative; }
.example-bar { position:absolute; bottom:0; left:3px; right:3px; background:#a51d1d; height:calc(var(--probability) * 110px); transform-origin:bottom; }
.example-probability { position:absolute; bottom:calc(var(--probability) * 110px + 7px); left:50%; transform:translateX(-50%); font-size:.56em; white-space:nowrap; color:var(--muted); }
.example-rank { position:absolute; top:92px; left:0; right:0; text-align:center; font-size:.57em; color:var(--muted); }
.example-score-row { height:128px; padding-top:4px; box-sizing:border-box; }
.example-score-name { font-style:italic; font-size:.85em; margin-bottom:14px; }
.example-score-name sub { font-size:.66em; }
.example-calculation { display:flex; align-items:baseline; gap:5px; white-space:nowrap; font-size:.64em; }
.example-score-term { white-space:nowrap; }
.example-score-value { color:var(--accent); font-size:.93em; margin-top:14px; }
.example-highlight { color:var(--example-color, var(--accent)); background:var(--example-tint, #9a1b1b14); }
.example-flight { position:fixed; z-index:100; pointer-events:none; white-space:nowrap; font-family:"ETBembo", Georgia, serif; color:var(--accent); transform-origin:center; }
.example-flight:empty { display:none; }
.example-divisor { color:var(--accent); white-space:nowrap; font-size:.82em; }
@media(max-width:760px) {
  #borda-example .example-workspace { grid-template-columns:1fr; height:auto; gap:30px; }
  .example-profile { min-height:450px; }
  .example-people { width:100%; gap:3px 10px; }
  .example-person { font-size:.6em; gap:5px; }
  .example-histograms, .example-scores { border-left:0; border-top:1px solid #bbb; padding:20px 0 0; }
  .example-hist-row { max-width:300px; }
}
@media(prefers-reduced-motion:reduce) { .example-workspace * { transition:none !important; } }
@media print {
  .example-people, .example-total { display:none; }
  .example-grouped, .example-reveal { opacity:1 !important; visibility:visible !important; }
}