/* =============================================================================
   FEED PAGE — Page Family: Feed
   Structural contract: Hero banner sticky below topbar, card stream over it.
   See /design-system → Families → "The Feed Family" for spec.
   ============================================================================= */

/* ── Feed Section (root container) ── */
.feed-section {
    --surface-app: var(--surface-app, var(--surface-app));
    --feed-surface: var(--feed-card-bg, var(--surface-primary, var(--color-white)));
    padding: 0;
    margin-bottom: var(--space-6);
    position: relative;
    background: var(--surface-app);
}

/* ── Hero Banner (Zone 1 — top of the card column, same width/center as the
   cards; the right rail starts beside it. Was a sticky full-area backdrop,
   which mis-centered against the card column once the rail got a reserved
   grid column — 2026-07-15.) ── */
.feed-hero-banner {
    grid-column: 2;
    grid-row: 1;
    position: relative;
    z-index: 0;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--radius-xl);
    opacity: 1;
    background: var(--surface-app);
    transition: opacity var(--duration-fast, 0.15s) var(--ease-out, ease-out);
    pointer-events: none;
}

.feed-hero-banner--hidden {
    display: none;
}

.feed-hero-banner[data-fade-level="0"] { opacity: 0; visibility: hidden; }
.feed-hero-banner[data-fade-level="1"] { opacity: 0.1; }
.feed-hero-banner[data-fade-level="2"] { opacity: 0.2; }
.feed-hero-banner[data-fade-level="3"] { opacity: 0.3; }
.feed-hero-banner[data-fade-level="4"] { opacity: 0.4; }
.feed-hero-banner[data-fade-level="5"] { opacity: 0.5; }
.feed-hero-banner[data-fade-level="6"] { opacity: 0.6; }
.feed-hero-banner[data-fade-level="7"] { opacity: 0.7; }
.feed-hero-banner[data-fade-level="8"] { opacity: 0.8; }
.feed-hero-banner[data-fade-level="9"] { opacity: 0.9; }
.feed-hero-banner[data-fade-level="10"] { opacity: 1; }

/* Mobile: single-column grid */
@media (max-width: 767px) {
    .feed-hero-banner {
        grid-column: 1;
    }
}

.feed-hero-banner__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    opacity: 1;
    filter: none;
}

.feed-hero-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: transparent;
    pointer-events: none;
}

.feed-hero-banner__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to top, var(--surface-app) 0%, transparent 100%);
    pointer-events: none;
}

/* Generating state */
.feed-hero-banner--generating {
    background: var(--surface-secondary, var(--border-default));
}

.feed-hero-banner__placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: var(--space-3, 12px);
    color: var(--text-secondary);
    font-size: var(--text-sm, 14px);
}

.feed-hero-banner__img--fadein {
    animation: bannerFadeIn 0.6s ease-out;
}

@keyframes bannerFadeIn {
    from { opacity: 0; transform: scale(1.02); }
    to { opacity: 1; transform: scale(1); }
}

/* ── Feed Header (Zone 3 — compose / filters) ── */
.feed-header {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
    max-width: var(--feed-card-max-width);
    margin-left: auto;
    margin-right: auto;
    padding: var(--space-4) var(--space-5) 0;
    background: var(--surface-app);
}

.feed-header__title {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

.feed-header__filter select {
    background: var(--color-dark-700);
    border: 1px solid var(--border-default);
    color: var(--text-primary);
    padding: 6px 12px;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    cursor: pointer;
}

/* ── Feed Layout (CSS Grid) ── */
.feed-layout {
    display: grid;
    grid-template-columns: 1fr minmax(0, var(--feed-card-max-width)) 1fr;
    grid-template-rows: auto 1fr;
    gap: var(--space-6);
    margin: 0 auto;
    padding: 0 var(--space-5);
    align-items: start;
    position: relative;
    z-index: 1;               /* Sit above sticky banner (z-index: 0) */
    -webkit-transform: translateZ(0); /* Safari: force compositing layer */
}

/* ── Wordmark masthead — the /start rail-spine treatment, horizontal:
   Literata medium at --size-6, visually centered on the inner Book glyph
   rather than the outer circular rail control. ── */
.feed-boh-masthead {
    font-family: var(--font-serif);
    font-size: var(--size-6);
    font-weight: var(--font-medium);
    letter-spacing: .02em;
    line-height: 1;
    color: var(--text-primary);
    margin: calc(var(--space-1) * -1) 0 calc(var(--space-4) - var(--space-10));
}
.feed-boh-masthead em { font-style: italic; }

/* ── Feed Stream (Zone 2 — card stream, z above banner) ── */
.feed-stream {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    padding: 0;
}

.feed-stream__entry {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    width: 100%;
    min-width: 0;
}

.feed-stream__entry > .feed-card,
.feed-stream__entry > .feed-creator-app-card,
.feed-stream__entry > .hpq-card,
.feed-stream__entry > .instructional-card,
.feed-stream__entry > .feed-stream__priority-surface {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}

.feed-stream > .instructional-card--preface {
    margin-bottom: var(--space-6);
}

.feed-stream__entry > .instructional-card--preface {
    margin-bottom: var(--space-3);
}

.feed-stream .hpq-card {
    scroll-margin-top: calc(var(--topbar-height, 64px) + var(--space-5));
}

.feed-stream .hpq-card--focused-from-link {
    box-shadow: none;
}

.feed-stream .hpq-card--focused-from-link .hpq-card__surface {
    box-shadow:
        0 0 0 calc(var(--space-1) / 2) var(--highlight-purple),
        var(--shadow-drop);
}

@media (max-width: 767px) {
    .feed-layout {
        grid-template-columns: 1fr;
        padding: 0;
    }
    .feed-stream {
        grid-column: 1;
        width: calc(100% - (var(--feed-card-gutter-mobile) * 2));
        max-width: calc(100% - (var(--feed-card-gutter-mobile) * 2));
        margin-left: auto;
        margin-right: auto;
    }
    .feed-stream > .feed-card,
    .feed-stream > .feed-creator-app-card,
    .feed-stream > .hpq-card,
    .feed-stream > .instructional-card,
    .feed-stream > .feed-stream__priority-surface,
    .feed-stream > .feed-stream__entry {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
    }
    /* Tighter internal padding on phones so narrower cards still read well.
       Scoped to .feed-card so excluded cards (shop, collection PDP, house-info,
       house right-rail shadow card) keep their own sizing — they use different
       class names and do not match this selector. */
    .feed-card {
        padding: var(--feed-card-padding-mobile);
    }
}

/* ── Feed cards: inherit from tokens (Paper Layer) ── */
/* Uniform-width baseline: every .feed-card in the stream is box-sizing:border-box,
   fills its column, and has no per-card margin overrides (req §4). The mobile
   3px gutter comes from --feed-card-gutter-mobile on the .feed-stream wrapper. */
.feed-section .feed-card {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    margin-left: 0;
    margin-right: 0;
    background: var(--color-dark-700);
    border: var(--feed-card-border);
    box-shadow: var(--feed-card-shadow);
    border-radius: var(--feed-card-radius);
}

.feed-section .first-hour-want-card {
    box-sizing: border-box;
    display: grid;
    gap: var(--space-4);
    width: 100%;
    padding: var(--space-5);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md, 8px);
    background: var(--surface-primary);
    color: var(--text-primary);
    box-shadow: var(--shadow-drop);
}

.first-hour-want-card__head,
.first-hour-want-card__actions,
.first-hour-want-card__working {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.first-hour-want-card__head {
    justify-content: space-between;
}

.first-hour-want-card__maker {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: calc(var(--size-6) + var(--space-1));
    padding: 0 var(--space-3) 0 var(--space-1);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-full);
    background: var(--surface-primary);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    line-height: 1;
}

.first-hour-want-card__ident {
    width: calc(var(--size-4) - var(--space-1) / 4);
    height: calc(var(--size-4) - var(--space-1) / 4);
    flex: 0 0 auto;
    border-radius: var(--radius-full);
    background: var(--accent-primary);
}

.first-hour-want-card__signal {
    display: inline-flex;
    align-items: center;
    min-height: var(--size-7);
    max-width: 100%;
    padding: 0 var(--space-3);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-full);
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    line-height: 1;
    white-space: nowrap;
}

.first-hour-want-card__copy {
    display: grid;
    gap: var(--space-2);
}

.first-hour-want-card__copy h2 {
    margin: 0;
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    letter-spacing: 0;
    line-height: var(--leading-tight);
}

.first-hour-want-card__copy p {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
}

.first-hour-want-card__form,
.first-hour-want-card__field {
    display: grid;
    gap: var(--space-3);
}

.first-hour-want-card__field {
    gap: var(--space-2);
}

.first-hour-want-card__field span {
    color: var(--text-muted);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    line-height: var(--leading-snug);
}

.first-hour-want-card textarea,
.first-hour-want-card select,
.first-hour-want-card input {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md, 8px);
    background: var(--surface-secondary);
    color: var(--text-primary);
    font: inherit;
    font-size: var(--text-base);
    line-height: var(--leading-normal);
}

.first-hour-want-card textarea {
    min-height: 7rem;
    resize: vertical;
    padding: var(--space-3);
}

.first-hour-want-card select,
.first-hour-want-card input {
    min-height: var(--size-11);
    padding: 0 var(--space-3);
}

.first-hour-want-card textarea:focus,
.first-hour-want-card select:focus,
.first-hour-want-card input:focus {
    border-color: var(--accent-primary);
    outline: 2px solid color-mix(in srgb, var(--accent-primary) 22%, transparent);
    outline-offset: 1px;
}

.first-hour-want-card__error {
    margin: 0;
    color: var(--status-error);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    line-height: var(--leading-normal);
}

.first-hour-want-card__working {
    min-height: var(--size-16);
    padding: var(--space-4);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md, 8px);
    background: var(--surface-secondary);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    line-height: var(--leading-normal);
}

@media (max-width: 767px) {
    .feed-section .first-hour-want-card {
        padding: var(--space-4);
    }

    .first-hour-want-card__head {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .first-hour-want-card__actions .dp-btn {
        width: 100%;
    }
}

/* ── Global feed regular post cards — lab treatment ── */
.feed-section .feed-card.feed-card--lab-post,
.feed-section .feed-card.feed-card--lab-cover{padding:0;margin:0;background:transparent;border:0;box-shadow:none;border-radius:0;overflow:visible;cursor:pointer}
.feed-section .feed-post-card__wrap,
.feed-section .feed-cover-post__wrap{position:relative}
.feed-section .feed-post-card__tags,
.feed-section .feed-cover-post__tags{position:absolute;z-index:1;top:0;left:var(--space-4);right:var(--space-4);display:flex;justify-content:space-between;align-items:center;transform:translateY(-50%);pointer-events:none}
.feed-section .feed-post-card__maker,
.feed-section .feed-post-card__kind,
.feed-section .feed-cover-post__maker,
.feed-section .feed-cover-post__kind{display:inline-flex;align-items:center;gap:var(--space-1);min-height:calc(var(--size-6) + var(--space-1));padding:0 var(--space-3);border-radius:var(--radius-full);font-family:var(--font-mono);font-size:var(--text-xs);font-weight:var(--font-bold);letter-spacing:0;line-height:1}
.feed-section .feed-post-card__maker,
.feed-section .feed-cover-post__maker{padding-left:var(--space-1);background:var(--surface-primary);color:var(--text-primary);border:1px solid var(--border-strong)}
.feed-section .feed-post-card__ident,
.feed-section .feed-cover-post__ident{width:calc(var(--size-4) - var(--space-1) / 4);height:calc(var(--size-4) - var(--space-1) / 4);border-radius:var(--radius-full);background:var(--accent-primary);flex:0 0 auto;overflow:hidden}
.feed-section .feed-post-card__ident--avatar img,
.feed-section .feed-cover-post__ident--avatar img,
.feed-section .feed-zine-post__ident--avatar img,
.feed-section .feed-ticket-post__ident--avatar img,
.feed-section .feed-quest-post__ident--avatar img,
.feed-section .feed-app-post__ident--avatar img{width:100%;height:100%;object-fit:cover;display:block}
.feed-section .feed-zine-post__ident,
.feed-section .feed-ticket-post__ident,
.feed-section .feed-quest-post__ident,
.feed-section .feed-app-post__ident{overflow:hidden}
.feed-section .feed-post-card__kind,
.feed-section .feed-cover-post__kind{background:var(--highlight-yellow);color:var(--accent-dark);text-transform:uppercase}
.feed-section .feed-post-card__surface{background:var(--surface-primary);border:1px solid var(--border-default);border-radius:var(--radius-2xl);box-shadow:var(--shadow-drop);padding:var(--space-6) var(--space-5) var(--space-4)}
.feed-section .feed-post-card__body{font-family:var(--font-body);font-size:var(--text-2xl);font-weight:var(--font-normal);line-height:var(--leading-normal);letter-spacing:0;color:var(--text-primary);margin:0 0 var(--space-4)}
.feed-section .feed-post-card--link .feed-post-card__body{margin-bottom:var(--space-3)}
.feed-section .feed-post-card__intro-label{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:var(--font-bold);letter-spacing:0;text-transform:uppercase;color:var(--text-muted);margin:0 0 var(--space-2)}
.feed-section .feed-post-card--intro .feed-post-card__body{margin-bottom:var(--space-4)}
.feed-section .feed-post-card--intro .intro-embed{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-3);align-items:stretch;justify-content:stretch;margin:0 0 var(--space-4);padding:0}
.feed-section .feed-post-card--intro .intro-embed__values,
.feed-section .feed-post-card--intro .intro-embed__nouns{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:var(--space-2);min-width:0}
.feed-section .feed-post-card--intro .intro-embed__value,
.feed-section .feed-post-card--intro .intro-embed__noun{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:var(--font-bold);letter-spacing:0;text-transform:uppercase;border-radius:var(--radius-full);white-space:normal}
.feed-section .feed-post-card--intro .intro-embed__value{padding:var(--space-1) var(--space-3);color:var(--text-secondary);background:var(--surface-secondary);border:1px solid var(--border-subtle)}
.feed-section .feed-post-card--intro .intro-embed__value--primary{color:var(--accent-dark);background:var(--accent-primary);border-color:var(--accent-primary)}
.feed-section .feed-post-card--intro .intro-embed__noun{color:var(--text-muted)}
.feed-section .feed-post-card--intro .intro-mini-card{width:100%;min-width:0;aspect-ratio:16/9;background:var(--color-dark-900);border:0;border-radius:var(--radius-xl);overflow:hidden;box-shadow:none}
.feed-section .feed-post-card--intro .intro-mini-card__inner{height:100%}
.feed-section .feed-post-card--intro .intro-mini-card__banner{height:100%;padding-bottom:var(--space-4);background:linear-gradient(135deg,var(--accent-dark),var(--color-dark-800))}
.feed-section .feed-post-card--intro .intro-mini-card__banner-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.feed-section .feed-post-card--intro .intro-mini-card__overlay{background:linear-gradient(180deg,color-mix(in srgb,var(--color-black) 12%,transparent) 0%,color-mix(in srgb,var(--color-black) 24%,transparent) 42%,color-mix(in srgb,var(--color-black) 82%,transparent) 100%)}
.feed-section .feed-post-card--intro .intro-mini-card__identity{gap:var(--space-2);padding:0 var(--space-4);z-index:2}
.feed-section .feed-post-card--intro .intro-mini-card__avatar{width:calc(var(--size-8) + var(--space-1));height:calc(var(--size-8) + var(--space-1));border:1px solid var(--feed-card-glass-border);background:var(--surface-primary)}
.feed-section .feed-post-card--intro .intro-mini-card__handle{font-family:var(--font-heading);font-size:var(--text-base);font-weight:var(--font-bold);letter-spacing:0;color:var(--text-inverse);text-transform:none}
.feed-section .feed-post-card--intro .intro-mini-card__handle span{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:var(--font-bold);color:color-mix(in srgb,var(--text-inverse) 70%,transparent);margin-right:var(--space-1)}
.feed-section .feed-post-card__link-preview{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-3);margin:0 0 var(--space-4);overflow:hidden;border:1px solid var(--border-default);border-radius:var(--radius-xl);background:var(--surface-secondary);color:var(--text-primary);text-decoration:none}
.feed-section .feed-post-card__link-img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--surface-tertiary)}
.feed-section .feed-post-card__link-info{display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-3)}
.feed-section .feed-post-card__link-title{font-family:var(--font-heading);font-size:var(--text-base);font-weight:var(--font-bold);line-height:var(--leading-snug);color:var(--text-primary)}
.feed-section .feed-post-card__link-domain{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:var(--font-bold);letter-spacing:0;text-transform:uppercase;color:var(--text-muted)}
.feed-section .feed-post-card .feed-card__actions{display:flex;align-items:center;gap:var(--space-4);margin:0;padding:0;border-top:0;color:var(--text-muted);font-family:var(--font-body);font-size:var(--text-sm);font-weight:var(--font-bold)}
.feed-section .feed-post-card .feed-card__vote-cluster{display:inline-flex;align-items:center;gap:var(--space-1);height:auto;min-height:0;min-width:0;background:transparent;border:0;box-shadow:none;color:inherit;overflow:visible}
.feed-section .feed-post-card .feed-card__vote-cluster:hover{background:transparent;color:var(--text-primary)}
.feed-section .feed-post-card .feed-card__vote-divider{display:none}
.feed-section .feed-post-card .feed-card__action{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-1);height:auto;min-height:0;padding:0;border:0;background:transparent;box-shadow:none;color:inherit;font:inherit;line-height:1;cursor:pointer;text-decoration:none;outline:0}
.feed-section .feed-post-card .feed-card__action:hover,
.feed-section .feed-post-card .feed-card__action:focus-visible{background:transparent;color:var(--text-primary)}
.feed-section .feed-post-card .feed-card__action iconify-icon{width:calc(var(--size-5) - var(--space-1) / 2);height:calc(var(--size-5) - var(--space-1) / 2);color:currentColor}
.feed-section .feed-post-card .feed-card__action--share{margin-left:auto}
.feed-section .feed-post-card .feed-card__action--upvote.active,
.feed-section .feed-post-card .feed-card__action--downvote.active{background:transparent;color:var(--feed-action-active-color);border-radius:0;outline:0}
.feed-section .feed-post-card__below{padding:var(--space-3) var(--space-4) 0}
.feed-section .feed-post-card__meta{font-size:var(--text-sm);color:var(--text-muted);font-weight:var(--font-semibold);line-height:var(--leading-snug)}
.feed-section .feed-post-card__meta b{color:var(--text-primary);font-weight:var(--font-bold);font-size:var(--text-base)}
.feed-section .feed-cover-post__media{position:relative;display:block;width:100%;min-width:0;box-sizing:border-box;min-height:calc(var(--size-20) * 5 + var(--space-5));border-radius:var(--radius-2xl);overflow:hidden;background:var(--feed-surface);box-shadow:var(--shadow-drop)}
.feed-section .feed-cover-post__media::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 58%,color-mix(in srgb,var(--color-black) 46%,transparent) 100%);pointer-events:none}
.feed-section .feed-cover-post__image{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;object-fit:cover}
.feed-section .feed-cover-post__imgactions{position:absolute;z-index:3;left:var(--space-3);right:var(--space-3);bottom:var(--space-3);display:flex;align-items:center;gap:var(--space-2);margin:0;padding:0;border-top:0;color:var(--text-inverse);font-family:var(--font-mono);font-size:var(--text-xs);font-weight:var(--font-bold)}
.feed-section .feed-cover-post__glass{display:inline-flex;align-items:center;gap:calc(var(--space-2) - var(--space-1) / 2);height:calc(var(--space-8) + var(--space-1));padding:0 calc(var(--space-3) + var(--space-1) / 4);border-radius:var(--radius-full);background:var(--feed-action-pill-bg);border:1px solid var(--feed-action-pill-border);backdrop-filter:blur(calc(var(--space-3) - var(--space-1) / 4)) saturate(1.2);color:var(--text-inverse);font-family:var(--font-mono);font-weight:var(--font-bold);font-size:var(--text-xs);white-space:nowrap;text-shadow:0 var(--space-1) calc(var(--space-2) - var(--space-1) / 2) color-mix(in srgb,var(--color-black) 40%,transparent);box-shadow:none}
.feed-section .feed-cover-post .feed-card__vote-cluster{min-height:calc(var(--space-8) + var(--space-1));min-width:0;overflow:visible}
.feed-section .feed-cover-post .feed-card__vote-cluster:hover{background:var(--feed-card-glass-bg);color:var(--text-inverse)}
.feed-section .feed-cover-post .feed-card__vote-divider{width:1px;height:calc(var(--size-5) - var(--space-1) / 2);background:var(--feed-card-glass-border);border:0}
.feed-section .feed-cover-post .feed-card__action{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-1);height:auto;min-height:0;padding:0;border:0;background:transparent;box-shadow:none;color:inherit;font:inherit;line-height:1;cursor:pointer;text-decoration:none;outline:0}
.feed-section .feed-cover-post .feed-card__action:hover,
.feed-section .feed-cover-post .feed-card__action:focus-visible{background:transparent;color:var(--text-inverse)}
.feed-section .feed-cover-post .feed-card__action iconify-icon{width:calc(var(--size-5) - var(--space-1) / 2);height:calc(var(--size-5) - var(--space-1) / 2);color:currentColor}
.feed-section .feed-cover-post .feed-card__action--upvote.active,
.feed-section .feed-cover-post .feed-card__action--downvote.active{background:transparent;color:var(--feed-action-active-color);border-radius:0;outline:0}
.feed-section .feed-cover-post__rightgrp{margin-left:auto;display:inline-flex;align-items:center;gap:var(--space-2)}
.feed-section .feed-cover-post__cta{display:inline-flex;align-items:center;justify-content:center;height:calc(var(--space-8) + var(--space-1));padding:0 var(--space-4);border:0;border-radius:var(--radius-full);background:var(--accent-primary);color:var(--accent-dark);font-family:var(--font-mono);font-size:var(--text-xs);font-weight:var(--font-bold);line-height:1;cursor:pointer;text-decoration:none;white-space:nowrap}
.feed-section .feed-cover-post__cta iconify-icon,
.feed-section .feed-end-card__action--primary iconify-icon{color:currentColor;stroke:currentColor}
.feed-section .feed-cover-post__below{padding:var(--space-3) var(--space-4) 0}
.feed-section .feed-cover-post__title{font-family:var(--font-heading);font-size:var(--text-2xl);font-weight:var(--font-bold);line-height:var(--leading-tight);letter-spacing:0;color:var(--text-primary);margin:0}
.feed-section .feed-cover-post__meta{font-size:var(--text-sm);color:var(--text-muted);font-weight:var(--font-semibold);line-height:var(--leading-snug);margin-top:var(--space-2)}
.feed-section .feed-cover-post__meta b{color:var(--text-primary);font-weight:var(--font-bold);font-size:var(--text-base)}
@media (max-width:calc(var(--size-20) * 5 + var(--space-5))){
    .feed-section .feed-cover-post__imgactions{left:var(--space-2);right:var(--space-2);gap:var(--space-1)}
    .feed-section .feed-cover-post__glass{height:calc(var(--space-8) + var(--space-1) / 2);padding:0 var(--space-2)}
    .feed-section .feed-cover-post__cta{height:calc(var(--space-8) + var(--space-1) / 2);padding:0 var(--space-3)}
    .feed-section .feed-cover-post__rightgrp{gap:var(--space-1)}
}

