/* ───────────────────────────────────────────────
   Sheet Music — PianoMK front-end (v9.0)
   米哈钢琴 / pianomk.com
   v9.9: PayPal button works from the account email (no PayPal.Me needed).
   v9.8: USDT button is icon-only; Alipay reads 支付宝.
   v9.7: a USDT button — network, address, copy.
   v9.6: PayPal + Alipay logos on the thank-you buttons.
   v9.5: a small thank-you line (PayPal + Alipay)
   under the library title.
   v9.3: the small Chinese line under each label is
   gone, and a featured piece is marked by its colour
   rather than a word.
   v9.2: the header is a masthead — one short mark at
   each end of a rule — and the library title is set in
   one uppercase sans instead of serif-plus-italic.
   v9.1: featured pieces — starred in admin, pinned to
   the top of the list in --sm-pin with a badge.
   v9.0: the piece page draws the score into a canvas
   with pdf.js — no iframe, so a protected upload can
   no longer answer the preview with a download. The
   list links only to piece pages, never to files.
   v7.0: every piece gets its own page (see “piece
   page” at the end of this file); the rest is v6.0.
   v6.0: full redesign to PIANOMK-DESIGN.md — soft
   neo-brutalism, flat edition. Stone/paper/ink
   neutrals with pastel chips, Cormorant Garamond +
   Jost, uniform 2.5px borders, no shadows, no
   hover effects; the only motion is press feedback
   on :active. Colors + header text come from
   Dashboard → Sheet Music → Appearance (exposed as
   CSS variables on .sm-wrap). Saved Custom CSS
   still loads after this file and overrides it.
   ─────────────────────────────────────────────── */

.sm-wrap{
    /* ── tokens (overridden by the Appearance panel) ── */
    --sm-bg:#E8E4D8;       /* stone — page background        */
    --sm-paper:#FFFDF8;    /* paper — cards, search, buttons */
    --sm-ink:#1A1A1A;      /* ink — text, borders, icons     */
    --sm-green:#D6F5D6;    /* chip · go / download           */
    --sm-blue:#CDEAFE;     /* chip · selected / library      */
    --sm-yellow:#FFE8B3;   /* chip · highlight / count       */
    --sm-pin:#FFE8B3;      /* featured cards, pinned on top  */
    --sm-thanks:#FFD9C7;   /* thank-you card — peach         */

    --sm-radius:14px;      /* cards; small controls 10–13px, pills 999px */
    --sm-bw:2.5px;         /* universal border width */
    --sm-muted:color-mix(in srgb, var(--sm-ink) 62%, transparent);
    --sm-display:'Cormorant Garamond',Georgia,serif;
    --sm-body:'Jost',system-ui,sans-serif;
    --sm-press:transform .15s cubic-bezier(.16,1,.3,1);

    background:var(--sm-bg);
    color:var(--sm-ink);
    font-family:var(--sm-body);
    font-size:16.5px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    max-width:880px;
    margin:0 auto;
    padding:clamp(40px,6vw,72px) clamp(20px,4vw,48px) 90px;
    border-radius:var(--sm-radius);
    box-sizing:border-box;
}
.sm-wrap *{ box-sizing:border-box; }
/* several blocks below are flex/grid, which would otherwise ignore [hidden] */
.sm-wrap [hidden]{ display:none !important; }


/* ── header (optional, set in Appearance) ── */
.sm-head{ text-align:center; margin:0 0 30px; }

/* masthead: the studio at one end, the domain at the other, on a single rule.
   Two marks rather than one centred pill, so the eye gets the width of the
   page and the title below has room to be the only loud thing. */
.sm-mast{
    display:flex; align-items:baseline; justify-content:space-between; gap:14px;
    padding-bottom:11px; margin:0 0 20px;
    border-bottom:var(--sm-bw) solid var(--sm-ink);
    font:600 .72rem var(--sm-body); letter-spacing:.22em; text-transform:uppercase;
    color:var(--sm-ink); text-align:left;
}
.sm-mast-r{ text-align:right; }

