/* ============================================================
   ĮRANKIŲ STILIUS — akordų biblioteka (/chords/…) ir akordų
   paieška (/chord-finder). Ant site.css tokenų; savų spalvų čia
   tik klaviatūros diagramoms (tie patys dažai kaip programos
   klavišų medžiagoje: dramblio kaulas, juodmedis, auksinis
   paspaudimas #e6c172).
   ============================================================ */

/* ---------- klaviatūros diagrama (diagram.js) ---------- */
.kb{display:block;width:100%;height:auto;overflow:visible}
.kb .w{fill:#ece7dc;stroke:#0b0b0d;stroke-width:1}
.kb .b{fill:#1b1d21;stroke:#0b0b0d;stroke-width:.8}
.kb .w.on{fill:#e6c172}
.kb .b.on{fill:#c9a24f}
.kb text{font-family:var(--serif);text-anchor:middle;font-variation-settings:"wght" 560}
.kb .nm{font-size:8.6px;fill:#2a2110}
.kb .nm.nb{font-size:6.8px;fill:#16110a}
.kb .dg{font-size:9.2px;fill:var(--cream)}
.kb .dg.db{fill:var(--cream-2)}

/* ---------- puslapio kūnas ---------- */
.tl-top{padding-top:clamp(112px,12vw,156px)}
.cf-top{padding-top:clamp(98px,10vw,132px)}
.cf-top .h2{font-size:var(--step-4)}
.crumbs{font-size:var(--step--1);color:var(--ink-3);margin-bottom:26px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.crumbs a{color:var(--ink-2);border-bottom:1px solid transparent;transition:border-color .2s}
.crumbs a:hover{border-bottom-color:rgba(232,219,194,.5)}
.crumbs span[aria-hidden]{opacity:.5}

.ch-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(28px,5vw,72px);align-items:center}
@media (max-width:860px){.ch-head{grid-template-columns:1fr}}
.ch-name{font-family:var(--serif);font-size:clamp(64px,10vw,132px);line-height:.92;letter-spacing:-.02em;
  font-variation-settings:"wght" 460;color:var(--ink);margin:4px 0 14px}
.ch-also{font-size:var(--step--1);color:var(--ink-3);line-height:1.6}
.ch-also b{color:var(--ink-2);font-weight:500}
.ch-facts{display:grid;gap:10px;margin-top:26px}
.ch-fact{display:grid;grid-template-columns:88px minmax(0,1fr);gap:14px;align-items:baseline;
  border-top:1px solid var(--line);padding-top:10px}
.ch-fact .k{font-size:var(--step--2);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.ch-fact .v{font-family:var(--serif);font-size:var(--step-1);color:var(--ink);letter-spacing:.01em}
.ch-note{font-size:var(--step--2);color:var(--ink-3);margin-top:10px;line-height:1.5}
.ch-hero{border:1px solid var(--line);border-radius:18px;padding:clamp(20px,3vw,34px) clamp(16px,2.6vw,30px) clamp(16px,2.4vw,24px);
  background:radial-gradient(120% 90% at 50% 0%,rgba(232,219,194,.06),transparent 60%),rgba(255,255,255,.015)}
.ch-hero .kb{margin-top:18px}
.ch-hero-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px;flex-wrap:wrap}
.ch-hero-foot .cap{font-size:var(--step--1);color:var(--ink-3)}

.play{font-family:var(--sans);display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  font-size:var(--step--1);font-weight:600;color:var(--ink);background:rgba(232,219,194,.08);
  border:1px solid rgba(232,219,194,.28);border-radius:999px;padding:8px 15px 8px 12px;
  transition:background .2s,border-color .2s,transform .2s}
.play:hover{background:rgba(232,219,194,.15);border-color:rgba(232,219,194,.55)}
.play:active{transform:scale(.97)}
.play::before{content:"";width:0;height:0;border-left:8px solid var(--cream);border-top:5px solid transparent;border-bottom:5px solid transparent}
.play.is-on{background:rgba(230,193,114,.22);border-color:#e6c172}

.ch-blurb{font-family:var(--serif);font-size:var(--step-1);line-height:1.5;color:var(--ink-2);
  font-variation-settings:"wght" 420;max-width:62ch;margin-top:clamp(30px,4vw,52px)}
.ch-blurb a,.tl-prose a{color:var(--ink);border-bottom:1px solid rgba(232,219,194,.4);transition:border-color .2s}
.ch-blurb a:hover,.tl-prose a:hover{border-bottom-color:var(--cream)}

.tl-sec{padding:clamp(40px,5vw,72px) 0}
.tl-h{font-family:var(--serif);font-size:var(--step-3);line-height:1.08;font-variation-settings:"wght" 470;margin-bottom:10px}
.tl-sub{color:var(--ink-3);font-size:var(--step-0);max-width:64ch;margin-bottom:clamp(22px,3vw,34px)}

.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.vcard{border:1px solid var(--line);border-radius:14px;padding:18px 18px 16px;background:rgba(255,255,255,.018);
  display:flex;flex-direction:column}
.vcard h3{font-family:var(--serif);font-size:var(--step-1);font-weight:400;font-variation-settings:"wght" 520;
  display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.vcard h3 small{font-family:var(--sans);font-size:var(--step--2);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:500}
.vcard .kb{margin:26px 0 12px}
.vcard p{font-size:var(--step--1);line-height:1.55;color:var(--ink-2);flex:1}
.vcard .play{align-self:flex-start;margin-top:12px}
.vdeg{font-family:var(--serif);color:var(--cream);letter-spacing:.02em;font-size:var(--step-0)}

.tl-chips{display:flex;flex-wrap:wrap;gap:8px}
.tl-chip{font-family:var(--serif);font-size:var(--step-0);color:var(--ink-2);padding:6px 12px;border-radius:9px;
  border:1px solid var(--line);background:rgba(255,255,255,.02);transition:all .2s;line-height:1.2}
.tl-chip:hover{color:var(--ink);border-color:rgba(232,219,194,.5);background:rgba(232,219,194,.07)}
.tl-chip.here{color:#0b0b0d;background:var(--cream);border-color:var(--cream)}
.tl-chips + .tl-h{margin-top:clamp(34px,4vw,54px)}

.tl-cta{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-2)}
.tl-cta-in{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(24px,4vw,60px);align-items:center}
@media (max-width:860px){.tl-cta-in{grid-template-columns:1fr}}
.tl-cta .h4{margin-bottom:10px}
.tl-cta p{color:var(--ink-2);line-height:1.6}

/* ---------- biblioteka (/chords/) ---------- */
.lib-group{margin-top:clamp(34px,4vw,56px)}
.lib-group h2{font-family:var(--serif);font-size:var(--step-2);font-weight:400;font-variation-settings:"wght" 480;margin-bottom:14px}
.lib-table{width:100%;border-collapse:collapse;font-family:var(--serif);font-size:var(--step-0)}
.lib-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:12px}
.lib-table th,.lib-table td{padding:9px 10px;border-bottom:1px solid var(--line-2);text-align:left;white-space:nowrap}
.lib-table th{font-family:var(--sans);font-size:var(--step--2);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:500;
  position:sticky;left:0;background:var(--bg);min-width:190px}
.lib-table tr:last-child td,.lib-table tr:last-child th{border-bottom:0}
.lib-table a{color:var(--ink-2);padding:3px 6px;border-radius:6px;transition:all .15s}
.lib-table a:hover{color:#0b0b0d;background:var(--cream)}

/* ---------- akordų paieška (/chord-finder) ---------- */
.cf{border:1px solid var(--line);border-radius:22px;background:
  radial-gradient(90% 70% at 50% 0%,rgba(232,219,194,.07),transparent 65%),rgba(255,255,255,.015);
  padding:clamp(18px,2.6vw,30px);position:relative}
.cf-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.cf-bar .grp{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.cf-btn{font-family:var(--sans);font-size:var(--step--1);font-weight:500;color:var(--ink-2);cursor:pointer;
  background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:999px;padding:8px 14px;
  display:inline-flex;align-items:center;gap:8px;transition:all .2s}
.cf-btn:hover{color:var(--ink);border-color:rgba(232,219,194,.45)}
.cf-btn[aria-pressed="true"]{color:#0b0b0d;background:var(--cream);border-color:var(--cream)}
.cf-btn:disabled{opacity:.4;cursor:default}
.cf-dot{width:8px;height:8px;border-radius:50%;background:var(--ink-3);display:inline-block}
.cf-dot.on{background:#7dc98f;box-shadow:0 0 10px rgba(125,201,143,.7)}
.cf-midi{font-size:var(--step--1);color:var(--ink-3);display:inline-flex;align-items:center;gap:8px}

.cf-read{text-align:center;padding:clamp(18px,3vw,40px) 0 clamp(14px,2vw,22px);min-height:clamp(190px,20vw,250px);
  display:flex;flex-direction:column;align-items:center;justify-content:center}
.cf-name{font-family:var(--serif);font-size:clamp(64px,11vw,148px);line-height:.95;letter-spacing:-.02em;
  font-variation-settings:"wght" 460;color:var(--ink);min-height:1em;transition:opacity .25s}
.cf-name.idle{color:var(--ink-3);font-size:clamp(28px,4vw,46px);font-style:italic;font-variation-settings:"wght" 380}
.cf-name.released{opacity:.72}
.cf-alts{font-family:var(--serif);font-size:var(--step-1);color:var(--ink-3);margin-top:12px;min-height:1.4em}
.cf-alts b{color:var(--ink-2);font-weight:400}
.cf-notes{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;margin-top:18px;min-height:2.6em}
.cf-n{display:flex;flex-direction:column;align-items:center;line-height:1.15}
.cf-n i{font-style:normal;font-family:var(--serif);font-size:var(--step-1);color:var(--ink)}
.cf-n u{text-decoration:none;font-family:var(--serif);font-size:var(--step--1);color:var(--cream)}
.cf-go{margin-top:18px;min-height:1.6em}
.cf-go a{font-size:var(--step--1);color:var(--ink);border-bottom:1px solid rgba(232,219,194,.45)}

.cf-keys{margin:0 calc(-1 * clamp(18px,2.6vw,30px));position:relative}
.cf-keys #piano-container{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:rgba(232,219,194,.25) transparent;padding-left:clamp(18px,2.6vw,30px);padding-right:clamp(18px,2.6vw,30px)}
.cf-keys #piano-keys{margin:0 auto}
.cf-keys .key-label{position:absolute;bottom:6px;left:0;right:0;text-align:center;font-family:var(--sans);
  font-size:10px;color:rgba(0,0,0,.35);pointer-events:none;text-transform:uppercase}
.cf-keys .piano-key-black .key-label{color:rgba(255,255,255,.35)}
.cf-hint{font-size:var(--step--2);color:var(--ink-3);text-align:center;margin-top:14px}

.cf-voice{margin-top:clamp(22px,3vw,34px);border-top:1px solid var(--line);padding-top:clamp(20px,2.6vw,30px)}
.cf-voice[hidden]{display:none}
.cf-voice .vgrid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.cf-keys{--font:var(--serif)}
.cf-voice h2{font-family:var(--serif);font-size:var(--step-2);font-weight:400;font-variation-settings:"wght" 480;margin-bottom:6px}

.cf-try{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:18px}
.cf-try button{font-family:var(--serif);font-size:var(--step-0);color:var(--ink-2);cursor:pointer;
  background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:10px;padding:7px 13px;transition:all .2s}
.cf-try button:hover{color:var(--ink);border-color:rgba(232,219,194,.5);background:rgba(232,219,194,.07)}
.cf-try button small{font-family:var(--sans);font-size:var(--step--2);color:var(--ink-3);margin-left:6px}

.how-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.how{border:1px solid var(--line);border-radius:14px;padding:20px;background:rgba(255,255,255,.018)}
.how h3{font-family:var(--serif);font-size:var(--step-1);font-weight:400;font-variation-settings:"wght" 520;margin-bottom:8px}
.how p{font-size:var(--step--1);color:var(--ink-2);line-height:1.6}
.how kbd{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;padding:1px 6px;border-radius:5px;
  border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--ink)}

.cf-toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);opacity:0;pointer-events:none;
  background:var(--cream);color:#0b0b0d;font-size:var(--step--1);font-weight:600;padding:10px 18px;border-radius:999px;
  transition:all .3s var(--out);z-index:60}
.cf-toast.show{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){.play,.cf-btn,.tl-chip,.cf-name{transition:none}}