/* Analysis and exercise boards in blog posts. Built from students/handbook.css by blog_boards.py. */
:root{--tr-ok:#2f6b3f}
[data-theme="dark"]{--tr-ok:#8fcf9e}
.tr{display:grid;grid-template-columns:minmax(0,28rem) minmax(16rem,1fr);gap:1.75rem;align-items:start}
.tr-board{position:sticky;top:6rem;align-self:start}
.tr-board svg{width:100%;height:auto;display:block;touch-action:none;user-select:none;-webkit-user-select:none;cursor:pointer;border:.5px solid var(--border)}
.tr .coord{fill:rgba(30,26,16,.6)}
.tr-turn{margin-top:.6rem;font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ivory-dim);display:flex;align-items:center;gap:.5rem;min-height:1.2rem}
.tr-turn:not(:empty)::before{content:"";width:.8rem;height:.8rem;border:.5px solid var(--ivory-dim)}
.tr-turn.w::before{background:#f4f1e8}
.tr-turn.b::before{background:#1d1a14}
.tr-panel{display:flex;flex-direction:column;gap:1rem;min-width:0}
.tr-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.tr-qn{font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.tr-dots{display:flex;gap:.35rem}
.tr-dots i{width:.7rem;height:.7rem;border:.5px solid var(--gold)}
.tr-dots i.now{box-shadow:0 0 0 2px var(--hb-key-bg);border-width:1.5px}
.tr-dots i.ok{background:var(--gold)}
.tr-dots i.seen{background:var(--ivory-dim);border-color:var(--ivory-dim)}
.tr-status{background:var(--surface);border:.5px solid var(--border);border-left:3px solid var(--gold);padding:1.1rem 1.25rem;display:grid;gap:.65rem}
.tr-status.wrong{border-left-color:var(--hb-warn)}
.tr-status.ok{border-left-color:var(--tr-ok)}
.tr-status.seen{border-left-color:var(--ivory-dim)}
.tr-title{font:500 1.2rem/1.3 'Playfair Display',serif;color:var(--ivory)}
.tr-status.wrong .tr-title{color:var(--hb-warn)}
.tr-status.ok .tr-title{color:var(--tr-ok)}
.tr-status p{font-size:.97rem;line-height:1.65;color:var(--ivory-dim)}
.tr-status .tr-ctx{color:var(--ivory)}
.tr .mv{font-weight:600;color:var(--ivory)}
.tr-var{color:var(--ivory-dim)}
.tr-tag{font-size:.64rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.tr-actions{display:flex;flex-wrap:wrap;gap:.6rem}
.tr-actions:empty{display:none}
.tr-btn{font:500 .78rem 'DM Sans',sans-serif;letter-spacing:.1em;text-transform:uppercase;padding:.95rem 1.5rem;border:0;background:var(--gold);color:var(--black);cursor:pointer}
.tr-btn:hover{background:var(--gold-light)}
.tr-btn.ghost{background:transparent;color:var(--ivory);border:.5px solid var(--outline)}
.tr-btn.ghost:hover{border-color:var(--gold);color:var(--gold)}
.tr-topics{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center}
.tr-topics .tr-tag{width:100%}
.tr-topics a,.tr-topics > span:not(.tr-tag){font-size:.8rem;border:.5px solid var(--gold);color:var(--gold);padding:.35rem .7rem;text-decoration:none}
.tr-logwrap{border-top:.5px solid var(--border-soft);padding-top:.8rem}
.tr-logwrap summary{font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ivory-dim);cursor:pointer}
.tr-log{margin-top:.7rem;max-height:18rem;overflow:auto;display:grid;gap:.5rem;padding-right:.4rem}
.tr-row{font-size:.92rem;line-height:1.6;color:var(--ivory-dim)}
.tr-row.var{padding-left:1rem;color:var(--faint)}
.tr-row.seen .mv::after{content:" (solution shown)";font-weight:400;font-size:.8rem;color:var(--faint)}
.tr-loading{color:var(--ivory-dim)}
.tr-turn.bad{color:var(--hb-warn)}
.tr-turn.bad::before{background:var(--hb-warn);border-color:var(--hb-warn)}
.tr-status .tr-title{font:500 1.2rem/1.3 'Playfair Display',serif;color:var(--ivory)}
.tr-status.wrong .tr-title{color:var(--hb-warn)}
.tr-status.ok .tr-title{color:var(--tr-ok)}
.tr-board svg{background:var(--surface)}
.tr .coord{fill:var(--ivory-dim)}
.tr-turn.plain::before{display:none}
.tr-turn.good{color:var(--tr-ok)}
@media (max-width:680px){.tr{grid-template-columns:minmax(0,1fr);gap:1rem}.tr-panel{display:contents}.tr-head{order:1}.tr-board{order:2;position:sticky;top:4.5rem;z-index:5;background:var(--black);margin:0 -1.5rem;padding-bottom:.6rem;border-bottom:.5px solid var(--border-soft)}.tr-board svg{width:100%;max-width:min(100%,48svh);margin:0 auto;border-left:0;border-right:0}.tr-status{order:3}.tr-logwrap{order:4}.tr-bar{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.6rem 1.5rem 0}.tr-bar .tr-turn{margin:0;padding:0;flex:1;min-width:0}.tr-bar .tr-actions{flex:none}.tr-bar .tr-btn{padding:.7rem .95rem;font-size:.7rem;letter-spacing:.08em}.tr-status{padding:.95rem 1rem}.tr-status .tr-title{font-size:1.1rem}}
.tr-status.review{border-left-color:var(--ivory-dim)}
.tr-btn.nav{padding:.85rem 1rem;min-width:2.9rem;font-size:.9rem;letter-spacing:0}
.tr-btn:disabled{opacity:.35;cursor:default}
.rv{display:grid;gap:.5rem;font-size:.93rem;line-height:1.75;color:var(--ivory-dim)}
.rv-main,.rv-var{display:block}
.rv-var{margin:.3rem 0 .3rem .9rem;padding-left:.7rem;border-left:.5px solid var(--border);font-size:.9rem}
.rv-c{color:var(--ivory-dim)}
.rv-mv{font:600 .93rem 'DM Sans',sans-serif;color:var(--ivory);background:none;border:0;padding:.05rem .2rem;cursor:pointer}
.rv-mv:hover{color:var(--gold)}
.rv-mv.on{background:var(--gold);color:var(--black)}
.tr-log{max-height:22rem}
@media (max-width:680px){.tr-bar .tr-btn.nav{padding:.65rem .7rem;min-width:2.4rem}}
@media (max-width:680px){.tr-bar{flex-wrap:wrap}.tr-bar .tr-actions{flex-wrap:wrap}}
a.tr-btn{display:inline-flex;align-items:center;text-decoration:none}
.vw-list{max-height:24rem;margin-top:.2rem;border-top:.5px solid var(--border-soft);padding-top:.8rem}
.viewer-wrap .tr{margin-top:.6rem}
@media (max-width:680px){.vw-list{max-height:none}}
@media (max-width:680px){.vw-list{order:5}.hb-shell .tr-board{top:7.9rem}}
.vw-stage{position:relative}
.vw-over:empty{display:none}
.vw-over{position:absolute;inset:0;display:grid;place-items:center;background:rgba(10,9,7,.35);z-index:3}
.vw-ctrl{display:flex;gap:.35rem;margin-top:.55rem;align-items:stretch}
.vw-b{flex:1 1 0;min-width:0;font:500 1rem 'DM Sans',sans-serif;padding:.6rem 0;background:var(--surface);color:var(--ivory);border:.5px solid var(--outline);cursor:pointer;line-height:1}
.vw-b:hover:not(:disabled){border-color:var(--gold);color:var(--gold)}
.vw-b:disabled{opacity:.35;cursor:default}
.vw-b.main{background:var(--gold);color:var(--black);border-color:var(--gold)}
.vw-b.main:hover:not(:disabled){background:var(--gold-light);color:var(--black)}
.vw-b.txt{flex:1.6 1 0;font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.vw-b.txt.on{background:#3f78c2;border-color:#3f78c2;color:#fff}
.vw-gap{flex:0 0 .35rem}
.vw-dl{font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);text-decoration:none;border-bottom:.5px solid var(--gold)}
.vw-pick,.vw-promo{background:var(--black);border:.5px solid var(--gold);box-shadow:0 12px 40px rgba(0,0,0,.45);padding:.8rem;min-width:min(15rem,80%);max-width:88%;display:grid;gap:.35rem}
.vw-pick-h{font-size:.64rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:.2rem}
.vw-opt{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;width:100%;text-align:left;background:var(--surface);border:.5px solid var(--border);color:var(--ivory);padding:.6rem .75rem;cursor:pointer;font:500 .95rem 'DM Sans',sans-serif}
.vw-opt span{font-size:.72rem;color:var(--ivory-dim)}
.vw-opt.on{border-color:var(--gold);background:var(--gold);color:var(--black)}
.vw-opt.on span{color:var(--black)}
.vw-pick-k{font-size:.72rem;color:var(--ivory-dim);margin-top:.2rem}
.vw-promo-row{display:flex;gap:.4rem}
.vw-pp{width:3.4rem;height:3.4rem;padding:.2rem;background:var(--surface);border:.5px solid var(--border);cursor:pointer}
.vw-pp:hover{border-color:var(--gold)}
.vw-pp svg{width:100%;height:100%}
.vw-engine{background:var(--surface);border:.5px solid var(--border);border-left:3px solid #3f78c2;padding:.75rem 1rem;display:grid;gap:.3rem}
.vw-engine[hidden]{display:none}
.vw-eng-top{display:flex;align-items:baseline;gap:.8rem}
.vw-eval{font:600 1.25rem 'DM Sans',sans-serif;color:var(--ivory);font-variant-numeric:tabular-nums}
.vw-depth,.vw-eng-src,.vw-eng-msg{font-size:.75rem;color:var(--ivory-dim)}
.vw-pv{font-size:.88rem;line-height:1.5;color:var(--ivory)}
.vw-more{font-size:.85rem!important;color:var(--gold)!important}
.vw-foot{display:grid;gap:.35rem}
.vw-tip{font-size:.8rem;line-height:1.5;color:var(--faint)}
.vw-clear{justify-self:start;background:none;border:0;padding:0;font:500 .8rem 'DM Sans',sans-serif;color:var(--gold);text-decoration:underline;cursor:pointer}
.rv-mv.user{color:#4a86cf;font-weight:500}
.rv-mv.user.on{background:#3f78c2;color:#fff}
.vw .tr-board svg{cursor:grab}
@media (max-width:680px){.vw .vw-ctrl{padding:0 1rem;max-width:min(100%,calc(48svh + 2rem));margin:.55rem auto 0}.vw .vw-b{padding:.75rem 0}.vw .vw-engine{order:3}.vw .tr-status{order:3}.vw .vw-list{order:4}.vw .vw-foot{order:5}.vw .vw-extra{order:6}.vw .tr-board{padding-bottom:.7rem}}
.vw-lines{margin-left:auto;display:inline-flex;align-items:center;gap:.25rem}
.vw-lines-l{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ivory-dim);margin-right:.2rem}
.vw-lines button{width:1.7rem;height:1.6rem;font:500 .78rem 'DM Sans',sans-serif;background:none;border:.5px solid var(--outline);color:var(--ivory-dim);cursor:pointer;padding:0}
.vw-lines button[aria-pressed="true"]{background:#3f78c2;border-color:#3f78c2;color:#fff}
.vw-pvs{display:grid;gap:.25rem}
.vw-pe{font-weight:600;font-variant-numeric:tabular-nums;margin-right:.2rem}
@media (max-width:680px){.vw .tr-board .vw-engine{margin:.5rem 1rem 0;padding:.4rem .7rem;gap:.2rem}.vw .tr-board .vw-eng-top{gap:.5rem}.vw .tr-board .vw-eval{font-size:1rem}.vw .tr-board .vw-eng-src{display:none}.vw .tr-board .vw-pv{font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}
.ex-nav .tr-btn{padding:.65rem 1rem;font-size:.7rem}
@media (max-width:680px){.tr-bar .tr-turn{min-width:auto}}
.tr-bar{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap}
.tr-clock{margin-top:.6rem;font:600 .95rem 'DM Sans',sans-serif;font-variant-numeric:tabular-nums;letter-spacing:.02em;color:var(--ivory);border:.5px solid var(--outline);padding:.25rem .6rem;min-width:4.2rem;text-align:center}
.tr-clock::before{content:"⏱ ";font-weight:400;opacity:.7}
.tr-clock.warn{color:#9a6a00;border-color:#c9952a;background:rgba(201,149,42,.12)}
.tr-clock.over{color:#fff;background:var(--hb-warn);border-color:var(--hb-warn)}
.tr-clock.paused{opacity:.6}
.tr-clock[hidden]{display:none}
[data-theme="dark"] .tr-clock.warn{color:#e8b64c}
.tr-times{font-size:.9rem!important}
.tr-logit{margin-top:.2rem}
.tr-logit .tr-btn{padding:.65rem 1rem;font-size:.7rem}
@media (max-width:680px){.tr-bar .tr-clock{margin:0;order:2}.tr-bar .tr-turn{order:1}.tr-bar .tr-actions{order:3}}
.vw-cont{font-size:.85rem!important;color:var(--ivory-dim)!important}
.vw-contb{background:none;border:0;border-bottom:.5px solid var(--gold);padding:0;font:600 .85rem 'DM Sans',sans-serif;color:var(--gold);cursor:pointer}
.tr.vw-solo{grid-template-columns:minmax(0,26rem);justify-content:center}
.vw-solo .tr-panel{gap:.6rem}
.vw-solo .tr-head,.vw-solo .tr-status,.vw-solo .vw-list{display:none}
.vw-solo .vw-list:has(.rv-mv){display:block}
.vw-solo .tr-board{position:static}
@media (max-width:680px){.vw-solo .tr-board{position:sticky}}
/* blog: the handbook board inside a post */
:root{--hb-warn:#9a3b2a;--hb-key-bg:rgba(125,95,18,.08);--tr-ok:#2f6b3f}
[data-theme="dark"]{--hb-warn:#e08a74;--hb-key-bg:rgba(201,168,76,.08);--tr-ok:#8fcf9e}
.prose>figure.diagram.an{max-width:60rem}
.diagram.an .tr{margin-top:.2rem;text-align:left}
.diagram.an .tr-board{top:5.5rem}
.diagram.an figcaption{margin-top:1rem}
.prose .tr p{margin:0;opacity:1;max-width:none;font-size:.95rem;line-height:1.65;color:var(--ivory-dim)}
.prose .tr .tr-ctx{color:var(--ivory)}
.prose .tr .tr-title{font:500 1.15rem/1.3 'Playfair Display',serif;color:var(--ivory)}
.prose .tr .tr-status.wrong .tr-title{color:var(--hb-warn)}
.prose .tr .tr-status.ok .tr-title{color:var(--tr-ok)}
.prose .tr .vw-pick-h{font-size:.64rem;line-height:1.4;color:var(--gold)}
.prose .tr .vw-pick-k,.prose .tr .vw-tip,.prose .tr .vw-eng-src,.prose .tr .vw-eng-msg{font-size:.75rem;line-height:1.5}
.prose .tr .vw-pv{font-size:.88rem;line-height:1.5;color:var(--ivory)}
.prose .tr .vw-more{font-size:.85rem;color:var(--gold)}
.prose .tr .rv,.prose .tr .rv-c{font-size:.93rem;line-height:1.75}
.prose .tr .tr-row{font-size:.92rem;line-height:1.6}
@media (max-width:680px){.prose .tr .vw-pv{font-size:.8rem}}
.blog .tr button{font-family:'DM Sans',sans-serif}
@media (max-width:900px){.diagram.an .tr{grid-template-columns:minmax(0,1fr)}.diagram.an .tr-board{position:static;max-width:30rem;margin:0 auto;width:100%}}
@media (max-width:680px){
  .prose>figure.diagram.an{padding:.8rem 0 .6rem;border-left:0;border-right:0;width:100vw;max-width:none;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
  .diagram.an .tr{padding:0 1rem}
  .diagram.an .tr-board{position:sticky;top:4.5rem;margin:0 -1rem;max-width:none;width:auto}
  .diagram.an .q,.diagram.an figcaption{padding:0 1rem}
}