/*
 * Reader-panel refinements, plus the shared desktop control language for the
 * search title and header actions. The full ad page keeps its own layout.
 */

:is(.reader, .reader-sheet) [data-glance-panel] .gal-track {
    aspect-ratio: 16 / 10;
    max-height: min(21rem, 42dvh);
}

@container ad (max-width: 39.99rem) {
    :is(.reader, .reader-sheet) [data-glance-panel] .gal-track {
        aspect-ratio: 16 / 10;
        max-height: 18rem;
    }
}

:is(.reader, .reader-sheet) [data-glance-panel] .facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--sp-4);
}

:is(.reader, .reader-sheet) [data-glance-panel] .facts > div {
    flex: 1 1 8.5rem;
    min-width: 8.5rem;
}

:is(.reader, .reader-sheet) [data-glance-panel] .facts > .is-wide {
    flex-basis: 100%;
}

:is(.reader, .reader-sheet) [data-glance-panel] .trust {
    gap: var(--sp-2) var(--sp-3);
}

:is(.reader, .reader-sheet) [data-glance-panel] .trust li {
    min-width: 0;
}

:is(.reader, .reader-sheet) [data-glance-panel] .trust time {
    margin-inline-start: .15em;
    white-space: nowrap;
}

/* Badge labels stay on one line at every width; the card grid keeps the row height. */
.rows .row-badges {
    flex-wrap: nowrap;
}

.rows .row-badges .row-badge {
    flex: none;
    white-space: nowrap;
}

