.calc-notebook-editor .ls3-p5-codemirror.CodeMirror .CodeMirror-activeline-background,
.calc-notebook-editor .ls3-p5-codemirror.CodeMirror .calc-tune-row { border-radius: var(--house-menu-radius); background: color-mix(in srgb, var(--color-accent) 8%, var(--house-menu-surface)); }
.calc-notebook-editor .ls3-p5-codemirror.CodeMirror.has-number-tune-row .CodeMirror-activeline-background:not(.calc-tune-row) { background: transparent; box-shadow: none; }
.calc-tune-number { border-radius: var(--house-menu-item-radius); background: color-mix(in srgb, var(--color-accent) 12%, transparent); box-shadow: 0 1px 0 color-mix(in srgb, var(--color-accent) 65%, transparent); cursor: grab; }
.calc-number-grip { position: fixed; z-index: 1500; }
/* Both row actions share their geometry, glyph scale and interaction styling. */
.calc-number-grip, .calc-notebook-studio .calc-notebook-row-menu { --icon-button-glyph-size: min(17px, calc(var(--calc-number-grip-size, 24px) - 2px)); display: grid; place-items: center; width: var(--calc-number-grip-size, 24px); height: var(--calc-number-grip-size, 24px); padding: 0; border: 0; border-radius: var(--workspace-header-ellipsis-radius); background: transparent; color: var(--text-secondary); box-shadow: none; cursor: pointer; touch-action: none; transition: background 100ms ease, color 100ms ease; }
.calc-number-grip:hover, .calc-number-grip:focus-visible, .calc-notebook-studio .calc-notebook-row-menu:hover, .calc-notebook-studio .calc-notebook-row-menu:focus-visible { background: var(--bg-hover); color: var(--text-primary); }
.calc-notebook-studio .calc-notebook-row-menu > svg { display: block; width: var(--icon-button-glyph-size); height: var(--icon-button-glyph-size); margin: auto; pointer-events: none; }
.calc-number-grip[hidden], .calc-number-tuner[hidden] { display: none; }
.calc-number-grip:focus-visible, .calc-notebook-studio .calc-notebook-row-menu:focus-visible, .calc-number-tuner button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.calc-number-tuner { position: fixed; z-index: 1700; box-sizing: border-box; width: 260px; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); overflow: auto; padding: 16px; border: var(--app-border-width, 1px) solid var(--house-menu-border); border-radius: var(--house-menu-radius); background: color-mix(in srgb, var(--house-menu-surface) 90%, transparent); color: var(--text-primary); box-shadow: var(--ls-e, var(--house-menu-shadow)); font: 14px/1.4 var(--font-body); animation: calc-number-tune-reveal 140ms ease-out; }
.calc-number-tuner:focus { outline: none; }
.calc-number-tuner button { display: flex; justify-content: center; align-items: center; width: 100%; min-height: 36px; padding: 6px 12px; border: 0; border-radius: var(--house-menu-item-radius); background: var(--house-menu-item-selected); color: inherit; font: inherit; cursor: pointer; }
.calc-number-tuner button:hover { background: var(--house-menu-item-hover); }
.calc-number-tuner [data-tune-reset] { margin-top: 16px; }
.calc-number-dial {
  --dial-highlight: color-mix(in srgb, var(--house-menu-surface) 94%, white);
  --dial-mid: color-mix(in srgb, var(--house-menu-surface) 94%, var(--text-primary));
  --dial-shade: color-mix(in srgb, var(--house-menu-surface) 82%, var(--text-primary));
  position: relative; isolation: isolate; width: 216px; max-width: 100%; aspect-ratio: 1; margin: 0 auto 16px;
  border-radius: 50%; touch-action: none; user-select: none; cursor: grab;
}
.calc-number-dial:focus-visible { outline: 2px solid color-mix(in srgb, var(--color-accent) 65%, transparent); outline-offset: 3px; }
/* Fixed lighting gives the rotating rim a satin finish, with a separate centre cap. */
.calc-number-dial::before, .calc-number-dial::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; }
.calc-number-dial::before {
  inset: 7.4%;
  background: conic-gradient(from -30deg, var(--dial-highlight), var(--dial-shade) 60deg, var(--dial-mid) 105deg, var(--dial-highlight) 160deg, var(--dial-mid) 205deg, var(--dial-shade) 250deg, var(--dial-highlight) 330deg, var(--dial-highlight));
  box-shadow: inset 0 1px 1px rgb(255 255 255 / .6), inset 0 -1px 2px rgb(0 0 0 / .12), 0 2px 3px rgb(0 0 0 / .09), 0 8px 16px rgb(0 0 0 / .06);
}
.calc-number-dial::after {
  inset: 21.3%;
  background: linear-gradient(145deg, var(--dial-highlight), var(--house-menu-surface) 65%, var(--dial-mid));
  border: 1px solid color-mix(in srgb, var(--text-primary) 9%, var(--house-menu-surface));
  box-shadow: inset 0 1px 1px rgb(255 255 255 / .4), 0 1px 2px rgb(0 0 0 / .08), 0 3px 6px rgb(0 0 0 / .05);
}
.calc-number-dial svg { position: relative; z-index: 1; display: block; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.calc-number-dial-edge { fill: none; stroke: color-mix(in srgb, var(--text-primary) 16%, transparent); stroke-width: .75; }
.calc-number-dial-inner-edge { fill: none; stroke: color-mix(in srgb, var(--text-primary) 10%, transparent); stroke-width: .75; }
.calc-number-dial [data-tune-ticks] { stroke: color-mix(in srgb, var(--text-secondary) 30%, transparent); stroke-width: 1; stroke-linecap: round; }
.calc-number-dial-major-tick { stroke: color-mix(in srgb, var(--text-secondary) 65%, transparent); }
.calc-number-dial-flutes { stroke: color-mix(in srgb, var(--text-primary) 22%, transparent); stroke-width: .7; }
.calc-number-dial-inlay { fill: none; stroke: color-mix(in srgb, var(--text-primary) 15%, transparent); stroke-width: 6; stroke-linecap: round; }
.calc-number-dial-indicator { fill: none; stroke: color-mix(in srgb, var(--color-accent) 78%, var(--text-primary)); stroke-width: 3; stroke-linecap: round; transition: stroke 120ms ease, filter 120ms ease; }
.calc-number-dial:hover .calc-number-dial-indicator, .is-turning .calc-number-dial-indicator { stroke: var(--color-accent); filter: drop-shadow(0 0 3px color-mix(in srgb, var(--color-accent) 35%, transparent)); }
.is-turning .calc-number-dial { cursor: grabbing; }
.calc-number-dial-readout { position: absolute; z-index: 2; inset: 30% 24%; display: flex; flex-direction: column; gap: 3px; align-items: center; justify-content: center; pointer-events: none; }
.calc-number-dial-variable { display: block; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); font: 12px/1.4 var(--code-editor-font); }
.calc-number-dial-readout output { display: block; max-width: 100%; overflow: hidden; color: var(--text-primary); font: 500 30px/1.3 var(--code-editor-font); font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc-number-sensitivity { display: grid; gap: 6px; color: var(--text-primary); font-weight: 500; }
.calc-number-sensitivity input { box-sizing: border-box; width: 100%; height: 28px; margin: 0; appearance: none; background: transparent; cursor: pointer; }
.calc-number-sensitivity input:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--house-menu-item-radius); }
.calc-number-sensitivity input::-webkit-slider-runnable-track { height: 4px; border-radius: calc(3px*var(--ls-r,1)); background: color-mix(in srgb, var(--text-secondary) 22%, var(--house-menu-surface)); }
.calc-number-sensitivity input::-webkit-slider-thumb { appearance: none; width: 14px; height: 14px; margin-top: -5px; border: 2px solid var(--house-menu-surface); border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--text-primary) 16%, transparent), 0 1px 3px rgb(0 0 0 / .12); }
.calc-number-sensitivity input::-moz-range-track { height: 4px; border-radius: calc(3px*var(--ls-r,1)); background: color-mix(in srgb, var(--text-secondary) 22%, var(--house-menu-surface)); }
.calc-number-sensitivity input::-moz-range-thumb { box-sizing: border-box; width: 14px; height: 14px; border: 2px solid var(--house-menu-surface); border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--text-primary) 16%, transparent), 0 1px 3px rgb(0 0 0 / .12); }
.calc-number-sensitivity-labels { display: flex; justify-content: space-between; color: var(--text-secondary); font-weight: 400; }
.calc-number-tuner.calc-transformation-tuner { position: relative; z-index: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(132px, 100%), 1fr)); gap: 6px 12px; align-items: center; width: 100%; max-width: 100%; max-height: none; margin: auto; padding: 4px 0; overflow: visible; border: 0; background: transparent; box-shadow: none; font: inherit; animation: none; }
.calc-transformation-tuner[hidden] { display: none; }
.calc-transformation-tuner .calc-number-dial { grid-row: span 2; width: 160px; margin: 0 auto; }
.calc-transformation-tuner .calc-number-sensitivity { display: grid; gap: 4px; }
.calc-transformation-tuner .calc-number-sensitivity input { width: 100%; max-width: none; padding: 0; border: 0; background: transparent; }
.calc-transformation-tuner [data-tune-reset] { margin-top: 0; }
@keyframes calc-number-tune-reveal { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .calc-number-tuner { animation: none; } .calc-number-dial-indicator { transition: none; } }
@media (forced-colors: active) {
  .calc-number-dial::before, .calc-number-dial::after { background: Canvas; border: 1px solid ButtonText; box-shadow: none; }
  .calc-number-dial [data-tune-ticks], .calc-number-dial-indicator { stroke: ButtonText; }
  .calc-number-dial-flutes, .calc-number-dial-edge, .calc-number-dial-inner-edge, .calc-number-dial-inlay { display: none; }
  .calc-number-sensitivity input::-webkit-slider-runnable-track { background: Canvas; border: 1px solid ButtonText; }
  .calc-number-sensitivity input::-moz-range-track { background: Canvas; border: 1px solid ButtonText; }
}