/* ── Global feed zine posts — lab tall cover treatment ── */
.feed-section .feed-card.feed-card--lab-zine{padding:0;margin:0;background:transparent;border:0;box-shadow:none;border-radius:0;overflow:visible;cursor:pointer}
.feed-section .feed-zine-post__wrap{position:relative}
.feed-section .feed-zine-post__tags{position:absolute;z-index:1;top:0;left:var(--space-4);right:var(--space-4);display:flex;justify-content:space-between;align-items:center;transform:translateY(-50%);pointer-events:none}
.feed-section .feed-zine-post__maker,
.feed-section .feed-zine-post__kind{display:inline-flex;align-items:center;gap:var(--space-1);min-height:calc(var(--size-6) + var(--space-1));padding:0 var(--space-3);border-radius:var(--radius-full);font-family:var(--font-mono);font-size:var(--text-xs);font-weight:var(--font-bold);letter-spacing:0;line-height:1}
.feed-section .feed-zine-post__maker{max-width:calc(100% - (var(--size-20) + var(--space-2) - var(--space-1) / 2));min-width:0;padding-left:var(--space-1);background:var(--surface-primary);color:var(--text-primary);border:1px solid var(--border-strong);overflow:hidden}
.feed-section .feed-zine-post__maker-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.feed-section .feed-zine-post__ident{width:calc(var(--size-4) - var(--space-1) / 4);height:calc(var(--size-4) - var(--space-1) / 4);border-radius:var(--radius-full);background:var(--accent-primary);flex:0 0 auto}
.feed-section .feed-zine-post__kind{background:var(--accent-tertiary);color:var(--text-inverse);text-transform:uppercase}
.feed-section .feed-zine-post__media{position:relative;display:block;width:100%;min-width:0;box-sizing:border-box;min-height:calc(var(--size-32) * 4);border-radius:var(--radius-2xl);overflow:hidden;background:var(--color-dark-900);box-shadow:var(--shadow-drop)}
.feed-section .feed-zine-post__image{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.feed-section .feed-zine-post__imgactions{position:absolute;z-index:3;left:var(--space-3);right:var(--space-3);bottom:var(--space-3);display:flex;align-items:center;gap:var(--space-2);margin:0;padding:0;border-top:0;color:var(--text-inverse);font-family:var(--font-mono);font-size:var(--text-xs);font-weight:var(--font-bold)}
.feed-section .feed-zine-post__glass{display:inline-flex;align-items:center;gap:calc(var(--space-2) - var(--space-1) / 2);height:calc(var(--space-8) + var(--space-1));padding:0 calc(var(--space-3) + var(--space-1) / 4);border-radius:var(--radius-full);background:var(--feed-action-pill-bg);border:1px solid var(--feed-action-pill-border);backdrop-filter:blur(calc(var(--space-3) - var(--space-1) / 4)) saturate(1.2);color:var(--text-inverse);font-family:var(--font-mono);font-weight:var(--font-bold);font-size:var(--text-xs);white-space:nowrap;text-shadow:0 var(--space-1) calc(var(--space-2) - var(--space-1) / 2) color-mix(in srgb,var(--color-black) 40%,transparent);box-shadow:none}
.feed-section .feed-zine-post .feed-card__vote-cluster{min-height:calc(var(--space-8) + var(--space-1));min-width:0;overflow:visible}
.feed-section .feed-zine-post .feed-card__vote-cluster:hover{background:var(--feed-card-glass-bg);color:var(--text-inverse)}
.feed-section .feed-zine-post .feed-card__vote-divider{width:1px;height:calc(var(--size-5) - var(--space-1) / 2);background:var(--feed-card-glass-border);border:0}
.feed-section .feed-zine-post .feed-card__action{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-1);height:auto;min-height:0;padding:0;border:0;background:transparent;box-shadow:none;color:inherit;font:inherit;line-height:1;cursor:pointer;text-decoration:none;outline:0}
.feed-section .feed-zine-post .feed-card__action:hover,
.feed-section .feed-zine-post .feed-card__action:focus-visible{background:transparent;color:var(--text-inverse)}
.feed-section .feed-zine-post .feed-card__action iconify-icon{width:calc(var(--size-5) - var(--space-1) / 2);height:calc(var(--size-5) - var(--space-1) / 2);color:currentColor}
.feed-section .feed-zine-post .feed-card__action--upvote.active,
.feed-section .feed-zine-post .feed-card__action--downvote.active{background:transparent;color:var(--feed-action-active-color);border-radius:0;outline:0}
.feed-section .feed-zine-post__rightgrp{margin-left:auto;display:inline-flex;align-items:center;gap:var(--space-2)}
.feed-section .feed-zine-post__cta{display:inline-flex;align-items:center;justify-content:center;height:calc(var(--space-8) + var(--space-1));padding:0 var(--space-4);border-radius:var(--radius-full);background:var(--accent-tertiary);color:var(--text-inverse);font-family:var(--font-mono);font-size:var(--text-xs);font-weight:var(--font-bold);line-height:1;cursor:pointer;text-decoration:none;white-space:nowrap}
.feed-section .feed-zine-post__below{padding:var(--space-3) var(--space-4) 0}
.feed-section .feed-zine-post__title{font-family:var(--font-heading);font-size:var(--text-2xl);font-weight:var(--font-bold);line-height:var(--leading-tight);letter-spacing:0;color:var(--text-primary);margin:0}
.feed-section .feed-zine-post__deck{font-size:var(--text-sm);font-weight:var(--font-medium);line-height:var(--leading-snug);color:var(--text-secondary);margin:var(--space-1) 0 0}
.feed-section .feed-zine-post__meta{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:var(--font-bold);letter-spacing:0;text-transform:uppercase;color:var(--text-muted);line-height:var(--leading-snug);margin-top:var(--space-2)}
.feed-section .feed-zine-post__publish{display:inline-flex;align-items:center;justify-content:center;margin-top:var(--space-3);min-height:calc(var(--space-8) + var(--space-1) / 2);padding:0 var(--space-4);border:0;border-radius:var(--radius-full);background:var(--accent-primary);color:var(--accent-dark);font-family:var(--font-mono);font-size:var(--text-xs);font-weight:var(--font-bold);line-height:1;cursor:pointer}
@media (max-width:calc(var(--size-20) * 5 + var(--space-5))){
    .feed-section .feed-zine-post__imgactions{left:var(--space-2);right:var(--space-2);gap:var(--space-1)}
    .feed-section .feed-zine-post__glass{height:calc(var(--space-8) + var(--space-1) / 2);padding:0 var(--space-2)}
    .feed-section .feed-zine-post__cta{height:calc(var(--space-8) + var(--space-1) / 2);padding:0 var(--space-3)}
    .feed-section .feed-zine-post__rightgrp{gap:var(--space-1)}
}

/* ── Global feed event ticket posts — lab ticket treatment ── */
.feed-section .feed-card.feed-card--lab-ticket{padding:0;margin:0;background:transparent;border:0;box-shadow:none;border-radius:0;overflow:visible;cursor:pointer}
.feed-section .feed-ticket-post__headline{font-size:var(--text-lg);font-weight:var(--font-bold);color:var(--text-primary);letter-spacing:0;margin:0 var(--space-4) var(--space-3)}
.feed-section .feed-ticket-post__wrap{position:relative}
.feed-section .feed-ticket-post__tags{position:absolute;z-index:1;top:0;left:var(--space-4);right:var(--space-4);display:flex;justify-content:space-between;align-items:center;transform:translateY(-50%);pointer-events:none}
.feed-section .feed-ticket-post__maker,
.feed-section .feed-ticket-post__kind{display:inline-flex;align-items:center;gap:var(--space-1);min-height:calc(var(--size-6) + var(--space-1));padding:0 var(--space-3);border-radius:var(--radius-full);font-family:var(--font-mono);font-size:var(--text-xs);font-weight:var(--font-bold);letter-spacing:0;line-height:1}
.feed-section .feed-ticket-post__maker{padding-left:var(--space-1);background:var(--surface-primary);color:var(--text-primary);border:1px solid var(--border-strong)}
.feed-section .feed-ticket-post__ident{width:calc(var(--size-4) - var(--space-1) / 4);height:calc(var(--size-4) - var(--space-1) / 4);border-radius:var(--radius-full);background:var(--accent-primary);flex:0 0 auto}
.feed-section .feed-ticket-post__kind{background:var(--color-red-500);color:var(--text-inverse);text-transform:uppercase}
.feed-section .feed-ticket-post__ticket{position:relative;display:flex;flex-direction:column;width:100%;min-width:0;box-sizing:border-box;overflow:hidden;border-radius:var(--radius-xl);background:var(--accent-dark);color:var(--text-inverse);box-shadow:var(--shadow-drop);isolation:isolate}
.feed-section .feed-ticket-post__ticket::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,color-mix(in srgb,var(--color-black) 16%,transparent) 0%,transparent 36%,color-mix(in srgb,var(--color-black) 58%,transparent) 72%,color-mix(in srgb,var(--color-black) 88%,transparent) 100%)}
.feed-section .feed-ticket-post__media{position:relative;z-index:2;min-height:calc(var(--size-20) * 3);display:flex;flex-direction:column;justify-content:flex-end;background:transparent}
.feed-section .feed-ticket-post__image{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;z-index:0}
.feed-section .feed-ticket-post__body{position:relative;z-index:2;padding:0 var(--space-4) var(--space-4)}
.feed-section .feed-ticket-post__title{font-family:var(--font-heading);font-size:var(--text-xl);font-weight:var(--font-bold);line-height:var(--leading-snug);color:var(--text-inverse);margin:0}
.feed-section .feed-ticket-post__venue{margin-top:var(--space-1);font-size:var(--text-sm);color:color-mix(in srgb,var(--text-inverse) 64%,transparent);font-weight:var(--font-medium);line-height:var(--leading-snug)}
.feed-section .feed-ticket-post__perf{position:relative;z-index:2;height:var(--space-4);display:flex;align-items:center;background:transparent}
.feed-section .feed-ticket-post__perf::before{content:"";flex:1;margin:0 var(--space-5);border-top:calc(var(--space-1) / 2) dashed color-mix(in srgb,var(--text-inverse) 30%,transparent)}
.feed-section .feed-ticket-post__notch{position:absolute;top:50%;transform:translateY(-50%);width:calc(var(--size-6) - var(--space-1) / 2);height:calc(var(--size-6) - var(--space-1) / 2);border-radius:var(--radius-full);background:var(--surface-app)}
.feed-section .feed-ticket-post__notch--left{left:calc((var(--size-6) - var(--space-1) / 2) / -2)}
.feed-section .feed-ticket-post__notch--right{right:calc((var(--size-6) - var(--space-1) / 2) / -2)}
.feed-section .feed-ticket-post__stub{position:relative;z-index:2;display:flex;align-items:center;gap:var(--space-3);padding:var(--space-1) var(--space-4) var(--space-4);background:transparent;color:var(--text-inverse)}
.feed-section .feed-ticket-post__status{display:inline-flex;align-items:center;flex:0 0 auto;gap:var(--space-1);background:var(--accent-tertiary);color:var(--text-inverse);font-weight:var(--font-bold);font-size:var(--text-xs);padding:var(--space-2) var(--space-3);border-radius:var(--radius-full);line-height:1}
.feed-section .feed-ticket-post__stub-meta{min-width:0;flex:1;font-size:var(--text-xs);color:color-mix(in srgb,var(--text-inverse) 76%,transparent);font-weight:var(--font-semibold);line-height:var(--leading-snug)}
.feed-section .feed-ticket-post__below{padding:var(--space-3) var(--space-4) 0}
.feed-section .feed-ticket-post .feed-card__actions{display:flex;align-items:center;gap:var(--space-4);margin:0;padding:0;border-top:0;color:var(--text-muted);font-family:var(--font-body);font-size:var(--text-sm);font-weight:var(--font-bold)}
.feed-section .feed-ticket-post .feed-card__vote-cluster{display:inline-flex;align-items:center;gap:0;height:calc(var(--space-8) + var(--space-1));padding:0 var(--space-3);border-radius:var(--radius-full);border:1px solid var(--border-default);background:var(--surface-secondary);color:var(--text-secondary);font-family:var(--font-mono);font-size:var(--text-xs);font-weight:var(--font-bold);overflow:visible}
.feed-section .feed-ticket-post .feed-card__vote-cluster:hover{background:var(--surface-tertiary);color:var(--text-primary)}
/* Ticket post vote cluster internal buttons */
.feed-section .feed-ticket-post .feed-card__vote-cluster .feed-card__action{display:inline-flex;align-items:center;gap:var(--space-1);height:100%;min-height:0;padding:0 var(--space-2);border:0;background:transparent;box-shadow:none;color:inherit;font:inherit;line-height:1;cursor:pointer;text-decoration:none;outline:0}
.feed-section .feed-ticket-post .feed-card__vote-cluster .feed-card__action:hover{background:transparent;color:var(--text-primary)}
/* Ticket post vote divider */
.feed-section .feed-ticket-post .feed-card__vote-divider{display:block;width:1px;height:calc(var(--size-5) - var(--space-1) / 2);background:var(--border-default);border:0;flex-shrink:0}
/* Ticket post comment/share capsule pills */
.feed-section .feed-ticket-post .feed-card__action--pill{display:inline-flex;align-items:center;gap:var(--space-1);height:calc(var(--space-8) + var(--space-1));padding:0 var(--space-3);border-radius:var(--radius-full);border:1px solid var(--border-default);background:var(--surface-secondary);color:var(--text-secondary);font-family:var(--font-mono);font-size:var(--text-xs);font-weight:var(--font-bold);cursor:pointer;text-decoration:none;white-space:nowrap;line-height:1}
.feed-section .feed-ticket-post .feed-card__action--pill:hover{background:var(--surface-tertiary);color:var(--text-primary)}
/* vote-divider display:none removed 2026-08-01 — capsule style uses visible divider */
.feed-section .feed-ticket-post .feed-card__action{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-1);height:auto;min-height:0;padding:0;border:0;background:transparent;box-shadow:none;color:inherit;font:inherit;line-height:1;cursor:pointer;text-decoration:none;outline:0}
.feed-section .feed-ticket-post .feed-card__action:hover,
.feed-section .feed-ticket-post .feed-card__action:focus-visible{background:transparent;color:var(--text-primary)}
.feed-section .feed-ticket-post .feed-card__action iconify-icon{width:calc(var(--size-5) - var(--space-1) / 2);height:calc(var(--size-5) - var(--space-1) / 2);color:currentColor}
.feed-section .feed-ticket-post .feed-card__action--share{margin-left:0}
.feed-section .feed-ticket-post .feed-card__action--upvote.active,
.feed-section .feed-ticket-post .feed-card__action--downvote.active{background:transparent;color:var(--feed-action-active-color);border-radius:0;outline:0}
.feed-section .feed-ticket-post__rightgrp{margin-left:auto;display:inline-flex;align-items:center;gap:var(--space-3)}
.feed-section .feed-ticket-post__view{display:inline-flex;align-items:center;justify-content:center;min-height:calc(var(--space-8) + var(--space-1) / 2);padding:0 var(--space-5);border-radius:var(--radius-full);background:var(--accent-primary);color:var(--accent-dark);font-family:var(--font-mono);font-size:var(--text-xs);font-weight:var(--font-bold);text-decoration:none;line-height:1}

