/* Handbook pages (thinking.html, principles.html). Loads after the site's style.css and uses its tokens:
   --black (page), --charcoal, --surface, --surface2, --gold, --ivory (text), --ivory-dim, --border, --border-soft, --faint.
   Adds only the annotation colours the site doesn't have. Square corners and 0.5px rules, like the rest of the site. */
:root{
  --hb-warn:#9a3b2a; --hb-warn-bg:rgba(154,59,42,.07);
  --hb-ask:#2f5878;  --hb-ask-bg:rgba(47,88,120,.07);
  --hb-key-bg:rgba(125,95,18,.08);
}
[data-theme="dark"]{
  --hb-warn:#e08a74; --hb-warn-bg:rgba(224,138,116,.08);
  --hb-ask:#8fb4d6;  --hb-ask-bg:rgba(143,180,214,.08);
  --hb-key-bg:rgba(201,168,76,.08);
}

.hb-wrap{max-width:1280px;margin:0 auto;padding:4rem 5rem 6rem}
.hb-col{max-width:44rem}
.hb-single .hb-col{margin:0 auto}
.hb-shell{display:grid;grid-template-columns:13rem minmax(0,1fr);gap:4rem}
.hb-shell main{min-width:0}
@media (max-width:900px){.hb-shell{grid-template-columns:minmax(0,1fr);gap:0}}
@media (max-width:768px){.hb-wrap{padding:2.5rem 1.5rem 4rem}}

body{line-height:1.7}
.hb-col p{line-height:1.75}
.hb-col a{color:var(--gold)}
:focus-visible{outline:1px solid var(--gold);outline-offset:3px}

/* page header extras */
.page-header .legend{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;margin-top:1.75rem;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ivory-dim)}
.page-header .legend b{font:700 1rem 'Playfair Display',serif;letter-spacing:0;margin-right:.4rem}
.page-header .crumbs{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.75rem}

/* index (principles) */
.index{position:sticky;top:6.5rem;align-self:start;max-height:calc(100vh - 8rem);overflow:auto}
.index .lbl{font-size:.64rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin:1.4rem 0 .4rem}
.index .lbl:first-child{margin-top:0}
.index a{display:block;font-size:.88rem;color:var(--ivory-dim);text-decoration:none;padding:.28rem 0 .28rem .8rem;border-left:.5px solid var(--border-soft)}
.index a:hover{color:var(--gold)}
.index a.on{color:var(--ivory);border-left:2px solid var(--gold);padding-left:calc(.8rem - 1.5px)}
@media (max-width:900px){
  .index{top:4.5rem;z-index:100;background:var(--nav-bg);backdrop-filter:blur(16px);display:flex;gap:.4rem;overflow-x:auto;max-height:none;
    margin:0 -1.5rem 2rem;padding:.7rem 1.5rem;border-bottom:.5px solid var(--border-soft);scrollbar-width:none}
  .index .lbl{display:none}
  .index a{flex:none;white-space:nowrap;border:.5px solid var(--border);padding:.35rem .8rem;font-size:.8rem}
  .index a.on{border:.5px solid var(--gold);color:var(--gold);padding-left:.8rem}
}

/* view switch */
.seg{display:inline-flex;border:.5px solid var(--outline)}
.seg button{font:500 .72rem 'DM Sans',sans-serif;letter-spacing:.12em;text-transform:uppercase;border:0;background:transparent;color:var(--ivory-dim);padding:.65rem 1.1rem;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--gold);color:var(--black)}
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem;margin-top:1.75rem}
.toolbar small{font-size:.82rem;color:var(--ivory-dim)}

/* section heads */
.part{padding-top:4.5rem}
.part:first-child{padding-top:0}
.hb-col .section-tag{margin-bottom:.9rem}
.part > h2{font-size:clamp(1.8rem,3vw,2.4rem)}
.lede{color:var(--ivory-dim);margin-top:1rem;font-weight:300;font-size:1.05rem}

