.chords-main[hidden],.chord-removal[hidden]{display:none}
.chords-main{padding:18px clamp(14px,3vw,42px) 32px;min-width:0;-webkit-text-size-adjust:100%;text-size-adjust:100%}
.chords-shell{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;min-width:0;max-width:100%}
.chords-shell>*,#chordCards,[data-chord-result]{min-width:0;max-width:100%}
.chords-title h1{font:700 clamp(1.4rem,3vw,2rem) Georgia,serif;color:var(--indigo);margin:0 0 8px}
.chords-title p{font-size:1rem;line-height:1.5;color:var(--muted);margin:0}
.chord-actions{display:flex;flex-wrap:wrap;gap:10px}
.chords-shell button,.chords-shell select,.chords-shell input{font:inherit;min-height:44px;border:1px solid var(--line);border-radius:11px;color:var(--indigo);background:#fff;padding:9px 12px}
.chords-shell button{cursor:pointer;font-weight:750}
.chords-shell button:disabled{opacity:.45;cursor:default}
.chords-shell button:focus-visible,.chords-shell input:focus-visible,.chords-shell select:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.chord-actions button{flex:1 1 200px}
#addChord{background:var(--saffron);border-color:var(--saffron)}
.chord-card{width:100%;min-width:0;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff;box-shadow:var(--shadow);margin-bottom:14px}
.chord-card-heading{display:flex;align-items:center;gap:12px;padding:14px 18px;background:var(--indigo);color:white}
.chord-card-heading>span{display:grid;place-items:center;min-width:36px;height:36px;border-radius:9px;background:#ffffff24;font-weight:850}
.chord-card-heading h2{font-size:1.25rem;margin:0;color:white}
.chord-input-area{padding:12px 14px;background:#f6f6fa}
.chord-input-mode{display:flex;gap:6px;margin-bottom:10px}
.chord-input-mode button{flex:1}
.chord-input-mode button.active{background:var(--indigo);color:#fff;border-color:var(--indigo)}
.chord-input-row{display:grid;grid-template-columns:minmax(105px,160px) minmax(0,1fr);gap:10px}
.chord-input-row label{display:grid;gap:6px;color:var(--muted);font-size:.875rem;font-weight:750;min-width:0}
.chord-input-row select,.chord-input-row input{width:100%;max-width:100%;min-width:0;font-size:1.125rem}
.chord-input-row input{font-weight:750;line-height:1.4;padding:8px 12px}
.chord-composition{padding:10px 14px;border-block:1px solid var(--line);font-size:1.125rem;line-height:1.4}
.chord-composition p{margin:0 0 4px;overflow-wrap:anywhere}
.chord-composition p:last-child{margin-bottom:0}
.chord-composition p>span{color:var(--muted)}
.chord-composition small{display:block;font-size:.875rem;color:var(--muted);line-height:1.5}
.chord-matches{width:100%;min-width:0;padding:12px 14px;scroll-margin-top:20px}
.chord-matches h3{font-size:1.125rem;margin:0 0 14px;color:var(--indigo)}
.chord-matches h3 small{font-size:.875rem;font-weight:500;color:var(--muted)}
.chord-match-list{display:flex;gap:10px;min-width:0;width:100%;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:2px;scrollbar-width:thin;scrollbar-color:var(--teal) #eeeef4;padding:2px 2px 10px}
.chord-match-list:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:13px}
.chord-raga-match{display:flex;flex-direction:column;flex:0 0 min(94%,620px);width:min(94%,620px);max-width:100%;border:1px solid var(--line);border-radius:13px;padding:0;min-width:0;overflow:hidden;scroll-snap-align:start;scroll-snap-stop:always}
.chord-raga-match button{min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere}
.chord-raga-info{margin:0;display:grid;gap:12px}
.chord-raga-info dt{color:var(--muted);font-size:.875rem;margin-bottom:3px}
.chord-raga-info dd{color:var(--indigo);font-size:1rem;line-height:1.5;margin:0;overflow-wrap:anywhere}
.chord-reference-row{display:block;margin-top:6px}
.chord-reference-row>small{display:block;color:var(--muted);font-size:.875rem;font-weight:400}
.chord-reference-row>span{display:block}
.chord-raga-match [data-match-viewer]{min-width:0}
.chord-match-actions{margin-top:auto;padding:14px}
.chord-scale-differences{display:block;font-size:.875rem;margin-top:4px;color:var(--muted)}
.chord-pagination{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-top:14px;font-size:.875rem}
.chord-message,.chord-empty{padding:18px;margin:0;color:var(--muted);font-size:1rem;line-height:1.5}
.chord-error{color:#aa3030}
.chord-empty{border:1px dashed var(--line);border-radius:13px;background:#fff}
.chord-removal{padding:14px;border:1px solid var(--line);border-radius:13px;background:#fff}
.chord-removal>label{display:block;font-weight:750;font-size:1rem;margin-bottom:8px}
.chord-removal>div{display:flex;gap:8px;flex-wrap:wrap}
.chord-removal select{flex:1;min-width:160px}
#confirmRemoveChord{color:#a62f2f;border-color:#d6a5a5}
.chord-input-row.chord-symbol-row{grid-template-columns:minmax(0,1fr)}
.chord-raga-degrees{display:block;margin-top:4px}
.chord-raga-match .chord-add-pair{width:100%;margin:0;background:var(--saffron);border-color:var(--saffron);font-size:.875rem;line-height:1.45}
.chord-interpretations{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.chord-interpretations small{flex-basis:100%}
.chord-interpretations button{font-size:.875rem;background:#f6f6fa;text-align:left}
#chordSequence{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;min-width:0}
#chordSequence:empty{display:none}
#chordSequence>h2{font-size:1.5rem;margin:0;color:var(--indigo)}
.chord-sequence-outline{display:flex;gap:8px;flex-wrap:wrap}
.chord-sequence-outline button{background:var(--indigo);color:white}
.chord-sequence-entry{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff;scroll-margin-top:16px;min-width:0}
.chord-sequence-heading{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;background:var(--indigo);color:white;padding:16px 18px}
.chord-sequence-heading strong{display:block;font-size:1.75rem;overflow-wrap:anywhere}
.chord-sequence-heading small{font-size:.875rem;color:#d2d1e5}
.chord-sequence-heading button{background:#ffffff15;color:white;border-color:#ffffff40;font-size:.875rem}
.chord-sequence-raga-title{padding:20px 18px}
.chord-sequence-raga-title h3{font:700 clamp(1.35rem,3vw,2rem) Georgia,serif;margin:0 0 10px;color:var(--indigo)}
.chord-sequence-raga-title h3{overflow-wrap:anywhere;margin-bottom:16px}
.chord-sequence-raga{min-width:0;max-width:100%}
.chord-sequence-cards{display:flex;align-items:flex-start;gap:12px;min-width:0;width:100%;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--teal) #eeeef4;position:relative;padding-bottom:10px}
.chord-sequence-cards>.chord-sequence-entry{flex:0 0 100%;width:100%;max-width:100%;scroll-snap-align:start;scroll-snap-stop:always}
.chord-sequence-navigation{display:flex;align-items:center;justify-content:space-between;gap:10px}
.chord-sequence-navigation span{font-size:.875rem;color:var(--muted)}
.chord-sequence-cards:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:18px}
.chord-sequence-cards.is-sorting{scroll-snap-type:none}
.chord-sequence-cards .chord-sort-marker{position:absolute;top:8px;width:5px;height:100px}
.chord-sequence-grip{display:flex;align-items:center;gap:10px;flex:1;min-width:0;min-height:44px;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;border-radius:8px}
.chord-sequence-grip>div{min-width:0}
.chord-sequence-grip>span{font-size:1.6rem;color:#b6b5d5}
.chord-sequence-grip:focus-visible{outline:3px solid var(--saffron);outline-offset:4px}
.chord-sequence-grip.is-held{cursor:grabbing}
.chord-sequence-entry.is-dragging{opacity:.35;border:2px dashed var(--teal)}
.chord-sequence-cards.is-sorting{user-select:none;-webkit-user-select:none}
.chord-sort-marker{height:5px;border-radius:4px;background:var(--teal);box-shadow:0 0 0 3px #387f7c20;pointer-events:none}
.chord-sort-ghost{position:fixed;z-index:10000;pointer-events:none;box-sizing:border-box;padding:16px 20px;background:var(--indigo);color:white;border:2px solid var(--saffron);border-radius:12px;box-shadow:0 8px 24px #17174340;font:700 1.125rem/1.4 system-ui,sans-serif;overflow-wrap:anywhere}
.chord-sort-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.chord-viewer-settings{margin:0 14px 14px;border:1px solid var(--line);border-radius:12px;padding:12px}
.chord-viewer-settings summary{font-size:.875rem;font-weight:750;color:var(--indigo);cursor:pointer}
.chord-viewer-settings>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}
.chord-viewer-settings label{display:grid;gap:6px;min-width:0;font-size:.875rem;color:var(--muted);font-weight:700}
.chord-viewer-settings input,.chord-viewer-settings select{width:100%;min-width:0;font-size:1rem}
.chord-viewer-settings .chord-sound-setting{grid-column:1/-1;display:flex;align-items:center;gap:10px;min-height:44px;color:var(--indigo);cursor:pointer}
.chords-shell .chord-sound-setting input{width:20px;height:20px;min-height:20px;padding:0;flex:none;accent-color:var(--teal)}
.chord-sequence-raga .composition-staff-wrap{overflow:auto;max-width:100%;touch-action:pan-x pan-y}
.chord-sequence-raga .composition-staff{display:block;max-width:none;touch-action:pan-x pan-y}
.chord-sequence-raga .viewer-tabs{overflow-x:auto;flex-wrap:nowrap}
.chord-sequence-raga .viewer-tabs button{white-space:nowrap}
.chords-shell .chord-sequence-raga .viewer-displays button{white-space:nowrap;overflow-wrap:normal;padding-inline:3px;font-size:clamp(.72rem,2.9vw,1rem)}
.chords-shell .chord-sequence-raga .chord-viewer-playbar{flex-wrap:wrap;padding:8px 12px;background:#fafafd;border-bottom:1px solid var(--line)}
.chord-viewer-playbar .viewer-zoom{display:flex;align-items:center;gap:5px}
.chord-viewer-playbar .viewer-zoom output{min-width:45px;text-align:center;font-weight:700;font-size:.875rem}
.chord-viewer-playbar button.primary{background:var(--saffron);border-color:var(--saffron)}
.chord-viewer-playbar button.active:not(.primary){background:var(--indigo);color:white}
.chord-viewer-cursor{pointer-events:none;stroke:var(--saffron);stroke-width:2;stroke-dasharray:4 3}
.chord-viewer-status{font-size:.875rem;color:var(--muted);margin:0;padding:8px 18px}
.chord-viewer-status:empty{display:none}
.chord-sequence-raga [data-viewer-content][hidden],.chord-melody-editor[hidden]{display:none}
.chord-melody-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px;border-bottom:1px solid var(--line)}
.chord-melody-actions span{font-size:.8rem;color:var(--muted)}
.chord-melody-editor{min-width:0;max-width:100%;padding:8px}
.chord-melody-editor .composition-content--inline{min-width:0;max-width:100%}
.chords-shell .chord-sequence-raga .composition-score-scroll input{padding:0;min-height:28px;border:0;background:transparent}
.app-mode-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.app-mode-tab--chords{line-height:1.2}
.composition-app-tabs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
@media(max-width:760px){
  .app-mode-tabs,.composition-app-tabs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;align-items:stretch}
  .app-mode-tabs .app-mode-tab{grid-column:span 3;min-width:0;padding:8px 6px;font-size:.875rem;min-height:44px;overflow-wrap:normal}
  .composition-app-tabs button{grid-column:span 2;min-width:0;padding:8px 6px;font-size:.875rem;min-height:44px;overflow-wrap:normal}
  .chords-main{padding:14px 7px 26px}
  .chord-input-area,.chord-composition,.chord-matches{padding:10px}
}
@media(max-width:360px){.chord-input-row{grid-template-columns:95px minmax(0,1fr)}}

/* One chord editor, backed by an ordered grid of distinct chord occurrences. */
.chord-import{display:grid;gap:8px;min-width:0}
.chord-import [hidden]{display:none!important}
.chord-import>button{justify-self:start}
.chord-import p{margin:0;font-size:.9rem;line-height:1.45;color:var(--muted)}
.chord-file-actions{display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.chord-file-actions button{max-width:100%;font-size:.875rem;padding:10px 12px;min-height:44px}
.chord-file-actions #importChords{margin-right:auto}
.chord-raga-filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:14px}
.chord-raga-filters label{display:grid;gap:6px;min-width:0;font-size:.875rem;font-weight:700;color:var(--muted)}
.chord-raga-filters select{width:100%;min-width:0;font-size:1rem}
#chordImportChoice{display:flex;flex-wrap:wrap;gap:8px;align-items:end}
#chordImportChoice:empty{display:none}
#chordImportChoice label{display:grid;gap:5px;max-width:100%;min-width:0}
#chordImportChoice select{max-width:100%}
.chord-grid-section h2{font-size:1.05rem;margin:0 0 9px;color:var(--indigo)}
.chords-shell .chord-progression-playbar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;padding:9px;margin:0 0 10px;border:1px solid var(--line);border-radius:12px;background:#fafafd}
.chords-shell .chord-progression-playbar button{min-width:0;min-height:44px;padding:8px;font-size:1.1rem}
.chord-progression-tempo{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:.875rem;font-weight:700;color:var(--muted)}
.chord-progression-options{grid-column:1/-1;display:grid;grid-template-columns:44px 44px minmax(0,1fr);gap:7px;align-items:center}
.chords-shell .chord-progression-options button{width:44px;height:44px;padding:9px;display:grid;place-items:center}
.chord-click-volume{display:grid;gap:0;min-width:0;color:var(--muted);font-size:.875rem;font-weight:650}
.chord-click-volume>span{display:flex;justify-content:space-between;gap:6px;flex-wrap:wrap}
.chord-click-volume output{font-variant-numeric:tabular-nums}
.chords-shell .chord-click-volume input{width:100%;min-width:0;height:28px;min-height:28px;padding:0;margin:0;accent-color:var(--teal)}
.chord-rhythm-settings{grid-column:1/-1;display:grid;gap:10px;min-width:0;border-top:1px solid var(--line);padding-top:10px}
.chord-rhythm-settings>label:first-child,.chord-rhythm-settings>#chordRhythmVariantLabel{display:grid;gap:6px;font-weight:700;font-size:.875rem;color:var(--muted)}
.chords-shell .chord-rhythm-settings select{width:100%;min-width:0;font-size:1rem}
.chord-rhythm-settings .tala-rate-control{width:100%}
.chord-tala-heading{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:space-between;font-size:.875rem;margin-bottom:8px}
.chord-tala-cycle{display:flex;flex-wrap:wrap;gap:6px}
.chord-tala-group{display:flex;min-width:0;max-width:100%;flex-wrap:wrap;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:white}
.chord-tala-group>span{display:grid;min-width:40px;padding:6px 5px;gap:3px;flex:1;text-align:center;color:var(--indigo)}
.chord-tala-group small{font-size:.75rem;white-space:nowrap;color:var(--muted)}
.chord-tala-group b{min-width:0;font-size:.875rem;line-height:1.15;white-space:normal;overflow-wrap:anywhere;word-break:break-word}
.chord-tala-group .is-khali{background:#edf6f5}
.chord-tala-group .is-current{background:var(--indigo);color:white}
.chord-tala-group .is-current small{color:white}
.chord-tala-about{font-size:.875rem;margin-top:9px;color:var(--muted)}
.chord-tala-about summary{cursor:pointer}.chord-tala-about p{line-height:1.5;margin:8px 0}
.chords-shell .chord-progression-tempo input{width:94px;min-width:0;font-size:1rem;font-weight:750}
.chord-progression-playbar button.primary{background:var(--saffron);border-color:var(--saffron)}
.chord-progression-playbar button.active{background:var(--indigo);color:white}
.chord-progression-status{font-size:.875rem;line-height:1.4;color:var(--muted);margin:0 0 10px;overflow-wrap:anywhere}
.chord-progression-status:empty{display:none}
.chord-now-playing{margin-top:12px;padding:14px;border:1px solid var(--line);border-radius:13px;background:white}
.chord-now-playing[hidden]{display:none}
.chord-now-playing h3{font:700 1.2rem/1.35 Georgia,serif;color:var(--indigo);margin:0 0 12px;overflow-wrap:anywhere}
.chord-now-playing .chord-raga-info{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:12px 18px}
.chord-now-playing p{font-size:.875rem;color:var(--muted);margin:0}
.chords-shell .chord-grid-tile.is-playing{outline:3px solid var(--saffron);outline-offset:-3px;box-shadow:0 0 0 2px #d58b2d55}
.chord-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:7px;min-width:0}
.chords-shell .chord-grid-tile{position:relative;min-width:0;height:76px;min-height:76px;padding:5px 4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;border-radius:10px;overflow:hidden;overflow-wrap:anywhere}
.chord-grid-tile small{font-size:.68rem;color:var(--muted);font-weight:500}
.chord-grid-tile strong{font-size:1rem;line-height:1.25}
.chord-grid-composition,.chord-grid-assigned{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.58rem;line-height:1.1;color:var(--muted)}.chord-grid-assigned{font-weight:750;color:var(--teal)}.chord-grid-tile.active .chord-grid-composition,.chord-grid-tile.active .chord-grid-assigned{color:#e0dfeb}
.chords-shell .chord-grid-tile.has-raga{border-color:var(--teal);background:#f0f7f6}
.chords-shell .chord-grid-tile.active{background:var(--indigo);color:white;border-color:var(--indigo);box-shadow:0 0 0 2px #d58b2d70}
.chord-grid-tile.active small{color:#e0dfeb}
.chord-grid-badge{font-size:.65rem;color:var(--teal);font-weight:800}
.chord-grid-tile.active .chord-grid-badge{color:#f5c871}
.chord-grid-tile.needs-raga .chord-grid-badge{color:#cb473e}
.chord-position-actions{display:flex;gap:5px;margin-left:auto}
.chord-card-heading .chord-position-actions button{padding:6px 10px;background:#ffffff18;color:white;border-color:#ffffff30}
.chord-pair-actions{display:flex;flex-wrap:wrap;gap:6px}
.chord-pair-actions button{font-size:.875rem;padding:7px 9px}
.chord-sequence-entry{scroll-margin-top:14px}
@media(max-width:420px){.chord-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.chords-main{padding-inline:10px}.chord-card-heading{padding:10px;gap:8px}.chord-card-heading h2{font-size:1.1rem}}

/* Destructive sequence actions are explicit and stay within the phone viewport. */
.chord-removal-list{display:grid!important;gap:.4rem;max-height:18rem;overflow:auto;width:100%}
.chord-removal-list label{display:flex;align-items:center;gap:.65rem;padding:.5rem;font-weight:600;overflow-wrap:anywhere}
.chord-removal-list input{width:1.25rem;height:1.25rem;flex:none;accent-color:#252154}
.chord-confirm-dialog{box-sizing:border-box;width:min(32rem,calc(100% - 2rem));max-height:90dvh;overflow:auto;border:1px solid #d9d8e5;border-radius:1.2rem;padding:1.25rem;color:#1b193d;background:#fff}
.chord-confirm-dialog::backdrop{background:rgba(20,17,49,.45)}
.chord-confirm-dialog h2{font-size:1.3rem;margin:0 0 .8rem}.chord-confirm-dialog p{line-height:1.5}
.chord-confirm-actions{display:flex;flex-wrap:wrap;gap:.6rem}.chord-confirm-actions button{flex:1 1 8rem;white-space:normal}