/* bl-drag.css - the drag control (assets/js/bl-drag.js). A 44 px round handle with a grip, on a 44 px tall track (the
   whole track takes the pointer, touch-action none on it alone, so the page still scrolls beside it); the rail is
   --btn-2-edge (3.3:1 on the light surface, 4.0:1 on the dark one), its filled part --study-btn, the handle's edge
   --study-btn (4.8:1 light, 3.3:1 dark), the bubble --surface on --ink (12:1 or more). Motion 160-240 ms on transform
   and opacity only, none under prefers-reduced-motion. The fallbacks are the light theme's values, for a page
   without brainlag.css. */
.bl-drag{position:relative;display:block;min-width:120px;color:var(--ink,#15365a)}
.bl-drag-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.bl-drag-label{font-weight:600}
.bl-drag-out{font-weight:700;font-variant-numeric:tabular-nums}
/* a range waiting for bl-drag.js (or on a page where it never runs) already takes the control's 44 px box, so enhancing
   it shifts nothing */
input[type=range][data-bl-drag]{display:block;box-sizing:border-box;width:100%;height:44px;margin:0;padding:0}
/* the handle and the bubble move by translate, the fill by scaleX, all three set inline by bl-drag.js from the track's
   cached width: a value set every frame costs no layout */
.bl-drag-track{position:relative;height:44px;touch-action:none;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
/* the rail runs from the handle's centre at min to its centre at max, so the fill is the value's share of it exactly */
.bl-drag-rail{position:absolute;left:22px;right:22px;top:18px;height:8px;border-radius:4px;overflow:hidden;background:var(--btn-2-edge,#7a8fa8)}
.bl-drag-fill{position:absolute;inset:0;background:var(--study-btn,#0a7f8a);transform-origin:left center;transform:scaleX(0)}
.bl-drag-rtl .bl-drag-fill{transform-origin:right center}
.bl-drag-tick{position:absolute;top:30px;left:calc(var(--t) * (100% - 44px) + 21px);width:2px;height:8px;border-radius:1px;background:var(--btn-2-edge,#7a8fa8)}
.bl-drag-thumb{position:absolute;top:0;left:0;width:44px;height:44px;box-sizing:border-box;
  border-radius:50%;border:3px solid var(--study-btn,#0a7f8a);background:var(--surface,#fff);box-shadow:0 1px 3px rgba(0,0,0,.2);
  cursor:grab;transition:transform .2s cubic-bezier(.22,1,.36,1)}
/* the grip: three short bars */
.bl-drag-thumb::before{content:"";position:absolute;left:50%;top:50%;width:12px;height:14px;margin:-7px 0 0 -6px;
  background:linear-gradient(90deg,var(--study-btn,#0a7f8a) 0 2px,transparent 2px 5px,var(--study-btn,#0a7f8a) 5px 7px,transparent 7px 10px,var(--study-btn,#0a7f8a) 10px)}
/* the keyboard ring is brainlag.css's site-wide 2 px :focus-visible ring; the fallback is for a page without it */
.bl-drag .bl-drag-thumb:focus-visible{outline:2px solid var(--study-ink,#08707a);outline-offset:2px}
.bl-drag.is-ptr .bl-drag-thumb:focus-visible{outline:none!important}   /* focused by a press, not the keyboard */
.bl-drag.is-drag .bl-drag-thumb{transform:scale(1.08);cursor:grabbing}
.bl-drag-bubble{position:absolute;bottom:calc(100% + 2px);left:22px;z-index:2;pointer-events:none;
  padding:3px 10px;border-radius:6px;background:var(--ink,#15365a);color:var(--surface,#fff);font-weight:700;font-size:15px;line-height:1.35;
  white-space:nowrap;font-variant-numeric:tabular-nums;opacity:0;transform:translate(calc(-50% + var(--bx,0px)),4px);
  transition:opacity .18s cubic-bezier(.22,1,.36,1),transform .18s cubic-bezier(.22,1,.36,1)}
.bl-drag-bubble.is-below{bottom:auto;top:calc(100% + 2px);transform:translate(calc(-50% + var(--bx,0px)),-4px)}
.bl-drag.is-on .bl-drag-bubble{opacity:1;transform:translate(calc(-50% + var(--bx,0px)),0)}
.bl-drag .bl-drag-bubble.is-hidden{visibility:hidden}
/* disabled: the same shapes in the disabled edge (3:1 or more on the page), no pointer */
.bl-drag.is-off .bl-drag-track{cursor:default}
.bl-drag.is-off .bl-drag-thumb{cursor:default;border-color:var(--btn-off-edge,#7a8fa8);box-shadow:none}
.bl-drag.is-off .bl-drag-thumb::before{opacity:.5;filter:grayscale(1)}
.bl-drag.is-off .bl-drag-rail{background:var(--rule-2,rgba(21,54,90,.22))}
.bl-drag.is-off .bl-drag-fill{background:var(--btn-off-edge,#7a8fa8)}
@media (prefers-reduced-motion:reduce){.bl-drag-thumb,.bl-drag-bubble,.bl-drag-fill{transition:none!important;animation:none!important}}