/* ── Global feed shared object cards — lab cover treatment ── */
.feed-section .feed-card.feed-card--lab-app,
.feed-section .feed-card.feed-card--lab-quest{padding:0;margin:0;background:transparent;border:0;box-shadow:none;border-radius:0;overflow:visible;cursor:pointer}
.feed-section .feed-app-post__wrap,
.feed-section .feed-quest-post__wrap{position:relative}
.feed-section .feed-app-post__tags,
.feed-section .feed-quest-post__tags{position:absolute;z-index:1;top:0;left:var(--space-4);right:var(--space-4);display:flex;justify-content:space-between;align-items:center;transform:translateY(-50%);pointer-events:none}
.feed-section .feed-app-post__maker,
.feed-section .feed-app-post__kind,
.feed-section .feed-quest-post__maker,
.feed-section .feed-quest-post__kind{display:inline-flex;align-items:center;gap:var(--space-1);min-height:calc(var(--size-6) + var(--space-1));padding:0 var(--space-3);border-radius:var(--radius-full);font-family:var(--font-mono);font-size:var(--text-xs);font-weight:var(--font-bold);letter-spacing:0;line-height:1}
.feed-section .feed-app-post__maker,
.feed-section .feed-quest-post__maker{padding-left:var(--space-1);background:var(--surface-primary);color:var(--text-primary);border:1px solid var(--border-strong)}
.feed-section .feed-app-post__ident,
.feed-section .feed-quest-post__ident{width:calc(var(--size-4) - var(--space-1) / 4);height:calc(var(--size-4) - var(--space-1) / 4);border-radius:var(--radius-full);background:var(--accent-primary);flex:0 0 auto}
.feed-section .feed-app-post__kind{background:var(--accent-primary);color:var(--accent-dark);text-transform:uppercase}
.feed-section .feed-quest-post__kind{background:var(--color-green-500);color:var(--accent-dark);text-transform:uppercase}
.feed-section .feed-app-post__media,
.feed-section .feed-quest-post__media{position:relative;display:block;width:100%;min-width:0;box-sizing:border-box;min-height:calc(var(--size-20) * 5 + var(--space-5));border-radius:var(--radius-2xl);overflow:hidden;background:var(--color-dark-900);box-shadow:var(--shadow-drop)}
.feed-section .feed-app-post__image,
.feed-section .feed-quest-post__image{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.feed-section .feed-app-post__fallback,
.feed-section .feed-quest-post__fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--accent-dark),var(--color-dark-800));color:var(--accent-primary)}
.feed-section .feed-app-post__fallback iconify-icon,
.feed-section .feed-quest-post__fallback iconify-icon{width:var(--size-16);height:var(--size-16)}
.feed-section .feed-app-post__imgactions,
.feed-section .feed-quest-post__imgactions{position:absolute;z-index:3;left:var(--space-3);right:var(--space-3);bottom:var(--space-3);display:flex;align-items:center;gap:var(--space-2);margin:0;padding:0;border-top:0;color:var(--text-inverse);font-family:var(--font-mono);font-size:var(--text-xs);font-weight:var(--font-bold)}
.feed-section .feed-app-post__glass,
.feed-section .feed-quest-post__glass{display:inline-flex;align-items:center;gap:calc(var(--space-2) - var(--space-1) / 2);height:calc(var(--space-8) + var(--space-1));padding:0 calc(var(--space-3) + var(--space-1) / 4);border-radius:var(--radius-full);background:var(--feed-action-pill-bg);border:1px solid var(--feed-action-pill-border);backdrop-filter:blur(calc(var(--space-3) - var(--space-1) / 4)) saturate(1.2);color:var(--text-inverse);font-family:var(--font-mono);font-weight:var(--font-bold);font-size:var(--text-xs);white-space:nowrap;text-shadow:0 var(--space-1) calc(var(--space-2) - var(--space-1) / 2) color-mix(in srgb,var(--color-black) 40%,transparent);box-shadow:none}
.feed-section .feed-app-post .feed-card__vote-cluster,
.feed-section .feed-quest-post .feed-card__vote-cluster{min-height:calc(var(--space-8) + var(--space-1));min-width:0;overflow:visible}
.feed-section .feed-app-post .feed-card__vote-cluster:hover,
.feed-section .feed-quest-post .feed-card__vote-cluster:hover{background:var(--feed-card-glass-bg);color:var(--text-inverse)}
.feed-section .feed-app-post .feed-card__vote-divider,
.feed-section .feed-quest-post .feed-card__vote-divider{width:1px;height:calc(var(--size-5) - var(--space-1) / 2);background:var(--feed-card-glass-border);border:0}
.feed-section .feed-app-post .feed-card__action,
.feed-section .feed-quest-post .feed-card__action{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-1);height:auto;min-height:0;padding:0;border:0;background:transparent;box-shadow:none;color:inherit;font:inherit;line-height:1;cursor:pointer;text-decoration:none;outline:0}
.feed-section .feed-app-post .feed-card__action:hover,
.feed-section .feed-app-post .feed-card__action:focus-visible,
.feed-section .feed-quest-post .feed-card__action:hover,
.feed-section .feed-quest-post .feed-card__action:focus-visible{background:transparent;color:var(--text-inverse)}
.feed-section .feed-app-post .feed-card__action iconify-icon,
.feed-section .feed-quest-post .feed-card__action iconify-icon{width:calc(var(--size-5) - var(--space-1) / 2);height:calc(var(--size-5) - var(--space-1) / 2);color:currentColor}
.feed-section .feed-app-post .feed-card__action--upvote.active,
.feed-section .feed-app-post .feed-card__action--downvote.active,
.feed-section .feed-quest-post .feed-card__action--upvote.active,
.feed-section .feed-quest-post .feed-card__action--downvote.active{background:transparent;color:var(--feed-action-active-color);border-radius:0;outline:0}
.feed-section .feed-app-post__rightgrp,
.feed-section .feed-quest-post__rightgrp{margin-left:auto;display:inline-flex;align-items:center;gap:var(--space-2)}
.feed-section .feed-app-post__cta,
.feed-section .feed-quest-post__cta{display:inline-flex;align-items:center;justify-content:center;height:calc(var(--space-8) + var(--space-1));padding:0 var(--space-4);border:0;border-radius:var(--radius-full);background:var(--accent-primary);color:var(--accent-dark);font-family:var(--font-mono);font-size:var(--text-xs);font-weight:var(--font-bold);line-height:1;cursor:pointer;text-decoration:none;white-space:nowrap}
.feed-section .feed-app-post__below,
.feed-section .feed-quest-post__below{padding:var(--space-3) var(--space-4) 0}
.feed-section .feed-app-post__title,
.feed-section .feed-quest-post__title{font-family:var(--font-heading);font-size:var(--text-2xl);font-weight:var(--font-bold);line-height:var(--leading-tight);letter-spacing:0;color:var(--text-primary);margin:0}
.feed-section .feed-app-post__deck,
.feed-section .feed-quest-post__deck{font-size:var(--text-sm);font-weight:var(--font-medium);line-height:var(--leading-snug);color:var(--text-secondary);margin:var(--space-1) 0 0}
.feed-section .feed-app-post__meta,
.feed-section .feed-quest-post__meta{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:var(--font-bold);letter-spacing:0;text-transform:uppercase;color:var(--text-muted);line-height:var(--leading-snug);margin-top:var(--space-2)}
.feed-section .feed-app-post__publish{display:inline-flex;align-items:center;justify-content:center;margin-top:var(--space-3);min-height:calc(var(--space-8) + var(--space-1) / 2);padding:0 var(--space-4);border:0;border-radius:var(--radius-full);background:var(--accent-tertiary);color:var(--text-inverse);font-family:var(--font-mono);font-size:var(--text-xs);font-weight:var(--font-bold);line-height:1;cursor:pointer}
@media (max-width:calc(var(--size-20) * 5 + var(--space-5))){
    .feed-section .feed-app-post__imgactions,
    .feed-section .feed-quest-post__imgactions{left:var(--space-2);right:var(--space-2);gap:var(--space-1)}
    .feed-section .feed-app-post__glass,
    .feed-section .feed-quest-post__glass{height:calc(var(--space-8) + var(--space-1) / 2);padding:0 var(--space-2)}
    .feed-section .feed-app-post__cta,
    .feed-section .feed-quest-post__cta{height:calc(var(--space-8) + var(--space-1) / 2);padding:0 var(--space-3)}
    .feed-section .feed-app-post__rightgrp,
    .feed-section .feed-quest-post__rightgrp{gap:var(--space-1)}
}

/* ── Global feed store-item/book drops — lab shared-object treatment ── */
.feed-section .feed-card.feed-card--lab-store-item{padding:0;margin:0;background:transparent;border:0;box-shadow:none;border-radius:0;overflow:visible;cursor:pointer}
.feed-section .feed-store-item-post__wrap{position:relative}
.feed-section .feed-store-item-post__tags{position:absolute;z-index:1;top:0;left:var(--space-4);right:var(--space-4);display:flex;justify-content:space-between;align-items:center;transform:translateY(-50%);pointer-events:none}
.feed-section .feed-store-item-post__maker,
.feed-section .feed-store-item-post__kind{display:inline-flex;align-items:center;gap:var(--space-1);min-height:calc(var(--size-6) + var(--space-1));padding:0 var(--space-3);border-radius:var(--radius-full);font-family:var(--font-mono);font-size:var(--text-xs);font-weight:var(--font-bold);letter-spacing:0;line-height:1}
.feed-section .feed-store-item-post__maker{padding-left:var(--space-1);background:var(--surface-primary);color:var(--text-primary);border:1px solid var(--border-strong)}
.feed-section .feed-store-item-post__ident{width:calc(var(--size-4) - var(--space-1) / 4);height:calc(var(--size-4) - var(--space-1) / 4);border-radius:var(--radius-full);background:var(--highlight-yellow);flex:0 0 auto}
.feed-section .feed-store-item-post__kind{background:var(--highlight-yellow);color:var(--accent-dark);text-transform:uppercase}
.feed-section .feed-store-item-post__media{position:relative;display:block;width:100%;min-width:0;box-sizing:border-box;min-height:calc(var(--size-20) * 5 + var(--space-5));border-radius:var(--radius-2xl);overflow:hidden;background:var(--color-dark-900);box-shadow:var(--shadow-drop)}
.feed-section .feed-store-item-post__image{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.feed-section .feed-store-item-post__fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--accent-dark),var(--color-dark-800));color:var(--highlight-yellow)}
.feed-section .feed-store-item-post__fallback iconify-icon{width:var(--size-16);height:var(--size-16)}
.feed-section .feed-store-item-post__imgactions{position:absolute;z-index:3;left:var(--space-3);right:var(--space-3);bottom:var(--space-3);display:flex;align-items:center;gap:var(--space-2);margin:0;padding:0;border-top:0;color:var(--text-inverse);font-family:var(--font-mono);font-size:var(--text-xs);font-weight:var(--font-bold)}
.feed-section .feed-store-item-post__glass{display:inline-flex;align-items:center;gap:calc(var(--space-2) - var(--space-1) / 2);height:calc(var(--space-8) + var(--space-1));padding:0 calc(var(--space-3) + var(--space-1) / 4);border-radius:var(--radius-full);background:var(--feed-action-pill-bg);border:1px solid var(--feed-action-pill-border);backdrop-filter:blur(calc(var(--space-3) - var(--space-1) / 4)) saturate(1.2);color:var(--text-inverse);font-family:var(--font-mono);font-weight:var(--font-bold);font-size:var(--text-xs);white-space:nowrap;text-shadow:0 var(--space-1) calc(var(--space-2) - var(--space-1) / 2) color-mix(in srgb,var(--color-black) 40%,transparent);box-shadow:none}
.feed-section .feed-store-item-post .feed-card__vote-cluster{min-height:calc(var(--space-8) + var(--space-1));min-width:0;overflow:visible}
.feed-section .feed-store-item-post .feed-card__vote-cluster:hover{background:var(--feed-card-glass-bg);color:var(--text-inverse)}
.feed-section .feed-store-item-post .feed-card__vote-divider{width:1px;height:calc(var(--size-5) - var(--space-1) / 2);background:var(--feed-card-glass-border);border:0}
.feed-section .feed-store-item-post .feed-card__action{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-1);height:auto;min-height:0;padding:0;border:0;background:transparent;box-shadow:none;color:inherit;font:inherit;line-height:1;cursor:pointer;text-decoration:none;outline:0}
.feed-section .feed-store-item-post .feed-card__action:hover,
.feed-section .feed-store-item-post .feed-card__action:focus-visible{background:transparent;color:var(--text-inverse)}
.feed-section .feed-store-item-post .feed-card__action iconify-icon{width:calc(var(--size-5) - var(--space-1) / 2);height:calc(var(--size-5) - var(--space-1) / 2);color:currentColor}
.feed-section .feed-store-item-post .feed-card__action--upvote.active,
.feed-section .feed-store-item-post .feed-card__action--downvote.active{background:transparent;color:var(--feed-action-active-color);border-radius:0;outline:0}
.feed-section .feed-store-item-post__rightgrp{margin-left:auto;display:inline-flex;align-items:center;gap:var(--space-2)}
.feed-section .feed-store-item-post__cta{display:inline-flex;align-items:center;justify-content:center;height:calc(var(--space-8) + var(--space-1));padding:0 var(--space-4);border:0;border-radius:var(--radius-full);background:var(--accent-primary);color:var(--accent-dark);font-family:var(--font-mono);font-size:var(--text-xs);font-weight:var(--font-bold);line-height:1;cursor:pointer;text-decoration:none;white-space:nowrap}
.feed-section .feed-store-item-post__below{padding:var(--space-3) var(--space-4) 0}
.feed-section .feed-store-item-post__title{font-family:var(--font-heading);font-size:var(--text-2xl);font-weight:var(--font-bold);line-height:var(--leading-tight);letter-spacing:0;color:var(--text-primary);margin:0}
.feed-section .feed-store-item-post__deck{font-size:var(--text-sm);font-weight:var(--font-medium);line-height:var(--leading-snug);color:var(--text-secondary);margin:var(--space-1) 0 0}
.feed-section .feed-store-item-post__meta{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:var(--font-bold);letter-spacing:0;text-transform:uppercase;color:var(--text-muted);line-height:var(--leading-snug);margin-top:var(--space-2)}
@media (max-width:calc(var(--size-20) * 5 + var(--space-5))){
    .feed-section .feed-store-item-post__imgactions{left:var(--space-2);right:var(--space-2);gap:var(--space-1)}
    .feed-section .feed-store-item-post__glass{height:calc(var(--space-8) + var(--space-1) / 2);padding:0 var(--space-2)}
    .feed-section .feed-store-item-post__cta{height:calc(var(--space-8) + var(--space-1) / 2);padding:0 var(--space-3)}
    .feed-section .feed-store-item-post__rightgrp{gap:var(--space-1)}
}

.feed-section .feed-cover-post .feed-card__vote-cluster,
.feed-section .feed-app-post .feed-card__vote-cluster,
.feed-section .feed-quest-post .feed-card__vote-cluster,
.feed-section .feed-zine-post .feed-card__vote-cluster,
.feed-section .feed-store-item-post .feed-card__vote-cluster,
.feed-section .feed-cover-post__comment,
.feed-section .feed-app-post__comment,
.feed-section .feed-quest-post__comment,
.feed-section .feed-zine-post__comment,
.feed-section .feed-store-item-post__comment,
.feed-section .feed-cover-post__rightgrp,
.feed-section .feed-app-post__rightgrp,
.feed-section .feed-quest-post__rightgrp,
.feed-section .feed-zine-post__rightgrp,
.feed-section .feed-store-item-post__rightgrp{flex:0 0 auto}

.feed-section .feed-cover-post .feed-card__vote-divider,
.feed-section .feed-app-post .feed-card__vote-divider,
.feed-section .feed-quest-post .feed-card__vote-divider,
.feed-section .feed-zine-post .feed-card__vote-divider,
.feed-section .feed-store-item-post .feed-card__vote-divider{display:none}

