/* GrooveSteps teaching pages (grooves / rudiments / lessons / hubs).
   Built on the shared Backbeat Room tokens in /assets/gs.css; the short
   names below are kept because learn.css and page markup use them. */
:root{--bg:#100e0b;--bg2:#17140f;--card:#1f1a14;--line:#3a3228;--txt:#f4ede1;--mut:#cdc2b0;--mut2:#a39684;
  --pink:#e9b44c;--cyan:#f5d08a;--green:#8fd694;--teal:#4cc9b8;--hit:#ff6b3d}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--txt);font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:var(--cyan);text-decoration:underline;text-decoration-color:rgba(245,208,138,.35);text-underline-offset:3px}
a:hover{text-decoration-color:currentColor}
.jds-wrap{max-width:900px;margin:0 auto;padding:0 20px}

/* main column */
.jds-main{padding:36px 20px 72px}
.jds-main h1{font-family:"Bricolage Grotesque","DM Sans",system-ui,sans-serif;font-weight:800;font-size:clamp(2.2rem,6vw,3.6rem);line-height:1.02;letter-spacing:-.03em;margin:.15em 0 .3em;text-wrap:balance}
.jds-main h2{font-family:"Bricolage Grotesque","DM Sans",system-ui,sans-serif;font-weight:750;font-size:clamp(1.35rem,3vw,1.75rem);line-height:1.15;letter-spacing:-.02em;margin:2em 0 .5em;color:var(--txt)}
.jds-main h3{font-family:"Bricolage Grotesque","DM Sans",system-ui,sans-serif;font-weight:700;letter-spacing:-.01em}
.jds-main p,.jds-main li{color:var(--mut)}
.jds-main strong,.jds-main b{color:var(--txt)}
.jds-eyebrow{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;text-transform:uppercase;letter-spacing:.16em;font-size:12px;font-weight:600;color:var(--pink);margin:0}
.jds-lede{font-size:clamp(1.05rem,2vw,1.2rem);line-height:1.6;color:var(--mut);margin:.4em 0 1.6em;max-width:62ch}
.jds-hint{font-size:14px;color:var(--mut2);margin:.8em 0 0}

/* breadcrumbs */
.jds-crumb{margin:0 0 14px}
.jds-crumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:0;font-size:13px;color:var(--mut2)}
.jds-crumb li:not(:last-child)::after{content:"/";margin-left:7px;color:#5a4f40}
.jds-crumb a{color:var(--mut2);text-decoration:none}
.jds-crumb a:hover{color:var(--txt)}
.jds-crumb [aria-current]{color:var(--mut)}

/* cards: each one reads like a pad on a sequencer row */
.jds-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;margin:16px 0 10px}
.jds-card{position:relative;display:flex;flex-direction:column;gap:4px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 16px 15px 18px;
  text-decoration:none;transition:border-color .15s,transform .15s cubic-bezier(.2,.8,.2,1),background-color .15s;overflow:hidden}
.jds-card::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;background:#4a3f31;transition:background-color .15s}
.jds-card:hover{border-color:rgba(233,180,76,.55);transform:translateY(-2px);text-decoration:none}
.jds-card:hover::before{background:var(--hit)}
.jds-card b{color:var(--txt);font-size:16px;font-weight:700}
.jds-card span{color:var(--mut2);font-size:13px}

/* call to action */
.jds-cta{margin:1.8em 0}
.jds-cta a{display:inline-flex;align-items:center;gap:8px;background:var(--pink);color:#16110a;font-weight:700;padding:14px 24px;border-radius:999px;text-decoration:none;
  box-shadow:0 14px 30px -14px rgba(233,180,76,.7);transition:background-color .15s,transform .15s}
.jds-cta a:hover{background:var(--cyan);transform:translateY(-1px);text-decoration:none}

/* sticking display: right hand brass, left hand teal */
.jds-sticking{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.jds-sticking span{width:36px;height:36px;display:grid;place-items:center;border-radius:9px;font-weight:800;font-size:15px;font-family:"JetBrains Mono",ui-monospace,monospace}
.jds-sticking .r{background:rgba(233,180,76,.14);color:var(--pink);border:1px solid rgba(233,180,76,.45)}
.jds-sticking .l{background:rgba(76,201,184,.12);color:var(--teal);border:1px solid rgba(76,201,184,.45)}
.jds-mono{font-family:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;color:var(--mut);letter-spacing:.16em}

/* lesson steps */
.jds-steps{list-style:none;counter-reset:step;padding:0;margin:1.6em 0}
.jds-step{counter-increment:step;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px 22px 22px;margin:0 0 20px;position:relative}
.jds-step::before{content:counter(step);position:absolute;top:-13px;left:20px;width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:var(--pink);color:#16110a;font:800 14px/1 "JetBrains Mono",ui-monospace,monospace;box-shadow:0 0 0 4px var(--bg)}
.jds-step p{margin:.4em 0 1em;color:var(--txt)}

/* player spacing inside pages */
.jds-main .dps-embed{margin:18px 0}

/* embed box */
.jds-embedbox{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:10px 18px;margin:1.6em 0}
.jds-embedbox summary{cursor:pointer;font-weight:700;color:var(--cyan);padding:6px 0;list-style:none}
.jds-embedbox summary::-webkit-details-marker{display:none}
.jds-embedbox[open] summary{margin-bottom:6px}
.jds-embedcode{width:100%;font-family:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:12px;line-height:1.5;
  background:#0b0a08;color:var(--mut);border:1px solid var(--line);border-radius:10px;padding:10px 12px;resize:vertical;margin:6px 0}
.jds-copybtn{background:var(--card);color:var(--txt);border:1px solid #7b6b55;border-radius:999px;padding:9px 18px;font-weight:700;cursor:pointer;margin-bottom:8px}
.jds-copybtn:hover{border-color:var(--pink)}

/* legacy footer (kept for any page still carrying it) */
.jds-f{border-top:1px solid var(--line);background:var(--bg2);color:var(--mut2);padding:28px 0;margin-top:40px;font-size:14px}
.jds-f p{margin:.3em 0}.jds-credit a{color:var(--mut)}

/* Reading companion for the playable exercises. */
.gs-practice-notes{margin-top:48px;padding-top:24px;border-top:1px solid var(--line)}
.gs-practice-notes p,.gs-practice-notes li{max-width:72ch}
.gs-count-table{overflow-x:auto;border:1px solid var(--line);border-radius:12px;margin:20px 0}
.gs-count-table table{border-collapse:collapse;width:100%;min-width:280px;font-size:.94rem}
.gs-count-table caption{text-align:left;padding:14px 16px;color:var(--txt);font-weight:700}
.gs-count-table th,.gs-count-table td{padding:12px 16px;border-top:1px solid var(--line);text-align:left;vertical-align:top}
.gs-count-table thead{color:var(--pink)}.gs-count-table tbody th{width:24%;color:var(--mut)}
.dps-message:empty{display:none}.dps-message{font-size:14px;color:#f5d08a}