/* Category featuring owns the row tint even when a paid highlight is present. */
.rows .row.row-cat-feature,
.rows .row.row-cat-feature:hover,
.rows .row.row-cat-feature[data-active] {
    background: color-mix(in oklab, #16a34a 7%, var(--surface));
}

.rows .row.row-cat-feature:hover {
    background: color-mix(in oklab, #16a34a 11%, var(--surface));
}

.rows .row.row-cat-feature[data-active] {
    background: color-mix(in oklab, #16a34a 9%, var(--surface));
}

.rows .row.row-cat-feature[data-active]::before {
    background: #15803d;
}

/* Search/category pages use a plain title on desktop; the reader owns filtering. */
.results-title-static {
    display: none;
}

/* Reader → category and filter panel (desktop) */
.reader-filter-toggle {
    flex: none;
    gap: var(--sp-1);
    padding-inline: var(--sp-3);
    color: var(--muted);
    font-weight: 600;
}

.reader-filter-toggle:hover {
    color: var(--ink);
}

.reader-filter-toggle .gi {
    width: 1rem;
    height: 1rem;
}

.reader-close-mobile {
    display: none;
}

.reader-discovery {
    display: none;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    background: var(--surface);
    color: var(--ink);
}

.reader[data-reader-mode="discovery"] .reader-bar,
.reader[data-reader-mode="discovery"] .reader-body {
    display: none;
}

.reader[data-reader-mode="discovery"] .reader-discovery {
    display: flex;
    animation: reader-filter-in 0.2s var(--ease-out);
}

/* The filter pane assembles itself: the section heads lead, then the
   category rows and filter groups follow in a short cascade. */
.reader[data-reader-mode="discovery"] .reader-discovery-host .discovery-cats-head,
.reader[data-reader-mode="discovery"] .reader-discovery-host .discovery-cats-scope,
.reader[data-reader-mode="discovery"] .reader-discovery-host .discovery-filters-head,
.reader[data-reader-mode="discovery"] .reader-discovery-host .discovery-summary,
.reader[data-reader-mode="discovery"] .reader-discovery-host .discovery-note {
    animation: reader-item-in 0.28s var(--ease-out) both;
}

.reader[data-reader-mode="discovery"] .reader-discovery-host .discovery-cats-head,
.reader[data-reader-mode="discovery"] .reader-discovery-host .discovery-cats-scope {
    animation-delay: 0.03s;
}

.reader[data-reader-mode="discovery"] .reader-discovery-host .discovery-filters-head {
    animation-delay: 0.09s;
}

.reader[data-reader-mode="discovery"] .reader-discovery-host .discovery-cat-row {
    animation: reader-item-in 0.28s var(--ease-out) both;
    animation-delay: calc(0.05s + var(--i, 0) * 17ms);
}

.reader[data-reader-mode="discovery"] .reader-discovery-host .discovery-filter-group:not(.discovery-meta-group) {
    animation: reader-item-in 0.28s var(--ease-out) both;
}

.reader[data-reader-mode="discovery"] .reader-discovery-host .discovery-filter-group:nth-of-type(2) {
    animation-delay: 0.12s;
}

.reader[data-reader-mode="discovery"] .reader-discovery-host .discovery-filter-group:nth-of-type(3) {
    animation-delay: 0.15s;
}

.reader[data-reader-mode="discovery"] .reader-discovery-host .discovery-filter-group:nth-of-type(4) {
    animation-delay: 0.18s;
}

.reader[data-reader-mode="discovery"] .reader-discovery-host .discovery-meta .row {
    animation: reader-item-in 0.24s var(--ease-out) both;
}

.reader[data-reader-mode="discovery"] .reader-discovery-host .discovery-meta .row:nth-child(2) {
    animation-delay: 0.03s;
}

.reader[data-reader-mode="discovery"] .reader-discovery-host .discovery-meta .row:nth-child(3) {
    animation-delay: 0.06s;
}

.reader[data-reader-mode="discovery"] .reader-discovery-host .discovery-meta .row:nth-child(4) {
    animation-delay: 0.09s;
}

.reader[data-reader-mode="discovery"] .reader-discovery-host .discovery-meta .row:nth-child(5) {
    animation-delay: 0.12s;
}

.reader[data-reader-mode="discovery"] .reader-discovery-host .discovery-meta .row:nth-child(6) {
    animation-delay: 0.15s;
}

.reader[data-reader-mode="discovery"] .reader-discovery-host .discovery-summary,
.reader[data-reader-mode="discovery"] .reader-discovery-host .discovery-note {
    animation-delay: 0.18s;
}

.reader[data-reader-panel-closing] .reader-bar {
    display: flex;
    animation: reader-content-in 0.18s var(--ease-out) 0.12s both;
}

.reader[data-reader-panel-closing] .reader-body {
    display: block;
    animation: reader-content-in 0.18s var(--ease-out) 0.12s both;
}

.reader[data-reader-panel-closing] .reader-discovery {
    display: flex;
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    animation: reader-filter-out 0.1s ease 0.04s both;
}

.reader[data-reader-panel-closing] .reader-discovery-host > .discovery.is-closing {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
}

@keyframes reader-filter-in {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes reader-filter-out {
    from {
        opacity: 1;
        transform: none;
    }
    to {
        opacity: 0;
        transform: translateY(3px);
    }
}

@keyframes reader-content-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes reader-item-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.reader-discovery-bar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: .5rem;
    flex: none;
    min-height: 3.25rem;
    padding: 0 .8rem;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
}

.reader-discovery-back {
    gap: var(--sp-1);
    padding-inline: var(--sp-3);
    color: var(--muted);
    font-weight: 600;
}

.reader-discovery-back .gi {
    width: 1rem;
    height: 1rem;
}

.reader-discovery-back:hover {
    color: var(--ink);
}

.reader-discovery-title {
    justify-self: center;
    color: var(--ink);
    font-size: .82rem;
    font-weight: 750;
    letter-spacing: -.01em;
}

.reader-discovery-close {
    justify-self: end;
}

.reader-discovery-host {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.reader-discovery-host > .discovery {
    position: relative !important;
    inset: auto !important;
    z-index: auto !important;
    display: flex !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: var(--surface) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
}

.reader-discovery-host > .discovery.is-closing {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.reader-discovery-host .discovery-head-area,
.reader-discovery-host .discovery-live {
    display: none !important;
}

.reader-discovery-host .discovery-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    flex: none;
    gap: .35rem;
    padding: .55rem .9rem;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
}

.reader-discovery-host .discovery[data-discovery-pane="category"] .discovery-filters,
.reader-discovery-host .discovery[data-discovery-pane="filters"] .discovery-cats {
    display: none !important;
}

.reader-discovery-host .discovery[data-discovery-pane="category"] .discovery-cats {
    display: flex;
    flex: 1 1 auto !important;
    flex-direction: column;
    min-height: 0;
}

.reader-discovery-host .discovery[data-discovery-pane="category"] .discovery-stage {
    flex: 1 1 auto !important;
    max-height: none !important;
}

.reader-discovery-host .discovery-cats-head .discovery-kicker,
.reader-discovery-host .discovery-filters-head .discovery-kicker {
    display: none !important;
}

.reader-discovery-host .discovery-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) transparent;
}

.reader-discovery-host .discovery-body::-webkit-scrollbar {
    width: 6px;
}

.reader-discovery-host .discovery-body::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: var(--line-strong);
}

.reader-discovery-host .discovery-cats,
.reader-discovery-host .discovery-filters,
.reader-discovery-host .discovery-summary {
    width: 100%;
    min-width: 0;
    overflow: visible;
    border-inline-end: 0;
}

.reader-discovery-host .discovery-cats {
    height: auto !important;
    max-height: none !important;
    flex: none !important;
    overflow: visible !important;
    padding: 1rem 1.15rem 1.05rem;
    border-bottom: 1px solid var(--line);
}

.reader-discovery-host .discovery-cats-head {
    display: flex;
}

.reader-discovery-host .discovery-cats-head h3 {
    font-size: .95rem;
}

/* Counts sit opposite the category name, ahead of the chevron. */
.reader-discovery-host .discovery-cat-icon {
    display: none;
}

.reader-discovery-host .discovery-cat-row {
    grid-template-columns: minmax(0, 1fr) auto;
    padding-inline-start: 0.55rem;
}

.reader-discovery-host .discovery-cat-copy-count {
    display: none;
}

.reader-discovery-host .discovery-cat-tail-count {
    display: inline;
    min-width: 3.25rem;
    text-align: right;
}

.discovery-kicker-reader {
    display: none;
}

.reader-discovery-host .discovery-cats-head .discovery-kicker-base {
    display: none;
}

.reader-discovery-host .discovery-cats-head .discovery-kicker-reader {
    display: inline;
}

.reader-discovery-host .discovery-search {
    margin-top: .75rem;
}

.reader-discovery-host .discovery-crumbs {
    margin: .75rem 0;
}

.reader-discovery-host .discovery-stage {
    height: auto !important;
    max-height: 15rem !important;
    flex: none !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    padding-right: .15rem;
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) transparent;
}