/* pocket card */
.pocket{margin-top:2.5rem;background:var(--surface);border:.5px solid var(--border);border-top:2px solid var(--gold);padding:1.75rem 2rem}
.pocket h3{font-size:.68rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.pocket ol{margin-top:1.1rem;list-style:none;display:grid;gap:.75rem;counter-reset:p}
.pocket li{display:grid;grid-template-columns:2rem 1fr;gap:.9rem;align-items:baseline;font:500 1.12rem/1.4 'Playfair Display',serif}
.pocket li::before{counter-increment:p;content:counter(p);font:500 .8rem 'DM Sans',sans-serif;color:var(--gold);border:.5px solid var(--gold);width:1.6rem;height:1.6rem;display:grid;place-items:center}
.pocket li a{color:var(--ivory);text-decoration:none}
.pocket li a:hover{color:var(--gold)}
@media (max-width:768px){.pocket{padding:1.4rem 1.25rem}}

/* routine steps */
.steps{margin-top:3rem;display:grid}
.step{display:grid;grid-template-columns:3.5rem minmax(0,1fr);gap:1.5rem;padding-bottom:3rem;position:relative;scroll-margin-top:6rem}
.step:not(:last-child)::after{content:"";position:absolute;left:1.75rem;top:4.1rem;bottom:.5rem;width:.5px;background:var(--border)}
.step .n{width:3.5rem;height:3.5rem;display:grid;place-items:center;border:.5px solid var(--border);
  background:repeating-conic-gradient(var(--surface2) 0 25%,var(--surface) 0 50%) 0 0/1.75rem 1.75rem}
.step .n span{background:var(--black);border:.5px solid var(--gold);width:2rem;height:2rem;display:grid;place-items:center;font:500 1.05rem 'Playfair Display',serif;color:var(--gold)}
.step h3{font:500 1.5rem/1.25 'Playfair Display',serif;margin-top:.6rem}
.step .body{display:grid;gap:1rem;margin-top:.9rem;min-width:0}
@media (max-width:768px){.step{grid-template-columns:2.75rem minmax(0,1fr);gap:1rem}.step .n{width:2.75rem;height:2.75rem}.step .n span{width:1.6rem;height:1.6rem;font-size:.9rem}.step:not(:last-child)::after{left:1.375rem;top:3.3rem}}

/* topics */
.topic{padding-top:3.5rem;margin-top:3.5rem;border-top:.5px solid var(--border-soft);scroll-margin-top:6.5rem}
.topic.first{border-top:0;margin-top:0;padding-top:0}
.topic header{display:grid;gap:.6rem}
.topic h3{font:500 clamp(1.6rem,2.6vw,2rem)/1.2 'Playfair Display',serif}
.bigidea{font:italic 400 1.2rem/1.55 'Playfair Display',serif;color:var(--ivory-dim)}
.tbody{display:grid;gap:1.1rem;margin-top:1.6rem}
.group-h{margin-top:5rem;padding:1rem 0 .9rem;border-top:2px solid currentColor;font-size:.7rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;scroll-margin-top:6.5rem}
.group-h.dyn{color:var(--hb-warn)}
.group-h.stat{color:var(--hb-ask)}
.group-h.neutral{color:var(--gold)}
.group-h + .topic{border-top:0;margin-top:0;padding-top:1.25rem}

.rules{list-style:none;display:grid;gap:1rem}
.rules li{display:grid;grid-template-columns:1.8rem minmax(0,1fr);gap:.6rem}
.rules li > b:first-child{font:500 1rem 'Playfair Display',serif;color:var(--gold)}
.rules .h{font-weight:500;color:var(--ivory)}
.rules .d{color:var(--ivory-dim)}
.rules .d em{color:var(--ivory);font-style:italic}
ul.plain{padding-left:1.2rem;display:grid;gap:.5rem;color:var(--ivory-dim)}
ul.plain b{color:var(--ivory);font-weight:500}
.sub{font-size:.68rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-top:.6rem}

/* annotation callouts */
.note{display:grid;grid-template-columns:2rem minmax(0,1fr);gap:.8rem;padding:1rem 1.25rem 1rem 1rem;border-left:2px solid}
.note .m{font:700 1.3rem/1.2 'Playfair Display',serif;text-align:center}
.note .t{display:block;font-size:.66rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;margin-bottom:.3rem}
.note p{color:var(--ivory)}
.note p + p,.note p + ul{margin-top:.5rem}
.note.key{background:var(--hb-key-bg);border-color:var(--gold)} .note.key .m,.note.key .t{color:var(--gold)}
.note.warn{background:var(--hb-warn-bg);border-color:var(--hb-warn)} .note.warn .m,.note.warn .t{color:var(--hb-warn)}
.note.ask{background:var(--hb-ask-bg);border-color:var(--hb-ask)} .note.ask .m,.note.ask .t{color:var(--hb-ask)}
.note a{color:inherit}

blockquote{padding-left:1.4rem;border-left:3px solid var(--gold);font:italic 500 1.3rem/1.4 'Playfair Display',serif;color:var(--ivory)}
blockquote cite{display:block;font:400 .7rem 'DM Sans',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--ivory-dim);margin-top:.5rem}

