/* 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); }
/* In a lesson the surrounding piece already supplies the title and context.
   Keep the embedded sample to the music and its three useful actions; the
   expanded workspace carries every detailed control. */
/* the lesson's card: the description at the top left; to its right the two
   ways out (Open in jam, Practice mode) at the top and the tab's zoom and
   lines tools level with the description's last line; then the tab; then
   Play and Neck */
article.ex.course-sample{ display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"blurb actions" "blurb tools" "body body" "head head"; column-gap:18px; padding:12px 14px 10px; }
.course-sample .compact-actions{ grid-area:actions; align-self:start; display:flex; justify-content:flex-end; gap:7px; margin:0 0 10px; }
.course-sample .blurb{ grid-area:blurb; align-self:start; margin:0 0 10px; color:var(--muted); max-width:88ch; font-size:15px; line-height:1.55; }
.course-sample .body{ grid-area:body; }
.course-sample .ex-head{ grid-area:head; }
@media (max-width:700px){ article.ex.course-sample{ grid-template-columns:1fr; grid-template-areas:"actions" "blurb" "tools" "body" "head"; } .course-sample .compact-actions{ justify-content:flex-start; } }
.course-sample .ex-head>div,.course-sample .neck-seg,.course-sample .fingers-seg,.course-sample .print,.course-sample .gp,.course-sample .star,
.course-sample .practice,.course-sample .yours-bars,.course-sample .neck-split,
.course-sample .refs{ display:none !important; }
/* the lesson's card keeps its troubleshooting lines under the tab (the fingering fold stays in practice mode), so what goes wrong is read where the card is played (2026-09-19) */
.course-sample .tips{ grid-column:1 / -1; margin:8px 0 0; }
.course-sample .tips .tip.hands{ display:none !important; }
.course-sample .btns{ justify-content:flex-end; gap:7px; padding:9px 0 0; margin:4px 0 0; border:0; }
.course-sample .play{ order:0; min-width:0; margin:0 auto 0 0; padding:7px 18px; }
.course-sample .drill{ padding:7px 12px; }
.course-sample .compact-neck.active{ color:var(--ink); border-color:var(--a); background:var(--panel2); }
.course-sample .tab-pane-wrap{ padding-right:0; }
.course-sample .compact-tab-tools{ grid-area:tools; align-self:end; min-height:0; margin:0 0 10px; }
.course-sample .compact-tab-tools .part-display-label{ display:inline; }
.course-sample .body.with-neck{ display:block !important; }
.course-sample .body.with-neck .neck{ position:static; margin:10px 0 4px; }
.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; }
.btns .drill.gp,.course-transport>.drill.gp{ font:700 10.5px/1 Inter,system-ui,sans-serif; letter-spacing:.04em; }   /* the Guitar Pro file, beside Print */
.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,.tip .tip-body .hands-p{ margin:0 0 8px; }
/* a box's fingering, drawn: the strings as lines (high E on top, as on the tab), the fret wires, and on each string
   the notes the hand holds — the scale degree ringed in the accent like the neck's, the note name, the finger */
