/* No-RAM dispatch test */
/* =============================================================================
   CARD DESIGN SYSTEM - 6 Distinct Card Types

   Each card type has a unique visual identity:
   1. Quest Card    - LEFT accent bar, checklist, progress
   2. Service Card  - TOP stripe, provider badge, status
   3. House Quest   - DOUBLE border, gradient bg, probability
   4. Pack Card     - PORTRAIT, rounded, rarity glow
   5. Shop Card     - SHARP corners, product image, price tag
   6. Feed Card     - FULL WIDTH, avatar header, engagement
   ============================================================================= */

/* =============================================================================
   SHARED CARD BASE
   ============================================================================= */
.card-base {
    background: var(--surface-primary);
    border: 1px solid var(--border-default);
    overflow: hidden;
    transition: transform var(--duration-normal) var(--ease-default),
                box-shadow var(--duration-normal) var(--ease-default),
                border-color var(--duration-normal) var(--ease-default);
}

.card-base:hover {
    border-color: var(--border-strong);
}

/* =============================================================================
   1. QUEST CARD
   Left accent bar in house color, checklist, progress bar, XP badge
   ============================================================================= */
/* Quest Card V2 — Shop/shared exterior card
   Hero-image card: avatar + reward pills top, title, details, full-width hero image.
   No progress bar, no checklist, no button. Entire card is clickable. */
/* =============================================================================
   QUEST CARD V2 — DS Component (ds-quest-card)
   Layout: content (avatar, title, details, description, rewards) on TOP
           hero image on BOTTOM flush to card edges (full-width, no padding)
   ============================================================================= */
.quest-card-v2 {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 300px;
    background: var(--surface-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-card);
    overflow: hidden;
    cursor: pointer;
    transition: transform var(--duration-normal) var(--ease-default),
                box-shadow var(--duration-normal) var(--ease-default);
}

.quest-card-v2:hover {
    transform: none;
    box-shadow: var(--shadow-lg);
}

/* Hero image — BOTTOM of card, full-width flush to edges */
.quest-card-v2__hero-image {
    padding: 0;
    margin-top: auto;
}

.quest-card-v2__hero-img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    display: block;
    border-radius: 0;
    background: var(--surface-tertiary);
}

/* No-image fallback — dark panel with the BoH glyph, same footprint as a hero */
.quest-card-v2__hero-fallback {
    width: 100%;
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-dark-900);
}

.quest-card-v2__hero-fallback img {
    width: var(--size-12);
    height: var(--size-12);
    opacity: 0.85;
}

/* Creator row: avatar + name in body area */
.quest-card-v2__creator {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.quest-card-v2__avatar {
    width: var(--size-8);
    height: var(--size-8);
    border-radius: var(--radius-full);
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid var(--surface-primary);
    box-shadow: var(--shadow-sm);
}

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

.quest-card-v2__avatar-img--fallback {
    background: var(--color-black);
    padding: var(--space-1);
}

/* Creator name — inline text (no longer a floating pill) */
.quest-card-v2__creator-name {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    line-height: var(--leading-snug);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

/* Card body: title, date, description, rewards */
.quest-card-v2__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--space-4);
    gap: var(--space-2);
}

/* Title */
.quest-card-v2__title {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    line-height: var(--leading-snug);
    margin: 0;
}

/* Details row */
.quest-card-v2__details {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    align-items: center;
}

.quest-card-v2__start-date,
.quest-card-v2__meta {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    color: var(--status-success);
    line-height: var(--leading-normal);
}

.quest-card-v2__details-sep {
    color: var(--status-success);
    font-size: var(--text-xs);
}

/* Description */
.quest-card-v2__description {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: var(--leading-normal);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Reward pills — bottom of card, white bg + colored text */
.quest-card-v2__rewards {
    display: flex;
    gap: var(--space-2);
    flex-shrink: 0;
    margin-top: auto;
    padding-top: var(--space-2);
}

.quest-card-v2__reward-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    font-family: var(--font-body);
    line-height: 1;
    background: var(--surface-primary);
    border: 1px solid var(--border-default);
}

.quest-card-v2__reward-pill--xp {
    color: var(--color-yellow-500);
}

.quest-card-v2__reward-pill--coiny {
    color: var(--color-green-600);
}

.quest-card-v2__reward-pill svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

/* Compact variant — smaller for grid/scroll rows */
.quest-card-v2--compact {
    width: 260px;
}

.quest-card-v2--compact .quest-card-v2__body {
    padding: var(--space-3) var(--space-4);
    gap: var(--space-2);
}

.quest-card-v2--compact .quest-card-v2__avatar {
    width: var(--size-6);
    height: var(--size-6);
}

.quest-card-v2--compact .quest-card-v2__title {
    font-size: var(--text-base);
}

.quest-card-v2--compact .quest-card-v2__hero-img {
    aspect-ratio: 16 / 9;
}

/* House color variants — tints the avatar ring */
.quest-card-v2--courage  { --quest-house-color: var(--color-red-600); }
.quest-card-v2--integrity { --quest-house-color: var(--color-purple-600); }
.quest-card-v2--focus    { --quest-house-color: var(--color-green-600); }
.quest-card-v2--wisdom   { --quest-house-color: var(--color-purple-600); }
.quest-card-v2--signal   { --quest-house-color: var(--color-green-500); }
.quest-card-v2--wave-maker { --quest-house-color: var(--color-blue-500); }
.quest-card-v2--fun      { --quest-house-color: var(--color-orange-500); }

.quest-card-v2[class*="--courage"] .quest-card-v2__avatar,
.quest-card-v2[class*="--integrity"] .quest-card-v2__avatar,
.quest-card-v2[class*="--focus"] .quest-card-v2__avatar,
.quest-card-v2[class*="--wisdom"] .quest-card-v2__avatar,
.quest-card-v2[class*="--signal"] .quest-card-v2__avatar,
.quest-card-v2[class*="--wave-maker"] .quest-card-v2__avatar,
.quest-card-v2[class*="--fun"] .quest-card-v2__avatar {
    border-color: var(--quest-house-color);
}

/* =============================================================================
   1b. QUEST CHANNEL CARD
   Horizontal ticket-shaped card for pinning to channel/page headers.
   White bg, black outline, hero image left, details right.
   ============================================================================= */
.quest-channel-card {
    display: flex;
    width: 460px;
    max-width: 100%;
    height: 150px;
    background: var(--surface-primary);
    border: 1px solid var(--color-black, #000);
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    transition: transform var(--duration-normal) var(--ease-default),
                box-shadow var(--duration-normal) var(--ease-default);
}

.quest-channel-card:hover {
    transform: none;
    box-shadow: var(--shadow-lg);
}

.quest-channel-card__image {
    width: 40%;
    flex-shrink: 0;
    overflow: hidden;
    background: var(--surface-tertiary);
}

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

.quest-channel-card__body {
    width: 60%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-4);
    gap: var(--space-1);
}

.quest-channel-card__title {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    line-height: var(--leading-snug);
    margin: 0;
}

.quest-channel-card__date {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.quest-channel-card__rewards {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-1);
}

.quest-channel-card__reward-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    font-family: var(--font-body);
    line-height: 1;
}

.quest-channel-card__reward-pill--xp {
    background: var(--color-yellow-100);
    color: var(--color-yellow-500);
}

.quest-channel-card__reward-pill--coiny {
    background: var(--color-green-100);
    color: var(--color-green-600);
}

.quest-channel-card__reward-pill svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.quest-channel-card__desc {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    color: var(--text-secondary);
    line-height: var(--leading-normal);
    margin-top: var(--space-1);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Notch accents — ticket feel */
.quest-channel-card__notch {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: var(--radius-full);
    background: var(--surface-secondary);
}

/* =============================================================================
   1c. QUEST TICKET EMBED
   Compact horizontal card for embedding inside feed posts.
   White bg, black outline, quest image left, title + reward right.
   ============================================================================= */
.quest-ticket-embed {
    display: flex;
    width: 320px;
    max-width: 100%;
    height: 100px;
    background: var(--surface-primary);
    border: 1px solid var(--color-black, #000);
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
    transition: transform var(--duration-normal) var(--ease-default),
                box-shadow var(--duration-normal) var(--ease-default);
}

.quest-ticket-embed:hover {
    transform: none;
    box-shadow: var(--shadow-md);
}

.quest-ticket-embed__image {
    width: 35%;
    flex-shrink: 0;
    overflow: hidden;
    background: var(--surface-tertiary);
}

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

.quest-ticket-embed__body {
    width: 65%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-3);
    gap: var(--space-1);
}

.quest-ticket-embed__title {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    line-height: var(--leading-snug);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.quest-ticket-embed__rewards {
    display: flex;
    gap: var(--space-1);
}

.quest-ticket-embed__reward-pill {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px var(--space-1);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    font-family: var(--font-body);
    line-height: 1;
}

.quest-ticket-embed__reward-pill--xp {
    background: var(--color-yellow-100);
    color: var(--color-yellow-500);
}

.quest-ticket-embed__reward-pill--coiny {
    background: var(--color-green-100);
    color: var(--color-green-600);
}

.quest-ticket-embed__reward-pill svg {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
}

.quest-ticket-embed__meta {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* =============================================================================
   2. SERVICE CARD
   Top stripe in house color, provider badge, type badge, price
   ============================================================================= */
.service-card-v2 {
    background: var(--surface-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform var(--duration-normal) var(--ease-default),
                box-shadow var(--duration-normal) var(--ease-default);
}

.service-card-v2:hover {
    transform: none;
    box-shadow: var(--shadow-lg);
}

/* Top stripe */
.service-card-v2__stripe {
    height: var(--space-1);
    background: var(--service-house-color, var(--accent-primary));
}

.service-card-v2__body {
    padding: var(--space-4);
}

.service-card-v2__header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.service-card-v2__icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xl);
    flex-shrink: 0;
}

.service-card-v2__title {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

.service-card-v2__description {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-3);
}

.service-card-v2__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.service-card-v2__provider {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.service-card-v2__type-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px var(--space-2);
    background: var(--surface-tertiary);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    color: var(--text-secondary);
}

.service-card-v2__status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-xs);
}

.service-card-v2__status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.service-card-v2__status-dot--active {
    background: var(--status-success);
}

.service-card-v2__status-dot--expired {
    background: var(--text-muted);
}

.service-card-v2__status-dot--expiring {
    background: var(--status-warning);
}

/* Footer with price + CTA */
.service-card-v2__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--border-default);
    background: var(--surface-secondary);
}

.service-card-v2__price {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--accent-primary);
}

.service-card-v2__action {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    background: transparent;
    color: var(--accent-primary);
    border: 1px solid var(--accent-primary);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    cursor: pointer;
    transition: all var(--duration-fast);
    text-decoration: none;
}

.service-card-v2__action:hover {
    background: var(--accent-primary);
    color: var(--color-black);
}

/* House color variants */
.service-card-v2--signal { --service-house-color: var(--color-green-500, var(--color-green-500)); }
.service-card-v2--courage { --service-house-color: var(--color-red-600, var(--color-red-600)); }
.service-card-v2--integrity { --service-house-color: var(--color-purple-600, var(--color-purple-600)); }
.service-card-v2--focus { --service-house-color: var(--color-green-600, var(--color-green-600)); }
.service-card-v2--wisdom { --service-house-color: var(--color-purple-600, var(--color-purple-600)); }

/* =============================================================================
   3. HOUSE QUEST CARD
   Double border, gradient bg, probability impact, community goal
   ============================================================================= */
.house-quest-card {
    background: var(--surface-secondary);
    border: 2px solid var(--border-strong);
    border-radius: var(--radius-xl);
    overflow: hidden;
    position: relative;
    transition: transform var(--duration-normal) var(--ease-default),
                box-shadow var(--duration-normal) var(--ease-default);
}

.house-quest-card:hover {
    transform: none;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}

/* Outer glow for double border effect */
.house-quest-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: var(--radius-xl);
    border: 1px solid var(--hq-house-color, var(--accent-primary));
    opacity: 0.3;
    pointer-events: none;
}

.house-quest-card__gradient {
    padding: var(--space-4) var(--space-4) 0;
    background: linear-gradient(135deg,
        var(--hq-gradient-start, rgba(0, 243, 255, 0.1)),
        var(--hq-gradient-end, rgba(139, 92, 246, 0.05)));
}

.house-quest-card__house {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin-bottom: var(--space-3);
}

.house-quest-card__house-icon {
    font-size: var(--text-lg);
}

.house-quest-card__goal {
    margin-bottom: var(--space-3);
}

.house-quest-card__goal-label {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: var(--space-1);
}

.house-quest-card__goal-text {
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    color: var(--text-primary);
    line-height: var(--leading-normal);
}

/* Probability impact callout */
.house-quest-card__impact {
    background: var(--surface-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    margin-bottom: var(--space-3);
}

.house-quest-card__impact-title {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: var(--space-1);
}

.house-quest-card__impact-value {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-primary);
}

.house-quest-card__impact-arrow {
    color: var(--status-success);
    font-weight: var(--font-bold);
}

.house-quest-card__impact-delta {
    font-size: var(--text-xs);
    color: var(--status-success);
    font-weight: var(--font-medium);
}

/* Quest section */
.house-quest-card__quest {
    padding: var(--space-4);
}

.house-quest-card__quest-title {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.house-quest-card__progress-bar {
    display: block;
    width: 100%;
    height: 6px;
    border: 0;
    background: var(--surface-tertiary);
    border-radius: var(--radius-full);
    overflow: hidden;
    appearance: none;
    margin-bottom: var(--space-1);
}

.house-quest-card__progress-bar::-webkit-progress-bar {
    background: var(--surface-tertiary);
    border-radius: var(--radius-full);
}

.house-quest-card__progress-bar::-webkit-progress-value {
    background: var(--hq-house-color, var(--accent-primary));
    border-radius: var(--radius-full);
}

.house-quest-card__progress-bar::-moz-progress-bar {
    background: var(--hq-house-color, var(--accent-primary));
    border-radius: var(--radius-full);
}

.house-quest-card__progress-text {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-bottom: var(--space-3);
}

.house-quest-card__action {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-4);
    background: var(--hq-house-color, var(--accent-primary));
    color: var(--color-black);
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    cursor: pointer;
    transition: all var(--duration-fast);
    width: 100%;
    justify-content: center;
}

.house-quest-card__action:hover {
    filter: brightness(1.1);
    transform: none;
}

/* =============================================================================
   4. PACK CARD
   Portrait orientation, rounded corners, rarity glow, "OWNED" indicator
   ============================================================================= */
.pack-card {
    background: var(--surface-primary);
    border: none;
    border-radius: var(--radius-xl);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform var(--duration-normal) var(--ease-default),
                box-shadow var(--duration-normal) var(--ease-default);
    position: relative;
    /* Portrait aspect hint */
    min-height: 200px;
}

.pack-card:hover {
    transform: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

/* Rarity variants */
.pack-card--common {
    border: none;
}

.pack-card--limited {
    border: 2px solid var(--color-blue-500);
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.2);
}

.pack-card--limited:hover {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.3), 0 8px 24px rgba(0, 0, 0, 0.3);
}

.pack-card--unique {
    border: 2px solid var(--color-yellow-400);
    box-shadow: 0 0 12px rgba(250, 204, 21, 0.2);
}

.pack-card--unique:hover {
    box-shadow: 0 0 20px rgba(250, 204, 21, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3);
}

/* Shimmer animation for unique items */
.pack-card--unique::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-xl);
    background: linear-gradient(
        135deg,
        transparent 30%,
        rgba(250, 204, 21, 0.08) 50%,
        transparent 70%
    );
    background-size: 200% 200%;
    animation: pack-shimmer 3s ease-in-out 3;
    pointer-events: none;
}

@keyframes pack-shimmer {
    0% { background-position: 200% 200%; }
    100% { background-position: -200% -200%; }
}

/* Rarity badge */
.pack-card__rarity {
    padding: var(--space-2) var(--space-3);
    width: 100%;
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.pack-card--common .pack-card__rarity {
    background: var(--surface-tertiary);
    color: var(--text-muted);
}

.pack-card--limited .pack-card__rarity {
    background: rgba(59, 130, 246, 0.15);
    color: var(--color-blue-500);
}

.pack-card--unique .pack-card__rarity {
    background: rgba(250, 204, 21, 0.15);
    color: var(--color-yellow-400);
}

/* Image area */
.pack-card__image {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-4xl);
    margin: var(--space-3) 0;
}

.pack-card__image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: var(--radius-md);
}

.pack-card__image [data-lucide],
.pack-card__image svg {
    width: 40px;
    height: 40px;
    color: var(--text-secondary);
}

/* Item info */
.pack-card__name {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    padding: 0 var(--space-3);
    margin-bottom: var(--space-1);
}

.pack-card__description {
    font-size: var(--text-xs);
    color: var(--text-muted);
    padding: 0 var(--space-3);
    line-height: var(--leading-normal);
    margin-bottom: var(--space-2);
}

/* Owned indicator */
.pack-card__owned {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    width: 100%;
    border-top: 1px solid var(--border-default);
    margin-top: auto;
}

.pack-card__owned-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--status-success);
}

.pack-card__owned-text {
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    color: var(--text-muted);
}

.pack-card__date {
    font-size: var(--text-xs);
    color: var(--text-muted);
    padding-bottom: var(--space-2);
}

/* =============================================================================
   4b. DS PACK CARDS
   Shared Backpack cards for apps, quests/challenges, tickets, zines, pack items,
   and hosted events. Macros live in templates/components/_cards.html.
   ============================================================================= */
.ds-pack-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
    gap: var(--space-3);
}

.ds-pack-grid__calendar-span {
    grid-column: span 2;
    min-width: 0;
}

