/* ============================================
   Room cards - compact slips
   (Views/Shared/_RoomCard.cshtml, 2026-09-15; tidied 2026-09-16;
   compact pass 2026-09-18)

   2026-09-18: the generated sigil tile was removed. It carried no
   information, took the most saturated spot on the card and pushed
   the name aside. What is left is only data: name, creator, labels,
   presence. The room accent shows as a spine on the left edge, the
   occupancy bar is the bottom edge, and the top-right corner is cut
   to match the faceted brand mark.

   Motion budget: every animated property is transform or opacity so
   a grid of cards never repaints while idle or on hover. The earlier
   box-shadow "breathe" loop and the width transition on the bar both
   painted every frame.

   Layout contract: one frame for every variant. Golden and project
   rooms differ only in accent (spine, first label); a full room
   differs only in its capacity text and bar. Reduced motion stops
   the loops but keeps every state readable.
   ============================================ */

[data-shell="modern"] .room-card {
    /* Plain rooms adopt the owner colour as their main accent; typed rooms (golden, project)
       override --room-accent below and keep the owner colour only in --room-accent-2. */
    --room-accent: var(--room-accent-own, var(--accent));
    --room-accent-2: var(--room-accent);
    --room-accent-soft: color-mix(in srgb, var(--room-accent) 12%, transparent);
    --room-edge: var(--border-light);
    --room-cut: var(--space-md);
    --room-fill: 0;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    /* The first layer draws the border along the cut corner, which clip-path removes. */
    background:
        linear-gradient(to top right, transparent calc(50% - 1px), var(--room-edge) calc(50% - 1px), var(--room-edge) 50%, transparent 50%) top right / var(--room-cut) var(--room-cut) no-repeat border-box,
        var(--bg-card);
    border: var(--border-width) solid var(--room-edge);
    border-radius: var(--radius-sm);
    /* clip-path would cut a shadow off anyway; elevation is the border and the hover wash. */
    box-shadow: none;
    clip-path: polygon(0 0, calc(100% - var(--room-cut)) 0, 100% var(--room-cut), 100% 100%, 0 100%);
    transition: none;
    opacity: 1;
}

/* Hover wash: sweeps in from the spine. */
[data-shell="modern"] .room-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, var(--room-accent-soft), transparent 70%);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--dur-slow) var(--ease-standard);
    pointer-events: none;
}

/* Accent spine. Two-tone: the family colour holds the top, the owner's secondary colour tints
   the lower third, so a typed room keeps one shared identity with a per-room hint. When no owner
   colour is set, --room-accent-2 equals --room-accent and the spine reads as one solid colour. */
[data-shell="modern"] .room-card::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    background: linear-gradient(to bottom, var(--room-accent) 55%, var(--room-accent-2));
    opacity: .5;
    transform-origin: left center;
    transition: transform var(--dur-base) var(--ease-standard), opacity var(--dur-base) var(--ease-standard);
    pointer-events: none;
}

[data-shell="modern"] .room-card:hover,
[data-shell="modern"] .room-card:focus-within {
    --room-edge: color-mix(in srgb, var(--room-accent) 45%, var(--border));
    transform: none;
    box-shadow: none;
}

[data-shell="modern"] .room-card:hover::before,
[data-shell="modern"] .room-card:focus-within::before { transform: scaleX(1); }

[data-shell="modern"] .room-card:hover::after,
[data-shell="modern"] .room-card:focus-within::after { opacity: 1; transform: scaleX(1.67); }

[data-shell="modern"] .room-card .room-card-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    padding: var(--space-sm) var(--space-md) var(--space-sm) calc(var(--space-md) + 3px);
}

/* --- Head: name, flags ------------------------------------------ */
.room-card-head {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    min-width: 0;
    /* Keeps the flags clear of the cut corner. */
    padding-right: var(--space-2xs);
}

[data-shell="modern"] .room-card .room-card-title {
    flex: 0 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    gap: var(--space-2xs);
    margin: 0;
    color: var(--text-primary);
    font-size: var(--fs-md);
    font-weight: 600;
    line-height: var(--lh-tight);
}

.room-card-emoji { flex: 0 0 auto; line-height: 1; }

.room-card-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.room-card-flags {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    color: var(--text-muted);
    font-size: var(--fs-xs);
}

.room-card-flag { display: inline-flex; }
.room-card-flag-member { color: var(--success); }

/* --- Sub line: creator, then labels as plain text ---------------- */
.room-card-sub {
    display: flex;
    align-items: baseline;
    gap: var(--space-xs);
    min-width: 0;
    color: var(--text-muted);
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
}