/* the serif title, still used by each piece's page */
.sm-h1{
    font-family:var(--sm-display); font-weight:600; font-style:normal;
    font-size:clamp(40px,6.4vw,68px); line-height:1.02; letter-spacing:-.01em;
    text-transform:none; color:var(--sm-ink); margin:0;
}
.sm-h1 em{ font-weight:500; font-style:italic; }

/* the library title: one face, one weight, capitals. The tracking is what
   makes caps at this size readable rather than a wall. */
.sm-h1--caps{
    font-family:var(--sm-body); font-weight:600;
    font-size:clamp(29px,5.2vw,56px); line-height:1.08;
    letter-spacing:.085em; text-transform:uppercase;
}
/* an *asterisk* accent has nothing to say in a single-face title */
.sm-h1--caps em{ font:inherit; font-style:normal; }

/* ── search + sort ── */
.sm-topbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 14px; }
.sm-search-box{
    flex:1 1 300px; min-width:200px; min-height:52px;
    display:flex; align-items:center; gap:10px;
    background:var(--sm-paper); border:var(--sm-bw) solid var(--sm-ink); border-radius:13px;
    padding:10px 16px;
}
.sm-search-box:focus-within{ outline:3px dashed var(--sm-ink); outline-offset:3px; }
.sm-search-box svg{ flex:0 0 auto; color:var(--sm-ink); }
.sm-search-box input{
    border:0; outline:none; background:transparent; width:100%;
    font:500 16px var(--sm-body); color:var(--sm-ink);
}
.sm-search-box input::placeholder{ color:var(--sm-muted); }

.sm-sort-btns{ display:flex; align-items:center; gap:7px; }
.sm-sort-label{
    font:600 .62rem var(--sm-body); letter-spacing:.18em; text-transform:uppercase;
    color:var(--sm-muted); margin-right:2px;
}
.sm-sort-btn{
    font:600 14px var(--sm-body); color:var(--sm-ink); background:var(--sm-paper);
    border:var(--sm-bw) solid var(--sm-ink); border-radius:12px;
    min-height:44px; padding:8px 16px; cursor:pointer;
    transition:var(--sm-press); -webkit-tap-highlight-color:transparent;
}
.sm-sort-btn:active{ transform:scale(.95); }
.sm-sort-btn.sm-sort-active{ background:var(--sm-blue); }
.sm-sort-btn:focus-visible{ outline:3px dashed var(--sm-ink); outline-offset:2px; }

/* ── count pill (yellow summary) ── */
.sm-count{
    display:inline-block; font:600 .62rem var(--sm-body); letter-spacing:.18em; text-transform:uppercase;
    background:var(--sm-yellow); border:var(--sm-bw) solid var(--sm-ink); border-radius:999px;
    padding:6px 14px; margin:2px 0 18px;
}

/* ── list of score cards ── */
.sm-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.sm-cell{
    position:relative; /* anchors the stretched card link */
    display:flex; align-items:center; gap:16px; margin:0;
    background:var(--sm-paper); border:var(--sm-bw) solid var(--sm-ink); border-radius:var(--sm-radius);
    padding:14px 18px;
    transition:var(--sm-press);
}
/* chip + title link to the piece page; ::after stretches the hit area across
   the whole card so the green download button stays separately clickable */
.sm-cell-link{
    display:flex; align-items:center; gap:16px; flex:1 1 auto; min-width:0;
    color:inherit; text-decoration:none; -webkit-tap-highlight-color:transparent;
}
.sm-cell-link[href]::after{ content:""; position:absolute; inset:0; border-radius:var(--sm-radius); }
.sm-cell-link:focus-visible{ outline:none; }
.sm-cell-link:focus-visible::after{ outline:3px dashed var(--sm-ink); outline-offset:3px; }
.sm-cell:has(.sm-cell-link[href]:active){ transform:scale(.99); }
.sm-chip{
    flex:0 0 auto; width:44px; height:44px;
    border:var(--sm-bw) solid var(--sm-ink); border-radius:13px;
    display:grid; place-items:center;
    background:var(--sm-blue); color:var(--sm-ink);
}
.sm-chip svg{ width:23px; height:23px; }
.sm-body{ flex:1 1 auto; min-width:0; }
.sm-cell-title{
    font-family:var(--sm-display); font-weight:600; font-size:22px; line-height:1.12;
    text-transform:none; color:var(--sm-ink); overflow-wrap:anywhere;
}
.sm-meta{
    display:flex; align-items:center; flex-wrap:wrap; gap:8px;
    margin-top:5px; font:500 .66rem var(--sm-body); letter-spacing:.14em; text-transform:uppercase;
    color:var(--sm-muted);
}