.ds-pack-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.ds-pack-type-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    min-height: var(--size-6);
    padding: var(--space-1) var(--space-3);
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--highlight-yellow);
    color: var(--color-black);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0;
    box-shadow: var(--shadow-sm);
}

.ds-pack-calendar-widget {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 190px;
    aspect-ratio: 2 / 1;
    padding: var(--space-3);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)),
        var(--surface-primary);
    border: 1px solid var(--border-default);
    color: var(--text-primary);
    text-decoration: none;
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.ds-pack-calendar-widget:hover {
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
}

.ds-pack-calendar-widget__head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-2);
    min-height: 38px;
    margin-bottom: var(--space-2);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ds-pack-calendar-widget__date {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: var(--space-5);
    min-width: 0;
    color: var(--text-primary);
    font-family: var(--font-heading);
}

.ds-pack-calendar-widget__date strong,
.ds-pack-calendar-widget__date span {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    letter-spacing: 0;
    line-height: 1;
    white-space: nowrap;
}

.ds-pack-calendar-widget__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.09);
    color: var(--text-primary);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.ds-pack-calendar-widget__icon iconify-icon {
    width: 20px;
    height: 20px;
}

.ds-pack-calendar-widget__rows {
    display: grid;
    flex: 1;
    gap: 7px;
    min-height: 0;
}

.ds-pack-calendar-widget__row {
    display: grid;
    grid-template-columns: minmax(64px, auto) minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-2);
    min-height: 0;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--surface-secondary);
    border: 1px solid var(--border-default);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.ds-pack-calendar-widget__kind {
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: 0;
}

.ds-pack-calendar-widget__row strong {
    min-width: 0;
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ds-pack-calendar-widget__row span:last-child {
    color: var(--color-yellow-400, #facc15);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    white-space: nowrap;
}

.ds-pack-card {
    position: relative;
    display: block;
    min-height: 190px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 8px;
    background: var(--surface-primary);
    border: 1px solid var(--border-default);
    color: var(--color-white);
    text-decoration: none;
    isolation: isolate;
}

.ds-pack-card--target {
    outline: 2px solid var(--highlight-neon);
    outline-offset: 3px;
    scroll-margin-block: 96px;
}

.ds-pack-card:hover,
.ds-pack-quest-card:hover,
.ds-pack-event-card:hover {
    transform: none;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
}

.ds-pack-card__media,
.ds-pack-event-card__cover {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.ds-pack-card__media img,
.ds-pack-event-card__cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ds-pack-card--fallback .ds-pack-card__media,
.ds-pack-event-card--fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 20% 0%, var(--color-purple-500), transparent 55%),
        linear-gradient(135deg, var(--color-purple-600), var(--color-green-600));
}

.ds-pack-card--fallback .ds-pack-card__media iconify-icon {
    width: var(--size-14);
    height: var(--size-14);
    color: var(--text-inverse);
}

.ds-pack-card__scrim,
.ds-pack-event-card__scrim {
    position: absolute;
    inset: 0;
    z-index: var(--z-base);
    background:
        linear-gradient(180deg, var(--gallery-border), transparent 35%),
        linear-gradient(0deg, var(--gallery-canvas), transparent 72%);
}

.ds-pack-card__top,
.ds-pack-event-card__top {
    position: absolute;
    top: var(--space-2);
    left: var(--space-2);
    right: var(--space-2);
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-2);
}

.ds-pack-card__badge,
.ds-pack-event-card__badge,
.ds-pack-event-card__state {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.56);
    color: var(--color-white);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.ds-pack-card__badge.ds-pack-type-badge,
.ds-pack-event-card__badge.ds-pack-type-badge,
.ds-pack-quest-card__kind.ds-pack-type-badge,
.app-ticket__eyebrow.ds-pack-type-badge {
    background: var(--highlight-yellow, #f2e841);
    color: var(--color-black, #000);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    border-radius: 8px;
    letter-spacing: 0;
}

.ds-pack-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.58);
    color: var(--color-white);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.ds-pack-card__icon iconify-icon {
    width: 19px;
    height: 19px;
}

.ds-pack-card__body,
.ds-pack-event-card__body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 48px var(--space-3) var(--space-3);
}

.ds-pack-card__title,
.ds-pack-event-card__title {
    margin: 0;
    color: var(--color-white);
    font-size: var(--text-base);
    font-weight: var(--font-bold);
    line-height: 1.18;
    overflow-wrap: anywhere;
}

.ds-pack-card__meta {
    margin: 4px 0 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ds-pack-card--zine {
    aspect-ratio: 3 / 4;
    min-height: 235px;
}

.ds-pack-card--item .ds-pack-card__badge {
    background: var(--highlight-yellow, #f2e841);
    color: var(--color-black, #000);
}

.ds-pack-ticket-card.app-ticket--no-image .app-ticket__image iconify-icon {
    width: 48px;
    height: 48px;
    color: rgba(255, 255, 255, 0.18);
}

/* Creator app previews: production-local drafts visible only to maker/admin. */
.feed-creator-app-card {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--border-default);
    border-radius: var(--feed-card-radius);
    background: var(--surface-primary);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.feed-creator-app-card__shell {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4);
    min-width: 0;
}

.feed-creator-app-card__header,
.feed-creator-app-card__commands,
.feed-creator-app-card__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.feed-creator-app-card__header {
    justify-content: space-between;
}

.feed-creator-app-card__kicker {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.feed-creator-app-card__kicker span,
.feed-creator-app-card__type,
.feed-creator-app-card__commands span,
.feed-creator-app-card__action,
.feed-creator-app-card__publish {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 30px;
    width: fit-content;
    padding: 5px 10px;
    border-radius: var(--radius-full);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    line-height: 1;
    letter-spacing: 0;
    text-decoration: none;
    white-space: nowrap;
}

.feed-creator-app-card__kicker span:first-child,
.feed-creator-app-card__type {
    color: var(--color-dark-900);
    background: var(--accent-primary);
}

.feed-creator-app-card__kicker span:last-child,
.feed-creator-app-card__commands span {
    color: var(--text-secondary);
    background: var(--surface-secondary);
    border: 1px solid var(--border-subtle);
}

.feed-creator-app-card__body {
    display: grid;
    gap: var(--space-2);
    min-width: 0;
}

.feed-creator-app-card__title {
    margin: 0;
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-size: clamp(22px, 3vw, 30px);
    font-weight: var(--font-semibold);
    line-height: var(--leading-tight);
    overflow-wrap: anywhere;
}

.feed-creator-app-card__description {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
}

.feed-creator-app-card__media {
    position: relative;
    display: grid;
    min-height: 248px;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--color-dark-900);
    color: var(--text-inverse);
    text-decoration: none;
    isolation: isolate;
}

.feed-creator-app-card__media img {
    width: 100%;
    height: 100%;
    min-height: 248px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}

.feed-creator-app-card--meme .feed-creator-app-card__media {
    border: 2px solid var(--color-dark-900);
    border-radius: var(--feed-card-radius);
}

.feed-creator-app-card--meme .feed-creator-app-card__media img {
    aspect-ratio: 16 / 10;
}

.feed-creator-app-card__media--empty {
    min-height: 220px;
    place-items: center;
    background: var(--surface-secondary);
    color: var(--accent-primary);
}

.feed-creator-app-card__media--empty iconify-icon {
    width: 46px;
    height: 46px;
}

.feed-creator-app-card__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.08), rgba(15, 23, 42, 0.76));
    pointer-events: none;
}

.feed-creator-app-card__cover-copy {
    position: absolute;
    inset: auto var(--space-4) var(--space-4);
    z-index: 2;
    display: grid;
    gap: var(--space-1);
    max-width: 620px;
    color: var(--text-inverse);
    pointer-events: none;
}

.feed-creator-app-card__cover-copy strong {
    font-family: var(--font-heading);
    font-size: clamp(26px, 4vw, 42px);
    font-weight: var(--font-semibold);
    line-height: 0.98;
    overflow-wrap: anywhere;
}

.feed-creator-app-card__cover-copy span {
    max-width: 52ch;
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
}

.feed-creator-app-card__commands {
    align-items: center;
}

.feed-creator-app-card__commands iconify-icon,
.feed-creator-app-card__actions iconify-icon {
    width: 15px;
    height: 15px;
}

.feed-creator-app-card__publish {
    margin-left: auto;
    border: 0;
    background: var(--color-green-400);
    color: var(--color-black);
    cursor: pointer;
}

.feed-creator-app-card__publish:disabled {
    cursor: progress;
    opacity: 0.7;
}

.feed-creator-app-card__actions {
    padding-top: var(--space-1);
}

.feed-creator-app-card__action {
    border: 1px solid var(--border-default);
    background: var(--surface-secondary);
    color: var(--text-primary);
    cursor: pointer;
}

.feed-creator-app-card__action:hover {
    background: var(--surface-tertiary);
}

.feed-creator-app-card__action--preview {
    background: var(--color-dark-900);
    color: var(--text-inverse);
    border-color: var(--color-dark-900);
}

@media (max-width: 640px) {
    .feed-creator-app-card__shell {
        padding: var(--space-3);
    }

    .feed-creator-app-card__media,
    .feed-creator-app-card__media img {
        min-height: 192px;
    }

    .feed-creator-app-card__cover-copy {
        inset: auto var(--space-3) var(--space-3);
    }

    .feed-creator-app-card__cover-copy strong {
        font-size: clamp(24px, 9vw, 34px);
    }

    .feed-creator-app-card__publish {
        margin-left: 0;
    }
}

.feed-event-ticket-card {
    --feed-ticket-card-bg: var(--surface-primary, #fff);
    --feed-ticket-card-border: var(--feed-card-border, 1px solid var(--border-subtle));
    --feed-ticket-card-radius: var(--feed-card-radius, var(--radius-card));
    --feed-ticket-card-shadow: var(--feed-card-shadow, var(--shadow-sm));
    --feed-ticket-label-color: var(--text-muted);
    --feed-ticket-notch-bg: var(--feed-ticket-card-bg);
    --ticket-max-width: none;
    --ticket-min-height: 144px;
    --ticket-bg: var(--accent-dark);
    --ticket-radius: 8px;
    --ticket-image-width: calc(var(--size-32) + var(--size-8));
    --ticket-image-width-mobile: var(--size-32);
    --ticket-notch-bg: var(--feed-ticket-notch-bg);
    --ticket-title-size: var(--text-base);
    --ticket-title-size-mobile: var(--text-base);
    --ticket-body-padding: 21px;
    --ticket-body-padding-mobile: 13px;
    width: 100%;
    max-width: var(--feed-card-max-width, 680px);
    box-sizing: border-box;
    padding: 13px;
    background: var(--feed-ticket-card-bg);
    border: var(--feed-ticket-card-border);
    border-radius: var(--feed-ticket-card-radius);
    box-shadow: var(--feed-ticket-card-shadow);
    scroll-margin-top: calc(var(--topbar-height, 64px) + var(--space-5));
}

.feed-event-ticket-card__label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-2);
    color: var(--feed-ticket-label-color);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: var(--ticket-eyebrow-tracking);
}

.feed-event-ticket-card__label iconify-icon {
    width: 15px;
    height: 15px;
    color: var(--ticket-status-color);
}

.feed-event-ticket-card .app-ticket {
    max-width: var(--ticket-max-width);
    flex-direction: row-reverse;
    box-shadow: var(--shadow-sm);
}

.feed-event-ticket-card .app-ticket__title {
    display: -webkit-box;
    max-width: 100%;
    overflow: hidden;
    overflow-wrap: break-word;
    white-space: normal;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.feed-event-ticket-card .app-ticket__notch {
    right: auto;
    left: var(--ticket-image-width);
    transform: translateX(-50%);
    background: var(--feed-ticket-notch-bg);
}

.feed-event-ticket-card:target .app-ticket {
    box-shadow:
        0 0 0 2px var(--ticket-status-color),
        var(--shadow-md, 0 12px 28px rgba(0, 0, 0, 0.18));
}

.feed-card__ticket-embed {
    --feed-ticket-card-bg: var(--surface-primary, #fff);
    --feed-ticket-card-border: var(--feed-card-border, 1px solid var(--border-subtle));
    --feed-ticket-card-radius: var(--feed-card-radius, var(--radius-card));
    --feed-ticket-card-shadow: var(--feed-card-shadow, var(--shadow-sm));
    --feed-ticket-label-color: var(--text-muted);
    --feed-ticket-notch-bg: var(--feed-ticket-card-bg);
    --ticket-max-width: none;
    --ticket-min-height: 144px;
    --ticket-bg: var(--accent-dark);
    --ticket-radius: 8px;
    --ticket-image-width: calc(var(--size-32) + var(--size-8));
    --ticket-image-width-mobile: var(--size-32);
    --ticket-notch-bg: var(--feed-ticket-notch-bg);
    --ticket-title-size: var(--text-base);
    --ticket-title-size-mobile: var(--text-base);
    --ticket-body-padding: 21px;
    --ticket-body-padding-mobile: 13px;
    width: 100%;
    max-width: var(--feed-card-max-width, 680px);
    box-sizing: border-box;
    padding: 13px;
    margin: var(--space-4) calc(var(--space-8) * -1) var(--space-3);
    width: calc(100% + (var(--space-8) * 2));
    background: var(--feed-ticket-card-bg);
    border: var(--feed-ticket-card-border);
    border-radius: var(--feed-ticket-card-radius);
    box-shadow: var(--feed-ticket-card-shadow);
    scroll-margin-top: calc(var(--topbar-height, 64px) + var(--space-5));
}

.feed-card__ticket-embed .app-ticket {
    max-width: var(--ticket-max-width);
    flex-direction: row-reverse;
    box-shadow: var(--shadow-sm);
    margin: 0;
}

.feed-card__ticket-embed .app-ticket__title {
    display: -webkit-box;
    max-width: 100%;
    overflow: hidden;
    overflow-wrap: break-word;
    white-space: normal;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.feed-card__ticket-embed .app-ticket__notch {
    right: auto;
    left: var(--ticket-image-width);
    transform: translateX(-50%);
    background: var(--feed-ticket-notch-bg);
}

.feed-event-ticket-card .app-ticket--has-image,
.feed-card__ticket-embed .app-ticket--has-image {
    display: block;
    min-height: 268px;
    overflow: hidden;
    isolation: isolate;
    background: var(--color-dark-900, #111318);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: var(--shadow-md, 0 14px 34px rgba(0, 0, 0, 0.18));
}

.feed-event-ticket-card .app-ticket--has-image::before,
.feed-card__ticket-embed .app-ticket--has-image::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.72) 100%),
        linear-gradient(90deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.44) 44%, rgba(0, 0, 0, 0.18) 70%, rgba(0, 0, 0, 0.58) 100%);
}

.feed-event-ticket-card .app-ticket--has-image::after,
.feed-card__ticket-embed .app-ticket--has-image::after {
    content: "";
    position: absolute;
    top: 18px;
    bottom: 18px;
    left: 72px;
    z-index: 2;
    width: 1px;
    pointer-events: none;
    background: repeating-linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.72) 0 6px,
        transparent 6px 13px
    );
}

.feed-event-ticket-card .app-ticket--has-image .app-ticket__image,
.feed-card__ticket-embed .app-ticket--has-image .app-ticket__image {
    position: absolute;
    inset: 0;
    width: 100%;
    min-width: 0;
    height: 100%;
}

.feed-event-ticket-card .app-ticket--has-image .app-ticket__image img,
.feed-card__ticket-embed .app-ticket--has-image .app-ticket__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.feed-event-ticket-card .app-ticket--has-image .app-ticket__body,
.feed-card__ticket-embed .app-ticket--has-image .app-ticket__body {
    min-height: inherit;
    padding: 28px 28px 24px 96px;
    justify-content: flex-end;
    color: var(--color-white, #fff);
}

.feed-event-ticket-card .app-ticket--has-image .app-ticket__title,
.feed-card__ticket-embed .app-ticket--has-image .app-ticket__title {
    color: var(--color-white, #fff);
    font-size: var(--text-xl);
    line-height: 1.08;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.44);
    -webkit-line-clamp: 3;
}

.feed-event-ticket-card .app-ticket--has-image .app-ticket__sub,
.feed-card__ticket-embed .app-ticket--has-image .app-ticket__sub,
.feed-event-ticket-card .app-ticket--has-image .app-ticket__status,
.feed-card__ticket-embed .app-ticket--has-image .app-ticket__status,
.feed-event-ticket-card .app-ticket--has-image .app-ticket__detail,
.feed-card__ticket-embed .app-ticket--has-image .app-ticket__detail {
    color: rgba(255, 255, 255, 0.88);
}

.feed-event-ticket-card .app-ticket--has-image .app-ticket__meta,
.feed-card__ticket-embed .app-ticket--has-image .app-ticket__meta {
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 13px;
}

.feed-event-ticket-card .app-ticket--has-image .app-ticket__notch,
.feed-card__ticket-embed .app-ticket--has-image .app-ticket__notch {
    right: auto;
    left: 72px;
    transform: translateX(-50%);
    background: var(--feed-ticket-card-bg);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.feed-card__ticket-embed:target .app-ticket {
    box-shadow:
        0 0 0 2px var(--ticket-status-color),
        var(--shadow-md, 0 12px 28px rgba(0, 0, 0, 0.18));
}

@media (max-width: 480px) {
    .feed-event-ticket-card {
        padding: 8px;
    }

    .feed-event-ticket-card .app-ticket__notch {
        left: var(--ticket-image-width-mobile);
    }

    .feed-card__ticket-embed {
        width: calc(100% + (var(--space-5) * 2));
        margin-right: calc(var(--space-5) * -1);
        margin-left: calc(var(--space-5) * -1);
        padding: var(--space-2);
    }

    .feed-card__ticket-embed .app-ticket__notch {
        left: var(--ticket-image-width-mobile);
    }

    .feed-event-ticket-card .app-ticket--has-image,
    .feed-card__ticket-embed .app-ticket--has-image {
        min-height: 218px;
    }

    .feed-event-ticket-card .app-ticket--has-image::after,
    .feed-card__ticket-embed .app-ticket--has-image::after,
    .feed-event-ticket-card .app-ticket--has-image .app-ticket__notch,
    .feed-card__ticket-embed .app-ticket--has-image .app-ticket__notch {
        left: 50px;
    }

    .feed-event-ticket-card .app-ticket--has-image .app-ticket__body,
    .feed-card__ticket-embed .app-ticket--has-image .app-ticket__body {
        padding: 20px 16px 18px 70px;
    }

    .feed-event-ticket-card .app-ticket--has-image .app-ticket__title,
    .feed-card__ticket-embed .app-ticket--has-image .app-ticket__title {
        font-size: var(--text-lg);
    }
}

.ds-pack-quest-card {
    position: relative;
    display: grid;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-3);
    border: 1px solid var(--border-default);
    border-radius: 8px;
    background: var(--surface-primary);
    color: var(--text-primary);
    box-shadow: var(--drop, var(--shadow-card));
    cursor: pointer;
}

.ds-pack-quest-card--compact {
    max-width: 340px;
}

.ds-pack-quest-card__tags {
    position: absolute;
    top: calc(-1 * var(--space-2));
    left: var(--space-4);
    right: var(--space-4);
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    pointer-events: none;
}

.ds-pack-quest-card__tag {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    max-width: 58%;
    padding: 0 var(--space-3);
    border: 1px solid var(--border-default);
    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;
    text-transform: uppercase;
    letter-spacing: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ds-pack-quest-card__tag--quest {
    background: var(--highlight-yellow);
    color: var(--color-dark-950);
    border-color: var(--highlight-yellow);
}

.ds-pack-quest-card__tag--context {
    background: var(--surface-primary);
    color: var(--text-secondary);
}

.ds-pack-quest-card__media {
    position: relative;
    min-height: 188px;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 8px;
    background: var(--surface-tertiary);
}

.ds-pack-quest-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ds-pack-quest-card__media--fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-secondary);
}

