/* The brief marker (brief-marker.js): mark up an assignment brief in the browser. Colour + symbol + word, never colour alone. */
.bm{--bm-ink:var(--ink);--bm-cream:var(--cream);--bm-paper:var(--paper);--bm-line:#ECE8E0;--bm-sub:var(--muted);background:var(--bm-cream);color:var(--bm-ink);border:3px solid var(--bm-ink);border-radius:24px;box-shadow:8px 8px 0 var(--bm-ink);overflow:hidden;font-family:var(--body);text-align:left}
.bm *{box-sizing:border-box}
.bm button{font:inherit;color:inherit;cursor:pointer}
.bm button:focus-visible,.bm textarea:focus-visible,.bm [role=listbox]:focus-visible{outline:3px solid var(--cobalt);outline-offset:2px}
.bm-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:18px 24px;border-bottom:2px solid var(--bm-line)}
.bm-head-text{display:flex;flex-direction:column;gap:2px;flex:1;min-width:240px}
.bm-eyebrow{font:700 .75rem/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.bm-title{font:800 1.625rem/1.1 var(--head);letter-spacing:-.02em}
.bm-opts{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bm-sizes{display:flex;gap:2px;padding:3px;border-radius:999px;background:var(--bm-paper)}
.bm-sizes button{min-width:44px;min-height:40px;border:0;border-radius:999px;font-weight:700;background:transparent}
.bm-sizes button[aria-checked=true]{background:var(--bm-ink);color:var(--bm-cream)}
.bm-sizes button:nth-child(1){font-size:14px}.bm-sizes button:nth-child(2){font-size:16px}.bm-sizes button:nth-child(3){font-size:18px}
.bm-toggle{min-height:44px;padding:0 14px;border-radius:999px;border:2px solid var(--bm-ink);background:var(--bm-cream);font-weight:700;font-size:.875rem}
.bm-toggle[aria-pressed=true]{background:var(--banana)}
.bm-toggle.bm-dys{font-family:"OpenDyslexic",sans-serif}
.bm-paste{padding:24px;display:flex;flex-direction:column;gap:14px}
.bm-paste label{font-weight:700;font-size:1.0625rem}
.bm-paste textarea{width:100%;border:2px solid var(--bm-ink);border-radius:16px;padding:14px 16px;font-family:inherit;font-size:1.0625rem;line-height:1.7;background:var(--bm-cream);color:var(--bm-ink);resize:vertical;min-height:11em}
.bm-note{font-size:.875rem;color:var(--bm-sub)}
.bm-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.bm button.bm-btn{min-height:48px;padding:0 22px;border-radius:999px;border:0;background:var(--bm-ink);color:var(--bm-cream);font-weight:700;font-size:1rem}
.bm button.bm-btn.ghost{background:var(--bm-cream);color:var(--bm-ink);border:2px solid var(--bm-ink);font-size:.9375rem;padding:0 20px}
.bm button.bm-btn.banana{background:var(--banana);color:var(--bm-ink);border:2px solid var(--bm-ink)}
.bm button.bm-btn.soft{background:var(--bm-paper);color:var(--bm-ink);font-size:.875rem;min-height:40px;padding:0 14px}
.bm-btn.small{min-height:40px;padding:0 14px;font-size:.875rem}
.bm-btn:disabled{opacity:.5;cursor:default}
.bm-mark{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,34%)}
.bm-left{padding:20px 24px 24px;display:flex;flex-direction:column;gap:16px;min-width:0;border-right:2px solid var(--bm-line)}
.bm-right{padding:20px 24px 24px;display:flex;flex-direction:column;gap:18px;background:var(--bm-paper);min-width:0}
.bm-step{font-weight:700;font-size:.9375rem}
.bm-pens{display:flex;gap:8px;flex-wrap:wrap}
.bm-pen{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 12px 0 10px;border-radius:12px;border:2px solid transparent;background:var(--pen-soft);font-weight:700;font-size:.9375rem}
.bm-pen[aria-checked=true]{border:3px solid var(--bm-ink);background:var(--pen)}
.bm-pen svg{width:16px;height:16px;flex:none}
.bm-key{font:700 .6875rem/1.4 var(--mono);padding:1px 6px;border-radius:6px;background:var(--bm-cream);border:1.5px solid var(--bm-ink)}
.bm-count{font:700 .75rem/1 var(--mono);min-width:1.2em}
.bm-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.bm-tools .bm-step{flex:1}
.bm-box{position:relative;border:2px solid var(--bm-ink);border-radius:18px;background:var(--bm-cream);padding:18px 20px;overflow:hidden}
.bm-ruler{position:absolute;left:0;right:0;background:rgba(255,227,110,.42);border-top:2px solid var(--bm-ink);border-bottom:2px solid var(--bm-ink);pointer-events:none}
.bm-words{position:relative;font-size:var(--bm-fs,19px);line-height:2.1;user-select:none;-webkit-user-select:none;touch-action:pan-y;outline:none;word-spacing:var(--bm-ws,.04em)}
.bm-words.dys{font-family:"OpenDyslexic",sans-serif;--bm-ws:.14em}
.bm-w{border-radius:5px;padding:3px 1px;cursor:pointer;background:var(--w-bg,transparent);box-shadow:var(--w-ul,none)}
.bm-w.sel{background:rgba(47,69,201,.12);outline:2px dashed var(--cobalt);outline-offset:1px}
.bm-w.act{outline:3px solid var(--cobalt);outline-offset:1px}
.bm-sp{padding:3px 0;background:var(--w-bg,transparent);box-shadow:var(--w-ul,none)}
.bm-gap{display:block;height:.5em}
.bm-chip{display:inline-flex;align-items:center;gap:4px;margin-right:5px;padding:0 7px;border-radius:999px;border:1.5px solid var(--bm-ink);background:var(--chip,var(--bm-cream));font:700 .6875rem/1.7 var(--mono);vertical-align:3px;letter-spacing:.02em;color:var(--bm-ink)}
.bm-chip svg{width:9px;height:9px}
.bm-chip.pip{border-style:dashed}
.bm-w.pip{outline:2px dashed var(--bm-ink);outline-offset:2px}
.bm-help{margin:0;font-size:.875rem;line-height:1.6;color:var(--bm-sub)}
.bm-meaning{background:var(--bm-cream);border-radius:18px;padding:18px 20px;display:flex;flex-direction:column;gap:10px;min-height:150px}
.bm-tag{display:inline-flex;align-self:flex-start;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;border:2px solid var(--bm-ink);background:var(--chip,var(--bm-cream));font:700 .75rem/1.4 var(--mono)}
.bm-tag svg{width:11px;height:11px}
.bm-phrase{font:800 1.75rem/1.1 var(--head);letter-spacing:-.02em;overflow-wrap:anywhere}
.bm-mean{font-size:var(--bm-fs,19px);line-height:1.6}
.bm-tip{font-size:.9375rem;line-height:1.5;color:var(--bm-sub)}
.bm-quiet{font-size:1rem;line-height:1.55;color:var(--bm-sub)}
.bm-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.bm-list li{margin:0}
.bm-item{width:100%;display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 12px;border-radius:12px;border:2px solid transparent;background:var(--bm-cream);text-align:left}
.bm-item[aria-current=true]{border-color:var(--bm-ink)}
.bm-item svg{width:14px;height:14px;flex:none}
.bm-item .bm-cat{flex:none;font:700 .6875rem/1 var(--mono);width:68px}
.bm-item .bm-text{flex:1;min-width:0;font-weight:700;font-size:.9375rem}
.bm-actions{display:flex;flex-direction:column;gap:10px;margin-top:auto}
.bm-status{font-size:.875rem;line-height:1.5;min-height:21px;margin:0}
.bm-status a{color:inherit;font-weight:700}
.bm-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bm-fallback{padding:24px;font-size:1rem;line-height:1.6}
.bm-fallback textarea{width:100%;min-height:10em;border:2px solid var(--bm-ink);border-radius:16px;padding:14px 16px;font:inherit}
@media (max-width:760px){
  .bm-mark{grid-template-columns:minmax(0,1fr)}
  .bm-left{border-right:0;border-bottom:2px solid var(--bm-line)}
  .bm-head,.bm-left,.bm-right,.bm-paste{padding-left:16px;padding-right:16px}
  .bm{border-radius:18px;box-shadow:5px 5px 0 var(--bm-ink)}
}
/* Inside the Reading comfort modes */
html.rc-hc .bm{--bm-line:var(--ink)}
html.rc-hc .bm-pen,html.rc-hc .bm-item,html.rc-hc .bm-meaning{border-color:var(--ink)}
html.rc-dys .bm-words{font-family:"OpenDyslexic",sans-serif;--bm-ws:.14em}
@media (prefers-reduced-motion:reduce){.bm *{transition:none!important}}
/* The walkthrough: one kind at a time, then the brief taken apart */
.bm-guide{border:2px solid var(--bm-ink);border-left:10px solid var(--pen,var(--bm-ink));border-radius:16px;padding:16px 18px;background:var(--bm-cream);display:flex;flex-direction:column;gap:10px;outline:none}
.bm-guide:focus-visible{outline:3px solid var(--cobalt);outline-offset:2px}
.bm-guide.finish{border-left-color:var(--bm-ink);background:var(--bm-paper)}
.bm-guide-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.bm-dots{list-style:none;margin:0;padding:0;display:flex;gap:6px}
.bm-dots li{width:22px;height:22px;border-radius:7px;border:2px solid var(--bm-ink);background:var(--pen);display:flex;align-items:center;justify-content:center;opacity:.45}
.bm-dots li.done,.bm-dots li.now{opacity:1}
.bm-dots li.now{outline:3px solid var(--bm-ink);outline-offset:2px}
.bm-guide-title{margin:0;display:flex;align-items:center;gap:8px;font:800 1.375rem/1.1 var(--head);letter-spacing:-.01em}
.bm-guide-teach,.bm-guide-todo,.bm-guide-ex{margin:0;font-size:1rem;line-height:1.55}
.bm-guide-why{color:var(--bm-sub)}
.bm-guide-ex span:first-child{color:var(--bm-sub)}
.bm-ex{display:inline-block;margin:2px 6px 2px 0;padding:1px 8px;border-radius:999px;border:1.5px solid var(--bm-ink);background:color-mix(in srgb,var(--pen) 45%,var(--bm-cream));font-weight:700;font-size:.9375rem}
.bm-guide-nav{margin-top:4px}
.bm button.bm-link{background:none;border:0;padding:6px 2px;min-height:40px;font-weight:700;font-size:.9375rem;color:var(--cobalt);text-decoration:underline;text-underline-offset:3px}
.bm-sum{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 16px}
.bm-sum li{display:flex;align-items:center;gap:6px;font-size:1rem}
.bm-sum b{font-family:var(--mono)}
.bm-next{margin:0 0 4px;font-size:1rem;line-height:1.55}
html.rc-hc .bm-ex{background:transparent}
html.rc-hc .bm button.bm-link{color:var(--ink)}