/* The site header's CSS beyond the first screen (Option B item 6, r78): the Tools, Shop and account menus, the theme and
   language menus, search suggestions, the phone menu sheet, the theme and colour controls (also on the Account page), the
   shared modal (blConfirm, blAlert, blPrompt) and the tab bar's motion. components/header.php links it right after the
   inline first-screen rules (components/header-crit.css), the place the one inline block had in the cascade, so page
   styles still win over both; the music home (BL_INLINE_DRAWER_CSS) prints it inline there instead. */
.blh .navdd-menu{position:absolute;inset-inline-start:-8px;top:calc(100% + 10px);z-index:60;width:min(680px,calc(100vw - 32px));background:var(--surface);border-radius:var(--r3);box-shadow:0 16px 40px rgba(21,54,90,.18);padding:22px 22px 14px}
:root[data-theme="dark"] .blh .navdd-menu{box-shadow:0 16px 40px rgba(0,0,0,.5)}
.blh .navdd-menu[hidden]{display:none}
.blh .msheet .mme-links{min-height:0;margin-top:8px;padding:0}
.blh .msheet .mme-links{gap:4px}   /* My courses and Settings side by side */
.blh .msheet .mme-links .mme-mine,.blh .msheet .mme-links .mme-set{display:flex;align-items:center;flex:1;min-height:48px;padding:0 14px;color:var(--ink);font:650 16px/1.2 var(--f-body);text-decoration:none}
/* the avatar menu, signed in (owner, 11 Oct) */
.blh .navdd-menu.acct-menu{inset-inline-start:auto;inset-inline-end:0;width:220px;padding:8px;display:grid;gap:2px}
.blh .navdd-menu.acct-menu[hidden]{display:none}
.blh .acct-menu .navdd-it{display:flex;padding:10px 14px;border-radius:12px;color:var(--ink);text-decoration:none;font:inherit;background:none;border:0;text-align:start;cursor:pointer;width:100%}
.blh .acct-menu .navdd-it b{font-size:15.5px;font-weight:650}
.blh .acct-menu .navdd-it:hover,.blh .acct-menu .navdd-it:focus-visible{background:var(--blue-tint)}
.blh .acct-menu .acct-out{color:var(--ink-2)}
.blh .acct-menu .acct-inst{color:var(--ink-2)}   /* Install Brainlag: added only when the browser can install (PWA script below) */
.blh .acct-menu .acct-more-h{margin:6px 14px 2px;padding-top:8px;border-top:1px solid var(--rule);font-size:12.5px;font-weight:700;color:var(--ink-3)}
.blh .acct-menu .acct-more-end{margin:4px 14px 0;padding:0}
.blh .msheet .mplus{display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;margin:10px 0 0;border-radius:var(--r2);background:var(--study-btn,var(--study));color:var(--on-study-btn,#fff);font:700 17px/1.2 var(--f-body);text-decoration:none;box-shadow:none}
.blh .navdd.ncd[data-navdd="shop"] .navdd-menu.nsm{width:min(380px,calc(100vw - 32px));inset-inline-start:-8px;inset-inline-end:auto}   /* the Shop menu: one column, under its item */
.blh .nsp .nc-it .sm-ic,.blh .nsm .navdd-it .sm-ic{color:var(--gold-ink)}
.blh .navdd-menu.ntm{width:min(440px,calc(100vw - 32px))}   /* the Tools menu: one column, three entries (owner, 11 Oct) */
.blh .ntm .navdd-it small{text-wrap:balance}
.blh .navdd-cols{display:grid;grid-template-columns:1fr 1fr;gap:8px 24px}
.blh .navdd-col{display:flex;flex-direction:column;gap:6px;min-width:0}
.blh .navdd-h{margin:0 0 6px 14px;font-size:14px;font-weight:600;color:var(--ink-3)}
.blh .navlinks .navdd-it{height:auto;white-space:normal;font-size:inherit;font-weight:inherit;display:flex;align-items:flex-start;gap:14px;padding:12px 14px;border-radius:14px;color:var(--ink)}
.blh .navlinks .navdd-it:hover,.blh .navlinks .navdd-it:focus-visible{color:var(--ink);background:var(--blue-tint)}
.blh .navlinks .navdd-it[aria-current="page"]{color:var(--ink);background:var(--study-tint)}
.blh .navdd-it .sm-ic{flex:none;width:34px;height:34px;color:var(--study-ink)}
.blh .navdd-it b{display:block;font-size:16.5px;font-weight:650;line-height:1.3}
.blh .navdd-it small{display:block;margin-top:3px;font-size:14px;line-height:1.45;color:var(--ink-3)}
.blh .navdd-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 24px;margin:18px 0 0;padding:4px 14px 4px}   /* space, not a rule (owner: no hairlines, 18 Oct) */
.blh .navlinks .navdd-games{color:var(--ink-2);font-weight:600}
.blh .navlinks .navdd-all{height:auto;border-radius:0;background:none;display:flex;align-items:center;gap:8px;margin:0;padding:0;font-size:15px;font-weight:700;color:var(--study-ink)}
.blh .navlinks .navdd-all:hover{background:none;color:var(--study-ink);text-decoration:underline;text-underline-offset:3px}
.blh .msheet .mgroup{margin:6px 4px 0}
.blh .msheet .msub{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-bottom:10px}
.blh .msheet .msub span{min-width:0}
.blh .msheet nav .msub a{display:flex;align-items:center;justify-content:flex-start;gap:12px;min-height:60px;padding:10px 16px;border-radius:var(--r2);background:var(--surface);box-shadow:var(--shadow);color:var(--ink);font:600 16.5px/1.15 var(--f-display)}
.blh .msheet .msub a[aria-current="page"]{background:var(--blue-tint);color:var(--blue-ink)}
.blh .msheet .msub .sm-ic{flex:none;width:28px;height:28px;color:var(--study-ink)}
.blh .lang-item{display:flex;align-items:center;gap:10px;min-height:42px;padding:0 12px;border-radius:12px;font-size:15px;color:var(--ink)}
.blh .lang-item:hover,.blh .lang-item:focus{background:var(--blue-tint)}
.blh .lang-item[aria-current="true"]{font-weight:700}
.blh .lang-item .lang-ck{margin-inline-start:auto;color:var(--study-ink)}
.blh .lang-item:not([aria-current]) .lang-ck{display:none}
/* Search suggestions (assets/js/bl-search.js): a wider panel under the field, grouped, one thumbnail per result. */
.blh .bls{position:absolute;inset-inline-end:0;top:calc(100% + 8px);z-index:70;width:min(560px,calc(100vw - 32px));background:var(--surface);
  border-radius:var(--r2);box-shadow:0 12px 32px rgba(21,54,90,.18);padding:6px;max-height:min(560px,calc(100vh - 90px));overflow-y:auto;overscroll-behavior:contain}
.blh .bls[hidden]{display:none}
.blh .bls-rh{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:2px 2px 0 10px}
.blh .bls-rh[hidden]{display:none}
.blh .bls-rh span,.blh .bls-gh{font-size:13.5px;font-weight:700;color:var(--ink-3)}
.blh .bls-gh{padding:10px 10px 4px}
.blh .bls-clear{min-height:44px;padding:0 12px;border:0;border-radius:10px;background:none;color:var(--study-ink);font:inherit;font-size:14.5px;font-weight:700;cursor:pointer}
.blh .bls-clear:hover{background:var(--blue-tint)}
.blh .bls-clear:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.blh .bls-o{display:flex;align-items:center;gap:12px;min-height:52px;padding:6px 10px;border-radius:12px;color:var(--ink);text-decoration:none;cursor:pointer}
.blh .bls-o:hover,.blh .bls-o[aria-selected="true"]{background:var(--blue-tint)}
.blh .bls-o[aria-selected="true"]{box-shadow:inset 0 0 0 2px var(--blue)}
.blh .bls-th{flex:none;display:grid;place-items:center;width:56px;height:40px;border-radius:8px;overflow:hidden;background:var(--sunk);color:var(--ink-2)}
.blh .bls-th img{display:block;width:56px;height:40px;object-fit:cover}
.blh .bls-th.n img{object-fit:contain;padding:3px 0}
.blh .bls-th[data-tone="teal"]{background:var(--study-tint);color:var(--study-ink)}
.blh .bls-th[data-tone="violet"]{background:var(--play-tint);color:var(--play-ink)}
.blh .bls-th[data-tone="pink"]{background:var(--pink-tint);color:var(--pink-ink)}
.blh .bls-th[data-tone="gold"]{background:var(--gold-tint);color:var(--gold-ink)}
.blh .bls-th[data-tone="blue"]{background:var(--blue-tint);color:var(--blue-ink)}
.blh .bls-b{min-width:0;flex:1}
.blh .bls-t,.blh .bls-d{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.blh .bls-t{font-size:15.5px;font-weight:650;line-height:1.3}
.blh .bls-d{font-size:13.5px;line-height:1.35;color:var(--ink-3);margin-top:1px}
.blh .bls-t mark{background:var(--gold-tint);color:inherit;border-radius:3px;padding:0 1px}
.blh .bls-all{color:var(--blue-ink);font-weight:700;font-size:15px;margin-top:4px}
.blh .bls-all .bls-th{background:none;color:var(--blue-ink)}
.blh .bls-none{padding:12px 10px 4px;color:var(--ink-3);font-size:15px;margin:0}
@media (max-width:900px){
  header.blh.so .bls{position:fixed;inset-inline-start:0;inset-inline-end:0;top:56px;width:auto;max-height:calc(100vh - 56px);max-height:calc(100dvh - 56px);
    border-radius:0 0 var(--r3) var(--r3);padding:6px 8px 12px}
}
/* Menu sheet (phone/tablet) */
.blh .mback{position:fixed;inset:0;top:56px;background:rgba(0,0,0,.35);z-index:48}
.blh .msheet{position:fixed;inset-inline-start:0;inset-inline-end:0;top:var(--msheet-top,56px);z-index:49;background:var(--paper);color:var(--ink);border-radius:0 0 var(--r3) var(--r3);box-shadow:0 16px 40px rgba(21,54,90,.2);
  max-height:calc(100vh - var(--msheet-top,56px));max-height:calc(100dvh - var(--msheet-top,56px));overflow-y:auto;padding:4px 16px 20px}
.blh .msheet nav{display:grid;gap:8px;padding-top:10px}
.blh .msheet nav a{display:flex;align-items:center;justify-content:space-between;min-height:56px;padding:0 18px;border-radius:var(--r2);
  font:600 21px/1.1 var(--f-display);background:var(--surface);box-shadow:var(--shadow);color:var(--ink)}
.blh .msheet nav a[aria-current="page"]{background:var(--blue-tint);color:var(--blue-ink)}
/* the phone menu's order (owner, 11 Oct): who you are, My learning, then sections, then a settings row */
.blh .msheet .mme{margin:12px 0 4px}
.blh .msheet .mme-in{display:flex;align-items:center;gap:12px;min-height:64px;padding:8px 8px 8px 12px;border-radius:var(--r2);background:var(--surface);box-shadow:var(--shadow)}
.blh:not(.is-in) .msheet .mme-in,.blh.is-in .msheet .mme-out{display:none}
.blh .msheet .mme-av{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;overflow:hidden;background:var(--blue);color:#fff;font:700 17px/1 var(--f-display)}
.blh .msheet .mme-av.is-pic{background:none}
.blh .msheet .mme-av > span{border-radius:50%}
.blh .msheet .mme-tx{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.blh .msheet .mme-em{font:600 15px/1.3 var(--f-body);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.blh .msheet .mme-st{display:flex;align-items:center;gap:2px;font-size:13.5px;font-weight:650;color:var(--ink-2)}
.blh .msheet .mme-st[hidden]{display:none}
.blh .msheet .mme-st svg{width:13px;height:15px}
.blh .msheet .mme-go{flex:none;display:flex;align-items:center;min-height:48px;padding:0 16px;border-radius:var(--r1);border:2px solid var(--rule-2);color:var(--ink);font:650 15.5px/1 var(--f-body);text-decoration:none}
.blh .msheet .mme-out{display:flex;gap:10px}
.blh .msheet .mme-out .mbtn{flex:1 1 0;min-width:0;min-height:52px;text-align:center;line-height:1.2;text-wrap:balance;padding:6px 10px}
.blh .msheet nav .mrow-big{min-height:64px;background:var(--study-tint);color:var(--study-ink)}
.blh .msheet nav a svg{flex:none;opacity:.6}
.blh .msheet .ncl-g{margin:0}
.blh .msheet .ncp .ncl{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:52px;padding:0 10px;border:0;border-radius:var(--r1);background:none;color:var(--ink);font:inherit;cursor:pointer;text-align:start}
.blh .msheet .ncp .ncl .mlabel{margin:0;padding:0;font:650 17px/1.25 var(--f-body);color:var(--ink)}
.blh .msheet .ncp .ncl svg{flex:none;opacity:.6;transition:transform .15s cubic-bezier(.22,1,.36,1)}
.blh .msheet .ncp .ncl[aria-expanded="true"] svg{transform:rotate(180deg)}
.blh .msheet .ncp .ncl:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.blh .msheet .ncp .ncl + .ncl-p{padding:0 0 8px}
.blh .msheet .ncl-p[hidden]{display:none}
.blh .msheet .ncp .ncl-g + .ncl-g{border-top:1px solid var(--rule)}
.blh .msheet nav .mtools a.nc-it{justify-content:flex-start;gap:12px;min-height:52px;padding:0 10px;box-shadow:none;background:none;font:650 17px/1.25 var(--f-body)}
.blh .msheet nav .ncp.mtools a.nc-it{display:flex;align-items:center}
.blh .msheet .ncp.mtools .nc-tx{flex:1 1 auto;min-width:0;max-width:none;width:auto}
.blh .msheet .ncp.mtools .nc-tx b{margin:0}
:root[data-theme="dark"] .blh .msheet .mme-out .mbtn.primary{color:#0b1626}   /* dark text on the light blue, as the player's buttons */
.blh .msheet .mtools .mt-ic{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--study-tint);color:var(--study-ink)}
.blh .msheet .mtools .mt-ic svg{opacity:1}
.blh .msheet .mchips{display:flex;flex-wrap:wrap;gap:8px;padding:10px 6px 4px}
.blh .msheet nav .mchips a{min-height:44px;padding:0 14px;border-radius:var(--pill);font:600 15px/1 var(--f-body);background:var(--paper);box-shadow:none;border:1.5px solid var(--rule-2)}
.blh .msheet .mset{display:flex;align-items:center;gap:10px;margin:18px 0 0;flex-wrap:wrap}
.blh .msheet .mset-th{flex:1 1 150px;display:flex;align-items:center;gap:10px;min-height:52px;padding:0 14px;border-radius:var(--r2);border:0;background:var(--surface);box-shadow:var(--shadow);color:var(--ink);font:600 16px/1.2 var(--f-body);cursor:pointer;text-align:start}
.blh .msheet .mset-th span:first-of-type{flex:1 1 auto}
.blh .msheet .mset-sw{flex:none;position:relative;width:42px;height:26px;border-radius:13px;background:var(--rule-2);transition:background-color .18s}
.blh .msheet .mset-sw::after{content:"";position:absolute;inset-inline-start:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:translate .18s cubic-bezier(.22,1,.36,1)}
.blh .msheet .mset-th[aria-checked="true"] .mset-sw{background:var(--study)}
.blh .msheet .mset-th[aria-checked="true"] .mset-sw::after{translate:16px 0}
.blh .msheet .mset-th:focus-visible,.blh .msheet .mset-lang:focus-within{outline:2px solid var(--blue);outline-offset:2px}
.blh .msheet .mset-lang{flex:1 1 130px;position:relative;display:flex;align-items:center;gap:8px;min-height:52px;padding:0 0 0 14px;border-radius:var(--r2);background:var(--surface);box-shadow:var(--shadow);color:var(--ink)}
.blh .msheet .mset-lang select{flex:1 1 auto;min-width:0;height:52px;border:0;background:transparent;color:var(--ink);font:600 16px/1.2 var(--f-body);padding:0 12px 0 0;cursor:pointer;outline:none}
.blh .msheet .mdisp{margin:10px 0 0}
.blh .msheet .mdisp .ncb.ncb-wide{flex:1;width:auto;justify-content:space-between;padding:0 18px;font:600 16px/1.2 var(--f-body);color:var(--ink-2)}
.blh .msheet .mdisp .ncp{padding:6px 4px 0}
/* the top of the phone menu (owner via the coordinator, 12 Oct): signed out one row, Sign in and Create account; the
   plan's button only for a signed-in learner without it (a gold dot on Plans says the rest); Display a one-line row;
   Install a row like the others, with its tile */
.blh:not(.is-in) .msheet .mplus{display:none}
.blh .msheet .m-dot{display:inline-block;width:8px;height:8px;margin:0 auto 0 8px;border-radius:50%;background:var(--gold);vertical-align:middle}
:root .blh .msheet .mdisp .ncb-row .ncb.ncb-wide{display:flex;align-items:center;justify-content:space-between;width:auto;flex:1 1 auto;min-width:0}
:root .blh .msheet .mdisp .ncb.ncb-wide > span{flex:1 1 auto;text-align:start}
.blh .msheet .mrow-inst{margin:10px 0 0}
.blh .msheet .minst{position:relative;display:flex;align-items:center;width:100%;min-height:60px;padding:0 18px 0 66px;border:0;border-radius:20px;background:var(--surface);color:var(--ink);font:650 19px/1.15 var(--f-display);text-align:start;cursor:pointer}
.blh .msheet .minst[hidden]{display:none}
.blh .msheet .minst::before{content:'';position:absolute;inset-inline-start:12px;top:50%;width:40px;height:40px;margin-top:-20px;border-radius:13px;background:var(--blue-tint)}
.blh .msheet .minst::after{content:'';position:absolute;inset-inline-start:21px;top:50%;width:22px;height:22px;margin-top:-11px;background:var(--blue-ink);-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%204v11m-5-5%205%205%205-5M5%2020h14%22/%3E%3C/svg%3E") center/22px no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%204v11m-5-5%205%205%205-5M5%2020h14%22/%3E%3C/svg%3E") center/22px no-repeat}
.blh .msheet .minst:active{transform:scale(.98)}
.blh .msheet .mrow-inst{margin-top:12px}
.blh .msheet .mrow-inst:has(> [hidden]:only-child){display:none}
@media (prefers-reduced-motion:reduce){.blh .msheet :is(.mset-sw,.mset-sw::after,.ncl svg){transition:none}}
.blh .msheet .mlabel{font-size:14px;font-weight:700;color:var(--ink-3);margin:18px 4px 8px}
.blh .msheet .mlangs{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.blh .msheet .mlangs a{display:flex;align-items:center;gap:8px;min-height:46px;padding:0 14px;border-radius:var(--r1);
  border:2px solid var(--rule);background:var(--surface);font-size:16px;font-weight:600;color:var(--ink)}
.blh .msheet .mlangs a[aria-current="true"]{border-color:var(--blue);font-weight:700}
.blh .msheet .mlangs .lang-ck{margin-inline-start:auto;color:var(--study-ink)}
.blh .msheet .mlangs a:not([aria-current]) .lang-ck{display:none}
.blh .msheet .mrow{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.blh .msheet .mbtn{flex:1 1 140px;display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 14px;
  border-radius:var(--pill);border:2px solid var(--rule-2);background:var(--surface);color:var(--ink);font:inherit;font-size:16px;font-weight:700;cursor:pointer}
.blh .msheet .mbtn.primary{background:var(--blue);border-color:var(--blue);color:#fff}
.blh .msheet .mhelp{margin:10px 4px 0;font-size:15px;color:var(--ink-3);line-height:1.45}
.blh .theme-menu{width:284px;padding:8px 10px 6px}
/* Theme + colour controls (header menu, phone sheet, Account page) */
.bl-look{color:var(--ink)}
.bl-look .bll-lab{margin:6px 4px 6px;font-size:13px;font-weight:700;color:var(--ink-3)}
.bl-look .bll-lab:first-child{margin-top:2px}
.bl-look .bll-theme + .bll-lab{margin-top:14px}
.bl-look button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.bl-look button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.bll-list .bll-theme{display:grid;gap:2px}
.bll-list .bll-theme button{display:flex;align-items:center;gap:10px;width:100%;min-height:42px;padding:0 12px;border:0;border-radius:12px;
  background:none;color:var(--ink);font-size:15px;text-align:start}
.bll-list .bll-theme button:hover{background:var(--blue-tint)}
.bll-list .bll-theme button[aria-checked="true"]{font-weight:700}
.bll-list .bll-theme .lang-ck{margin-inline-start:auto;color:var(--study-ink)}
.bll-list .bll-theme button:not([aria-checked="true"]) .lang-ck{display:none}
/* 'seg' layout uses the shared .segc control from brainlag.css; only the label size differs here. */
.bll-seg .bll-theme > button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;font-size:14px;font-weight:700;line-height:1.15;padding:0 6px}
.bll-seg .bll-theme > button .bl-th-ic{flex:none}   /* the theme's icons, as in the account menu and the phone menu (19 Oct 2026) */
/* the seven colours: always one row (owner, 12 Oct), each a circle up to 44 px that shrinks to fit; a narrow one
   keeps a 44 px target through a transparent ::before */
.bll-sw{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px;justify-items:center;max-width:calc(7 * 44px + 6 * 7px);padding:4px 2px}
.bll-sw button{position:relative;display:grid;place-items:center;width:100%;max-width:44px;aspect-ratio:1;padding:0;border:0;border-radius:50%;
  background:var(--c);color:#fff;transition:transform .12s ease}
.bll-sw button::before{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:max(100%,44px);border-radius:50%;background:transparent;transform:translate(-50%,-50%)}
:root[data-theme="dark"] .bll-sw button{background:var(--cd);color:#0b1620}
.bll-sw button:not(.locked):hover{transform:scale(1.08)}
.bll-sw button[aria-checked="true"]{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--ink)}
.bll-sw button .bll-ok,.bll-sw button .bll-lock{display:none}
.bll-sw button[aria-checked="true"] .bll-ok{display:block}
/* a locked colour: a ring of its own colour round the lock, never the colour mixed into the surface (that read brown and
   olive; owner, 19 Oct 2026: no brown, no olive) */
.bll-sw button.locked{cursor:default;background:var(--surface);box-shadow:inset 0 0 0 3px var(--c);color:var(--c)}
:root[data-theme="dark"] .bll-sw button.locked{background:var(--surface);box-shadow:inset 0 0 0 3px var(--cd);color:var(--cd)}
.bll-sw button.locked .bll-lock{display:block}
.bll-sw button:focus-visible{outline-offset:4px}
.bll-cap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 10px;margin:8px 4px 4px;font-size:13.5px;line-height:1.35}
.bll-cap .bll-name{font-weight:700;color:var(--ink-2)}
.bll-cap .bll-prog{color:var(--ink-3)}
.bll-cap .bll-prog:empty{display:none}
@media (pointer:coarse){ .bll-list .bll-theme button{min-height:46px} }
@media (prefers-reduced-motion:reduce){ .bll-sw button{transition:none} }
.blh .msheet .bl-look{margin-top:18px}
.blh .msheet .bl-look .bll-lab{font-size:14px;margin:18px 4px 8px}
.blh .msheet .bl-look .bll-lab:first-child{margin-top:0}
:root[data-theme="dark"] .blh .lang-menu,:root[data-theme="dark"] .blh .bls{box-shadow:0 12px 30px rgba(0,0,0,.5)}
@media (min-width:901px){ .blh .msheet,.blh .mback{display:none!important} }
/* Shared modal (window.blConfirm / blAlert / blPrompt): replaces every native confirm/alert/prompt */
/* a modal stands clearly off the page (owner, 8 Oct): a real scrim with a light blur, a raised surface a step lighter
   than the page in dark, a 1px edge and a soft deep shadow (docs/brand/ART_QA_CHECKLIST.md, UI) */
dialog.blm{border:1px solid rgba(21,54,90,.10);padding:0;margin:auto;width:min(460px,calc(100vw - 32px));border-radius:var(--r3);background:#fff;color:var(--ink);
  box-shadow:0 2px 6px rgba(15,30,50,.10),0 28px 70px rgba(15,30,50,.32)}
:root[data-theme="dark"] dialog.blm{background:#1b2f4b;border-color:rgba(200,215,232,.16);box-shadow:0 2px 8px rgba(0,0,0,.4),0 30px 80px rgba(0,0,0,.6)}
dialog.blm::backdrop{background:rgba(15,30,50,.45);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
:root[data-theme="dark"] dialog.blm::backdrop{background:rgba(5,12,24,.62)}
dialog.blm[open]{animation:blm-in .18s cubic-bezier(.22,1,.36,1)}
@keyframes blm-bk{from{opacity:0}to{opacity:1}}
dialog.blm[open]::backdrop{animation:blm-bk .18s ease}
@keyframes blm-in{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){dialog.blm[open],dialog.blm[open]::backdrop{animation:none}}
@media (max-width:520px){.blm .blm-row{flex-direction:column-reverse}.blm .blm-row button{width:100%}}
:root[data-theme="dark"] .blm .blm-no{background:#24395a}
.blm form{padding:24px 24px 20px;margin:0}
.blm h2{font:600 22px/1.25 var(--f-display);margin:0 0 8px;color:var(--ink)}
.blm p{margin:0 0 6px;color:var(--ink-2);font-size:16px;line-height:1.5}
.blm label{display:block;font-weight:700;font-size:15px;margin:10px 0 6px;color:var(--ink)}
.blm input{width:100%;min-height:48px;border-radius:var(--r1);border:2px solid var(--rule-2);background:var(--paper);color:var(--ink);font:inherit;font-size:16px;padding:0 14px}
.blm input:focus{outline:none;border-color:var(--blue)}
.blm .blm-row{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:20px}
.blm button{min-height:46px;padding:0 20px;border-radius:var(--pill);font:700 16px/1 var(--f-body);cursor:pointer;border:2px solid transparent}
.blm .blm-no{background:var(--sunk);color:var(--ink)}
.blm .blm-no:hover{border-color:var(--rule-2)}
.blm .blm-yes{background:var(--study);color:#fff;box-shadow:none}
.blm .blm-yes.danger{background:#c0362c;box-shadow:none}
:root[data-theme="dark"] .blm .blm-yes{color:#04161c}
:root[data-theme="dark"] .blm .blm-yes.danger{background:#ff8a80;color:#3a0b07;box-shadow:none}
.blm button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
@media (max-width:400px){.blm form{padding:20px 18px 16px}.blm .blm-row button{flex:1 1 auto}}
@media (prefers-reduced-motion:no-preference){
  html:not([data-motion="off"]) .bl-tabs .ti>svg{transition:transform .22s cubic-bezier(.34,1.56,.64,1)}
  html:not([data-motion="off"]) .bl-tabs a:active .ti>svg{transform:scale(.9);transition-duration:.06s}
  html:not([data-motion="off"]) .bl-tabs a.pop .tr{animation:tbRoof .4s cubic-bezier(.34,1.56,.64,1);transform-origin:50% 100%}
  html:not([data-motion="off"]) .bl-tabs a.pop .tb1{animation:tbOpen .4s cubic-bezier(.22,1,.36,1);transform-origin:100% 50%}
  html:not([data-motion="off"]) .bl-tabs a.pop .tb2{animation:tbOpen .4s cubic-bezier(.22,1,.36,1);transform-origin:0 50%}
  html:not([data-motion="off"]) .bl-tabs a.pop .tc1{animation:tbFanL .4s cubic-bezier(.34,1.56,.64,1);transform-origin:50% 100%}
  html:not([data-motion="off"]) .bl-tabs a.pop .tc2{animation:tbFanR .4s cubic-bezier(.34,1.56,.64,1);transform-origin:50% 100%}
  html:not([data-motion="off"]) .bl-tabs a.pop [class*="tt"]{animation:tbTile .28s cubic-bezier(.34,1.56,.64,1) backwards;transform-origin:50% 50%}
  html:not([data-motion="off"]) .bl-tabs a.pop .tt2{animation-delay:.04s}html:not([data-motion="off"]) .bl-tabs a.pop .tt3{animation-delay:.08s}html:not([data-motion="off"]) .bl-tabs a.pop .tt4{animation-delay:.12s}
  html:not([data-motion="off"]) .bl-tabs a.pop .th{animation:tbNod .4s ease-in-out}
  html:not([data-motion="off"]) .bl-tabs .tb-fl.is-due svg{animation:tbFlame .6s ease-in-out 2;transform-origin:50% 100%}
  @keyframes tbRoof{35%{transform:translateY(-3px)}70%{transform:translateY(.6px)}}
  @keyframes tbOpen{from{transform:scaleX(.35)}}
  @keyframes tbFanL{from{transform:rotate(-16deg)}}
  @keyframes tbFanR{from{transform:rotate(12deg)}}
  @keyframes tbTile{from{transform:scale(0)}}
  @keyframes tbNod{30%{transform:translateY(1.8px)}60%{transform:translateY(-.6px)}}
  @keyframes tbFlame{25%{transform:rotate(-10deg)}75%{transform:rotate(8deg)}}
}
@media print{.bl-tabs{display:none!important}}

/* ---- the phone menu drawer, option A (owner, 19 Oct 2026: "too small and poorly designed"; mobile UX sweep, shell):
   header.php's .msheet.dz. Courses as four subject tiles, one row each for Tools, Shop, Pricing and Play (a colour each,
   a chevron on every row), and the account, the theme and Install app at the foot where the thumb is. The sheet fills
   the screen under the header bar on a phone; the foot sits at the bottom (margin-top:auto) so nothing is left empty.
   Rows 56 px and up, labels 18 px, 40 px icon tiles; no hairlines, no pills. Dark tiles stay on navy tints (no brown). */
@media (max-width:900px){
  :root .blh .msheet.dz{display:flex;flex-direction:column;inset-inline:auto 0;width:min(440px,100vw);max-width:100vw;bottom:0;max-height:none;overflow-y:auto;
    padding:14px max(16px,env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));background:var(--paper);border-radius:0}
  :root .blh .msheet.dz[hidden]{display:none}
  .blh .msheet.dz a{text-decoration:none}
  .blh .msheet.dz .dz-top{display:flex;flex-direction:column;gap:10px;padding:0}
  .blh .msheet.dz .dz-foot{margin-top:auto;padding-top:16px;display:flex;flex-direction:column;gap:10px}
  /* Courses: its name (a link to every course) and See all */
  .blh .msheet.dz .dz-h{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;margin:0 2px}
  :root .blh .msheet.dz .dz-h a{display:inline-flex;align-items:center;gap:4px;min-height:44px;min-width:44px;padding:0 2px;border-radius:12px;background:none;box-shadow:none}
  .blh .msheet.dz .dz-h-t{font:700 21px/1.2 var(--f-display);color:var(--ink)}
  .blh .msheet.dz .dz-h-all{font:650 16px/1 var(--f-body);color:var(--study-ink)}
  .blh .msheet.dz .dz-h-all .dz-chev{color:currentColor;width:18px;height:18px}
  /* the four subjects, 2 x 2, the course art over the name; the art for the theme in use only (the other never loads) */
  .blh .msheet.dz .dz-subs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  /* the four subjects (owner, 19 Oct 2026: compact, the rows' own language in a 2 x 2): the subject's icon in its colour
     beside its name, 64 px tall */
  :root .blh .msheet.dz .dz-sub{display:flex;align-items:center;justify-content:flex-start;gap:12px;min-height:64px;padding:0 12px 0 12px;text-align:start;border-radius:20px;background:var(--surface);color:var(--ink);box-shadow:none}
  .blh .msheet.dz .dz-sub-t{min-width:0;font:650 18px/1.15 var(--f-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .blh .msheet.dz .dz-s-maths{--t:var(--blue-tint);--ti:var(--blue-ink)}
  .blh .msheet.dz .dz-s-science{--t:var(--study-tint);--ti:var(--study-ink)}
  .blh .msheet.dz .dz-s-music{--t:var(--music-tint);--ti:var(--music-ink)}
  .blh .msheet.dz .dz-s-code{--t:var(--play-tint);--ti:var(--play-ink)}
  :root .blh .msheet.dz .dz-sub[aria-current="page"]{background:var(--study-tint)}
  /* the rows */
  .blh .msheet.dz .dz-rows{display:flex;flex-direction:column;gap:8px;margin-top:6px}
  :root .blh .msheet.dz .dz-row{position:static;display:flex;align-items:center;gap:14px;width:100%;min-height:58px;padding:0 12px 0 10px;border:0;border-radius:20px;
    background:var(--surface);box-shadow:none;color:var(--ink);font:650 18px/1.15 var(--f-display);text-align:start;cursor:pointer}
  :root .blh .msheet.dz .dz-row[hidden]{display:none}
  :root .blh .msheet.dz .dz-row::before,:root .blh .msheet.dz .dz-row::after{content:none}
  .blh .msheet.dz .dz-ic{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:13px;background:var(--t,var(--sunk));color:var(--ti,var(--ink-2))}
  .blh .msheet.dz .dz-ic svg{display:block;width:22px;height:22px;opacity:1}
  .blh .msheet.dz .dz-tx{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
  .blh .msheet.dz .dz-tx b{font:inherit;color:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .blh .msheet.dz .dz-tx small{font:500 14px/1.25 var(--f-body);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .blh .msheet.dz .dz-chev{flex:none;width:20px;height:20px;color:var(--ink-3);opacity:1}
  :root .blh .msheet.dz .dz-row[aria-current="page"]{background:var(--study-tint)}
  .blh .msheet.dz .dz-t-study{--t:var(--study-tint);--ti:var(--study-ink)}
  .blh .msheet.dz .dz-t-market{--t:var(--pink-tint);--ti:var(--pink-ink)}
  .blh .msheet.dz .dz-t-plans{--t:var(--blue-tint);--ti:var(--blue-ink)}
  .blh .msheet.dz .dz-t-play{--t:var(--play-tint);--ti:var(--play-ink)}
  .blh .msheet.dz .dz-t-inst,.blh .msheet.dz .dz-lang{--t:var(--sunk);--ti:var(--ink-2)}
  :root[data-theme="dark"] .blh .msheet.dz .dz-t-inst,:root[data-theme="dark"] .blh .msheet.dz .dz-lang{--t:var(--surface-up)}
  :root .blh .msheet.dz .dz-row[aria-current="page"] .dz-ic{background:var(--surface)}
  /* the account: Sign in and Create account side by side, the one to start with filled; signed in, one row */
  :root .blh .msheet.dz .mme{margin:0;display:flex;flex-direction:column;gap:10px}
  :root .blh .msheet.dz .dz-acts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .blh:not(.is-in) .msheet.dz .dz-me,:root .blh:not(.is-in) .msheet.dz .mme-mine,.blh.is-in .msheet.dz .dz-acts,:root .blh:not(.is-in) .msheet.dz .mplus{display:none}
  :root .blh .msheet.dz .dz-btn{display:flex;align-items:center;justify-content:center;min-height:54px;width:auto;margin:0;padding:6px 10px;border:0;border-radius:18px;box-shadow:none;
    font:700 17px/1.15 var(--f-body);text-align:center;text-wrap:balance}
  :root .blh .msheet.dz .dz-btn.primary{background:var(--study-btn);color:var(--on-study-btn,#fff)}
  :root .blh .msheet.dz .dz-btn.quiet{background:var(--surface);color:var(--ink)}
  :root[data-theme="dark"] .blh .msheet.dz .dz-btn.primary{color:#fff}
  .blh .msheet.dz .dz-me .mme-av{width:40px;height:40px;font-size:18px}
  .blh .msheet.dz .dz-me .mme-st{font-size:13.5px}
  .blh .msheet.dz .dz-lang select{flex:1 1 auto;min-width:0;height:56px;border:0;background:transparent;color:var(--ink);font:650 17px/1.2 var(--f-body);cursor:pointer}
  /* the theme: one segmented control (the header's theme script drives every [data-theme-opt]) */
  .blh .msheet.dz .dz-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;border-radius:18px;background:var(--surface)}
  .blh .msheet.dz .dz-seg button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;min-width:0;border:0;border-radius:14px;background:none;color:var(--ink-2);
    font:650 16px/1 var(--f-body);cursor:pointer}
  .blh .msheet.dz .dz-seg button svg{width:18px;height:18px;flex:none}
  .blh .msheet.dz .dz-seg button[aria-checked="true"]{background:var(--study-btn);color:var(--on-study-btn,#fff)}
  .blh .msheet.dz .dz-seg button:focus-visible,.blh .msheet.dz :is(.dz-row,.dz-sub,.dz-btn,.dz-h a):focus-visible{outline:3px solid var(--blue);outline-offset:2px}
  .blh .msheet.dz .mrow-inst{margin:0}
  /* a press: a small squeeze; none with reduced motion */
  .blh .msheet.dz :is(.dz-row,.dz-sub,.dz-btn,.dz-seg button){transition:transform .14s ease,filter .14s ease}
  .blh .msheet.dz :is(.dz-row,.dz-sub,.dz-btn):active{transform:scale(.97);filter:brightness(.95)}
  /* short screens (375 x 667 and under): 56 px rows and tighter gaps, so the account buttons show without a scroll */
  @media (max-height:700px){
    .blh .msheet.dz .dz-sub{min-height:56px}
    :root .blh .msheet.dz .dz-row{min-height:56px}
    .blh .msheet.dz .dz-top{gap:8px}
    .blh .msheet.dz .dz-foot{padding-top:12px}
  }
}
@media (max-width:900px) and (prefers-reduced-motion:reduce){.blh .msheet.dz :is(.dz-row,.dz-sub,.dz-btn,.dz-seg button){transition:none}.blh .msheet.dz :is(.dz-row,.dz-sub,.dz-btn):active{transform:none}}

/* ---- the phone menu in three levels (owner, 19 Oct 2026: "Now it all looks too samey?"; variant B, picked by the owner):
   1. Courses, the hero: four square tiles, each filled with its subject's own tint (light, or a rich dark one; no brown,
      no olive), a large icon on the subject colour and the name under it
   2. the site's sections, Tools, Shop, Pricing and Play: one quiet list on one surface, plain rows with a small
      one-colour icon and the chevron, spacing between them and no lines
   3. the account as a block of its own (picture, name, the email muted, then Get Plus for a known adult), and a utility
      footer: the theme control slimmer, Install app as a plain row. 44 px targets throughout. */
@media (max-width:900px){
  :root .blh .msheet.dz .dz-sub{background:var(--st);color:var(--sink)}
  :root .blh .msheet.dz .dz-s-maths{--st:#dcecfb;--sink:#123a63;--sic:#2a7fd0}
  :root .blh .msheet.dz .dz-s-science{--st:#d6f2ef;--sink:#0c4a4f;--sic:#0b8792}
  :root .blh .msheet.dz .dz-s-music{--st:#fbe3ef;--sink:#6a1f45;--sic:#c2457a}
  :root .blh .msheet.dz .dz-s-code{--st:#e9e3fb;--sink:#35227a;--sic:#6650d8}
  :root[data-theme="dark"] .blh .msheet.dz .dz-s-maths{--st:#123a63;--sink:#e3f0fc;--sic:#5aaff0}
  :root[data-theme="dark"] .blh .msheet.dz .dz-s-science{--st:#0d4146;--sink:#dcf7f5;--sic:#2cc6d1}
  :root[data-theme="dark"] .blh .msheet.dz .dz-s-music{--st:#4a1d40;--sink:#fde8f1;--sic:#f07ab5}
  :root[data-theme="dark"] .blh .msheet.dz .dz-s-code{--st:#2e2560;--sink:#eee8fb;--sic:#a99cf7}
  :root .blh .msheet.dz .dz-sub .dz-ic{--t:var(--sic);--ti:#fff}
  :root[data-theme="dark"] .blh .msheet.dz .dz-sub .dz-ic{--ti:#0b1626}
  :root .blh .msheet.dz .dz-sub .dz-ic svg{stroke-width:2.4}
  :root .blh .msheet.dz .dz-sub-t{font-weight:700}
  :root .blh .msheet.dz .dz-sub{flex-direction:column;align-items:flex-start;justify-content:space-between;gap:10px;min-height:100px;padding:14px}
  :root .blh .msheet.dz .dz-sub .dz-ic{width:46px;height:46px;border-radius:14px}
  :root .blh .msheet.dz .dz-sub .dz-ic svg{width:26px;height:26px}
  :root .blh .msheet.dz .dz-rows{gap:0;margin-top:14px;padding:4px 0;border-radius:20px;background:var(--surface)}
  :root .blh .msheet.dz .dz-rows .dz-row{min-height:52px;background:none;border-radius:16px;font:600 17px/1.2 var(--f-body);padding:0 14px 0 16px;gap:14px}
  :root .blh .msheet.dz .dz-rows .dz-ic{width:24px;height:24px;background:none;color:var(--ink-2)}
  :root .blh .msheet.dz .dz-rows .dz-ic svg{width:22px;height:22px}
  :root .blh .msheet.dz .dz-rows .dz-chev{width:18px;height:18px}
  :root .blh .msheet.dz .mme{padding:12px;border-radius:20px;background:var(--surface);gap:10px}
  :root .blh .msheet.dz .mme .dz-me{min-height:56px;padding:0 4px;background:none}
  :root .blh .msheet.dz .mme .dz-me small{color:var(--ink-3)}
  /* My courses, under who you are: a plain row, as the sections' (it left the menu with the redesign; back 20 Oct 2026) */
  :root .blh .msheet.dz .mme .mme-mine{min-height:48px;background:none;font:600 16px/1.2 var(--f-body);padding:0 10px 0 4px;gap:14px}
  :root .blh .msheet.dz .mme .mme-mine .dz-ic{width:40px;height:24px;background:none;color:var(--ink-2)}
  :root .blh .msheet.dz .mme .mme-mine .dz-ic svg{width:20px;height:20px}
  :root .blh .msheet.dz .mme .dz-btn{min-height:50px}
  :root .blh .msheet.dz .mme .dz-acts .dz-btn.quiet{background:var(--sunk)}
  :root[data-theme="dark"] .blh .msheet.dz .mme .dz-acts .dz-btn.quiet{background:var(--surface-up)}
  :root .blh .msheet.dz .dz-seg{padding:3px;border-radius:14px;background:none;box-shadow:inset 0 0 0 0 transparent;gap:2px}
  :root .blh .msheet.dz .dz-seg button{min-height:44px;font:600 14px/1 var(--f-body);border-radius:11px}
  :root .blh .msheet.dz .dz-seg button svg{width:16px;height:16px}
  :root .blh .msheet.dz .dz-seg{background:var(--sunk)}
  :root[data-theme="dark"] .blh .msheet.dz .dz-seg{background:var(--surface)}
  :root .blh .msheet.dz .dz-t-inst{min-height:44px;background:none;font:600 15px/1.2 var(--f-body);color:var(--ink-2);padding:0 8px}
  :root .blh .msheet.dz .dz-t-inst .dz-ic{width:24px;height:24px;background:none}
  :root .blh .msheet.dz .dz-t-inst .dz-ic svg{width:18px;height:18px}
  :root .blh .msheet.dz .dz-foot{gap:8px}
  @media (max-height:700px){:root .blh .msheet.dz .dz-sub{min-height:84px;padding:10px 12px;gap:8px}:root .blh .msheet.dz .dz-sub .dz-ic{width:40px;height:40px}}
}

/* ---- every page with the site header: an email address wraps rather than widening the page at 200% text (mobile UX
   sweep S-08; for parents, contact, about, the legal pages). Here, not in brainlag.css, so no BL_CSS_V bump is needed. */
a[href^="mailto:"]{overflow-wrap:anywhere}

/* ---- the account menu (owner, 19 Oct 2026: Display "under the account icon ... not in a separate nav item"): header.php
   #blAcctMenu, bl-navdd.js. Signed out: Sign in and Create account; signed in: who you are and the account links. Then
   Display: Theme as one segmented control, Colour (the name of the one in use, or of a locked one with how to unlock it,
   beside the label), and the two study display switches. One left edge (the menu's padding) for every label and control;
   16 to 20 px between groups, no lines. It stays inside the window and scrolls inside itself. */
.blh .navdd-menu.acct-menu.am{display:block;width:344px;max-width:calc(100vw - 24px);padding:14px 16px 16px;overflow-y:auto;overscroll-behavior:contain}
.blh .navdd-menu.acct-menu.am[hidden]{display:none}
:root[data-theme="dark"] .blh .navdd-menu.acct-menu.am{background:var(--surface-up)}
.blh .am a{text-decoration:none}
.blh:not(.is-in) .am .am-me,.blh.is-in .am .am-acts{display:none}
.blh .am .am-me{display:grid;gap:2px}
.blh .am .am-me-a{display:flex;align-items:center;gap:12px;min-height:60px;margin:0 -8px 4px;padding:6px 8px;border-radius:14px;color:var(--ink)}
.blh .am .am-me-a:hover,.blh .am .am-me-a:focus-visible{background:var(--blue-tint)}
.blh .am .mme-av{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;overflow:hidden;background:var(--blue);color:#fff;font:700 18px/1 var(--f-display)}
.blh .am .am-me-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.blh .am .am-me-tx b{font:650 17px/1.2 var(--f-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.blh .am .am-me-tx small{font:500 13.5px/1.3 var(--f-body);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.blh .am .navdd-it{min-height:44px;align-items:center;margin:0 -8px;padding:0 8px;width:calc(100% + 16px)}
.blh .am .acct-more-h{margin:10px 0 2px;padding:0;border:0}
.blh .am .am-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.blh .am .am-btn{display:flex;align-items:center;justify-content:center;min-height:48px;padding:0 8px;border-radius:14px;font:700 15.5px/1.15 var(--f-body);text-align:center}
.blh .am .am-btn.primary{background:var(--study-btn);color:var(--on-study-btn,#fff)}
.blh .am .am-btn.quiet{background:var(--sunk);color:var(--ink)}
:root[data-theme="dark"] .blh .am .am-btn.quiet{background:var(--surface)}
.blh .am .am-btn:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.blh .am .am-disp{margin-top:20px}
.blh .am .am-h{margin:0 0 12px;font:700 17px/1.2 var(--f-display);color:var(--ink)}
.blh .am .am-lab{margin:18px 0 8px;font:650 13.5px/1.3 var(--f-body);color:var(--ink-2)}
.blh .am .am-h + .am-lab{margin-top:0}
.blh .am .am-lab .bll-name{font-weight:700;color:var(--ink)}
.blh .am .am-seg{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:3px;padding:3px;border-radius:14px;background:var(--sunk)}
:root[data-theme="dark"] .blh .am .am-seg{background:var(--surface)}
.blh .am .am-seg button{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;min-width:0;padding:0 6px;border:0;border-radius:11px;background:none;color:var(--ink-2);font:650 14.5px/1.15 var(--f-body)}
.blh .am .am-seg button .bl-th-ic{flex:none;width:17px;height:17px}
.blh .am .am-seg button:hover{color:var(--ink)}
.blh .am .am-seg button[aria-checked="true"]{background:var(--study-btn);color:var(--on-study-btn,#fff)}
.blh .am .bll-sw{max-width:none;gap:6px;padding:2px 0 0;justify-items:start}
.blh .am .bll-sw button{max-width:40px}
.blh .am .bl-disp{margin-top:0}
.blh .am .bl-disp .bld-sw{margin:0 -8px;padding:0 8px;font-size:15px}
.blh .am .bl-disp .bld-p{display:none}