.ds-pack-quest-card__media--fallback iconify-icon {
    width: var(--size-12);
    height: var(--size-12);
    color: var(--accent-primary);
}

.ds-pack-quest-card__body {
    min-width: 0;
    display: grid;
    gap: var(--space-2);
}

.ds-pack-quest-card__topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    text-transform: uppercase;
}

.ds-pack-quest-card__title {
    margin: 0;
    color: var(--text-primary);
    font-family: var(--font-serif);
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
}

.ds-pack-quest-card__desc {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ds-pack-quest-card__progress {
    display: block;
    width: 100%;
    height: 6px;
    border: 0;
    border-radius: var(--radius-full);
    overflow: hidden;
    background: var(--surface-tertiary);
    appearance: none;
}

.ds-pack-quest-card__progress::-webkit-progress-bar {
    background: var(--surface-tertiary);
    border-radius: var(--radius-full);
}

.ds-pack-quest-card__progress::-webkit-progress-value {
    background: var(--accent-primary);
    border-radius: var(--radius-full);
}

.ds-pack-quest-card__progress::-moz-progress-bar {
    background: var(--accent-primary);
    border-radius: var(--radius-full);
}

.ds-pack-quest-card__tracker {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-2) 0;
}

.ds-pack-quest-card__tracker-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    text-transform: uppercase;
}

.ds-pack-quest-card__tracker-head strong {
    color: var(--text-primary);
}

.ds-pack-quest-card__dots {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.ds-pack-quest-card__dot,
.ds-pack-quest-card__step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border: 1px solid var(--border-default);
    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;
}

.ds-pack-quest-card__dot iconify-icon,
.ds-pack-quest-card__step-num iconify-icon,
.ds-pack-quest-card__complete iconify-icon {
    width: var(--size-4);
    height: var(--size-4);
}

.ds-pack-quest-card__dot--done,
.ds-pack-quest-card__step--done .ds-pack-quest-card__step-num {
    background: var(--status-success);
    border-color: var(--status-success);
    color: var(--text-inverse);
}

.ds-pack-quest-card__dot--active,
.ds-pack-quest-card__step--active .ds-pack-quest-card__step-num {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: var(--text-inverse);
}

.ds-pack-quest-card__dot--locked,
.ds-pack-quest-card__step--locked {
    opacity: 0.56;
}

.ds-pack-quest-card__dot--more {
    width: auto;
    padding: 0 var(--space-2);
}

.ds-pack-quest-card__next,
.ds-pack-quest-card__complete {
    border-radius: 8px;
    background: var(--surface-secondary);
}

.ds-pack-quest-card__next-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    width: 100%;
    min-height: 58px;
    padding: var(--space-3);
    border: 1px solid var(--border-default);
    border-radius: 8px;
    background: var(--surface-secondary);
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
}

.ds-pack-quest-card__next-button iconify-icon {
    width: var(--size-5);
    height: var(--size-5);
    flex: 0 0 var(--size-5);
    color: var(--accent-primary);
}

.ds-pack-quest-card__next-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.ds-pack-quest-card__next-copy span {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    text-transform: uppercase;
}

.ds-pack-quest-card__next-copy strong {
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    line-height: var(--leading-snug);
    overflow-wrap: anywhere;
}

.ds-pack-quest-card__next-copy small {
    color: var(--text-muted);
    font-size: var(--text-xs);
    line-height: var(--leading-snug);
    overflow-wrap: anywhere;
}

.ds-pack-quest-card__widget-slot {
    margin-top: var(--space-2);
}

.ds-pack-quest-card__complete {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 48px;
    padding: var(--space-3);
    color: var(--status-success);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
}

.ds-pack-quest-card__steps {
    border-top: 1px solid var(--border-subtle);
    padding-top: var(--space-2);
}

.ds-pack-quest-card__steps summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    min-height: 36px;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    cursor: pointer;
    list-style: none;
}

.ds-pack-quest-card__steps summary::-webkit-details-marker {
    display: none;
}

.ds-pack-quest-card__steps summary iconify-icon {
    width: var(--size-4);
    height: var(--size-4);
    transition: transform var(--duration-fast) var(--ease-default);
}

.ds-pack-quest-card__steps[open] summary iconify-icon {
    transform: rotate(180deg);
}

.ds-pack-quest-card__step-list {
    display: grid;
    gap: var(--space-2);
    margin: var(--space-2) 0 0;
    padding: 0;
    list-style: none;
}

.ds-pack-quest-card__step {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    gap: var(--space-2);
    min-height: 34px;
}

.ds-pack-quest-card__step-title {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    overflow-wrap: anywhere;
}

.ds-pack-event-card {
    position: relative;
    display: block;
    min-height: 172px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 8px;
    background: var(--surface-primary);
    border: 1px solid var(--border-default);
    color: var(--color-white);
    text-decoration: none;
    isolation: isolate;
}

.ds-pack-event-card__meta,
.ds-pack-event-card__foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: 6px;
    color: rgba(255, 255, 255, 0.86);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
}

.ds-pack-event-card__meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.ds-pack-event-card__meta iconify-icon {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

.ds-pack-event-card__foot {
    justify-content: space-between;
}

.ds-pack-event-card__foot strong {
    color: var(--color-white);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

@media (max-width: 640px) {
    .ds-pack-calendar-widget {
        padding: var(--space-3);
    }

    .ds-pack-calendar-widget__head {
        grid-template-columns: auto 1fr;
    }

    .ds-pack-calendar-widget__date {
        justify-content: flex-start;
        gap: var(--space-3);
    }

    .ds-pack-calendar-widget__date strong,
    .ds-pack-calendar-widget__date span {
        font-size: var(--text-xl);
    }

    .ds-pack-calendar-widget__icon {
        display: none;
    }

    .ds-pack-calendar-widget__row {
        grid-template-columns: minmax(0, 1fr) auto;
        border-radius: 8px;
        gap: var(--space-2);
    }

    .ds-pack-calendar-widget__kind {
        display: none;
    }

    .ds-pack-calendar-widget__row strong {
        white-space: nowrap;
    }

    .ds-pack-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-2);
    }

    .ds-pack-card {
        min-height: 160px;
    }

    .ds-pack-card--zine {
        min-height: 210px;
    }

    .ds-pack-quest-card {
        grid-template-columns: 1fr;
    }

    .ds-pack-quest-card__media {
        min-height: 138px;
    }

    .ds-pack-event-card {
        aspect-ratio: 4 / 3;
    }
}

/* =============================================================================
   5. SHOP CARD
   Sharp corners, product image, price tag, BUY NOW button
   ============================================================================= */
.shop-card-v2 {
    background: var(--surface-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: transform var(--duration-normal) var(--ease-default),
                box-shadow var(--duration-normal) var(--ease-default);
}

.shop-card-v2:hover {
    transform: none;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
    border-color: var(--accent-primary);
}

/* Product image */
.shop-card-v2__image {
    width: 100%;
    height: 140px;
    overflow: hidden;
    background: var(--surface-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.shop-card-v2__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.shop-card-v2__image-placeholder {
    font-size: var(--text-5xl);
    color: var(--text-muted);
}

/* Gradient fallback */
.shop-card-v2__image--gradient {
    background: linear-gradient(135deg, var(--surface-tertiary), var(--surface-secondary));
}

.shop-card-v2__body {
    padding: var(--space-3);
}

.shop-card-v2__name {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin-bottom: var(--space-1);
    overflow-wrap: break-word;
    word-break: break-word;
}

.shop-card-v2__description {
    font-size: var(--text-xs);
    color: var(--text-muted);
    line-height: var(--leading-normal);
    margin-bottom: var(--space-2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: break-word;
    word-break: break-word;
}

.shop-card-v2__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.shop-card-v2__category {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px var(--space-2);
    background: var(--surface-tertiary);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

.shop-card-v2__duration {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* Price + buy section */
.shop-card-v2__footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    border-top: 1px solid var(--border-default);
}

.shop-card-v2__price {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    color: var(--accent-primary);
}

.shop-card-v2__price-icon {
    font-size: var(--text-base);
}

.shop-card-v2__buy-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-4);
    background: var(--accent-primary);
    color: var(--color-dark-900);
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    cursor: pointer;
    transition: all var(--duration-fast);
}

.shop-card-v2__buy-btn:hover {
    filter: brightness(1.1);
    transform: none;
    box-shadow: 0 4px 12px rgba(0, 243, 255, 0.3);
}

.shop-card-v2__buy-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.shop-card-v2__buy-btn--owned {
    background: var(--surface-tertiary);
    color: var(--text-muted);
    cursor: default;
}

.shop-card-v2__buy-btn--owned:hover {
    filter: none;
    transform: none;
    box-shadow: none;
}

/* =============================================================================
   6. FEED CARD — Unified post card (feed, chat channels, discussion drawer)
   ============================================================================= */
.feed-card {
    position: relative;
    background: var(--feed-card-bg, var(--surface-primary, var(--bg-card)));
    border: var(--feed-card-border, 1px solid var(--border-default, var(--border-color)));
    border-radius: var(--feed-card-radius, var(--radius-md, 24px));
    padding: var(--feed-card-padding, var(--space-2) var(--space-3));
    box-shadow: var(--feed-card-shadow, 0 4px 20px -2px rgba(0, 0, 0, 0.05));
    font-family: var(--font-body, 'Inter', sans-serif);
}

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

.feed-card--silenced {
    display: none;
}

/* Floating cards inside house activity feeds (dark context) */
.house-overview-feed .feed-card {
    border-radius: var(--radius-2xl);
    border: 1.5px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

/* Floating cards inside discussion drawer (light context — must match feed/Paper Layer cards) */
.discussion-drawer-content .feed-card {
    background: var(--feed-card-bg, var(--surface-primary));
    border-radius: var(--feed-card-radius, 24px);
    border: var(--feed-card-border, 1px solid var(--border-default));
    box-shadow: var(--feed-card-shadow, 0 4px 20px -2px rgba(0, 0, 0, 0.05));
    padding: var(--feed-card-padding, 16px 24px 24px);
}

.feed-card--chat-stream {
    margin: var(--space-3) var(--space-5);
    width: calc(100% - (var(--space-5) * 2));
    cursor: pointer;
}

.feed-shared-app-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: var(--space-4) 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
    font-family: var(--font-body);
}

.feed-shared-app-card__tags {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: 0 var(--space-1);
}

.feed-shared-app-card__maker,
.feed-shared-app-card__kind {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-width: 0;
    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-shared-app-card__maker {
    color: var(--text-muted);
}

.feed-shared-app-card__kind {
    color: var(--text-primary);
    background: var(--surface-secondary);
    border: 1px solid var(--border-subtle);
    padding: var(--space-1) var(--space-2);
    white-space: nowrap;
}

.feed-shared-app-card__ident {
    width: var(--space-2);
    height: var(--space-2);
    border-radius: var(--radius-full);
    background: var(--accent-primary);
    flex: 0 0 auto;
}

.feed-shared-app-card__surface {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
    padding: var(--space-3);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-default);
    background: var(--surface-secondary);
    box-shadow: var(--shadow-drop, var(--shadow-card));
    transition: transform var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out);
}

.feed-shared-app-card:hover .feed-shared-app-card__surface {
    transform: translateY(calc(-1 * var(--space-1) / 2));
    border-color: var(--border-strong);
    box-shadow: var(--shadow-lift, var(--shadow-card));
}

.feed-shared-app-card__media,
.feed-shared-app-card__image,
.feed-shared-app-card__fallback {
    width: var(--size-12);
    height: var(--size-12);
    border-radius: var(--radius-lg);
    flex: 0 0 auto;
}

.feed-shared-app-card__image {
    object-fit: cover;
    display: block;
}

.feed-shared-app-card__fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-tertiary);
    color: var(--accent-primary);
}

.feed-shared-app-card__glyph {
    width: var(--size-6);
    height: var(--size-6);
}

.feed-shared-app-card__copy {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    flex-direction: column;
    gap: var(--space-1);
}