/* ── featured ──
   A pinned piece changes the card's ground rather than adding decoration to
   it, so a promoted row is obvious at a glance down the list. The badge sits
   on paper so it still reads against that ground, and the note chip drops to
   paper too — blue on yellow was two loud colours arguing. */
.sm-cell--pin{ background:var(--sm-pin); }
.sm-cell--pin .sm-chip{ background:var(--sm-paper); }
.sm-badge{
    display:inline-block;
    color:var(--sm-ink); background:var(--sm-paper);
    border:2px solid var(--sm-ink); border-radius:999px;
    padding:3px 10px;
    font:600 .58rem var(--sm-body); letter-spacing:.16em; text-transform:uppercase;
}

/* ── green button — opens the piece page, same as the card around it.
      It links to a page, never to a file: the only download in the plugin is
      the button on the piece page itself. ── */
.sm-open-btn{
    position:relative; z-index:1; /* stays clickable above the card link */
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    flex:0 0 auto; min-width:44px; min-height:44px; padding:0 15px;
    font:600 .7rem var(--sm-body); letter-spacing:.14em; text-transform:uppercase;
    color:var(--sm-ink); background:var(--sm-green);
    border:var(--sm-bw) solid var(--sm-ink); border-radius:13px;
    text-decoration:none; cursor:pointer;
    transition:var(--sm-press); -webkit-tap-highlight-color:transparent;
}
.sm-open-btn svg{ width:15px; height:15px; flex:0 0 auto; }
.sm-open-btn:active{ transform:scale(.93); }
.sm-open-btn:focus-visible{ outline:3px dashed var(--sm-ink); outline-offset:3px; }

/* ── empty state ── */
.sm-no-results{
    display:none; text-align:center;
    background:var(--sm-paper); border:var(--sm-bw) dashed var(--sm-ink); border-radius:var(--sm-radius);
    padding:46px 24px;
}
.sm-empty-line{ font-family:var(--sm-display); font-style:italic; font-weight:500; font-size:23px; line-height:1.3; }
.sm-empty-sub{
    margin-top:9px; font:600 .62rem var(--sm-body); letter-spacing:.18em; text-transform:uppercase;
    color:var(--sm-muted);
}

/* ── thank-you line (v9.5) ──
   Small on purpose: one quiet line and two pill buttons under the title. The
   Alipay button unfolds a compact QR panel right beneath it. Set to "middle"
   or "below" in admin, the same line sits on a peach strip in the list. */
.sm-thanks{
    display:flex; flex-direction:column; align-items:center; gap:10px;
    margin:18px auto 0; text-align:center;
}
.sm-thanks-line{
    display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px 12px;
}
.sm-thanks-msg{
    display:inline-flex; align-items:center; gap:6px;
    font:500 .82rem/1.35 var(--sm-body); letter-spacing:.02em; color:var(--sm-muted);
    text-transform:none;
}
.sm-thanks-heart{ width:14px; height:14px; flex:0 0 auto; color:var(--sm-ink); }
.sm-thanks-btns{ display:inline-flex; flex-wrap:wrap; justify-content:center; gap:6px; }
.sm-thanks-btn{
    display:inline-flex; align-items:center; gap:6px;
    min-height:34px; padding:0 12px 0 8px;
    font:600 .64rem var(--sm-body); letter-spacing:.1em; text-transform:uppercase;
    color:var(--sm-ink); background:var(--sm-paper); text-decoration:none;
    border:2px solid var(--sm-ink); border-radius:999px;
    cursor:pointer; transition:var(--sm-press); -webkit-tap-highlight-color:transparent;
}
.sm-thanks-ic{ width:18px; height:18px; flex:0 0 auto; display:block; }
img.sm-thanks-ic{ object-fit:contain; border-radius:4px; }
/* icon-only button (USDT): a round pill the same height as the others */
.sm-thanks-btn--icon{ width:34px; padding:0; justify-content:center; }
.sm-thanks-btn--icon .sm-thanks-ic{ width:20px; height:20px; }
.sm-thanks-btn:active{ transform:scale(.94); }
.sm-thanks-btn:focus-visible{ outline:3px dashed var(--sm-ink); outline-offset:3px; }
.sm-thanks-btn[aria-expanded="true"]{ background:var(--sm-blue); }
.sm-thanks-qr{
    display:flex; flex-direction:column; align-items:center; gap:7px;
    background:var(--sm-paper); border:2px solid var(--sm-ink); border-radius:12px;
    padding:12px 14px 10px;
}
.sm-thanks-qr img{ display:block; width:150px; max-width:100%; height:auto; border-radius:4px; }
.sm-thanks-qr-note{
    font:600 .58rem var(--sm-body); letter-spacing:.14em; text-transform:uppercase; color:var(--sm-muted);
}
.sm-thanks-open{
    font:600 .64rem var(--sm-body); letter-spacing:.1em; text-transform:uppercase;
    color:var(--sm-ink); text-decoration:underline; text-underline-offset:3px;
}
/* USDT: network label, the address, a copy button */
.sm-thanks-usdt{ max-width:min(100%,360px); }
.sm-thanks-net{
    display:inline-block; font:600 .6rem var(--sm-body); letter-spacing:.14em; text-transform:uppercase;
    background:var(--sm-green); border:2px solid var(--sm-ink); border-radius:999px; padding:3px 10px;
}
.sm-thanks-addr{
    display:block; max-width:100%; padding:7px 10px;
    font:500 .78rem/1.45 'Spline Sans Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
    color:var(--sm-ink); background:var(--sm-bg); border-radius:8px;
    overflow-wrap:anywhere; word-break:break-all; user-select:all; -webkit-user-select:all;
}
.sm-thanks-copy{
    min-height:34px; padding:0 14px;
    font:600 .64rem var(--sm-body); letter-spacing:.1em; text-transform:uppercase;
    color:var(--sm-ink); background:var(--sm-paper);
    border:2px solid var(--sm-ink); border-radius:999px; cursor:pointer;
    transition:var(--sm-press); -webkit-tap-highlight-color:transparent;
}
.sm-thanks-copy:active{ transform:scale(.94); }
.sm-thanks-copy:focus-visible{ outline:3px dashed var(--sm-ink); outline-offset:3px; }

/* in the list: the same line on a peach strip */
.sm-thanks-slot{ list-style:none; margin:0; }
.sm-thanks--middle,.sm-thanks--below{
    margin:0; padding:10px 14px;
    background:var(--sm-thanks); border:var(--sm-bw) solid var(--sm-ink); border-radius:var(--sm-radius);
}
.sm-thanks--middle .sm-thanks-msg,.sm-thanks--below .sm-thanks-msg{ color:var(--sm-ink); }
#sm-lib > .sm-thanks--below{ margin-top:10px; }
/* header hidden: the line leads the page, above the search */
#sm-lib > .sm-thanks--top{ margin:0 auto 18px; }