.chips{display:flex;flex-wrap:wrap;gap:.45rem}
.chips span{font-size:.78rem;letter-spacing:.04em;border:.5px solid var(--border);background:var(--surface);padding:.3rem .7rem;color:var(--ivory)}

.vs-wrap{overflow-x:auto}
table.vs{width:100%;border-collapse:collapse;font-size:.95rem;min-width:30rem}
.vs th{font-size:.66rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;text-align:left;padding:.75rem;color:var(--gold);border-bottom:.5px solid var(--gold)}
.vs td{padding:.8rem .75rem;border-bottom:.5px solid var(--border-soft);vertical-align:top;color:var(--ivory)}
.vs td:first-child{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ivory-dim);width:22%}

/* static / dynamic fork */
.fork{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--border);border:.5px solid var(--border)}
@media (max-width:640px){.fork{grid-template-columns:minmax(0,1fr)}}
.fork > div{background:var(--surface);padding:1.25rem 1.4rem;display:grid;gap:.6rem;align-content:start;border-top:2px solid}
.fork .dyn{border-top-color:var(--hb-warn)} .fork .stat{border-top-color:var(--hb-ask)}
.fork h4{font:500 1.15rem 'Playfair Display',serif}
.fork .dyn h4{color:var(--hb-warn)} .fork .stat h4{color:var(--hb-ask)}
.fork p{font-size:.95rem;color:var(--ivory-dim)}
.fork .links{display:flex;flex-wrap:wrap;gap:.4rem}
.fork .links a{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--ivory);border:.5px solid var(--outline);padding:.3rem .65rem}
.fork .links a:hover{border-color:var(--gold);color:var(--gold)}

/* center board */
.center-fig{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.75rem;align-items:center}
@media (max-width:560px){.center-fig{grid-template-columns:minmax(0,1fr)}}
.miniboard{width:13rem;max-width:100%;aspect-ratio:1;display:grid;grid-template-columns:repeat(8,1fr);border:.5px solid var(--gold)}
.miniboard i{display:grid;place-items:center;font:500 .62rem 'DM Sans',sans-serif;font-style:normal;letter-spacing:.06em}
.miniboard .l{background:var(--surface)} .miniboard .d{background:var(--surface2)}
.miniboard .c{background:var(--gold);color:var(--black)}

