/* ============================================================
   The Fingerstyle Method — page-specific styles
   Loaded AFTER css/shared.css; only rules shared.css lacks.
   ============================================================ */

/* ruled-lines backdrop behind the header (staff-paper look) */
header{
  background:
    repeating-linear-gradient(to bottom, transparent 0 47px, rgba(201,164,92,.10) 47px 48px),
    var(--bg);
}

/* this page's nav tab buttons carry a status dot */
nav#nav .nav-tabs button{display:flex; align-items:center; gap:8px;}
nav#nav .nav-tabs button .dot{
  width:7px; height:7px; border-radius:50%; background:var(--line); flex:0 0 auto;
  transition:background .2s;
}
nav#nav .nav-tabs button.active .dot{
  background:var(--pearl); box-shadow:0 0 6px rgba(232,227,216,.6);
}

/* tab panels (this page predates the .phase/.visible naming) */
section.tab-panel{display:none;}
section.tab-panel.active{display:block; animation:fade .25s ease;}
@keyframes fade{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}
@media (prefers-reduced-motion: reduce){ section.tab-panel.active{animation:none;} }

/* this page leans on brass <strong> for emphasis (shared.css styles only <em>) */
strong{color:var(--brass); font-weight:600;}

/* ---------- session structure rows (Session tab) ---------- */
.session-plan{padding:6px 22px;}
.session-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:11px 0; border-bottom:1px solid var(--line);
}
.session-row:last-child{border-bottom:none;}
.session-row .s-label{
  font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink);
}

/* ---------- chord diagrams ---------- */
.chord-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:16px; margin:18px 0;
}
.chord-card{
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
  padding:14px 8px 10px; text-align:center;
}
.chord-card .cname{
  font-family:'Fraunces',serif; font-size:20px; font-weight:600; margin-bottom:6px;
}
.chord-card .cnote{
  font-size:11.5px; color:var(--muted); margin-top:6px; line-height:1.4; padding:0 4px;
}

/* string-name colour in tab blocks (shared.css covers .cnt/.fng only) */
pre.tab .str{color:var(--muted);}

/* ---------- PIMA finger-territory rows ---------- */
.pima-wrap{margin:14px 0;}
.pima-row{
  display:flex; align-items:center; gap:14px; padding:9px 0;
  border-bottom:1px solid var(--line);
}
.pima-row:last-child{border-bottom:none;}
.pima-str{
  font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--muted);
  width:118px; flex:0 0 auto;
}
.pima-line{flex:1; height:0; border-top:1.5px solid var(--brass-dim); position:relative;}
.pima-line.thick{border-top-width:3px;}
.pima-fin{
  width:34px; height:34px; border-radius:50%; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces',serif; font-size:17px; font-weight:700;
}
.fin-p{background:var(--brass); color:var(--bg);}
.fin-i{background:#7FA3B8; color:var(--bg);}
.fin-m{background:var(--sage); color:var(--bg);}
.fin-a{background:var(--red); color:var(--bg);}
.pima-role{font-size:12.5px; color:var(--muted); width:120px; flex:0 0 auto; text-align:right;}