.feed-shared-app-card__title {
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.feed-shared-app-card__deck {
    color: var(--text-muted);
    font-size: var(--text-xs);
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.feed-shared-app-card__cta {
    flex: 0 0 auto;
    border-radius: var(--radius-full);
    background: var(--text-primary);
    color: var(--text-inverse);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    line-height: 1;
    padding: var(--space-2) var(--space-3);
    text-transform: uppercase;
}

/* Feed category card: Hot Channels */
.feed-card--hot-channels {
    background: var(--surface-primary, #fff);
    border: var(--feed-card-border, 1px solid var(--border-default, #e5e7eb));
    border-radius: var(--feed-card-radius, 16px);
    color: var(--text-primary, #111827);
    padding: var(--space-4, 16px);
}

.house-overview-feed .feed-card--hot-channels {
    border: var(--feed-card-border, 1px solid var(--border-default, #e5e7eb));
    border-radius: var(--feed-card-radius, 16px);
    box-shadow: var(--feed-card-shadow, 0 4px 20px -2px rgba(0, 0, 0, 0.05));
}

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

.hot-channels-card__icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full, 999px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: color-mix(in srgb, var(--status-success, #22c55e) 14%, transparent);
    color: var(--status-success, #15803d);
}

.hot-channels-card__icon iconify-icon {
    width: 24px;
    height: 24px;
}

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

.hot-channels-card__eyebrow {
    color: var(--text-muted, #6b7280);
    font-size: var(--text-xs, 12px);
    font-weight: var(--font-semibold, 600);
    line-height: 1.2;
    text-transform: uppercase;
}

.hot-channels-card__title {
    margin: 2px 0 0;
    color: var(--text-primary, #111827);
    font-family: var(--font-heading, var(--font-body, sans-serif));
    font-size: var(--text-xl, 20px);
    font-weight: var(--font-bold, 700);
    line-height: 1.15;
}

.hot-channels-card__count {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full, 999px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: var(--surface-secondary, #f3f4f6);
    color: var(--text-secondary, #374151);
    font-size: var(--text-sm, 14px);
    font-weight: var(--font-bold, 700);
}

.hot-channels-card__rows {
    display: flex;
    flex-direction: column;
    margin-top: var(--space-3, 12px);
    border-top: 1px solid var(--border-subtle, #e5e7eb);
}

.hot-channels-card__empty {
    margin: var(--space-3, 12px) 0 0;
    padding: var(--space-3, 12px);
    border: 1px solid var(--border-subtle, #e5e7eb);
    border-radius: var(--radius-md, 8px);
    background: var(--surface-secondary, #f9fafb);
    color: var(--text-secondary, #374151);
    font-size: var(--text-sm, 14px);
    line-height: 1.4;
}

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

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

.hot-channels-card__row-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full, 999px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: var(--surface-secondary, #f3f4f6);
    color: var(--text-secondary, #4b5563);
}

.hot-channels-card__row-icon iconify-icon,
.hot-channels-card__row-action iconify-icon {
    width: 18px;
    height: 18px;
}

.hot-channels-card__row-text {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hot-channels-card__row-title,
.hot-channels-card__row-meta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hot-channels-card__row-title {
    color: var(--text-primary, #111827);
    font-size: var(--text-base, 16px);
    font-weight: var(--font-bold, 700);
    line-height: 1.25;
}

.hot-channels-card__row-meta {
    color: var(--text-muted, #6b7280);
    font-size: var(--text-sm, 14px);
    line-height: 1.25;
}

.hot-channels-card__row-action {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full, 999px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: var(--text-muted, #6b7280);
}

@media (max-width: 480px) {
    .feed-card--hot-channels {
        padding: var(--space-3, 12px);
    }

    .hot-channels-card__icon {
        width: 40px;
        height: 40px;
    }

    .hot-channels-card__title {
        font-size: var(--text-lg, 18px);
    }

    .hot-channels-card__row {
        min-height: 56px;
    }
}


/* ========== Vision Board Founder Card ========== */
.feed-card.feed-card--vision-board {
    background: var(--surface-primary);
    border: 1px solid var(--border-default);
    box-shadow: var(--shadow-sm);
    padding: var(--space-5);
}

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

.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);
}

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

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

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

.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;
}

.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);
}

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

.vision-board-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.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);
}

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

.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);
}

.vision-board-card__priorities span,
.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);
}

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

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

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

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

/* DS Card Header — avatar + meta + menu */
.feed-card__header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

/* DS Avatar: user avatar primary (48px), house badge secondary (20px) */
.feed-card__avatar-wrap {
    position: relative;
    width: var(--feed-card-avatar-size);
    height: var(--feed-card-avatar-size);
    flex-shrink: 0;
}

.feed-card__avatar-wrap a {
    display: block;
}

.feed-card__avatar {
    width: var(--feed-card-avatar-size);
    height: var(--feed-card-avatar-size);
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border-subtle);
}

.feed-card__house-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: var(--feed-card-avatar-badge-size);
    height: var(--feed-card-avatar-badge-size);
    border-radius: 50%;
    border: 2px solid var(--border-subtle);
    object-fit: cover;
}

/* DS Meta */
.feed-card__meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.feed-card__author-line {
    font-weight: var(--feed-card-author-weight);
    font-size: var(--feed-card-author-size);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.feed-card__author-link {
    color: inherit;
    text-decoration: none;
}

.feed-card__author-link:hover {
    color: var(--accent-primary);
}

.feed-card__channel-line {
    font-size: var(--feed-card-channel-size);
    color: var(--text-muted);
    font-weight: var(--font-medium);
}

.feed-card__channel-link {
    color: inherit;
    text-decoration: none;
}

.feed-card__channel-link:hover {
    color: var(--accent-primary);
}

/* Legacy classes kept for house pages / discussion drawers */
.feed-card__identity {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.feed-card__icon-stack {
    position: relative;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}

.feed-card__house-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md, 8px);
    object-fit: cover;
}

.feed-card__avatar-badge-link {
    position: absolute;
    bottom: -3px;
    right: -3px;
    display: block;
    border-radius: var(--radius-full, 50%);
    z-index: 1;
}

.feed-card__avatar-badge-link:hover {
    opacity: 0.85;
}

.feed-card__avatar-badge {
    width: var(--feed-card-avatar-badge-size, 32px);
    height: var(--feed-card-avatar-badge-size, 32px);
    border-radius: var(--radius-full, 50%);
    object-fit: cover;
    border: 2px solid var(--border-subtle);
    background: var(--surface-primary);
}

/* Title link wrapping house name + channel */
.feed-card__title-link {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    text-decoration: none;
    color: inherit;
}

.feed-card__title-link:hover .feed-card__house-name {
    color: var(--accent-primary);
}

.feed-card__title-link:hover .feed-card__channel-name {
    filter: brightness(1.2);
}

/* Content link */
.feed-card__content-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.feed-card__content-link:hover .feed-card__content {
    color: var(--text-primary);
}

/* Line 1: House Name | r/thread (feed) or just r/thread (chat/discussion) */
.feed-card__title-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.feed-card__house-name {
    font-size: var(--feed-card-author-size, var(--text-base));
    color: var(--text-primary);
    font-weight: var(--feed-card-author-weight, var(--font-bold));
}

.feed-card__separator {
    color: var(--text-muted);
    font-size: var(--text-xs, 12px);
}

.feed-card__channel-name {
    display: inline;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--color-black);
    background: var(--highlight-yellow);
    padding: 0 var(--space-1);
    vertical-align: baseline;
}

/* Line 2: Username (Value) · Time */
.feed-card__byline {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
}

.feed-card__author-name {
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: var(--font-medium);
}

.feed-card__author-name:hover {
    color: var(--accent-primary, var(--accent));
    text-decoration: underline;
}

.feed-card__value-tag {
    font-size: var(--text-xs, 10px);
    color: var(--text-muted);
    font-weight: var(--font-medium, 500);
    letter-spacing: .02em;
}

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

.feed-card__time {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* Card type tag (top right) — small mono label like "msg", "drop", "intro".
   Rendered as a proper boxed badge using design-system tokens so the label
   reads as a deliberate marker rather than floating text. */
.feed-card__type-tag {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--text-secondary);
    text-transform: lowercase;
    letter-spacing: 0.04em;
    line-height: 1;
    align-self: flex-start;
    padding: var(--space-1) var(--space-2);
    background: var(--surface-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

/* Three-dot menu — sits next to type tag in top right.
   meta has flex:1 so it consumes free space and naturally pushes
   type-tag + menu-wrap to the right. Type-tag also has margin-left:auto
   as a fallback when meta isn't present. */
.feed-card__menu-wrap {
    position: relative;
    flex-shrink: 0;
}

.feed-card__menu-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    transition: all var(--duration-fast);
}

.feed-card__menu-btn:hover {
    color: var(--text-primary);
    background: var(--interactive-hover);
}

.feed-card__menu-btn i {
    width: var(--size-5);
    height: var(--size-5);
}

.feed-card__dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: var(--space-1);
    background: var(--surface-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: var(--space-1);
    min-width: 180px;
    z-index: var(--z-dropdown);
    box-shadow: var(--shadow-xl);
}

.feed-card__dropdown.open {
    display: block;
}

.feed-card__dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all var(--duration-fast);
    white-space: nowrap;
}

.feed-card__dropdown-item:hover {
    background: var(--interactive-hover);
    color: var(--text-primary);
}

.feed-card__dropdown-item i {
    width: var(--size-4);
    height: var(--size-4);
    flex-shrink: 0;
}

.feed-card__dropdown-item--report {
    color: var(--status-error);
}
.feed-card__dropdown-item--report:hover {
    background: rgba(239, 68, 68, 0.1);
    color: var(--status-error);
}

/* Pinned badge */
.feed-card__pinned-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--accent-primary);
    background: var(--accent-primary-subtle);
    border: 1px solid var(--accent-primary-subtle);
    border-radius: var(--radius-full);
    padding: 2px var(--space-2);
    margin-bottom: var(--space-2);
}
.feed-card__pinned-icon {
    width: var(--space-3);
    height: var(--space-3);
    flex-shrink: 0;
}

/* App embed card */
.feed-card__app-embed {
    display: flex;
    align-items: center;
    gap: var(--space-3, 10px);
    padding: var(--space-3, 10px) var(--space-3, 12px);
    background: var(--surface-secondary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md, 24px);
    margin-bottom: var(--space-3);
    cursor: pointer;
    transition: background 0.15s;
}
.feed-card__app-embed:hover {
    background: var(--surface-tertiary);
}
.feed-card__app-embed-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md, 24px);
    object-fit: cover;
    flex-shrink: 0;
}
.feed-card__app-embed-icon--fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-tertiary);
}
.feed-card__app-embed-glyph {
    width: var(--size-5);
    height: var(--size-5);
    color: var(--highlight-purple);
}
.feed-card__app-embed-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.feed-card__app-embed-name {
    font-size: var(--feed-card-channel-size);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}
.feed-card__app-embed-desc {
    font-size: var(--text-xs);
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Floating admin menu for drop posts */
.feed-card__drop-admin-menu {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
}

/* Drop post — remove feed-card padding so card fills edge-to-edge */
.feed-card:has(.feed-card__drop-embed) {
    padding: 0;
    overflow: hidden;
    overflow: clip;
}
.feed-card:has(.feed-card__drop-embed) .feed-card__actions {
    padding: 0 16px 12px;
}

/* Drop embed card — premium featured layout */
.feed-card__drop-embed {
    cursor: pointer;
}
.feed-card__drop-embed-hero {
    position: relative;
    height: 180px;
    overflow: hidden;
}
/* Ticket #3958: daily prompt embed overrides live in tokenized CSS. */
.feed-card__drop-embed-hero--daily-prompt {
    height: calc((var(--space-16) * 3) + var(--space-5) + var(--space-2));
}
.feed-card__drop-embed-hero img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.feed-card__drop-embed-hero-fade {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 40%, var(--gallery-canvas) 100%);
}
.feed-card__drop-embed-hero-prompt {
    font-family: var(--font-serif);
}
.feed-card__drop-embed-badge {
    position: absolute;
    bottom: var(--space-3);
    right: var(--space-3);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-card);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    backdrop-filter: blur(var(--space-2));
    z-index: var(--z-rail);
}
.feed-card__drop-embed-badge--free {
    background: var(--accent-primary-subtle);
    color: var(--accent-primary);
    border: 1px solid var(--accent-primary-subtle);
}
.feed-card__drop-embed-badge--usd {
    background: var(--accent-tertiary-subtle);
    color: var(--color-purple-300, var(--border-strong));
    border: 1px solid var(--accent-tertiary-subtle);
}
.feed-card__drop-embed-badge--coiny {
    background: var(--status-success-subtle);
    color: var(--color-green-400, var(--color-green-400));
    border: 1px solid var(--status-success-subtle);
}
.feed-card__drop-embed-body {
    padding: var(--space-3) var(--space-4);
}
.feed-card__drop-embed-info {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    margin-bottom: var(--space-2);
}
.feed-card__drop-embed-icon {
    width: var(--space-10);
    height: var(--space-10);
    border-radius: var(--radius-md);
    object-fit: cover;
    flex-shrink: 0;
}
.feed-card__drop-embed-icon-fallback {
    width: var(--space-10);
    height: var(--space-10);
    border-radius: var(--radius-md);
    background: var(--accent-secondary-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--accent-primary);
}
.feed-card__drop-embed-text-wrap {
    flex: 1;
    min-width: 0;
}
.feed-card__drop-embed-name {
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin-bottom: 2px;
}
.feed-card__drop-embed-desc {
    font-size: var(--feed-card-channel-size);
    color: var(--text-secondary);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.feed-card__drop-embed-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
}
.feed-card__drop-embed-content {
    font-size: var(--text-sm);
    color: var(--text-primary);
    line-height: 1.4;
    flex: 1;
    min-width: 0;
}
.feed-card__drop-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 20px;
    font-size: var(--feed-card-channel-size);
    font-weight: var(--font-bold);
    border-radius: var(--radius-card);
    border: none;
    cursor: pointer;
    transition: opacity 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
}
.feed-card__drop-cta:hover { opacity: 0.85; }
.feed-card__drop-cta--free {
    background: var(--accent-primary);
    color: var(--color-black);
}
.feed-card__drop-cta--usd {
    background: linear-gradient(135deg, var(--color-purple-500), var(--accent-tertiary));
    color: var(--text-inverse);
}
.feed-card__drop-cta--coiny {
    background: rgba(34,197,94,0.12);
    color: var(--color-green-400);
    border: 1px solid rgba(34,197,94,0.2);
}
.feed-card__drop-cta--publish {
    background: var(--color-green-400);
    color: var(--color-black);
}

/* Post image — "long first": respect intrinsic aspect, cap height */
.feed-card__image {
    margin-bottom: var(--space-3);
    border-radius: var(--radius-md, 24px);
    overflow: hidden;
}

.feed-card__image-img {
    width: 100%;
    display: block;
    object-fit: cover;
    max-height: var(--feed-card-tall-max, 600px);
}

/* Landscape images use shorter cap */
.feed-card__image-img.--landscape {
    max-height: var(--feed-card-image-height, 400px);
}

/* Link preview card */
.feed-card__link-preview {
    display: block;
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md, 24px);
    overflow: hidden;
    margin-bottom: var(--space-3);
    transition: border-color var(--duration-fast);
}

.feed-card__link-preview:hover {
    border-color: var(--border-strong);
}

.feed-card__link-img {
    width: 100%;
    aspect-ratio: 2 / 1;
    display: block;
    object-fit: cover;
    max-height: 300px;
}