.room-card-creator {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 50%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.room-card-creator strong { color: var(--text-secondary); font-weight: 500; }

.room-card-tags {
    flex: 1 1 0;
    display: flex;
    flex-wrap: nowrap;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    mask-image: linear-gradient(90deg, #000 85%, transparent);
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
}

[data-shell="modern"] .room-card .room-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: baseline;
    color: var(--text-muted);
    font-weight: 400;
}

.room-card .room-chip::before {
    content: "\00b7";
    margin: 0 var(--space-xs);
    color: var(--text-muted);
    font-weight: 400;
}

.room-card .room-chip:first-child::before { margin-left: 0; }

[data-shell="modern"] .room-card .room-chip-golden,
[data-shell="modern"] .room-card .room-chip-project {
    /* Light-theme gold is 3.2:1 on the card; leaning on the text colour clears AA in both themes. */
    color: color-mix(in srgb, var(--room-accent) 65%, var(--text-primary));
    font-weight: 600;
}

[data-shell="modern"] .room-card .room-chip-temporary { color: var(--warning); font-weight: 600; }

.room-card .room-chip .bi { margin-right: .3em; font-size: .85em; }

/* --- Description: one line, and only when the owner wrote one ---- */
[data-shell="modern"] .room-card .room-card-desc {
    margin: 0;
    overflow: hidden;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Footer: presence on the left, action on the right ------------ */
.room-card-foot {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-top: auto;
    padding-top: var(--space-2xs);
}

.room-card-vitals { flex: 1 1 auto; min-width: 0; }

[data-shell="modern"] .room-card .room-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 var(--space-md);
    color: var(--text-muted);
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
}

.room-card-meta > span { display: inline-flex; align-items: center; gap: .3em; white-space: nowrap; }
.room-card-presence { color: var(--text-secondary); font-weight: 500; }

.room-card-meta .online-dot {
    position: relative;
    width: 7px;
    height: 7px;
    margin-right: var(--space-2xs);
    border-radius: 50%;
    box-shadow: none;
    animation: none;
    background: var(--text-muted);
}

.room-card.is-live .room-card-meta .online-dot { background: var(--success); }

/* Live ping: a ring that scales out of the dot. */
.room-card.is-live .room-card-meta .online-dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--success);
    animation: room-live-ping 2.4s var(--ease-standard) infinite;
    will-change: transform, opacity;
}

@keyframes room-live-ping {
    0% { transform: scale(1); opacity: .6; }
    70%, 100% { transform: scale(3); opacity: 0; }
}

[data-shell="modern"] .room-card.is-live::after { opacity: 1; }

.room-card-presentation { flex-basis: 100%; }

/* Occupancy is the bottom edge of the card. */
.room-vitality {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    background: var(--bg-hover);
    overflow: hidden;
}

.room-vitality-fill {
    position: absolute;
    inset: 0;
    background: var(--room-accent);
    transform: scaleX(var(--room-fill));
    transform-origin: left center;
    transition: transform var(--dur-slow) var(--ease-standard);
}

.room-card-full .room-vitality-fill { background: var(--danger); }

.room-card-action { flex: 0 0 auto; display: inline-flex; }
.room-card-action .btn { min-width: 4.75rem; justify-content: center; }

.room-card-go {
    flex: 0 0 auto;
    color: var(--text-muted);
    transition: transform var(--dur-base) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}

.room-card:hover .room-card-go,
.room-card:focus-within .room-card-go { color: var(--room-accent); transform: translateX(var(--space-2xs)); }

/* Compact variant (Home feed) is wrapped in an anchor; keep the whole card a target. */
.home-room-grid > a { color: inherit; }
.home-room-grid > a:focus-visible { outline: var(--ring-width) solid var(--ring-color); outline-offset: var(--ring-offset); border-radius: var(--radius-sm); }

/* Golden and Project rooms keep ONE shared main colour so a whole grid of them reads as a family;
   the owner's chosen colour is demoted to the secondary spine tint (--room-accent-2). */
[data-shell="modern"] .room-card-golden {
    --room-accent: var(--gold);
    --room-accent-2: var(--room-accent-own, var(--gold));
}
[data-shell="modern"] .room-card-project {
    --room-accent: var(--project-accent);
    --room-accent-2: var(--room-accent-own, var(--project-accent));
}

@media (prefers-reduced-motion: reduce) {
    [data-shell="modern"] .room-card::before,
    [data-shell="modern"] .room-card::after,
    .room-vitality-fill,
    .room-card-go { transition: none; }
    .room-card.is-live .room-card-meta .online-dot::after { animation: none; opacity: 0; }
}