.feed-section .feed-card:is(.feed-post-card,.feed-cover-post,.feed-app-post,.feed-ticket-post,.feed-quest-post,.feed-zine-post,.feed-store-item-post) .feed-card__action--upvote.active,
.feed-section .feed-card:is(.feed-post-card,.feed-cover-post,.feed-app-post,.feed-ticket-post,.feed-quest-post,.feed-zine-post,.feed-store-item-post) .feed-card__action--downvote.active{min-height:calc(var(--space-8) + var(--space-1));padding:0 calc(var(--space-4) - var(--space-1) / 2);border-radius:var(--feed-card-action-radius);background:var(--vote-active-bg);color:var(--vote-active-color);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--surface-primary) 18%,transparent),0 var(--space-2) var(--space-5) calc(var(--space-5) * -1) var(--vote-active-bg)}
.feed-section .feed-card:is(.feed-post-card,.feed-cover-post,.feed-app-post,.feed-ticket-post,.feed-quest-post,.feed-zine-post,.feed-store-item-post) .feed-card__action--upvote.active:hover,
.feed-section .feed-card:is(.feed-post-card,.feed-cover-post,.feed-app-post,.feed-ticket-post,.feed-quest-post,.feed-zine-post,.feed-store-item-post) .feed-card__action--upvote.active:focus-visible,
.feed-section .feed-card:is(.feed-post-card,.feed-cover-post,.feed-app-post,.feed-ticket-post,.feed-quest-post,.feed-zine-post,.feed-store-item-post) .feed-card__action--downvote.active:hover,
.feed-section .feed-card:is(.feed-post-card,.feed-cover-post,.feed-app-post,.feed-ticket-post,.feed-quest-post,.feed-zine-post,.feed-store-item-post) .feed-card__action--downvote.active:focus-visible{background:var(--vote-active-bg);color:var(--vote-active-color)}
.feed-section .feed-quest-post--live-card{cursor:default}
.feed-section .feed-quest-post__live-card{position:relative;z-index:0;width:100%;min-width:0}
.feed-section .feed-quest-post__live-card .ds-pack-quest-card{width:100%;margin:0}
.feed-section .feed-quest-post__actions{display:flex;align-items:center;gap:var(--space-4);margin:var(--space-3) var(--space-4) 0;padding:0;border-top:0;color:var(--text-muted);font-family:var(--font-body);font-size:var(--text-sm);font-weight:var(--font-bold)}
.feed-section .feed-quest-post__actions .feed-card__vote-cluster{display:inline-flex;align-items:center;gap:var(--space-1);height:auto;min-height:0;min-width:0;background:transparent;border:0;box-shadow:none;color:inherit;overflow:visible}
.feed-section .feed-quest-post__actions .feed-card__vote-cluster:hover{background:transparent;color:var(--text-primary)}
.feed-section .feed-quest-post__actions .feed-card__vote-divider{display:none}
.feed-section .feed-quest-post__actions .feed-card__action{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-1);height:auto;min-height:0;padding:0;border:0;background:transparent;box-shadow:none;color:inherit;font:inherit;line-height:1;cursor:pointer;text-decoration:none;outline:0}
.feed-section .feed-quest-post__actions .feed-card__action:hover,
.feed-section .feed-quest-post__actions .feed-card__action:focus-visible{background:transparent;color:var(--text-primary)}
.feed-section .feed-quest-post__actions .feed-card__action iconify-icon{width:calc(var(--size-5) - var(--space-1) / 2);height:calc(var(--size-5) - var(--space-1) / 2);color:currentColor}
.feed-section .feed-quest-post__actions .feed-card__action--share{margin-left:auto}

@media (max-width:calc(var(--size-20) * 5 + var(--space-5))){
    .feed-section .feed-ticket-post__stub{align-items:flex-start;flex-wrap:wrap}
    .feed-section .feed-quest-post__actions{gap:var(--space-3);margin-left:var(--space-3);margin-right:var(--space-3)}
}

.feed-section .feed-empty {
    color: var(--text-muted);
}

/* ── "You're all caught up" divider ── */
.caught-up-divider {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-2) 0;
}

.caught-up-divider::before,
.caught-up-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-subtle);
}

.caught-up-divider__text {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--text-muted);
    white-space: nowrap;
}

.feed-encore-badge {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    max-width: 100%;
    min-height: var(--space-8);
    padding: 0 var(--space-3);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm, 8px);
    background: color-mix(in srgb, var(--surface-primary) 88%, var(--surface-secondary));
    color: var(--text-secondary);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    letter-spacing: 0;
}

.feed-encore-badge__date {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.feed-stream__entry--rerun > .feed-card,
.feed-stream__entry--rerun > .feed-stream__priority-surface > .feed-card {
    opacity: 0.92;
}

.feed-end-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-4);
    padding: var(--space-5);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm, 8px);
    background: var(--surface-primary);
    color: var(--text-primary);
    box-shadow: var(--shadow-card, 0 10px 30px rgba(15, 23, 42, 0.08));
}

.feed-end-card__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--space-10);
    height: var(--space-10);
    border-radius: 50%;
    background: var(--surface-secondary);
    color: var(--text-primary);
}

.feed-end-card__mark iconify-icon {
    width: var(--space-5);
    height: var(--space-5);
}

.feed-end-card__body {
    min-width: 0;
}

.feed-end-card__eyebrow {
    margin: 0 0 var(--space-1);
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    letter-spacing: 0;
    text-transform: uppercase;
}

.feed-end-card__title {
    margin: 0;
    color: var(--text-primary);
    font-size: var(--text-xl);
    line-height: 1.2;
}

.feed-end-card__copy {
    margin: var(--space-2) 0 0;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: 1.5;
}

.feed-end-card__actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.feed-end-card__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--space-10);
    padding: 0 var(--space-4);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm, 8px);
    background: var(--surface-secondary);
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    text-decoration: none;
    transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
}

.feed-end-card__action:hover,
.feed-end-card__action:focus-visible {
    transform: translateY(-1px);
    border-color: var(--border-strong, var(--text-muted));
    background: var(--surface-primary);
}

.feed-end-card__action--primary {
    background: var(--text-primary);
    border-color: var(--text-primary);
    color: var(--surface-primary);
}

.feed-end-card__action--primary:hover,
.feed-end-card__action--primary:focus-visible {
    background: var(--text-primary);
    color: var(--surface-primary);
}

.feed-end-card__action iconify-icon {
    width: var(--space-4);
    height: var(--space-4);
    flex: 0 0 auto;
}

@media (max-width: 480px) {
    .feed-end-card {
        grid-template-columns: 1fr;
    }
    .feed-end-card__mark {
        width: var(--space-9);
        height: var(--space-9);
    }
    .feed-end-card__action {
        width: 100%;
    }
}

.feed-empty {
    text-align: center;
    padding: var(--space-8) var(--space-4);
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
}

.feed-empty__icon {
    width: var(--space-8);
    height: var(--space-8);
    opacity: var(--btn-disabled-opacity);
}

.feed-card__staging-label--published {
    width: 100%;
    text-align: center;
    padding: var(--space-2) 0;
}

.feed-card__show-more--visible {
    display: inline-flex;
}

.feed-card--silencing {
    opacity: 0;
    transform: translateX(var(--space-5));
    transition: opacity var(--duration-normal) var(--ease-default),
                transform var(--duration-normal) var(--ease-default);
}

.feed-card--hidden,
.quest-card--filtered {
    display: none;
}

/* ========== Global Feed House Intro — identity surface ========== */
.feed-section .feed-card.feed-card--house-intro {
    padding: var(--space-0);
    margin: var(--space-0);
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: var(--space-0);
    overflow: visible;
    color: var(--text-primary);
}

.feed-section .house-intro-card__wrap {
    position: relative;
    width: 100%;
}

/* ── House intro pill row — straddles the card's top edge (req §3.2) ── */
.feed-section .house-intro-card__tags {
    position: absolute;
    z-index: 1;
    top: 0;
    left: var(--space-4);
    right: var(--space-4);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transform: translateY(-50%);
    pointer-events: none;
}
.feed-section .house-intro-card__maker,
.feed-section .house-intro-card__kind {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: calc(var(--size-6) + var(--space-1));
    padding: 0 var(--space-3);
    border-radius: var(--radius-full);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: 0;
    line-height: 1;
    text-transform: uppercase;
}
.feed-section .house-intro-card__maker {
    padding-left: var(--space-1);
    background: var(--surface-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-strong);
    max-width: calc(100% - var(--size-32));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: auto;
}
.feed-section .house-intro-card__ident {
    width: calc(var(--size-4) - var(--space-1) / 4);
    height: calc(var(--size-4) - var(--space-1) / 4);
    border-radius: var(--radius-full);
    flex: 0 0 auto;
    overflow: hidden;
}
.feed-section .house-intro-card__ident--avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.feed-section .house-intro-card__kind {
    background: var(--accent-primary);
    color: var(--accent-dark);
}

.feed-section .house-intro-card__surface {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
    padding: var(--space-8) var(--space-5) var(--space-5); /* top clears the straddling pills */
    background: var(--surface-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-2xl);
    box-shadow: none;
    color: inherit;
    text-decoration: none;
}

.feed-section .house-intro-card__surface:hover .house-intro-card__title,
.feed-section .house-intro-card__surface:focus-visible .house-intro-card__title {
    color: var(--status-info);
}

.feed-section .house-intro-card__surface:focus-visible {
    outline: calc(var(--space-1) / 2) solid var(--interactive-focus-ring);
    outline-offset: var(--space-1);
}

.feed-section .house-intro-card__art {
    width: calc(var(--size-20) + var(--space-4));
    height: calc(var(--size-20) + var(--space-4));
    border-radius: var(--radius-xl);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    overflow: hidden;
    background: var(--surface-secondary);
    color: var(--status-info);
    border: 1px solid var(--border-subtle);
}

.feed-section .house-intro-card__art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.feed-section .house-intro-card__art iconify-icon {
    width: var(--size-9);
    height: var(--size-9);
}

.feed-section .house-intro-card__body {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.feed-section .house-intro-card__eyebrow {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    line-height: var(--leading-snug);
    text-transform: uppercase;
    letter-spacing: 0;
}

.feed-section .house-intro-card__title {
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    overflow-wrap: anywhere;
}

.feed-section .house-intro-card__teaser {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    line-height: var(--leading-normal);
    overflow-wrap: anywhere;
}

.feed-section .house-intro-card__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-1);
}

.feed-section .house-intro-card__topic,
.feed-section .house-intro-card__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: var(--size-8);
    padding: 0 var(--space-3);
    border-radius: var(--radius-full);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    line-height: 1;
    white-space: nowrap;
}

.feed-section .house-intro-card__topic {
    max-width: 100%;
    background: var(--surface-secondary);
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
}

.feed-section .house-intro-card__cta {
    background: var(--status-info-subtle);
    color: var(--status-info);
}

.feed-section .house-intro-card__topic iconify-icon,
.feed-section .house-intro-card__cta iconify-icon {
    width: calc(var(--size-4) - var(--space-1) / 4);
    height: calc(var(--size-4) - var(--space-1) / 4);
    flex: 0 0 auto;
}

@media (max-width: calc(var(--size-20) * 6)) {
    .feed-section .house-intro-card__surface {
        align-items: flex-start;
        gap: var(--space-3);
        padding: var(--space-6) var(--space-4) var(--space-4);
        border-radius: var(--radius-xl);
    }

    .feed-section .house-intro-card__art {
        width: var(--size-16);
        height: var(--size-16);
        border-radius: var(--radius-lg);
    }

    .feed-section .house-intro-card__title {
        font-size: var(--text-xl);
    }

    .feed-section .house-intro-card__topic,
    .feed-section .house-intro-card__cta {
        white-space: normal;
    }
}

/* ========== Global Feed Hot Channels — lab surface ========== */
.feed-section .feed-card.feed-card--hot-channels {
    padding: var(--space-0);
    margin: var(--space-0);
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: var(--space-0);
    overflow: visible;
    color: var(--text-primary);
}

.feed-section .hot-channels-card__wrap {
    position: relative;
}

.feed-section .hot-channels-card__tags {
    position: absolute;
    z-index: 6;
    top: calc((var(--space-3) + var(--space-1) / 4) * -1);
    left: var(--space-4);
    right: var(--space-4);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    pointer-events: none;
}

.feed-section .hot-channels-card__maker,
.feed-section .hot-channels-card__kind {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: calc(var(--size-6) + var(--space-1));
    padding: 0 var(--space-3);
    border-radius: var(--radius-full);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: 0;
    line-height: 1;
    text-transform: uppercase;
}

.feed-section .hot-channels-card__maker {
    max-width: calc(100% - var(--size-32));
    padding-left: var(--space-1);
    background: var(--surface-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-strong);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.feed-section .hot-channels-card__ident {
    width: calc(var(--size-4) - var(--space-1) / 4);
    height: calc(var(--size-4) - var(--space-1) / 4);
    border-radius: var(--radius-full);
    flex: 0 0 auto;
    overflow: hidden;
}
.feed-section .hot-channels-card__ident--avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.feed-section .hot-channels-card__kind {
    background: var(--highlight-yellow);
    color: var(--accent-dark);
}

.feed-section .hot-channels-card__surface {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-5) var(--space-4);
    background: var(--surface-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-drop);
}

.feed-section .hot-channels-card__header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.feed-section .hot-channels-card__icon {
    width: var(--size-12);
    height: var(--size-12);
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: var(--status-success-subtle);
    color: var(--status-success);
}

.feed-section .hot-channels-card__icon iconify-icon {
    width: var(--size-6);
    height: var(--size-6);
}

.feed-section .hot-channels-card__heading {
    min-width: 0;
    flex: 1 1 auto;
}

.feed-section .hot-channels-card__eyebrow {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    line-height: var(--leading-snug);
    text-transform: uppercase;
    letter-spacing: 0;
}

.feed-section .hot-channels-card__title {
    margin: var(--space-1) 0 0;
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-snug);
}

.feed-section .hot-channels-card__count {
    width: var(--size-8);
    height: var(--size-8);
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: var(--surface-secondary);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
}

.feed-section .hot-channels-card__rows {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--border-subtle);
}

.feed-section .hot-channels-card__empty {
    margin: var(--space-0);
    padding: var(--space-3);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-secondary);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}

.feed-section .hot-channels-card__row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: calc(var(--size-12) + var(--space-3));
    padding: var(--space-3) 0;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid var(--border-subtle);
}

.feed-section .hot-channels-card__row:last-child {
    border-bottom: 0;
}

.feed-section .hot-channels-card__row:hover .hot-channels-card__row-title,
.feed-section .hot-channels-card__row:focus-visible .hot-channels-card__row-title {
    color: var(--status-success);
}

.feed-section .hot-channels-card__row:focus-visible {
    outline: calc(var(--space-1) / 2) solid var(--interactive-focus-ring);
    outline-offset: var(--space-1);
}

.feed-section .hot-channels-card__row-icon {
    width: var(--space-10);
    height: var(--space-10);
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: var(--surface-secondary);
    color: var(--text-secondary);
}

.feed-section .hot-channels-card__row-icon iconify-icon,
.feed-section .hot-channels-card__row-action iconify-icon {
    width: calc(var(--size-5) - var(--space-1) / 2);
    height: calc(var(--size-5) - var(--space-1) / 2);
}

.feed-section .hot-channels-card__row-text {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.feed-section .hot-channels-card__row-title {
    color: var(--text-primary);
    font-size: var(--text-base);
    font-weight: var(--font-bold);
    line-height: var(--leading-snug);
    overflow-wrap: anywhere;
}

.feed-section .hot-channels-card__row-meta {
    color: var(--text-muted);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    overflow-wrap: anywhere;
}

.feed-section .hot-channels-card__row-action {
    width: var(--size-8);
    height: var(--size-8);
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: var(--text-muted);
}

@media (max-width: calc(var(--size-20) * 6)) {
    .feed-section .hot-channels-card__surface {
        padding: var(--space-6) var(--space-4) var(--space-4);
        border-radius: var(--radius-xl);
    }

    .feed-section .hot-channels-card__title {
        font-size: var(--text-lg);
    }
}

/* ========== Vision Board Founder Card ========== */
.feed-section .feed-card.feed-card--vision-board {
    padding: var(--space-0);
    margin: var(--space-0);
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: var(--space-0);
    overflow: visible;
    color: var(--text-primary);
    cursor: pointer;
}

.feed-section .vision-board-card__wrap {
    position: relative;
}

.feed-section .vision-board-card__tags {
    position: absolute;
    z-index: 6;
    top: calc((var(--space-3) + var(--space-1) / 4) * -1);
    left: var(--space-4);
    right: var(--space-4);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    pointer-events: none;
}

.feed-section .vision-board-card__maker,
.feed-section .vision-board-card__kind {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: calc(var(--size-6) + var(--space-1));
    padding: 0 var(--space-3);
    border-radius: var(--radius-full);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: 0;
    line-height: 1;
    text-transform: uppercase;
}

.feed-section .vision-board-card__maker {
    max-width: calc(100% - var(--size-32));
    padding-left: var(--space-1);
    background: var(--surface-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-strong);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.feed-section .vision-board-card__ident {
    width: calc(var(--size-4) - var(--space-1) / 4);
    height: calc(var(--size-4) - var(--space-1) / 4);
    border-radius: var(--radius-full);
    background: var(--accent-tertiary);
    flex: 0 0 auto;
}

.feed-section .vision-board-card__kind {
    background: var(--highlight-yellow);
    color: var(--accent-dark);
}

.feed-section .vision-board-card__surface {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-5) var(--space-4);
    background: var(--surface-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-drop);
}

.feed-section .vision-board-card__header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.feed-section .vision-board-card__icon {
    width: var(--size-12);
    height: var(--size-12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    background: var(--accent-primary-subtle);
    color: var(--text-primary);
}

.feed-section .vision-board-card__icon iconify-icon,
.feed-section .vision-board-card__primary iconify-icon {
    font-size: var(--text-xl);
}

.feed-section .vision-board-card__heading {
    min-width: 0;
}

.feed-section .vision-board-card__eyebrow,
.feed-section .vision-board-card__meta,
.feed-section .vision-board-card__chip {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}

.feed-section .vision-board-card__eyebrow {
    display: block;
    font-family: var(--font-mono);
    font-weight: var(--font-semibold);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0;
}

.feed-section .vision-board-card__title {
    margin: var(--space-1) 0 0;
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    line-height: var(--leading-snug);
}

.feed-section .vision-board-card__description {
    margin: var(--space-0);
    color: var(--text-secondary);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
}

.feed-section .vision-board-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.feed-section .vision-board-card__chip {
    display: inline-flex;
    align-items: center;
    min-height: var(--size-10);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-full);
    background: var(--surface-secondary);
    color: var(--text-primary);
    font-weight: var(--font-semibold);
}

.feed-section .vision-board-card__priorities {
    list-style: none;
    display: grid;
    gap: var(--space-3);
    margin: var(--space-0);
    padding: 0;
}

.feed-section .vision-board-card__priorities li {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-3);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-secondary);
}

