/* Sold page — desktop ≥1024px, design v5 (pages/sold.php). Builds on market-v5.css (tokens on body.mkt-v5, top bar)
 * and market-v5-list.css (hero card, crumb, title, tabs); adds the page column, the record stats, the ticket
 * cards, the list rows and the pager. Phone / tablet keep sold-v2.css; the v5 cards ship hidden for them.
 * Ticket markup: renderTicket() in assets/js/sold.js + sv5_card_html() in components/sold/v5/data.php. */

.sv5-card { display: none; }

@media (min-width: 1024px) {
    /* ---- Shell: sidebar-less .mk5-solo top bar lives in market-v5.css; one centred column, the site frame (site-width.css) ---- */
    #mk5.mk5-solo { --sv5-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; }
    #mk5.mk5-solo .sv { margin-inline: max(var(--page-gutter), calc((100% - var(--page-inner)) / 2)); padding-top: 0; color: rgb(var(--mk-fg)); }
    #mk5.mk5-solo :is(.sv-hero, .sv-toolbar) { display: none; }
    /* site-width.css gutters .sv-body with !important; the column above already sets the width. */
    #mk5.mk5-solo .sv-body { max-width: none; margin: 0; padding: 28px 0 0 !important; gap: 28px; scroll-margin-top: 24px; }

    /* ---- Hero: subtitle, record stats, tabs row with the view toggle ---- */
    #mk5 .sv5-sub { margin: 0; font-size: 15px; font-weight: 500; color: rgb(var(--mk-fg) / calc(0.55 * var(--mk-tk))); }
    #mk5 .sv5-stats { display: flex; margin: 0; padding: 18px 0; border-radius: 18px; border: 1px solid rgb(var(--mk-fg) / 0.1); background: rgb(var(--mk-fg) / 0.02); }
    #mk5 .sv5-stat { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 0 28px; }
    #mk5 .sv5-stat + .sv5-stat { border-inline-start: 1px solid rgb(var(--mk-fg) / 0.08); }
    #mk5 .sv5-stat__label {
        display: flex; align-items: center; gap: 10px; margin: 0; font-size: 13.5px; font-weight: 500; white-space: nowrap;
        color: rgb(var(--mk-fg) / calc(0.7 * var(--mk-tk)));
    }
    #mk5 .sv5-stat__ico {
        width: 26px; height: 26px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 8px;
        border: 1px solid rgb(var(--mk-fg) / 0.12); background: rgb(var(--mk-fg) / 0.06); color: rgb(var(--mk-fg)); font-size: 11px;
    }
    #mk5 .sv5-stat__value {
        display: flex; align-items: baseline; gap: 2px; margin: 0; font-size: 38px; font-weight: 700; line-height: 1;
        letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: rgb(var(--mk-fg));
    }
    #mk5 .sv5-stat__affix { font-size: 0.55em; font-weight: 600; letter-spacing: 0; color: rgb(var(--mk-fg) / calc(0.42 * var(--mk-tk))); }
    #mk5 .sv5-tabs { align-items: center; justify-content: space-between; gap: 12px; }
    #mk5 .sv5-tabs__list { display: flex; flex-wrap: wrap; gap: 0 4px; min-width: 0; }
    #mk5 .sv5-views { display: flex; flex-shrink: 0; gap: 2px; padding: 3px; border-radius: 11px; border: 1px solid rgb(var(--mk-fg) / 0.09); background: rgb(var(--mk-fg) / 0.02); }
    #mk5 .sv5-view {
        width: 36px; height: 32px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: transparent;
        color: rgb(var(--mk-fg) / calc(0.5 * var(--mk-tk))); font-size: 12px; cursor: pointer; transition: background .2s ease, color .2s ease;
    }
    #mk5 .sv5-view:hover { color: rgb(var(--mk-fg)); }
    #mk5 .sv5-view.active { background: rgb(var(--mk-fg) / 0.1); color: rgb(var(--mk-fg)); }

    /* ---- Ticket cards ---- */
    #mk5 #soldGrid.sv-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
    #mk5 #soldGrid > .sv-card { display: none; }
    #mk5 .sv5-card {
        position: relative; display: flex; flex-direction: column; min-width: 0; padding: 18px 18px 20px; border-radius: 16px;
        border: 1px solid rgb(var(--mk-fg) / 0.12); background: linear-gradient(160deg, rgb(var(--mk-c1)) 0%, rgb(var(--mk-c2)) 100%);
    }
    #mk5 .sv5-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
    #mk5 .sv5-card__plat {
        display: flex; align-items: center; gap: 9px; min-width: 0; overflow: hidden; font-size: 13px; font-weight: 600; white-space: nowrap;
        color: rgb(var(--mk-fg) / calc(0.75 * var(--mk-tk)));
    }
    #mk5 .sv5-card__ico {
        width: 26px; height: 26px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%;
        border: 1px solid rgb(var(--mk-fg) / 0.12); background: rgb(var(--mk-fg) / 0.07); color: rgb(var(--mk-fg)); font-size: 11px;
    }
    #mk5 .sv5-sold {
        flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px;
        border: 1px solid rgb(var(--mk-fg) / 0.16); font-family: var(--sv5-mono); font-size: 10px; font-weight: 600; letter-spacing: .14em;
        text-transform: uppercase; color: rgb(var(--mk-fg) / calc(0.8 * var(--mk-tk)));
    }
    #mk5 .sv5-sold i { font-size: 8px; }
    /* Arabic-script labels: tracking and a Latin mono face would break the letter joins. */
    html[dir="rtl"] #mk5 .sv5-sold { font-family: inherit; font-size: 11px; letter-spacing: 0; }
    #mk5 .sv5-card__user {
        margin-top: 26px; font-size: clamp(26px, 2.1vw, 32px); font-weight: 700; line-height: 1.1; letter-spacing: -0.035em;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: rgb(var(--mk-fg)); unicode-bidi: isolate;
    }
    /* Masked handle: "@" and the masking stars recede; the visible letters carry the name. */
    #mk5 .sv5-at { font-weight: 600; color: rgb(var(--mk-fg) / calc(0.36 * var(--mk-tk))); }
    #mk5 .sv5-mask { display: inline-block; margin-inline: 0.03em; font-size: 0.6em; transform: translateY(-0.42em); color: rgb(var(--mk-fg) / calc(0.4 * var(--mk-tk))); }
    /* Tear line with a punched notch at each edge; each notch shows only its inner half so it bites the card border. */
    #mk5 .sv5-card__perf { position: relative; display: block; height: 0; margin-top: 20px; border-top: 1px dashed rgb(var(--mk-fg) / 0.14); }
    #mk5 .sv5-card__perf::before, #mk5 .sv5-card__perf::after {
        content: ''; position: absolute; top: -10px; width: 20px; height: 20px; box-sizing: border-box; border-radius: 50%;
        border: 1px solid rgb(var(--mk-fg) / 0.12); background: rgb(var(--mk-bg));
    }
    #mk5 .sv5-card__perf::before { left: -29px; clip-path: inset(0 0 0 50%); }
    #mk5 .sv5-card__perf::after { right: -29px; clip-path: inset(0 50% 0 0); }
    #mk5 .sv5-card__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 18px; }
    #mk5 .sv5-card__fee { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
    #mk5 .sv5-card__label { font-size: 12.5px; font-weight: 500; color: rgb(var(--mk-fg) / calc(0.5 * var(--mk-tk))); }
    #mk5 .sv5-card__price { font-size: 24px; font-weight: 700; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: rgb(var(--mk-fg)); unicode-bidi: isolate; }
    #mk5 .sv5-card__no { flex-shrink: 0; font-family: var(--sv5-mono); font-size: 11px; letter-spacing: .08em; white-space: nowrap; color: rgb(var(--mk-fg) / calc(0.4 * var(--mk-tk))); unicode-bidi: isolate; }

    /* ---- List view: one record per line, columns aligned ---- */
    #mk5 #soldGrid.sv-list {
        display: flex; flex-direction: column; overflow: hidden; border-radius: 18px; border: 1px solid rgb(var(--mk-fg) / 0.1);
        background: linear-gradient(160deg, rgb(var(--mk-c1)) 0%, rgb(var(--mk-c2)) 100%);
    }
    #mk5 .sv5-row {
        display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) 96px auto; align-items: center; gap: 24px;
        min-height: 64px; padding: 12px 22px; border-bottom: 1px solid rgb(var(--mk-fg) / 0.06);
    }
    #mk5 .sv5-row:last-child { border-bottom: 0; }
    #mk5 .sv5-row__user {
        font-size: 20px; font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        color: rgb(var(--mk-fg)); unicode-bidi: isolate;
    }
    #mk5 .sv5-row__price { display: flex; align-items: baseline; gap: 8px; min-width: 0; white-space: nowrap; }
    #mk5 .sv5-row__price b { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; color: rgb(var(--mk-fg)); unicode-bidi: isolate; }
    #mk5 .sv5-row .sv5-card__no { text-align: end; }

    /* ---- Empty filter result and pager ---- */
    #mk5 #soldGrid .sv-empty {
        grid-column: 1 / -1; padding: 72px 24px; border-radius: 20px; border: 1px solid rgb(var(--mk-fg) / 0.1);
        background: linear-gradient(160deg, rgb(var(--mk-c1)) 0%, rgb(var(--mk-c2)) 100%); color: rgb(var(--mk-fg));
    }
    #mk5 #soldGrid .sv-empty__hint { color: rgb(var(--mk-fg) / calc(0.5 * var(--mk-tk))); }
    #mk5 .sv-pager { margin-top: 0; }
    /* theme-light.css paints #soldPage .sold-pg-btn with !important; the v5 values are restated the same way. */
    #mk5 #soldPagination .sold-pg-btn {
        min-width: 40px; height: 40px; padding: 0 10px; border-radius: 11px; border: 1px solid rgb(var(--mk-fg) / 0.1) !important; background: transparent !important;
        box-shadow: none; color: rgb(var(--mk-fg) / calc(0.6 * var(--mk-tk))) !important; font-family: inherit; font-size: 13px; font-weight: 600;
        font-variant-numeric: tabular-nums; cursor: pointer; transition: border-color .2s ease, color .2s ease, background .2s ease;
    }
    #mk5 #soldPagination .sold-pg-btn:hover { border-color: rgb(var(--mk-fg) / 0.3) !important; color: rgb(var(--mk-fg)) !important; }
    #mk5 #soldPagination .sold-pg-btn.is-active { background: rgb(var(--mk-acc)) !important; border-color: rgb(var(--mk-acc)) !important; color: rgb(var(--mk-on-acc)) !important; }
    #mk5 #soldPagination .sold-pg-ellipsis { color: rgb(var(--mk-fg) / calc(0.4 * var(--mk-tk))) !important; }
    #mk5 #soldPagination .sold-pg-btn:focus-visible { outline: 2px solid rgb(var(--mk-fg) / 0.85) !important; outline-offset: 2px; }
}