/* =========================
   Learn — layout + keyboard
   ========================= */

.container { padding:24px 16px; }
.lesson-header { margin:8px 0 16px; }
.back-link{ color:#374151; text-decoration:none; }
.back-link:hover{ text-decoration:underline; }
.text-muted{ color:#6b7280; }

.lesson-layout{
  display:grid; grid-template-columns:minmax(360px,480px) 1fr;
  gap:16px; align-items:start;
}
@media (max-width: 960px){ .lesson-layout{ grid-template-columns:1fr; } }

.keyboard-wrap{
  background:#e8eef7; border:1px solid #d7deeb; border-radius:12px; padding:10px;
}
.keyboard-wrap object#keyboard-svg{ width:100%; height:260px; display:block; }

.finger-legend{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; font-size:12px; }
.fg{ padding:2px 6px; border-radius:6px; background:#eef2f7; color:#111827; }
.fg-lp{ background:#fde2e2 } .fg-lr{ background:#ffe3d6 } .fg-lm{ background:#fde8b4 } .fg-li{ background:#d7f7ea }
.fg-ri{ background:#bdf7df } .fg-rm{ background:#d7eaff } .fg-rr{ background:#dde0ff } .fg-rp{ background:#edd7ff } .fg-th{ }

.metrics{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin:10px 0; }
.controls{ display:flex; flex-wrap:wrap; gap:8px; }
.btn{ background:#111827; color:#fff; border:none; border-radius:8px; padding:8px 12px; cursor:pointer; }
.btn:hover{ filter:brightness(1.05); }
.btn-lite{ background:#e5e7eb; color:#111827; }
.btn-alt{ background:#2563eb; color:#fff; }

.drill-card{ border:1px solid #e5e7eb; border-radius:12px; background:#fff; padding:12px; }
.drill-head{ display:flex; justify-content:space-between; align-items:center; gap:8px; }
.drill-text{
  border:1px dashed #d1d5db; border-radius:8px; min-height:200px; padding:12px;
  white-space:pre-wrap; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;
  background:#fafafa;
}
.drill-text span.ok{ color:#10b981; }
.drill-text span.err{ color:#ef4444; text-decoration:underline wavy; }
.drill-input{ width:100%; border:1px solid #e5e7eb; border-radius:8px; padding:10px; margin-top:10px; height:90px; background:#f9fafb; }

/* ===== SVG keyboard styles ===== */
svg .key-rect{ fill:#ffffff; stroke:#9aa6b2; stroke-width:1; rx:8; ry:8; }
svg g.key:hover .key-rect{ fill:#f2f4f7; }

/* Sharper, darker labels */
svg .key-label{
  font-family:"DejaVu Sans Mono","Cascadia Mono","Menlo","Consolas",monospace;
  font-size:13.5px; font-weight:600; fill:#0f172a;
  dominant-baseline:middle; text-anchor:middle;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

svg .active-key{ fill:#2dd24c !important; }  /* persistent guide */
svg .key-press{ filter:drop-shadow(0 0 6px rgba(16,185,129,.6)); } /* quick flash */

svg .hand-outline{ stroke:#6b7280; stroke-width:2.2; fill:#f8fafc; }
svg .hand-stroke{ stroke:#6b7280; fill:none; stroke-width:2.2; stroke-linecap:round; }

svg .finger-dot{ fill:#159c36; opacity:0; transition:opacity .12s ease; }
svg .finger-dot.show{ opacity:1; }

svg .pressed { filter: drop-shadow(0 0 6px rgba(37,99,235,.5)); }