/* V40 HOME (docs/V40/PB_V40_130643Z/V40 FINAL - SUNDAY/V40_FINAL_SUNDAY/CURRENT/SPEC/HOME_HE.md + UI/HOME_UI_CONTRACT.json) --
   the guest introduction (Hero V4) and the signed-in feed. SCOPED ONLY: every rule starts with a pb40- class; no element / global
   selector, no change to the shell, sidebar, header, logo or footer. Colours from the PB tokens with the V40 palette as fallback;
   logical properties (RTL / LTR flip once); no animation except where reduced motion allows it. */

.pb40-home, .pb40-member {
    container-type: inline-size;
    --pb40-hero-bg: linear-gradient(135deg, #FFF6ED 0%, #FFF3F8 100%);
    --pb40-hero-edge: rgba(189, 0, 110, 0.14);
    --pb40-surface: var(--pb-surface, #FFFFFF);
    --pb40-edge: var(--pb-divider, #E3E6ED);
    --pb40-text: var(--pb-text-primary, #171A1F);
    --pb40-muted: var(--pb-text-secondary, #647084);
    --pb40-accent: var(--pb-brand-magenta, #BD006E);
    /* V46 R24: the accent used AS TEXT (free label, info summary, legal links, active filter) is the page-token action text
       (#BD006E light = 5.9:1 on white, #FFB2D8 dark) -- the brand magenta #EC008C is a fill / border colour (4.25:1 as text). */
    --pb40-accent-text: var(--pb-action-text, #BD006E);
    --pb40-accent-soft: #FBEDF5;
    --pb40-media: var(--pb-media-matte, #F4F5F8);
    color: var(--pb40-text);
}
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]):not([data-theme="black"]) .pb40-home,
    html:not([data-theme="light"]):not([data-theme="black"]) .pb40-member {
        --pb40-hero-bg: linear-gradient(135deg, #1E2430 0%, #2B1F2C 100%);
        --pb40-hero-edge: rgba(189, 0, 110, 0.30);
        --pb40-accent-soft: rgba(189, 0, 110, 0.18);
        --pb40-media: #1B1F27;
    }
}
html[data-theme="dark"] .pb40-home, html[data-theme="dark"] .pb40-member {
    --pb40-hero-bg: linear-gradient(135deg, #1E2430 0%, #2B1F2C 100%);
    --pb40-hero-edge: rgba(189, 0, 110, 0.30);
    --pb40-accent-soft: rgba(189, 0, 110, 0.18);
    --pb40-media: #1B1F27;
}
html[data-theme="black"] .pb40-home, html[data-theme="black"] .pb40-member {
    --pb40-hero-bg: linear-gradient(135deg, #0F1115 0%, #1B1218 100%);
    --pb40-hero-edge: rgba(189, 0, 110, 0.36);
    --pb40-accent-soft: rgba(189, 0, 110, 0.22);
    --pb40-media: #14161B;
}

/* ------------------------------------------------------------------ guest hero (V4): mobile = copy, actions, art */
.pb40-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    padding: 24px 16px;
    margin-block-end: 24px;
    border-radius: 20px;
    background: var(--pb40-hero-bg);
    border: 1px solid var(--pb40-hero-edge);
}
.pb40-hero__copy { min-width: 0; }
.pb40-hero__title {
    margin: 0 0 12px;
    font-size: clamp(28px, 6cqi, 46px);
    line-height: 1.15;
    font-weight: 700;
    color: var(--pb40-text);
    overflow-wrap: anywhere;
}
.pb40-hero__lead { margin: 0 0 20px; max-width: 36em; font-size: 18px; line-height: 1.55; color: var(--pb40-text); }
.pb40-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.pb40-hero__actions .pb-btn { min-height: 48px; }
.pb40-hero__more { margin: 14px 0 0; font-size: 14px; color: var(--pb40-muted); }
.pb40-hero__more a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.pb40-hero__art { display: flex; justify-content: center; min-width: 0; }
/* the original V4 art, whole: square aspect kept by width + height attributes, never mirrored, cropped or stretched */
.pb40-hero__img { display: block; width: 100%; max-width: 280px; height: auto; aspect-ratio: 1 / 1; object-fit: contain; }
@container (min-width: 760px) {
    .pb40-hero { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); padding: 40px; gap: 32px; }
    .pb40-hero__img { max-width: 420px; }
}

/* ------------------------------------------------------------------ guest: service entries + FAQ */
.pb40-services { margin-block-end: 24px; }
.pb40-services__title, .pb40-faq__title { margin: 0 0 12px; font-size: 22px; font-weight: 700; }
.pb40-services__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.pb40-service {
    display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 20px; border-radius: 16px;
    background: var(--pb40-surface); border: 1px solid var(--pb40-edge); color: var(--pb40-text); text-decoration: none;
}
.pb40-service:hover { border-color: var(--pb40-accent); }
.pb40-service:focus-visible { outline: 3px solid var(--pb40-accent); outline-offset: 2px; }
.pb40-service__name { font-size: 18px; font-weight: 700; }
.pb40-service__text { color: var(--pb40-muted); line-height: 1.5; }
.pb40-service__go { margin-block-start: auto; color: var(--pb40-accent); font-weight: 600; }
.pb40-faq { margin-block: 24px; }
.pb40-faq__item { border-block-end: 1px solid var(--pb40-edge); padding-block: 12px; }
.pb40-faq__item summary { cursor: pointer; font-weight: 600; min-height: 32px; }
.pb40-faq__item p { margin: 8px 0 0; color: var(--pb40-muted); line-height: 1.55; }

/* ------------------------------------------------------------------ member: greeting, title, tools */
.pb40-member { padding-block-end: 32px; }
.pb40-greet { margin: 0 0 4px; font-size: 16px; color: var(--pb40-muted); overflow-wrap: anywhere; }
.pb40-greet bdi { font-weight: 600; color: var(--pb40-text); }
.pb40-feed-title { margin: 0 0 12px; font-size: 26px; font-weight: 700; }
.pb40-feed-title:focus { outline: none; }
.pb40-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-block-end: 12px; }
.pb40-filters { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.pb40-filter {
    display: inline-flex; align-items: center; min-height: 48px; padding-inline: 16px; border-radius: 999px;
    border: 1px solid var(--pb40-edge); background: var(--pb40-surface); color: var(--pb40-text); text-decoration: none; font-weight: 600;
}
.pb40-filter[aria-current="true"] { background: var(--pb40-accent-soft); border-color: var(--pb40-accent); color: var(--pb40-accent-text); }
.pb40-filter:focus-visible { outline: 3px solid var(--pb40-accent); outline-offset: 2px; }
.pb40-sort { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.pb40-sort label { font-weight: 600; }
.pb40-sort select { min-height: 48px; padding-inline: 12px; border-radius: 10px; border: 1px solid var(--pb-control-border, #C9CED8); background: var(--pb40-surface); color: var(--pb40-text); }
.pb40-sort select:focus-visible { outline: 3px solid var(--pb40-accent); outline-offset: 2px; }
.pb40-sort .pb-btn { min-height: 48px; }
.pb40-note { margin: 0 0 12px; padding: 10px 14px; border-radius: 10px; background: var(--pb40-accent-soft); color: var(--pb40-text); }
.pb40-info { margin: 0 0 16px; }
.pb40-info > summary { cursor: pointer; display: inline-flex; align-items: center; min-height: 48px; font-weight: 600; color: var(--pb40-accent-text); }
.pb40-info > summary:focus-visible { outline: 3px solid var(--pb40-accent); outline-offset: 2px; }
.pb40-info__body { padding: 12px 16px; border-radius: 12px; border: 1px solid var(--pb40-edge); background: var(--pb40-surface); }
.pb40-info__body h2 { font-size: 16px; margin: 8px 0; }
.pb40-info__body ul { margin: 0 0 8px; padding-inline-start: 20px; color: var(--pb40-muted); line-height: 1.55; }
.pb40-info__links { display: flex; flex-wrap: wrap; gap: 16px; margin-block-start: 8px; }
.pb40-info__links a { color: var(--pb40-accent-text); text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------------ member: the grid (auto-fit, min 240px, gap 16px) */
.pb40-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
@container (max-width: 599px) { .pb40-grid { grid-template-columns: minmax(0, 1fr); } }
.pb40-card { position: relative; min-width: 0; }
.pb40-card__link {
    display: flex; flex-direction: column; height: 100%; border-radius: 14px; overflow: hidden; text-decoration: none;
    background: var(--pb40-surface); border: 1px solid var(--pb40-edge); color: var(--pb40-text);
}
.pb40-card__link:hover { border-color: var(--pb40-accent); }
.pb40-card__link:focus-visible { outline: 3px solid var(--pb40-accent); outline-offset: 2px; }
.pb40-card__media { display: block; aspect-ratio: 4 / 3; background: var(--pb40-media); }
.pb40-card__media img { display: block; width: 100%; height: 100%; object-fit: contain; }
.pb40-card__noimg { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--pb40-muted); }
.pb40-card__body { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; padding-inline-end: 56px; min-width: 0; }
.pb40-card__type { font-size: 12px; font-weight: 600; color: var(--pb40-muted); }
.pb40-card__title {
    font-weight: 700; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere;
}
.pb40-card__meta { font-size: 14px; color: var(--pb40-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb40-card__price { font-weight: 700; }
.pb40-card__free { font-weight: 700; color: var(--pb40-accent-text); }
.pb40-card__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pb40-chip { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; background: var(--pb40-media); color: var(--pb40-muted); }
.pb40-like {
    position: absolute; inset-block-end: 6px; inset-inline-end: 6px; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 999px; background: transparent; color: var(--pb40-muted); cursor: pointer;
}
.pb40-like svg { width: 22px; height: 22px; }
.pb40-like[aria-pressed="true"] { color: var(--pb40-accent); }
.pb40-like[aria-pressed="true"] svg path { fill: currentColor; }
.pb40-like:focus-visible { outline: 3px solid var(--pb40-accent); outline-offset: 0; }
.pb40-like[disabled] { opacity: 0.5; cursor: progress; }

/* ------------------------------------------------------------------ member: states + load controls */
.pb40-state { padding: 24px; border-radius: 14px; border: 1px dashed var(--pb40-edge); background: var(--pb40-surface); }
.pb40-state h2 { margin: 0 0 8px; font-size: 18px; }
.pb40-state p { margin: 0 0 12px; color: var(--pb40-muted); }
.pb40-state__why { margin: 4px 0 12px; color: var(--pb40-muted); font-size: 0.95rem; line-height: 1.5; }   /* V46 R21: the named reason of an empty / blocked state */
.pb40-state__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.pb40-skeleton { display: block; border-radius: 14px; background: var(--pb40-media); min-height: 280px; }
.pb40-status { min-height: 1.5em; margin: 12px 0 0; color: var(--pb40-muted); text-align: center; }
.pb40-more { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-block-start: 16px; }
.pb40-more .pb-btn { min-height: 48px; }
.pb40-end { margin: 16px 0 0; text-align: center; color: var(--pb40-muted); }
.pb40-sentinel { height: 1px; }
.pb40-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }