/* The Elo worked example, in the same dark frame as the Work figures (viz.css).
   Home and away are the two poles of an ordered outcome, so they take a warm/cool
   pair (validated on #1b1d20) and the draw sits between them in neutral grey.
   Dash patterns repeat the identity for anyone who can't separate the hues. */
.viz.viz-elo{--elo-home:#d95926;--elo-away:#3987e5;--elo-draw:#a3a79f}
/* Prose rules (p margins, h3/h4 sizes, code size) stay out of the figure. */
.viz.viz-elo p,.viz.viz-elo li{margin:0}
.viz.viz-elo .viz-title{font:500 24px/1.18 var(--sans);letter-spacing:-.5px;margin:0}
.viz.viz-elo code{font:11px/1.7 var(--mono);color:var(--viz-ink);overflow-wrap:anywhere}

.elo-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px 20px;margin-bottom:18px}
.elo-top .viz-head{margin:0}
.viz-elo .elo-reset{flex:none}
.elo-body{display:grid;gap:22px}
.elo-main,.elo-chart-section{min-width:0}

/* Inputs */
.elo-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 24px;padding:14px 0 16px;border-block:1px solid var(--viz-line)}
.elo-field{display:flex;flex-direction:column;gap:8px;min-width:0}
.viz-elo .elo-field>label:not(.elo-checkbox){display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  font:10px/1.6 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--viz-muted)}
.viz-elo .elo-field output{font:11px/1.6 var(--mono);letter-spacing:0;text-transform:none;color:var(--viz-ink);font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.viz-elo select{-webkit-appearance:none;appearance:none;width:100%;max-width:none;min-height:36px;margin:0;padding:8px 30px 8px 10px;border:1px solid var(--viz-line);border-radius:0;
  background-color:var(--viz-raised);color:var(--viz-ink);font:12px/1.2 var(--mono);cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--viz-muted) 50%),linear-gradient(135deg,var(--viz-muted) 50%,transparent 50%);
  background-position:calc(100% - 15px) 52%,calc(100% - 10px) 52%;background-size:5px 5px;background-repeat:no-repeat;transition:border-color .2s}
.viz-elo select:hover:not(:disabled){border-color:var(--viz-muted)}
.viz-elo select option{background:var(--viz-raised);color:var(--viz-ink)}
.viz-elo select:disabled,.viz-elo input:disabled{cursor:default}
.elo-field-disabled{opacity:.42}
.viz-elo .elo-checkbox{display:flex;align-items:center;gap:9px;min-height:24px;font:11px/1.4 var(--mono);letter-spacing:0;color:var(--viz-muted);cursor:pointer}
.viz-elo .elo-checkbox input{-webkit-appearance:none;appearance:none;flex:none;width:14px;height:14px;margin:0;border:1px solid var(--viz-muted);border-radius:0;background:transparent;cursor:pointer}
.viz-elo .elo-checkbox input:checked{background:var(--viz-ink);border-color:var(--viz-ink);box-shadow:inset 0 0 0 3px var(--viz-bg)}

/* The update */
.elo-ratings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-bottom:1px solid var(--viz-line)}
.elo-rating{padding:16px 0 14px;min-width:0}
.elo-rating:first-child{padding-right:16px;border-right:1px solid var(--viz-line)}
.elo-rating:last-child{padding-left:20px}
.elo-small-label,.elo-expected>span{font:10px/1.6 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--viz-muted)}
.elo-rating-flow{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin:4px 0 2px}
.elo-rating-old{font:14px/1 var(--mono);color:var(--viz-muted);font-variant-numeric:tabular-nums}
.elo-rating-arrow{font-size:14px;color:var(--viz-faint)}
.elo-rating-new{font:400 32px/1.1 var(--mono);letter-spacing:-1px;color:var(--viz-ink);font-variant-numeric:tabular-nums}
.elo-rating-change{font:12px/1.4 var(--mono);color:var(--viz-muted);font-variant-numeric:tabular-nums}
.elo-expected{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:14px 0 4px}
.elo-expected-value{font:22px/1 var(--mono);letter-spacing:-.5px;color:var(--viz-ink);font-variant-numeric:tabular-nums}
.viz.viz-elo .elo-explanation{font-size:12px;line-height:1.55;color:var(--viz-muted);margin:2px 0 12px;text-wrap:pretty}
.viz.viz-elo .elo-calculation{font:11px/1.8 var(--mono);color:var(--viz-ink);background:var(--viz-raised);padding:9px 12px;overflow-wrap:anywhere}

