/* Public reader profile: refined shelfmark, theme-token compatible. */

.public-profile {
    --pp-accent: var(--brand, #27706d);
    --pp-warm: var(--surface, #fffdf8);
    --pp-warm-2: var(--surface-2, #f3efe7);
    --pp-ink: var(--text, #1e2b2e);
    --pp-muted: var(--text-muted, #65716e);
    --pp-rule: var(--border, #d7d2c7);
    --pp-radius: min(var(--radius, 8px), 8px);
    --pp-mono: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    --pp-editorial: var(--font-editorial, Georgia, serif);
    max-width: 1120px;
    color: var(--pp-ink);
}

/* One section primitive: consistent rhythm + a single hairline divider. */
.pp-section,
.pp-featured,
.pp-activity-showcase,
.pp-contrib,
.pp-reading-log,
.pp-marketplace,
.pp-quiet {
    padding: clamp(1.25rem, 3vw, 2rem) 0;
    border-top: 1px solid var(--pp-rule);
}

.public-profile > .pp-section:first-of-type,
.public-profile > section:first-of-type {
    border-top: 0;
}


.pp-shelf-inline {
    color: var(--pp-accent);
    text-decoration: none;
    font-size: 0.85rem;
}

.pp-shelf-inline:hover { text-decoration: underline; }


.pp-kicker {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0 0 0.35rem;
    font-family: var(--pp-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--pp-accent);
}

/* dash-led kicker echoing the masthead */
.pp-kicker::before { content: ""; width: 22px; height: 2px; background: var(--pp-accent); flex: none; }

.pp-handle,
.pp-book-meta,
.pp-recent-meta,
.pp-empty {
    color: var(--pp-muted);
}

.pp-handle {
    margin: 0.45rem 0 0;
    font-family: var(--pp-mono);
    font-size: 0.95rem;
    overflow-wrap: anywhere;
}

.pp-badge {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--pp-rule);
    padding: 0.25rem 0.5rem;
    border-radius: var(--pp-radius);
    background: var(--pp-warm-2);
    color: var(--pp-ink);
}

.pp-edit {
    margin-top: 0.9rem;
}

.pp-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.9rem;
}

.pp-actions form {
    margin: 0;
}

/* The flat-square `.pp-mark` and its `.pp-hero` header were replaced by the
   shared pm-* masthead and the circular `.pp-avatar` in the 2026-06-28
   redesign; test_public_profile_route.py pins that `pp-hero` never renders. */

.pp-featured {
    padding: clamp(1.25rem, 3vw, 2rem) 0;
}

.pp-section-head {
    margin-bottom: 0.85rem;
}

.pp-section-head h2 {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.2;
    color: var(--pp-ink);
}

.pp-featured-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(0.75rem, 2vw, 1rem);
}

.pp-featured-book {
    min-width: 0;
    color: var(--pp-ink);
    text-decoration: none;
}

.pp-cover {
    display: block;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    border-radius: var(--pp-radius);
    background: var(--pp-warm-2);
    border: 1px solid var(--pp-rule);
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.08));
}

.pp-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pp-cover-fallback {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    font-family: var(--pp-editorial);
    font-size: clamp(2rem, 6vw, 4rem);
    color: var(--pp-accent);
    background: var(--pp-warm-2);
}

.pp-book-title {
    display: block;
    margin-top: 0.55rem;
    font-weight: 650;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.pp-book-meta {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.82rem;
    line-height: 1.2;
}

.pp-featured-book:hover .pp-book-title {
    color: var(--pp-accent);
    text-decoration: underline;
}

.pp-edit-favorites {
    justify-self: start;
    border: 1px solid var(--pp-rule);
    color: var(--pp-ink);
    background: var(--pp-warm-2);
}

.pp-edit-favorites:hover,
.pp-edit-favorites:focus {
    color: var(--pp-warm);
    background: var(--pp-ink);
    border-color: var(--pp-ink);
}

.pp-featured--empty {
    padding-block: 1rem;
}

.pp-contrib {
    margin-top: 1.5rem;
    padding-bottom: 0.25rem;
}

.pp-contrib .pp-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.pp-contrib-count {
    font-weight: 700;
    color: var(--pp-ink);
}

.pp-contrib-list {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
}

.pp-contrib-item {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--pp-rule);
}

.pp-contrib-action {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--pp-muted);
}

.pp-contrib-link,
.pp-contrib-title {
    min-width: 0;
    color: var(--pp-ink);
    font-weight: 650;
    overflow-wrap: anywhere;
}