.methods{display:grid;gap:1rem}
.method{border:.5px solid var(--border-soft);background:var(--surface);padding:1.2rem 1.4rem}
.method.main{border:.5px solid var(--gold);border-left:3px solid var(--gold)}
.method h4{font:500 1.15rem 'Playfair Display',serif}
.method .when{display:block;font-size:.66rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin:.35rem 0 .6rem}
.method p,.method ul{font-size:.95rem;color:var(--ivory-dim)}
.method ul{margin-top:.6rem;padding-left:1.2rem;display:grid;gap:.35rem}

/* post-game timeline */
.timeline{display:grid;gap:1px;background:var(--border-soft);border:.5px solid var(--border-soft);margin-top:2rem}
.when-row{display:grid;grid-template-columns:8rem minmax(0,1fr);gap:1.25rem;padding:1.1rem 1.25rem;background:var(--surface)}
@media (max-width:560px){.when-row{grid-template-columns:minmax(0,1fr);gap:.3rem}}
.when-row .w{font-size:.66rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);padding-top:.3rem}
.when-row h4{font:500 1.1rem 'Playfair Display',serif}
.when-row p{color:var(--ivory-dim);font-size:.95rem;margin-top:.3rem}

.readmore{display:flex;gap:1rem;align-items:baseline;padding:.9rem 1.1rem;background:var(--surface);border:.5px solid var(--border);text-decoration:none}
.readmore span{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);flex:none}
.readmore b{font:500 1.05rem 'Playfair Display',serif;color:var(--ivory)}
.readmore:hover b{color:var(--gold)}

/* continue cards */
.next{margin-top:5rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}
@media (max-width:640px){.next{grid-template-columns:minmax(0,1fr)}}
.next a{display:grid;gap:.4rem;padding:1.5rem 1.6rem;background:var(--surface);border:.5px solid var(--border);text-decoration:none}
.next a small{font-size:.66rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.next a b{font:500 1.45rem 'Playfair Display',serif;color:var(--ivory)}
.next a span{font-size:.92rem;color:var(--ivory-dim)}
.next a:hover b{color:var(--gold)}

body.quick .detail{display:none}
body.quick .topic{padding-top:2.25rem;margin-top:2.25rem}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.hb-col > .pocket:first-child{margin-top:0}

/* switch between the two student pages */
.pageswitch{display:inline-flex;border:.5px solid var(--outline);margin-bottom:2rem;position:relative;z-index:1}
.pageswitch a{font-size:.72rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--ivory-dim);padding:.65rem 1.1rem}
.pageswitch a:hover{color:var(--gold)}
.pageswitch a[aria-current="page"]{background:var(--gold);color:var(--black)}

/* ── Readability pass ── */
:root{--hb-key-bg:rgba(125,95,18,.12);--hb-warn-bg:rgba(154,59,42,.1);--hb-ask-bg:rgba(47,88,120,.1)}
[data-theme="dark"]{--hb-key-bg:rgba(201,168,76,.12);--hb-warn-bg:rgba(224,138,116,.11);--hb-ask-bg:rgba(143,180,214,.11)}
body{font-size:1.0625rem}
.bigidea{font-style:normal;color:var(--ivory);font-size:1.2rem;line-height:1.5}
.note{border-left-width:3px;padding:1.1rem 1.25rem 1.1rem 1rem}
.note .t{font-size:.72rem;letter-spacing:.14em;font-weight:600}
.note p,.rules .d,ul.plain,.fork p,.method p,.method ul,.when-row p{line-height:1.65}
.rules .h{font-weight:600}
.section-tag,.sub,.method .when,.when-row .w,.index .lbl,.vs th,.fork .links a{letter-spacing:.14em}
.chips span{font-size:.85rem}
.page-header .legend{letter-spacing:.1em}

