/* EDU.Kit · knoby, čipy, rack (core/edu-knob.js). Jen logické vlastnosti (RTL); knob se nezrcadlí. Čitelnost před efektem:
   žádné animace mimo krátký přechod barvy při hnutí prvkem, žádné filtry přes plochu, stín jen na prvku, který uživatel právě drží. */

/* čipy a skupiny čipů */
.gk-grp{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px;padding:3px 6px;border:1px solid var(--line,rgba(110,160,230,.35));border-radius:999px;background:rgba(7,12,24,.6)}
.gk-grp>.gk-cap{font-size:11px;color:var(--mute,#8ea7c4);padding-inline:4px 2px;white-space:nowrap}
.gk-chip{font:inherit;font-size:12.5px;line-height:1.2;padding:4px 10px;border-radius:999px;border:1px solid var(--line,rgba(110,160,230,.35));background:rgba(11,19,32,.9);color:var(--mute,#8ea7c4);cursor:pointer;white-space:nowrap}
.gk-chip:hover{color:var(--ink,#e6f1ff);border-color:var(--mute,#8ea7c4)}
.gk-chip.on{color:#fff;font-weight:700;border-color:var(--grp,#ffb454);background:color-mix(in srgb,var(--grp,#ffb454) 26%,#0b1320)}
.gk-chip.on::before{content:"✓ ";opacity:.85}
.gk-chip:focus-visible,.gk-kd:focus-visible{outline:2px solid #fff;outline-offset:2px}
.gk-grp [role=radio].on::before{content:none}

/* knoby */
.gk-knob{display:inline-flex;flex-direction:column;align-items:center;gap:1px;inline-size:calc(var(--ks,44px) + 22px);text-align:center;user-select:none;-webkit-user-select:none}
.gk-kd{inline-size:var(--ks,56px);block-size:var(--ks,56px);border-radius:50%;cursor:ns-resize;touch-action:none;outline:none}
.gk-kd svg{inline-size:100%;block-size:100%;display:block;overflow:visible}
.gk-trk,.gk-arc{fill:none;stroke-width:5;stroke-linecap:round}
.gk-trk{stroke:rgba(120,160,230,.22)}
.gk-arc{stroke:var(--kc,#ffb454);transition:stroke .12s}
.gk-cap{fill:#0b1424;stroke:rgba(150,185,235,.45);stroke-width:1.5}
.gk-ptr{stroke:#fff;stroke-width:3;stroke-linecap:round}
.gk-kd:hover .gk-cap{stroke:rgba(190,215,255,.8)}
.gk-knob.on .gk-arc{stroke:#fff}
.gk-knob.on .gk-kd{box-shadow:0 0 0 3px color-mix(in srgb,var(--kc,#ffb454) 35%,transparent)}
.gk-knob.off{opacity:.38}.gk-knob.off .gk-kd{cursor:default}.gk-knob.off .gk-kv{cursor:default}
.gk-kv{font:600 12.5px/1.2 ui-monospace,Menlo,Consolas,monospace;color:var(--ink,#e6f1ff);min-block-size:1.2em;unicode-bidi:isolate;cursor:text;border-radius:4px;padding-inline:3px;max-inline-size:100%;white-space:nowrap}
.gk-knob:not(.off) .gk-kv:hover{background:rgba(120,160,230,.16)}
.gk-ki{inline-size:calc(var(--ks,56px) + 22px);font:600 12.5px/1.2 ui-monospace,Menlo,Consolas,monospace;color:#fff;background:#0a1016;border:1px solid var(--kc,#ffb454);border-radius:4px;padding:0 3px;text-align:center;margin:0;box-sizing:border-box;direction:ltr}
.gk-kl{font-size:11.5px;line-height:1.2;color:var(--mute,#8ea7c4);max-inline-size:100%;overflow-wrap:anywhere}

/* rack = skupina prvků v rámečku (modul syntezátoru, kanál mixéru…) */
.gk-rack{display:flex;flex-wrap:wrap;gap:6px 2px;align-items:flex-start;padding:8px 6px;margin:0 0 8px;border:1px solid var(--line,rgba(110,160,230,.35));border-radius:12px;background:rgba(8,14,28,.72)}
.gk-rack>h4{flex:1 0 100%;margin:0 0 2px;padding-inline:4px;font-size:12px;font-weight:700;color:var(--grp,#ffb454);letter-spacing:.03em}
.gk-rack>.gk-grp,.gk-rack>.gk-chip{margin-inline:2px}
.gk-rack>.gk-sub{flex:1 0 100%;padding-inline:4px;font-size:11px;color:var(--mute,#8ea7c4);border-block-start:1px solid rgba(110,160,230,.16);margin-block-start:2px;padding-block-start:4px}
.gk-row{flex:1 0 100%;display:flex;flex-wrap:wrap;gap:6px 2px;align-items:flex-start}
.gk-prow{flex:1 0 100%;display:flex;flex-wrap:wrap;gap:4px 6px;padding-inline:2px}

/* knob v panelu místo posuvníku (Pn.slider v režimu „knob“): vodorovný řádek [číselník | popisek nad hodnotou], rozložení se zrcadlí s RTL */
.ctl-knob{margin:6px 0}
.gk-knob.gk-krow{display:grid;grid-template-columns:var(--ks,40px) minmax(0,1fr);grid-template-areas:"d l" "d v";column-gap:10px;row-gap:0;align-items:center;justify-items:start;inline-size:100%;text-align:start}
.gk-krow .gk-kd{grid-area:d}
.gk-krow .gk-kl{grid-area:l;display:block;font-size:12.5px;align-self:end}
.gk-krow .gk-kv{grid-area:v;align-self:start;font-size:13px}
.gk-krow .gk-ki{grid-area:v;align-self:start;inline-size:9em;text-align:start}