.pp-contrib-link {
    text-decoration: none;
}

.pp-contrib-link:hover {
    color: var(--pp-accent);
    text-decoration: underline;
}

.pp-contrib-field,
.pp-contrib-time {
    font-size: 0.85rem;
    color: var(--pp-muted);
}

.pp-contrib-time {
    margin-left: auto;
}

.pp-activity-showcase {
    padding-top: 1.5rem;
}

.pp-activity-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
    gap: clamp(1rem, 3vw, 2rem);
    align-items: start;
}

.pp-order-feature,
.pp-activity-row,
.pp-activity-card {
    color: var(--pp-ink);
    text-decoration: none;
}

.pp-order-feature {
    min-width: 0;
    align-self: start;
    display: grid;
    grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1fr);
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--pp-rule);
    border-radius: var(--pp-radius);
    background: var(--pp-warm-2);
}

a.pp-order-feature:hover .pp-order-feature-title,
a.pp-activity-row:hover .pp-activity-title,
a.pp-activity-card:hover .pp-activity-title {
    color: var(--pp-accent);
    text-decoration: underline;
}

.pp-order-fan {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    min-height: 0;
    border: 1px solid var(--pp-rule);
    border-radius: var(--pp-radius);
    background: var(--pp-warm);
    overflow: hidden;
}

.pp-order-fan img {
    position: absolute;
    left: calc(18% + (var(--i, 0) * 15%));
    top: 18%;
    width: 24%;
    max-width: 86px;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.12));
    transform: rotate(calc((var(--i, 0) - 1.5) * 5deg));
}

.pp-order-fan--empty {
    display: grid;
    place-items: center;
    color: var(--pp-muted);
    font-size: 0.82rem;
}

.pp-order-feature-copy,
.pp-activity-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.pp-order-feature-title,
.pp-activity-title {
    display: block;
    font-weight: 700;
    line-height: 1.18;
    overflow-wrap: anywhere;
}

.pp-order-feature-title {
    font-size: clamp(1.1rem, 2.5vw, 1.55rem);
}

.pp-activity-label {
    margin-bottom: 0.25rem;
    font-family: var(--pp-mono);
    font-size: 0.68rem;
    line-height: 1.1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pp-accent);
}

.pp-activity-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.pp-activity-row,
.pp-activity-card {
    min-width: 0;
    border: 1px solid var(--pp-rule);
    border-radius: var(--pp-radius);
    background: color-mix(in srgb, var(--pp-warm) 84%, transparent);
}

.pp-activity-row {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 0.75rem;
    align-items: start;
    padding: 0.7rem;
}

.pp-activity-row--static {
    cursor: default;
}

.pp-activity-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(0.75rem, 2vw, 1rem);
}

.pp-activity-card {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 0.7rem;
    padding: 0.8rem;
}

.pp-activity-thumb {
    display: block;
    width: 56px;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    border: 1px solid var(--pp-rule);
    border-radius: var(--pp-radius);
    background: var(--pp-warm-2);
}

.pp-activity-card .pp-activity-thumb {
    width: min(84px, 45%);
}

.pp-activity-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pp-activity-thumb--fallback {
    display: grid;
    place-items: center;
    padding: 0.35rem;
    color: var(--pp-muted);
    font-family: var(--pp-mono);
    font-size: 0.56rem;
    line-height: 1.1;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0;
}

.pp-activity-thumb--fallback span {
    max-width: 100%;
    overflow-wrap: anywhere;
}