@media (max-width:768px){
  body{font-size:1rem}
  .page-header{padding:7.5rem 1.5rem 2.5rem}
  .page-header h1{font-size:2.3rem}
  .page-header p{font-size:1rem;line-height:1.7}
  .pageswitch{display:flex;width:100%;margin-bottom:1.5rem}
  .pageswitch a{flex:1;text-align:center;padding:.8rem .5rem;font-size:.74rem}
  .seg{display:flex;width:100%}
  .seg button{flex:1;padding:.8rem .5rem}
  .toolbar small{font-size:.85rem}
  .bigidea{font-size:1.1rem}
  .topic h3{font-size:1.55rem}
  .part > h2{font-size:1.7rem}
  .lede{font-size:1rem}
  .pocket li{font-size:1.02rem;grid-template-columns:1.8rem 1fr;gap:.7rem}
  .step h3{font-size:1.3rem}
  .note{grid-template-columns:1.5rem minmax(0,1fr);gap:.6rem;padding:.95rem 1rem .95rem .8rem}
  .note .m{font-size:1.15rem}
  .rules li{grid-template-columns:1.4rem minmax(0,1fr)}
  .fork > div{padding:1.1rem 1.1rem}
  .method{padding:1.1rem}
  .next{margin-top:3.5rem}
  .next a b{font-size:1.25rem}
  .center-fig .miniboard{width:100%;max-width:16rem}
  .theme-toggle{right:.9rem;bottom:.9rem}
}
@media (max-width:768px){
  /* steps: number sits beside the heading so the text gets the full width */
  .step{display:block;padding-bottom:2.5rem}
  .step::after{display:none}
  .step .n{float:left;width:2.6rem;height:2.6rem;margin:0 .85rem .4rem 0}
  .step h3{margin-top:.35rem;min-height:2.6rem;display:flex;align-items:center}
  .step .body{clear:both;margin-top:.9rem}
  .note ul.plain{padding-left:1rem}
}

/* ── Principles sub-pages ── */
.subnav{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.75rem;position:relative;z-index:1}
.subnav a{font-size:.74rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--ivory);border:.5px solid var(--outline);padding:.55rem .9rem}
.subnav a:hover{border-color:var(--gold);color:var(--gold)}
.subnav a[aria-current="page"]{border-color:var(--gold);color:var(--gold);box-shadow:inset 0 -2px 0 var(--gold)}
.hb-col > .group-h:first-child{margin-top:0;padding-top:0;border-top:0}
.practice{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem .6rem;font-size:.95rem}
.practice span{font-size:.68rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.practice a{color:var(--gold)}
.next{grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}
@media (max-width:768px){
  .subnav{display:grid;grid-template-columns:1fr 1fr;gap:.4rem}
  .subnav a{text-align:center;padding:.7rem .4rem;font-size:.7rem}
  .pageswitch a{padding:.8rem .3rem;font-size:.68rem;letter-spacing:.08em}
}

/* ── Exercises ── */
.hb-ex .hb-col{max-width:62rem}
.howto{background:var(--surface);border:.5px solid var(--border);padding:1.1rem 1.3rem;font-size:.98rem;color:var(--ivory-dim)}
.howto b{color:var(--ivory);font-weight:600}
.exercise{padding-top:3.5rem;scroll-margin-top:5.5rem}
.exercise .ex-h{font:500 clamp(1.6rem,2.6vw,2rem)/1.2 'Playfair Display',serif;margin-bottom:1.25rem}
: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)}
@media (max-width:768px){
  /* keep the theme button out of the content: sit it in the nav bar, next to the menu button */
  body:has(.hb-wrap) .theme-toggle{top:1rem;bottom:auto;right:4.6rem;width:2.5rem;height:2.5rem;border-radius:0;font-size:1rem;z-index:210}
  .page-header .legend{display:none}
  .toolbar small{display:none}
  .toolbar{margin-top:1.25rem}
}
.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)}