/* The probability layer */
.elo-chart-section{border-top:1px solid var(--viz-line);padding-top:16px}
.elo-chart-heading{display:flex;align-items:baseline;justify-content:space-between;gap:6px 14px;flex-wrap:wrap}
.viz.viz-elo .elo-chart-heading h4{font:500 15px/1.3 var(--sans);letter-spacing:-.2px;color:var(--viz-ink);margin:0}
.viz.viz-elo .elo-chart-heading p{font:10px/1.6 var(--mono);color:var(--viz-muted);white-space:nowrap}
.elo-chart-heading output{color:var(--viz-ink);font-variant-numeric:tabular-nums}
.viz.viz-elo .elo-model-caveat{font-size:12px;line-height:1.55;color:var(--viz-muted);margin:4px 0 8px}
.elo-chart{display:block;width:100%;height:auto;overflow:visible}
.elo-chart text{font:12px var(--mono);fill:var(--viz-muted)}
.elo-grid-line{stroke:var(--viz-grid);stroke-width:1}
.elo-axis-line{stroke:var(--viz-line)}
.elo-curve{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.elo-home-line{stroke:var(--elo-home)}
.elo-draw-line{stroke:var(--elo-draw);stroke-dasharray:7 5}
.elo-away-line{stroke:var(--elo-away);stroke-dasharray:.1 5}
.elo-chart-marker{stroke:var(--viz-ink);stroke-opacity:.45;stroke-width:1}
.elo-chart-dot{stroke:var(--viz-bg);stroke-width:2}
.elo-home-dot{fill:var(--elo-home)}.elo-draw-dot{fill:var(--elo-draw)}.elo-away-dot{fill:var(--elo-away)}
.elo-probabilities{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:8px}
.elo-probability{padding-top:8px;border-top:2px solid var(--viz-line)}
.elo-probability-home{border-top-color:var(--elo-home)}
.elo-probability-draw{border-top-style:dashed;border-top-color:var(--elo-draw)}
.elo-probability-away{border-top-style:dotted;border-top-color:var(--elo-away)}
.elo-probability span{display:block;font:10px/1.6 var(--mono);color:var(--viz-muted)}
.elo-probability output{font:20px/1.5 var(--mono);letter-spacing:-.5px;color:var(--viz-ink);font-variant-numeric:tabular-nums}

/* Fine print */
.elo-math{margin-top:20px;padding-top:10px;border-top:1px solid var(--viz-line);font-size:12px;line-height:1.7;color:var(--viz-muted)}
.viz.viz-elo .elo-math>summary{cursor:pointer;min-height:28px;display:flex;align-items:center;font:10px/1.6 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--viz-ink)}
.viz.viz-elo .elo-math p{margin:10px 0 0;max-width:78ch}
.viz.viz-elo .elo-no-js{font:10px/1.6 var(--mono);color:var(--viz-fine);margin-top:12px}

/* Wide figure: inputs and the update on the left, the probability layer on the right. */
@container viz (min-width:760px){
  .elo-body{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:0 34px}
  .elo-chart-section{border-top:0;padding:14px 0 0 34px;border-left:1px solid var(--viz-line)}
}
@container viz (min-width:521px) and (max-width:759px){.elo-chart text{font-size:10px}}
@container viz (max-width:520px){
  .elo-top{flex-direction:column}
  .elo-controls{gap:14px 16px}
  .viz-elo .elo-field>label:not(.elo-checkbox){flex-direction:column;align-items:flex-start;gap:2px}
  .viz-elo .elo-field output{text-align:left}
  .elo-rating:last-child{padding-left:14px}
  .elo-rating:first-child{padding-right:12px}
  .elo-rating-new{font-size:26px}
  .elo-chart text{font-size:15px}
  .elo-probabilities{gap:10px}
  .elo-probability output{font-size:17px}
}
@media(prefers-reduced-motion:reduce){.viz-elo *{animation:none!important;transition:none!important}}