/* =====================================================================
   Jazz Guitar Chord Voicing Finder — voicings.css

   Loaded after analyzer.css, which already carries the site's palette,
   type and layout. Everything here is specific to chord diagrams, the
   fretboard and the voicing cards.
   ===================================================================== */

:root{
  --gut:#c9c3b6;            /* string / fret lines */
  --dot:#f1eee8;            /* a fretted note */
  --dotroot:#6FB78F;        /* the root, so it reads at a glance */
}

/* ------------------------------------------------------------- input */
.vcontrols{display:flex;gap:12px;flex-wrap:wrap;align-items:stretch}
#vchord,#vprog{flex:1 1 260px;min-width:0;background:#0a0a0b;border:1px solid var(--line-strong);
  border-radius:10px;color:var(--cream);font-family:'Oswald',sans-serif;letter-spacing:1px;
  font-size:19px;padding:14px 16px}
#vchord:focus,#vprog:focus{outline:none;border-color:var(--pewter);
  box-shadow:0 0 0 3px rgba(185,180,170,.10)}
#vchord::placeholder,#vprog::placeholder{color:var(--muted2);letter-spacing:.5px}

.filterrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;align-items:center}
.filterrow .lbl{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:2.2px;
  font-size:10.5px;color:var(--muted2);margin-right:2px}
.fchip{cursor:pointer;background:transparent;border:1px solid var(--line-strong);border-radius:999px;
  color:var(--muted);padding:7px 15px;font-family:'Oswald',sans-serif;font-size:12px;
  letter-spacing:1.4px;text-transform:uppercase;transition:.16s}