/* exercise boards: notes beside the board on laptops and tablets; on phones the board stays pinned while notes scroll */
.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}
}
.pocket-note{margin-top:1.1rem;padding-top:.9rem;border-top:.5px solid var(--border-soft);font-size:.95rem;color:var(--ivory-dim)}
.pocket-note a{color:var(--gold)}
.theory{margin-bottom:3rem}
/* review mode */
.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}}
/* four student pages in the switch */
.tbody .readmore + .readmore{margin-top:-.4rem}
@media (max-width:768px){
  .pageswitch{display:grid;grid-template-columns:1fr 1fr}
  .pageswitch a:nth-child(n+3){border-top:.5px solid var(--outline)}
  .pageswitch a:nth-child(even){border-left:.5px solid var(--outline)}
}
/* annotated game viewer */
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{margin-top:1.4rem}
.viewer-wrap .tr{margin-top:.6rem}
@media (max-width:680px){.vw-list{max-height:none}}
/* pre-game review: only the main idea and the question of each section */
body.quick .tbody > *:not(.note.ask){display:none}
body.quick .tbody{margin-top:1rem}
body.quick .theory{display:none}
.hb-col a.tr-btn{color:var(--black)}
.hb-col a.tr-btn:hover{color:var(--black)}
@media (max-width:680px){
  .vw-list{order:5}
  .hb-shell .tr-board{top:7.9rem}   /* below the nav and the contents bar */
}
/* openings: Part 1 / Part 2 tabs */
.parttabs{display:grid;grid-template-columns:1fr 1fr;max-width:40rem;margin-top:1.75rem;border:.5px solid var(--outline);position:relative;z-index:1}
.parttabs button{display:grid;gap:.25rem;text-align:left;font:500 1.05rem 'Playfair Display',serif;color:var(--ivory);background:transparent;border:0;padding:1rem 1.2rem;cursor:pointer}
.parttabs button + button{border-left:.5px solid var(--outline)}
.parttabs small{font:500 .66rem 'DM Sans',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.parttabs button[aria-selected="true"]{background:var(--gold);color:var(--black)}
.parttabs button[aria-selected="true"] small{color:var(--black)}
@media (max-width:768px){.parttabs button{font-size:.95rem;padding:.85rem .9rem}}
.opart > .group-h:first-child{margin-top:0;padding-top:0;border-top:0}
.autonext{display:flex;gap:.7rem;align-items:flex-start;margin-top:1rem;font-size:.95rem;color:var(--ivory-dim);cursor:pointer}
.autonext input{width:1.15rem;height:1.15rem;margin-top:.2rem;accent-color:var(--gold);flex:none}
.autonext b{color:var(--ivory);font-weight:600}
[hidden]{display:none!important}
/* five student pages in the switch */
.pageswitch{flex-wrap:wrap}
@media (max-width:768px){
  .pageswitch{grid-template-columns:1fr 1fr}
  .pageswitch a:last-child:nth-child(odd){grid-column:1 / -1;border-left:0}
}
.concl{margin:.4rem 0 0;padding-left:1.2rem;display:grid;gap:.35rem}
.concl b{font-weight:600}
/* seven student pages in the switch */
.pageswitch{flex-wrap:wrap;max-width:100%}
@media (max-width:768px){.pageswitch a:last-child:nth-child(odd){grid-column:1/-1}}
/* logged-in bar on student pages */
.page-header .hb-account{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;align-items:center;margin-top:1.5rem;font-size:.85rem;color:var(--ivory-dim);position:relative;z-index:1}
.page-header .hb-account b{color:var(--ivory);font-weight:600;overflow-wrap:anywhere}
.page-header .hb-account a,.page-header .hb-account button{font:500 .68rem 'DM Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);background:none;border:0;padding:0;cursor:pointer;text-decoration:none}
.page-header .hb-account button{color:var(--ivory-dim);text-decoration:underline}
.page-header .hb-public{display:flex;flex-wrap:wrap;gap:.4rem 1rem;align-items:baseline;margin-top:1.5rem;padding:.8rem 1rem;border:.5px solid var(--border);background:var(--surface);font-size:.9rem;color:var(--ivory);position:relative;z-index:1;max-width:44rem}
.page-header .hb-public a{font:500 .7rem 'DM Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);text-decoration:none}