/* ───────────────────────────────────────────────
   Sheet Music — neobrutalist front-end (v5.7)
   米哈钢琴 / pianomk.com
   v5.7: palette + header text now driven from the
   admin Appearance panel. Colors are exposed as
   CSS variables on .sm-wrap with the original
   values as defaults, so nothing changes visually
   until you adjust them in Dashboard → Sheet Music.
   Saved Custom CSS still overrides these (it loads
   after this file), and every .sm-* name is intact.
   ─────────────────────────────────────────────── */

.sm-wrap{
    /* ── theme variables (overridden by the Appearance panel) ── */
    --sm-bg:#f3eee0;          /* page background      */
    --sm-card:#ffffff;        /* card / search bg     */
    --sm-ink:#1a1a14;         /* text, borders, shadow*/
    --sm-accent:#9db08c;      /* sage green accent    */
    --sm-kick:#3a4a2e;        /* kicker line          */
    --sm-focus:#e0654b;       /* focus outline        */
    /* muted tones — not in the panel, override via Custom CSS if needed */
    --sm-muted:#7a7862;
    --sm-placeholder:#a39e8a;
    --sm-idx:#b3ad97;
    --sm-meta:#8a8772;

    background:var(--sm-bg);
    color:var(--sm-ink);
    font-family:'Space Grotesk',sans-serif;
    max-width:880px;
    margin:0 auto;
    padding:38px 24px 64px;
    box-sizing:border-box;
}
.sm-wrap *{ box-sizing:border-box; }

/* header (optional) */
.sm-kick{
    font-family:'Spline Sans Mono',monospace;
    font-size:11px; letter-spacing:2px; text-transform:uppercase;
    color:var(--sm-kick); margin-bottom:12px;
}
.sm-h1{
    font-family:'Space Grotesk',sans-serif;
    font-weight:700; font-size:clamp(30px,6vw,50px); line-height:.96;
    letter-spacing:-1.5px; text-transform:uppercase; margin:0 0 4px;
}
.sm-h1 span{ background:var(--sm-accent); padding:0 10px 2px; box-shadow:4px 4px 0 var(--sm-ink); display:inline-block; }

/* search + sort — search dominant, sort lightweight */
.sm-topbar{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:24px 0 12px; }
.sm-search-box{
    flex:1 1 320px; min-width:200px; display:flex; align-items:center; gap:10px;
    background:var(--sm-card); border:2.5px solid var(--sm-ink); box-shadow:4px 4px 0 var(--sm-ink); padding:12px 15px;
}
.sm-search-box svg{ color:var(--sm-ink); flex:0 0 auto; }
.sm-search-box input{
    border:0; outline:none; background:transparent; width:100%;
    font-family:'Space Grotesk',sans-serif; font-size:16px; font-weight:500; color:var(--sm-ink);
}
.sm-search-box input::placeholder{ color:var(--sm-placeholder); letter-spacing:1px; }

.sm-sort-btns{ display:flex; align-items:center; gap:7px; }
.sm-sort-label{
    font-family:'Spline Sans Mono',monospace; font-size:10px; letter-spacing:1px;
    text-transform:uppercase; color:var(--sm-muted);
}
.sm-sort-btn{
    font-family:'Spline Sans Mono',monospace; font-size:11px; font-weight:500; letter-spacing:.4px;
    text-transform:uppercase; background:var(--sm-card); color:var(--sm-ink);
    border:2px solid var(--sm-ink); border-radius:999px; box-shadow:2px 2px 0 var(--sm-ink); padding:7px 13px;
    cursor:pointer; transition:transform .08s, box-shadow .08s;
}
.sm-sort-btn:hover{ transform:translate(-1px,-1px); box-shadow:3px 3px 0 var(--sm-ink); }
.sm-sort-btn.sm-sort-active{ background:var(--sm-accent); }
.sm-sort-btn:focus-visible{ outline:3px solid var(--sm-focus); outline-offset:2px; }

.sm-count{
    font-family:'Spline Sans Mono',monospace; font-size:10px; letter-spacing:1px;
    color:var(--sm-muted); text-transform:uppercase; margin:4px 2px 16px;
}