/* ── pagination ── */
.sm-footer{ display:flex; justify-content:center; margin-top:22px; }
.sm-pagination{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; justify-content:center; }
.sm-pg-btn{
    font:600 14px var(--sm-body); color:var(--sm-ink); background:var(--sm-paper);
    border:var(--sm-bw) solid var(--sm-ink); border-radius:11px;
    min-width:44px; min-height:44px; padding:8px 12px; cursor:pointer;
    transition:var(--sm-press); -webkit-tap-highlight-color:transparent;
}
.sm-pg-btn:active:not(:disabled){ transform:scale(.93); }
.sm-pg-btn:disabled{ opacity:.4; cursor:default; }
.sm-pg-btn.sm-pg-active{ background:var(--sm-blue); }
.sm-pg-btn:focus-visible{ outline:3px dashed var(--sm-ink); outline-offset:2px; }
.sm-pg-gap{
    display:inline-flex; align-items:center; justify-content:center; min-width:22px;
    color:var(--sm-muted); font:600 14px var(--sm-body);
}

/* ── signature footer ── */
.sm-sig{
    display:flex; align-items:center; justify-content:center; gap:14px; opacity:.5;
    margin-top:46px; font:500 12px var(--sm-body); letter-spacing:.18em; text-transform:uppercase;
}
.sm-sig::before,.sm-sig::after{ content:""; width:36px; height:var(--sm-bw); background:var(--sm-ink); }

/* ── mobile ── */
@media (max-width:560px){
    .sm-wrap{ padding:32px 16px 60px; }
    .sm-mast{ font-size:.64rem; letter-spacing:.16em; gap:10px; }
    .sm-h1--caps{ letter-spacing:.06em; }
    .sm-topbar{ gap:9px; }
    .sm-sort-label{ display:none; }
    .sm-sort-btns{ margin-left:auto; }
    .sm-cell{ gap:12px; padding:13px 14px; }
    .sm-cell-link{ gap:12px; }
    .sm-chip{ width:40px; height:40px; border-radius:11px; }
    .sm-chip svg{ width:21px; height:21px; }
    .sm-cell-title{ font-size:20px; }
    .sm-open-btn{ padding:0 12px; }
    .sm-open-txt{ display:none; }
    .sm-thanks-msg{ font-size:.78rem; }
}

@media (prefers-reduced-motion:reduce){
    .sm-wrap *{ transition:none !important; }
}

/* ───────────────────────────────────────────────
   Piece page (v7) — /library-page/piece-slug/
   Same tokens, same flat borders; the preview panel
   is just another paper card.
   ─────────────────────────────────────────────── */

.sm-detail{ max-width:960px; }

/* back to the library */
.sm-back{
    display:inline-flex; align-items:center; gap:9px;
    min-height:44px; padding:8px 17px; margin:0 0 22px;
    font:600 .66rem var(--sm-body); letter-spacing:.18em; text-transform:uppercase;
    color:var(--sm-ink); background:var(--sm-paper); text-decoration:none;
    border:var(--sm-bw) solid var(--sm-ink); border-radius:999px;
    transition:var(--sm-press); -webkit-tap-highlight-color:transparent;
}
.sm-back svg{ width:15px; height:15px; flex:0 0 auto; }
.sm-back:active{ transform:scale(.95); }
.sm-back:focus-visible{ outline:3px dashed var(--sm-ink); outline-offset:3px; }

/* title + fact chips */
.sm-detail-head{ margin:0 0 22px; }
.sm-detail .sm-h1{ font-size:clamp(34px,5.2vw,54px); }
.sm-tags{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:14px; }
.sm-tag{
    display:inline-block; font:600 .62rem var(--sm-body); letter-spacing:.18em; text-transform:uppercase;
    color:var(--sm-ink); background:var(--sm-paper);
    border:var(--sm-bw) solid var(--sm-ink); border-radius:999px;
    padding:6px 14px;
}
.sm-tag--blue{ background:var(--sm-blue); }
.sm-tag--pin{ background:var(--sm-pin); }

