/* What moves it (cx-moved.js), every device's: one colour for "something else moves this", CS/M's blue made light for the
   dark panels (2 Nov 2026, Cyrus: "do as recommended"); the tag under a control's name, the control's card (each mover's
   line, SHOW ME and REMOVE), the band under a slider, the count in the preset strip and its list, and the line said as a
   moved control is turned, or a mover removed. Orange stays a person's own setting and the accent; green stays ON. */
:where(:root){--cx-moved:#8d98ff;--cx-moved-soft:#8d98ff1f;--cx-moved-line:#8d98ff80}

/* the tag, under the control's name for as long as something moves it */
button.cxm-tag{position:relative;display:inline-flex;flex:none;align-items:center;justify-content:center;gap:4px;align-self:flex-start;
  width:max-content;max-width:100%;height:18px;min-height:18px;min-width:0;margin:6px 0 0;padding:0 7px;border:1px solid var(--cx-moved-line);
  border-radius:9px;background:transparent;box-shadow:none;color:var(--cx-moved);font:600 9px/1 var(--cxf-mono,ui-monospace,Menlo,monospace);
  letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;cursor:help;
  -webkit-tap-highlight-color:transparent;transition:background .15s,border-color .15s}
.cxn>button.cxm-tag{align-self:center}
button.cxm-tag>span{font-weight:400;letter-spacing:0}
/* a tag kept in its row while a hand is on the page, its mark gone: out of reach until the lift (where inert is not known) */
button.cxm-tag.cxm-parked{pointer-events:none}
button.cxm-tag[data-now]::after{content:'\00a0\00b7\00a0NOW\00a0' attr(data-now)}
button.cxm-tag[aria-expanded=true],button.cxm-tag:active{background:var(--cx-moved-soft);border-color:var(--cx-moved)}
button.cxm-tag:focus-visible{outline:2px solid var(--cx-moved);outline-offset:2px}
@media(hover:hover){button.cxm-tag:hover{background:var(--cx-moved-soft);border-color:var(--cx-moved);color:var(--cx-moved)}}
/* on a touch screen a word of 10 px, and a finger's room round it that reaches no other control */
@media(pointer:coarse){
  button.cxm-tag{height:20px;min-height:20px;font-size:10px;letter-spacing:.08em}
  button.cxm-tag::before{content:'';position:absolute;inset:-8px -6px}
}

/* a knob: your setting's arc and pointer dimmed while something sets it outright; the ring and the dot in the colour
   (cx-knob.css's --cxn-mod) */
.cxn.cxm-sets .cxn-val{opacity:.32}
.cxn.cxm-sets .cxn-ptr{opacity:.45}

/* a slider: under its track, a band for the range it moves through and a dot where it is now */
.cxm-anchor{position:relative}
.cxm-band{position:absolute;left:0;right:0;height:0;margin:0;padding:0;pointer-events:none}
.cxm-band>i{position:absolute;top:1px;height:3px;border-radius:2px;background:var(--cx-moved-line)}
.cxm-band>b{position:absolute;top:-1px;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:var(--cx-moved);
  box-shadow:0 0 0 2px var(--cx-moved-soft)}
.cxm-band>[hidden]{display:none}
.cxm-sets:not(.cxn)>input[type=range]{opacity:.55}

/* everything moved, lit for a few seconds as the count is pressed; a control SHOW ME brought out, outlined */
.cxm-moved{transition:box-shadow .3s,background-color .3s}
.cxm-lit{border-radius:4px;background-color:var(--cx-moved-soft);box-shadow:0 0 0 1px var(--cx-moved-line)}
.cxm-found{border-radius:4px;box-shadow:0 0 0 2px var(--cx-moved)}
@media(prefers-reduced-motion:reduce){.cxm-moved,button.cxm-tag{transition:none}}

/* a moved control held by a finger opens its card: never the system's own callout or a selection */
.cxm-moved{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}

/* the control's card (each mover on it, its line, SHOW ME and REMOVE); the line said as a moved control is turned */
.cxm-tip,.cxm-note,.cxm-list{position:fixed;z-index:80;box-sizing:border-box;margin:0;border:1px solid var(--cx-moved-line);border-radius:4px;
  background:var(--cxf-menu,#1c2226);box-shadow:0 12px 28px #000a;color:var(--cxf-ink,#e7e2d8);
  font:12px/1.45 var(--cxf-sans,system-ui,sans-serif);letter-spacing:0;text-transform:none;text-align:left}
.cxm-tip{display:grid;gap:10px;width:max-content;max-width:min(320px,calc(100vw - 24px));padding:10px 12px}
.cxm-tip p,.cxm-note{margin:0}
.cxm-tip .cxm-head{margin:0;color:var(--cxf-muted,#a2adb0);font:10px/1.4 var(--cxf-mono,ui-monospace,Menlo,monospace);letter-spacing:.12em;
  text-transform:uppercase;overflow-wrap:anywhere}
.cxm-tip .cxm-row{display:grid;gap:6px;justify-items:start}
.cxm-tip .cxm-row+.cxm-row{padding-top:10px;border-top:1px solid var(--cxf-line,#343d42)}
.cxm-tip .cxm-row>b{color:var(--cx-moved);font:600 10px/1.2 var(--cxf-mono,ui-monospace,Menlo,monospace);letter-spacing:.12em;text-transform:uppercase}
.cxm-acts{display:flex;flex-wrap:wrap;gap:8px}
.cxm-note{width:max-content;max-width:min(300px,calc(100vw - 24px));padding:8px 11px;pointer-events:none}
.cxm-tip[hidden],.cxm-note[hidden],.cxm-list[hidden]{display:none}
button.cxm-show,button.cxm-remove{justify-self:start;display:inline-flex;align-items:center;justify-content:center;width:auto;height:30px;
  min-height:30px;margin:0;padding:0 10px;border:1px solid var(--cx-moved-line);border-radius:3px;background:transparent;box-shadow:none;
  color:var(--cx-moved);font:600 10px/1 var(--cxf-mono,ui-monospace,Menlo,monospace);letter-spacing:.14em;text-transform:uppercase;
  white-space:nowrap;cursor:pointer}
/* REMOVE in the panel's ink, quieter than SHOW ME: it takes a mover away (Undo brings it back) */
button.cxm-remove{border-color:var(--cxf-line,#343d42);color:var(--cxf-ink,#e7e2d8)}
button.cxm-show:focus-visible,button.cxm-remove:focus-visible{outline:2px solid var(--cx-moved);outline-offset:2px}
@media(hover:hover){
  button.cxm-show:hover{background:var(--cx-moved-soft);border-color:var(--cx-moved);color:var(--cx-moved)}
  button.cxm-remove:hover{background:#ffffff12;border-color:var(--cxf-muted,#a2adb0);color:var(--cxf-ink,#e7e2d8)}
}
@media(pointer:coarse){button.cxm-show,button.cxm-remove{height:40px;min-height:40px;padding:0 14px}}

/* N MOVING, in the preset strip's top line right after the preset's label while anything moves; pressed, its list under it */
.cxf-strip button.cxm-count{position:relative;display:inline-flex;flex:none;align-items:center;gap:4px;width:auto;height:auto;min-width:0;
  min-height:0;margin:-3px 0;padding:2px 7px;border:1px solid var(--cx-moved-line);border-radius:9px;background:transparent;box-shadow:none;
  color:var(--cx-moved);font:600 9px/1.2 var(--cxf-mono,ui-monospace,Menlo,monospace);letter-spacing:.13em;text-transform:uppercase;
  white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent}
.cxf-strip button.cxm-count[hidden]{display:none}
.cxf-strip button.cxm-count>span[aria-hidden]{font-weight:400;letter-spacing:0}
.cxf-strip button.cxm-count b{font-weight:600}
.cxf-strip button.cxm-count[aria-expanded=true]{background:var(--cx-moved-soft);border-color:var(--cx-moved)}
.cxf-strip button.cxm-count:focus-visible{outline:2px solid var(--cx-moved);outline-offset:2px}
@media(hover:hover){.cxf-strip button.cxm-count:hover{background:var(--cx-moved-soft);border-color:var(--cx-moved);color:var(--cx-moved)}}
/* right after the preset's label, as part of it, on every screen (3 Nov 2026, Cyrus, of its two places: "A"): the label
   and the count a row of their own, the label's words giving way first, the preset's place where it was (at the top
   line's right on a phone, by the arrows from 640 px); nothing else in the strip moves for it */
.cxf-strip .cxm-label{display:flex;flex:0 1 auto;align-items:baseline;gap:8px;min-width:0}
.cxf-strip .cxm-label .cxf-kind{flex:0 1 auto}
@media(min-width:640px){
  .cxf-strip .cxf-eyebrow .cxm-label{grid-area:eyebrow;justify-self:start;max-width:100%;margin:0 0 5px}
  .cxf-strip .cxf-eyebrow .cxm-label .cxf-kind{margin:0}
}
/* by touch, a word of 10 px, its pill on the label's own line (its border and padding given back above and below, so the
   line is as tall as the label's words and nothing under it moves) and its press reaching up and across, never down,
   inside the label's row (the row as wide as that reach, so nothing past the label is taken for words past their place) */
@media(pointer:coarse){
  .cxf-strip button.cxm-count{margin:-3px 0;font-size:10px;letter-spacing:.06em}
  .cxf-strip button.cxm-count::before{content:'';position:absolute;inset:-8px -8px 0}
  .cxf-strip .cxm-label:has(.cxm-count:not([hidden])){padding-right:8px}
}
.cxm-list{display:grid;gap:8px;width:min(380px,calc(100vw - 24px));max-height:min(62vh,440px);overflow:auto;overscroll-behavior:contain;padding:12px}
.cxm-list .cxm-head{margin:0 0 2px;color:var(--cxf-muted,#a2adb0);font:10px/1.4 var(--cxf-mono,ui-monospace,Menlo,monospace);letter-spacing:.12em;
  text-transform:uppercase}
.cxm-list .cxm-row{display:grid;gap:3px;padding:8px 10px;border:1px solid var(--cxf-line,#343d42);border-radius:3px}
.cxm-list .cxm-acts{justify-content:flex-end;margin-top:5px}
.cxm-list .cxm-row b{display:block;color:var(--cxf-ink,#e7e2d8);font:600 11px/1.3 var(--cxf-mono,ui-monospace,Menlo,monospace);letter-spacing:.06em;
  text-transform:uppercase;overflow-wrap:anywhere}
.cxm-list .cxm-row span{display:block;margin-top:0;color:var(--cxf-muted,#a2adb0);font-size:12px}