/* Build 191: Music Theory lesson tools (dark, readable card under the analysis). */
.ctsl{margin:18px 0 8px;padding:16px 18px 18px;border-radius:14px;background:#151c2c;color:#f2f4f8;border:1px solid #2c3a58;font-size:15px;line-height:1.45;box-shadow:0 4px 18px rgba(0,0,0,.25)}
.ctsl h3{margin:0;font-size:18px;color:#fff;letter-spacing:.2px}
.ctsl-top{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:10px}
.ctsl-lede{margin:0;color:#c6d0e2;font-size:14px}
.ctsl-row,.ctsl-row2{display:flex;align-items:flex-start;gap:10px;margin:8px 0}
.ctsl-gl,.ctsl-gl2{flex:0 0 118px;padding-top:7px;font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:#9fb3d6}
.ctsl-gl2{flex-basis:84px}
.ctsl-chips{display:flex;flex-wrap:wrap;gap:6px}
.ctsl-b{font:inherit;font-size:14px;color:#f2f4f8;background:#22304d;border:1px solid #4b6590;border-radius:8px;padding:6px 11px;cursor:pointer;transition:background .12s,border-color .12s,transform .06s}
.ctsl-b:hover{background:#2c3e63;border-color:#8fb8ff}
.ctsl-b:active{transform:translateY(1px)}
.ctsl-b:focus-visible{outline:2px solid #ffd76a;outline-offset:2px}
.ctsl-b.on,.ctsl-b[aria-pressed="true"]{background:#3a3217;border-color:#ffd76a;color:#fff3c4;box-shadow:0 0 0 1px #ffd76a inset}
.ctsl-b.ctsl-primary{background:#1f4a86;border-color:#8fb8ff;font-weight:600}
.ctsl-b.ctsl-primary:hover{background:#2a5ea8}
.ctsl-b small{display:block;font-size:11.5px;color:#c6d0e2}
.ctsl-b.ctsl-small{font-size:12.5px;padding:3px 8px}
.ctsl-b.ctsl-linkbtn{background:none;border:none;padding:2px 0;color:#9cc4ff;text-decoration:underline;text-underline-offset:3px;font-weight:600}
.ctsl-b.ctsl-linkbtn.on{color:#ffd76a;box-shadow:none;background:none}
.ctsl-say{margin:14px 0 10px;padding:11px 14px;border-radius:10px;background:#0f1522;border-left:4px solid #8fb8ff;min-height:22px;color:#f2f4f8}
.ctsl-say.flash{animation:ctslflash .6s ease-out}
@keyframes ctslflash{from{background:#243556}to{background:#0f1522}}
.ctsl-say b{color:#fff}
.ctsl-panel{display:flex;flex-direction:column;gap:8px}
.ctsl-walk{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ctsl-pos{color:#c6d0e2;font-size:13px;margin-left:6px}
.ctsl-list{display:flex;flex-direction:column;gap:4px}
.ctsl-list .ctsl-b{text-align:left}
.ctsl-h{margin:8px 0 2px;font-size:13px;text-transform:uppercase;letter-spacing:.6px;color:#9fb3d6}
.ctsl-p{margin:2px 0;color:#e3e8f2}
.ctsl-p.ok{color:#9fe0b0}
.ctsl-note{margin:2px 0;font-size:13.5px;color:#c6d0e2}
.ctsl-dim{color:#aab6cc;font-weight:400}
.ctsl-howto{margin:0;padding-left:20px;color:#e3e8f2}
.ctsl-howto li{margin:3px 0}
/* cautions are amber, never red */
.ctsl-caution{color:#ffc15a;font-weight:700}
.ctsl-b.ctsl-cautionitem{border-color:#c98a1b;background:#2e2412;color:#ffe3b0}
.ctsl-b.ctsl-cautionitem:hover{background:#3d2f14;border-color:#ffc15a}
.ctsl-b.ctsl-cautionitem.on{border-color:#ffc15a;box-shadow:0 0 0 1px #ffc15a inset}
.ctsl-cmark{display:inline-block;width:18px;height:18px;line-height:18px;text-align:center;border-radius:50%;background:#ffb020;color:#1b1406;font-weight:800;font-size:12px;margin-right:6px}
.ctsl-b.ctsl-kept{border-color:#5aa874;background:#16291d;color:#c9f0d4}
.ctsl-clash{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.ctsl-kinds{display:flex;flex-wrap:wrap;gap:6px}
.ctsl-kind b{font-size:15px;margin-right:3px}
.ctsl-kind.k-contrary{border-color:#5aa874}.ctsl-kind.k-oblique{border-color:#6fa8ff}.ctsl-kind.k-similar{border-color:#b08cff}.ctsl-kind.k-parallel{border-color:#c98a1b}
.ctsl-strip{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.ctsl-rootbtn{font-weight:700;min-width:44px}
.ctsl-arrowbtn{background:#1a2438;padding:3px 8px;text-align:center}
.ctsl-arrowbtn.fifth{border-color:#5aa874}
.ctsl-bars{display:flex;flex-direction:column;gap:4px}
.ctsl-b.ctsl-barrow{display:grid;grid-template-columns:120px 1fr auto;gap:10px;align-items:center;text-align:left}
.ctsl-bar{height:10px;background:#0f1522;border-radius:5px;overflow:hidden}
.ctsl-bar i{display:block;height:100%;background:#8fb8ff}
.ctsl-bnum{font-size:13px;color:#c6d0e2}
.ctsl-notechips .ctsl-b{padding:4px 8px;font-size:13px}
.ctsl-pcs .ctsl-b{min-width:42px;color:#c6d0e2}
.ctsl-pcs .ctsl-b.main{color:#fff;font-weight:700}
.ctsl-barbtn{min-width:34px;padding:4px 8px}
.ctsl-switch b{color:inherit}
.ctsl-table{border-collapse:collapse;width:100%;font-size:14px}
.ctsl-table th,.ctsl-table td{border-bottom:1px solid #2c3a58;padding:6px 8px;text-align:left;vertical-align:top}
.ctsl-table thead th{color:#9fb3d6;font-size:13px}
.ctsl-table td.amber{color:#ffc15a;font-weight:700}
.ctsl-feel th{width:110px}
.ctsl-builder{display:flex;flex-wrap:wrap;gap:14px}
.ctsl-builder label{color:#c6d0e2;font-size:14px}
.ctsl-builder select{margin-left:6px;font:inherit;font-size:14px;color:#f2f4f8;background:#22304d;border:1px solid #4b6590;border-radius:8px;padding:5px 8px}
.ctsl-layer.on{background:#1e3a2a;border-color:#5aa874;color:#dff5e6;box-shadow:0 0 0 1px #5aa874 inset}
.ctsl-jump{margin-left:10px;font:inherit;font-size:13px;color:#fff;background:#1f4a86;border:1px solid #8fb8ff;border-radius:7px;padding:3px 9px;cursor:pointer}
.ctsl-jump:hover{background:#2a5ea8}
/* drawings in the score */
.ctsl-ov{pointer-events:none}
.ctsl-contour{fill:none;stroke:#2f6db3;stroke-width:2.5;stroke-linejoin:round;stroke-dasharray:6 4;opacity:.9}
.ctsl-contour-dot{fill:#2f6db3}
.ctsl-arrow{fill:none;stroke:#2f6db3;stroke-width:2.5}
.ctsl-arrowhead{fill:#2f6db3}
@media print{.ctsl,.ctsl-jump{display:none!important}}
@media (max-width:700px){.ctsl-row,.ctsl-row2{flex-direction:column;gap:4px}.ctsl-gl,.ctsl-gl2{flex:none;padding:0}}
.ctsl-tip{margin:0 0 0 auto;padding:4px 12px;border-radius:999px;background:#2a2410;border:1px solid #ffd76a;color:#fff3c4;font-size:13.5px;font-style:italic}
/* explanation bar that follows the student up to the score */
.ctsl-float{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:70;display:flex;gap:12px;align-items:center;max-width:min(920px,calc(100vw - 28px));padding:10px 12px 10px 16px;border-radius:12px;background:#151c2c;color:#f2f4f8;border:1px solid #8fb8ff;box-shadow:0 6px 22px rgba(0,0,0,.35);font-size:14.5px;line-height:1.4}
.ctsl-float b{color:#fff}
.ctsl-float .ctsl-caution{color:#ffc15a}
.ctsl-float-text{flex:1;max-height:4.4em;overflow:auto}
.ctsl-float .ctsl-b{flex:none}
@media print{.ctsl-float{display:none!important}}

/* The app never asks for a name: no Composer field in the print bar. */
.printbar label:has(> #pcomposer) { display: none !important; }
.ctsl-thirds{font-size:12.5px;color:#e8d9a8;margin-top:8px}
.ctsl-thirdsbtn{margin-top:4px}

@media print{#ctsl-float{display:none!important}}
body[data-view="print"] #ctsl-float{display:none!important}

/* Reduce motion: buttons do not nudge; Soni's tip still flashes, as a soft glow (default unchanged). */
@keyframes ctslglow { 0% { opacity: .5; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ctsl-b { transition: none !important; transform: none !important; } .ctsl-say.flash { animation-name: ctslglow !important; } [class*="ctsl"] { scroll-behavior: auto !important; } }
.ctsl-tip.ct-tip{position:relative;padding-right:30px}.ctsl-tip[hidden]{display:none!important}.ctsl-tip .ct-tip-x{color:#fff3c4!important;font-style:normal}.ctsl-tip .ct-tip-x:focus-visible{outline-color:#ffd76a!important}

/* 191: Lesson path card (55 lessons) above the Lesson tools */
.ctpath{margin:14px 0 0;padding:14px 16px 12px;background:#fffdf7;border:1.5px solid #1c2230;border-radius:14px;color:#1c2230}
.ctpath-top{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.ctpath h3{margin:0;font-size:17px;font-weight:800;color:#1c2230}
.ctpath-lede{margin:0;font-size:13px;color:#3b4150}
.ctpath-levels{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 8px}
.ctpath-b{font:700 13px/1.25 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:#1c2230;background:#fff;border:1.2px solid #1c2230;border-radius:999px;padding:5px 11px;cursor:pointer;text-align:left}
.ctpath-b:hover{background:#fff3c4}.ctpath-b:focus-visible{outline:3px solid #0b4a9e;outline-offset:2px}
.ctpath-b[disabled]{opacity:.45;cursor:default}
.ctpath-lv.on{background:#ffd76a;border-color:#1c2230}
.ctpath-range{font-weight:600;color:#3b4150;margin-left:3px}
.ctpath-pick{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 8px}
.ctpath-pick label{font-weight:800;font-size:13px}
.ctpath-pick select{min-width:0;max-width:100%;flex:1 1 220px;font:600 13px/1.3 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;padding:5px 8px;border:1.2px solid #1c2230;border-radius:8px;background:#fff;color:#1c2230}
.ctpath-card{border-top:1px solid #d8d2c2;padding-top:8px}
.ctpath-card h4{margin:0 0 4px;font-size:16px;font-weight:800;color:#1c2230}
.ctpath-card h4:focus{outline:none}.ctpath-card h4:focus-visible{outline:2px solid #0b4a9e;outline-offset:2px}
.ctpath-first{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;background:#1c2230;color:#fff;font-size:11px;font-weight:800;vertical-align:middle}
.ctpath-lvl{margin:0 0 6px;font-size:12.5px;color:#3b4150;font-weight:600}
.ctpath-card p{margin:0 0 7px;font-size:14px;line-height:1.45;color:#1c2230}
.ctpath-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.ctpath-ex{background:#1c2230;color:#fff}.ctpath-ex:hover{background:#2c3550}
.ctpath-tool{border-style:dashed;border-color:#b8892a}