.feed-card__link-info {
    padding: var(--space-3) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.feed-card__link-title {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.feed-card__link-domain {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.feed-card [class*="__ident"][class*="--avatar"] {
    width: var(--size-5, 20px);
    height: var(--size-5, 20px);
    border-radius: var(--radius-full, 9999px);
    overflow: hidden;
    background: var(--surface-secondary, #f1f5f9);
    border: 1px solid rgba(255, 255, 255, 0.72);
    flex: 0 0 var(--size-5, 20px);
}

.feed-card [class*="__ident"][class*="--avatar"] img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: inherit;
}

/* Post content */
.feed-card__content {
    color: var(--text-primary);
    font-size: var(--feed-card-body-size);
    line-height: var(--feed-card-body-leading);
    margin-bottom: var(--space-3);
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
    overflow: visible;
    max-width: 100%;
}

/* Constrain all media elements inside feed card content */
.feed-card__content img,
.feed-card__content canvas,
.feed-card__content svg,
.feed-card__content video,
.feed-card__content iframe {
    max-width: 100%;
    height: auto;
    display: block;
}

.feed-card__content pre,
.feed-card__content table {
    max-width: 100%;
    overflow-x: auto;
}

.feed-card__content--clamped {
    display: -webkit-box;
    -webkit-line-clamp: var(--feed-card-clamp-lines, 3);
    -webkit-box-orient: vertical;
    overflow: clip;
    white-space: normal;
}

.feed-card__show-more {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: var(--text-sm);
    cursor: pointer;
    padding: 0;
    margin-bottom: 4px;
}

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

.feed-card__show-more:hover {
    color: var(--text-secondary);
}

/* DS Full-bleed image card: hero image, gradient overlay, glass actions */
/* "Long first" — height adapts to content; portrait media stretches taller */
.feed-card--has-image {
    padding: 0;
    overflow: hidden;
    overflow: clip;
    position: relative;
    min-height: var(--feed-card-image-min-height, 280px);
    max-height: var(--feed-card-tall-max, 600px);
    height: var(--feed-card-image-height, 400px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* Portrait hero cards stretch to tall max */
.feed-card--has-image.--portrait {
    height: var(--feed-card-tall-max, 600px);
}
.feed-card--has-image .feed-card__image-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.feed-card--has-image .feed-card__image-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.feed-card--has-image .feed-card__image-gradient {
    position: absolute;
    inset: 0;
    background: var(--feed-card-image-gradient);
    z-index: 1;
    pointer-events: none;
}
.feed-card--has-image .feed-card__image-body {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding: var(--space-6);
    box-sizing: border-box;
}
/* Header overlay on image — push to top, everything else falls to bottom */
.feed-card--has-image .feed-card__header {
    margin-bottom: auto;
}
.feed-card--has-image .feed-card__avatar {
    border: 2px solid var(--border-subtle);
}
.feed-card--has-image .feed-card__author-line,
.feed-card--has-image .feed-card__author-link {
    color: var(--text-inverse);
    text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.feed-card--has-image .feed-card__channel-line,
.feed-card--has-image .feed-card__channel-link,
.feed-card--has-image .feed-card__time {
    color: rgba(255,255,255,0.9);
    text-shadow: 0 2px 4px rgba(0,0,0,0.4);
}
.feed-card--has-image .feed-card__channel-name {
    text-shadow: none;
}
.feed-card--has-image .feed-card__value-tag {
    color: rgba(255,255,255,0.7);
}
.feed-card--has-image .feed-card__menu-btn {
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.feed-card--has-image .feed-card__pinned-badge {
    color: rgba(255,255,255,0.9);
    text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
/* Content on image */
.feed-card--has-image .feed-card__content {
    color: var(--text-inverse);
    text-shadow: 0 1px 4px rgba(0,0,0,0.3);
    margin-bottom: var(--space-2);
}
.feed-card--has-image .feed-card__content--short {
    font-size: var(--feed-card-image-title-size);
    font-weight: var(--feed-card-image-title-weight);
    font-family: var(--font-heading);
    letter-spacing: var(--feed-card-grand-tracking);
    text-shadow: 0 2px 12px rgba(0,0,0,0.6);
    line-height: 1.3;
}
.feed-card--has-image .feed-card__show-more {
    color: rgba(255,255,255,0.8);
    text-shadow: 0 1px 4px rgba(0,0,0,0.3);
    margin-bottom: var(--space-4);
}
/* Glass action pills on image */
.feed-card--has-image .feed-card__actions {
    padding: 0;
}
.feed-card--has-image .feed-card__vote-cluster {
    background: var(--feed-card-glass-bg);
    backdrop-filter: blur(16px);
}
/* Split pill on image cards — active side goes green */
.feed-card--has-image .feed-card__action--upvote.active,
.feed-card--has-image .feed-card__action--downvote.active {
    background: var(--vote-active-bg);
    color: var(--vote-active-color);
    backdrop-filter: none;
    border-radius: var(--feed-card-action-radius);
    outline: 3px solid var(--vote-active-bg);
    position: relative;
    z-index: 1;
}
.feed-card--has-image .feed-card__action {
    color: var(--text-inverse);
}
.feed-card--has-image .feed-card__action--pill {
    background: var(--feed-card-glass-bg);
    border-color: var(--feed-card-glass-border);
    backdrop-filter: blur(16px);
    color: var(--text-inverse);
}
.feed-card--has-image .feed-card__action--share {
    background: var(--feed-card-glass-bg);
    border-color: var(--feed-card-glass-border);
    backdrop-filter: blur(16px);
    color: var(--text-inverse);
}
/* Image card hover: green bg + black text (brand standard) */
.feed-card--has-image .feed-card__action:hover {
    color: var(--color-black);
}
.feed-card--has-image .feed-card__action--pill:hover,
.feed-card--has-image .feed-card__action--share:hover {
    background: var(--accent-primary);
    color: var(--color-black);
    border-color: var(--accent-primary);
}
/* vote-divider hidden globally — no image override needed */
/* Legacy image classes (kept for non-hero image display) */
.feed-card__image {
    margin: 0 calc(-1 * var(--space-8, 32px));
    margin-bottom: var(--space-4);
    overflow: hidden;
}
.feed-card__image-img {
    width: 100%;
    max-height: var(--feed-card-image-height, 400px);
    object-fit: cover;
    display: block;
}

/* Short text content (no image, <100 chars) */
.feed-card__content--short {
    font-family: var(--font-heading);
    font-size: var(--feed-card-grand-size, var(--text-3xl, 30px));
    font-weight: var(--feed-card-grand-weight, var(--font-semibold));
    letter-spacing: var(--feed-card-grand-tracking, -0.02em);
    line-height: 1.35;
}

/* DS Action bar — pill-bordered clusters */
.feed-card__actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* Vote cluster: pill-bordered group — ghost style */
.feed-card__vote-cluster {
    display: flex;
    align-items: center;
    background: var(--btn-ghost-bg);
    border: 1px solid var(--border-default);
    border-radius: var(--feed-card-action-radius);
    overflow: hidden;
    color: var(--btn-ghost-color);
    height: 36px;
    box-sizing: border-box;
    transition: background var(--duration-fast), color var(--duration-fast);
}
.feed-card__vote-cluster:hover {
    background: var(--btn-ghost-bg-hover);
    color: var(--btn-ghost-color-hover);
}

/* Divider between up/down — hidden (space reserved by button gap) */
.feed-card__vote-divider {
    display: none;
}

.feed-card__action {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: var(--feed-card-action-padding);
    background: transparent;
    font-size: var(--feed-card-action-size);
    font-weight: var(--feed-card-action-weight);
    color: inherit;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: color var(--duration-fast), background var(--duration-fast);
}

.feed-card__action:hover {
    color: var(--btn-ghost-color-hover);
}

.feed-card__action i, .feed-card__action svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Standalone pill action (comment) — ghost style */
.feed-card__action--pill {
    background: var(--btn-ghost-bg);
    color: var(--btn-ghost-color);
    border: 1px solid var(--border-default);
    border-radius: var(--feed-card-action-radius);
    height: 36px;
    align-items: center;
    box-sizing: border-box;
    transition: background var(--duration-fast), color var(--duration-fast);
}
.feed-card__action--pill:hover {
    background: var(--btn-ghost-bg-hover);
    color: var(--btn-ghost-color-hover);
}

/* Upvote — split pill: only this side turns green when active */
.feed-card__action--upvote.active {
    background: var(--vote-active-bg);
    color: var(--vote-active-color);
    border-radius: var(--feed-card-action-radius);
    outline: 3px solid var(--vote-active-bg);
    position: relative;
    z-index: 1;
}

/* Downvote — split pill: only this side turns green when active */
.feed-card__action--downvote.active {
    background: var(--vote-active-bg);
    color: var(--vote-active-color);
    border-radius: var(--feed-card-action-radius);
    outline: 3px solid var(--vote-active-bg);
    position: relative;
    z-index: 1;
}

/* Share — pushed right, ghost style */
.feed-card__action--share {
    margin-left: auto;
    background: var(--btn-ghost-bg);
    color: var(--btn-ghost-color);
    border: 1px solid var(--border-default);
    border-radius: var(--feed-card-action-radius);
    height: 36px;
    align-items: center;
    box-sizing: border-box;
    transition: background var(--duration-fast), color var(--duration-fast);
}
.feed-card__action--share:hover {
    background: var(--btn-ghost-bg-hover);
    color: var(--btn-ghost-color-hover);
}

/* Vote score inside feed-card actions — inherit action styling */
.feed-card__vote-score,
.feed-card__actions .vote-score {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

/* Reply (inline threaded comment) */
.feed-card__reply {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    background: var(--surface-secondary);
    border-radius: var(--radius-md);
    margin-top: 8px;
}
.feed-card__reply-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 1px;
}
.feed-card__reply-name {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}
.feed-card__reply-text {
    font-size: var(--feed-card-channel-size);
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Comment form */
.feed-card__comment-form {
    display: flex;
    gap: 6px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--border-default);
}

.feed-card__comment-form.hidden {
    display: none;
}

.feed-card__comment-input {
    flex: 1;
    background: var(--surface-secondary);
    border: 1px solid var(--border-default);
    color: var(--text-primary);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-base);
    outline: none;
}
.feed-card__comment-input:focus {
    border-color: var(--accent-primary);
}

.feed-card__comment-btn {
    background: var(--accent-primary);
    border: none;
    color: var(--surface-app);
    width: var(--size-8);
    height: var(--size-8);
    border-radius: var(--radius-full);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feed-card__comment-btn i {
    width: 0.875rem;
    height: 0.875rem;
}

/* Legacy engagement row (kept for backward compat with _cards.html macro) */
.feed-card__engagement {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--border-default);
}

.feed-card__engagement-btn {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: var(--text-sm);
    cursor: pointer;
    padding: var(--space-1);
    border-radius: var(--radius-sm);
    transition: all var(--duration-fast);
}

.feed-card__engagement-btn:hover {
    color: var(--accent-primary);
    background: var(--interactive-hover);
}

.feed-card__engagement-btn svg {
    width: 16px;
    height: 16px;
}

/* =============================================================================
   CARD GRID LAYOUTS
   ============================================================================= */

/* Default card grid (quest, service, shop) */
.card-grid-v2 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-4);
}

/* Pack card grid (portrait orientation, smaller) */
.pack-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--space-4);
}

/* Shop card grid */
.shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-4);
}

/* Feed cards stack vertically */
.feed-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* =============================================================================
   RESPONSIVE
   ============================================================================= */
@media (max-width: 767px) {
    .card-grid-v2 {
        grid-template-columns: 1fr;
    }

    .pack-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: var(--space-3);
    }

    .shop-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-3);
    }

    .shop-card-v2__image {
        height: 100px;
    }

    /* Quest card V2 responsive: full-width on mobile */
    .quest-card-v2 {
        width: 100%;
        max-width: 100%;
    }
}

/* =============================================================================
   LUMINA PACK CARDS (for Houses to buy Lumina)
   ============================================================================= */
.lumina-pack-card {
    background: linear-gradient(145deg, var(--surface-secondary), var(--surface-primary));
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    text-align: center;
    transition: transform var(--duration-normal), box-shadow var(--duration-normal);
}

.lumina-pack-card:hover {
    transform: none;
    box-shadow: 0 12px 32px rgba(0, 243, 255, 0.15);
    border-color: var(--accent-primary);
}

.lumina-pack-card__name {
    font-size: var(--text-base);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}

.lumina-pack-card__price {
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.lumina-pack-card__amount {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--accent-primary);
    margin-bottom: var(--space-1);
}

.lumina-pack-card__bonus {
    font-size: var(--text-xs);
    color: var(--status-success);
    font-weight: var(--font-semibold);
    margin-bottom: var(--space-3);
}

.lumina-pack-card__buy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-4);
    background: var(--accent-primary);
    color: var(--color-dark-900);
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    cursor: pointer;
    width: 100%;
    transition: all var(--duration-fast);
}

.lumina-pack-card__buy-btn:hover {
    filter: brightness(1.1);
}


/* ========== EVOLVE FEED CARD ========== */

.feed-card--evolve {
    display: block;
    border: 1px solid var(--border-default);
    cursor: pointer;
    overflow: hidden;
    transition: transform var(--duration-fast);
    box-shadow: none;
    background: var(--surface-primary);
}

.feed-card--evolve:hover {
    transform: none;
    box-shadow: none;
}

/* Orange EVOLVE pill — top-left */
.feed-card__evolve-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    background: var(--color-orange-500, var(--color-orange-500));
    color: var(--text-inverse);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1;
}

/* Hero image area */
.evo-feed__hero {
    position: relative;
    width: 100%;
    height: 160px;
    overflow: hidden;
    border-radius: 6px 6px 0 0;
    margin: -6px -8px 8px -8px;
    width: calc(100% + 16px);
}

.evo-feed__hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.evo-feed__hero-fade {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
    background: linear-gradient(transparent, var(--surface-primary, var(--bg-card)));
}

/* Green reward badge — top-right of hero */
.evo-feed__reward-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    padding: 3px 10px;
    background: rgba(22, 163, 74, 0.9);
    color: var(--color-black);
    border-radius: var(--radius-card);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    line-height: 1;
    white-space: nowrap;
}

/* Inline reward badge for cards without hero */
.evo-feed__reward-row {
    padding: 4px 0 2px;
}

.evo-feed__reward-badge--inline {
    position: static;
    display: inline-block;
}

/* Info row: icon + title + description */
.evo-feed__info {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 2px 0;
}

.evo-feed__icon {
    flex-shrink: 0;
    width: var(--size-10);
    height: var(--size-10);
    border-radius: var(--radius-lg);
    background: rgba(249, 115, 22, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-orange-500, var(--color-orange-500));
}

.evo-feed__icon i {
    width: 20px;
    height: 20px;
}

.evo-feed__text {
    min-width: 0;
    flex: 1;
}

.evo-feed__name {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    line-height: 1.3;
}

.evo-feed__desc {
    font-size: var(--feed-card-channel-size);
    color: var(--text-secondary);
    line-height: 1.4;
    margin-top: 2px;
}

/* =============================================================================
   ZINE CARD — .zine-card
   Tall portrait magazine cover card with scrim-overlaid info strip.
   BEM: .zine-card, __cover-link, __cover, __scrim, __content, __brand,
        __title, __subtitle, __engagement, __staging-row
   ============================================================================= */

.zine-card {
    background: var(--surface-primary);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 28px;
    box-shadow: 0 22px 56px rgba(15, 23, 42, 0.18),
                0 2px 10px rgba(15, 23, 42, 0.08);
    overflow: hidden;
}

/* Cover area — the aspect-ratio container that holds both the cover link
   AND the ghost-overlay engagement bar. Engagement floats ON TOP of image
   so there's no separate white bar at the bottom of the card. */
.zine-card__cover-area {
    position: relative;
    aspect-ratio: 8 / 9;
    overflow: hidden;
    border-radius: inherit;
}

/* Cover link — fills the cover area absolutely (no longer the aspect host) */
.zine-card__cover-link {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
}

/* Cover image — fills the link, pinned top so masthead isn't cropped */
.zine-card__cover {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Scrim gradient — bottom ~55% for text + ghost-action legibility.
   Slightly stronger than before because the ghost-overlay action bar
   also sits on the image and needs a darker base for white icons. */
.zine-card__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.88) 0%,
        rgba(0, 0, 0, 0.56) 33%,
        rgba(0, 0, 0, 0.12) 63%,
        transparent 78%
    );
    pointer-events: none;
}

/* Content strip — sits at the bottom over the scrim */
.zine-card__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-5) var(--space-5) var(--space-6);
    z-index: 1;
}

/* When ghost-overlay engagement is present, lift the title/subtitle
   up so it doesn't collide with the action pills at the bottom. */
.zine-card__content--with-actions {
    padding-bottom: calc(var(--space-12) + var(--space-5));
}

/* Brand eyebrow */
.zine-card__brand {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.68);
    margin: 0;
    line-height: var(--leading-tight);
    text-transform: uppercase;
}

/* Article title */
.zine-card__title {
    font-family: var(--font-serif);
    font-size: var(--text-3xl);
    font-weight: var(--font-semibold);
    color: var(--text-inverse);
    margin: var(--space-1) 0 0;
    line-height: var(--leading-snug);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Article subtitle */
.zine-card__subtitle {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: rgba(255, 255, 255, 0.76);
    margin: var(--space-2) 0 0;
    line-height: var(--leading-normal);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Engagement row — ghost overlay floating on top of the cover image.
   No background, no border-top white bar. Action pills get the
   .ghost-overlay glass treatment via design-system.css. */
.zine-card__engagement {
    position: absolute;
    bottom: var(--space-5);
    left: var(--space-5);
    right: var(--space-5);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    z-index: 2;
    pointer-events: none;
}

/* Re-enable interaction on the actual buttons/links (parent disables
   pointer-events so clicks on empty space pass through to cover-link) */
.zine-card__engagement > * {
    pointer-events: auto;
}

.zine-card__engagement .feed-card__vote-cluster,
.zine-card__engagement .feed-card__action--pill,
.zine-card__engagement .feed-card__action--share {
    min-height: 44px;
    border-radius: var(--radius-full);
}

.zine-card__engagement .feed-card__action {
    font-size: var(--text-base);
    font-weight: var(--font-bold);
    padding: var(--space-2) var(--space-4);
}

@media (max-width: 480px) {
    .zine-card {
        border-radius: 22px;
    }

    .zine-card__content {
        padding: var(--space-4) var(--space-4) var(--space-5);
    }

    .zine-card__content--with-actions {
        padding-bottom: calc(var(--space-12) + var(--space-4));
    }

    .zine-card__brand {
        font-size: var(--text-xs);
    }

    .zine-card__title {
        font-size: var(--text-2xl);
    }

    .zine-card__subtitle {
        font-size: var(--text-sm);
    }

    .zine-card__engagement {
        left: var(--space-4);
        right: var(--space-4);
        bottom: var(--space-4);
        gap: var(--space-2);
    }

    .zine-card__engagement .feed-card__vote-cluster,
    .zine-card__engagement .feed-card__action--pill,
    .zine-card__engagement .feed-card__action--share {
        min-height: 38px;
    }

    .zine-card__engagement .feed-card__action {
        font-size: var(--text-sm);
        padding: var(--space-2) var(--space-3);
    }
}

/* Comment form sits below the cover area in normal flow */
.zine-card__comment-form {
    padding: var(--space-3) var(--space-4) var(--space-4);
}

/* Staging row */
.zine-card__staging-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--surface-secondary);
    border-top: 1px dashed var(--border-strong);
}

.zine-card__staging-info {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.zine-card__staging-avatar {
    width: var(--space-8);
    height: var(--space-8);
    border-radius: var(--radius-full);
    object-fit: cover;
    flex-shrink: 0;
}

.zine-card__staging-label {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

/* Staging modifier — dashed border */
.zine-card--staging {
    border-style: dashed;
    border-color: var(--border-strong);
}

/* ── Responsive ── */
@media (max-width: 480px) {
    .zine-card__title {
        font-size: var(--text-lg);
    }
    .zine-card__subtitle {
        font-size: var(--text-xs);
    }
}

/* =============================================================================
   CRUSH STAMP OVERLAY — I Have a Crush app
   Shows a crush stamp on image posts from the crush app in the feed
   ============================================================================= */
.feed-card__crush-stamp {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    width: 72px;
    height: 72px;
    pointer-events: none;
    z-index: 5;
    filter: drop-shadow(1px 2px 4px rgba(0, 0, 0, 0.3));
}

/* ================================================================
   Resource card — Shadow-surfaced YouTube / article / tool / book
   ================================================================ */
.resource-card {
    display: flex;
    flex-direction: column;
    background: var(--surface-primary);
    border-radius: var(--radius-card);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-default);
    transition: transform var(--duration-normal) var(--ease-default),
                box-shadow var(--duration-normal) var(--ease-default);
}

.resource-card:hover {
    transform: none;
    box-shadow: var(--shadow-lg);
}

.resource-card__hero {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--surface-tertiary);
    cursor: pointer;
}

.resource-card[data-kind="article"] .resource-card__hero,
.resource-card[data-kind="book"] .resource-card__hero,
.resource-card[data-kind="tool"] .resource-card__hero {
    cursor: default;
}

.resource-card__hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--duration-normal) var(--ease-default);
}

.resource-card__hero-img--fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: var(--text-5xl);
}

.resource-card__hero-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        transparent 55%,
        var(--surface-overlay) 100%
    );
    pointer-events: none;
}

.resource-card__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--avatar-xl);
    height: var(--avatar-xl);
    border-radius: var(--radius-full);
    border: none;
    background: var(--surface-primary);
    color: var(--accent-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-lg);
    transition: transform var(--duration-fast) var(--ease-default),
                background var(--duration-fast) var(--ease-default);
}

.resource-card__play iconify-icon {
    font-size: var(--text-3xl);
    margin-left: var(--space-1); /* optical centering of play glyph */
}

.resource-card__hero:hover .resource-card__play,
.resource-card__hero:focus-visible .resource-card__play {
    transform: translate(-50%, -50%) scale(1.08);
    background: var(--accent-primary);
    color: var(--accent-dark);
}

.resource-card__duration {
    position: absolute;
    bottom: var(--space-2);
    right: var(--space-2);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--surface-overlay);
    color: var(--surface-primary);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: -0.01em;
}

.resource-card__kind-badge {
    position: absolute;
    top: var(--space-2);
    left: var(--space-2);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    background: var(--surface-primary);
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.resource-card__kind-badge iconify-icon {
    font-size: var(--text-sm);
    color: var(--accent-tertiary);
}

.resource-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
}

.resource-card__why {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    background: var(--surface-secondary);
    border-left: 3px solid var(--accent-tertiary);
}

.resource-card__why-icon {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--accent-tertiary);
    font-size: var(--text-base);
}

.resource-card__why-text {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    line-height: 1.4;
    color: var(--text-secondary);
}

.resource-card__title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.resource-card__title-link {
    color: inherit;
    text-decoration: none;
}

.resource-card__title-link:hover {
    color: var(--accent-primary);
}

.resource-card__meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 20px;
}

.resource-card__source-avatar {
    width: 20px;
    height: 20px;
    border-radius: var(--radius-full);
    object-fit: cover;
    flex-shrink: 0;
}

.resource-card__source {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--text-muted);
    font-weight: 500;
}