.feed-section .vision-board-card__priorities span,
.feed-section .vision-board-card__priorities em {
    color: var(--text-muted);
    font-size: var(--text-sm);
    font-style: normal;
    font-weight: var(--font-semibold);
    line-height: var(--leading-normal);
}

.feed-section .vision-board-card__priorities strong {
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-size: var(--text-base);
    line-height: var(--leading-snug);
}

.feed-section .vision-board-card__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-1);
}

.feed-section .vision-board-card__primary {
    min-height: var(--size-12);
}

.feed-section .vision-board-card__meta {
    color: var(--text-muted);
}

@media (max-width: calc(var(--size-20) * 6)) {
    .feed-section .vision-board-card__surface {
        padding: var(--space-6) var(--space-4) var(--space-4);
        border-radius: var(--radius-xl);
    }
}

/* =============================================================================
   Styles extracted from inline <style> in feed/index.html
   ============================================================================= */

/* ========== Intro Mini Card (passport card in feed) ========== */
.intro-embed {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-3) 0 var(--space-1);
}
.intro-embed__values {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-2);
    min-width: 0;
    flex-shrink: 1;
}
.intro-embed__value {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--border-strong);
    background: var(--gallery-border);
    border: 1px solid var(--gallery-border);
    border-radius: var(--radius-sm);
    padding: var(--space-1) var(--space-3);
    white-space: nowrap;
}
.intro-embed__value--primary {
    color: var(--color-cyan-500);
    background: var(--accent-secondary-subtle);
    border-color: var(--color-cyan-500);
}
.intro-embed__nouns {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    min-width: 0;
    flex-shrink: 1;
}
.intro-embed__noun {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
}
.intro-mini-card {
    width: calc(var(--size-32) + var(--size-12) + var(--space-1));
    min-width: calc(var(--size-32) + var(--size-12) + var(--space-1));
    aspect-ratio: 1 / 1;
    background: linear-gradient(180deg, var(--color-dark-700), var(--gallery-canvas));
    border-radius: var(--radius-lg);
    border: 1px solid var(--gallery-border);
    overflow: hidden;
    box-shadow: var(--gallery-shadow);
}
.intro-mini-card__inner { width: 100%; height: 100%; }
.intro-mini-card__banner {
    width: 100%; height: 100%; position: relative; overflow: hidden;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding-bottom: var(--space-3); background: linear-gradient(135deg, var(--color-dark-700), var(--filter-pill-bg-active));
}
.intro-mini-card__banner-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.intro-mini-card__overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 0%, var(--color-dark-800) 55%, var(--gallery-canvas) 100%); pointer-events: none; }
.intro-mini-card__identity { display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-3); position: relative; z-index: var(--z-rail); }
.intro-mini-card__avatar { width: calc(var(--size-8) + var(--space-1)); height: calc(var(--size-8) + var(--space-1)); border-radius: var(--radius-full); border: 1px solid var(--color-cyan-500); background: var(--gallery-canvas); flex-shrink: 0; }
.intro-mini-card__handle { font-family: var(--font-heading); font-size: var(--text-xs); font-weight: var(--font-bold); color: var(--gallery-text-primary); text-transform: uppercase; line-height: 1.2; }
.intro-mini-card__handle span { font-weight: var(--font-normal); color: var(--text-muted); font-size: var(--text-xs); margin-right: calc(var(--space-1) / 2); }

/* =============================================================================
   HOME PAGE STYLES
   Uses CSS tokens from base.html for consistent theming
   ============================================================================= */

/* Content wrapper for sections that need padding */
.content-padded {
    padding: 0 var(--space-5);
}

/* -----------------------------------------------------------------------------
   Quest Banner - Copied from quests.html (working version)
   ----------------------------------------------------------------------------- */
.quest-banner {
    height: 320px;
    min-height: 320px;
    position: relative;
    overflow: visible;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 16px;
    border-radius: var(--radius-md);
}

/* Change Banner Button */
.banner-change-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-full);
    color: white;
    cursor: pointer;
    transition: all 0.2s;
    opacity: 0.7;
}

.banner-change-btn:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.7);
    border-color: var(--accent);
    transform: scale(1.1);
}

/* Mobile Settings Button - hidden by default (desktop) */
.banner-settings {
    display: none;
}

@media (max-width: 767px) {
    /* Show mobile settings gear */
    .banner-settings {
        display: block;
        position: absolute;
        bottom: 12px;
        left: 12px;
        z-index: 10;
    }

    .banner-settings__btn {
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: var(--radius-full);
        color: white;
        cursor: pointer;
        transition: all 0.2s;
        opacity: 0.8;
    }

    .banner-settings__btn:hover,
    .banner-settings__btn.active {
        opacity: 1;
        background: rgba(0, 0, 0, 0.7);
        border-color: var(--accent);
        transform: scale(1.05);
    }

    .banner-settings__btn svg {
        width: 18px;
        height: 18px;
    }

    /* Dropdown opens UPWARD */
    .banner-settings__dropdown {
        position: absolute;
        bottom: calc(100% + 8px);
        left: 0;
        min-width: 180px;
        background: var(--surface-secondary, var(--filter-pill-bg-active));
        border: 1px solid var(--border-color, rgba(255,255,255,0.1));
        border-radius: var(--radius-md);
        box-shadow: 0 10px 25px rgba(0,0,0,0.5);
        opacity: 0;
        visibility: hidden;
        transform: translateY(8px);
        transition: all 0.15s ease;
        z-index: 100;
        overflow: hidden;
    }

    .banner-settings__dropdown.active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .banner-settings__dropdown a,
    .banner-settings__dropdown button {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        padding: 12px 16px;
        background: transparent;
        border: none;
        color: var(--text-primary, var(--color-gray-200));
        font-size: var(--text-sm);
        font-family: inherit;
        text-decoration: none;
        text-align: left;
        cursor: pointer;
        transition: background 0.1s;
    }

    .banner-settings__dropdown a:hover,
    .banner-settings__dropdown button:hover {
        background: rgba(255,255,255,0.1);
    }

    .banner-settings__dropdown svg {
        width: 16px;
        height: 16px;
        color: var(--text-muted, var(--color-gray-400));
    }

    /* Hide original change banner button on mobile (now in gear menu) */
    .banner-change-btn {
        display: none;
    }
}

/* Banner Selection Modal */
.banner-modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-fab);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
}

.banner-modal.active {
    opacity: 1;
    visibility: visible;
}

.banner-modal__content {
    background: var(--surface-secondary);
    border-radius: var(--radius-xl);
    padding: 24px;
    max-width: 800px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
}

.banner-modal__title {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    margin-bottom: 20px;
    color: var(--text-primary);
}

.banner-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

.banner-option {
    position: relative;
    aspect-ratio: 16/9;
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    border: 3px solid transparent;
    transition: all 0.2s;
}

.banner-option:hover {
    border-color: var(--accent);
    transform: scale(1.03);
}

.banner-option.selected {
    border-color: var(--color-green-400);
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.32);
}

.banner-option img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.banner-option__check {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    background: var(--color-green-500);
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: var(--text-base);
    font-weight: bold;
}

.banner-option.selected .banner-option__check {
    display: flex;
}

.banner-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--border-default);
}

.btn-modal-cancel {
    padding: 12px 24px;
    background: var(--surface-tertiary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    color: var(--text-secondary);
    font-weight: var(--font-medium);
    cursor: pointer;
    transition: all 0.2s;
}

.btn-modal-cancel:hover {
    background: var(--surface-primary);
}

.btn-modal-save {
    padding: 12px 32px;
    background: var(--color-green-500);
    border: none;
    border-radius: var(--radius-lg);
    color: white;
    font-weight: var(--font-semibold);
    cursor: pointer;
    transition: all 0.2s;
}

.btn-modal-save:hover {
    background: var(--color-green-400);
    transform: translateY(-1px);
}

.quest-banner__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    border-radius: var(--radius-lg);
}

.quest-banner__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.5) 0%,
        rgba(0,0,0,0.2) 30%,
        rgba(0,0,0,0.2) 50%,
        rgba(0,0,0,0.6) 100%
    );
    z-index: 1;
    border-radius: var(--radius-lg);
}

.quest-banner__content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: var(--space-4) var(--space-5);
    color: white;
}

.quest-banner__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.quest-banner__header-left {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.quest-banner__stats {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.quest-banner__title {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: white;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

.quest-banner__subtitle {
    font-size: var(--text-sm);
    color: rgba(255,255,255,0.8);
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
    margin-top: var(--space-1);
}

.quest-banner__points {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(12px);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-xl);
    border: 1px solid rgba(255,255,255,0.15);
}

.quest-banner__points-icon {
    width: 24px;
    height: 24px;
    color: var(--color-yellow-400);
}

.quest-banner__points-value {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: white;
}

.quest-banner__points-label {
    font-size: var(--text-sm);
    color: rgba(255,255,255,0.7);
    margin-left: var(--space-1);
}

.quest-banner__lumina {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(12px);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-yellow-400, rgba(34, 197, 94, 0.5));
    box-shadow: 0 0 12px var(--color-purple-700, rgba(34, 197, 94, 0.3));
}

.quest-banner__lumina[data-lumina="teal"] {
    --lumina-color: rgba(34, 197, 94, 0.5);
    --lumina-glow: rgba(34, 197, 94, 0.3);
    --lumina-text: var(--color-green-400);
}

.quest-banner__lumina[data-lumina="violet"] {
    --lumina-color: rgba(124, 58, 237, 0.5);
    --lumina-glow: rgba(124, 58, 237, 0.3);
    --lumina-text: var(--color-purple-500);
}

.quest-banner__lumina[data-lumina="gold"] {
    --lumina-color: rgba(234, 179, 8, 0.5);
    --lumina-glow: rgba(234, 179, 8, 0.3);
    --lumina-text: var(--color-yellow-400);
}

.quest-banner__lumina-icon {
    font-size: var(--text-base);
    color: var(--color-green-400, var(--color-green-400));
}

.quest-banner__lumina-label {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--color-green-400, var(--color-green-400));
    letter-spacing: 0.03em;
}

.quest-banner__spacer {
    flex: 1;
}

/* House Banner Rows — 2-column grid on desktop */
.banner-houses {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    flex: 1;
    align-content: center;
    margin-top: var(--space-2);
}

.banner-house-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.2s;
    text-decoration: none;
    color: white;
}

.banner-house-row:hover {
    background: rgba(0, 0, 0, 0.5);
    border-color: rgba(255, 255, 255, 0.15);
}

.banner-house-row--primary {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.45);
}

.banner-house-row__info {
    min-width: 0;
    flex: 1;
}

.banner-house-row__name-line {
    display: flex;
    align-items: baseline;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
}

.banner-house-row__name {
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: white;
    overflow: hidden;
    text-overflow: ellipsis;
}

.banner-house-row__xp {
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, 0.5);
    font-weight: var(--font-semibold);
    flex-shrink: 0;
}

.banner-house-row__bar-wrap {
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-xs);
    overflow: hidden;
    margin-top: 4px;
}

.banner-house-row__bar {
    height: 100%;
    border-radius: var(--radius-xs);
    transition: width 0.5s ease;
    min-width: 0;
}

.banner-house-row__icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.banner-house-row__icon-fallback {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.banner-house-row__icon-fallback svg {
    width: 16px;
    height: 16px;
    color: rgba(255, 255, 255, 0.5);
}

/* Empty slot */
.banner-house-empty {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    background: transparent;
    border: 1px dashed rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: rgba(255, 255, 255, 0.4);
    transition: all 0.2s;
    cursor: pointer;
}

.banner-house-empty:hover {
    border-color: rgba(255, 255, 255, 0.4);
    color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.05);
}

.banner-house-empty__text {
    flex: 1;
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
}

.banner-house-empty__plus {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px dashed rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-lg);
    font-weight: var(--font-light);
    flex-shrink: 0;
}

/* Mobile: single column, hide banner houses (XP shown in mobile profile instead) */
@media (max-width: 767px) {
    .banner-houses { display: none; }
}

/* -----------------------------------------------------------------------------
   Profile Banner - With overlaid momentum chart (DEPRECATED - using quest-banner)
   ----------------------------------------------------------------------------- */
.profile-banner {
    height: 320px;
    position: relative;
    overflow: hidden;  /* Keep effects contained within banner */
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: var(--space-4);
    isolation: isolate;  /* Create stacking context */
    border-radius: var(--radius-lg);
}

/* Background image (generated or default gradient) */
.profile-banner__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* Default gradient background when no image */
.profile-banner__image--default {
    background: linear-gradient(
        135deg,
        var(--color-purple-700) 0%,
        var(--color-purple-600) 50%,
        var(--color-green-500) 100%
    );
}

/* Dark gradient overlay for text readability */
.profile-banner__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.4) 0%,
        transparent 30%,
        transparent 50%,
        rgba(0,0,0,0.5) 100%
    );
    z-index: 1;
}

/* Content container */
.profile-banner__content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: var(--space-4) var(--space-5);
    color: white;
}

/* Banner header - flexbox row with title left, points right */
.profile-banner__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

/* Username - shown prominently on mobile only */
.profile-banner__username {
    display: none;  /* Hidden on desktop */
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: white;
    text-shadow: 0 2px 12px rgba(0,0,0,0.6);
    letter-spacing: -0.02em;
}

/* Page title */
.profile-banner__title {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: white;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

/* Points display - Shop style glassy pill (same on mobile & desktop) */
.profile-banner__points {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(12px);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-xl);
    border: 1px solid rgba(255,255,255,0.15);
}

.profile-banner__points-icon {
    width: 24px;
    height: 24px;
    color: var(--color-yellow-400);
}

.profile-banner__points-value {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: white;
}

.profile-banner__points-label {
    font-size: var(--text-sm);
    color: rgba(255,255,255,0.7);
    margin-left: var(--space-1);
}

/* -----------------------------------------------------------------------------
   Search Bar
   ----------------------------------------------------------------------------- */
.search-section {
    padding: 0 var(--space-5);
    margin-bottom: var(--space-5);
}

.search-input {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    padding-left: 44px;
    background: var(--bg-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    color: var(--text-primary);
    transition: var(--transition-fast);
}

.search-input:focus {
    outline: none;
    border-color: var(--color-green-500);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
}

.search-input::placeholder {
    color: var(--text-muted);
}

.search-wrapper {
    position: relative;
}

.search-wrapper svg {
    position: absolute;
    left: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--text-muted);
    pointer-events: none;
}

/* -----------------------------------------------------------------------------
   Quest Cards Grid - Discord-Style Design
   ----------------------------------------------------------------------------- */
.quests-section {
    padding: 0 var(--space-5);
    margin-bottom: var(--space-6);
}

.quests-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);
}

.quests-title {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

.quests-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}

@media (max-width: 900px) {
    .quests-grid {
        grid-template-columns: 1fr;
    }
}

/* Quest Card - Discord Style */
.quest-card {
    border: 1px solid var(--card-border, var(--text-primary));
    background: var(--bg-secondary);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: var(--duration-normal);
}

.quest-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

/* Hero Image Section */
.quest-card__hero {
    position: relative;
    height: 160px;
    overflow: hidden;
}

.quest-card__hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.quest-card__hero-gradient {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--color-purple-700), var(--color-green-600));
}

/* Hero Overlay Controls */
.quest-card__hero-controls {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    display: flex;
    gap: var(--space-2);
}

.quest-card__hero-btn {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background: rgba(0, 0, 0, 0.6);
    border: none;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-fast);
    backdrop-filter: blur(4px);
}

.quest-card__hero-btn:hover {
    background: rgba(0, 0, 0, 0.8);
    transform: scale(1.05);
}

.quest-card__hero-btn svg {
    width: 16px;
    height: 16px;
}

/* Hero Title Overlay (like HBO branding) */
.quest-card__hero-title {
    position: absolute;
    bottom: var(--space-4);
    left: var(--space-4);
    right: var(--space-4);
}

.quest-card__hero-brand {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 4px;
}

.quest-card__hero-name {
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    color: white;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    line-height: 1.2;
}

/* Promoted By / Ends Row */
.quest-card__promo-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-default);
}

.quest-card__promoted {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.quest-card__promoted-icon {
    width: 20px;
    height: 20px;
    border-radius: var(--radius-sm);
    background: var(--color-green-500);
    display: flex;
    align-items: center;
    justify-content: center;
}

.quest-card__promoted-icon svg {
    width: 12px;
    height: 12px;
    color: white;
}

.quest-card__verified {
    color: var(--color-green-400);
    margin-left: 2px;
}

.quest-card__ends {
    font-size: var(--text-sm);
    color: var(--text-muted);
}

/* Quest Info Section */
.quest-card__info {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-4);
}

/* Quest Badge/Icon */
.quest-card__badge {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--color-purple-600), var(--color-purple-600));
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow:
        0 0 20px rgba(124, 58, 237, 0.4),
        0 0 40px rgba(124, 58, 237, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.quest-card__badge::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--color-purple-500), var(--accent-tertiary));
    z-index: -1;
    opacity: 0.5;
}

.quest-card__badge-icon {
    font-size: var(--text-2xl);
}

.quest-card__badge-img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

/* Quest Details */
.quest-card__details {
    flex: 1;
    min-width: 0;
}

.quest-card__category {
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent-tertiary);
    margin-bottom: var(--space-1);
}

.quest-card__reward-title {
    font-size: var(--text-base);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin-bottom: var(--space-1);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.quest-card__reward-icon {
    color: var(--color-green-400);
}

.quest-card__desc {
    font-size: var(--text-sm);
    color: var(--text-muted);
    line-height: 1.4;
}

/* Action Button */
.quest-card__action {
    padding: 0 var(--space-4) var(--space-4);
}

.quest-card__btn {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: none;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--accent-tertiary), var(--color-purple-600));
    color: white;
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    cursor: pointer;
    transition: var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

.quest-card__btn:hover {
    background: linear-gradient(135deg, var(--accent-tertiary), var(--color-purple-500));
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.4);
}

.quest-card__btn:active {
    transform: translateY(0);
}

.quest-card__btn--completed {
    background: var(--bg-tertiary);
    color: var(--text-muted);
    cursor: default;
}

.quest-card__btn--completed:hover {
    background: var(--bg-tertiary);
    transform: none;
    box-shadow: none;
}

.quest-card__timer {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    opacity: 0.9;
}

/* Progress variant (optional) */
.quest-card__progress-wrap {
    padding: 0 var(--space-4) var(--space-3);
}

