/* blankfac3 form controls (2026-11-04): every native checkbox, radio, select and switch in the site's glass / pill
   language, in one file. Linked on every page by tools/port_v2.py as the LAST stylesheet in <head>, so these rules win
   over older page rules of the same specificity and existing markup needs no change.
   - checkbox: a rounded glass well; checked = solid ink with a drawn tick (springs in)
   - radio: the same well as a circle; checked = ink ring with a dot
   - switch: input[type=checkbox][role=switch] or .bf-switch, and every checkbox in the notification settings (.crm-cats)
   - select: a glass pill with its own chevron; the option list follows the theme (color-scheme + option colours);
     in Chromium (appearance: base-select) the open list is a glass menu like the header menus
   - check rows: label.check / .wl-check / .bf-check become a designed row (well, hover, checked ring)
   Hover and focus shapes follow each control's own radius. Opt out: class .bf-native on the input.
   The control fills carry !important because glass.css paints every input inside .acct white in the light theme. */

:root { color-scheme: dark; --ctl-line: rgba(255, 255, 255, .16); --ctl-line-hi: rgba(255, 255, 255, .32); --ctl-well: rgba(255, 255, 255, .05);
  --ctl-well-hi: rgba(255, 255, 255, .09); --ctl-ring: rgba(255, 255, 255, .22); --ctl-shadow: inset 0 1px 2px rgba(0, 0, 0, .28);
  --ctl-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A9A9B4' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 9.5l5.5 5.5 5.5-5.5'/%3E%3C/svg%3E");
  --ctl-pop: rgba(24, 24, 30, .94); }
:root[data-theme="light"] { color-scheme: light; --ctl-line: rgba(20, 20, 28, .18); --ctl-line-hi: rgba(20, 20, 28, .36); --ctl-well: #fff;
  --ctl-well-hi: #fff; --ctl-ring: rgba(20, 20, 28, .16); --ctl-shadow: inset 0 1px 2px rgba(20, 20, 28, .07);
  --ctl-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A5A63' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 9.5l5.5 5.5 5.5-5.5'/%3E%3C/svg%3E");
  --ctl-pop: rgba(252, 252, 250, .96); }

