/*
 * Fretboard viewer — styles.
 *
 * @ui @fretboard @sikhra
 *
 * Warm-antiquarian theme (rosewood + parchment + brass) for the fretboard
 * palace at https://sikhra.skylark.baby. Loaded by index.html; the viewer logic
 * is in app.js and the fret-mosaic tiles in mosaics.js.
 *
 * Sections: theme vars · header/controls · fretboard (neck, strings, mosaic
 * surface) · composite card · side panels/legend.
 * Keywords: theme, fretboard, neck, string, mosaic surface, composite card, parchment.
 */
:root{
  --bg:#15100b; --bg2:#1d160e; --wood:#2a1a10; --wood2:#34200f; --wood-edge:#3f2916;
  --brass:#c9a227; --brass-hi:#e7cb6a; --bone:#e9dcbf;
  --parch:#efe5ce; --parch-edge:#d8c49b; --parch-deep:#e4d6b6;
  --ink:#2b2114; --ink-soft:#7a6437; --ink-faint:#a8966a;
  --cream:#ece0c4; --cream-dim:#b6a47c; --cream-faint:#7d6e4f;
  --ember:#db742a; --ember-hi:#f0964a;
  --display:'Cormorant Garamond',Georgia,serif;
  --body:'Spectral',Georgia,serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:var(--body); color:var(--cream); background:var(--bg);
  background-image:
    radial-gradient(1200px 600px at 80% -10%, rgba(201,162,39,.10), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(219,116,42,.08), transparent 55%);
  -webkit-font-smoothing:antialiased; line-height:1.5; min-height:100vh;
  padding:clamp(16px,3vw,40px); display:flex; flex-direction:column;
}
/* faint paper grain */
body::before{
  content:''; position:fixed; inset:0; pointer-events:none; opacity:.04; z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.wrap{position:relative; z-index:1; max-width:1180px; width:100%; margin:auto}

/* ── Header ── */
header{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:28px}
.brand h1{
  font-family:var(--display); font-weight:600; font-size:clamp(38px,6vw,64px);
  line-height:.92; letter-spacing:.01em; color:var(--bone);
  text-shadow:0 1px 0 rgba(0,0,0,.5);
}
.brand h1 em{font-style:italic; color:var(--brass-hi)}
.brand .sub{
  font-family:var(--body); font-weight:300; font-style:italic;
  color:var(--cream-dim); font-size:15px; margin-top:6px; letter-spacing:.02em;
}
.brand .tuning{font-family:var(--mono); font-size:11px; color:var(--cream-faint); margin-top:8px; letter-spacing:.12em}
.controls{display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:flex-end}
.seg{display:inline-flex; border:1px solid rgba(201,162,39,.35); border-radius:999px; overflow:hidden; background:rgba(0,0,0,.2)}
.seg button{
  font-family:var(--body); font-size:13px; letter-spacing:.04em; color:var(--cream-dim);
  background:transparent; border:none; padding:7px 15px; cursor:pointer; transition:.18s;
}
.seg button.on{background:var(--brass); color:#231804; font-weight:600}
.seg button:hover:not(.on){color:var(--cream)}
.btn{
  font-family:var(--body); font-size:13px; letter-spacing:.04em; color:var(--cream);
  background:rgba(219,116,42,.14); border:1px solid rgba(219,116,42,.4); border-radius:999px;
  padding:7px 16px; cursor:pointer; transition:.18s;
}
.btn:hover{background:rgba(219,116,42,.26); border-color:var(--ember)}
.btn-sm{padding:5px 11px; font-size:12px}
.sel{font-family:var(--body); font-size:13px; color:var(--cream); background:rgba(0,0,0,.25);
  border:1px solid rgba(201,162,39,.35); border-radius:999px; padding:7px 13px; cursor:pointer; outline:none}
.sel:hover{border-color:var(--brass)}
.sel option{background:#1d160e; color:var(--cream)}
.custom-bar{display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:rgba(0,0,0,.22); border:1px solid rgba(201,162,39,.2); border-radius:12px;
  padding:12px 16px; margin-bottom:16px}
.cb-label{font-family:var(--display); font-style:italic; font-size:16px; color:var(--brass-hi)}
.cb-strings{display:flex; gap:8px; flex-wrap:wrap}
.cb-str{display:flex; flex-direction:column; align-items:center; gap:3px; font-family:var(--mono); font-size:10px; color:var(--cream-faint)}
.cb-str select{font-family:var(--mono); font-size:12px; color:var(--cream); background:rgba(0,0,0,.3);
  border:1px solid rgba(201,162,39,.3); border-radius:6px; padding:3px 5px; outline:none}
.cb-str select option{background:#1d160e}

/* ── Fretboard ── */
.neck-frame{
  background:linear-gradient(180deg,var(--wood2),var(--wood)); border:1px solid var(--wood-edge);
  border-radius:14px; padding:14px 14px 8px; box-shadow:0 20px 50px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,220,150,.06);
  overflow-x:auto;
}
.board{--cell:40px; --nut:46px; --row:42px; min-width:max-content; margin:0 auto}
.fretnums{display:grid; grid-template-columns:var(--nut) repeat(24,var(--cell)); margin-bottom:4px}
.fretnums div{
  text-align:center; font-family:var(--mono); font-size:10px; color:var(--cream-faint); letter-spacing:.05em;
  display:flex; flex-direction:column; align-items:center; gap:3px; padding-top:2px;
}
.fretnums .dot{width:6px; height:6px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #fff8e6, #c9b78a 70%, #897748); box-shadow:0 0 4px rgba(255,240,200,.4)}
.fretnums .dot.dbl{box-shadow:-7px 0 0 -1px rgba(0,0,0,0), 7px 0 0 0 transparent}
.fretnums .dbl-wrap{display:flex; gap:8px}
.string-row{display:grid; grid-template-columns:var(--nut) repeat(24,var(--cell))}
.pos{
  position:relative; height:var(--row); border:none; background:transparent; cursor:pointer; padding:0;
  border-right:2px solid #6b4a22; /* fret wire */
  font-family:var(--mono); font-size:11px; color:var(--cream);
}
.pos:first-child{border-right:5px solid var(--bone)} /* nut */
.string-row .pos.marker{background:linear-gradient(rgba(201,162,39,.07),rgba(201,162,39,.07))}
/* the string itself */
.pos::before{
  content:''; position:absolute; left:0; right:0; top:50%; transform:translateY(-50%);
  height:var(--sw,3px); background:var(--sc,#aaa);
  background-image:linear-gradient(180deg, rgba(255,255,255,.45), rgba(0,0,0,.35));
  box-shadow:0 1px 2px rgba(0,0,0,.4);
}
.pos .lbl{position:relative; z-index:2; display:inline-block; padding:1px 5px; border-radius:5px;
  font-weight:600; background:rgba(12,8,5,.74); box-shadow:0 1px 2px rgba(0,0,0,.45)}
.pos.acc .lbl{color:var(--brass-hi)}
.pos.open .lbl{color:#231804; background:var(--brass-hi); box-shadow:0 1px 3px rgba(0,0,0,.5)}
.pos:hover{outline:none}
.pos:hover .lbl, .pos:focus-visible .lbl{color:#231804; background:var(--brass-hi)}
.pos.sel::after, .pos:hover::after{
  content:''; position:absolute; z-index:1; top:50%; left:50%; transform:translate(-50%,-50%);
  width:26px; height:26px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--ember-hi), var(--ember) 65%, #8a3d12);
  box-shadow:0 2px 8px rgba(0,0,0,.5), 0 0 0 2px rgba(240,150,74,.25);
}
.pos.sel > *, .pos:hover > *{visibility:hidden}
body.quiz .pos .lbl{visibility:hidden}
body.quiz .pos.revealed .lbl{visibility:visible}
.string-name{
  display:flex; align-items:center; justify-content:flex-end; gap:7px; padding-right:12px;
  font-family:var(--mono); font-size:11px; color:var(--cream-faint);
}
.string-name .sw{width:14px; height:var(--sw,3px); border-radius:2px; background:var(--sc,#aaa)}
.grid-with-names{display:grid; grid-template-columns:74px 1fr}
.board-body{position:relative}
.fret-surface{position:absolute; inset:0; display:grid; z-index:0; opacity:.9; pointer-events:none; border-radius:4px; overflow:hidden}
.fret-surface > i{display:block; height:100%}
.rows{position:relative; z-index:1}
body.no-mosaic .fret-surface{display:none}
.names-col{display:grid}
.names-col .fretnums-pad{height:22px}

/* ── Composite card ── */
.stage{display:grid; grid-template-columns:1.1fr .9fr; gap:22px; margin-top:26px; align-items:start}
@media(max-width:760px){.stage{grid-template-columns:1fr}}
.card{
  background:
    linear-gradient(180deg,var(--parch),var(--parch-deep));
  color:var(--ink); border:1px solid var(--parch-edge); border-radius:12px;
  padding:26px 28px; box-shadow:0 16px 40px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.5);
  position:relative; min-height:260px;
}
.card::after{content:''; position:absolute; inset:7px; border:1px solid rgba(123,90,40,.22); border-radius:8px; pointer-events:none}
.card .empty{font-family:var(--display); font-style:italic; font-size:24px; color:var(--ink-soft); text-align:center; margin-top:64px}
.card .topline{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap}
.card .pitch{font-family:var(--display); font-weight:600; font-size:64px; line-height:.92; color:var(--ink)}
.card .solf{font-family:var(--display); font-style:italic; font-size:30px; color:var(--ember)}
.card .obj{margin-left:auto; text-align:right}
.card .obj .nm{font-family:var(--display); font-size:30px; font-weight:600; color:var(--ink)}
.card .obj .tr{font-size:12px; color:var(--ink-soft); font-style:italic}
.card .obj-img{width:112px; height:112px; object-fit:contain; display:block; margin:0 0 8px auto; filter:drop-shadow(0 3px 7px rgba(80,50,20,.28))}
.card .coords{font-family:var(--mono); font-size:11px; color:var(--ink-soft); letter-spacing:.05em; margin-top:12px}
.layers{margin-top:22px; display:flex; flex-direction:column; gap:14px}
.layer{display:grid; grid-template-columns:78px 1fr; gap:14px; align-items:start}
.layer .k{font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); padding-top:3px}
.layer .v{font-size:15px; color:var(--ink)}
.layer .v .cue{font-style:italic; color:#4a3a22; font-size:14px; display:block; margin-top:2px}
.swatches{display:inline-flex; gap:5px; margin-left:6px; vertical-align:middle}
.swatches i{width:13px; height:13px; border-radius:50%; border:1px solid rgba(0,0,0,.15); display:inline-block}
.divider{height:1px; background:linear-gradient(90deg,transparent,rgba(123,90,40,.3),transparent); margin:2px 0}

/* side panel: how-to + legend */
.aside{display:flex; flex-direction:column; gap:18px}
.panel{background:rgba(0,0,0,.22); border:1px solid rgba(201,162,39,.18); border-radius:12px; padding:20px 22px}
.panel h3{font-family:var(--display); font-weight:600; font-size:22px; color:var(--brass-hi); margin-bottom:10px}
.panel p{font-size:14px; color:var(--cream-dim); margin-bottom:8px}
.legend{display:flex; flex-direction:column; gap:7px; margin-top:4px}
.legend .row{display:flex; align-items:center; gap:10px; font-size:13px; color:var(--cream-dim)}
.legend .row .sw{width:22px; height:5px; border-radius:3px}
.legend .row b{color:var(--cream); font-weight:500; font-family:var(--mono); font-size:11px; width:18px}
footer{margin-top:30px; text-align:center; font-size:12px; color:var(--cream-faint); font-style:italic}
.loading{font-family:var(--display); font-style:italic; font-size:22px; color:var(--cream-dim); text-align:center; padding:60px}
@keyframes fadeUp{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:translateY(0)}}
.string-row{animation:fadeUp .5s cubic-bezier(.16,1,.3,1) both; position:relative}

/* ── String materials (full view), on-board symbols, full-view layout ── */
.strand{display:none; position:absolute; left:0; right:0; top:50%; transform:translateY(-50%);
  height:22px; z-index:0; pointer-events:none; background-repeat:repeat-x; background-size:auto 100%}
.ring{display:inline-block; width:13px; height:13px; border-radius:50%; border:2px solid var(--cream-dim); background:rgba(12,8,5,.45)}
.pos-img{width:30px; height:30px; object-fit:contain; vertical-align:middle; filter:drop-shadow(0 1px 2px rgba(0,0,0,.55))}
.lbl .oct{font-size:.66em; opacity:.66; margin-left:.5px}
body:not(.fullview) .lbl .oct{display:none}

#fvBar{display:none}
body.fullview{overflow:hidden}
body.fullview .wrap{max-width:none; width:100%; margin:0}
body.fullview > .wrap > header, body.fullview .stage, body.fullview footer, body.fullview #customBar{display:none}
body.fullview #fvBar{display:flex; align-items:center; gap:14px; position:fixed; top:0; left:0; right:0;
  height:56px; padding:0 18px; background:linear-gradient(180deg,#241a10,#19120a);
  border-bottom:1px solid var(--wood-edge); z-index:60}
.fv-brand{font-family:var(--display); font-weight:600; font-size:22px; color:var(--bone); letter-spacing:.01em}
.fv-brand em{font-style:italic; color:var(--brass-hi)}
.fv-toggles{display:flex; gap:9px; align-items:center; flex-wrap:wrap}
#fvBar .spacer{margin-left:auto}
body.fullview .neck-frame{position:fixed; top:56px; left:0; right:0; bottom:0; margin:0; border:none;
  border-radius:0; display:flex; align-items:center; justify-content:center; overflow:auto}
body.fullview .board{margin:auto}
body.fullview .pos .lbl{font-size:clamp(11px,1.5vw,19px)}
body.fullview .ring{width:18px; height:18px}
body.fullview .pos-img{width:clamp(26px,3.6vw,54px); height:clamp(26px,3.6vw,54px)}
body.fullview .strand{display:block; height:clamp(14px,2.6vh,30px)}
body.fullview.no-strings .strand{display:none}
body.fullview .pos::before{display:none}
body.fullview.no-strings .pos::before{display:block}