.tip .fingering{ margin:2px 0 12px; overflow-x:auto; }
/* a card's grips: chord boxes side by side, the finger in the dot, the note and its degree under each string */
.tip .grips-fig{ margin:2px 0 10px; }
.tip .grips-fig figcaption{ color:var(--muted); margin:0 0 2px; } .tip .grips-fig figcaption b{ color:var(--ink); }
.tip .grips-row{ display:flex; flex-wrap:wrap; gap:0 6px; }
.tip .grip-box{ width:150px; text-align:center; } .tip .grip-box svg{ display:block; width:150px; height:auto; }
.tip .grip-box-name{ color:var(--ink); font-weight:600; font-size:13px; margin:-4px 0 6px; }
.tip .fingering figcaption{ color:var(--muted); margin:0 0 4px; }
.tip .fingering figcaption b{ color:var(--ink); }
.fingering-svg{ display:block; max-width:100%; height:auto; font-family:Inter,system-ui,sans-serif; }
.fingering-svg .fng-string{ stroke:var(--line2); stroke-width:1; } .fingering-svg .fng-string.thick{ stroke-width:2; }
.fingering-svg .fng-wire{ stroke:var(--line2); stroke-width:1; } .fingering-svg .fng-wire.nut{ stroke:var(--muted2); stroke-width:4; }
.fingering-svg .fng-lbl{ fill:var(--muted2); font-size:11px; letter-spacing:.06em; text-transform:uppercase; }
.fingering-svg .fng-bg{ fill:var(--panel); }
.fingering-svg .fng-deg{ fill:var(--panel); stroke:var(--a); stroke-width:1.5; }
.fingering-svg .fng-degt{ fill:var(--a); font-size:11px; font-weight:600; }
.fingering-svg .fng-name{ fill:var(--ink); font-size:13px; font-weight:600; }
.fingering-svg .fng-fing{ fill:var(--muted2); font-size:10px; letter-spacing:.04em; text-transform:uppercase; }
.tip .tip-body p:last-child,.tip .tip-body .hands-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-note.now .tab-xnote{ stroke:var(--a); }   /* (its dead notes' crosses, as its letters: lo-b3-11) */
.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{ position:relative; border:0; border-radius:0; min-height:100vh; padding:22px 30px 118px; }
dialog.big .ex-head h4{ font-size:1.5rem; }
dialog.big .ex-head{ padding-right:46px; }
dialog.big .close-big{ position:fixed; top:14px; right:18px; z-index:4; width:34px; height:34px; padding:0; border:1px solid var(--line2); border-radius:50%; background:rgba(20,23,18,.9); color:var(--muted); font:400 25px/30px Inter,system-ui,sans-serif; cursor:pointer; box-shadow:0 5px 18px rgba(0,0,0,.18); }
dialog.big .close-big:hover{ color:var(--ink); border-color:var(--muted); background:var(--panel2); }
.practice:empty{ display:none; }
/* Display controls sit in one quiet row at the tab's top edge. */
.course-tab-tools{ display:flex; align-items:center; justify-content:flex-end; gap:6px; min-height:34px; margin-left:auto; }
.course-tab-tools .part-display-tool,.course-tab-tools #courseTabRowsSlot .tab-pane-ctl,.course-tab-tools .compact-tab-rows-slot .tab-pane-ctl{ position:static; display:inline-flex; flex-direction:row; align-items:center; gap:3px; padding:3px; margin:0; border:1px solid var(--line2); border-radius:9px; background:rgba(20,23,18,.72); color:var(--muted); font:650 10px/1 Inter,system-ui,sans-serif; font-variant-numeric:tabular-nums; }
.course-tab-tools .part-display-label{ margin:0 4px 0 5px; color:var(--muted2); font-size:9px; font-weight:750; letter-spacing:.06em; text-transform:uppercase; }
.course-tab-tools button,.course-tab-tools #courseTabRowsSlot .tab-pane-ctl button,.course-tab-tools .compact-tab-rows-slot .tab-pane-ctl button{ width:25px; height:25px; padding:0; border:0; border-radius:6px; background:transparent; color:var(--ink); font:700 12px/1 Inter,system-ui,sans-serif; cursor:pointer; }
.course-tab-tools button:hover,.course-tab-tools #courseTabRowsSlot .tab-pane-ctl button:hover,.course-tab-tools .compact-tab-rows-slot .tab-pane-ctl button:hover{ background:var(--panel2); border-color:transparent; }
.course-tab-tools button:disabled{ color:var(--muted2); cursor:default; }
.course-tab-tools .tab-zoom-readout{ min-width:34px; text-align:center; }
.course-tab-tools #courseTabRowsSlot:empty,.course-tab-tools .compact-tab-rows-slot:empty{ display:none; }
.course-tab-tools #courseTabRowsSlot .tab-rows-n,.course-tab-tools .compact-tab-rows-slot .tab-rows-n{ min-width:30px; text-align:center; }
.course-tab-tools .neck-layout button{ width:auto; padding:0 7px; color:var(--muted); }
.course-tab-tools .neck-layout button.active{ color:var(--ink); background:var(--panel2); }
/* Expanded course pieces use the same fixed playing surface as Jam and
   Drills: playback stays in reach while the tab and neck use the window. */
