/* EVNMODE's standard control: a knob, a green readout and an uppercase
   label, in one row. One notch per available setting; the first setting
   points left, the last right. Used for every on/off and short choice. */
.knob-native{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;margin:0!important;overflow:hidden}
.knob-label-moved{display:none!important}

.knob-dial{position:relative;width:40px;height:40px;flex:0 0 40px;padding:0;border:0;border-radius:50%;cursor:grab;touch-action:none;background:none!important;overflow:visible}
.knob-dial::before{display:none!important}
/* Hashmarks: one per setting, just outside the knob; the set one glows. */
.knob-tick{position:absolute;left:50%;top:50%;width:2px;height:5px;margin:-2.5px 0 0 -1px;border-radius:1px;background:var(--bg-29);transform:rotate(var(--at)) translateY(-23px);pointer-events:none}
.knob-tick.is-active{background:var(--lime-bg-10);box-shadow:0 0 5px color-mix(in srgb,var(--sh-18) 70%,transparent);height:6px}
.knob-cap{position:absolute;inset:5px;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--bg-27),var(--bg-06) 70%);border:1px solid var(--line-18);box-shadow:0 2px 4px color-mix(in srgb,var(--sh-01) 50%,transparent),inset 0 1px 0 color-mix(in srgb,var(--sh-24) 8%,transparent);transform:rotate(var(--turn,-90deg));transition:transform .18s ease}
.knob-mark{position:absolute;left:50%;top:4px;width:3px;height:11px;margin-left:-1.5px;border-radius:2px;background:var(--lime-bg-10);box-shadow:0 0 6px color-mix(in srgb,var(--sh-18) 60%,transparent)}
.knob-dial:focus-visible{outline:2px solid var(--lime-line-16);outline-offset:3px}
.knob-dial:active{cursor:grabbing}
.knob-dial:disabled{opacity:.35;filter:grayscale(1);cursor:not-allowed}

/* The row: knob | readout | label. */
.ui-knob,.knob[data-knob]{display:inline-grid;grid-template-columns:46px auto auto;justify-content:start;justify-self:start;width:max-content;align-items:center;column-gap:.8rem;max-width:100%;vertical-align:middle}
label:has(>.ui-knob){display:grid!important;grid-template-columns:46px auto 1fr;align-items:center;column-gap:.8rem;min-height:44px}
label:has(>.ui-knob)>.ui-knob{display:contents}
label:has(>.ui-knob)>span:not(.ui-knob){order:3}
.knob[data-knob] .knob-text{display:contents}
.knob[data-knob] .knob-text small{order:2;width:7.2rem}
.knob[data-knob] .knob-text strong{order:3}

/* The readout: a small display, green when set, grey when off. */
.ui-knob .knob-value,.knob[data-knob] .knob-text small{display:block;box-sizing:border-box;max-width:100%;padding:.22rem .5rem;border:1px solid var(--line-03);border-radius:4px;background:var(--bg-02);color:var(--lime-fg-03);font-size:.72rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;line-height:1.4;box-shadow:inset 0 0 6px color-mix(in srgb,var(--sh-18) 8%,transparent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ui-knob[data-off] .knob-value{color:var(--fg-17)}
.ui-knob:has(.knob-dial:disabled) .knob-value{color:var(--fg-21)}

/* The label: small hardware-style capitals. */
.knob-name,label:has(>.ui-knob),.knob[data-knob] .knob-text strong{font-size:.74rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-31)}
label:has(>.ui-knob)>.trend-info-button,label:has(>.ui-knob) .trend-info-tooltip{letter-spacing:normal;text-transform:none}

/* Light theme. */
[data-theme="light"] .knob-tick{background:var(--k-n-65)}
[data-theme="light"] .knob-tick.is-active{background:var(--k-lime-35);box-shadow:none}
[data-theme="light"] .knob-cap{background:radial-gradient(circle at 35% 30%,var(--k-n-95),var(--k-n-80) 70%);border-color:var(--k-n-67);box-shadow:0 2px 4px color-mix(in srgb,var(--sh-01) 15%,transparent)}
[data-theme="light"] .knob-mark{background:var(--k-lime-35);box-shadow:none}
[data-theme="light"] .knob-name,[data-theme="light"] label:has(>.ui-knob),[data-theme="light"] .knob[data-knob] .knob-text strong{color:var(--k-n-31)}
@media (prefers-reduced-motion:reduce){.knob-cap{transition:none}}

/* Sarcasm and Comedy stack in the same column as every other knob. */
.comment-knobs{flex-direction:column!important;align-items:flex-start!important;gap:.35rem!important}
/* Phones: rows never run off the screen; long readouts shorten instead. */
@media (max-width:700px){
  .ui-knob,.knob[data-knob]{width:auto;max-width:100%;grid-template-columns:46px minmax(0,max-content) minmax(0,1fr)}
  label:has(>.ui-knob){grid-template-columns:46px minmax(0,max-content) minmax(0,1fr)}
  .ui-knob .knob-value{width:auto!important;max-width:10rem}
  .knob-name,label:has(>.ui-knob){white-space:normal}
}
.ui-knob .knob-dial,label:has(>.ui-knob) .knob-dial,.knob[data-knob] .knob-dial{justify-self:end}