.resource-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-1);
}

.resource-card__chip {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.resource-card__chip--value {
    background: var(--accent-primary);
    color: var(--accent-dark);
}

.resource-card__chip--interest {
    background: var(--surface-tertiary);
    color: var(--text-secondary);
}

/* Inline iframe swap — applied after user taps play */
.resource-card__hero.is-playing {
    cursor: default;
}

.resource-card__hero.is-playing .resource-card__hero-img,
.resource-card__hero.is-playing .resource-card__play,
.resource-card__hero.is-playing .resource-card__duration,
.resource-card__hero.is-playing .resource-card__hero-scrim {
    display: none;
}

.resource-card__iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* =============================================================================
   BOH luxury polish — shared card family
   Inspired by /sorting: paper surfaces, fine lines, soft depth, mono labels,
   and one restrained accent. Keep feed cards calm enough to live with daily.
   ============================================================================= */
:root {
    --boh-card-luxury-radius: 12px;
    --boh-card-luxury-border: color-mix(in srgb, var(--border-default) 88%, #ced0d4 12%);
    --boh-card-luxury-shadow: 0 1px 2px rgba(15, 19, 32, 0.12);
    --boh-card-luxury-shadow-hover: 0 2px 4px rgba(15, 19, 32, 0.14);
    --boh-card-luxury-sheen: transparent;
}

.feed-card:not(.feed-card--has-image):not(:has(.feed-card__drop-embed)),
.quest-card-v2,
.service-card-v2,
.resource-card,
.house-quest-card,
.lumina-pack-card {
    background: var(--surface-primary);
    border: 1px solid var(--boh-card-luxury-border);
    border-radius: var(--boh-card-luxury-radius);
    box-shadow: var(--boh-card-luxury-shadow);
}

.feed-card:not(.feed-card--has-image):not(.feed-card--lab-post):not(.feed-card--lab-cover):not(.feed-card--lab-app):not(.feed-card--lab-ticket):not(.feed-card--lab-quest):not(.feed-card--lab-zine):not(.feed-card--lab-store-item):not(:has(.feed-card__drop-embed)):hover,
.quest-card-v2:hover,
.service-card-v2:hover,
.resource-card:hover,
.house-quest-card:hover,
.lumina-pack-card:hover {
    border-color: var(--boh-card-luxury-border);
    box-shadow: var(--boh-card-luxury-shadow-hover);
}

.feed-card:not(.feed-card--has-image):not(.feed-card--lab-post):not(.feed-card--lab-cover):not(.feed-card--lab-app):not(.feed-card--lab-ticket):not(.feed-card--lab-quest):not(.feed-card--lab-zine):not(.feed-card--lab-store-item):not(:has(.feed-card__drop-embed)) {
    padding: var(--space-4);
}

.feed-card__header {
    padding-bottom: var(--space-1);
}

.feed-card__avatar,
.feed-card__avatar-badge {
    border-color: var(--surface-primary);
    box-shadow: 0 0 0 1px var(--border-subtle), 0 8px 18px -14px rgba(15, 19, 32, 0.55);
}

.feed-card__house-name,
.feed-card__author-link,
.feed-card__author-name,
.feed-card__creator-name {
    letter-spacing: 0;
}

.feed-card__channel-name,
.feed-card__type-tag {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.feed-card__channel-name {
    display: inline-flex;
    align-items: center;
    min-height: 18px;
    padding: 2px var(--space-2);
    color: var(--text-primary);
    background: color-mix(in srgb, var(--highlight-yellow) 78%, var(--surface-primary));
    border: 1px solid color-mix(in srgb, var(--highlight-yellow) 62%, var(--border-subtle));
    border-radius: 6px;
}

.feed-card__type-tag {
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--surface-secondary) 78%, transparent);
    border-color: var(--border-subtle);
    border-radius: 999px;
}

.feed-card__content {
    font-family: var(--font-body);
    color: var(--text-primary);
}

.feed-card__content--short {
    font-size: clamp(24px, 3.6vw, 34px);
    line-height: 1.16;
}

.feed-card__actions {
    margin-top: var(--space-3);
    padding-top: 6px;
    border-top: 1px solid color-mix(in srgb, var(--border-default) 82%, #ced0d4 18%);
    gap: 2px;
}

.feed-card__app-embed,
.feed-card__link-preview,
.feed-card__reply {
    border-color: var(--border-subtle);
    background:
        radial-gradient(ellipse 70% 46% at 20% 0%, rgba(99, 85, 235, 0.07), transparent 64%),
        var(--surface-secondary);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.feed-card__vote-cluster,
.feed-card__action--pill,
.feed-card__action--share {
    height: 40px;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: #65676b;
}

.feed-card__vote-cluster {
    min-width: 0;
    overflow: visible;
}

.feed-card__action {
    border-radius: 6px;
    justify-content: center;
}

.feed-card__action:hover,
.feed-card__action--pill:hover,
.feed-card__action--share:hover,
.feed-card__vote-cluster:hover {
    background: color-mix(in srgb, var(--surface-secondary) 72%, transparent);
    color: #050505;
}

.feed-card--has-image {
    border-radius: var(--boh-card-luxury-radius);
    border: 1px solid var(--boh-card-luxury-border);
    box-shadow: var(--boh-card-luxury-shadow);
}

.feed-card--has-image .feed-card__image-gradient {
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0.05) 34%, rgba(0, 0, 0, 0.84) 100%),
        radial-gradient(ellipse 76% 48% at 50% 0%, rgba(255, 255, 255, 0.14), transparent 62%);
}

.feed-card--has-image .feed-card__image-body {
    padding: var(--space-6);
}

.feed-card--has-image .feed-card__avatar {
    border-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
}

.feed-card--has-image .feed-card__type-tag,
.feed-card--has-image .feed-card__channel-name {
    color: rgba(255, 255, 255, 0.88);
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.feed-card--has-image .feed-card__vote-cluster,
.feed-card--has-image .feed-card__action--pill,
.feed-card--has-image .feed-card__action--share {
    min-height: 40px;
    background: transparent;
    border: 0;
    box-shadow: none;
    color: rgba(255, 255, 255, 0.9);
}

.quest-card-v2 {
    width: min(100%, 320px);
    overflow: hidden;
}

.quest-card-v2__body {
    padding: var(--space-5);
    gap: var(--space-3);
}

.quest-card-v2__creator {
    padding-bottom: var(--space-1);
}

.quest-card-v2__avatar {
    border-color: var(--surface-primary);
    box-shadow: 0 0 0 1px var(--border-subtle), 0 10px 20px -16px rgba(15, 19, 32, 0.56);
}

.quest-card-v2__creator-name,
.quest-card-v2__start-date,
.quest-card-v2__meta {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.quest-card-v2__title {
    font-size: var(--text-xl);
    line-height: 1.12;
    letter-spacing: 0;
}

.quest-card-v2__description {
    color: var(--text-secondary);
    line-height: 1.5;
}

.quest-card-v2__reward-pill {
    min-height: 28px;
    background: var(--surface-primary);
    border-color: var(--border-subtle);
    box-shadow: 0 1px 2px rgba(15, 19, 32, 0.04);
}

.quest-card-v2__hero-image {
    position: relative;
    overflow: hidden;
    border-top: 1px solid var(--border-subtle);
}

.quest-card-v2__hero-image::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 30%);
}

.quest-card-v2__hero-img {
    aspect-ratio: 16 / 10;
}

.service-card-v2 {
    border-radius: var(--boh-card-luxury-radius);
}

.service-card-v2__stripe {
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--service-house-color, var(--accent-primary)), transparent);
}

.service-card-v2__body {
    padding: var(--space-5);
}

.service-card-v2__icon {
    width: 44px;
    height: 44px;
    color: var(--service-house-color, var(--accent-tertiary));
    background: color-mix(in srgb, var(--service-house-color, var(--accent-tertiary)) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--service-house-color, var(--accent-tertiary)) 28%, var(--border-subtle));
    border-radius: var(--radius-full);
}

.service-card-v2__title {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 800;
    letter-spacing: 0;
}

.service-card-v2__type-badge,
.service-card-v2__status,
.service-card-v2__provider {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.service-card-v2__footer {
    background: color-mix(in srgb, var(--surface-secondary) 58%, transparent);
    border-top-color: var(--border-subtle);
}

.service-card-v2__action {
    border-radius: var(--radius-full);
    font-weight: 800;
}

.house-quest-card {
    border-width: 1px;
    background:
        radial-gradient(ellipse 80% 52% at 50% 0%, rgba(51, 230, 88, 0.12), transparent 64%),
        var(--surface-primary);
}

.resource-card {
    max-width: 440px;
}

.resource-card__hero {
    border-bottom: 1px solid var(--border-subtle);
}

.resource-card__hero-scrim {
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.02) 48%, rgba(0, 0, 0, 0.38) 100%);
}

.resource-card__play {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 18px 44px -18px rgba(0, 0, 0, 0.42);
}

.resource-card__kind-badge,
.resource-card__duration,
.resource-card__chip {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.resource-card__kind-badge {
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.58);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.resource-card__body {
    padding: var(--space-5);
    gap: var(--space-3);
}

.resource-card__why {
    background: color-mix(in srgb, var(--surface-secondary) 66%, transparent);
    border-left: 0;
    border: 1px solid var(--border-subtle);
}

.resource-card__title {
    font-size: var(--text-xl);
    line-height: 1.15;
    letter-spacing: 0;
}

@media (max-width: 767px) {
    .feed-card:not(.feed-card--has-image):not(:has(.feed-card__drop-embed)) {
        padding: var(--space-4);
        border-radius: 20px;
    }

    .feed-card--has-image {
        border-radius: 24px;
    }

    .feed-card--has-image .feed-card__image-body {
        padding: var(--space-4);
    }

    .quest-card-v2 {
        width: 100%;
    }
}

/* ============================================================================
   RESOURCE CARD — GHOST LAYOUT
   Cover image fills the entire card. Body content (why, title, source,
   chips) overlays at the bottom on a dark scrim with glass-pill chrome.
   Mirrors the zine-card "ghost overlay" pattern documented in the
   knowledge base: keeps full-bleed editorial cards looking like covers,
   not feed posts. Removes the visual seam between image and chrome.
   Add via class `resource-card--ghost`. The macro emits this by default.
   ============================================================================ */

.resource-card--ghost {
    display: block;
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-card);
    overflow: hidden;
    background: var(--accent-dark);
}

.resource-card--youtube.resource-card--ghost {
    max-width: 680px;
    aspect-ratio: 16 / 9;
}

.resource-card--youtube.resource-card--ghost .resource-card__body {
    padding: var(--space-4);
}

.resource-card--youtube.resource-card--ghost .resource-card__why-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Hero now fills the whole card instead of being a 16/9 strip */
.resource-card--ghost .resource-card__hero {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
}

/* Stronger bottom-up scrim — body content + glass pills need a dark base */
.resource-card--ghost .resource-card__hero-scrim {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.85) 0%,
        rgba(0, 0, 0, 0.55) 30%,
        rgba(0, 0, 0, 0.10) 60%,
        transparent 75%
    );
}

/* Lift the play button up so it doesn't collide with the body overlay */
.resource-card--ghost .resource-card__play {
    top: 38%;
}

/* Body becomes an absolute overlay at the bottom of the cover */
.resource-card--ghost .resource-card__body {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-4);
    z-index: 2;
    pointer-events: none;
    color: var(--text-inverse);
}

/* Re-enable interaction on the actual children (parent disables
   pointer-events so taps on empty space pass through to the play handler) */
.resource-card--ghost .resource-card__body > * {
    pointer-events: auto;
}

/* "Why" reason — translucent glass pill */
.resource-card--ghost .resource-card__why {
    background: var(--feed-card-glass-bg);
    border: 1px solid var(--feed-card-glass-border);
    border-left: 3px solid var(--accent-primary);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.resource-card--ghost .resource-card__why-icon {
    color: var(--accent-primary);
}

.resource-card--ghost .resource-card__why-text {
    color: var(--text-inverse);
}

/* Title — white serif over scrim */
.resource-card--ghost .resource-card__title,
.resource-card--ghost .resource-card__title-link {
    color: var(--text-inverse);
}

.resource-card--ghost .resource-card__title-link:hover {
    color: var(--accent-primary);
}

/* Source row — soft white */
.resource-card--ghost .resource-card__source {
    color: var(--text-inverse);
    opacity: 0.75;
}

/* Interest chip becomes a glass pill; value chip keeps its neon brand pop */
.resource-card--ghost .resource-card__chip--interest {
    background: var(--feed-card-glass-bg);
    border: 1px solid var(--feed-card-glass-border);
    color: var(--text-inverse);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* When iframe is playing, hide the body overlay so the video is unobstructed.
   The base rule already hides hero-img / play / duration / scrim. */
.resource-card--ghost .resource-card__hero.is-playing .resource-card__body {
    display: none;
}

@media (max-width: 480px) {
    .resource-card--youtube.resource-card--ghost .resource-card__body {
        padding: var(--space-3);
        gap: var(--space-2);
    }
}

/* ============================================================================
   QUEST NEXT-STEP CARD
   "Pick up where you left off" — surfaced above shop filters when the user
   has an active quest. Looks like a soft-tinted action card with a kicker,
   step title, progress bar, rewards, and a Resume CTA.
   Root: <a class="quest-next-step quest-next-step--{house_slug}">
   ============================================================================ */

.quest-next-step {
    display: block;
    text-decoration: none;
    color: inherit;
    background: linear-gradient(
        135deg,
        var(--surface-primary) 0%,
        var(--surface-secondary) 100%
    );
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--accent-primary);
    border-radius: var(--radius-card);
    padding: var(--space-5);
    box-shadow: var(--shadow-sm);
    transition: transform var(--duration-normal) var(--ease-default),
                box-shadow var(--duration-normal) var(--ease-default);
}

.quest-next-step:hover,
.quest-next-step:focus-visible {
    transform: none;
    box-shadow: var(--shadow-md);
    outline: none;
}

.quest-next-step__kicker {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.quest-next-step__kicker-icon {
    font-size: var(--text-base);
    color: var(--accent-tertiary);
    flex-shrink: 0;
}

.quest-next-step__kicker-label {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: var(--space-1);
    color: var(--text-muted);
}

.quest-next-step__kicker-counter {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    color: var(--text-secondary);
    background: var(--surface-tertiary);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
}

.quest-next-step__body {
    margin-bottom: var(--space-4);
}

.quest-next-step__quest-title {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--text-secondary);
    margin-bottom: var(--space-1);
}

.quest-next-step__step-title {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    line-height: 1.25;
    margin-bottom: var(--space-2);
}

.quest-next-step__step-blurb {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

.quest-next-step__progress {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.quest-next-step__progress-track {
    flex: 1;
    height: var(--space-2);
    background: var(--surface-tertiary);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.quest-next-step__progress-fill {
    height: 100%;
    background: linear-gradient(
        90deg,
        var(--accent-primary) 0%,
        var(--accent-tertiary) 100%
    );
    border-radius: var(--radius-full);
    transition: width var(--duration-normal) var(--ease-default);
    width: 0;
}

.quest-next-step__progress-fill[data-pct="10"]  { width: 10%; }
.quest-next-step__progress-fill[data-pct="20"]  { width: 20%; }
.quest-next-step__progress-fill[data-pct="25"]  { width: 25%; }
.quest-next-step__progress-fill[data-pct="30"]  { width: 30%; }
.quest-next-step__progress-fill[data-pct="40"]  { width: 40%; }
.quest-next-step__progress-fill[data-pct="50"]  { width: 50%; }
.quest-next-step__progress-fill[data-pct="60"]  { width: 60%; }
.quest-next-step__progress-fill[data-pct="66"]  { width: 66%; }
.quest-next-step__progress-fill[data-pct="70"]  { width: 70%; }
.quest-next-step__progress-fill[data-pct="75"]  { width: 75%; }
.quest-next-step__progress-fill[data-pct="80"]  { width: 80%; }
.quest-next-step__progress-fill[data-pct="90"]  { width: 90%; }
.quest-next-step__progress-fill[data-pct="100"] { width: 100%; }

.quest-next-step__progress-label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
    min-width: var(--space-10);
    text-align: right;
}

.quest-next-step__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

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

.quest-next-step__reward {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
}

.quest-next-step__reward--xp {
    background: var(--accent-tertiary);
    color: var(--surface-primary);
}

.quest-next-step__reward--coiny {
    background: var(--color-orange-500);
    color: var(--surface-primary);
}

.quest-next-step__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--surface-primary);
    background: var(--accent-dark);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    transition: background var(--duration-normal) var(--ease-default);
}

.quest-next-step:hover .quest-next-step__cta,
.quest-next-step:focus-visible .quest-next-step__cta {
    background: var(--accent-primary);
    color: var(--accent-dark);
}

/* === House Party quest card ===
   Square 8-step preview card. Light theme. Mock-only — no data wiring.
   Token-only: no hardcoded hex / px (outside 1px borders, calc literals already
   covered by tokens). 8-step list + footer pills fit in a 1:1 footprint.
   =========================================================================== */
/* ============================================================================
   HPQ CARD — House Party Quest Card (Chunk 6, six-state)
   Hero (cover/tags/title/stepper) + body (kicker/heading/content/footer).
   Light theme. Token-only. .hpq-card replaces the old square mock; the legacy
   .house-party-quest-card class is deprecated and unused.
   ============================================================================ */
.hpq-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: var(--text-primary);
    overflow: visible;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.hpq-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;
}

.hpq-card__maker,
.hpq-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;
}

.hpq-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;
}

.hpq-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(--highlight-purple);
    flex: 0 0 auto;
}

.hpq-card__kind {
    background: var(--highlight-purple);
    color: var(--text-inverse);
    text-transform: uppercase;
}

