/* Figures for "What I told Carnegie Mellon's translation students". The figure shell comes from /essays/eth/figures.css. */
.cm-fig button:focus-visible{outline:2px solid var(--mark);outline-offset:2px;}

/* Figure 1: timeline. Scoped to .cm-fig (not article) so it also works when the home page lifts it out of the essay. */
.cm-fig .cm-time{list-style:none;margin:4px 0 0;padding:0;position:relative;}
.cm-fig .cm-time::before{content:"";position:absolute;left:111px;top:var(--cm-top,14px);height:var(--cm-h,calc(100% - 28px));width:2px;background:var(--hair);}
.cm-fig .cm-rail{position:absolute;left:111px;top:var(--cm-top,14px);width:2px;height:var(--cm-h,calc(100% - 28px));background:var(--ink);transform-origin:top;transform:scaleY(1);transition:transform .45s linear;}
.cm-fig .cm-time li{display:grid;grid-template-columns:92px 40px minmax(0,1fr);align-items:start;margin:0;padding:9px 0;position:relative;list-style:none;}
.cm-fig .cm-time li b{font-family:'Inter',sans-serif;font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--quiet);text-align:right;padding-top:4px;}
.cm-fig .cm-time li i{justify-self:center;width:14px;height:14px;margin-top:4px;border-radius:50%;border:2px solid var(--ink);background:var(--paper);position:relative;z-index:1;transition:background-color .3s,transform .3s;}
.cm-fig .cm-time li span{font-family:'Fraunces Variable',Georgia,serif;font-size:19px;font-weight:500;line-height:1.25;color:var(--ink);display:inline;}
.cm-fig .cm-time li small{display:block;font-family:'Inter',sans-serif;font-size:13.5px;line-height:1.45;color:var(--quiet);margin-top:2px;}
.cm-fig .cm-time li > div{transition:opacity .35s;}
.cm-fig .cm-time li.on i{background:var(--ink);}
.cm-fig .cm-time li.now i{background:var(--mark);transform:scale(1.35);}
.cm-fig .cm-time li.now span{background:var(--mark);color:#1a1a17;box-decoration-break:clone;-webkit-box-decoration-break:clone;padding:0 4px;margin-left:-4px;}
.cm-fig.playing .cm-time li.off > div,.cm-fig.playing .cm-time li.off b{opacity:.25;}
.cm-fig.playing .cm-time li.off i{border-color:var(--hair);}
.cm-punch{font-family:'Fraunces Variable',Georgia,serif;font-size:20px;font-weight:500;margin:6px 0 0;transition:opacity .4s;}
.cm-fig.playing .cm-punch{opacity:0;}

/* Figure 2: the split */
.cm-tog{display:flex;flex-wrap:wrap;gap:6px;}
.cm-tog button{font-family:'Inter',sans-serif;font-size:13px;padding:6px 11px;border-radius:6px;border:1px solid var(--hair);background:none;color:var(--ink);cursor:pointer;}
.cm-tog button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper);}
.cm-split{display:flex;height:52px;border:1.4px solid var(--ink);border-radius:6px;overflow:hidden;font-family:'Inter',sans-serif;}
.cm-split span{display:flex;flex-direction:column;justify-content:center;padding:0 10px;font-size:12.5px;font-weight:500;line-height:1.25;white-space:nowrap;overflow:hidden;transition:flex-basis .6s cubic-bezier(.2,.8,.2,1);}
.cm-split span small{font-weight:400;font-size:11.5px;}
.cm-split .t{background:var(--mark);color:#1a1a17;}
.cm-split .a{background:var(--eth-card);border-left:1.4px solid var(--ink);}
.cm-split .a:empty{border-left:none;padding:0;}
.cm-read{font-family:'Inter',sans-serif;font-size:14px;line-height:1.55;margin:0;min-height:44px;}
.cm-read b{font-family:'Fraunces Variable',Georgia,serif;font-size:22px;font-weight:500;}

/* Figure 3: the water ladder */
.cm-ladder{display:flex;flex-direction:column;gap:8px;font-family:'Inter',sans-serif;font-size:13.5px;}
.cm-ladder div{display:grid;grid-template-columns:96px minmax(0,1fr) 60px;gap:10px;align-items:center;}
.cm-ladder span{color:var(--quiet);}
.cm-ladder i{display:block;height:18px;border-radius:3px;background:var(--ink);transform-origin:left center;transition:transform .55s cubic-bezier(.2,.8,.2,1);min-width:2px;}
.cm-ladder div:last-child i{background:var(--mark);border:1.4px solid var(--ink);}
.cm-ladder b{font-weight:500;text-align:right;font-variant-numeric:tabular-nums;}

@media (max-width:560px){.cm-fig .cm-time li{grid-template-columns:70px 30px minmax(0,1fr);}.cm-fig .cm-time::before,.cm-fig .cm-rail{left:84px;}.cm-fig .cm-time li span{font-size:17px;}.cm-ladder div{grid-template-columns:84px minmax(0,1fr) 54px;}}
@media (prefers-reduced-motion:reduce){.cm-fig *{transition:none!important;}}