/* Riff DNA: a quiet side panel next to the player. One surface, text tabs, lists instead of tiles. */
.dna-lab {
    position: relative;
    margin: 22px 0 64px;
    padding: 20px 22px 24px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    background: #121214;
}

.dna-stage-nav {
    display: flex;
    gap: 20px;
    margin: 0 0 20px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.dna-stage {
    position: relative;
    flex: 0 0 auto;
    padding: 4px 0 12px;
    border: 0;
    color: rgba(255,255,255,.5);
    background: none;
    font: 500 14px/1.2 Inter, sans-serif;
    white-space: nowrap;
    cursor: pointer;
    transition: color .15s ease;
}
.dna-stage span { display: none; }
.dna-stage:hover { color: #fff; }
.dna-stage.active { color: #fff; }
.dna-stage.active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    border-radius: 2px;
    background: #9355e5;
}
.dna-stage:focus-visible { outline: 2px solid #9355e5; outline-offset: 2px; border-radius: 4px; }

.dna-kicker:empty { display: none; }

.dna-lab h2 {
    margin: 0 0 14px;
    color: #fff;
    font: 600 20px/1.25 Inter, sans-serif;
    letter-spacing: -.01em;
}

.dna-lab-head h2 { margin-bottom: 0; }

.dna-stage-content { padding-top: 14px; }
.dna-copy-lead { margin: 0; color: rgba(255,255,255,.88); font-size: 15px; line-height: 1.6; }
.dna-copy-note { margin: 10px 0 0; color: rgba(255,255,255,.5); font-size: 14px; line-height: 1.55; }

.dna-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    margin-top: 18px;
    padding: 0 16px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 10px;
    color: #fff;
    background: transparent;
    font: 500 14px/1 Inter, sans-serif;
    cursor: pointer;
}
.dna-action:hover { border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.04); }
.dna-action--text { min-height: 0; padding: 0; border: 0; color: rgba(255,255,255,.6); }
.dna-action--text:hover { color: #fff; background: none; }

/* Lists: parts and details */
.dna-list { margin: 0; padding: 0; list-style: none; }
.dna-list > li + li { border-top: 1px solid rgba(255,255,255,.06); }

.dna-part { display: grid; grid-template-columns: 28px minmax(0,1fr) auto; gap: 14px; align-items: start; padding: 14px 0; }
.dna-part-letter {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    color: rgba(255,255,255,.8);
    background: rgba(255,255,255,.08);
    font: 600 13px/1 Inter, sans-serif;
}
.dna-part strong, .dna-detail strong { display: block; color: #fff; font-size: 15px; font-weight: 600; line-height: 1.3; }
.dna-part p, .dna-detail small { display: block; margin: 4px 0 0; color: rgba(255,255,255,.55); font-size: 14px; line-height: 1.5; }
.dna-part-meta { display: block; margin-top: 4px; color: rgba(255,255,255,.35); font-size: 13px; }
.dna-part-loop {
    align-self: center;
    padding: 6px 12px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 8px;
    color: #fff;
    background: transparent;
    font: 500 13px/1 Inter, sans-serif;
    cursor: pointer;
}
.dna-part-loop:hover { border-color: rgba(255,255,255,.4); }

.dna-detail {
    display: block;
    width: 100%;
    padding: 14px 10px;
    margin: 0 -10px;
    box-sizing: content-box;
    border: 0;
    border-radius: 8px;
    color: inherit;
    background: none;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
    cursor: pointer;
}
.dna-detail:hover { background: rgba(255,255,255,.04); }
.dna-detail.active { background: rgba(147,85,229,.14); }
.dna-detail-type { display: block; margin-bottom: 4px; color: rgba(255,255,255,.4); font-size: 13px; }

/* Phrase: the riff as a sentence of roles */
.dna-phrase { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin: 0 0 14px; font-size: 22px; font-weight: 600; line-height: 1.2; }
.dna-role-word { color: var(--role); }
.dna-phrase-sep { color: rgba(255,255,255,.3); font-weight: 400; }
.dna-phrase-times { color: rgba(255,255,255,.45); font-size: 15px; font-weight: 500; }

/* Riff map: every shot on the real timeline, coloured by role */
.dna-map { margin: 4px 0 18px; }
.dna-map-track { position: relative; height: 34px; }
.dna-map-block {
    position: absolute;
    top: 0;
    bottom: 0;
    padding: 0 4px;
    border: 0;
    border-radius: 4px;
    background: color-mix(in srgb, var(--role) 78%, #000);
    color: #0b0b0f;
    font: 600 11px/34px Inter, sans-serif;
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
    opacity: .55;
    transition: opacity .15s ease;
}
.dna-map-block span { pointer-events: none; }
.dna-map-block:hover, .dna-map-block.active { opacity: 1; }
.dna-map-block--plain { background: rgba(255,255,255,.1); color: rgba(255,255,255,.6); }
.dna-map-playhead { position: absolute; top: -4px; bottom: -4px; width: 2px; left: 0; border-radius: 2px; background: #fff; pointer-events: none; }
.dna-map-atoms { position: relative; height: 16px; margin-top: 4px; }
.dna-map-atom {
    position: absolute;
    top: 3px;
    width: 10px;
    height: 10px;
    margin-left: -5px;
    padding: 0;
    border: 2px solid #121214;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
}
.dna-map-atom:hover, .dna-map-atom.now { transform: scale(1.35); }
.dna-map-axis { display: flex; justify-content: space-between; margin-top: 2px; color: rgba(255,255,255,.35); font-size: 12px; }

.dna-part-dot { width: 12px; height: 12px; margin-top: 4px; border-radius: 3px; background: var(--role); }
.dna-list--parts .dna-part { grid-template-columns: 12px minmax(0,1fr) auto; }
.dna-detail strong em { font-style: normal; font-weight: 400; color: rgba(255,255,255,.6); }
.dna-detail.now { background: rgba(255,255,255,.07); box-shadow: inset 2px 0 0 #fff; }

/* Live line: what is playing right now */
.dna-live { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 18px 0 0; padding: 10px 12px; border-radius: 8px; background: rgba(255,255,255,.05); color: rgba(255,255,255,.75); font-size: 14px; }
.dna-live[hidden] { display: none; }
.dna-live strong { color: #fff; }
.dna-live-role { color: var(--role); font-weight: 600; }
.dna-live-sep { color: rgba(255,255,255,.3); }

.dna-empty { margin: 0; color: rgba(255,255,255,.6); font-size: 14px; line-height: 1.55; }
.dna-empty strong { color: #fff; }
.dna-lab--empty .dna-stage-nav,
.dna-lab--empty #dnaStagePanel { display: none; }

/* Segment buttons: the part's role on the right, explained by the key above the grid */
/* Techniques of the part, between its name and its role: small and quiet, the role stays the accent. */
.segment-btn .dna-segment-atoms { display: inline-flex; gap: 4px; min-width: 0; overflow: hidden; flex-wrap: nowrap; }
.segment-btn .dna-segment-atom { flex: none; padding: 1px 6px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; color: rgba(255,255,255,.32); font-size: 10.5px; font-weight: 500; line-height: 14px; white-space: nowrap; }
html[data-theme='light'] .segment-btn .dna-segment-atom { border-color: rgba(20,20,30,.16); color: rgba(20,20,30,.4); }
/* Full names on wide screens; on a phone the button is short, so the tab shorthand (b, PM, ~) stands in. */
.segment-btn .dna-atom-short { display: none; }
@media (max-width: 600px) {
    .segment-btn .dna-atom-full { display: none; }
    .segment-btn .dna-atom-short { display: inline; }
    .segment-btn .dna-segment-atoms { gap: 3px; }
    .segment-btn .dna-segment-atom { padding: 0 5px; font-size: 10px; }
    /* Two columns of short buttons: the shorthand goes on a line under the part's name, the role stays on the right. */
    .practice-workspace .segment-btn:has(.dna-segment-atoms) { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 8px; row-gap: 3px; align-items: center; }
    .segment-btn:has(.dna-segment-atoms) .segment-icon { grid-column: 1; grid-row: 1 / span 2; }
    .segment-btn:has(.dna-segment-atoms) .segment-name { grid-column: 2; grid-row: 1; }
    .segment-btn:has(.dna-segment-atoms) .dna-segment-atoms { grid-column: 2; grid-row: 2; }
    .segment-btn:has(.dna-segment-atoms) .dna-segment-role { grid-column: 3; grid-row: 1 / span 2; margin-left: 0; padding-left: 0; }
}
.segment-btn .dna-segment-role { margin-left: auto; padding-left: 8px; color: var(--role); font-size: 12px; font-weight: 500; white-space: nowrap; }
.segment-btn .dna-segment-role--drill { color: rgba(255,255,255,.4); font-weight: 400; }
.segment-btn.active .dna-segment-role--drill { color: rgba(255,255,255,.6); }
.segment-key { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 0 0 10px; font-size: 12px; line-height: 22px; }
.segment-key[hidden] { display: none; }
.segment-key-title { display: inline-flex; align-items: center; color: rgba(255,255,255,.45); }
.segment-key-item { display: inline-flex; align-items: center; color: var(--role); font-weight: 500; }
.segment-key-guide { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; padding: 0; border: 0; background: none; color: rgba(255,255,255,.55); font: inherit; cursor: pointer; }
.segment-key-guide:hover { color: rgba(255,255,255,.9); }
.segment-key-guide:focus-visible { outline: 2px solid #cfff55; outline-offset: 2px; border-radius: 4px; }
html[data-theme='light'] .segment-key-guide { color: rgba(20,20,30,.55); }
html[data-theme='light'] .segment-key-guide:hover { color: rgba(20,20,30,.9); }

/* Technique guide: a popup on a wide screen, a sheet from the bottom on a phone. */
.dna-guide {
    position: fixed; inset: 0; margin: auto; height: fit-content;
    width: min(440px, calc(100vw - 32px)); max-height: min(640px, calc(100vh - 64px));
    padding: 0; border: 0; border-radius: 14px; overflow: hidden;
    background: #111216; color: rgba(255,255,255,.92);
    box-shadow: 0 20px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08);
    font: 400 14px/1.45 'Inter', system-ui, sans-serif;
}
.dna-guide[open] { display: flex; flex-direction: column; }
.dna-guide::backdrop { background: rgba(0,0,0,.55); }
.dna-guide-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 12px 8px 20px; }
.dna-guide-head h2 { margin: 0; font-size: 17px; font-weight: 600; }
.dna-guide-close { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 8px; background: none; color: rgba(255,255,255,.6); cursor: pointer; }
.dna-guide-close:hover { background: rgba(255,255,255,.06); color: #fff; }
.dna-guide-body { overflow-y: auto; padding: 0 20px 20px; overscroll-behavior: contain; }
.dna-guide-body h3 { margin: 8px 0 4px; color: rgba(255,255,255,.45); font-size: 12px; font-weight: 500; }
.dna-guide-list { margin: 0; padding: 0; list-style: none; }
.dna-guide-row { display: grid; grid-template-columns: 44px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid rgba(255,255,255,.06); }
.dna-guide-row:first-child { border-top: 0; }
.dna-guide-short { justify-self: start; align-self: start; min-width: 22px; padding: 1px 6px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; color: rgba(255,255,255,.7); font-size: 11.5px; font-weight: 500; line-height: 16px; text-align: center; white-space: nowrap; }
.dna-guide-text b { display: block; font-weight: 600; }
.dna-guide-text span { display: block; margin-top: 2px; color: rgba(255,255,255,.62); font-size: 13px; }
.dna-guide-all { margin-top: 14px; }
.dna-guide-all summary { display: flex; align-items: center; gap: 6px; padding: 8px 0; color: rgba(255,255,255,.6); font-size: 13px; cursor: pointer; list-style: none; }
.dna-guide-all summary::-webkit-details-marker { display: none; }
.dna-guide-all summary::after { content: ''; width: 6px; height: 6px; margin-top: -3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .15s; }
.dna-guide-all[open] summary::after { margin-top: 3px; transform: rotate(-135deg); }
.dna-guide-all[open] summary { margin-bottom: 2px; }
html[data-theme='light'] .dna-guide { background: #fff; color: #15151c; box-shadow: 0 20px 60px rgba(0,0,0,.2), 0 0 0 1px rgba(20,20,30,.08); }
html[data-theme='light'] .dna-guide-close { color: rgba(20,20,30,.6); }
html[data-theme='light'] .dna-guide-body h3,
html[data-theme='light'] .dna-guide-all summary { color: rgba(20,20,30,.5); }
html[data-theme='light'] .dna-guide-row { border-color: rgba(20,20,30,.08); }
html[data-theme='light'] .dna-guide-short { border-color: rgba(20,20,30,.2); color: rgba(20,20,30,.7); }
html[data-theme='light'] .dna-guide-text span { color: rgba(20,20,30,.62); }
@media (max-width: 600px) {
    .dna-guide {
        width: 100vw; max-width: 100vw; max-height: 85vh; margin: auto 0 0; border-radius: 16px 16px 0 0;
        padding-bottom: env(safe-area-inset-bottom);
        animation: dna-sheet-in .22s ease-out;
    }
    .dna-guide-head::before { content: ''; position: absolute; top: 6px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: rgba(255,255,255,.2); }
    .dna-guide-head { position: relative; padding-top: 18px; }
}
@keyframes dna-sheet-in { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .dna-guide { animation: none; } }

/* "i" next to terms inside the panel */
.dna-lab-head h2 .rk-hint { margin-left: 4px; }
.dna-phrase .rk-hint { margin-left: 1px; }
.dna-part strong .rk-hint { margin-left: 2px; }
.dna-atom-item { position: relative; }
.dna-atom-item > .rk-hint { position: absolute; top: 10px; right: 6px; margin: 0; }
.dna-atom-item > .dna-atom-card { width: calc(100% - 26px); padding-right: 36px; }

html[data-theme='light'] .segment-key-title,
html[data-theme='light'] .segment-btn .dna-segment-role--drill { color: rgba(20,20,30,.5); }

/* Rule */
.dna-rule { margin: 0 0 12px; color: #fff; font-size: 18px; font-weight: 600; line-height: 1.4; }
.dna-tests { display: grid; gap: 12px; margin-top: 16px; }
.dna-test span { display: block; margin-bottom: 4px; color: rgba(255,255,255,.45); font-size: 13px; }
.dna-test ul { margin: 0; padding-left: 18px; color: rgba(255,255,255,.8); font-size: 14px; line-height: 1.55; }
.dna-test p { margin: 0; color: rgba(255,255,255,.8); font-size: 14px; line-height: 1.55; }

/* Why it works */
.dna-formula { margin: 0 0 12px; color: #fff; font-size: 17px; font-weight: 600; line-height: 1.4; }
.dna-law { margin: 0; color: rgba(255,255,255,.82); font-size: 15px; line-height: 1.6; }
.dna-insight { margin: 12px 0 0; color: rgba(255,255,255,.5); font-size: 14px; line-height: 1.55; }

/* Your turn */
.dna-mutation-title { display: block; color: #fff; font-size: 16px; font-weight: 600; line-height: 1.35; }
.dna-mutation-steps { margin: 14px 0 0; padding-left: 20px; color: rgba(255,255,255,.75); font-size: 14px; line-height: 1.55; }
.dna-mutation-steps li + li { margin-top: 8px; }
.dna-mutation-steps li::marker { color: rgba(255,255,255,.4); }


/* Tabs are the third synchronized view: a full-width band, not a full-screen replacement. */
.practice-page .tabs-overlay {
    top: auto;
    bottom: 0;
    height: auto;
    padding: 8px 12px;
    align-items: center;
    background: rgba(4,5,7,.9);
    border-top: 1px solid rgba(255,255,255,.12);
    --tab-max-h: 150px;
}
.practice-page .tabs-frame {
    position: relative;
    overflow: hidden;
    width: min(100%, calc(var(--tab-max-h) * var(--tab-ratio, 3)));
    border-radius: 8px;
}
.practice-page .tabs-image { position: absolute; display: block; max-width: none; height: auto; border-radius: 0; box-shadow: none; }
.practice-page .tabs-overlay:not(.hidden) ~ .video-element,
.practice-page .split-mode .tabs-overlay:not(.hidden) ~ .video-element.right-hand { opacity: 1 !important; }
/* Portrait phones: the band sits under the video at full width so the hands stay visible. */
.practice-page .tabs-overlay.below-video {
    position: static;
    margin-top: 8px;
    padding: 0;
    background: none;
    border-top: 0;
    --tab-max-h: 40vh;
}
.practice-page .tabs-overlay.below-video.hidden { display: none; }

/* Tabs and their panel stay adjacent at every breakpoint. */
.practice-workspace .dna-lab { margin: 0; min-width: 0; }

@media (max-width: 520px) {
    .dna-lab { padding: 16px 16px 20px; }
    .dna-stage-nav { gap: 14px; overflow-x: auto; scrollbar-width: none; }
    .dna-stage-nav::-webkit-scrollbar { display: none; }
    .dna-stage { font-size: 13px; }
}

/* Live tab (alphaTab): replaces the picture when the riff has a tab file. */
.practice-page .tab-live { display: none; position: relative; width: 100%; overflow: hidden; min-height: 72px; --tab-live-max-h: 150px; }
.practice-page .tabs-overlay.below-video .tab-live { --tab-live-max-h: 190px; }
.practice-page .tabs-overlay.is-live .tab-live { display: block; }
.practice-page .tabs-overlay.is-live .tabs-frame { display: none; }
.practice-page .tabs-overlay.is-live.is-idle { visibility: hidden; }
.practice-page .tabs-overlay.below-video.is-live { padding: 8px 0; background: rgba(4,5,7,.9); border-radius: 12px; }
.practice-page .tab-live-score { position: relative; }
.practice-page .tab-live-score { will-change: transform; transition: transform .28s ease; }
.practice-page .tab-live-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; color: rgba(244,244,246,0.6); pointer-events: none; }
.practice-page .tab-live.is-ready .tab-live-loading { display: none; }
.practice-page .tab-live-score .at-surface { background: transparent !important; overflow: visible !important; }
/* alphaTab draws the bars at the top of the strip and its "rendered by alphaTab" line in a chunk below them. */
.practice-page .tab-live-score .at-surface > div:not([style*="top: 0px"]) { display: none !important; }
/* Cursor like a playback marker in a tab player: a soft band over the beat that sounds, one even outline all round. */
.practice-page .tab-live-cursor {
    position: absolute; top: 4px; bottom: 4px; left: -7px; width: 14px; box-sizing: border-box;
    background: rgba(184,240,90,.18); border: 1.5px solid rgba(184,240,90,.7);
    border-radius: 5px; opacity: 0; pointer-events: none;
}
.practice-page .tab-live.is-ready .tab-live-cursor { opacity: 1; }