.quest-card__progress-bar {
    height: 6px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.quest-card__progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-green-500), var(--color-green-400));
    border-radius: var(--radius-full);
    transition: width 0.3s ease;
}

.quest-card__progress-text {
    display: flex;
    justify-content: space-between;
    margin-top: var(--space-2);
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* -----------------------------------------------------------------------------
   Mobile Tab Navigation (shown on mobile only)
   ----------------------------------------------------------------------------- */
.mobile-tabs {
    display: none;
    position: fixed;
    bottom: 0;
    left: 50px;
    right: 0;
    background: var(--bg-primary);
    border-top: 1px solid var(--border-default);
    padding: var(--space-2) var(--space-4);
    z-index: var(--z-fixed);
}

@media (max-width: 767px) {
    .mobile-tabs {
        display: flex;
        justify-content: space-around;
    }

    .main-area__content {
        padding-bottom: 80px;
    }
}

.mobile-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2);
    color: var(--text-muted);
    text-decoration: none;
    transition: var(--transition-fast);
}

.mobile-tab.active {
    color: var(--color-green-500);
}

.mobile-tab svg {
    width: 20px;
    height: 20px;
}

.mobile-tab__label {
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
}

/* -----------------------------------------------------------------------------
   Empty State
   ----------------------------------------------------------------------------- */
.empty-state {
    text-align: center;
    padding: var(--space-8);
    color: var(--text-muted);
}

.empty-state__icon {
    font-size: var(--text-5xl);
    margin-bottom: var(--space-4);
    opacity: 0.5;
}

.empty-state__title {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
}

.empty-state__desc {
    font-size: var(--text-sm);
    max-width: 300px;
    margin: 0 auto;
}

/* ── Featured Experience Card ── */
.featured-experience {
    padding: 0 var(--space-4);
    margin-bottom: var(--space-4);
    overflow: hidden;
}

.featured-experience__card {
    display: flex;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--surface-primary);
    border: 1px solid var(--border-subtle);
    cursor: pointer;
    transform: translateX(110%);
    animation: slideInFromRight 0.6s cubic-bezier(0.16, 1, 0.3, 1) 1.5s forwards;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.featured-experience__card:hover {
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

@keyframes slideInFromRight {
    to { transform: translateX(0); }
}

.featured-experience__image {
    width: 140px;
    min-height: 140px;
    flex-shrink: 0;
    overflow: hidden;
}

.featured-experience__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.featured-experience__card:hover .featured-experience__image img {
    transform: scale(1.05);
}

.featured-experience__body {
    flex: 1;
    padding: var(--space-3) var(--space-4);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-2);
    min-width: 0;
}

.featured-experience__badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--color-orange-400);
    width: fit-content;
}

.featured-experience__title {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    line-height: 1.2;
    text-transform: uppercase;
}

.featured-experience__desc {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.featured-experience__cta {
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent-primary);
}


/* Post Drawer styles live in pages/house-detail.css — drawer only renders inside the house detail template. */

/* =============================================================================
   FEED CARD & COMPONENT STYLES (Design Handoff 2026-04-22)
   Extracted from handoff ui_kits/templates/feed/styles.css
   Only content/card styles — structural layout lives in layout.css
   ============================================================================= */

/* ── Statusbar (thin top bar) ── */
.statusbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px;
  background: transparent;
  position: sticky; top: 0; z-index: var(--z-topbar, 50);
  gap: 12px;
}
.sb-brand {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--accent-primary);
  color: var(--color-black);
  border: none; cursor: pointer;
  padding: 6px 16px 6px 10px; border-radius: var(--radius-full);
  font-family: var(--font-mono); font-size: 14px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  white-space: nowrap; flex-shrink: 0;
  transition: background var(--duration-fast) var(--ease-out);
}
.sb-brand:hover { background: var(--accent-primary-hover); }
.sb-brand .caret {
  transition: transform var(--duration-normal) var(--ease-out);
  display: none;
}
.sb-brand.is-open .caret { transform: rotate(180deg); }
.sb-brand .brand-glyph {
  height: 1em; width: auto; display: block;
  filter: none;
}
@media (max-width: 960px) {
  .sb-brand .caret { display: inline-block; }
}
.sb-cluster {
  display: inline-flex; align-items: center; gap: 8px;
  min-width: 0;
}

/* Coin + Shop combo pill */
.sb-wallet {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--text-primary); color: var(--color-white);
  padding: 6px 10px 6px 12px;
  border-radius: var(--radius-full);
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  letter-spacing: var(--tracking-wide);
  border: none; cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
  min-width: 0;
}
.sb-wallet:hover { background: #1e2532; }
.sb-wallet .coiny {
  width: 14px; height: 14px; border-radius: 3px;
  background: var(--accent-primary);
  display: inline-block; flex-shrink: 0;
}
.sb-wallet-n {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sb-wallet-divider {
  width: 1px; height: 14px;
  background: rgba(255,255,255,0.18);
  display: inline-block; flex-shrink: 0;
}
.sb-wallet-shop {
  font-size: 16px;
  display: inline-grid; place-items: center;
  width: 20px; height: 20px;
  color: var(--accent-primary);
  flex-shrink: 0;
}
.sb-ic {
  width: 36px; height: 36px; border-radius: var(--radius-full);
  display: inline-grid; place-items: center;
  color: var(--text-primary); background: transparent;
  border: 1px solid var(--border-default); cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
  flex-shrink: 0;
}
.sb-ic:hover { background: rgba(44,52,68,0.06); }
.sb-ic i { font-size: 18px; }

/* ── Main feed column ── */
.feed-wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px;
}
.feed-wrap > * + * { margin-top: 20px; }

/* Hero banner — stays pinned, feed cards scroll up and over it */
.feed-hero {
  position: sticky;
  top: 49px;
  z-index: 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: var(--shadow-card);
  background: #e6ebf4;
  margin-bottom: -120px;
}
.feed-hero-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.feed-wrap > .card { position: relative; z-index: 1; }

/* Filter tabs */
.filter-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 4px 0;
}
.pill-tabs {
  display: flex; gap: 4px; padding: 4px;
  background: var(--surface-sunken); border-radius: var(--radius-full);
  width: fit-content;
}
.pill-tab {
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
  color: var(--text-secondary); padding: 7px 14px;
  border-radius: var(--radius-full); background: transparent; border: none; cursor: pointer;
  white-space: nowrap;
}
.pill-tab.is-active { background: var(--color-white); color: var(--text-primary); box-shadow: var(--shadow-lift); }
.filter-right {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px; color: var(--text-muted);
  letter-spacing: var(--tracking-wide);
}

/* ── Cards — base ── */
.card {
  border-radius: var(--radius-xl);
  background: var(--surface-primary);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out);
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-float); }

/* ── System card (evolve / houses / purple prompt) ── */
.card-system {
  background: var(--accent-tertiary);
  color: #fff;
  padding: 22px 24px 20px;
  position: relative;
  box-shadow: 0 2px 6px rgba(44,52,68,0.05), 0 12px 32px rgba(99, 85, 235, 0.18);
}
.card-system .sys-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 10px;
}
.card-system .sys-logo {
  width: 36px; height: 36px; display: grid; place-items: center;
  color: #fff;
}
.card-system .sys-title {
  font-family: var(--font-heading); font-weight: 700; font-size: 20px;
  letter-spacing: -0.01em; color: #fff;
}
.card-system .sys-close {
  margin-left: auto; width: 28px; height: 28px; border-radius: 9999px;
  display: grid; place-items: center; border: none; cursor: pointer;
  background: rgba(255,255,255,0.16); color: #fff;
  transition: background var(--duration-fast) var(--ease-out);
}
.card-system .sys-close:hover { background: rgba(255,255,255,0.28); }
.card-system .sys-body {
  font-family: var(--font-body); font-size: 15px; line-height: 1.55;
  color: rgba(255,255,255,0.88);
  margin-bottom: 18px;
}
.card-system .sys-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.rewards { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.reward-pill {
  background: rgba(255,255,255,0.14);
  color: var(--color-cyan-500);
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  padding: 4px 10px; border-radius: var(--radius-full);
  letter-spacing: var(--tracking-wide);
}
.reward-pill.xp { color: var(--color-cyan-500); }
.reward-pill.coiny { color: var(--accent-primary); }
.btn-dark {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--text-primary); color: #fff;
  border: none; cursor: pointer;
  padding: 10px 18px; border-radius: var(--radius-full);
  font-family: var(--font-body); font-size: 14px; font-weight: 600;
  transition: background var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.btn-dark:hover { background: #141a28; transform: translateY(-1px); }
.btn-dark i { font-size: 14px; }

/* ── Post card (community post) ── */
.card-post { padding: 0; }
.post-head {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 18px 20px 12px;
}
.post-av {
  width: 40px; height: 40px; border-radius: 9999px;
  display: grid; place-items: center;
  position: relative; overflow: hidden; flex-shrink: 0;
  background: var(--surface-sunken);
}
.post-av svg { display: block; width: 100%; height: 100%; }
.post-meta { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.post-name-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.post-name { font-family: var(--font-heading); font-weight: 700; font-size: 15px; color: var(--text-primary); }
.post-conn { font-family: var(--font-body); font-size: 13px; color: var(--text-muted); font-weight: 500; }
.post-sub { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); letter-spacing: var(--tracking-wide); display: flex; align-items: center; gap: 6px; flex-wrap: wrap;}
.post-sub .house-link { color: var(--text-secondary); font-family: var(--font-body); font-size: 13px; font-weight: 500; letter-spacing: 0; }
.post-sub .channel-tag {
  background: var(--highlight-yellow); color: var(--color-black);
  padding: 1px 6px; border-radius: 3px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
}
.post-more { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 4px; }
.post-more:hover { color: var(--text-primary); }

.post-body {
  padding: 4px 20px 16px;
  font-family: var(--font-body); font-size: 22px; font-weight: 500;
  line-height: 1.35; color: var(--text-primary); letter-spacing: -0.01em;
}
.post-body.editorial { font-family: var(--font-edit); font-style: italic; font-weight: 400; }

/* Zine / media card embed */
.zine {
  margin: 8px 16px 16px;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  position: relative;
  background: #0f1a1a;
  cursor: pointer;
  box-shadow: 0 24px 64px rgba(10, 6, 2, 0.35), 0 2px 0 rgba(0,0,0,0.4);
  box-sizing: border-box;
}
.card-zine { padding: 0; }
.card-zine .zine {
  margin: 0;
  border-radius: var(--radius-xl);
  aspect-ratio: 4 / 5;
  box-shadow: none;
}
.card-zine .post-actions { padding: 12px 20px 14px; }
.card-post { overflow: hidden; }
.zine > * { max-width: 100%; }
.zine-img { position: absolute; inset: 0; }
.zine-top {
  position: absolute; top: 28px; left: 32px; right: 32px;
  display: flex; justify-content: space-between; align-items: flex-start;
  color: #f0e6c4;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--tracking-wide);
  text-transform: uppercase; font-weight: 700;
  z-index: 3; opacity: 0.95;
}
.zine-title {
  position: absolute; top: 54px; left: 32px; right: 32px;
  font-family: var(--font-edit); font-weight: 400;
  font-size: clamp(84px, 18vw, 220px); line-height: 0.82;
  letter-spacing: -0.05em;
  color: #f2e3ae;
  z-index: 2;
  mix-blend-mode: screen;
  text-shadow: 0 2px 24px rgba(0,0,0,0.4);
}
.zine-foot {
  position: absolute; bottom: 32px; left: 32px; right: 32px;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px;
  color: #f0e6c4;
  z-index: 3;
}
.zine-kicker {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: #c8bc8a;
  display: block; margin-bottom: 4px;
}
.zine-name {
  font-family: var(--font-edit); font-style: italic;
  font-size: 32px; font-weight: 400; color: #f4eccb;
  line-height: 1;
}
.zine-issue {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: #c8bc8a;
  border: 1px solid rgba(240, 230, 196, 0.3);
  padding: 6px 10px; border-radius: 2px;
  backdrop-filter: blur(4px);
}

@media (max-width: 960px) {
  .zine { aspect-ratio: 4 / 5; }
  .zine-top { top: 20px; left: 22px; right: 22px; }
  .zine-title { top: 38px; left: 22px; right: 22px; font-size: clamp(72px, 22vw, 160px); }
  .zine-foot { bottom: 22px; left: 22px; right: 22px; }
  .zine-name { font-size: 26px; }
}

/* Post actions */
.post-actions {
  display: flex; align-items: center; gap: 10px;
  padding: 0 18px 18px;
}
.vote-group {
  display: inline-flex; align-items: center;
  background: var(--surface-app);
  border: 1px solid var(--border-hair);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.vote-btn {
  background: transparent; border: none; cursor: pointer;
  padding: 7px 10px; color: var(--text-secondary);
  display: inline-flex; align-items: center;
  transition: all var(--duration-fast) var(--ease-out);
}
.vote-btn:hover { color: var(--accent-tertiary); background: var(--accent-tertiary-soft); }
.vote-btn.voted { color: var(--accent-primary-hover); }
.vote-count {
  padding: 0 4px; font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--text-primary);
}
.chip-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface-app);
  border: 1px solid var(--border-hair);
  border-radius: var(--radius-full);
  padding: 7px 12px;
  font-family: var(--font-body); font-size: 13px; font-weight: 500; color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}
.chip-btn:hover { background: var(--color-white); border-color: var(--border-default); color: var(--text-primary); }
.chip-btn i { font-size: 14px; }
.post-actions .spacer { flex: 1; }

/* Event card */
.card-event { padding: 0; }
.event-cover {
  aspect-ratio: 16 / 9;
  background: radial-gradient(80% 80% at 80% 20%, #4a3ecc 0%, #231a6a 60%, #0d0923 100%);
  position: relative; overflow: hidden;
}
.event-cover .date-stamp {
  position: absolute; top: 20px; left: 20px;
  background: var(--highlight-yellow); color: var(--color-black);
  padding: 8px 12px; border-radius: 12px;
  font-family: var(--font-heading); font-weight: 800;
  display: flex; flex-direction: column; align-items: center; line-height: 1;
}
.event-cover .date-stamp .m { font-size: 10px; letter-spacing: 0.1em; }
.event-cover .date-stamp .d { font-size: 24px; }
.event-body { padding: 18px 20px 18px; display: flex; flex-direction: column; gap: 10px; }
.event-kicker {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted);
}
.event-title { font-family: var(--font-heading); font-weight: 700; font-size: 20px; letter-spacing: -0.01em; }
.event-meta { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); letter-spacing: var(--tracking-wide); display: flex; gap: 8px; flex-wrap: wrap; }
.event-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 2px; }
.btn-primary-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent-primary); color: var(--color-black);
  border: none; cursor: pointer;
  padding: 9px 16px; border-radius: var(--radius-full);
  font-family: var(--font-body); font-weight: 600; font-size: 14px;
  transition: background var(--duration-fast) var(--ease-out);
}
.btn-primary-pill:hover { background: var(--accent-tertiary); color: #fff; }

/* FAB (compose) */
.fab {
  position: fixed; bottom: 22px; right: 22px;
  width: 56px; height: 56px; border-radius: var(--radius-full);
  background: var(--accent-primary); color: var(--color-black);
  border: none; cursor: pointer;
  display: grid; place-items: center;
  box-shadow: 0 10px 28px rgba(51,230,88,0.32), var(--shadow-lift);
  z-index: var(--z-fab, 40);
  transition: transform var(--duration-fast) var(--ease-out);
}
.fab:hover { transform: translateY(-2px); background: var(--accent-tertiary); color: #fff; }
.fab i { font-size: 22px; }

/* ── Responsive ── */
@media (max-width: 960px) {
  .feed-wrap { padding: 16px 14px 0; }
  .feed-hero { aspect-ratio: 4 / 3; }
  .post-body { font-size: 18px; }
}

@media (max-width: 520px) {
  .statusbar { padding: 10px 12px; gap: 8px; }
  .sb-brand { padding: 7px 10px; gap: 6px; }
  .sb-brand > span { display: none; }
  .sb-brand .caret { display: none; }
  .sb-cluster { gap: 6px; }
  .sb-wallet { padding: 6px 8px 6px 10px; gap: 8px; }
}

/* ── Tweaks panel ── */
.tweaks-panel {
  position: fixed; bottom: 22px; left: 22px;
  background: var(--surface-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-drop);
  padding: 16px 18px;
  display: none; flex-direction: column; gap: 12px;
  z-index: 90; min-width: 240px;
}
.tweaks-panel.is-open { display: flex; }
.tweaks-panel h4 {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--text-muted); margin: 0;
}
.tweaks-row { display: flex; flex-direction: column; gap: 6px; }
.tweaks-row label { font-size: 12px; color: var(--text-secondary); font-weight: 500; }
.tweaks-opts { display: flex; gap: 6px; flex-wrap: wrap; }
.tweaks-opt {
  padding: 5px 10px; border-radius: 9999px; border: 1px solid var(--border-default);
  background: transparent; color: var(--text-secondary);
  font-family: var(--font-body); font-size: 12px; font-weight: 500; cursor: pointer;
}
.tweaks-opt.is-on { background: var(--accent-tertiary-soft); color: var(--accent-tertiary); border-color: var(--accent-tertiary); }

/* ── Background variants ── */
body[data-bg="paper"] { background: var(--surface-app); }
body[data-bg="mist"] { background: #eef2f8; }
body[data-bg="parchment"] { background: #ece6d6; }
body[data-bg="parchment"] .pill-tabs { background: #e0d8c3; }

/* Generic feed navigation reveal — used before full-page destinations load. */
.feed-open-reveal {
  position: fixed;
  inset: 0;
  z-index: var(--z-spectacle);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-app);
  color: var(--text-primary);
}
.feed-open-reveal__loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}
.feed-open-reveal__ring {
  position: relative;
  width: calc(var(--size-16) + var(--space-3));
  height: calc(var(--size-16) + var(--space-3));
}
.feed-open-reveal__ring::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: calc(var(--space-1) - var(--space-1) / 4) solid color-mix(in srgb, var(--text-primary) 12%, transparent);
  border-top-color: var(--accent-primary);
  animation: spin calc(var(--duration-slow) * 2 + var(--duration-normal)) linear infinite;
}
.feed-open-reveal__glyph {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--size-10);
  height: var(--size-10);
  border-radius: var(--radius-md);
  transform: translate(-50%, -50%);
}
.feed-open-reveal__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--text-muted);
}
.feed-open-reveal__title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  max-width: calc(var(--size-32) * 2 + var(--space-6));
  text-align: center;
  line-height: var(--leading-tight);
}


