/* Public stash page (stash v3, P5.2) — page composition only. Item rows and
   the platform mark reuse the shared st-* classes from stash-workspace.css so
   the table look stays in one place (decision D5); this sheet owns the page
   frame, header composition and the placeholder / empty states. Consumes
   --vt-* tokens; shared components are never restyled here. */

.ui-stash-public {
    width: 100%;
    /* Content width matches the active challenge page
       (challenge-active-redesign.css: body.ui-active-challenge-page main.container). */
    max-width: 1288px;
    margin-inline: auto;
    padding: 26px 24px 90px;
}

@media (max-width: 767px) {
    .ui-stash-public {
        padding-inline: 16px;
    }
}

/* ---------- header: kicker, platform name, owner + aggregates line ---------- */

.st-pub-head {
    display: grid;
    gap: 10px;
    margin-bottom: 26px;
}

.st-pub-kicker {
    font-family: var(--vt-mono);
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--vt-text-3);
    margin: 0;
}

.st-pub-title {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.st-pub-device {
    font-family: var(--vt-mono);
    font-size: 11px;
    color: var(--vt-text-3);
    border: 1px solid var(--vt-line);
    border-radius: 999px;
    padding: 3px 9px;
    white-space: nowrap;
}

.st-pub-owner {
    color: var(--vt-blue-2);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.15s;
}

.st-pub-owner:hover {
    color: var(--vt-text);
    text-decoration: underline;
}

.st-pub-owner:focus-visible {
    outline: 2px solid var(--vt-blue-2);
    outline-offset: 2px;
    border-radius: 4px;
}

.st-pub-aggregates {
    color: var(--vt-text-2);
}

/* ---------- rows ---------- */

/* Container hook: the shared workspace row styles rebuild into their narrow
   card layout by content width via the `strows` container queries. */
.st-pub-rows {
    container-type: inline-size;
    container-name: strows;
}

/* The owner-only "show to people" column is meaningless on a public page —
   every rendered row passed that gate by definition — so the cell is removed
   here and the column popover offers the four visitor-visible columns only. */
.ui-stash-public .st-c-show {
    display: none;
}

/* Column visibility (workspace Step 8 parity): stash.js toggles one
   st-hide-* class per hidden column on #stash-public-workspace; mirror of
   the .st-ws rules in stash-workspace.css (same specificity, so the shared
   container-query cell layout still loses to them). */
.st-pub-canvas.st-hide-weight .st-r-w,
.st-pub-canvas.st-hide-weight .st-r-w2,
.st-pub-canvas.st-hide-sell .st-c-sell,
.st-pub-canvas.st-hide-buy .st-c-buy,
.st-pub-canvas.st-hide-craft .st-c-craft {
    display: none;
}

/* Public price chips are static spans (no button in the shared macro), so the
   workspace's button-only ellipsis does not apply; keep long barter chips from
   overflowing the row card here. */
.ui-stash-public .st-price {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
}

/* ---------- empty (published, zero visible items) + hidden placeholder ---------- */

.st-pub-note {
    margin-top: 4px;
}

.st-pub-placeholder {
    border: 1px dashed var(--vt-line);
    border-radius: var(--vt-r-lg);
    background: var(--vt-panel);
    padding: 48px 24px;
    text-align: center;
}

.st-pub-hidden {
    margin: 0;
    font-family: var(--vt-disp);
    font-size: 16px;
    font-weight: 700;
    color: var(--vt-text-2);
}

@media (max-width: 480px) {
    .ui-stash-public {
        padding-top: 20px;
    }

    .st-pub-head {
        margin-bottom: 20px;
    }

    .st-pub-placeholder {
        padding: 36px 16px;
    }
}