/* ThunderChords — stage night (dark) + warm stone (light) */
:root,[data-theme=light]{
  --bg:#ebe6dc;--bg2:#f4f0e8;--panel:#fffcf7;--ink:#1a1f28;--mute:#5c6570;--line:#d4cdc2;
  --chord:#c4922a;--sec:#8a6a3a;--btn:#e8e2d6;--danger:#c23b3b;--warn:#b45309;
  --theme-meta:#ebe6dc;--fs:17px;
  --font:"DM Sans",system-ui,sans-serif;--font-brand:Syne,"DM Sans",sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --grain:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}
[data-theme=dark]{
  --bg:#12171f;--bg2:#1a2330;--panel:#1e2836;--ink:#e8ebf0;--mute:#97a1b0;--line:#2f3a49;
  --chord:#e8b84a;--sec:#c4a574;--btn:#2a3647;--danger:#e07070;--warn:#e8a04a;
  --theme-meta:#12171f;
  --grain:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E");
}
html{color-scheme:light dark;transition:background-color .18s ease,color .18s ease}
[data-theme=light]{color-scheme:light}
[data-theme=dark]{color-scheme:dark}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{
  margin:0;color:var(--ink);font:16px/1.5 var(--font);
  background-color:var(--bg);
  background-image:var(--grain),linear-gradient(165deg,var(--bg) 0%,var(--bg2) 55%,var(--bg) 100%);
  background-attachment:fixed;min-height:100vh;
}
a{color:inherit;text-decoration:none}
h1,h2,.brand{font-family:var(--font-brand)}
h2{font-size:1.1rem;margin:1.4rem 0 .5rem;font-weight:700}
h3{font-size:.95rem;margin:0 0 4px;font-weight:600}
.wrap{max-width:900px;margin:0 auto;padding:8px 16px 80px}
.bar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;max-width:900px;margin:0 auto;padding:14px 16px}
.bar h1,.brand{margin:0;font-size:1.45rem;font-weight:700;letter-spacing:-.02em}
.ttl{flex:1;min-width:0}.ttl h1{font-family:var(--font-brand);font-size:1.25rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:700px){.bar .ttl{flex:1 1 100%;order:3}.bar input.ttl{order:3;flex:1 1 100%}}
.muted{color:var(--mute)}
input,select,textarea,button,.btn{font:inherit;color:inherit;border:1px solid var(--line);border-radius:8px;padding:7px 12px;background:var(--panel)}
input[type=search]{flex:1;min-width:0}
input[type=checkbox]{width:1.1rem;height:1.1rem;padding:0}
button,.btn{background:var(--btn);cursor:pointer;display:inline-block;transition:filter .12s ease}
button:disabled{opacity:.5;cursor:not-allowed}
button:active:not(:disabled),.btn:active{filter:brightness(1.08)}
.primary{background:var(--chord);color:#12171f;border-color:transparent;font-weight:600}
.mode.on{color:#12171f}
.chip.on{color:#12171f}
.primary:active{filter:brightness(.95)}
:focus-visible{outline:2px solid var(--chord);outline-offset:2px}
#offline{background:var(--warn);color:#fff;text-align:center;padding:6px 12px;font-size:.9rem}
.theme-btn{min-width:4.5rem}

/* library */
.filters{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;padding:4px 0 12px}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.chip{padding:4px 12px;border-radius:8px;font-size:.9rem}
.chip.on{background:var(--chord);border-color:transparent}
.list{list-style:none;margin:0;padding:0}
.list li{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line);padding:0 4px}
.list li>a{flex:1;min-width:0;display:grid;grid-template-columns:1fr auto;gap:0 12px;padding:12px 8px;border-radius:8px;transition:background .15s ease}
.list li>a:hover,.list li>a:focus-visible{background:var(--panel)}
.list li>.meta{flex:1;padding:10px 0}
.list .t{font-weight:600}.list .a{color:var(--mute);grid-column:1}
.list .k{grid-column:2;grid-row:1/3;align-self:center;color:var(--chord);font:700 1rem var(--font-mono)}
.rowacts{display:flex;gap:6px;flex-shrink:0;align-items:center}
.rowacts .btn,button[data-del-medley]{padding:4px 10px;font-size:.9rem}
.medhint{margin:0 0 8px;font-size:.9rem}
.selbar{position:sticky;bottom:0;display:flex;gap:10px;align-items:center;padding:10px 12px;background:var(--panel);border-top:1px solid var(--line);border-radius:10px 10px 0 0}
.foot{margin-top:2rem}
a.btn[aria-disabled=true]{opacity:.5;pointer-events:none;cursor:not-allowed}

/* viewer */
.sticky{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--panel) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.tools{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 16px;padding:8px 16px}
.plnav{display:flex;justify-content:center;align-items:center;gap:14px;padding:8px 16px;border-bottom:1px solid var(--line);font-weight:500}
.panel{padding:8px 16px;display:grid;gap:6px;justify-items:start}
.grp{display:flex;align-items:center;gap:6px}
.grp span{color:var(--mute);font-size:.85rem}
.grp b{min-width:2.2ch;text-align:center;font-variant-numeric:tabular-nums}
.grp button{min-width:2rem;padding:5px 8px}
#tval,#cval{cursor:pointer;color:var(--chord)}
#sheet,.sheet{margin:16px 0;overflow-x:auto;white-space:pre;font:var(--fs)/1.45 var(--font-mono)}
.l{min-height:1.45em}
.blk{break-inside:avoid}
.ch{color:var(--chord);font-weight:700}
.sec{color:var(--sec);font-weight:600}
.tun{color:var(--mute)}
.tab{overflow-x:auto}
.dv{margin:1.2em 0 .4em;padding-top:.4em;border-top:1px solid var(--line);color:var(--mute);font:600 .85rem var(--font);white-space:normal}
body.cols{overflow:hidden}
body.cols #sheet{column-count:2;column-gap:2rem;column-fill:auto;overflow:hidden;cursor:pointer}
.preview .sheet{max-height:60vh;overflow:auto;border:1px solid var(--line);border-radius:8px;padding:8px 12px;background:var(--panel)}

/* editing and lists you can reorder */
#editor{display:grid;gap:8px;margin-top:12px}
#editor textarea{min-height:60vh;white-space:pre;font-family:var(--font-mono)}
.row{display:flex;gap:8px;flex-wrap:wrap}.row>input,.row>select{flex:1;min-width:0}
.danger{margin-left:auto;color:var(--danger)}
.items{list-style:none;margin:8px 0;padding:0}
.items li{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px;margin-bottom:8px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.items .meta{flex:1;min-width:180px;display:grid}
.items li.over{outline:2px dashed var(--chord)}
.items li.drag{opacity:.5}
.grip{cursor:grab;touch-action:none;user-select:none;padding:4px 10px;font-size:1.3rem;color:var(--mute)}
.secs{display:flex;flex-wrap:wrap;gap:4px 14px;padding:6px 0}
details summary{cursor:pointer;color:var(--chord)}

/* dialogs */
dialog{width:min(560px,92vw);padding:22px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--ink);box-shadow:0 16px 48px #0004}
dialog.wide{width:min(980px,96vw)}
dialog::backdrop{background:#0a0e1488}
dialog h2{margin:0;font-size:1.25rem}
dialog section{display:grid;gap:8px;margin-bottom:18px}
dialog textarea{min-height:140px;font-family:var(--font-mono)}
.dlghead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.iconbtn{border:none;background:transparent;padding:4px 8px;color:var(--mute);font-size:1.1rem;line-height:1}
.addform{display:grid;gap:12px}
.modes{display:flex;gap:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;width:fit-content}
.mode{border:none;border-radius:0;background:transparent;padding:6px 14px}
.mode.on{background:var(--chord);font-weight:600}
.modepane{display:grid;gap:8px}
#mode-paste textarea{min-height:240px;font-family:var(--font-mono)}
.dlgactions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;align-items:center}
.field{display:flex;align-items:center;gap:6px;flex:1;min-width:0;color:var(--mute);font-size:.9rem}
.field input{flex:1;min-width:0;color:var(--ink)}
.warn{color:var(--warn);margin:0;font-size:.95rem}
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:10px}
.cmp .sheet,.cmp pre{margin:0;max-height:50vh;overflow:auto;font:13px/1.4 var(--font-mono);border:1px solid var(--line);border-radius:8px;padding:8px;background:var(--bg)}
.cmp .sheet .l.chg{background:#e8b84a33}
.cmp .sheet .l.add{background:#6dbf7a33}
.cmp .sheet .l.del{background:#e0707033;text-decoration:line-through;opacity:.75}
@media (max-width:700px){.cmp{grid-template-columns:1fr}}
.shares{list-style:none;padding:0;margin:0 0 8px;display:grid;gap:8px}
.shares li{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.shares input{flex:1;min-width:200px}
.err{color:var(--danger);min-height:1.3em;margin:0}

/* login */
body.login{display:grid;place-items:center;padding:24px}
body.login .login-card{display:grid;gap:12px;width:min(340px,92vw)}
body.login .login-card h1{font-size:1.75rem;margin:0 0 4px}
body.login .login-card .muted{margin:0 0 8px;font-size:.95rem}
body.login .theme-corner{position:fixed;top:12px;right:12px}

@media print{
  .noprint,#offline,[data-theme-toggle],.theme-btn{display:none!important}
  html,body,body.cols{background:#fff!important;color:#000;overflow:visible}
  body{background-image:none!important}
  .wrap{max-width:none;padding:0}
  #sheet,body.cols #sheet{overflow:visible;font-size:10.5pt;column-count:1;height:auto!important}
  .ch,.sec{color:#000}.dv{color:#000}
  .sticky{position:static;background:transparent;backdrop-filter:none;border:0}
}