/* Figures for "How to use the Business Model Canvas". The figure shell comes from /essays/eth/figures.css.
   The canvas here is our own drawing of the standard nine-block layout. */
.bm-grid{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));grid-template-rows:auto auto auto;gap:5px;font-family:'Inter',sans-serif;}
.bm-b{position:relative;border:1.4px solid var(--ink);border-radius:6px;background:var(--paper);padding:8px 8px 10px;min-height:92px;text-align:left;color:var(--ink);font:inherit;cursor:default;transition:background-color .35s,opacity .35s,box-shadow .35s;}
button.bm-b{cursor:pointer;}
button.bm-b:hover{background:var(--eth-card);}
button.bm-b:focus-visible{outline:2px solid var(--mark);outline-offset:2px;}
.bm-b .t{display:block;font-size:11.5px;font-weight:600;line-height:1.25;letter-spacing:.01em;}
.bm-b .no{position:absolute;right:6px;top:6px;width:20px;height:20px;border-radius:50%;background:var(--mark);border:1.2px solid var(--ink);font-size:11px;font-weight:700;display:grid;place-items:center;color:#1a1a17;opacity:0;transition:opacity .3s;}
.bm-b.numbered .no{opacity:1;}
.bm-b.on{background:var(--mark);color:#1a1a17;}
.bm-b.dim{opacity:.35;}
.bm-b .notes{display:block;margin-top:6px;font-size:11px;line-height:1.35;color:var(--quiet);}
.bm-b.on .notes{color:#1a1a17;}
.bm-b.flash{animation:bmflash 1.4s ease-out;}
@keyframes bmflash{0%{background:var(--mark);}100%{background:var(--paper);}}
.bm-kp{grid-column:1/3;grid-row:1/3;}.bm-ka{grid-column:3/5;grid-row:1;}.bm-kr{grid-column:3/5;grid-row:2;}
.bm-vp{grid-column:5/7;grid-row:1/3;}.bm-cr{grid-column:7/9;grid-row:1;}.bm-ch{grid-column:7/9;grid-row:2;}
.bm-cs{grid-column:9/11;grid-row:1/3;}.bm-c{grid-column:1/6;grid-row:3;min-height:58px;}.bm-r{grid-column:6/11;grid-row:3;min-height:58px;}
.bm-sides{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));font-family:'Inter',sans-serif;font-size:11.5px;color:var(--quiet);margin-bottom:4px;}
.bm-sides span:nth-child(1){grid-column:1/5;}.bm-sides span:nth-child(2){grid-column:5/7;text-align:center;}.bm-sides span:nth-child(3){grid-column:7/11;text-align:right;}
.bm-panel{margin-top:10px;padding:14px 16px;border:1px solid var(--ink);border-radius:8px;background:var(--eth-card);font-family:'Inter',sans-serif;min-height:150px;}
.bm-panel .h{font-family:'Fraunces Variable',Georgia,serif;font-size:20px;font-weight:500;margin:0 0 4px;}
.bm-panel .d{font-size:13.5px;color:var(--quiet);margin:0 0 8px;}
.bm-panel ul{margin:0;padding-left:18px;font-size:13.5px;line-height:1.5;}
.bm-toggle{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 4px;}
.bm-toggle button{font-family:'Inter',sans-serif;font-size:13px;padding:7px 12px;border-radius:6px;border:1px solid var(--hair);background:none;color:var(--ink);cursor:pointer;}
.bm-toggle button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper);}
.bm-toggle button:focus-visible{outline:2px solid var(--mark);outline-offset:2px;}
.bm-msg{font-family:'Inter',sans-serif;font-size:13px;color:var(--quiet);min-height:20px;margin:6px 0 0;}
@media (max-width:560px){
  .bm-grid{grid-template-columns:minmax(0,1fr);}
  .bm-grid .bm-b{grid-column:auto!important;grid-row:auto!important;min-height:0;}
  .bm-sides{display:none;}
}
@media (prefers-reduced-motion:reduce){.bm-b,.bm-b .no{transition:none;}.bm-b.flash{animation:none;}}