/**
 * Yusaso Teal shared content presentation.
 *
 * This stylesheet owns reusable content-card geometry. User-editable visual
 * values remain in css_catalog.css. Feature-specific artwork remains in each
 * feature's owning stylesheet.
 */

/* ==========================================================================
   Shared Widget and Persona Viewer Surface
   ========================================================================== */

:is(.public_widget, .widget_card) > :is(.public_widget_content, .widget_content) {
    background-color: var(--widget-content-background-color);
    background-image: none;
}

:is(.persona_popup_surface, .persona_popup_surface.persona_full_view_content) {
    background-color: var(--content-surface-background-color);
    background-image: var(--content-surface-background-image);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* ==========================================================================
   Feature Groups
   ========================================================================== */

.feature_wrapper {
    box-sizing: border-box;
    display: grid;
    width: 100%;
    min-width: 0;
    gap: 0.75rem;
    padding: 0.85rem 0.85rem calc(0.85rem + 5px);
    background: color-mix(in srgb, var(--feature-wrapper-background) 10%, transparent);
    border: var(--popup-border-width) solid var(--popup-border-color);
    border-radius: var(--popup-radius);
    box-shadow: var(--popup-shadow);
}

.feature_wrapper > h2 {
    min-width: 0;
    margin: 0 0 8px;
}

/* ==========================================================================
   Interior Feature Cards
   ========================================================================== */

.feature_card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    overflow: hidden;
    padding: 0.65rem 0.65rem calc(0.65rem + 10px);
    color: #f6fbfc;
    /*background: var(--interior-feature-card-background);
    border: 1px solid rgba(255, 255, 255, 0.0768);*/
    border-radius: 11px;
    text-align: center;
}

.feature_card h2 {
    margin: 0 0 8px;
}

.feature_card :is(h3, h4) {
    margin: 0.65rem 0 0.3rem;
    color: #fff;
    text-align: center;
}

.feature_card > p {
    margin: 0.2rem 0;
    color: #c7d7da;
    font-size: var(--font-sm);
    text-align: center;
}

/* RETIRED 2026-08-29: no renderer or script emits feature_card_visual.
.feature_card_visual {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    overflow: hidden;
}
*/

.feature_card_content {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    /*background: var(--feature-wrapper-background);*/
    border: 1px solid var(--interior-feature-card-content-border);
    text-align: left;
}

.feature_card_content p {
    padding-bottom: 1lh;
}

/* Shared compact catalog cards. Shop, onboarding, and discovery catalogs use
   one equal-height title/description/action structure. */
.catalog_mini_card_grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 1rem;
    width: 100%;
    min-width: 0;
}

.catalog_mini_card,
.catalog_mini_card_content {
    height: 100%;
    min-width: 0;
}

.catalog_mini_card {
    background: color-mix(in srgb, var(--feature-wrapper-background) 10%, transparent);
    border: var(--popup-border-width) solid var(--popup-border-color);
    border-radius: var(--popup-radius);
    box-shadow: var(--popup-shadow);
}

.catalog_mini_card_content {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 0.75rem;
    padding: 0.65rem;
}

.catalog_mini_card_details {
    display: grid;
    grid-template-rows: 3rem auto 5.25rem 1.25rem 1.25rem;
    align-content: start;
    gap: 0.45rem;
    min-width: 0;
}

.catalog_mini_card_details > h3 {
    display: flex;
    grid-row: 1;
    align-items: center;
    justify-content: center;
    height: 3rem;
    margin: 0;
    overflow: hidden;
}

.catalog_mini_card_details > :is(img, .premium_shop_pack_art, .premium_shop_art_unavailable) {
    grid-row: 2;
}

.catalog_mini_card_description {
    box-sizing: border-box;
    grid-row: 3;
    height: 5.25rem;
    margin: 0;
    overflow: hidden;
    padding: 0;
    color: #c7d7da;
    font-size: var(--font-sm);
}

.catalog_mini_card_details > .premium_shop_audience_note {
    grid-row: 4;
}

.catalog_mini_card_details > .premium_shop_requirement {
    grid-row: 5;
}

.catalog_mini_card_details > p {
    padding-bottom: 0;
}

.catalog_mini_card_empty_row {
    visibility: hidden;
}

.catalog_mini_card_actions {
    display: grid;
    grid-template-rows: auto auto;
    align-content: end;
    align-items: start;
    gap: 0.45rem;
    min-height: 4.75rem;
}

.catalog_mini_card_status,
.catalog_mini_card_actions > .shop_gift_line_item {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    margin: 0;
}