.course-transport{ position:fixed; left:0; right:0; bottom:0; z-index:3; display:flex; align-items:center; gap:18px; padding:12px 22px; padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px)); background:var(--panel); border-top:1px solid var(--line); box-shadow:0 -12px 32px rgba(0,0,0,.2); font:500 12px Inter,system-ui,sans-serif; }
.course-transport .course-play{ order:0; width:54px; height:54px; min-width:54px; margin:0; padding:0; border:0; border-radius:50%; background:var(--ink); color:var(--bg); font-size:0; display:inline-flex; align-items:center; justify-content:center; }
.course-transport .course-play::before{ content:''; width:0; height:0; margin-left:3px; border-top:8px solid transparent; border-bottom:8px solid transparent; border-left:13px solid currentColor; }
.playing .course-transport .course-play{ background:var(--a); border-color:var(--a); color:#0c0b0a; }
.playing .course-transport .course-play::before{ width:13px; height:13px; margin:0; border:0; border-radius:1px; background:currentColor; }
.course-transport .loop{ display:inline-flex; align-items:center; gap:4px; }
.course-transport .loop .ib{ width:32px; height:32px; padding:0; border:1px solid var(--line2); border-radius:7px; background:transparent; color:var(--muted); display:inline-flex; align-items:center; justify-content:center; }
.course-transport .loop .ib svg{ width:19px; height:19px; }
.course-transport .loop.on .ib{ color:var(--a); border-color:var(--a); }
.course-transport .loop select{ min-width:0; padding:4px 6px; border:1px solid var(--line2); border-radius:6px; background:var(--panel2); color:var(--ink); }
.course-transport .loop:not(.on) select,.course-transport .loop:not(.on) .loop-dash{ opacity:.5; }
.course-transport .tempo-ctl{ display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; }
.course-transport .tempo-ctl label{ display:inline-flex; align-items:center; gap:8px; }
.course-transport .tempo-ctl input{ width:min(18vw,220px); min-width:90px; accent-color:var(--ink); }
.course-transport .tempo-ctl output{ min-width:6ch; color:var(--muted); font-variant-numeric:tabular-nums; }
.course-transport .tempo-steps,.course-transport .tempo-taps{ display:inline-flex; gap:2px; }
.course-transport .tempo-steps button,.course-transport .tempo-taps button{ padding:4px 8px; border:1px solid var(--line2); border-radius:6px; background:transparent; color:var(--muted); font:600 11px Inter,system-ui,sans-serif; }
.course-transport .tempo-taps button.active{ color:var(--a); border-color:var(--a); }
.course-transport-spacer{ flex:1; }
.course-transport .card-countin{ display:inline-flex; align-items:center; gap:6px; color:var(--muted); white-space:nowrap; }
.course-transport .card-countin input{ accent-color:var(--a); }
.course-transport>.drill{ width:32px; height:32px; min-width:32px; padding:0; border-radius:7px; display:inline-flex; align-items:center; justify-content:center; color:var(--muted); }
.course-transport>.drill:hover{ color:var(--ink); }
.course-transport>.drill.print svg{ width:17px; height:17px; }
@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; }
  dialog.big .body.with-neck.neck-below{ display:block; }
  dialog.big .body.with-neck.neck-below .neck{ margin:10px 0 4px; position:static; }
}
@media (max-width:760px){
  dialog.big article.ex{ padding:14px 12px 150px; }
  dialog.big .close-big{ top:9px; right:10px; }
  .practice.sound .course-tab-tools{ width:100%; justify-content:flex-start; overflow-x:auto; padding-right:2px; margin-left:0; }
  .course-tab-tools .part-display-label{ display:none; }
  .course-transport{ flex-wrap:wrap; gap:7px 10px; padding:10px 12px; padding-bottom:calc(10px + env(safe-area-inset-bottom, 0px)); }
  .course-transport .course-play{ width:48px; height:48px; min-width:48px; }
  .course-transport .loop{ order:5; }
  .course-transport .tempo-ctl{ flex:1 1 220px; }
  .course-transport .tempo-ctl input{ width:100%; }
  .course-transport .tempo-steps,.course-transport .tempo-taps{ display:none; }
  .course-transport-spacer{ display:none; }
  .course-transport .card-countin{ order:6; margin-left:auto; }
  .course-transport>.drill{ order:7; }
}