.reader-discovery-host .discovery-stage::-webkit-scrollbar {
    width: 5px;
}

.reader-discovery-host .discovery-stage::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: var(--line-strong);
}

.reader-discovery-host .discovery-filters {
    height: auto !important;
    max-height: none !important;
    flex: none !important;
    overflow: visible !important;
    padding: 1rem 1.15rem 1.25rem;
    border-bottom: 1px solid var(--line);
}

.reader-discovery-host .discovery-filters-head {
    margin-bottom: .35rem;
}

.reader-discovery-host .discovery-filter-group h4 {
    margin-top: .15rem;
}

.reader-discovery-host .discovery-summary {
    position: sticky;
    bottom: 0;
    z-index: 3;
    display: flex;
    flex: 0 0 auto !important;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .45rem .75rem;
    min-height: 0 !important;
    height: auto !important;
    margin-top: auto;
    padding: .55rem 1.15rem calc(.55rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--line);
    background: var(--surface);
    box-shadow: 0 -8px 22px color-mix(in oklab, var(--ink) 8%, transparent);
}

.reader-discovery-host .discovery-summary-head,
.reader-discovery-host .discovery-scope-path,
.reader-discovery-host .discovery-chips-empty,
.reader-discovery-host .discovery-apply-note {
    display: none !important;
}

.reader-discovery-host .discovery-total {
    display: flex;
    align-items: baseline;
    gap: .35rem;
    flex: none;
    margin: 0;
}

.reader-discovery-host .discovery-total strong {
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1;
}

.reader-discovery-host .discovery-total span {
    color: var(--muted);
    font-size: .8rem;
    font-weight: 600;
}

.reader-discovery-host .discovery-chips,
.reader-discovery-host .discovery-chips-empty {
    display: none !important;
}