/* action row */
.sm-actions{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 18px; }
.sm-act{
    display:inline-flex; align-items:center; justify-content:center; gap:9px;
    min-height:48px; padding:0 18px;
    font:600 .7rem var(--sm-body); letter-spacing:.14em; text-transform:uppercase;
    color:var(--sm-ink); background:var(--sm-paper); text-decoration:none;
    border:var(--sm-bw) solid var(--sm-ink); border-radius:13px;
    cursor:pointer; transition:var(--sm-press); -webkit-tap-highlight-color:transparent;
}
.sm-act svg{ width:16px; height:16px; flex:0 0 auto; }
.sm-act--dl{ background:var(--sm-green); }
.sm-act:active{ transform:scale(.95); }
.sm-act:focus-visible{ outline:3px dashed var(--sm-ink); outline-offset:3px; }

/* preview panel — the score itself where the browser can read PDFs, the
   first page as an image where it can't, a note either way */
.sm-preview{
    background:var(--sm-paper); border:var(--sm-bw) solid var(--sm-ink);
    border-radius:var(--sm-radius); padding:14px; overflow:hidden;
}
.sm-preview:focus-visible{ outline:3px dashed var(--sm-ink); outline-offset:3px; }

/* the drawn page. Width-driven and height:auto, so the canvas keeps whatever
   proportions the score has — portrait, landscape or something unusual */
.sm-stage{
    width:100%; max-width:620px; margin:0 auto; line-height:0;
    border:var(--sm-bw) solid var(--sm-ink); border-radius:10px;
    background:#fff; overflow:hidden;
}
.sm-canvas{ display:block; width:100%; height:auto; }

/* one page at a time: a forty-page score is forty canvases a phone won't hold */
.sm-pagenav{
    display:flex; align-items:center; justify-content:center; gap:9px;
    margin:14px auto 0;
}
.sm-pagelabel{
    min-width:66px; text-align:center;
    font:600 .68rem var(--sm-body); letter-spacing:.14em;
    color:var(--sm-muted); font-variant-numeric:tabular-nums;
}
.sm-pv-open{
    display:flex; width:fit-content; margin:14px auto 2px;
    align-items:center; justify-content:center; gap:9px;
    min-height:44px; padding:8px 18px;
    font:600 .66rem var(--sm-body); letter-spacing:.16em; text-transform:uppercase;
    color:var(--sm-ink); background:var(--sm-paper); text-decoration:none;
    border:var(--sm-bw) solid var(--sm-ink); border-radius:999px;
    transition:var(--sm-press); -webkit-tap-highlight-color:transparent;
}
.sm-pv-open svg{ width:15px; height:15px; flex:0 0 auto; }
.sm-pv-open:active{ transform:scale(.95); }
.sm-pv-open:focus-visible{ outline:3px dashed var(--sm-ink); outline-offset:3px; }
.sm-pv-page{
    width:100%; max-width:560px; margin:0 auto; overflow:hidden;
    border:var(--sm-bw) solid var(--sm-ink); border-radius:10px; background:#fff;
    line-height:0;                      /* no descender gap under the sheet */
}
/* height:auto keeps the sheet's own proportions; the width/height attributes
   on the tag hold the space while it loads, so nothing jumps on a phone */
.sm-pv-img{ display:block; width:100%; height:auto; }
/* no cover: a PDF added by URL, or a host without Imagick. Deliberately
   compact — a full-height empty sheet is a screen of nothing on a phone. */
.sm-pv-ph{
    display:grid; place-items:center; margin:0 auto;
    width:100%; max-width:560px; padding:42px 24px;
    border:var(--sm-bw) dashed var(--sm-ink); border-radius:10px;
    color:var(--sm-muted); background:var(--sm-bg);
}
.sm-pv-ph svg{ width:46px; height:46px; }
.sm-pv-note{
    margin:14px 0 2px; text-align:center;
    font:500 .62rem var(--sm-body); letter-spacing:.16em; text-transform:uppercase;
    color:var(--sm-muted);
}

@media (max-width:560px){
    .sm-back{ margin-bottom:18px; }
    .sm-actions{ gap:8px; }
    .sm-act{ flex:1 1 calc(50% - 4px); padding:0 10px; font-size:.64rem; letter-spacing:.1em; }
    .sm-act--dl{ flex:1 1 100%; }
    .sm-preview{ padding:10px; }
    .sm-pv-open{ width:100%; }
}