/* Board player: a dark chalkboard lesson that builds up step by step in time
   with narration. Used by board lessons (study-guides/<course>/*-board.html). */
.bp{--bp-board:#1f2a2b;--bp-chalk:#eef1ea;--bp-muted:#9fb0ab;--bp-orange:#f2a65a;--bp-blue:#7cc4e4;--bp-amber:#f5c451;--bp-green:#9fd49a;--bp-line:rgba(238,241,234,.16);
  position:relative;max-width:1200px;margin:0 auto;color:var(--bp-chalk);font:16px/1.45 "Nunito Sans",-apple-system,Helvetica,Arial,sans-serif}
.bp *{box-sizing:border-box}
.bp-frame{border-radius:14px;overflow:hidden;background:var(--bp-board);box-shadow:0 10px 40px rgba(0,0,0,.35)}
.bp-stage{position:relative;aspect-ratio:16/9;background:radial-gradient(ellipse at 50% 40%,#26343a 0%,var(--bp-board) 62%,#192223 100%)}
.bp-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.bp-svg text{font-family:Georgia,"Times New Roman",serif;white-space:pre}
.bp-svg .bp-flip{transform-box:fill-box;transform-origin:center}

/* start */
.bp-start{position:absolute;left:50%;top:66%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:8px}
.bp-start button{font:700 1rem/1 "Nunito Sans",-apple-system,Helvetica,Arial,sans-serif;min-height:44px;padding:0 22px;border-radius:999px;border:0;background:var(--bp-chalk);color:#1f2a2b;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.3)}
.bp-start small{color:var(--bp-muted);font-size:.78rem}
.bp-start kbd,.bp-check kbd{font:inherit;font-size:.72rem;border:1px solid var(--bp-line);border-radius:4px;padding:0 4px}

.bp [hidden]{display:none!important}
/* captions */
.bp-cap{position:absolute;left:50%;bottom:3.5%;transform:translateX(-50%);max-width:86%;background:rgba(10,16,17,.78);color:var(--bp-chalk);padding:6px 14px;border-radius:8px;font-size:clamp(.8rem,1.6vw,1.05rem);text-align:center}
.bp-cap:empty{display:none}

/* controls */
.bp-bar{display:flex;align-items:center;gap:6px;padding:6px 10px;background:#172021;border-top:1px solid var(--bp-line)}
.bp-bar button{min-width:40px;min-height:40px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--bp-chalk);font:700 .95rem/1 "Nunito Sans",-apple-system,Helvetica,Arial,sans-serif;cursor:pointer;display:inline-grid;place-items:center;padding:0 8px}
.bp-bar button:hover{background:rgba(238,241,234,.08)}
.bp-bar button:focus-visible,.bp-check button:focus-visible,.bp-start button:focus-visible{outline:2px solid var(--bp-amber);outline-offset:2px}
.bp-bar button[aria-pressed="true"]{border-color:var(--bp-line);background:rgba(238,241,234,.1)}
.bp-bar svg{width:18px;height:18px;fill:currentColor}
.bp-prog{flex:1;display:flex;gap:3px;align-items:center;min-width:60px;height:40px;cursor:pointer}
.bp-seg{flex:1;height:5px;border-radius:3px;background:rgba(238,241,234,.16);position:relative;overflow:hidden}
.bp-seg i{position:absolute;inset:0;width:0;background:var(--bp-chalk);border-radius:3px}
.bp-label{font-size:.82rem;color:var(--bp-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:34%}
.bp-label b{color:var(--bp-chalk);font-weight:600}

/* quick check */
.bp-check{position:absolute;top:4%;right:2.5%;width:min(46%,500px);max-height:84%;overflow:auto;background:rgba(23,32,33,.96);border:1px solid rgba(124,196,228,.45);border-radius:12px;padding:14px 16px;box-shadow:0 10px 30px rgba(0,0,0,.4);animation:bp-in .35s ease-out}
@keyframes bp-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.bp-check h3{margin:0;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--bp-blue)}
.bp-check .bp-prompt{margin:4px 0 10px;font-size:.95rem}
.bp-q{display:grid;grid-template-columns:1fr auto 1.4em;gap:4px 8px;align-items:center;padding:6px 0;border-top:1px solid var(--bp-line);font-family:Georgia,serif;font-size:1rem}
.bp-q.mc{grid-template-columns:1fr 1.4em}
.bp-q.mc .bp-opts{grid-column:1/-1;grid-row:2}
.bp-opts{display:flex;gap:6px;flex-wrap:wrap;font-family:"Nunito Sans",-apple-system,Helvetica,Arial,sans-serif}
.bp-opts button{min-height:34px;min-width:52px;padding:0 10px;border-radius:999px;border:1px solid var(--bp-line);background:transparent;color:var(--bp-chalk);font:600 .85rem/1 "Nunito Sans",-apple-system,Helvetica,Arial,sans-serif;cursor:pointer}
.bp-opts button[aria-pressed="true"]{background:var(--bp-chalk);color:#1f2a2b;border-color:var(--bp-chalk)}
.bp-opts button.right{box-shadow:0 0 0 2px var(--bp-green)}
.bp-mark{font:700 1.1rem/1 "Nunito Sans",-apple-system,Helvetica,Arial,sans-serif;text-align:center}
.bp-mark.ok{color:var(--bp-green)}.bp-mark.no{color:var(--bp-amber)}
.bp-why{grid-column:1/-1;font:.82rem/1.35 "Nunito Sans",-apple-system,Helvetica,Arial,sans-serif;color:var(--bp-amber)}
.bp-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}
.bp-actions button,.bp-link{min-height:40px;padding:0 16px;border-radius:999px;border:0;background:var(--bp-blue);color:#10232a;font:700 .9rem/40px "Nunito Sans",-apple-system,Helvetica,Arial,sans-serif;cursor:pointer;text-decoration:none;display:inline-block}
.bp-actions button[disabled]{opacity:.45;cursor:default}
.bp-actions .bp-ghost{background:transparent;color:var(--bp-chalk);border:1px solid var(--bp-line)}
.bp-result{font-size:.88rem;color:var(--bp-muted);flex-basis:100%}
.bp-linkwrap{position:absolute;left:6%;bottom:14%;animation:bp-in .4s ease-out}
.bp-link{background:var(--bp-orange);color:#2a1a08;white-space:nowrap}

/* frac in html */
.bp-frac{display:inline-flex;flex-direction:column;vertical-align:middle;text-align:center;font-size:.78em;line-height:1.05;margin:0 .1em}
.bp-frac>span:first-child{border-bottom:1.5px solid currentColor;padding:0 .15em}
.c-o{color:var(--bp-orange)}.c-b{color:var(--bp-blue)}.c-a{color:var(--bp-amber)}.c-m{color:var(--bp-muted)}.c-g{color:var(--bp-green)}
.bp-ol{text-decoration:overline}

/* narrow: overlays move below the board so they stay readable */
.bp.narrow .bp-frame{border-radius:10px}
.bp.narrow .bp-check{position:static;width:auto;max-height:none;margin:10px 0 0;border-radius:10px}
.bp.narrow .bp-cap{position:static;transform:none;max-width:none;border-radius:0;font-size:.88rem;background:#141c1d}
.bp.narrow .bp-label{max-width:42%;font-size:.75rem}
.bp.narrow .bp-bar{gap:2px;padding:4px 6px}
.bp.narrow .bp-start{top:72%}
.bp.narrow .bp-start small{display:none}
.bp.narrow .bp-linkwrap{position:static;transform:none;text-align:center;margin:10px 0 0}
.bp.narrow .bp-label b{display:none}
.bp-card{display:flex;flex-direction:column;align-items:center;gap:2px;margin:10px 0 0;padding:10px 14px;border:1.5px solid rgba(124,196,228,.6);border-radius:10px;background:#172021;font-family:Georgia,"Times New Roman",serif;text-align:center;animation:bp-in .4s ease-out}
.bp-card>b{font-weight:400;color:var(--bp-blue);font-size:1rem}
.bp-card>span{font-size:1.5rem}
.bp-card>small{color:var(--bp-muted);font-size:.9rem}