/* strumming.css — appearance for the strumming/arrow renderer (SP-1).
 * Geometry lives in strum-arrow-renderer.js; everything visual is here so it
 * stays themeable + CMS-controllable.  Prefix: .strum-  (see CLAUDE.md). */

.strum-svg { font-family: var(--font-ui, system-ui, sans-serif); display: block; }

.strum-title {
  fill: var(--accent, #e8874a);
  font-size: 15px; font-weight: 700;
}

/* ── Arrows ──────────────────────────────────────────────────────────────
 * Default (gewone slag / normal): thin shaft, filled head, neutral colour. */
.strum-arrow__shaft { stroke: var(--text-1, #ece6df); stroke-width: 2; stroke-linecap: round; }
.strum-arrow__head  { fill: var(--text-1, #ece6df); stroke: none; }

/* Accent (solid, bold, brand colour). */
.strum-arrow--accent .strum-arrow__shaft { stroke: var(--accent, #e8874a); stroke-width: 4; }
.strum-arrow--accent .strum-arrow__head  { fill: var(--accent, #e8874a); }

/* Light accent (licht accent): outline head, medium weight. */
.strum-arrow--light .strum-arrow__shaft { stroke-width: 2.5; }
.strum-arrow--light .strum-arrow__head  { fill: none; stroke: var(--text-1, #ece6df); stroke-width: 2; }

/* Small stroke (kleine slag): lighter neutral. */
.strum-arrow--small .strum-arrow__shaft { stroke-width: 1.75; opacity: .9; }
.strum-arrow--small .strum-arrow__head  { opacity: .9; }

/* Ghost ("wel bewegen, niet aanslaan"): faint outline. */
.strum-arrow--ghost { opacity: .32; }
.strum-arrow--ghost .strum-arrow__head { fill: none; stroke: var(--text-1, #ece6df); stroke-width: 1.5; }

/* Range — dikke (bass) vs dunne (treble) snaren. */
.strum-arrow--range-bass   .strum-arrow__shaft { stroke-width: 4.5; }
.strum-arrow--range-treble .strum-arrow__shaft { stroke-width: 1.5; }

/* ── Decorations ─────────────────────────────────────────────────────────── */
.strum-mute { stroke: var(--muted, #a89f95); stroke-width: 2; stroke-linecap: round; }
.strum-mute--stroke { stroke: var(--text-1, #ece6df); stroke-width: 2.5; }

.strum-bass {
  fill: var(--text-1, #ece6df);
  font-size: 12px; font-weight: 700; text-anchor: middle;
}

.strum-tie { stroke: var(--muted, #a89f95); stroke-width: 1.5; }

/* ── Count row ───────────────────────────────────────────────────────────── */
.strum-count { font-size: 13px; }
.strum-count--beat { fill: var(--text-1, #ece6df); font-weight: 700; }
.strum-count--sub  { fill: var(--muted, #a89f95); font-weight: 400; }

/* ── Editor (SP) ──────────────────────────────────────────────────────────
 * Admin editor UI.  Prefix .strum-ed-.  Geometry (slot left/width) is set in
 * JS; all appearance lives here using design tokens.  Dark-first, theme-safe. */

.strum-ed {
  font-family: var(--font-ui, system-ui, sans-serif);
  color: var(--text-1, #ece6df);
  display: flex; flex-direction: column; gap: 14px;
  max-width: 100%;
}

/* Toolbar (meta controls). */
.strum-ed-toolbar {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px;
  padding: 12px;
  background: var(--surface, #1c1a18);
  border: 1px solid var(--line, #322e2a);
  border-radius: 10px;
}
.strum-ed-field { display: flex; flex-direction: column; gap: 4px; }
.strum-ed-field-label {
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted, #a89f95);
}
.strum-ed-name, .strum-ed-select {
  appearance: none;
  background: var(--bg-1, #141210);
  color: var(--text-1, #ece6df);
  border: 1px solid var(--line, #322e2a);
  border-radius: 7px;
  padding: 7px 9px; font-size: 13px; line-height: 1.2;
}
.strum-ed-name { min-width: 160px; }
.strum-ed-label-input { min-width: 90px; max-width: 110px; }
.strum-ed-select { padding-right: 24px; cursor: pointer; }
.strum-ed-name:focus, .strum-ed-select:focus {
  outline: none;
  border-color: var(--accent, #e8874a);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb, 232,135,74), .35);
}

/* Bars stepper. */
.strum-ed-stepper {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--line, #322e2a); border-radius: 7px; overflow: hidden;
}
.strum-ed-step-btn {
  background: var(--bg-1, #141210); color: var(--text-1, #ece6df);
  border: none; padding: 7px 11px; font-size: 14px; cursor: pointer;
}
.strum-ed-step-btn:hover { background: var(--surface, #1c1a18); }
.strum-ed-step-val {
  min-width: 30px; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; background: var(--bg-1, #141210);
}

/* Radio bars (tool + dynamic). */
.strum-ed-radios { display: flex; flex-wrap: wrap; gap: 6px; }
.strum-ed-radio {
  background: var(--surface, #1c1a18);
  color: var(--text-1, #ece6df);
  border: 1px solid var(--line, #322e2a);
  border-radius: 7px;
  padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer;
  min-width: 40px; text-align: center;
  transition: background .12s ease, border-color .12s ease;
}
.strum-ed-radio:hover { background: var(--bg-1, #141210); border-color: var(--muted, #a89f95); }
.strum-ed-radio.is-active {
  background: var(--accent, #e8874a);
  border-color: var(--accent, #e8874a);
  color: #1a1208;
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb, 232,135,74), .3);
}

/* ── ONE working strip: tools + dynamics + fingers + transport, directly
 * above the canvas (UI pass 2026-07-03 — canvas-click rework).  Wraps on
 * narrow viewports; the divider only shows once it wraps onto its own row
 * since it's just a flex item like the others. ── */
.strum-ed-workstrip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--surface, #1c1a18);
  border: 1px solid var(--line, #322e2a);
  border-radius: 10px 10px 0 0;
  border-bottom: none;
  margin-bottom: calc(-1 * var(--space-md, 14px));   /* attach flush to the canvas below, overriding .strum-ed's flex gap */
}
.strum-ed-workstrip-divider {
  width: 1px; align-self: stretch; min-height: 28px;
  background: var(--line, #322e2a);
  margin: 0 2px;
}

/* ── Playback transport ─────────────────────────────────────────────────── */
.strum-ed-transport {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
}
.strum-ed-transport--disabled { opacity: .55; }
.strum-ed-tp-btn {
  background: var(--bg-1, #141210); color: var(--text-1, #ece6df);
  border: 1px solid var(--line, #322e2a); border-radius: 7px;
  padding: 7px 12px; font-size: 14px; font-weight: 600; cursor: pointer;
  min-width: 40px; line-height: 1;
}
.strum-ed-tp-btn:hover:not(:disabled) { border-color: var(--accent, #e8874a); }
.strum-ed-tp-btn:disabled { cursor: not-allowed; opacity: .6; }
.strum-ed-tp-play { min-width: 46px; }
.strum-ed-tp-tgl.is-on {
  background: var(--accent, #e8874a); border-color: var(--accent, #e8874a); color: #1a1208;
}
.strum-ed-tp-bpm-wrap {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted, #a89f95);
}
.strum-ed-tp-bpm {
  width: 60px;
  background: var(--bg-1, #141210); color: var(--text-1, #ece6df);
  border: 1px solid var(--line, #322e2a); border-radius: 7px;
  padding: 6px 8px; font-size: 13px;
}
.strum-ed-tp-bpm:focus {
  outline: none; border-color: var(--accent, #e8874a);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb, 232,135,74), .35);
}
.strum-ed-tp-disabled-note { font-size: 12px; color: var(--muted, #a89f95); }

/* Preview card = the canvas.  Sits directly under the workstrip (shared
 * top/bottom radius so they read as one attached unit). */
.strum-ed-preview-card {
  padding: 18px 14px;
  background: var(--surface, #1c1a18);
  border: 1px solid var(--line, #322e2a);
  border-radius: 0 0 10px 10px;
  overflow-x: auto;
}
.strum-ed-preview { position: relative; min-height: 60px; }
.strum-ed-preview--clickable { cursor: crosshair; }

/* Hover ghost + playback cursor — translucent full-height bands drawn
 * straight into the live preview SVG (see strum-editor.js _svgSlotOverlayRect). */
.strum-ed-hover-ghost { fill: var(--text-1, #ece6df); opacity: .1; }
.strum-ed-play-cursor { fill: var(--accent, #e8874a); opacity: .22; }

/* Empty-state guidance rendered INSIDE the canvas (mirrors tab-module's
 * .fbktab-empty-hint technique with strum's own tokens/prefix). */
.strum-ed-empty-hint {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  margin: 0; max-width: 34em;
  text-align: center; pointer-events: none;
  font-size: var(--font-sm, 12.5px);
  color: var(--muted, #a89f95);
  background: var(--bg-1, #141210);
  border: 1px dashed var(--line, #322e2a);
  border-radius: 8px;
  padding: 10px 14px;
}
.strum-ed-empty-hint kbd {
  display: inline-block;
  background: var(--surface, #1c1a18);
  border: 1px solid var(--line, #322e2a);
  border-radius: 4px;
  padding: 0 4px;
  font-size: .92em;
  color: var(--text-1, #ece6df);
}

/* Action buttons. */
.strum-ed-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.strum-ed-btn {
  background: var(--surface, #1c1a18);
  color: var(--text-1, #ece6df);
  border: 1px solid var(--line, #322e2a);
  border-radius: 7px; padding: 8px 14px; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: background .12s ease, border-color .12s ease;
}
.strum-ed-btn:hover { background: var(--bg-1, #141210); border-color: var(--muted, #a89f95); }
.strum-ed-btn--primary {
  background: var(--accent, #e8874a); border-color: var(--accent, #e8874a); color: #1a1208;
}
.strum-ed-btn--primary:hover { filter: brightness(1.06); background: var(--accent, #e8874a); }

/* Library list. */
.strum-ed-lib {
  padding: 12px;
  background: var(--surface, #1c1a18);
  border: 1px solid var(--line, #322e2a);
  border-radius: 10px;
}
.strum-ed-lib-head {
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted, #a89f95); margin-bottom: 8px;
}
.strum-ed-lib-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.strum-ed-lib-empty { color: var(--muted, #a89f95); font-size: 13px; padding: 4px 0; }
.strum-ed-lib-item {
  display: flex; align-items: center; gap: 6px;
  border: 1px solid var(--line, #322e2a); border-radius: 7px;
  background: var(--bg-1, #141210);
}
.strum-ed-lib-name {
  flex: 1; text-align: left; background: none; border: none;
  color: var(--text-1, #ece6df); font-size: 13px; padding: 8px 10px; cursor: pointer;
  border-radius: 7px;
}
.strum-ed-lib-name:hover { color: var(--accent, #e8874a); }
.strum-ed-lib-del {
  background: none; border: none; color: var(--muted, #a89f95);
  font-size: 16px; line-height: 1; padding: 6px 10px; cursor: pointer; border-radius: 7px;
}
.strum-ed-lib-del:hover { color: #e06a5a; }

/* Fingerstyle pluck grid (strings × positions) — the fingerstyle editing
 * surface (see the honesty note in strum-editor.js by the pluck-grid builder:
 * FBKTab's layout() only emits hit regions for beats/rests that already
 * exist, so canvas-clicking an EMPTY fingerstyle slot isn't reliable).  Sits
 * directly under the canvas, gated to fingerstyle mode.  Geometry (left/top)
 * set in JS. */
.strum-ed-pluck-wrap { overflow-x: auto; padding: 10px 0 2px; }
.strum-ed-pluck { position: relative; }
.strum-ed-pcell {
  position: absolute; transform: translateX(-50%);
  width: 22px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface, #1c1a18);
  border: 1px solid var(--line, #322e2a); border-radius: 5px;
  color: var(--text-1, #ece6df); font-size: 12px; font-weight: 700; cursor: pointer;
  transition: background .1s ease, border-color .1s ease;
}
.strum-ed-pcell:hover { border-color: var(--accent, #e8874a); background: var(--bg-1, #141210); }
.strum-ed-pcell.is-filled {
  background: rgba(var(--accent-rgb, 232,135,74), .2);
  border-color: var(--accent, #e8874a); color: var(--accent, #e8874a);
}
.strum-ed-pcount {
  position: absolute; transform: translateX(-50%);
  font-size: 11px; color: var(--muted, #a89f95); pointer-events: none;
}
.strum-ed-pcount--beat { color: var(--text-1, #ece6df); font-weight: 700; }

/* ── Style settings panel (B1) ───────────────────────────────────────────── */
/* Style select + ⚙ gear button sit on one row. */
.strum-ed-stylewrap { display: flex; align-items: stretch; gap: 6px; }
.strum-ed-gear {
  background: var(--surface, #1c1a18);
  color: var(--muted, #a89f95);
  border: 1px solid var(--line, #322e2a);
  border-radius: 7px; padding: 0 10px; font-size: 14px; line-height: 1;
  cursor: pointer; transition: color .1s ease, border-color .1s ease;
}
.strum-ed-gear:hover { color: var(--text-1, #ece6df); border-color: var(--muted, #a89f95); }
.strum-ed-gear.is-active { color: var(--accent, #e8874a); border-color: var(--accent, #e8874a); }

.strum-ed-stylepop {
  margin: 8px 0 0;
  padding: 12px;
  background: var(--surface, #1c1a18);
  border: 1px solid var(--line, #322e2a);
  border-radius: 10px;
  display: flex; flex-direction: column; gap: 10px;
}
.strum-ed-stylepop-head {
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--accent, #e8874a);
}
.strum-ed-stylepop-grouphead {
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted, #a89f95);
}
.strum-ed-stylepop-colors {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px;
}
.strum-ed-stylepop-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.strum-ed-stylepop-field { display: flex; flex-direction: column; gap: 4px; }
.strum-ed-stylepop-label {
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted, #a89f95);
}
.strum-ed-stylepop-color {
  width: 100%; height: 30px; padding: 2px;
  background: var(--bg-1, #141210);
  border: 1px solid var(--line, #322e2a); border-radius: 7px; cursor: pointer;
}
.strum-ed-stylepop-num {
  width: 76px; appearance: none;
  background: var(--bg-1, #141210); color: var(--text-1, #ece6df);
  border: 1px solid var(--line, #322e2a); border-radius: 7px;
  padding: 6px 8px; font-size: 13px;
}
.strum-ed-stylepop-num:focus, .strum-ed-stylepop-select:focus {
  outline: none; border-color: var(--accent, #e8874a);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb, 232,135,74), .35);
}
.strum-ed-stylepop-ghostop { display: flex; align-items: center; gap: 8px; }
.strum-ed-stylepop-range { width: 120px; accent-color: var(--accent, #e8874a); }
.strum-ed-stylepop-rangeval {
  font-size: 12px; color: var(--text-1, #ece6df); min-width: 30px; text-align: right;
}
.strum-ed-stylepop-toggle { display: flex; align-items: center; gap: 6px; }
.strum-ed-stylepop-toggle input { accent-color: var(--accent, #e8874a); }
.strum-ed-stylepop-togglelab { font-size: 13px; color: var(--text-1, #ece6df); }
.strum-ed-stylepop-saverow {
  display: flex; align-items: center; gap: 8px;
  padding-top: 8px; border-top: 1px solid var(--line, #322e2a);
}
.strum-ed-stylepop-name { flex: 1; }

/* ── UI pass 2026-07-02: header / disclosure / labeled tool rows / hint ── */
.strum-ed-head { margin: 0 0 var(--space-md, 14px); }
.strum-ed-title {
  margin: 0 0 var(--space-xs, 4px);
  font-size: var(--font-2xl, 24px);
  font-weight: var(--weight-bold, 700);
  color: var(--text, #2a2a26);
}
.strum-ed-lede {
  margin: 0;
  font-size: var(--font-base, 14px);
  color: var(--text-2, #6b655d);
  line-height: 1.5;
}

.strum-ed-disclose-h {
  display: block;
  width: 100%;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  font: inherit;
  font-size: var(--font-xs, 11px);
  font-weight: var(--weight-bold, 700);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-3, #9a938a);
  margin: var(--space-sm, 8px) 0 var(--space-xs, 4px);
  padding: 0;
}
.strum-ed-disclose-h:hover { color: var(--text, #2a2a26); }
.strum-ed-disclose-arrow { display: inline-block; transition: transform .15s; }
.strum-ed-disclose-h.open .strum-ed-disclose-arrow { transform: rotate(90deg); }
.strum-ed-disclose-body { margin: 0 0 var(--space-sm, 8px); }

.strum-ed-radios-label {
  flex: 0 0 auto;
  align-self: center;
  min-width: 4.5em;
  font-size: var(--font-xs, 11px);
  font-weight: var(--weight-bold, 700);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-3, #9a938a);
}

.strum-ed-label-inline { margin-left: auto; }