.hpq-card__surface {
    display: flex;
    flex-direction: column;
    background: var(--surface-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-drop);
    color: var(--text-primary);
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

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

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

/* ------- COVER ------- */
.hpq-card__cover {
    position: relative;
    isolation: isolate;
    min-height: 580px;
    padding: var(--space-4);
    background-color: var(--accent-dark);
    background-image: linear-gradient(135deg, #3d2618 0%, #6b3a1f 45%, #c25a18 100%);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--text-inverse);
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: var(--space-4);
}

.hpq-card__cover-overlay {
    /* Steven, 2026-06-23: middle of the cover artwork should NOT be
       overlaid so the colors pop. Scrim only at the top (kind chip) and
       the bottom (title + CTA). The horizontal scrim was darkening the
       left + right edges for no reason — removed. */
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg,
            rgba(0, 0, 0, 0.42) 0%,
            rgba(0, 0, 0, 0.12) 18%,
            rgba(0, 0, 0, 0)    34%,
            rgba(0, 0, 0, 0)    62%,
            rgba(0, 0, 0, 0.45) 84%,
            rgba(0, 0, 0, 0.78) 100%
        );
}

.hpq-card__cover-image,
.hpq-card__hero-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.hpq-card__cover-image {
    z-index: -2;
}

.hpq-card__cover-topline {
    display: flex;
    align-items: flex-start;
}

.hpq-card__cover-kind {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 8px 13px;
    border-radius: var(--radius-full);
    background: rgba(0, 0, 0, 0.58);
    border: 1px solid rgba(255, 255, 255, 0.24);
    color: var(--text-inverse);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
}

.hpq-card__cover-kind img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    display: block;
}

.hpq-card__cover-copy {
    align-self: end;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-width: 20rem;
}

.hpq-card__cover-title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--text-4xl);
    font-weight: var(--font-bold);
    letter-spacing: 0;
    line-height: 0.98;
    text-wrap: balance;
}

.hpq-card__cover-title span {
    background: transparent;
    color: var(--text-inverse);
    padding: 0;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    text-shadow: 0 3px 12px rgba(0, 0, 0, 0.38);
}

.hpq-card__cover-subtitle {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    line-height: var(--leading-snug);
    color: rgba(255, 255, 255, 0.88);
}

.hpq-card__cover-cta {
    width: 100%;
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0 var(--space-4);
    border: 1px solid var(--highlight-neon);
    border-radius: var(--radius-card);
    background: var(--highlight-neon);
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    letter-spacing: 0.04em;
    line-height: 1;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease;
}

.hpq-card__cover-cta:hover {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    transform: translateY(-1px);
}

.hpq-card__cover-cta-arrow {
    font-size: 18px;
    line-height: 1;
}

/* ------- HERO BAND ------- */
.hpq-card__hero {
    position: relative;
    padding: var(--space-4);
    background-color: var(--accent-dark);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Fallback warm gradient when no cover_url is supplied */
    background-image: linear-gradient(
        135deg,
        #3d2618 0%,
        #6b3a1f 35%,
        #9a4e1f 70%,
        #c25a18 100%
    );
    color: var(--text-inverse);
    min-height: 220px;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.hpq-card__hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.05) 0%,
        rgba(0, 0, 0, 0.45) 100%
    );
    pointer-events: none;
}

.hpq-card__hero-image {
    z-index: 0;
}

.hpq-card__hero > :not(.hpq-card__hero-image):not(.hpq-card__hero-overlay) {
    position: relative;
    z-index: 2;
}

.hpq-card__hero-tags {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.hpq-card__tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: var(--radius-full);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
}

.hpq-card__tag--quest {
    background: var(--highlight-yellow);
    color: var(--text-primary);
}

.hpq-card__tag--complete {
    background: var(--highlight-neon);
    color: var(--text-primary);
}

.hpq-card__tag--coiny {
    background: var(--highlight-neon);
    color: var(--text-primary);
}

.hpq-card__tag iconify-icon {
    font-size: 14px;
}

.hpq-card__hero-title-block {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* Hero title + subtitle use the design system marker-highlight pattern
   with existing surface/accent tokens. */
.hpq-card__hero-title {
    margin: 0;
    align-self: flex-start;
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: var(--text-inverse);
}

.hpq-card__hero-title .hpq-card__mark {
    background: var(--accent-tertiary);
    color: var(--text-inverse);
    padding: 0 0.25em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.hpq-card__hero-subtitle {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: var(--font-bold);
    line-height: 1.7;
    color: var(--text-inverse);
}

/* Subtitle uses the design-system marker pattern (see tokens.css:413).
   .hl-y handles yellow; this component class mirrors it with white. */
.hpq-card__hero-subtitle .hpq-card__mark {
    background: linear-gradient(
        transparent 8%,
        var(--surface-primary) 8% 92%,
        transparent 92%
    );
    color: var(--text-primary);
    padding: 0 0.3em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    margin-right: 0.35em;
}

/* Complete-state extras */
.hpq-card__hero-seal-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.hpq-card__hero-seal-icon {
    font-size: 28px;
    color: var(--highlight-yellow);
}

.hpq-card__hero-seal-text {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.hpq-card__hero-seal-kicker {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
}

.hpq-card__hero-seal-place {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text-inverse);
}

.hpq-card__hero-seal-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    background: var(--highlight-neon);
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ------- STEPPER -------
   32px circles with a hairline connecting line behind, matching the
   .qc-stepper pattern from quest_creator. Active/done use the quest purple
   outline instead of the older yellow/blue states. */
.hpq-card__stepper {
    list-style: none;
    margin: 0;
    padding: var(--space-3) var(--space-5);
    background: var(--surface-secondary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    max-width: 100%;
    min-width: 0;
    position: relative;
}

.hpq-card__step {
    flex: 0 0 auto;
}

.hpq-card__stepper::before {
    content: '';
    position: absolute;
    left: calc(var(--space-5) + 16px);
    right: calc(var(--space-5) + 16px);
    top: 50%;
    height: 2px;
    background: var(--border-default);
    transform: translateY(-1px);
    z-index: 0;
}

.hpq-card__step {
    position: relative;
    z-index: 1;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    line-height: 1;
    transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.06);
}

.hpq-card__step--inactive {
    background: var(--surface-primary);
    color: var(--accent-tertiary);
    border: 1px solid var(--border-default);
}

.hpq-card__step--active {
    background: var(--highlight-purple);
    color: var(--text-inverse);
    border: 2px solid var(--highlight-purple);
}

.hpq-card__step--done {
    background: var(--highlight-purple);
    color: var(--text-inverse);
    border: 2px solid var(--highlight-purple);
}

.hpq-card__step--done iconify-icon {
    font-size: 16px;
}

/* ------- BODY ------- */
.hpq-card__body {
    background: var(--accent-tertiary-subtle);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    flex: 1 1 auto;
}

.hpq-card__body-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-2);
}

.hpq-card__back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: none;
    padding: 0;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--text-secondary);
    cursor: pointer;
}

.hpq-card__back:hover {
    color: var(--text-primary);
}

.hpq-card__back-spacer {
    width: 1px;
    height: 1px;
}

.hpq-card__step-pill {
    justify-self: center;
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    background: var(--highlight-purple);
    border: 1px solid var(--highlight-purple);
    color: var(--text-inverse);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
}

.hpq-card__step-pill--complete {
    background: var(--highlight-purple);
    color: var(--text-inverse);
    border-color: var(--highlight-purple);
}

.hpq-card__heading {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    line-height: 1.15;
    letter-spacing: -0.005em;
}

.hpq-card__lede {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    color: var(--text-secondary);
}

.hpq-card__lede--step-one {
    font-size: var(--text-lg);
    line-height: var(--leading-snug);
    color: var(--text-primary);
}

.hpq-card__meta {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.hpq-card__meta--gate {
    color: var(--text-secondary);
}

.hpq-card__meta--free {
    color: var(--text-muted);
}

.hpq-card__meta--plain {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-secondary);
}

/* ------- STEP 1: input + suggestions ------- */
.hpq-card__inside-photo {
    margin: 0;
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-card);
    border: 1px solid var(--border-default);
    background: var(--accent-dark);
    aspect-ratio: 16 / 9;
    box-shadow: var(--shadow-card-soft, 0 1px 2px rgba(0,0,0,0.04));
}

.hpq-card__inside-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(17, 24, 39, 0.28) 0%, rgba(17, 24, 39, 0) 38%),
        linear-gradient(0deg, rgba(17, 24, 39, 0.44) 0%, rgba(17, 24, 39, 0) 42%);
    pointer-events: none;
}

.hpq-card__inside-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hpq-card__inside-photo--with-progress {
    min-height: 320px;
}

.hpq-card__photo-progress {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3);
    pointer-events: none;
}

.hpq-card__photo-top {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.hpq-card__photo-kicker {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 6px 12px;
    border-radius: var(--radius-full);
    background: rgba(17, 24, 39, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: var(--text-inverse);
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    letter-spacing: 0.02em;
    line-height: 1;
    box-shadow: 0 8px 22px rgba(17, 24, 39, 0.22);
}

.hpq-card__stepper--overlay {
    margin: 0;
    padding: 0;
    background: transparent;
}

.hpq-card__stepper--overlay::before {
    left: 16px;
    right: 16px;
    background: rgba(255, 255, 255, 0.46);
}

.hpq-card__stepper--overlay .hpq-card__step {
    box-shadow: 0 4px 12px rgba(17, 24, 39, 0.22);
}

.hpq-card__stepper--overlay .hpq-card__step--inactive {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(255, 255, 255, 0.92);
}

.hpq-card__step-title--overlay {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 8px 12px;
    border-radius: var(--radius-full);
    background: var(--highlight-purple);
    color: var(--text-inverse);
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    letter-spacing: 0;
    line-height: 1.1;
    box-shadow: 0 8px 22px rgba(17, 24, 39, 0.22);
    overflow-wrap: anywhere;
}

.hpq-card__field {
    position: relative;
    display: block;
    background: var(--surface-primary);
    border-radius: var(--radius-card);
    border: 1px solid var(--border-default);
    box-shadow: var(--shadow-card-soft, 0 1px 2px rgba(0,0,0,0.04));
}

.hpq-card__field--title {
    border-radius: var(--radius-input, 8px);
    box-shadow: none;
}

.hpq-card__input {
    width: 100%;
    padding: var(--space-3) calc(var(--space-3) + 28px) var(--space-3) var(--space-3);
    border: none;
    background: transparent;
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--text-primary);
    line-height: 1.3;
    outline: none;
    border-radius: var(--radius-card);
}

.hpq-card__field--title .hpq-card__input {
    border-radius: var(--radius-input, 8px);
}

.hpq-card__input:focus {
    box-shadow: 0 0 0 2px var(--accent-tertiary);
}

.hpq-card__field-icon {
    position: absolute;
    right: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: var(--text-muted);
}

.hpq-card__suggestions {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.hpq-card__suggestion {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: transparent;
    border-radius: var(--radius-card);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--text-primary);
    line-height: 1.3;
    cursor: pointer;
}

.hpq-card__suggestion:hover {
    background: var(--surface-primary);
}

.hpq-card__suggestion iconify-icon {
    font-size: 16px;
    color: var(--accent-tertiary);
    margin-top: 2px;
    flex-shrink: 0;
}

/* ------- STEP 2: shape grid ------- */
.hpq-card__shape-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
}

.hpq-card__shape {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: var(--space-3);
    background: var(--surface-primary);
    border: 2px solid var(--border-strong);
    border-radius: var(--radius-card);
    cursor: pointer;
    text-align: left;
    transition: border-color 120ms ease, background-color 120ms ease;
}

.hpq-card__shape:hover {
    border-color: var(--accent-tertiary);
}

.hpq-card__shape--selected {
    background: var(--text-primary);
    border-color: var(--text-primary);
    color: var(--text-inverse);
    box-shadow: none;
    padding-right: calc(var(--space-3) + 30px);
}

.hpq-card__selected-check {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    display: none;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: var(--radius-full);
    background: var(--highlight-neon);
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1;
    pointer-events: none;
}

.hpq-card__shape--selected .hpq-card__selected-check,
.hpq-card__scope-option--selected .hpq-card__selected-check {
    display: inline-flex;
}

.hpq-card__shape--selected .hpq-card__shape-icon,
.hpq-card__shape--selected .hpq-card__shape-name,
.hpq-card__shape--selected .hpq-card__shape-meta {
    color: var(--text-inverse);
}

.hpq-card__shape-icon {
    font-size: 22px;
    color: var(--accent-tertiary);
}

.hpq-card__shape-name {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    color: var(--text-primary);
}

.hpq-card__shape-meta {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    color: var(--text-secondary);
    line-height: 1.3;
}

.hpq-card__shape-default {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0;
    padding: var(--space-2);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    color: var(--text-muted);
    line-height: 1.4;
    background: transparent;
}

.hpq-card__shape-default iconify-icon {
    font-size: 14px;
    color: var(--text-primary);
    margin-top: 2px;
    flex-shrink: 0;
}

.hpq-card__scope-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.hpq-card__scope-label {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.hpq-card__scope-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
}

.hpq-card__scope-option {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    min-width: 0;
    padding: var(--space-3);
    border: 2px solid var(--border-strong);
    border-radius: var(--radius-card);
    background: var(--surface-primary);
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
    transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease;
}

.hpq-card__scope-option:hover {
    border-color: var(--accent-tertiary);
}

.hpq-card__scope-option--selected {
    background: var(--text-primary);
    border-color: var(--text-primary);
    color: var(--text-inverse);
    padding-right: calc(var(--space-3) + 30px);
}

.hpq-card__scope-icon {
    flex-shrink: 0;
    font-size: 20px;
    color: var(--accent-tertiary);
}

.hpq-card__scope-option--selected .hpq-card__scope-icon,
.hpq-card__scope-option--selected .hpq-card__scope-name,
.hpq-card__scope-option--selected .hpq-card__scope-meta {
    color: var(--text-inverse);
}

.hpq-card__scope-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.hpq-card__scope-name {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    line-height: 1.15;
}

.hpq-card__scope-meta {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    color: var(--text-secondary);
    line-height: 1.3;
    overflow-wrap: anywhere;
}

/* ------- STEP 3: install badge + picker rows ------- */
.hpq-card__install-badge {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--surface-primary);
    border: 1px solid var(--highlight-neon);
    border-radius: var(--radius-card);
}

.hpq-card__install-badge-left {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    flex: 1 1 auto;
    min-width: 0;
}

.hpq-card__install-badge-icon {
    font-size: 22px;
    color: var(--accent-tertiary);
    flex-shrink: 0;
}

.hpq-card__install-badge-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.hpq-card__install-badge-name {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    flex-wrap: wrap;
}

.hpq-card__install-badge-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: var(--radius-full);
    background: var(--highlight-neon);
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-size: 10px;
    font-weight: var(--font-bold);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.hpq-card__install-badge-meta {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    color: var(--text-secondary);
    line-height: 1.3;
}

.hpq-card__install-badge-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--accent-tertiary);
    text-decoration: none;
    flex-shrink: 0;
}

/* ------- STEP 2: FIND MEETUP SPOTS -------
   The Events app's location search embedded in the quest card, so the
   Spot & Time step can be completed without leaving the quest. */
.hpq-card__spot-finder {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
    padding: var(--space-3);
    background: var(--surface-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-card);
}

.hpq-card__spot-label {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.hpq-card__spot-copy {
    margin: 0;
    font-size: var(--text-sm);
    line-height: 1.4;
    color: var(--text-secondary);
}

.hpq-card__spot-search {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.hpq-card__spot-query {
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-full);
    background: var(--surface-secondary);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--text-primary);
}

.hpq-card__spot-button {
    flex: 0 0 auto;
}

.hpq-card__spot-status {
    margin: 0;
    font-size: var(--text-xs);
    line-height: 1.35;
    color: var(--text-muted);
}

.hpq-card__spot-status:empty {
    display: none;
}

.hpq-card__spot-status[data-spot-state="error"] {
    color: var(--text-primary);
}

.hpq-card__spot-results {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.hpq-card__spot-result {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    background: var(--surface-secondary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-card);
    text-align: left;
    cursor: pointer;
}

.hpq-card__spot-result:hover {
    border-color: var(--border-strong);
}

.hpq-card__spot-result-icon {
    font-size: 16px;
    color: var(--highlight-purple);
}

.hpq-card__spot-result-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.hpq-card__spot-result-copy strong {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    color: var(--text-primary);
}

.hpq-card__spot-result-copy span {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hpq-card__spot-result-check {
    font-size: 16px;
    color: var(--text-muted);
    opacity: 0;
}

.hpq-card__spot-result--selected {
    border-color: var(--highlight-purple);
    background: var(--surface-primary);
}

.hpq-card__spot-result--selected .hpq-card__spot-result-check {
    color: var(--highlight-purple);
    opacity: 1;
}

.hpq-card__picker-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.hpq-card__picker {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--surface-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-card);
    cursor: pointer;
}

.hpq-card__picker:hover {
    border-color: var(--accent-tertiary);
}

.hpq-card__picker-icon {
    font-size: 18px;
    color: var(--text-secondary);
}

.hpq-card__picker-label {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.hpq-card__picker-value {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    justify-self: end;
}

.hpq-card__picker-chevron {
    font-size: 16px;
    color: var(--text-muted);
}

.hpq-card__picker-input {
    justify-self: end;
    width: auto;
    max-width: 60%;
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-input);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--text-primary);
    background: var(--surface-card);
}

.hpq-card__picker-input:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    border-color: transparent;
}

/* Busy state blocks duplicate taps without dimming the whole card. */
.hpq-card--busy {
    pointer-events: none;
    cursor: progress;
}