/* ---------------------------------------------------------------------------
   Right rail on the home rollup (desktop >=1200px) — Steven 2026-07-03.
   Occupies .feed-layout grid column 3 (the stream is column 2). Promo card +
   online/offline people across the viewer's houses. Tokens only.
--------------------------------------------------------------------------- */
.feed-right-rail { display: none; }

@media (min-width: 1200px) {
    /* Rail gets its own fixed 280px track (column 4, absorbs the 110px reclaimed from the slimmed sidebar so cards keep their exact width); the two 1fr gutters
       flank the card column so cards stay CENTERED in the space between the
       app shell and the rail at any width. The old 3-track version dumped all
       leftover width into an empty left gutter, gluing cards to the rail —
       Steven 2026-07-22. */
    .feed-layout {
        grid-template-columns: 1fr minmax(0, var(--feed-card-max-width)) 1fr 280px;
    }
    .feed-right-rail {
        display: flex;
        flex-direction: column;
        gap: var(--space-4);
        grid-column: 4;
        grid-row: 1 / 3;
        justify-self: start;
        width: min(280px, 100%);
        position: sticky;
        top: var(--space-5);
        max-height: calc(100dvh - var(--space-10));
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: var(--border-default) transparent;
    }
}

/* frr-ad rules removed 2026-07-15: the rail now reuses the house pages'
   .pudding-heroes-rail-ad component (css/components/shadow_at_work.css). */

.frr-panel {
    background: var(--surface-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-card);
    padding: var(--space-3);
}
.frr-panel__header {
    padding: var(--space-1) var(--space-2) var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.frr-member {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--text-primary);
}
.frr-member:hover { background: var(--interactive-hover); }
.frr-member__avatar {
    position: relative;
    width: var(--size-7);
    height: var(--size-7);
    flex-shrink: 0;
}
.frr-member__avatar img {
    width: 100%;
    height: 100%;
    border-radius: var(--radius-full);
    object-fit: cover;
}
.frr-member__dot {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: var(--space-2);
    height: var(--space-2);
    border-radius: var(--radius-full);
    background: var(--indicator-online, var(--color-green-500));
    border: 2px solid var(--surface-primary);
}
.frr-member__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-sm);
}
.frr-panel--offline .frr-member { opacity: 0.66; }


/* ============================================================
   2026-07-04 Steven feed pass (prod walkthrough fixes)
   F1 top spacing - F3 macro card width - F4 WDYW black card -
   F5 evolve cards on paper - F6 toast card frame
   ============================================================ */

/* F1: first card must not start under the feed header */
.feed-stream > .feed-stream__entry:first-child { margin-top: var(--space-6); }

/* F3: macro standard - every feed card the same width; the only mobile gutter is --feed-card-gutter-mobile (3px) on .feed-stream width */
@media (max-width: 640px) {
    .feed-stream { padding-left: 0; padding-right: 0; }
    .feed-stream__entry { width: 100%; margin-left: 0; margin-right: 0; }
    .feed-stream__entry > article,
    .feed-stream__entry > section,
    .feed-stream__entry > div { margin-left: 0; margin-right: 0; }
}

/* F5: evolve/teaching cards sit on the paper */
.evo-feed-card,
.instructional-card--evolve {
    background: var(--surface-app);
    border: 1px solid var(--border-default);
    box-shadow: none;
}

/* F6: house toast card joins the standard card frame */
.hpq-card { width: 100%; border-radius: var(--radius-md); }

/* F4: What-do-you-want is a black stove-family card */
.feed-section .first-hour-want-card,
.first-hour-want-card {
    background: var(--color-black);
    color: var(--color-white);
    border: 1px solid var(--color-black);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: var(--space-5);
}

/* the bug that made it look dead: author display rules beat [hidden] */
.first-hour-want-card [hidden] { display: none !important; }

.first-hour-want-card .ds-pack-type-badge {
    background: var(--accent-primary);
    color: var(--color-black);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: var(--space-1) var(--space-2);
}

.first-hour-want-card__copy h2 { color: var(--color-white); }

.first-hour-want-card__copy p {
    color: var(--color-white);
    font-family: var(--font-serif);
    font-style: italic;
    font-size: var(--text-lg);
    opacity: 0.92;
}

.first-hour-want-card__field span { color: var(--color-white); opacity: 0.7; }

.first-hour-want-card textarea,
.first-hour-want-card select,
.first-hour-want-card input {
    background: color-mix(in srgb, var(--color-white) 10%, transparent);
    color: var(--color-white);
    border: 1px solid color-mix(in srgb, var(--color-white) 22%, transparent);
    border-radius: var(--radius-sm);
}

.first-hour-want-card textarea:focus,
.first-hour-want-card select:focus,
.first-hour-want-card input:focus {
    outline: none;
    border-color: var(--highlight-yellow);
}

.first-hour-want-card option { color: var(--color-black); }

.first-hour-want-card [data-first-hour-submit] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: var(--highlight-yellow);
    color: var(--color-black);
    border: none;
    border-radius: var(--radius-full, 999px);
    font-family: var(--font-heading);
    font-weight: var(--font-bold);
    font-size: var(--text-base, 1rem);
    cursor: pointer;
}

.first-hour-want-card [data-first-hour-submit]:disabled { opacity: 0.6; cursor: wait; }

.first-hour-want-card__working {
    color: var(--color-white);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    animation: fhw-fade-in 0.45s ease;
}

@keyframes fhw-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

.first-hour-want-card__loader {
    position: relative;
    display: inline-block;
    width: var(--size-10);
    height: var(--size-10);
    flex: 0 0 auto;
}

.first-hour-want-card__loader-ring {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}

.first-hour-want-card__loader-ring::before {
    content: "";
    position: absolute;
    inset: 0;
    border: calc(var(--space-1) - var(--space-1) / 4) solid color-mix(in srgb, var(--color-white) 28%, transparent);
    border-top-color: var(--accent-primary);
    border-radius: var(--radius-full);
    animation: fhw-spin 0.8s linear infinite;
}

.first-hour-want-card__loader-glyph {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--size-6);
    height: var(--size-6);
    border-radius: var(--radius-sm);
    transform: translate(-50%, -50%);
}

@keyframes fhw-spin { to { transform: rotate(360deg); } }

.first-hour-want-card__error { color: var(--color-red-400); }

.first-hour-want-card__working {
    background: color-mix(in srgb, var(--color-white) 8%, transparent);
    border-radius: var(--radius-sm);
}


.first-hour-want-card__organize,
.first-hour-want-card__prepared { display: grid; gap: var(--space-3); }
.first-hour-want-card__prepared {
    padding: var(--space-4);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-primary);
    color: var(--text-primary);
}
.first-hour-want-card__prepared h3,
.first-hour-want-card__prepared p { margin: 0; }
.first-hour-want-card__prepared p { color: var(--text-secondary); }
.first-hour-want-card__prepared-kicker { color: var(--accent-primary); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.first-hour-want-card__prepared-list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.first-hour-want-card__prepared-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--surface-secondary); color: var(--text-primary); }
.first-hour-want-card__prepared-list time { color: var(--text-muted); font-family: var(--font-mono); font-size: var(--text-xs); }
.first-hour-want-card__prepared-check { width: var(--size-5); height: var(--size-5); border: 1px solid var(--accent-primary); border-radius: var(--radius-full); }
.first-hour-want-card [data-first-hour-schedule] { width: 100%; min-height: var(--size-11); border: 0; border-radius: var(--radius-full); background: var(--accent-primary); color: var(--color-black); font-weight: var(--font-bold); cursor: pointer; }

/* Greeting-card embeds: iframe cover for /static/greetings/*.html posts.
   Suppress the standard image scrim so fireworks + Sharpie stay legible. */
.feed-section .feed-cover-post__media:has(iframe.feed-cover-post__image--embed)::after{display:none}
.feed-cover-post__media:has(iframe.feed-cover-post__image--embed)::after{display:none}
iframe.feed-cover-post__image--embed{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%}

/* Primary want probability card - pinned top of feed, mirrors the /start card */
.feed-primary-want { position: relative; padding: var(--feed-card-padding); border: var(--feed-card-border); border-radius: var(--feed-card-radius); background: var(--feed-card-bg); box-shadow: var(--feed-card-shadow); text-align: left; }
.feed-primary-want__pills { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.feed-primary-want__chip { display: inline-flex; align-items: center; padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-bold); letter-spacing: .08em; text-transform: uppercase; }
.feed-primary-want__chip--prob { background: var(--highlight-yellow); color: var(--color-black); }
.feed-primary-want__chip--quest { background: var(--accent-tertiary-subtle); color: var(--accent-tertiary); }
.feed-primary-want__quote { margin: 0 0 var(--space-4); font-family: var(--font-serif); font-size: var(--text-2xl); font-weight: 700; font-style: italic; line-height: var(--leading-normal, 1.5); }
.feed-primary-want__quote .hl { padding: 0 var(--space-1); border-radius: var(--radius-sm); background: var(--highlight-yellow); color: var(--color-black); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.feed-primary-want__stats { display: grid; grid-template-columns: 1fr auto; gap: var(--space-1) var(--space-4); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--surface-secondary); }
.feed-primary-want__stat { display: grid; gap: var(--space-1); }
.feed-primary-want__stat-label { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); }
.feed-primary-want__stat-value { font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: 800; color: var(--text-primary); }
.feed-primary-want__stat--goal { text-align: right; }
.feed-primary-want__stat--goal .feed-primary-want__stat-label,
.feed-primary-want__stat--goal .feed-primary-want__stat-value { color: var(--accent-dark, var(--accent-primary)); }
.feed-primary-want__bar-track { grid-column: 1 / -1; position: relative; height: var(--space-1); margin-top: var(--space-2); border-radius: var(--radius-full); background: var(--border-default); }
.feed-primary-want__bar-dot { position: absolute; top: 50%; width: var(--space-3); height: var(--space-3); border-radius: var(--radius-full); background: var(--accent-primary); transform: translate(-50%, -50%); }
.feed-primary-want__bar-cap { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-secondary); }
.feed-primary-want__bar-cap--right { text-align: right; }
.feed-primary-want__trajectory { width: 100%; padding: var(--space-2) 0 var(--space-3); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.feed-primary-want__trajectory-svg { display: block; width: 100%; height: auto; overflow: visible; }
.feed-primary-want__trajectory-grid line { stroke: var(--border-default); stroke-width: 1; vector-effect: non-scaling-stroke; }
.feed-primary-want__trajectory-cone { fill: var(--accent-primary-subtle); }
.feed-primary-want__trajectory-projection { fill: none; stroke: var(--text-muted); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 10 10; vector-effect: non-scaling-stroke; }
.feed-primary-want__trajectory-line { fill: none; stroke: var(--accent-primary); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.feed-primary-want__trajectory-dot { fill: var(--accent-primary); stroke: var(--surface-primary); stroke-width: 4; cursor: help; vector-effect: non-scaling-stroke; }
.feed-primary-want__trajectory-dot:focus { outline: none; stroke: var(--text-primary); }
.feed-primary-want__trajectory-future circle { fill: var(--surface-primary); stroke: var(--border-strong); stroke-width: 5; vector-effect: non-scaling-stroke; }
.feed-primary-want__trajectory-value { fill: var(--text-primary); font-family: var(--font-heading); font-size: var(--text-xl); font-weight: var(--font-bold); text-anchor: middle; }
.feed-primary-want__trajectory-value--current { text-anchor: start; }
.feed-primary-want__trajectory-axis { fill: var(--text-secondary); font-family: var(--font-mono); font-size: var(--text-base); text-anchor: middle; }
.feed-primary-want__trajectory-target { fill: var(--text-muted); font-size: var(--text-2xl); text-anchor: middle; }
.feed-primary-want__trajectory-caption { display: grid; gap: var(--space-1); margin-top: var(--space-1); color: var(--text-muted); font-size: var(--text-sm); }
.feed-primary-want__label { margin: var(--space-4) 0 var(--space-1); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); }
.feed-primary-want__reason { margin: 0; color: var(--slate); font-family: var(--font-serif); font-size: var(--text-base); font-style: italic; line-height: var(--leading-relaxed); }
.feed-primary-want__steps { display: grid; gap: var(--space-4); margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.feed-primary-want__step { position: relative; display: flex; gap: var(--space-3); }
.feed-primary-want__step:not(:last-child)::before { content: ""; position: absolute; top: var(--size-8); left: calc(var(--size-8) / 2); height: calc(100% - var(--size-8) + var(--space-4)); border-left: 1px solid var(--border-default); }
.feed-primary-want__step-num { position: relative; z-index: 1; flex: none; display: inline-flex; align-items: center; justify-content: center; width: var(--size-8); height: var(--size-8); border: 1px solid var(--border-strong); border-radius: var(--radius-full); background: var(--surface-secondary); color: var(--text-secondary); font-family: var(--font-mono); font-size: var(--text-sm); font-weight: var(--font-bold); }
.feed-primary-want__step--done .feed-primary-want__step-num { border-color: transparent; background: var(--accent-primary); color: var(--color-black); }
.feed-primary-want__step--done .feed-primary-want__step-num iconify-icon { width: var(--size-4); height: var(--size-4); }
.feed-primary-want__step--done .feed-primary-want__step-num > span { display: inline-flex; align-items: center; justify-content: center; line-height: 1; font-size: var(--text-lg); }
.feed-primary-want__step--next .feed-primary-want__step-num { border-color: transparent; background: var(--slate); color: var(--color-white); }
.feed-primary-want__step-body { min-width: 0; flex: 1; }
.feed-primary-want__step-title { display: flex; align-items: center; gap: var(--space-2); color: var(--text-primary); font-size: var(--text-base); font-weight: var(--font-bold); }
.feed-primary-want__step--done .feed-primary-want__step-title { color: var(--text-secondary); }
.feed-primary-want__step-chip { margin-left: auto; white-space: nowrap; padding: 0 var(--space-2); border-radius: var(--radius-full); background: var(--accent-tertiary-subtle); color: var(--accent-tertiary); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-bold); letter-spacing: .08em; text-transform: uppercase; }
.feed-primary-want__step-desc { margin: var(--space-1) 0 0; color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.feed-primary-want__mission { display: flex; gap: var(--space-2); margin: var(--space-4) 0 0; padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--text-primary); }
.feed-primary-want__mission iconify-icon { flex: none; width: var(--size-4); height: var(--size-4); color: var(--accent-tertiary); }
.feed-primary-want__mission .hl-goal { padding: 0 var(--space-1); border-radius: var(--radius-sm); background: var(--accent-primary); color: var(--color-black); font-weight: var(--font-bold); }

/* Primary want group — plain stack wrapper for the three-piece split.
   No card chrome here; spacing between pieces comes from the feed stream gap. */
.feed-primary-want__group { display: grid; gap: var(--space-4); }



/* PIECE 3 — checklist card. Same card chrome as other feed cards; no glow,
   no hero band, no evolve-card badge (those are house-gated, this is not). */
.feed-primary-want__checklist-card {
    padding: var(--feed-card-padding);
    border: var(--feed-card-border);
    border-radius: var(--feed-card-radius);
    background: var(--feed-card-bg);
    box-shadow: var(--feed-card-shadow);
}
.feed-primary-want__checklist-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-subtle);
}
/* Dismissal transition — JS adds this class, then removes the element after
   the animation completes. */
.feed-primary-want__checklist-card--dismissing {
    animation: feed-pw-checklist-dismiss 300ms ease forwards;
}
@keyframes feed-pw-checklist-dismiss {
    from { opacity: 1; transform: scale(1); max-height: 800px; }
    to   { opacity: 0; transform: scale(0.97); max-height: 0; padding: 0; margin: 0; overflow: hidden; }
}

/* Connect-with-your-people card - pinned below the probability card */
/* ── Wrapper: holds both the straddling pill row and the card surface ── */
.feed-connect-card__wrap { position: relative; width: 100%; }
/* ── Pill row: absolutely positioned to straddle the card's top edge (req §3.2) ── */
.feed-connect-card__pills {
    position: absolute;
    z-index: 1;
    top: 0;
    left: var(--space-4);
    right: var(--space-4);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transform: translateY(-50%);
    pointer-events: none;
}
.feed-connect-card__chip {
    display: inline-flex;
    align-items: center;
    padding: 0 var(--space-3);
    min-height: calc(var(--size-6) + var(--space-1));
    border-radius: var(--radius-full);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1;
}
.feed-connect-card__chip--prob { background: var(--highlight-yellow); color: var(--color-black); }
.feed-connect-card__chip--label { background: transparent; color: var(--accent-tertiary); }
.feed-connect-card__chip--step { background: var(--accent-tertiary-subtle); color: var(--accent-tertiary); }
/* ── Card surface: overflow visible so pills bleed out; top padding clears them ── */
.feed-connect-card { position: relative; overflow: visible; padding: var(--space-8) var(--space-8) var(--space-5); border: var(--feed-card-border); border-radius: var(--feed-card-radius); background: var(--feed-card-bg); box-shadow: var(--feed-card-shadow); text-align: left; }
.feed-connect-card__title { margin: 0 0 var(--space-2); font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 800; line-height: var(--leading-snug); }
.feed-connect-card__body { margin: 0 0 var(--space-2); color: var(--slate); font-family: var(--font-serif); font-size: var(--text-base); line-height: var(--leading-relaxed); }
.feed-connect-card__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.feed-connect-card__btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--size-10); padding: 0 var(--space-5); border-radius: var(--radius-full); background: var(--accent-primary); color: var(--color-black); font-weight: var(--font-bold); text-decoration: none; }
.feed-connect-card__btn--ghost { border: 1px solid var(--border-strong); background: var(--surface-secondary); color: var(--text-primary); }
/* ── Video variant: full-width video player + caption ── */
.feed-connect-card--video { padding-bottom: var(--space-3); }
.feed-connect-card__video { display: block; width: 100%; border-radius: var(--radius-lg); background: var(--color-black); max-height: 280px; object-fit: cover; }
.feed-connect-card__video-caption { margin: var(--space-2) 0 0; color: var(--text-secondary); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-bold); letter-spacing: .04em; text-transform: uppercase; }