.fchip:hover{border-color:var(--pewter);color:var(--cream)}
.fchip.on{background:var(--cream);color:#111;border-color:var(--cream)}
.fchip:focus-visible{outline:2px solid var(--pewter);outline-offset:2px}

/* --------------------------------------------------------- diagrams */
.chordbox{width:132px;height:182px;display:block}
.chordbox .fretline{stroke:var(--gut);stroke-width:1;opacity:.45}
.chordbox .stringline{stroke:var(--gut);stroke-width:1;opacity:.6}
.chordbox .nut{fill:var(--gut)}
.chordbox .dot{fill:var(--dot)}
.chordbox .dot.root{fill:var(--dotroot)}
.chordbox .barre{fill:var(--dot);opacity:.92}
.chordbox .fin{font-family:'Oswald',sans-serif;font-size:9px;fill:#111;font-weight:600}
.chordbox .mark{font-family:'Oswald',sans-serif;font-size:13px;fill:var(--muted2)}
.chordbox .openmark{fill:none;stroke:var(--muted);stroke-width:1.4}
.chordbox .posnum{font-family:'Oswald',sans-serif;font-size:12px;fill:var(--muted)}
.chordbox .ivlab{font-family:'Oswald',sans-serif;font-size:9.5px;fill:var(--muted2);letter-spacing:.5px}

/* ------------------------------------------------------------- cards */
.vhead{font-family:'Oswald',sans-serif;font-weight:500;text-transform:uppercase;
  letter-spacing:2.4px;font-size:14px;color:var(--muted2);margin:8px 0 18px}
.vhead b{color:var(--cream);font-weight:600;letter-spacing:.5px;font-size:20px}
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:16px}
.vcard{display:grid;grid-template-columns:150px 1fr;gap:16px;
  background:linear-gradient(180deg,var(--panel),#111113);border:1px solid var(--line);
  border-radius:14px;padding:18px}
.vdiagram{display:flex;align-items:flex-start;justify-content:center}
.vbody h3{font-family:'Oswald',sans-serif;font-weight:600;letter-spacing:.4px;font-size:19px;
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.vfrets{font-family:'Oswald',sans-serif;font-weight:400;font-size:13px;letter-spacing:2px;
  color:var(--pewter)}
.vtags{display:flex;flex-wrap:wrap;gap:6px;margin:9px 0 12px}
.vtag{font-family:'Oswald',sans-serif;font-size:10px;letter-spacing:1.6px;text-transform:uppercase;
  padding:4px 9px;border-radius:999px;border:1px solid var(--line-strong);color:var(--muted)}
.vtag-shell{border-color:rgba(111,183,143,.5);color:var(--f-tonic)}
.vtag-drop2,.vtag-drop3{border-color:rgba(143,169,206,.5);color:var(--f-pre)}
.vtag-altered{border-color:rgba(230,131,31,.5);color:var(--f-dom)}
.vtag-extended{border-color:rgba(201,148,47,.5);color:var(--f-modal)}
.vtag-rootless,.vtag-quartal{border-color:rgba(169,139,214,.5);color:var(--f-chrom)}
.vtag-note{border-style:dashed}
.vmeta{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;margin-bottom:12px}
.vmeta dt{font-family:'Oswald',sans-serif;font-size:10px;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--muted2);align-self:center}
.vmeta dd{font-family:'Oswald',sans-serif;font-size:14px;letter-spacing:1.2px;color:var(--cream)}
.vwhy{font-size:14.5px;color:var(--muted);margin-bottom:14px}
.vwhy b{color:var(--cream);font-weight:500;font-family:'Oswald',sans-serif;letter-spacing:1px;
  font-size:11px;text-transform:uppercase}

/* The card used to end with the score bars, so nothing needed to close it
   off. Now the last element is whatever the body ends with, and its own
   bottom margin was leaving the card padded 33px underneath against 18px
   above. Drop it and let the card's padding do the job on both sides. */
.vbody > :last-child{margin-bottom:0}

/* A grid of voicing cards is a block, not a paragraph. Whatever follows it
   inside the same section needs room: on the hub the example grid was
   sitting flush against the comparison table with nothing between them.
   Using the adjacent sibling means a grid that ends a section adds no
   trailing margin, so the section rhythm is untouched. */
.vgrid + *{margin-top:26px}

/* Live results are the last thing in the tool section; the note that used
   to sit under them was also what held them off the next section. */
#vresults:not([hidden]){margin-bottom:12px}


/* ------------------------------------------------------- progression */
.chain{display:flex;flex-wrap:wrap;align-items:flex-start;gap:6px;margin:8px 0 26px}
.clink{display:flex;align-items:flex-start;gap:6px}
.cvoicing{background:linear-gradient(180deg,var(--panel),#111113);border:1px solid var(--line);
  border-radius:12px;padding:12px 10px 10px;text-align:center;min-width:150px}
.cname{font-family:'Oswald',sans-serif;font-weight:600;font-size:17px;letter-spacing:.4px;margin-top:4px}
.cfrets{font-family:'Oswald',sans-serif;font-size:12px;letter-spacing:2px;color:var(--pewter);margin-top:3px}
.civ{font-family:'Oswald',sans-serif;font-size:11px;letter-spacing:1.4px;color:var(--f-pre);margin-top:5px}
.cnotes{font-family:'Oswald',sans-serif;font-size:11px;letter-spacing:1.4px;color:var(--muted2);margin-top:2px}
.carrow{display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:56px;align-self:center;color:var(--muted2)}
.carrow span:first-child{font-size:20px;line-height:1}
.cmotion{font-family:'Oswald',sans-serif;font-size:9.5px;letter-spacing:1.2px;margin-top:2px;
  text-align:center}

/* Three runs of the same progression, one per bass string. Each is a
   band of its own so the eye can tell where the 6th-string set ends and
   the 5th-string set begins; without the rule they read as one long
   ribbon of diagrams. */
.pstringlead{margin-bottom:22px;max-width:46em}
.pstring{border-top:1px solid var(--line);padding-top:20px;margin-top:26px}
.pstring:first-of-type{border-top:0;padding-top:0;margin-top:0}
.pstring .blk h3{font-family:'Oswald',sans-serif;font-weight:500;text-transform:uppercase;
  letter-spacing:2.4px;font-size:14px;color:var(--cream);margin-bottom:12px}
.pstring .pvm{font-family:'Oswald',sans-serif;font-weight:500;text-transform:uppercase;
  letter-spacing:2.2px;font-size:11.5px;color:var(--muted2);margin-bottom:10px}
.pstring .chain{margin-bottom:20px}
.pstring .findings{margin-bottom:14px}
.pstring > .hint{margin-bottom:0}

.conceptrow{display:flex;flex-wrap:wrap;gap:8px}
.conceptrow .pill{text-decoration:none}
.conceptrow .pill:hover{border-color:var(--pewter);color:var(--cream)}

/* ------------------------------------------------------------ mobile */
@media(max-width:760px){
  .vgrid{grid-template-columns:1fr}
  .vcard{grid-template-columns:1fr;gap:10px}
  .vdiagram{justify-content:flex-start}
  .chordbox{width:118px;height:163px}
  .vcontrols{flex-direction:column}
  /* The console stacks here, and a flex-basis meant as a WIDTH in a row
     becomes a HEIGHT in a column: the chord box was coming out 295 wide
     by 240 tall, a near-square that pushed the whole tool off the first
     screen. Basis off, height back to the padding and the line. */
  #vchord,#vprog{flex:0 0 auto}
  .chain{flex-direction:column;align-items:stretch}
  .clink{flex-direction:column;align-items:stretch}
  .cvoicing{min-width:0}
  .carrow{flex-direction:row;gap:10px;min-width:0;padding:2px 0}
  .carrow span:first-child{font-size:16px}
  .pstring{margin-top:20px;padding-top:16px}
}
@media(max-width:420px){
  .vmeta{grid-template-columns:1fr}
  .vmeta dt{margin-top:6px}
}