.hpq-card--busy .hpq-card__surface {
    cursor: progress;
}

/* ------- STEP 4: send + counters + invite list ------- */
.hpq-card__send-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: none;
    border-radius: var(--radius-card);
    background: var(--accent-dark);
    color: var(--text-inverse);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    letter-spacing: 0.02em;
    cursor: pointer;
}

.hpq-card__send-button:hover {
    background: var(--text-primary);
}

.hpq-card__send-button iconify-icon {
    font-size: 18px;
}

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

.hpq-card__counter {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: var(--space-3) var(--space-2);
    background: var(--surface-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-card);
}

.hpq-card__counter--highlight {
    background: var(--accent-tertiary);
    color: var(--text-inverse);
    border-color: var(--accent-tertiary);
}

.hpq-card__counter-label {
    font-family: var(--font-heading);
    font-size: 10px;
    font-weight: var(--font-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.hpq-card__counter--highlight .hpq-card__counter-label {
    color: rgba(255, 255, 255, 0.85);
}

.hpq-card__counter-value {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    line-height: 1;
}

.hpq-card__counter--highlight .hpq-card__counter-value {
    color: var(--text-inverse);
}

.hpq-card__invite-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.hpq-card__invite {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto auto;
    column-gap: var(--space-2);
    row-gap: 2px;
    align-items: center;
    padding: var(--space-2) var(--space-3);
    background: var(--surface-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-card);
    transition: background-color 0.4s ease, border-color 0.4s ease;
}
.hpq-card__invite--flash {
    background: var(--highlight-neon, var(--surface-secondary));
    border-color: var(--accent-primary, var(--border-default));
}
.hpq-card__invite--empty {
    grid-template-rows: auto;
}

.hpq-card__invite-id {
    grid-row: 1 / span 2;
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    color: var(--text-muted);
}

.hpq-card__invite-slug {
    font-family: var(--font-mono, monospace);
    font-size: var(--text-sm);
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hpq-card__invite-meta {
    grid-column: 2;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    color: var(--text-muted);
    line-height: 1.3;
}

.hpq-card__invite-status {
    grid-row: 1 / span 2;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: var(--radius-full);
    font-family: var(--font-heading);
    font-size: 10px;
    font-weight: var(--font-bold);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.hpq-card__invite-status--signed {
    background: var(--highlight-neon);
    color: var(--text-primary);
}

.hpq-card__invite-status--opened {
    background: var(--surface-secondary);
    color: var(--text-secondary);
}

.hpq-card__invite-status iconify-icon {
    font-size: 12px;
}

/* ------- STEP 4: per-row action buttons (Share / Text it / Copy) ------- */
.hpq-card__invite-actions {
    grid-column: 1 / -1;
    grid-row: 3;
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px dashed var(--border-soft);
}
.hpq-card__invite-action {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 8px;
    background: var(--surface-secondary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-pill, var(--radius-full));
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.hpq-card__invite-action:hover {
    background: var(--surface-tertiary, var(--surface-primary));
    border-color: var(--accent-primary, var(--border-default));
}
.hpq-card__invite-action:active {
    transform: scale(0.97);
}
.hpq-card__invite-action iconify-icon {
    font-size: 14px;
}

.hpq-card__copy-proxy {
    position: fixed;
    top: var(--space-0);
    left: var(--space-0);
    width: var(--space-1);
    height: var(--space-1);
    opacity: 0;
    pointer-events: none;
}

@media (max-width: 380px) {
    .hpq-card__invite-action span {
        display: none;
    }
    .hpq-card__invite-action {
        padding: 8px;
    }
    .hpq-card__invite-action iconify-icon {
        font-size: 16px;
    }
}

/* ------- STEP 4: send-row (primary + ghost bulk) ------- */
.hpq-card__send-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.hpq-card__send-row .hpq-card__send-button {
    flex: 1 1 auto;
}
.hpq-card__send-button--ghost {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-default);
}
.hpq-card__send-button--ghost:hover {
    background: var(--surface-secondary);
    border-color: var(--accent-primary, var(--border-default));
}

/* ------- STEP 5: summary + receipt-strip + founder callout + share ------- */
.hpq-card__summary {
    margin: 0;
    padding: var(--space-3);
    background: var(--surface-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-card);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.hpq-card__summary-row {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr;
    align-items: baseline;
    gap: var(--space-2);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--border-soft);
}

.hpq-card__summary-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.hpq-card__summary-row--toast {
    grid-template-columns: auto 1fr;
}

.hpq-card__summary-row--coming {
    grid-template-columns: auto 1fr;
}

.hpq-card__summary-row dt {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.hpq-card__summary-row dd {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--text-primary);
}

.hpq-card__summary-row--toast dd {
    font-family: var(--font-serif, var(--font-heading));
    font-style: italic;
    font-size: var(--text-base);
    color: var(--accent-tertiary);
}

.hpq-card__avatar-stack {
    display: inline-flex;
    margin-right: 6px;
    vertical-align: middle;
}

.hpq-card__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: var(--radius-full);
    background: var(--accent-tertiary);
    color: var(--text-inverse);
    font-family: var(--font-heading);
    font-size: 10px;
    font-weight: var(--font-bold);
    border: 2px solid var(--surface-primary);
    margin-left: -6px;
}

.hpq-card__avatar:first-child {
    margin-left: 0;
}

.hpq-card__receipt-strip {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    flex-wrap: wrap;
    padding: var(--space-2) var(--space-3);
    background: var(--surface-secondary);
    border-radius: var(--radius-card);
}

.hpq-card__receipt-strip-label {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.hpq-card__receipt-strip-value {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    color: var(--text-primary);
}

.hpq-card__receipt-strip-meta {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    color: var(--text-muted);
    flex-basis: 100%;
}

.hpq-card__founder-callout {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--highlight-yellow);
    border-radius: var(--radius-card);
}

.hpq-card__founder-callout-icon {
    font-size: 24px;
    color: var(--text-primary);
}

.hpq-card__founder-callout-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hpq-card__founder-callout-kicker {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.hpq-card__founder-callout-name {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    color: var(--text-primary);
}

.hpq-card__share-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    padding: 0;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
    cursor: pointer;
    align-self: flex-start;
}

.hpq-card__share-row:hover {
    color: var(--text-primary);
}

.hpq-card__share-row iconify-icon {
    font-size: 14px;
}

/* ------- COMPLETE: receipt + coming-next ------- */
.hpq-card__receipt {
    background: var(--surface-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-card);
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.hpq-card__receipt-header {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--border-soft);
}

.hpq-card__receipt-rows {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hpq-card__receipt-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
}

.hpq-card__receipt-row dt {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.hpq-card__receipt-row dd {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

.hpq-card__receipt-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--accent-tertiary);
    text-decoration: none;
    margin-top: var(--space-1);
}

.hpq-card__coming-next {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.hpq-card__coming-next-kicker {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.hpq-card__coming-next-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hpq-card__coming-next-list li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.hpq-card__coming-next-list iconify-icon {
    font-size: 16px;
    color: var(--accent-tertiary);
    flex-shrink: 0;
}

/* ------- FOOTER (continue / finish / dual) ------- */
.hpq-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: auto;
    padding-top: var(--space-2);
}

.hpq-card__footer-spacer {
    flex: 1 1 auto;
}

.hpq-card__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: var(--space-2) var(--space-4);
    border: 1px solid transparent;
    border-radius: var(--radius-full);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 120ms ease, color 120ms ease;
}

.hpq-card__btn iconify-icon {
    font-size: 16px;
}

.hpq-card__btn--primary {
    background: var(--highlight-neon);
    color: var(--text-primary);
    border-color: var(--highlight-neon);
}

.hpq-card__btn--primary:hover {
    background: var(--accent-primary);
    color: var(--text-primary);
    border-color: var(--accent-primary);
}

.hpq-card__btn--ghost {
    background: transparent;
    color: var(--text-secondary);
    border-color: var(--border-default);
}

.hpq-card__btn--ghost:hover {
    color: var(--text-primary);
    border-color: var(--border-strong);
}

.hpq-card__btn--quest-link {
    flex: 0 1 auto;
}

.hpq-card__btn--full {
    flex: 1 1 auto;
}

/* Accessibility: visually hidden text used inside completed-stepper cells */
.hpq-card .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 767px) {
    .hpq-card {
        min-width: 0;
        max-width: 100%;
    }

    .hpq-card__cover {
        min-height: 520px;
        padding: var(--space-3);
    }

    .hpq-card__cover-title {
        font-size: var(--text-3xl);
        max-width: 14rem;
    }

    .hpq-card__hero-title {
        overflow-wrap: anywhere;
    }

    .hpq-card__shape-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hpq-card__scope-options {
        grid-template-columns: 1fr;
    }

    .hpq-card__shape,
    .hpq-card__scope-option,
    .hpq-card__btn,
    .hpq-card__install-badge,
    .hpq-card__picker {
        min-width: 0;
    }

    .hpq-card__footer {
        align-items: stretch;
    }

    .hpq-card__btn--quest-link,
    .hpq-card__footer .hpq-card__btn--primary {
        flex: 1 1 0;
    }
}

@media (max-width: 380px) {
    .hpq-card__footer {
        flex-direction: column;
    }
}

/* pack-redesign widget — compact full-width calendar surface */
.ds-pack-calendar-widget{grid-column:1/-1;aspect-ratio:auto;width:100%;max-width:none;min-height:0;overflow:hidden;cursor:pointer;text-decoration:none;padding:var(--space-3);}
.ds-pack-calendar-widget__head{min-height:0;margin-bottom:var(--space-1);padding-bottom:var(--space-1);}
.ds-pack-calendar-widget__date strong,.ds-pack-calendar-widget__date span{font-size:var(--text-lg);}
.ds-pack-calendar-widget__rows{overflow:auto;gap:4px;max-height:190px;}
.ds-pack-calendar-widget__row{appearance:none;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--space-2);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);background:var(--surface-primary);font:inherit;color:inherit;text-align:left;cursor:pointer;width:100%;min-height:var(--size-10);padding:var(--space-2);box-shadow:var(--shadow-xs,0 1px 2px rgba(0,0,0,.05));}
.ds-pack-calendar-widget__row:hover{border-color:var(--border-strong);background:var(--interactive-hover);}
.ds-pack-calendar-widget__row strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-sm);color:var(--text-primary);}
.ds-pack-calendar-widget__row > span:last-child{font-size:var(--text-xs);font-weight:var(--font-semibold);color:var(--text-secondary);white-space:nowrap;}
.ds-pack-calendar-widget__kind{display:inline-flex;align-items:center;justify-content:center;min-width:46px;border-radius:var(--radius-xs);background:var(--color-yellow-400);color:var(--text-primary);font-size:var(--text-xs);font-weight:var(--font-bold);text-transform:uppercase;}
.ds-pack-calendar-widget__row--proposed{border:1px dashed var(--border-strong);background:var(--surface-card);}
.ds-pack-calendar-widget__row--confirmed{background:var(--surface-secondary);}
.ds-pack-calendar-widget__row--working{border-color:var(--slate);background:var(--slate);color:var(--text-inverse);}
.ds-pack-calendar-widget__row--working .ds-pack-calendar-widget__kind,
.ds-pack-calendar-widget__row--working span{color:var(--text-inverse);}
.ds-pack-calendar-widget__empty{color:var(--text-secondary);font-size:var(--text-sm);text-align:center;padding:var(--space-2);}
.ds-pack-calendar-widget__foot{display:flex;gap:var(--space-2);margin-top:var(--space-2);padding-top:var(--space-2);border-top:1px solid rgba(255,255,255,0.08);}
.ds-pack-calendar-widget__foot .ds-btn{flex:1;justify-content:center;font-size:var(--text-sm);}
.pack-planner-collapse{scroll-margin-top:136px;}
.pack-planner-collapse[hidden]{display:none;}

/* pack todo widget */
.ds-todo-widget{display:flex;flex-direction:column;gap:var(--space-3);width:100%;padding:var(--space-4);border-radius:16px;background:var(--surface-primary);border:1px solid var(--border-default);box-shadow:var(--shadow-1,0 1px 3px rgba(0,0,0,.08));}
.ds-todo-widget__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);}
.ds-todo-widget__badge{display:inline-flex;align-items:center;padding:4px 10px;border-radius:8px;background:var(--color-yellow-500,#f2e841);color:var(--text-primary);font-weight:var(--font-bold);font-size:var(--text-xs,.72rem);letter-spacing:.08em;font-family:var(--font-heading);}
.ds-todo-widget__progress{display:flex;align-items:center;gap:var(--space-2);}
.ds-todo-widget__bar{display:block;width:110px;height:8px;border:0;border-radius:var(--radius-full);background:var(--surface-tertiary,rgba(0,0,0,.08));overflow:hidden;appearance:none;}
.ds-todo-widget__bar::-webkit-progress-bar{background:var(--surface-tertiary,rgba(0,0,0,.08));border-radius:var(--radius-full);}
.ds-todo-widget__bar::-webkit-progress-value{background:var(--accent-primary);border-radius:var(--radius-full);transition:width .3s ease;}
.ds-todo-widget__bar::-moz-progress-bar{background:var(--accent-primary);border-radius:var(--radius-full);}
.ds-todo-widget__count{font-size:var(--text-sm);color:var(--text-secondary);font-weight:var(--font-bold);}
.ds-todo-widget__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-2);}
.ds-todo-widget__item{display:flex;align-items:center;gap:var(--space-3);}
.ds-todo-widget__title{flex:1;min-width:0;font-size:var(--text-base,1rem);font-weight:var(--font-bold);color:var(--text-primary);cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ds-todo-check{flex:none;width:26px;height:26px;border-radius:50%;border:2px solid var(--border-strong,var(--border-default));background:transparent;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:transparent;padding:0;}
.ds-todo-check:hover{border-color:var(--accent-primary);}
.ds-todo-check--done{background:var(--accent-primary);border-color:var(--accent-primary);color:var(--text-primary);}
.ds-todo-check--done iconify-icon{width:15px;height:15px;}
.ds-todo-widget__item--done .ds-todo-widget__title{text-decoration:line-through;color:var(--text-muted);}
.ds-todo-dot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--text-muted);}
.ds-todo-dot--urgent,.ds-todo-dot--high{background:var(--color-red-500);}
.ds-todo-dot--medium{background:var(--color-yellow-500,#f2e841);}
.ds-todo-dot--low,.ds-todo-dot--none{background:var(--text-muted);}
.ds-todo-widget__empty{color:var(--text-secondary);font-size:var(--text-sm);padding:var(--space-2) 0;}
.ds-todo-widget__add{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-radius:14px;background:var(--accent-primary);cursor:text;}
.ds-todo-widget__add-icon{color:var(--text-primary);width:20px;height:20px;flex:none;}
.ds-todo-widget__add-input{flex:1;min-width:0;border:0;background:transparent;color:var(--text-primary);font:inherit;font-weight:var(--font-bold);outline:none;}
.ds-todo-widget__add-input::placeholder{color:var(--text-primary);opacity:.8;}
.ds-todo-widget__add-btn{border:0;background:transparent;color:var(--text-primary);font-weight:var(--font-bold);cursor:pointer;}

/* 2026-07-04: creator-app feed card (cac-*) styles — moved from house-detail.css so the rollup feed page has them (old UI only rendered these inside house pages) */
.feed-creator-app-card--lab{background:transparent;border:0;box-shadow:none;padding:0;overflow:visible;margin:0;cursor:pointer}
.cac-wrap{position:relative}
.cac-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}
.cac-maker,.cac-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}
.cac-maker{padding-left:var(--space-1);background:var(--surface-primary);color:var(--text-primary);border:1px solid var(--border-strong)}
.cac-ident{width:calc(var(--size-4) - var(--space-1) / 4);height:calc(var(--size-4) - var(--space-1) / 4);border-radius:50%;background:var(--accent-primary);flex:0 0 auto}
.cac-kind{background:var(--accent-primary);color:var(--accent-dark);text-transform:uppercase}
.cac-kind--unpub{background:var(--color-yellow-400);color:var(--accent-dark)}
.cac-media{position:relative;display:block;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)}
.cac-media>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cac-imgactions{position:absolute;z-index:3;left:var(--space-3);right:var(--space-3);bottom:var(--space-3);display:flex;align-items:center;gap:calc(var(--space-2) - var(--space-1) / 4);margin:0;padding:0;border-top:0;color:var(--text-inverse)}
.cac-gpill{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 calc(var(--space-1) / 4) calc(var(--space-3) / 4) color-mix(in srgb,var(--color-black) 40%,transparent);cursor:pointer}
.cac-gpill svg{width:var(--size-4);height:var(--size-4);stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 calc(var(--space-1) / 4) calc(var(--space-1) / 2) color-mix(in srgb,var(--color-black) 40%,transparent))}
.cac-rightgrp{flex:0 0 auto}
.cac-rightgrp{margin-left:auto;display:flex;align-items:center;gap:calc(var(--space-2) - var(--space-1) / 4)}
.cac-cta{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 var(--space-4);border-radius:var(--radius-full);background:var(--accent-primary);color:var(--accent-dark);font-family:var(--font-mono);font-weight:var(--font-bold);font-size:var(--text-xs);text-decoration:none;cursor:pointer}
.cac-cta svg{width:calc(var(--size-4) - var(--space-1) / 4);height:calc(var(--size-4) - var(--space-1) / 4);fill:var(--accent-dark)}
.cac-below{padding:var(--space-3) var(--space-4) 0}
.cac-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}
.cac-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}
.cac-meta-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-top:var(--space-2)}
.cac-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)}
.cac-publish{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-weight:var(--font-bold);font-size:var(--text-xs);cursor:pointer;white-space:nowrap}