/* Sticky expand/minimize header bar */
.feed-primary-want--min { position: fixed; top: var(--space-2); z-index: calc(var(--z-topbar, 50) - 1); animation: feed-pw-drop-in 240ms ease; }
@keyframes feed-pw-drop-in { from { transform: translateY(calc(-100% - var(--space-4))); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.feed-primary-want__bar { display: flex; align-items: center; gap: var(--space-3); width: 100%; margin: 0 0 var(--space-3); padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.feed-primary-want__ring { position: relative; flex: none; width: var(--size-12); height: var(--size-12); }
.feed-primary-want__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.feed-primary-want__ring-track { fill: none; stroke: var(--border-default); stroke-width: 3.5; }
.feed-primary-want__ring-fill { fill: none; stroke: var(--accent-primary); stroke-width: 3.5; stroke-linecap: round; }
.feed-primary-want__ring-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 800; color: var(--text-primary); }
.feed-primary-want__ring-label small { font-size: var(--text-xs); font-weight: var(--font-bold); }
.feed-primary-want__bar-main { min-width: 0; flex: 1; display: grid; gap: var(--space-1); }
.feed-primary-want__pills--bar { justify-content: flex-start; gap: var(--space-2); margin-bottom: 0; }
.feed-primary-want__chip-text { color: var(--accent-tertiary); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-bold); letter-spacing: .08em; text-transform: uppercase; }
.feed-primary-want__bar-quote { color: var(--text-primary); font-family: var(--font-serif); font-size: var(--text-lg); font-style: italic; font-weight: 700; line-height: var(--leading-snug); }
.feed-primary-want__bar-step-num { flex: none; display: inline-flex; align-items: center; justify-content: center; width: var(--size-6); height: var(--size-6); border-radius: var(--radius-full); background: var(--slate); color: var(--color-white); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-bold); }
.feed-primary-want__action { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); color: var(--text-primary); font-size: var(--text-sm); font-weight: var(--font-bold); }
.feed-primary-want__step-chip--bar { margin-left: 0; }
a.feed-primary-want__action { text-decoration: none; }
.feed-primary-want--min .feed-primary-want__action { margin-bottom: 0; }
/* .feed-primary-want__handle and __caret removed 2026-08-01 (chevron ruling) */
.feed-primary-want--min { background: var(--surface-secondary); }
.feed-primary-want--min .feed-primary-want__bar { margin-bottom: var(--space-2); }
.feed-primary-want--min .feed-primary-want__detail { display: none; }

/* ONE card. The wrapper is the card -- it keeps the border, radius, background
   and shadow it has always had -- and the trajectory card renders BARE inside
   it, so the title, probability, chart, next step, reason and checklist all sit
   on a single surface.
   Both elements carry full card chrome of their own. Leaving both on nested a
   card inside a card (doubled border and padding, and a fold ~90px narrower
   than the column, which broke the probability pill onto its own line);
   stripping the OUTER one instead left the chart in a card with the checklist
   loose underneath it. The inner one is the one that has to go. */
.feed-primary-want--wants-card .target-trajectory {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}
.feed-primary-want__compact-head { display: none; }

/* Identity pill (Steven 2026-08-03): the feed want card carries a black
   "TOLL BENCH" pill straddling its top edge, same size/treatment as the
   other feed-card pills (see .feed-connect-card__chip / house-intro tags,
   req 3.2). Sits on the FEED wrapper only, never in the shared macro. */
.feed-primary-want__bench-pill {
    position: absolute;
    z-index: 1;
    top: 0;
    left: var(--space-4);
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: calc(var(--size-6) + var(--space-1));
    padding: 0 var(--space-3);
    border-radius: var(--radius-full);
    background: var(--color-black);
    color: var(--color-white);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: .08em;
    line-height: 1;
    text-transform: uppercase;
    pointer-events: none;
}
.feed-primary-want__bench-pill iconify-icon { font-size: var(--text-sm); }
/* The pinned bar is a compact runtime clone; the identity pill stays off it. */
.feed-primary-want--min .feed-primary-want__bench-pill { display: none; }

/* Breathing room (Steven 2026-08-03): the straddle pill rises half its own
   height above the card and sat ~3px under the Book of Houses masthead. One
   token step of top margin on the feed want entry lets the heading breathe.
   Feed surface only; /wants and the detail page have no masthead. */
.feed-stream__entry--primary_want { margin-top: var(--space-4); }

/* --- The fold, rebuilt 2026-07-25, re-arranged 2026-07-30 --------------
   The collapsed card is the SAME want card at the smaller size: title,
   probability, next step, small action. The chart and the reason/checklist
   drop away. The old fold was a bespoke bar with its own progress ring and
   quoted goal; that markup is gone.
   2026-07-30, Steven: these rules no longer shrink the real card in place.
   Doing that meant portalling the one real card out to <body> and reserving
   an empty placeholder its full expanded height, which left a large blank
   void in the middle of the feed. The real card now stays put at full height
   and scrolls UNDER the pinned bar, and the bar is a runtime CLONE of it
   (built in the fold script in templates/feed/index.html, sanitized of ids
   and analytics hooks, marked data-primary-want-clone).
   There are two elements on screen again, but still only ONE authored markup:
   the bar is generated from the real card every time it folds, so the two can
   never drift apart. Style the fold here, once, via .feed-primary-want--min --
   the class lands on the clone. */
.feed-primary-want--min {
    --primary-target-pill-offset: var(--space-4);
    --primary-target-pill-width: calc(var(--size-24) + var(--size-4));
    --primary-target-pill-space: calc(var(--primary-target-pill-offset) + var(--primary-target-pill-width) + var(--space-2));
    padding: var(--space-3) var(--space-4);
    background: var(--feed-card-bg);
}
.feed-primary-want--min .feed-primary-want__compact-head {
    position: absolute;
    top: var(--space-3);
    right: var(--primary-target-pill-offset);
    display: block;
}
.feed-primary-want__primary-pill {
    display: inline-flex;
    min-height: var(--size-6);
    align-items: center;
    padding: 0 var(--space-2);
    border-radius: var(--radius-full);
    background: var(--accent-tertiary-subtle);
    color: var(--accent-tertiary);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: 0;
    line-height: 1;
    text-transform: uppercase;
}
.feed-primary-want--min .target-chart { display: none; }
.feed-primary-want--min .target-trajectory { gap: var(--space-2); }
.feed-primary-want--min .target-trajectory__title {
    font-size: var(--text-xl);
    line-height: var(--leading-snug);
}
.feed-primary-want--min .target-trajectory__title::before {
    content: "";
    float: right;
    width: var(--primary-target-pill-space);
    height: var(--size-6);
}
/* Keep the probability row and footer legible without letting metadata turn
   the pinned card back into a second full-height surface. */
.feed-primary-want--min .target-trajectory__probability {
    flex-wrap: nowrap;
    gap: var(--space-2);
}
.feed-primary-want--min .target-trajectory__probability strong {
    min-height: var(--size-7);
    padding: 0 var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
}
.feed-primary-want--min .target-trajectory__probability > span:not(.target-trajectory__move) {
    font-size: var(--text-xs);
    white-space: nowrap;
}
.feed-primary-want--min .target-trajectory__move {
    font-size: var(--text-sm);
}
.feed-primary-want--min .target-trajectory__probability .target-trajectory__move--up {
    color: var(--status-success);
}
.feed-primary-want--min .target-trajectory__probability .target-trajectory__move--down {
    color: var(--status-error);
}
.feed-primary-want--min .target-trajectory__next {
    flex: 1 1 auto;
}
.feed-primary-want--min .target-trajectory__next > strong {
    font-size: var(--text-xs);
}
.feed-primary-want--min .target-trajectory__facts { display: none; }
.feed-primary-want--min .target-trajectory__footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-2);
    padding: 0 calc(var(--size-8) + var(--space-2)) 0 0;
    border-top: 0;
}
.feed-primary-want--min .target-trajectory__action {
    width: auto;
    flex: none;
    min-height: var(--size-8);
    padding: 0 var(--space-3);
    background: var(--surface-secondary);
    color: var(--text-primary);
    font-size: var(--text-xs);
    white-space: nowrap;
}
.feed-primary-want--min .target-trajectory--ready .target-trajectory__action {
    background: var(--highlight-purple);
    color: var(--text-inverse);
}
.feed-primary-want--min .target-trajectory--ready .target-trajectory__action:hover {
    background: var(--accent-tertiary);
    color: var(--text-inverse);
}
/* Collapsed, the failed card still carries BOTH actions, so the pair has to
   shrink to chips like the single action does and sit at the right end of the
   footer row -- View left, Repost right, in that order. */
/* Restated one class deeper than the collapsed card's own
   `.feed-primary-want--min .target-trajectory__probability
    .target-trajectory__move--up { color: var(--status-success) }`, which would
   otherwise out-specify the failed-card rule in wants.css and leave one green
   arrow sitting beside a red pill. */
.feed-primary-want--min .target-trajectory--failed .target-trajectory__probability .target-trajectory__move--up {
    color: var(--text-secondary);
}
.feed-primary-want--min .target-trajectory__actions {
    flex: none;
    align-items: center;
    gap: var(--space-1);
}
.feed-primary-want--min .target-trajectory__actions > * {
    flex: none;
}
.feed-primary-want--min .target-trajectory__action--repost {
    background: var(--color-black);
    color: var(--color-white);
}
/* index.html loads feed.css BEFORE wants.css, so the full-size
   `.target-trajectory__repost-form .target-trajectory__action { width: 100% }`
   would otherwise beat the collapsed chip sizing on equal specificity. Restate
   it one class deeper so the collapsed button really is a chip. */
.feed-primary-want--min .target-trajectory__repost-form .target-trajectory__action {
    width: auto;
    min-height: var(--size-8);
    padding: 0 var(--space-3);
    font-size: var(--text-xs);
    white-space: nowrap;
}

.feed-primary-want__ring-label--ratio { flex-direction: column; gap: 0; font-size: var(--text-xs); line-height: var(--leading-tight); }
.feed-primary-want__ring-label--ratio small { font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--text-secondary); }

@media (max-width: 360px) {
    .feed-primary-want--min {
        padding-right: var(--space-3);
        padding-left: var(--space-3);
    }
    .feed-primary-want--min .feed-primary-want__primary-pill {
        padding-right: var(--space-1);
        padding-left: var(--space-1);
        white-space: nowrap;
    }
}

/* Inline sorting quiz in the connect card */
.feed-sort-input { width: 100%; min-height: var(--size-24); margin-top: var(--space-2); padding: var(--space-3); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--surface-primary); color: var(--text-primary); font: inherit; font-size: var(--text-base); line-height: var(--leading-relaxed); resize: vertical; }
.feed-connect-card--loading { border-color: var(--color-black); background: var(--color-black); }
.feed-sort-loading { display: grid; gap: var(--space-4); padding: var(--space-2) 0; }
.feed-sort-loading__quote { min-height: var(--size-16); margin: 0; color: var(--color-white); font-family: var(--font-serif); font-size: var(--text-lg); font-style: italic; line-height: var(--leading-relaxed); }
.feed-sort-loading__label { margin: 0; color: var(--color-white); opacity: .6; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .08em; text-transform: uppercase; }
.feed-sort-loading__track { position: relative; height: var(--space-2); border-radius: var(--radius-full); background: var(--slate); }
.feed-sort-loading__bar { position: relative; width: 4%; height: 100%; border-radius: var(--radius-full); background: var(--accent-primary); transition: width 400ms linear; }
.feed-sort-walker { position: absolute; right: 0; bottom: var(--space-1); width: var(--size-8); height: var(--size-8); transform: translateX(50%); }
.feed-sort-walker svg { width: 100%; height: 100%; }
.walker-body { animation: walker-body-bob 0.3s ease-in-out infinite; }
@keyframes walker-body-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1px); } }
.walker-leg-left  { animation: walker-leg-left 0.6s ease-in-out infinite; transform-origin: 16px 28px; }
.walker-leg-right { animation: walker-leg-right 0.6s ease-in-out infinite; transform-origin: 16px 28px; }
@keyframes walker-leg-left  { 0%, 100% { transform: rotate(-15deg); } 50% { transform: rotate(15deg); } }
@keyframes walker-leg-right { 0%, 100% { transform: rotate(15deg); } 50% { transform: rotate(-15deg); } }
.walker-arm-left  { animation: walker-arm-left 0.6s ease-in-out infinite; transform-origin: 16px 16px; }
.walker-arm-right { animation: walker-arm-right 0.6s ease-in-out infinite; transform-origin: 16px 16px; }
@keyframes walker-arm-left  { 0%, 100% { transform: rotate(8deg); } 50% { transform: rotate(-8deg); } }
@keyframes walker-arm-right { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
.feed-sort-reveal { position: fixed; inset: 0; z-index: calc(var(--z-modal, 400) + 100); display: flex; align-items: center; justify-content: center; background: var(--color-black); text-align: center; transition: opacity 400ms ease; }
.feed-sort-reveal--hide { opacity: 0; }
.feed-sort-reveal__inner { display: grid; justify-items: center; gap: var(--space-3); padding: var(--space-6); }
.feed-sort-reveal__crest { width: min(60vw, var(--size-64, 240px)); border-radius: var(--radius-lg); }
.feed-sort-reveal__eyebrow { margin: 0; color: var(--color-white); opacity: .7; font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: .14em; text-transform: uppercase; }
.feed-sort-reveal__name { margin: 0; color: var(--color-white); font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: 800; }
.feed-sort-sorted__crest { width: var(--size-24); margin: var(--space-2) 0; border-radius: var(--radius-lg); }

.feed-sorted-card { width: 100%; max-width: none; margin: 0; }

/* observer-identity-card pill-clearance rule removed 2026-08-01: evolve cards have no pill (Steven ruling B). */

/* ==== Observer identity card wears the evolve-card frame EXACTLY (Steven 2026-08-03) ====
   Mirrors .evo-feed-card.instructional-card in first-session-guide.css: naked card,
   content directly on the page background - no border, no surface, no shadow. The
   .evo-feed-card class itself is reserved for real evolution cards (JS card trackers
   bind to it), so the reset is restated here under .observer-identity-card. The
   identity-preview frame duplicates first-session-guide.css:531
   (.evo-feed-card .instructional-card__identity-preview) - keep both in sync. */
.observer-identity-card.instructional-card--evolve {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 0;
    overflow: visible;
    padding: 0;
    display: block;
    height: auto;
}
.observer-identity-card .instructional-card__identity-preview {
    padding: var(--space-4);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-2xl);
    background: var(--surface-primary);
    box-shadow: var(--shadow-drop);
}

/* ---- Mobile layout pass 2026-08-07: fix #4 ---------------------------------
   Banner in the shrunken sticky card (.feed-primary-want--min).
   The .want-proposal-arrival banner inside the cloned sticky card must be
   compact: text on top (wrapping), CTA below, no bell icon, minimal height.
   Scoped one class deeper than the narrow-viewport rule in wants.css so it
   wins on specificity inside the min card regardless of load order.
   --------------------------------------------------------------------------- */
.feed-primary-want--min .want-proposal-arrival {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
}
.feed-primary-want--min .want-proposal-arrival__icon {
    display: none;
}
.feed-primary-want--min .want-proposal-arrival__body {
    flex: none;
}
.feed-primary-want--min .want-proposal-arrival__headline {
    font-size: var(--text-xs);
    line-height: var(--leading-snug);
}
.feed-primary-want--min .want-proposal-arrival__sub {
    font-size: var(--text-xs);
}
.feed-primary-want--min .want-proposal-arrival__cta {
    align-self: stretch;
    min-height: var(--size-8);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    text-align: center;
    white-space: normal;
}

/* ── Mobile padding consistency (added 2026-08-08) ──
   .feed-primary-want and .feed-primary-want__checklist-card both use
   var(--feed-card-padding) directly. Their base rules are at lines ~3866 and
   ~3925 respectively, so this override must live AFTER them in the cascade.
   Placed here (after all base rules) so media-query specificity wins over the
   bare class rules that came earlier in the file. */
@media (max-width: 767px) {
    .feed-primary-want,
    .feed-primary-want__checklist-card {
        padding: var(--feed-card-padding-mobile);
    }
}

/* ── Toll Bench Weekly Card (2026-08-09) ──────────────────────────────────
   Top-contenders card injected into the no-house (preliminary) feed.
   White card on the standard feed surface. Green accent = accent-primary.
   Tokens only -- no new tokens, no ad-hoc colors. */

.tbw-card {
    position: relative;
    padding: var(--space-6) var(--space-6) var(--space-5);
    border: var(--feed-card-border);
    border-radius: var(--feed-card-radius);
    background: var(--feed-card-bg);
    box-shadow: var(--feed-card-shadow);
}

/* Header row: eyebrow left, week label right */
.tbw-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.tbw-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-primary);
}

.tbw-eyebrow__dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent-primary);
    flex-shrink: 0;
}

.tbw-week-label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--text-muted);
    letter-spacing: 0.06em;
    white-space: nowrap;
}

/* Big serif headline */
.tbw-headline {
    margin: 0 0 var(--space-3);
    font-family: var(--font-serif);
    font-size: var(--text-2xl);
    font-weight: 600;
    line-height: var(--leading-snug);
    color: var(--text-primary);
}

.tbw-headline__n {
    color: var(--accent-primary);
    font-weight: 700;
}

/* Agents sentence */
.tbw-sentence {
    margin: 0 0 var(--space-4);
    font-family: var(--font-serif);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
}

/* Contenders list */
.tbw-contenders {
    list-style: none;
    margin: 0 0 var(--space-4);
    padding: 0;
    border-top: 1px solid var(--border-subtle);
}

.tbw-contender {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border-subtle);
}

.tbw-contender__rank {
    flex-shrink: 0;
    width: 20px;
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    color: var(--accent-primary);
    text-align: right;
}

.tbw-contender__body {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tbw-contender__handle {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tbw-contender__sub {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tbw-contender__delivered {
    flex-shrink: 0;
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--accent-primary);
    white-space: nowrap;
}

/* Mini scatter strip */
.tbw-strip {
    width: 100%;
    margin-bottom: var(--space-4);
    border-radius: var(--radius-lg);
    background: var(--surface-secondary);
    overflow: hidden;
    padding: var(--space-1) 0;
}

.tbw-strip__svg {
    display: block;
    width: 100%;
    height: 64px;
}

/* Footer */
.tbw-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-subtle);
}

.tbw-footer__cta {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: 0.06em;
    color: var(--accent-primary);
    text-decoration: none;
}

.tbw-footer__cta:hover {
    text-decoration: underline;
}

.tbw-footer__provenance {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--text-muted);
}