.reader-discovery-host .discovery-summary-actions {
    position: static;
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-inline-start: auto;
    padding: 0;
    border-top: 0;
    background: transparent;
}

.reader-discovery-host .discovery-summary-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-height: 2.35rem;
    padding-inline: .75rem;
    font-size: .72rem;
}

.reader-discovery-host .discovery-summary-actions .btn-primary {
    padding-inline: 1rem;
    font-size: .76rem;
}

.reader-discovery-host .discovery-summary-actions .btn-quiet {
    color: var(--muted);
}

/* The filter panel stays above the scrim while every other surface is dimmed.
   The document class remains through the close animation, so the reader keeps
   its place above the fading scrim until the pane returns to the ad. */
@media (min-width: 64rem) {
    .reader {
        z-index: 2;
    }

    html.reader-discovery-mode .reader {
        z-index: 90;
    }
}

/* Outside the reader filter pane use a plain darkening scrim, not a blur.
   The header sits below the scrim as well, so every surface except the pane is
   dimmed. */
html.reader-discovery-mode .discovery-backdrop {
    background: rgb(8 10 16 / 0.38);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

html.reader-discovery-mode body:has(.discovery.is-open) .site-header {
    z-index: 40;
}

@media (min-width: 64rem) {
    /* The title is text, not a second filter trigger, and it travels with the
       list column while the reader widens or narrows. */
    html.js .results-top .results-title-open {
        display: none;
    }

    html.js .results-top .results-title-static {
        display: inline;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* The reader's Filtreler control is the only filter entry on list pages. */
    html.js .results-top .chip-add-item {
        display: none;
    }

    html.js .results-top > .chips:not(:has(.chip:not(.chip-add))) {
        display: none;
    }

    html.js .results-top.reader-discovery-closing > .chips-quick {
        display: none;
    }

    html.js .results-head {
        transition: transform 0.28s var(--ease-out);
    }

    html.reader-discovery-mode .results-head {
        will-change: transform;
    }

    /* The sort control slides out with the narrowing and returns in place. Only
       transform/opacity animate, so the header never reflows between frames. */
    html.js .results-sort {
        opacity: 1;
        transform: translateX(0);
        visibility: visible;
        will-change: transform, opacity;
        transition: opacity 0.28s linear, transform 0.28s var(--ease-out), visibility 0s linear 0s;
    }

    html.js .results-top.reader-discovery-mode .results-sort {
        opacity: 0;
        transform: translateX(calc(-1 * var(--reader-filter-shift, 24px)));
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.28s linear, transform 0.28s var(--ease-out), visibility 0s linear 0.28s;
    }

    /* Saved, sign-in and the reader's quiet controls share one button language. */
    .site-header .nav-actions .nav-saved,
    .site-header .nav-actions .nav-signin,
    .site-header .nav-actions .account-menu > summary.nav-link {
        height: var(--tap);
        min-height: var(--tap);
        gap: var(--sp-1);
        border: 0;
        border-radius: var(--radius);
        color: var(--muted);
        transition: background-color 0.18s, color 0.18s;
    }

    .site-header .nav-actions .nav-saved:hover,
    .site-header .nav-actions .nav-saved:focus-visible,
    .site-header .nav-actions .nav-signin:hover,
    .site-header .nav-actions .nav-signin:focus-visible,
    .site-header .nav-actions .account-menu > summary.nav-link:hover,
    .site-header .nav-actions .account-menu > summary.nav-link:focus-visible {
        background: var(--sunk);
        color: var(--ink);
        box-shadow: none;
    }

    .site-header .nav-actions .nav-saved:hover .gi,
    .site-header .nav-actions .nav-saved:focus-visible .gi {
        transform: none;
    }

    html.reader-discovery-mode body:has(.discovery.is-open) .site-header {
        background: color-mix(in oklab, var(--surface) 92%, transparent);
        -webkit-backdrop-filter: saturate(1.4) blur(10px);
        backdrop-filter: saturate(1.4) blur(10px);
        border-bottom-color: var(--line);
    }

    html.reader-discovery-mode body:has(.discovery.is-open) .site-header .brand,
    html.reader-discovery-mode body:has(.discovery.is-open) .site-header .header-search,
    html.reader-discovery-mode body:has(.discovery.is-open) .site-header .nav-actions > *,
    html.reader-discovery-mode body:has(.discovery.is-open) .site-header .header-mobile-actions {
        filter: none;
        pointer-events: auto;
    }

    html.js .results-top.reader-discovery-mode > .chips-quick {
        display: none;
    }

    html.js .results-top > .chips:not(.chips-quick) {
        transition: transform 0.28s var(--ease-out);
    }

    /* Header filter chips are secondary: compact enough to sit on the title
       line, still comfortable to scan and click. */
    html.js .results-top > .chips:not(.chips-quick) .chip {
        min-height: 1.85rem;
        padding: 0 .4rem 0 .55rem;
        gap: .28rem;
        font-size: .75rem;
    }

    html.js .results-top > .chips:not(.chips-quick) .chip .gi {
        width: .78rem;
        height: .78rem;
    }

    html.js .results-top > .chips:not(.chips-quick) .chip-clear {
        padding-inline: .55rem;
    }

    html.js .results-top > .chips:not(.chips-quick) .chip-seller {
        min-height: 1.85rem;
        padding: .1rem .42rem .1rem .2rem;
        gap: .38rem;
    }

    html.js .results-top > .chips:not(.chips-quick) .chip-seller-avatar {
        width: 1.18rem;
        height: 1.18rem;
        font-size: .55rem;
    }

    html.js .results-top > .chips:not(.chips-quick) .chip-seller-role {
        font-size: .53rem;
        letter-spacing: .06em;
    }

    html.js .results-top > .chips:not(.chips-quick) .chip-seller-name {
        max-width: 8rem;
        font-size: .72rem;
    }
}

@media (max-width: 63.999rem) {
    .reader-discovery-toggle {
        display: none !important;
    }

    .reader-close-mobile {
        display: inline-grid;
    }
}

@media (prefers-reduced-motion: reduce) {
    .reader[data-reader-mode="discovery"] .reader-discovery-host *,
    .reader[data-reader-panel-closing] .reader-bar,
    .reader[data-reader-panel-closing] .reader-body,
    .reader[data-reader-panel-closing] .reader-discovery {
        animation-delay: 0s !important;
    }
}

/* The paint report reads as a link, but still opens the parts dialog. */
.detail-list .detail-paint-open {
    display: inline;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--accent);
    font: inherit;
    line-height: inherit;
    text-align: start;
    text-decoration: underline;
    text-decoration-thickness: 0.06em;
    text-underline-offset: 0.18em;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: color 0.15s, text-decoration-color 0.15s;
}

.detail-list .detail-paint-open::after {
    content: none;
}

.detail-list .detail-paint-open:hover,
.detail-list .detail-paint-open:focus-visible {
    color: var(--ink);
    text-decoration-thickness: 0.1em;
}

/* ---- Ledger readability -------------------------------------------------- */
/* The card keeps a firm title/price hierarchy, but secondary details stop
   shouting. The row you are reading stays at full strength; once you move on it
   settles into a quiet, still readable "seen" state (no icon needed). */
.rows[data-badges="price"]:not([data-layout="price-below"]) .row-title {
    font-size: 0.875rem;
    font-weight: 650;
}

.rows[data-badges="price"]:not([data-layout="price-below"]) .row-cat {
    font-size: 0.65rem;
}

.rows[data-badges="price"]:not([data-layout="price-below"]) .row-facts,
.rows[data-badges="price"]:not([data-layout="price-below"]) .row-seller,
.rows[data-badges="price"]:not([data-layout="price-below"]) .row-loc,
.rows[data-badges="price"]:not([data-layout="price-below"]) .row-date {
    font-size: 0.75rem;
}

.rows[data-badges="price"]:not([data-layout="price-below"]) .row-price {
    font-size: 1rem;
}

.rows[data-badges="price"]:not([data-layout="price-below"]) .row-badges--end .row-badge {
    font-size: 0.625rem;
    line-height: 1.35;
}

.rows[data-badges="price"]:not([data-layout="price-below"]) .row-facts,
.rows[data-badges="price"]:not([data-layout="price-below"]) .row-seller,
.rows[data-badges="price"]:not([data-layout="price-below"]) .row-loc,
.rows[data-badges="price"]:not([data-layout="price-below"]) .row-date {
    font-weight: 550;
}

.rows[data-badges="price"]:not([data-layout="price-below"]) .row-spec {
    font-weight: 600;
}

.rows[data-badges="price"]:not([data-layout="price-below"]) .row-price {
    font-weight: 750;
}

.rows[data-badges="price"]:not([data-layout="price-below"]) .row-badge {
    font-weight: 650;
}

.rows .row-title,
.rows .row-cat {
    transition: color 0.18s ease;
}

.rows .row[data-seen]:not([data-active]) .row-title {
    color: color-mix(in oklab, var(--ink) 84%, var(--muted));
    font-weight: 550;
}

.rows .row[data-seen]:not([data-active]) .row-cat {
    color: var(--muted);
    font-weight: 600;
}

.rows .row[data-seen]:not([data-active]) .row-facts,
.rows .row[data-seen]:not([data-active]) .row-seller,
.rows .row[data-seen]:not([data-active]) .row-loc,
.rows .row[data-seen]:not([data-active]) .row-date,
.rows .row[data-seen]:not([data-active]) .row-spec {
    font-weight: 500;
}

.rows .row[data-seen]:not([data-active]) .row-price {
    font-weight: 650;
}

.rows .row[data-seen]:not([data-active]) .row-badge {
    font-weight: 600;
}

.rows .row[data-seen]:not([data-active]):not(.row-hl):not(.row-cat-feature) {
    background: color-mix(in oklab, var(--sunk) 40%, var(--surface));
}

.rows .row[data-seen]:not([data-active]):not(.row-hl):not(.row-cat-feature):hover {
    background: color-mix(in oklab, var(--sunk) 62%, var(--surface));
}

/* The open row is never visually "read away". */
.rows .row[data-active][data-seen] .row-title {
    color: var(--accent);
    font-weight: 650;
}

.rows .row[data-active][data-seen] .row-cat {
    color: var(--accent);
    font-weight: 700;
}

/* ---- Detail-page reading comfort ---------------------------------------- */
.ad .ad-text {
    line-height: 1.7;
    text-wrap: pretty;
}

.reader-body .ad-text {
    max-width: 64ch;
    font-size: 1rem;
}

.ad .facts dd {
    font-size: 0.9375rem;
    font-weight: 550;
}

.ad .detail-list > div {
    padding-block: 0.62rem;
    font-size: 0.9375rem;
    line-height: 1.5;
}

.ad .detail-list dd {
    font-weight: 550;
}

/* The 560px reader gets a single detail column; the full page keeps its
   two-column sheet, where the width is available. */
.reader-body .detail-list {
    grid-template-columns: minmax(0, 1fr);
}

.reader-body .detail-list > div {
    padding-block: 0.65rem;
}

/* ---- Results heading + seller scope ------------------------------------- */
.results-title {
    align-items: center;
}

.results-count {
    line-height: 1.35;
}

.chip.chip-seller {
    gap: 0.45rem;
    max-width: 18rem;
    padding: 0.18rem 0.55rem 0.18rem 0.3rem;
}

.chip-seller-avatar {
    display: grid;
    place-items: center;
    flex: none;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    background: var(--accent-tint);
    color: var(--accent);
    font-size: 0.62rem;
    font-weight: 750;
    line-height: 1;
}

.chip-seller-copy {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}

.chip-seller-role {
    color: var(--muted);
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.chip-seller-name {
    max-width: 9rem;
    overflow: hidden;
    color: var(--ink);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chip.chip-seller .gi {
    flex: none;
}

/* ---- Animated active-filter counter on the reader toggle ---------------- */
.reader-filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.15rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: var(--accent-tint);
    color: var(--accent);
    font-size: 0.62rem;
    font-variant-numeric: tabular-nums;
    font-weight: 750;
    line-height: 1;
    transform-origin: center;
    animation: reader-filter-count-in 0.34s var(--ease-out);
}

.reader-filter-count[hidden] {
    display: none;
}

.reader-filter-count.is-pop {
    animation: reader-filter-count-pop 0.34s var(--ease-out);
}

.reader-filter-count.is-out {
    animation: reader-filter-count-out 0.18s ease forwards;
}

@keyframes reader-filter-count-in {
    from {
        opacity: 0;
        transform: scale(0.65);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes reader-filter-count-pop {
    0% {
        transform: scale(1);
    }
    42% {
        transform: scale(1.18);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes reader-filter-count-out {
    to {
        opacity: 0;
        transform: scale(0.6);
    }
}

/* The account ad ledger and the reader ad detail both use .ad-* names.
   Account pages load both, so restore the reader's own header rhythm. */
.reader .ad-head,
.reader-sheet .ad-head {
    grid-template-columns: none;
    grid-template-areas: none;
    column-gap: 0;
    align-items: normal;
    padding: 0;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
}

.reader .ad-price,
.reader-sheet .ad-price {
    grid-area: auto;
    text-align: start;
    white-space: normal;
}

/* Account/profile CSS colours links accent by default. Inside the reader the
   seller name is an identity, not an action; keep it aligned with the home
   reader and avoid the extra h2 margin. */
.reader .seller-name,
.reader-sheet .seller-name {
    margin: 0;
}

.reader .seller-name a,
.reader-sheet .seller-name a {
    color: inherit;
    text-decoration: none;
}

.reader .seller-name a:hover,
.reader .seller-name a:focus-visible,
.reader-sheet .seller-name a:hover,
.reader-sheet .seller-name a:focus-visible {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

/* On the profile page the reader is a sheet with a blurred backdrop. Opening
   the paint list must not remove that blur; only add the darkening scrim. */
body.user-public-profile:has(dialog.detail-paint-dialog[open]) dialog[data-gs-sheet="1"].reader-sheet[open]::backdrop {
    background: var(--scrim-soft) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.1) !important;
    backdrop-filter: blur(12px) saturate(1.1) !important;
}


.reader .facts dd a,
.reader-sheet .facts dd a {
    color: var(--ink);
    font-weight: 600;
    text-decoration: none;
}

.reader .facts dd a:hover,
.reader .facts dd a:focus-visible,
.reader-sheet .facts dd a:hover,
.reader-sheet .facts dd a:focus-visible {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 0.18em;
}


body .trust,
body :is(.reader, .reader-sheet) [data-glance-panel] .trust {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
    column-gap: 1rem;
    row-gap: 0.5rem;
}

body .trust li {
    align-items: flex-start;
    white-space: nowrap;
}

body .trust .gi {
    flex: none;
    margin-top: 0.14em;
}


/* The sheet bar is a three-column grid: close/filter, previous/counter/next,
   full page. The counter used to be absolutely centred and ran underneath the
   full-page button on phones; keeping every item in its own grid track fixes
   that without moving the counter off-centre. */
@media (max-width: 63.999rem) {
    .reader-sheet .reader-bar {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .reader-sheet .reader-step {
        position: static;
        margin-inline: 0;
        transform: none;
        justify-self: center;
    }

    .reader-sheet .reader-step .btn {
        min-width: 2.4rem;
        padding-inline: 0.5rem;
    }

    .reader-sheet .reader-pos {
        min-width: 0;
        padding-inline: 0.1rem;
        font-size: var(--fs-xs);
    }

    .reader-sheet .reader-full {
        margin-inline-start: 0;
        padding-inline: 0.5rem;
    }

    .reader-sheet .reader-full span {
        display: none;
    }
}

/* Desktop reader discovery: keep the category search on the heading row,
   centred between the title and the back button, with every item on the same
   vertical centre line. */
@media (min-width: 64rem) {
    .reader-discovery-host .discovery-cats-head {
        display: flex;
        align-items: center;
        gap: 0.6rem 0.8rem;
    }

    .reader-discovery-host .discovery-cats-head-copy {
        flex: 0 1 auto;
        min-width: 0;
    }

    .reader-discovery-host .discovery-cats-head .discovery-search {
        flex: 1 1 14rem;
        width: auto;
        max-width: 18rem;
        min-width: 0;
        margin: 0 auto;
    }

    .reader-discovery-host .discovery-cats-head-actions {
        flex: none;
        margin-inline-start: 0;
    }

    .reader-discovery-host .discovery-scope {
        display: none;
    }
}