/* turn the table into stacked neobrutalist cards */
.sm-table{ width:100%; border:0; border-collapse:separate; background:transparent; margin:0; }
.sm-table thead{ display:none; }
.sm-table tbody, .sm-table tr, .sm-table td{ display:block; width:100%; border:0; padding:0; }
.sm-table tr{ margin-bottom:10px; }
.sm-table tr:last-child{ margin-bottom:0; }

/* the card is a static container — not clickable */
.sm-cell{
    display:grid; grid-template-columns:auto 1fr auto; gap:13px; align-items:center;
    background:var(--sm-card); border:2.5px solid var(--sm-ink); box-shadow:4px 4px 0 var(--sm-ink);
    padding:11px 14px; color:var(--sm-ink);
}

.sm-idx{
    align-self:start; margin-top:1px;
    font-family:'Spline Sans Mono',monospace; font-weight:500; font-size:14px;
    color:var(--sm-idx); letter-spacing:.5px; min-width:22px; text-align:center; flex:0 0 auto;
}

.sm-body{ min-width:0; }
.sm-cell-title{
    font-weight:700; font-size:18px; line-height:1.12; letter-spacing:-.4px; text-transform:uppercase;
    color:var(--sm-ink); overflow-wrap:anywhere; hyphens:auto;
}
.sm-meta{
    margin-top:4px; font-family:'Spline Sans Mono',monospace; font-size:10px;
    color:var(--sm-meta); letter-spacing:.3px;
}

/* green download button — the only interactive element (>=44x44 touch target) */
.sm-dl-btn{
    display:inline-flex; align-items:center; justify-content:center;
    min-width:44px; min-height:44px; padding:0 11px;
    background:var(--sm-accent); border:2.5px solid var(--sm-ink); box-shadow:3px 3px 0 var(--sm-ink);
    color:var(--sm-ink); text-decoration:none; cursor:pointer; flex:0 0 auto;
    -webkit-tap-highlight-color:transparent;
    transition:transform .08s, box-shadow .08s;
}
.sm-dl-btn:focus-visible{ outline:3px solid var(--sm-focus); outline-offset:3px; }
.sm-dl-btn:active{ transform:translate(3px,3px); box-shadow:0 0 0 var(--sm-ink); }

/* hover lift only on real pointers — avoids sticky hover after a tap */
@media (hover:hover) and (pointer:fine){
    .sm-dl-btn:hover{ transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--sm-ink); }
}

/* empty + footer/pagination */
.sm-no-results{
    display:none; text-align:center; padding:54px 0;
    font-family:'Spline Sans Mono',monospace; font-size:13px; letter-spacing:.5px; color:var(--sm-muted);
}
.sm-footer{ display:flex; justify-content:center; margin-top:22px; }
.sm-pagination{ display:flex; gap:7px; flex-wrap:wrap; }
.sm-pg-btn{
    font-family:'Spline Sans Mono',monospace; font-size:13px; font-weight:600; color:var(--sm-ink);
    background:var(--sm-card); border:2px solid var(--sm-ink); box-shadow:2px 2px 0 var(--sm-ink);
    min-width:38px; padding:9px 11px; cursor:pointer; transition:transform .08s, box-shadow .08s;
}
.sm-pg-btn:hover:not(:disabled){ transform:translate(-1px,-1px); box-shadow:3px 3px 0 var(--sm-ink); }
.sm-pg-btn:disabled{ opacity:.4; cursor:default; }
.sm-pg-btn.sm-pg-active{ background:var(--sm-accent); }

/* mobile: trim side margins (still inset, never edge-to-edge) */
@media (max-width:660px){
    .sm-wrap{ padding:26px 16px 52px; }
    .sm-topbar{ gap:9px; margin:18px 0 10px; }
    .sm-sort-btns{ margin-left:auto; }
    .sm-cell{ gap:11px; padding:10px 12px; }
    .sm-cell-title{ font-size:17px; }
    .sm-idx{ font-size:13px; min-width:20px; }
}
@media (prefers-reduced-motion:reduce){
    .sm-wrap *{ transition:none !important; }
}