@media (max-width: 64rem) {
    .catalog_mini_card_grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 40rem) {
    .catalog_mini_card_grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ==========================================================================
   Shared Processing Popup
   ========================================================================== */

.processing_dialog,
[data-feed-queue-status].is_loading {
    z-index: 2147483646;
    box-sizing: border-box;
    width: min(24rem, calc(100vw - 2rem));
    max-width: calc(100vw - 2rem);
    padding: 0;
    color: var(--popup-text-color);
    background: var(--popup-background-color);
    border: var(--popup-border-width) solid color-mix(in srgb, var(--primary-accent-color) 20%, transparent);
    border-radius: var(--popup-radius);
    box-shadow: var(--popup-shadow);
}

.processing_dialog {
    margin: auto;
}

.processing_dialog::backdrop,
[data-feed-queue-status]::backdrop {
    background: rgba(0, 0, 0, .72);
    background: rgb(from var(--popup-backdrop-color) r g b / var(--popup-backdrop-opacity));
}

.processing_dialog_content,
[data-feed-queue-status].is_loading {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: .35rem .75rem;
    font-family: var(--font-control-family) !important;
}

[data-feed-queue-status].is_loading {
    margin: auto;
    padding: 1rem;
}

.processing_dialog_content {
    min-width: min(18rem, calc(100vw - 3rem));
    padding: 1rem;
}

.processing_dialog_content :is(strong, p),
[data-feed-queue-status].is_loading strong {
    color: inherit;
}

.processing_dialog_content p {
    grid-column: 2;
    margin: 0;
    padding: 0;
    color: var(--page-muted-text);
    font-size: var(--font-sm);
    line-height: 1.25;
}

.processing_spinner {
    box-sizing: border-box;
    width: 2rem;
    height: 2rem;
    background:
        radial-gradient(circle at 50% 12%, var(--yusaso-green) 0 .16rem, color-mix(in srgb, var(--yusaso-green) 55%, transparent) .24rem, transparent .42rem),
        radial-gradient(circle at 84% 70%, var(--yusaso-blue) 0 .16rem, color-mix(in srgb, var(--yusaso-blue) 55%, transparent) .24rem, transparent .42rem),
        radial-gradient(circle at 16% 70%, var(--yusaso-purple) 0 .16rem, color-mix(in srgb, var(--yusaso-purple) 55%, transparent) .24rem, transparent .42rem);
    border: 0;
    border-radius: 50%;
    animation: yusaso_processing_spin .8s linear infinite;
}

.processing_dialog_content .processing_spinner {
    grid-row: 1 / 3;
}

@keyframes yusaso_processing_spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .processing_spinner { animation-duration: 1.8s; }
}

/* Shared Post-header, Post-reply, and Private Chat datetime presentation. */
.shared_datetime_metadata {
    color: var(--small-font-color);
    font-size: var(--font-xs);
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
}


/* ==========================================================================
   Mobile Card Layout
   ========================================================================== */

@media (max-width: 40rem) {
    .feature_wrapper,
    .feature_card,
    /* RETIRED 2026-08-29: feature_card_visual has no caller.
    .feature_card_visual,
    */
    .feature_card_content {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }
}


/* ==========================================================================
   Adaptive Theme Surface Frames
   ========================================================================== */

:is(
    .site_wrapper,
    .public_three_column_layout,
    .public_single_column_layout,
    .persona_profile_page,
    .persona_mini_content
) {
    position: relative;
    isolation: isolate;
}

.theme_surface_frame {
    --surface-frame-corner-size: 2.5rem;
    --surface-frame-side-thickness: 0.2rem;
    position: absolute;
    z-index: 4;
    inset: 0;
    display: block;
    overflow: hidden;
    opacity: var(--surface-frame-opacity);
    border-radius: inherit;
    pointer-events: none;
}

.theme_surface_frame_corner,
.theme_surface_frame_side {
    position: absolute;
    display: block;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
}

.theme_surface_frame_corner {
    width: var(--surface-frame-corner-size);
    height: var(--surface-frame-corner-size);
    background-image: var(--surface-frame-corner-image);
    background-size: 100% 100%;
}

.theme_surface_frame_corner_top_left { top: 0; left: 0; }
.theme_surface_frame_corner_top_right { top: 0; right: 0; transform: rotate(90deg); }
.theme_surface_frame_corner_bottom_right { right: 0; bottom: 0; transform: rotate(180deg); }
.theme_surface_frame_corner_bottom_left { bottom: 0; left: 0; transform: rotate(270deg); }

.theme_surface_frame_side {
    background-image: var(--surface-frame-side-image);
}

.theme_surface_frame_side_top,
.theme_surface_frame_side_bottom {
    right: var(--surface-frame-corner-size);
    left: var(--surface-frame-corner-size);
    height: var(--surface-frame-side-thickness);
    background-repeat: repeat-x;
    background-size: auto 100%;
}

.theme_surface_frame_side_top { top: 0; }
.theme_surface_frame_side_bottom { bottom: 0; transform: rotate(180deg); }

.theme_surface_frame_side_right,
.theme_surface_frame_side_left {
    top: var(--surface-frame-corner-size);
    bottom: var(--surface-frame-corner-size);
    width: var(--surface-frame-side-thickness);
    background-image: var(--surface-frame-side-vertical-image);
    background-position: center;
    background-repeat: repeat-y;
    /* Size by tile height instead of the image's wide transparent canvas, then
       clip its centered rail to the canonical side thickness. */
    background-size: auto 6.25rem;
}

.theme_surface_frame_side_right { right: 0; transform: rotate(180deg); }
.theme_surface_frame_side_left { left: 0; }

/* The whole-site instance must remain visible above the sticky shared header. */
.site_wrapper > .theme_surface_frame {
    z-index: 2000;
}

/* Compact Persona badges reuse the canonical Theme frame artwork at badge
   scale. The shared badge renderer supplies this same frame to every consumer. */
.persona_list_badge > .theme_surface_frame {
    --surface-frame-corner-size: 0.875rem;
    --surface-frame-side-thickness: 0.1rem;
    opacity: 0;
}

.persona_list_badge:is(:hover, :focus-visible, :focus-within) > .theme_surface_frame {
    opacity: var(--surface-frame-opacity);
}

.persona_list_grid > .persona_compact_list_row > .persona_list_badge > .theme_surface_frame {
    inset: -0.1rem;
}

@media (max-width: 40rem) {
    .theme_surface_frame {
        --surface-frame-corner-size: 1.75rem;
        --surface-frame-side-thickness: 0.16rem;
    }
}