/* 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}
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 over SHARE 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)}}
/* a phone: the label, then the preset's place and the count at the right of the top line */
.cxf-strip.cxm-has .cxf-eyebrow .cxf-count{margin-left:auto}
/* from 640 px the top line is the label's alone: the count at its right end, over SHARE, the label kept clear of it */
@media(min-width:640px){
  .cxf-strip button.cxm-count{grid-area:eyebrow;justify-self:end;align-self:start;margin-top:-3px}
  .cxf-strip.cxm-has .cxf-eyebrow .cxf-kind{padding-right:var(--cxm-room,104px)}
}
/* by touch, a word of 10 px, its pill kept above the row under it and its press reaching up and across, never down */
@media(pointer:coarse){
  .cxf-strip button.cxm-count{margin:-4px 0 -2px;font-size:10px;letter-spacing:.06em}
  .cxf-strip button.cxm-count::before{content:'';position:absolute;inset:-8px -8px 0}
}
@media(pointer:coarse) and (min-width:640px){.cxf-strip button.cxm-count{margin-top:-4px}}
.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}