.pp-activity-snippet {
    display: block;
    margin-top: 0.2rem;
    color: var(--pp-muted);
    font-size: 0.9rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.pp-recent-meta,
.pp-empty {
    color: var(--pp-muted);
}

.pp-recent-meta {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.8rem;
}

.pp-empty--compact {
    margin: 0;
    padding: 0.75rem 0;
}

@media (max-width: 900px) {
    .pp-featured-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .pp-activity-layout,
    .pp-activity-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .pp-featured-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pp-order-feature {
        grid-template-columns: 1fr;
    }

    .pp-order-fan {
        min-height: 0;
    }

    .pp-activity-row {
        grid-template-columns: 48px minmax(0, 1fr);
    }

    .pp-activity-thumb {
        width: 48px;
    }
}

/* Staff shelf affordance badge — used by the inline shelf link in the header. */
.pp-staff-badge {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: color-mix(in srgb, var(--pp-accent) 22%, transparent);
  color: var(--pp-accent); vertical-align: middle;
}

.rp-spotlight__book-title a,
.rp-card__title a {
  color: inherit;
  text-decoration: none;
}
.rp-spotlight__book-title a:hover,
.rp-card__title a:hover {
  text-decoration: underline;
}


/* Reserve the async reading-log island's vertical space so the sections below
   it don't jump when it loads. The placeholder holds space until Alpine reveals
   the island (x-cloak removed); the island itself then holds the space while it
   is still loading, releasing to natural height once content has rendered. */
.pp-rl-reserve { min-height: 520px; }
.public-profile:has(#pp-reading-log:not([x-cloak])) .pp-rl-reserve { display: none; }
.pp-reading-log:not(.rp-loaded) { min-height: 520px; }

/* ---- Masthead: serif-name override on the shared pm-* header ---- */
.public-profile .pp-masthead-name {
    font-family: var(--pp-editorial);
    font-style: italic;
    font-weight: 600;
    text-transform: none;            /* override pm-title uppercase */
    background: none;                /* override pm-title gradient fill */
    -webkit-text-fill-color: currentColor;
    color: var(--pp-ink);
    letter-spacing: 0;
    line-height: .96;
    font-size: clamp(2.6rem, 6vw, 4.6rem);
}
.public-profile .pm-sub { display: flex; flex-wrap: wrap; gap: .55rem; align-items: baseline; }
.public-profile .pp-handle { font-family: var(--pp-mono); font-size: .85rem; }
.public-profile .pp-dot { color: var(--pp-rule); }

.public-profile .pp-aside { flex-direction: column; align-items: flex-end; gap: .75rem; }
.public-profile .pp-actions { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; }

/* Mobile masthead. `.pm-head` is a wrapping flex row, so once the name block and
   the aside stop fitting side by side the aside wraps onto its own line -- and
   because it is `align-items: flex-end`, the avatar lands right-aligned ~160px
   BELOW the name, reading as a bug rather than a layout. The old `.pp-hero` /
   `.pp-mark { order: -1 }` rules used to handle this, but they were left behind
   pointing at classes the masthead redesign stopped rendering, so the phone
   layout has been untreated since.

   `display: contents` on the aside drops its box so the avatar and the action
   row become direct flex children of `.pm-head` and can be ordered
   independently -- avatar above the name, actions below it. Without it, `order`
   can only move the avatar and the buttons together as one block. */
@media (max-width: 640px) {
    .public-profile .pp-masthead { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: .9rem; }
    .public-profile .pp-aside { display: contents; }
    .public-profile .pp-avatar { order: -1; width: 64px; height: 64px; font-size: 1.8rem; }
    .public-profile .pp-actions { order: 1; width: 100%; justify-content: flex-start; }
    .public-profile .pp-masthead-name { font-size: clamp(2rem, 9vw, 2.6rem); }
}

/* circular avatar (replaces the flat square .pp-mark) */
.pp-avatar {
    width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center;
    font-family: var(--pp-editorial); font-style: italic; font-size: 2.4rem; color: #fff;
    background: linear-gradient(150deg, var(--pp-accent), color-mix(in srgb, var(--pp-accent) 70%, #000));
    overflow: hidden; flex: none;
}
.pp-avatar--image { background: var(--pp-warm-2); }
.pp-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Badge area ---- */
.pp-badges { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.pp-badge {
    display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap;
    font-family: var(--pp-mono); font-size: .68rem; letter-spacing: .04em; text-transform: uppercase;
    padding: .35rem .7rem; border-radius: 999px; border: 1px solid var(--pp-rule);
    background: var(--pp-warm); color: var(--pp-ink);
    line-height: 1.2;
}
button.pp-badge {
    appearance: none;
    border-style: solid;
}
.pp-badge__g { font-size: .8rem; line-height: 1; }
.pp-badge--staff { background: var(--pp-accent); border-color: var(--pp-accent); color: #fff; }
.pp-badge--premium {
    background: color-mix(in srgb, var(--amber, #c08a2d) 16%, var(--pp-warm));
    border-color: color-mix(in srgb, var(--amber, #c08a2d) 45%, var(--pp-rule));
    color: #7a5410;
}
.pp-badge--trade { border-color: color-mix(in srgb, #1f6f4a 45%, var(--pp-rule)); color: #1f6f4a; }
.pp-badge--note { text-transform: none; letter-spacing: 0; color: var(--pp-muted); }
.pp-badge-explainer {
    isolation: isolate;
}
.pp-badge-explainer:hover,
.pp-badge-explainer:focus-within {
    z-index: 75;
}
.pp-badge-explainer__bubble {
    left: 0;
    right: auto;
    background: var(--pp-ink);
    color: var(--pp-warm);
    border-color: color-mix(in srgb, var(--pp-warm) 22%, transparent);
    box-shadow: 0 18px 40px rgba(26, 21, 15, .22);
    transform: translateY(.2rem) scale(.98);
}
.pp-badge-explainer.is-edge .pp-badge-explainer__bubble {
    left: auto;
    right: 0;
}
.pp-badge-explainer:hover > .pp-badge-explainer__bubble,
.pp-badge-explainer:focus-within > .pp-badge-explainer__bubble {
    transform: translateY(0) scale(1);
}
@media (max-width: 575.98px) {
    .pp-badge-explainer__bubble,
    .pp-badge-explainer.is-edge .pp-badge-explainer__bubble {
        position: fixed;
        left: 1rem;
        right: 1rem;
        top: 5rem;
        bottom: auto;
        width: auto;
        max-width: none;
        transform: translateY(.2rem) scale(.98);
    }
    .pp-badge-explainer:hover > .pp-badge-explainer__bubble,
    .pp-badge-explainer:focus-within > .pp-badge-explainer__bubble {
        transform: translateY(0) scale(1);
    }
}

/* ---- Rail + feed shell ---- */
.pp-shell { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; margin-top: 1.5rem; }
.pp-rail { position: sticky; top: 1.25rem; display: flex; flex-direction: column; }
.pp-rail-block { padding-bottom: 1.4rem; margin-bottom: 1.4rem; border-bottom: 1px solid var(--pp-rule); }
.pp-rail-block:last-child { border-bottom: 0; margin-bottom: 0; }

.pp-ledger { display: flex; flex-direction: column; }
.pp-ledger-row { display: flex; align-items: baseline; gap: .5rem; padding: .3rem 0; }
.pp-ledger-row .lab { font-family: var(--pp-mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--pp-muted); white-space: nowrap; }
.pp-ledger-row .dots { flex: 1; border-bottom: 1px dotted var(--pp-rule); transform: translateY(-3px); }
.pp-ledger-row .val { font-family: var(--pp-editorial); font-size: 1.25rem; font-weight: 700; color: var(--pp-ink); }

/* favorites partial, compacted for the rail */
.pp-rail-favorites .pp-featured { padding: 0; border: 0; }
.pp-rail-favorites .pp-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin-bottom: .6rem; }
.pp-rail-favorites .pp-section-head h2 { display: none; }              /* keep the kicker, drop the long subtitle in the rail */
.pp-rail-favorites .pp-section-head .pp-kicker { margin: 0; }
.pp-rail-favorites .pp-featured-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: .4rem; }
.pp-rail-favorites .pp-featured-book { display: block; }
.pp-rail-favorites .pp-featured-book .pp-cover { aspect-ratio: 2/3; border-radius: 4px; overflow: hidden; display: block; }
.pp-rail-favorites .pp-featured-book .pp-cover img { width: 100%; height: 100%; object-fit: cover; }
.pp-rail-favorites .pp-book-title, .pp-rail-favorites .pp-book-meta { display: none; }   /* covers-only in the rail; title via aria-label/hover */
.pp-rail-favorites .pp-edit-favorites { font-size: .68rem; }

.pp-rep-summary { margin: 0; font-weight: 700; }
.pp-rep-counts { margin: .25rem 0 0; color: var(--pp-muted); font-size: .85rem; }

/* Recent marketplace feedback in the rail (GH-181). Only public rows reach
   here; a sealed rating is filtered upstream by the reputation index, never
   hidden with CSS. Each note carries the subject's one unrated reply. */
.pp-rep-notes { list-style: none; margin: .75rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.pp-rep-note { font-size: .8rem; }
/* The sentiment is carried by the WORD, not by a colour: this rail has no
   semantic colour tokens of its own, and inventing a pair here would land
   outside the measured ink ramp. --pp-accent is a checked value. */
.pp-rep-note__mark { display: inline-block; font-family: var(--pp-mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--pp-muted); }
.pp-rep-note__mark--negative { color: var(--pp-accent); }
.pp-rep-note__body {
    margin: .15rem 0 0;
    color: var(--pp-ink);
    /* The rail is 300px wide and a note may run to 1,000 characters. */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pp-rep-note__reply { margin: .2rem 0 0 .6rem; padding-left: .5rem; border-left: 2px solid var(--pp-rule); color: var(--pp-muted); }
.pp-rep-note__reply .lab { font-family: var(--pp-mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; }

/* feed inherits the existing .pp-section rhythm; drop the top border on its first section */
.pp-feed > section:first-child { border-top: 0; padding-top: 0; }

/* Compact public ranking cards in the profile feed. */
.pp-rankings {
    padding: clamp(1.25rem, 3vw, 2rem) 0;
    border-top: 1px solid var(--pp-rule);
}

.pp-rankings-grid {
    display: grid;
    gap: .85rem;
}

.pp-rankings-card {
    padding: .95rem;
    border: 1px solid var(--pp-rule);
    border-radius: var(--pp-radius);
    background: color-mix(in srgb, var(--pp-warm) 88%, transparent);
}

.pp-rankings-card__head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: .85rem;
    margin-bottom: .7rem;
}

.pp-rankings-card__title {
    min-width: 0;
}

.pp-rankings-card__title h3 {
    margin: 0;
    color: var(--pp-ink);
    font-size: 1rem;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.pp-rankings-card__title p {
    margin: .2rem 0 0;
    color: var(--pp-muted);
    font-family: var(--pp-mono);
    font-size: .72rem;
    line-height: 1.25;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.pp-rankings-toggle,
.pp-rankings-retry {
    appearance: none;
    border: 0;
    border-bottom: 1px solid currentColor;
    border-radius: 0;
    padding: .1rem 0;
    background: transparent;
    color: var(--pp-accent);
    font: 700 .82rem/1.2 var(--font-body, system-ui, sans-serif);
    white-space: nowrap;
}

.pp-rankings-toggle:hover,
.pp-rankings-toggle:focus,
.pp-rankings-retry:hover,
.pp-rankings-retry:focus {
    color: var(--pp-ink);
}

.pp-rankings-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
}

.pp-rankings-list li {
    display: grid;
    grid-template-columns: 2.35rem minmax(0, 1fr);
    gap: .55rem;
    align-items: baseline;
    min-width: 0;
}

.pp-rankings-list--preview {
    gap: .38rem;
    padding-top: .1rem;
}

.pp-rankings-list--full {
    gap: .45rem;
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px solid var(--pp-rule);
}

/* The ranked links sit flush with the folds' edges; let focus rings show. */
.pp-rankings-collapse > .cc-motion-collapse-inner { overflow: clip; overflow-clip-margin: 4px; }

.pp-rankings-list .rank-num {
    color: var(--pp-accent);
    font-family: var(--pp-mono);
    font-size: .72rem;
    letter-spacing: .02em;
}

.pp-rankings-list a {
    min-width: 0;
    color: var(--pp-ink);
    font-weight: 650;
    line-height: 1.25;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.pp-rankings-list a:hover,
.pp-rankings-list a:focus {
    color: var(--pp-accent);
    text-decoration: underline;
}

.pp-rankings-loading,
.pp-rankings-empty,
.pp-rankings-error {
    color: var(--pp-muted);
    font-size: .88rem;
    line-height: 1.35;
}

.pp-rankings-loading,
.pp-rankings-empty {
    padding: .25rem 0;
}

.pp-rankings-error {
    display: flex;
    align-items: baseline;
    gap: .65rem;
    flex-wrap: wrap;
    padding: .55rem .65rem;
    border: 1px solid color-mix(in srgb, var(--pp-accent) 28%, var(--pp-rule));
    border-radius: var(--pp-radius);
    background: var(--pp-warm-2);
}

@media (max-width: 900px) {
    /* `minmax(0, 1fr)`, not a bare `1fr`. `1fr` means `minmax(auto, 1fr)`, which
       floors the track at the content's min-content width -- and the reading-log
       feed contains `white-space: nowrap` event rows (`.rp-ev__verb`) whose
       min-content runs to ~570px. That stretched this single column past the
       viewport and scrolled the entire page sideways on every phone. The desktop
       rule above already floors its content column at 0 for the same reason. */
    .pp-shell { grid-template-columns: minmax(0, 1fr); }
    .pp-rail { position: static; }
    .pp-rail-favorites .pp-featured-grid { grid-template-columns: repeat(5, 1fr); }
}


/* GH-194. The profile's marketplace block is a preview; this is the way to the
   full storefront. Sits under the heading rather than beside it so the
   existing `.pp-section-head` block layout is untouched — every other section
   shares that rule. */
.pp-section-head__link {
    display: inline-block;
    margin-top: 0.2rem;
    font-size: 0.85rem;
}