/* ---------- checkbox and radio ---------- */
:is(input[type=checkbox], input[type=radio]):not(.bf-native):not(.acct-vh):not(.vh):not([role=switch]):not(.bf-switch):not(.crm-cats input) {
  -webkit-appearance: none; appearance: none; flex: none; display: inline-grid; place-content: center; box-sizing: border-box;
  width: 20px; height: 20px; min-width: 20px; margin: 0; padding: 0; border: 0; vertical-align: -4px; cursor: pointer;
  border-radius: 7px; background: var(--ctl-well) !important; box-shadow: var(--ctl-shadow), inset 0 0 0 1.5px var(--ctl-line); color: var(--bg);
  transition: background-color var(--t-hover, 160ms) ease, box-shadow var(--t-hover, 160ms) ease, transform var(--t-press, 120ms) var(--ease-out, ease);
}
input[type=radio]:not(.bf-native):not(.acct-vh):not(.vh) { border-radius: 50% !important; }
:is(input[type=checkbox], input[type=radio]):not(.bf-native):not(.acct-vh):not(.vh):not([role=switch]):not(.bf-switch):not(.crm-cats input)::before {
  content: ""; display: block; width: 12px; height: 12px; background: currentColor; opacity: 0; transform: scale(.4);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: opacity var(--t-hover, 160ms) ease, transform .32s var(--lg-spring, ease);
}
input[type=radio]:not(.bf-native):not(.acct-vh):not(.vh)::before { width: 8px !important; height: 8px !important; border-radius: 50%; -webkit-mask: none !important; mask: none !important; }
input[type=checkbox]:not(.bf-native):not(.acct-vh):not(.vh):not([role=switch]):not(.bf-switch):not(.crm-cats input):indeterminate::before {
  -webkit-mask: linear-gradient(#000 0 0) center / 10px 2.4px no-repeat; mask: linear-gradient(#000 0 0) center / 10px 2.4px no-repeat; }
:is(input[type=checkbox], input[type=radio]):not(.bf-native):not(.acct-vh):not(.vh):not([role=switch]):not(.bf-switch):not(.crm-cats input):is(:checked, :indeterminate) {
  background: var(--text) !important; box-shadow: 0 1px 4px rgba(0, 0, 0, .22); }
:is(input[type=checkbox], input[type=radio]):not(.bf-native):not(.acct-vh):not(.vh):not([role=switch]):not(.bf-switch):not(.crm-cats input):is(:checked, :indeterminate)::before { opacity: 1; transform: none; }
:is(input[type=checkbox], input[type=radio]):not(.bf-native):not(.acct-vh):not(.vh):not([role=switch]):not(.bf-switch):not(.crm-cats input):not(:checked):not(:disabled):hover {
  background: var(--ctl-well-hi) !important; box-shadow: var(--ctl-shadow), inset 0 0 0 1.5px var(--ctl-line-hi); }
:is(input[type=checkbox], input[type=radio]):not(.bf-native):not(.acct-vh):not(.vh):focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
:is(input[type=checkbox], input[type=radio]):not(.bf-native):not(.acct-vh):not(.vh):disabled { opacity: .45; cursor: not-allowed; }
@media (prefers-reduced-motion: no-preference) {
  :is(input[type=checkbox], input[type=radio]):not(.bf-native):not(.acct-vh):not(.vh):not(:disabled):active { transform: scale(.9); }
}
/* invisible inputs laid over a designed label (bug report kind) stay invisible and keep their size */
.rp-kind input { width: auto !important; height: auto !important; min-width: 0 !important; opacity: 0 !important; box-shadow: none !important; background: none !important; }

/* ---------- switch ---------- */
:is(input[type=checkbox][role=switch], input[type=checkbox].bf-switch, .crm-cats input[type=checkbox]):not(.bf-native):not(.acct-vh) {
  -webkit-appearance: none; appearance: none; flex: none; position: relative; box-sizing: border-box; display: inline-block;
  width: 44px; height: 26px; min-width: 44px; margin: 0; padding: 0; border: 0; border-radius: 999px; cursor: pointer; vertical-align: middle;
  background: var(--ctl-well) !important; box-shadow: var(--ctl-shadow), inset 0 0 0 1.5px var(--ctl-line);
  transition: background-color var(--t-ui, 220ms) ease, box-shadow var(--t-ui, 220ms) ease;
}
:is(input[type=checkbox][role=switch], input[type=checkbox].bf-switch, .crm-cats input[type=checkbox]):not(.bf-native):not(.acct-vh)::before {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: color-mix(in srgb, var(--text) 78%, transparent); box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  transition: transform .42s var(--lg-spring, ease), background-color var(--t-ui, 220ms) ease, width .2s var(--ease-out, ease);
}
[data-theme="light"] :is(input[type=checkbox][role=switch], input[type=checkbox].bf-switch, .crm-cats input[type=checkbox]):not(.bf-native):not(.acct-vh):not(:checked) { background: rgba(20, 20, 28, .1) !important; box-shadow: inset 0 0 0 1px rgba(20, 20, 28, .06); }
[data-theme="light"] :is(input[type=checkbox][role=switch], input[type=checkbox].bf-switch, .crm-cats input[type=checkbox]):not(.bf-native):not(.acct-vh)::before { background: #fff; box-shadow: 0 1px 4px rgba(20, 20, 28, .25); }
:is(input[type=checkbox][role=switch], input[type=checkbox].bf-switch, .crm-cats input[type=checkbox]):not(.bf-native):not(.acct-vh):checked { background: var(--text) !important; box-shadow: none; }
:is(input[type=checkbox][role=switch], input[type=checkbox].bf-switch, .crm-cats input[type=checkbox]):not(.bf-native):not(.acct-vh):checked::before { transform: translateX(18px); background: var(--bg); }
[data-theme="light"] :is(input[type=checkbox][role=switch], input[type=checkbox].bf-switch, .crm-cats input[type=checkbox]):not(.bf-native):not(.acct-vh):checked::before { background: #fff; }
:is(input[type=checkbox][role=switch], input[type=checkbox].bf-switch, .crm-cats input[type=checkbox]):not(.bf-native):not(.acct-vh):not(:checked):not(:disabled):hover { box-shadow: var(--ctl-shadow), inset 0 0 0 1.5px var(--ctl-line-hi); }
@media (prefers-reduced-motion: no-preference) {
  :is(input[type=checkbox][role=switch], input[type=checkbox].bf-switch, .crm-cats input[type=checkbox]):not(.bf-native):not(.acct-vh):not(:disabled):active::before { width: 24px; }
  :is(input[type=checkbox][role=switch], input[type=checkbox].bf-switch, .crm-cats input[type=checkbox]):not(.bf-native):not(.acct-vh):checked:not(:disabled):active::before { transform: translateX(14px); }
}
:is(input[type=checkbox][role=switch], input[type=checkbox].bf-switch, .crm-cats input[type=checkbox]):focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
:is(input[type=checkbox][role=switch], input[type=checkbox].bf-switch, .crm-cats input[type=checkbox]):disabled { opacity: .45; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { :is(input[type=checkbox][role=switch], input[type=checkbox].bf-switch, .crm-cats input[type=checkbox])::before { transition: none !important; } }
/* notification rows: the switch sits at the end of its row */
.crm-cats .rv-opt { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.crm-cats .rv-opt > input[type=checkbox] { grid-column: 2; grid-row: 1; margin: 0; }
.crm-cats .rv-opt > .rv-opt-t { grid-column: 1; grid-row: 1; }

/* ---------- check rows: a designed row instead of a bare box and a sentence ---------- */
:is(label.check, label.wl-check, label.bf-check):not(.sc-prog .check):not(:has(> .acct-vh)) {
  display: flex; align-items: center; gap: 14px; box-sizing: border-box; min-height: var(--ctl-lg, 52px); padding: 12px 18px 12px 14px;
  border-radius: 18px; background: var(--well, rgba(255, 255, 255, .045)); box-shadow: inset 0 0 0 1px var(--hair, rgba(255, 255, 255, .08));
  color: var(--text); font-size: var(--fs-sm, .9375rem); font-weight: 500; line-height: 1.4; cursor: pointer; -webkit-user-select: none; user-select: none;
  transition: background-color var(--t-hover, 160ms) ease, box-shadow var(--t-hover, 160ms) ease;
}
:is(label.check, label.wl-check, label.bf-check):not(.sc-prog .check):not(:has(> .acct-vh)):hover { background: var(--well-2, rgba(255, 255, 255, .08)); }
:is(label.check, label.wl-check, label.bf-check):not(.sc-prog .check):not(:has(> .acct-vh)):has(input:checked) {
  background: var(--well-2, rgba(255, 255, 255, .08)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--text) 55%, transparent); }
:is(label.check, label.wl-check, label.bf-check):not(.sc-prog .check):not(:has(> .acct-vh)):has(input:focus-visible) { outline: 2px solid var(--text); outline-offset: 2px; }
:is(label.check, label.wl-check, label.bf-check):not(:has(> .acct-vh)) > input:focus-visible { outline: none; }
:is(label.check, label.wl-check, label.bf-check):not(.sc-prog .check) > input { margin: 0 !important; }
/* a required confirmation that is still open reads as the next thing to do, without shouting */
.acct form label.check:has(input[required]:not(:checked)) { box-shadow: inset 0 0 0 1.5px var(--ctl-line-hi); }
/* rows that already were designed rows (review visibility, notification settings): the box sits on the text's first line */
.rv-opt > input[type=checkbox]:not([role=switch]):not(.bf-switch):not(.crm-cats input) { margin-top: 1px !important; }
.crm-cats .rv-opt > input[type=checkbox] { margin-top: 0 !important; }
.rv-opt:has(input:focus-visible) { outline: 2px solid var(--text) !important; outline-offset: 2px; }
.rv-opt > input:focus-visible, .olrow-check input:focus-visible { outline-offset: 2px; }

/* ---------- date and time fields: the site's pill field (m6) ----------
   The same field as the text inputs (glass well, hairline, pill), the theme's own picker (color-scheme above), the
   calendar / clock button as a round hit area, and the focused part (day, month, hour) in the ink tint instead of
   the browser's blue. Widths stay with the page layout. */
:is(input[type=date], input[type=time], input[type=datetime-local], input[type=month], input[type=week]):not(.bf-native) {
  box-sizing: border-box; max-width: 100%; min-height: var(--ctl-sm, 36px); padding: 0 10px 0 16px;
  border: 1px solid var(--ctl-line) !important; border-radius: 999px !important; color: var(--text) !important;
  background: linear-gradient(180deg, rgba(var(--lg-ink, 255, 255, 255), .02), rgba(var(--lg-ink, 255, 255, 255), .06)) !important; background-color: var(--surface) !important;
  box-shadow: var(--ctl-shadow); font-family: "Hanken Grotesk", system-ui, sans-serif; font-variant-numeric: tabular-nums; line-height: 1.2;
  transition: border-color var(--t-hover, 160ms) ease, box-shadow var(--t-hover, 160ms) ease;
}
[data-theme="light"] :is(input[type=date], input[type=time], input[type=datetime-local], input[type=month], input[type=week]):not(.bf-native) { background: #fff !important; }
:is(input[type=date], input[type=time], input[type=datetime-local], input[type=month], input[type=week]):not(.bf-native):hover:not(:disabled) { border-color: var(--ctl-line-hi) !important; }
:is(input[type=date], input[type=time], input[type=datetime-local], input[type=month], input[type=week]):not(.bf-native):focus { outline: none; }
:is(input[type=date], input[type=time], input[type=datetime-local], input[type=month], input[type=week]):not(.bf-native):focus-within { border-color: var(--ctl-line-hi) !important; box-shadow: var(--ctl-shadow), 0 0 0 3px var(--ctl-ring); }
:is(input[type=date], input[type=time], input[type=datetime-local], input[type=month], input[type=week]):not(.bf-native):disabled { opacity: .55; cursor: default; }
:is(input[type=date], input[type=time], input[type=datetime-local], input[type=month], input[type=week]):not(.bf-native)::-webkit-datetime-edit { padding: 0; }
:is(input[type=date], input[type=time], input[type=datetime-local], input[type=month], input[type=week]):not(.bf-native)::-webkit-datetime-edit-fields-wrapper { padding: 0; }
:is(input[type=date], input[type=time], input[type=datetime-local], input[type=month], input[type=week]):not(.bf-native)::-webkit-datetime-edit-text { color: var(--muted); padding: 0 1px; }
:is(input[type=date], input[type=time], input[type=datetime-local], input[type=month], input[type=week]):not(.bf-native)::-webkit-datetime-edit-day-field:focus,
:is(input[type=date], input[type=time], input[type=datetime-local], input[type=month], input[type=week]):not(.bf-native)::-webkit-datetime-edit-month-field:focus,
:is(input[type=date], input[type=time], input[type=datetime-local], input[type=month], input[type=week]):not(.bf-native)::-webkit-datetime-edit-year-field:focus,
:is(input[type=date], input[type=time], input[type=datetime-local], input[type=month], input[type=week]):not(.bf-native)::-webkit-datetime-edit-hour-field:focus,
:is(input[type=date], input[type=time], input[type=datetime-local], input[type=month], input[type=week]):not(.bf-native)::-webkit-datetime-edit-minute-field:focus,
:is(input[type=date], input[type=time], input[type=datetime-local], input[type=month], input[type=week]):not(.bf-native)::-webkit-datetime-edit-ampm-field:focus,
:is(input[type=date], input[type=time], input[type=datetime-local], input[type=month], input[type=week]):not(.bf-native)::-webkit-datetime-edit-week-field:focus {
  background-color: color-mix(in srgb, var(--text) 16%, transparent); color: var(--text); border-radius: 6px; outline: none; }
:is(input[type=date], input[type=time], input[type=datetime-local], input[type=month], input[type=week]):not(.bf-native)::-webkit-calendar-picker-indicator {
  box-sizing: content-box; width: 16px; height: 16px; margin: 0 0 0 6px; padding: 6px; border-radius: 50%; cursor: pointer; opacity: .7;
  transition: opacity var(--t-hover, 160ms) ease, background-color var(--t-hover, 160ms) ease; }
:is(input[type=date], input[type=time], input[type=datetime-local], input[type=month], input[type=week]):not(.bf-native)::-webkit-calendar-picker-indicator:hover { opacity: 1; background-color: rgba(var(--lg-ink, 255, 255, 255), .08); }
[data-theme="light"] :is(input[type=date], input[type=time], input[type=datetime-local], input[type=month], input[type=week]):not(.bf-native)::-webkit-calendar-picker-indicator:hover { background-color: rgba(20, 20, 28, .06); }

/* ---------- select ---------- */
select:not([multiple]):not([size]):not(.bf-native) {
  -webkit-appearance: none; appearance: none; box-sizing: border-box; max-width: 100%; cursor: pointer;
  border: 1px solid var(--ctl-line) !important; border-radius: 999px !important; color: var(--text) !important;
  background: var(--ctl-chev) no-repeat right 14px center / 16px, linear-gradient(180deg, rgba(var(--lg-ink, 255, 255, 255), .02), rgba(var(--lg-ink, 255, 255, 255), .06)) !important;
  background-color: var(--surface) !important; box-shadow: var(--ctl-shadow);
  padding-right: 40px !important; text-overflow: ellipsis;
  transition: border-color var(--t-hover, 160ms) ease, box-shadow var(--t-hover, 160ms) ease, background-color var(--t-hover, 160ms) ease;
}
[data-theme="light"] select:not([multiple]):not([size]):not(.bf-native) { background: var(--ctl-chev) no-repeat right 14px center / 16px, #fff !important; }
select:not([multiple]):not([size]):not(.bf-native):hover:not(:disabled) { border-color: var(--ctl-line-hi) !important; }
select:not(.bf-native):focus { outline: none; }
select:not(.bf-native):focus-visible { border-color: var(--ctl-line-hi) !important; box-shadow: var(--ctl-shadow), 0 0 0 3px var(--ctl-ring); outline: 2px solid var(--text); outline-offset: 2px; }
select:not(.bf-native):disabled { opacity: .55; cursor: default; }
/* the native option list (Safari, Firefox, Chromium without base-select): legible in both themes */
select option, select optgroup { background-color: var(--surface); color: var(--text); }
select option:disabled { color: var(--muted); }

/* Chromium 135+: the open list is a glass menu with the header menus' material */
@supports (appearance: base-select) {
  select:not([multiple]):not([size]):not(.bf-native), select:not([multiple]):not([size]):not(.bf-native)::picker(select) { appearance: base-select; }
  /* a label longer than the pill stops at the padding, never under the chevron (clip at the content box) */
  select:not([multiple]):not([size]):not(.bf-native) { display: inline-flex; align-items: center; field-sizing: fixed; white-space: nowrap; overflow: clip; overflow-clip-margin: content-box; text-overflow: ellipsis; }
  select:not([multiple]):not([size]):not(.bf-native)::picker-icon { display: none; }
  select:not([multiple]):not([size]):not(.bf-native)::picker(select) {
    box-sizing: border-box; min-width: anchor-size(width); max-height: min(420px, 60vh); margin: 8px 0; padding: 6px; overflow: auto;
    border: 0; border-radius: 20px; color: var(--text); background: var(--ctl-pop);
    -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(var(--lg-ink, 255, 255, 255), .1);
    opacity: 1; transform: none; filter: none;
    transition: opacity .2s var(--ease-out, ease), transform .26s var(--ease-out, ease), overlay .26s allow-discrete, display .26s allow-discrete;
  }
  [data-theme="light"] select:not([multiple]):not([size]):not(.bf-native)::picker(select) { box-shadow: 0 16px 40px rgba(20, 20, 28, .16), inset 0 0 0 1px rgba(20, 20, 28, .08); }
  /* 12.11: Chromium matches the open picker with select:open, not ::picker(select):popover-open (that form never ran, so
     the list appeared without motion) */
  /* the open motion only (@starting-style): no "hidden while closed" state, so a browser without select:open still shows
     the list (a closed-state rule left an empty grey box in some Chrome versions) */
  @starting-style { select:not([multiple]):not([size]):not(.bf-native):open::picker(select) { opacity: 0; transform: translateY(-4px) scale(.98); } }
  select:not([multiple]):not([size]):not(.bf-native) option {
    display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 14px; border-radius: 14px; background: transparent;
    color: var(--text); font: 500 var(--fs-sm, .9375rem)/1.3 "Hanken Grotesk", system-ui, sans-serif; cursor: pointer;
    transition: background-color var(--t-hover, 160ms) ease;
  }
  select:not([multiple]):not([size]):not(.bf-native) option:hover, select:not([multiple]):not([size]):not(.bf-native) option:focus-visible { background: rgba(var(--lg-ink, 255, 255, 255), .08); outline: none; }
  [data-theme="light"] select:not([multiple]):not([size]):not(.bf-native) option:hover, [data-theme="light"] select:not([multiple]):not([size]):not(.bf-native) option:focus-visible { background: rgba(20, 20, 28, .06); }
  select:not([multiple]):not([size]):not(.bf-native) option:checked { font-weight: 600; }
  select:not([multiple]):not([size]):not(.bf-native) option::checkmark { order: 1; margin-left: auto; content: ""; width: 14px; height: 14px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; }
  select:not([multiple]):not([size]):not(.bf-native) option:disabled { color: var(--muted); cursor: default; }
  select:not([multiple]):not([size]):not(.bf-native) optgroup { padding: 4px 0; font: 600 var(--fs-xs, .8125rem)/1.3 "Hanken Grotesk", system-ui, sans-serif; color: var(--muted); background: transparent; }
  html.lg-solid select:not([multiple]):not([size]):not(.bf-native)::picker(select) { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--surface); }
  @media (prefers-reduced-motion: reduce) { select::picker(select) { transition: none !important; } }
}

/* ---------- range sliders: a thin glass track, filled in ink up to the thumb, a round knob like the switch ---------- */
/* The fill follows --range-fill (0%..100%) where a page script sets it (e.g. on input: el.style.setProperty(
   "--range-fill", pct + "%")); Firefox fills by itself (::-moz-range-progress). Without it the track is plain. */
input[type=range]:not(.bf-native) {
  -webkit-appearance: none; appearance: none; box-sizing: border-box; display: block; height: 26px; margin: 0; padding: 0;
  background: transparent; cursor: pointer; accent-color: var(--text);
}
input[type=range]:not(.bf-native)::-webkit-slider-runnable-track {
  height: 6px; border-radius: 999px; box-shadow: var(--ctl-shadow), inset 0 0 0 1px var(--ctl-line);
  background: linear-gradient(90deg, color-mix(in srgb, var(--text) 78%, transparent) 0 var(--range-fill, 0%), var(--ctl-well-hi) var(--range-fill, 0%) 100%);
}
input[type=range]:not(.bf-native)::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin-top: -7px; border: 0; border-radius: 50%;
  background: var(--text); box-shadow: 0 1px 4px rgba(0, 0, 0, .35); transition: transform .2s var(--ease-out, ease);
}
input[type=range]:not(.bf-native)::-moz-range-track { height: 6px; border-radius: 999px; background: var(--ctl-well-hi); box-shadow: var(--ctl-shadow), inset 0 0 0 1px var(--ctl-line); }
input[type=range]:not(.bf-native)::-moz-range-progress { height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--text) 78%, transparent); }
input[type=range]:not(.bf-native)::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 50%; background: var(--text); box-shadow: 0 1px 4px rgba(0, 0, 0, .35); }
[data-theme="light"] input[type=range]:not(.bf-native)::-webkit-slider-runnable-track {
  box-shadow: inset 0 0 0 1px rgba(20, 20, 28, .06);
  background: linear-gradient(90deg, color-mix(in srgb, var(--text) 78%, transparent) 0 var(--range-fill, 0%), rgba(20, 20, 28, .1) var(--range-fill, 0%) 100%); }
[data-theme="light"] input[type=range]:not(.bf-native)::-moz-range-track { background: rgba(20, 20, 28, .1); box-shadow: inset 0 0 0 1px rgba(20, 20, 28, .06); }
[data-theme="light"] input[type=range]:not(.bf-native)::-webkit-slider-thumb { background: #fff; box-shadow: 0 1px 4px rgba(20, 20, 28, .3), 0 0 0 .5px rgba(20, 20, 28, .12); }
[data-theme="light"] input[type=range]:not(.bf-native)::-moz-range-thumb { background: #fff; box-shadow: 0 1px 4px rgba(20, 20, 28, .3), 0 0 0 .5px rgba(20, 20, 28, .12); }
input[type=range]:not(.bf-native):focus { outline: none; }
input[type=range]:not(.bf-native):focus-visible { outline: 2px solid var(--text); outline-offset: 2px; border-radius: 999px; }
input[type=range]:not(.bf-native):disabled { opacity: .45; cursor: not-allowed; }
@media (prefers-reduced-motion: no-preference) {
  input[type=range]:not(.bf-native):active::-webkit-slider-thumb { transform: scale(1.12); }
}


/* impeccable QA (2026-11-12): placeholders were the browser default #757575, 3.8:1 on the dark fields (WCAG AA needs
   4.5:1). --muted-2 gives 4.8:1 on the dark fields and 4.6-5:1 in the light theme. */
:is(input, textarea)::placeholder { color: var(--muted-2); opacity: 1; }

/* ---------- the open list in browsers without base-select (assets/bf-select.js): the same glass menu ---------- */
.bf-sel-pop {
  position: fixed; z-index: 1200; box-sizing: border-box; padding: 6px; overflow: auto; overscroll-behavior: contain;
  border-radius: 20px; color: var(--text); background: var(--ctl-pop);
  -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(var(--lg-ink, 255, 255, 255), .1);
  font: 500 var(--fs-sm, .9375rem)/1.3 "Hanken Grotesk", system-ui, sans-serif; scrollbar-width: thin;
}
[data-theme="light"] .bf-sel-pop { box-shadow: 0 16px 40px rgba(20, 20, 28, .16), inset 0 0 0 1px rgba(20, 20, 28, .08); }
html.lg-solid .bf-sel-pop { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--surface); }
.bf-sel-group + .bf-sel-group, .bf-sel-opt + .bf-sel-group { margin-top: 4px; }
.bf-sel-label { padding: 8px 14px 4px; font-weight: 600; font-size: var(--fs-xs, 14px); color: var(--muted); }
.bf-sel-opt { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 14px; border-radius: 14px; cursor: pointer; transition: background-color var(--t-hover, 160ms) ease; }
.bf-sel-opt.is-active { background: rgba(var(--lg-ink, 255, 255, 255), .08); }
[data-theme="light"] .bf-sel-opt.is-active { background: rgba(20, 20, 28, .06); }
.bf-sel-opt[aria-selected="true"] { font-weight: 600; }
.bf-sel-opt[aria-selected="true"]::after { content: ""; flex: none; margin-left: auto; width: 14px; height: 14px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.bf-sel-opt[aria-disabled="true"] { color: var(--muted); cursor: default; }
.bf-sel-text { min-width: 0; overflow-wrap: anywhere; }

/* ---------- number fields: no spinner arrows (12.11, Pasha: "номер позиции со стрелочками") ---------- */
input[type=number]:not(.bf-native) { -moz-appearance: textfield; appearance: textfield; }
input[type=number]:not(.bf-native)::-webkit-inner-spin-button, input[type=number]:not(.bf-native)::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------- no inner scrollbars (12.11, Pasha: "слайдер, который скроллит вверх-вниз ... появляются, когда делаешь
   выпадашки") ---------- Only the page keeps its scrollbar. Lists, menus, open selects, the chat, sheets, readers and
   tables still scroll with the wheel, touch and keyboard; their bars are not drawn. */
body * { scrollbar-width: none !important; }
/* a separate rule: a browser that does not know ::picker() drops the whole rule it is in */
@supports (appearance: base-select) { select::picker(select) { scrollbar-width: none !important; } }
body *::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }