/* The deep-dive card, the same on every dive page (srv.html, hendrix.html,
   psychobilly.html): the title over its facts, one row of controls with Play
   first and lit, a hairline, the blurb, the practice rows, the tab with the
   room of the card, the neck beside it behind a handle, and the fingering
   and troubleshooting folded under. The pages keep their own colors and
   necks; this is the card. */
/* the card: the title and its facts, then one row of controls with Play
   first and lit, a hairline, the blurb, the practice row, and the tab
   with the room of the card — the tab is the point of the card */
article.ex{ border:1px solid var(--line); border-radius:10px; background:#141712; padding:18px 20px 14px; }
article.ex.playing{ border-color:var(--a); }
.ex-head{ display:block; }
.ex-head h4{ font-size:1.35rem; line-height:1.25; margin:0 0 6px; }
.btns{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; width:100%; padding:10px 0 12px; border-bottom:1px solid var(--line); margin:4px 0 8px; }
.play{ order:-1; font:600 13px Inter,system-ui,sans-serif; padding:8px 22px; border-radius:999px; border:1px solid var(--a); background:var(--a); color:#0c0b0a; cursor:pointer; min-width:84px; margin-right:6px; }
.play:hover{ filter:brightness(1.08); }
.playing .play{ background:#8ec93f; border-color:#8ec93f; }
.btns .seg{ margin-left:2px; }
.btns .drill.print svg{ width:15px; height:15px; display:block; }
.btns .drill.print{ padding:6px 8px; }
.drill{ font:600 12px Inter,system-ui,sans-serif; padding:6px 12px; border-radius:999px; border:1px solid var(--line2); color:var(--a); text-decoration:none; }
.drill:hover{ border-color:var(--a); }
.drill.star{ min-width:34px; text-align:center; padding-left:9px; padding-right:9px; color:var(--muted); }
.drill.star.on{ color:var(--a); border-color:var(--a); }
.top .favs-link{ color:var(--muted2); text-decoration:none; font-size:15px; margin-left:12px; align-self:center; }
.top .favs-link:hover{ color:var(--a); }
.meta{ display:flex; flex-wrap:wrap; gap:4px 12px; margin:0; color:var(--muted2); font-size:11px; font-variant-numeric:tabular-nums; }
.blurb{ margin:4px 0 6px; color:var(--muted); max-width:80ch; font-size:.94rem; line-height:1.55; }
/* the fingering and the troubleshooting fold away under the tab */
.tips{ display:grid; gap:6px; margin:10px 0 2px; }
.tip{ border:1px solid var(--line); border-radius:8px; background:var(--panel); }
.tip summary{ cursor:pointer; padding:8px 12px; font:600 12px Inter,system-ui,sans-serif; letter-spacing:.04em; color:var(--muted); list-style:none; }
.tip summary::-webkit-details-marker{ display:none; }
.tip summary::before{ content:'›'; display:inline-block; width:12px; color:var(--muted2); transition:transform .15s; }
.tip[open] summary::before{ transform:rotate(90deg); }
.tip[open] summary{ color:var(--ink); }
.tip .tip-body{ margin:0; padding:0 14px 12px; color:var(--muted); font-size:.92rem; line-height:1.55; max-width:80ch; }
.tip .tip-body b{ color:var(--ink); }
.tip .tip-body p{ margin:0 0 8px; }
.tip .tip-body p:last-child{ margin-bottom:0; }
.tip ul.tip-body{ padding-left:30px; }
.tip ul.tip-body li{ margin:0 0 6px; }
/* the bars outside the loop sit back */
.ex .tab .tab-note.outside, .ex .tab .tab-chord.outside{ opacity:.3; }
.side-levels{ display:grid; gap:4px; }
.side-levels .levels{ display:grid; gap:4px; }
.side-levels .level{ display:grid; grid-template-columns:62px minmax(0, 1fr); align-items:center; gap:6px; font-size:12px; color:var(--muted); }
.side-levels input[type=range]{ width:100%; min-width:0; accent-color:var(--a); }
.tab{ overflow-x:auto; }
.tab svg{ display:block; height:auto; max-width:100%; }
.tab-note.now text{ fill:var(--a); }
.tab-playhead{ fill:var(--a); opacity:.22; }
.seg{ display:inline-flex; gap:2px; align-items:center; }
.seg .lbl{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted2); margin-right:4px; }
.seg button{ font:600 12px Inter,system-ui,sans-serif; padding:5px 9px; border-radius:6px; border:1px solid transparent; background:transparent; color:var(--muted); cursor:pointer; }
.seg button.active{ color:var(--ink); border-color:var(--line2); background:var(--panel2); }
.neck{ margin:8px 0 4px; }
.neck .neck-title{ font-size:12px; color:var(--muted2); margin:0 0 4px; }
/* the handle between the tab and the neck: drag it to size the neck */
.neck-split{ align-self:stretch; width:10px; cursor:col-resize; border-radius:5px; position:relative; touch-action:none; }
.neck-split::before{ content:''; position:absolute; top:50%; left:3px; width:4px; height:40px; margin-top:-20px; border-radius:2px; background:var(--line2); }
.neck-split:hover::before, .splitting .neck-split::before{ background:var(--a); }
.neck-split:focus-visible{ outline:2px solid var(--a); outline-offset:1px; }
.splitting{ user-select:none; }
@media (min-width:1200px){
  .ex .body.with-neck{ display:grid; grid-template-columns:minmax(0, 3fr) 10px minmax(0, 2fr); gap:10px; align-items:start; }
  .ex .body.with-neck .neck{ margin:0; position:sticky; top:12px; }
}
dialog.big{ width:100vw; height:100vh; max-width:none; max-height:none; margin:0; padding:0; border:0; background:var(--bg); color:var(--ink); overflow:auto; }
dialog.big::backdrop{ background:rgba(0,0,0,.65); }
dialog.big article.ex{ border:0; border-radius:0; min-height:100vh; padding:22px 30px 40px; }
dialog.big .ex-head h4{ font-size:1.5rem; }
dialog.big .blurb{ max-width:100ch; }
@media (min-width:1000px){
  dialog.big .body.with-neck{ display:grid; grid-template-columns:minmax(0, 3fr) 10px minmax(0, 2fr); gap:14px; align-items:start; }
  dialog.big .body.with-neck .neck{ margin:0; position:sticky; top:16px; }
}
@media (max-width:640px){ dialog.big article.ex{ padding:14px 12px 30px; } }