/* The Discover feed.
 *
 * One idea: THE WORK IS THE INTERFACE. Every card is dominated by a miniature of the
 * actual creation, and the chrome around it stays quiet enough that a wall of them reads
 * as a gallery rather than a list of database rows.
 *
 * The palette is MewUI's own - mint on deep indigo - with one restraint added: mint is
 * reserved almost entirely for INTERACTION. Nothing decorative is mint, so a liked heart
 * or a focused chip is the only saturated thing on screen and genuinely pops.
 */

.ces-feed-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--mu-space-md);
    flex-wrap: wrap;
    margin-bottom: var(--mu-space-lg);
}

.ces-feed-title {
    font-family: var(--mu-font-family);
    font-size: clamp(2.4rem, 6vw, 3.6rem);
    line-height: 0.95;
    margin: 0;
    color: var(--mu-text-bright);
    /* Jockey One is a condensed face; tightening it further makes a proper masthead. */
    letter-spacing: 0.01em;
}

.ces-feed-sub {
    margin: 0.35rem 0 0;
    color: var(--mu-text-muted);
    font-size: var(--mu-font-size-sm);
    max-width: 46ch;
}

/* Chips rather than a dropdown: the filter is part of the surface, not a form control
 * hidden behind a click. */
.ces-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.ces-chip {
    font: inherit;
    font-size: var(--mu-font-size-xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mu-text-muted);
    background: transparent;
    border: 1px solid var(--mu-border-color);
    border-radius: var(--mu-border-radius-full);
    padding: 0.4rem 0.85rem;
    cursor: pointer;
    transition: color 140ms ease, border-color 140ms ease, background 140ms ease;
}
.ces-chip:hover { color: var(--mu-text-bright); border-color: var(--mu-text-muted); }
.ces-chip[aria-pressed="true"] {
    color: #06231a;
    background: var(--mu-primary);
    border-color: var(--mu-primary);
    font-weight: 700;
}
.ces-chip:focus-visible { outline: 2px solid var(--mu-primary); outline-offset: 2px; }

/* Fluid grid. minmax keeps a card wide enough for a preview to be legible; below that
 * it collapses to one column rather than squeezing. */
.ces-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--mu-space-md);
}

.ces-card {
    position: relative;
    display: flex;
    flex-direction: column;
    /* NOT --mu-surface. That is rgba(31,40,95,.85) and the page behind it is #1f285f, so
     * a card would be within a shade of its own background and the grid would read as
     * floating text. Sinking it darker also earns the preview panel its contrast: the
     * work sits in a well rather than on a slab. */
    background: rgba(10, 12, 30, 0.55);
    border: 1px solid var(--mu-border-color);
    border-radius: var(--mu-border-radius-lg);
    overflow: hidden;
    transition: transform 180ms cubic-bezier(0.2, 0.7, 0.3, 1), border-color 180ms ease, background 180ms ease;
    /* Staggered entry, set per card from JS. One orchestrated reveal on load reads as
     * considered; the same motion scattered across every hover reads as fidgety. */
    opacity: 0;
    animation: ces-rise 420ms cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
@keyframes ces-rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}
.ces-card:hover { transform: translateY(-2px); border-color: var(--mu-text-muted); background: rgba(10, 12, 30, 0.72); }
.ces-card:focus-within { border-color: var(--mu-primary); }

/* The preview panel. 16:9 so a wall of cards has one horizon line rather than a ragged
 * one - the compositions inside vary wildly, and a shared frame is what makes them read
 * as a set. */
.ces-preview {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background:
        radial-gradient(120% 120% at 50% 0%, rgba(71, 80, 139, 0.35) 0%, rgba(13, 13, 26, 0) 70%),
        linear-gradient(0deg, rgba(255,255,255,0.035) 1px, transparent 1px) 0 0 / 100% 28px,
        linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px) 0 0 / 28px 100%,
        #0d0d1a;
    border-bottom: 1px solid var(--mu-border-color);
    display: block;
}
/* The grid recedes at the edges, so a sparse composition sits on a surface rather than
 * on graph paper. */
.ces-preview::after {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(75% 75% at 50% 45%, rgba(13,13,26,0) 40%, rgba(13,13,26,0.75) 100%);
    pointer-events: none;
}
.ces-preview-stage {
    transition: transform 260ms cubic-bezier(0.2, 0.7, 0.3, 1);
    will-change: transform;
}
/* A touch of life on hover, applied to the whole miniature so it moves as one drawing. */
.ces-card:hover .ces-preview-stage { transform: scale(1.03) translateZ(0); }

/* The fallback cover for a creation with nothing to draw yet. */
.ces-preview-cover {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 0.35rem;
}
.ces-preview-glyph {
    font-family: var(--mu-font-family);
    font-size: 4.5rem;
    line-height: 1;
    color: var(--mu-text-bright);
    opacity: 0.16;
}
.ces-preview-covertype {
    font-size: var(--mu-font-size-xs);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mu-text-muted);
    opacity: 0.7;
}

.ces-type {
    position: absolute; top: 10px; left: 10px; z-index: 2;
    font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--mu-text-bright);
    background: rgba(13, 13, 26, 0.72);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--mu-border-radius-full);
    padding: 0.2rem 0.6rem;
    backdrop-filter: blur(4px);
}

.ces-body { padding: 0.9rem 1rem 1rem; display: flex; flex-direction: column; flex: 1; }

.ces-name {
    font-family: var(--mu-font-family);
    font-size: 1.45rem;
    line-height: 1.1;
    margin: 0;
    color: var(--mu-text-bright);
    text-decoration: none;
    display: block;
}
.ces-name:hover { color: var(--mu-primary); }

.ces-byline { margin: 0.3rem 0 0; font-size: var(--mu-font-size-sm); color: var(--mu-text-muted); }
.ces-byline a { color: var(--mu-text); text-decoration: none; }
.ces-byline a:hover { color: var(--mu-primary); }

/* Clamped to two lines: descriptions vary from a word to an essay, and a feed only works
 * if every card is the same shape. */
.ces-desc {
    margin: 0.55rem 0 0;
    color: var(--mu-text);
    font-size: var(--mu-font-size-sm);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ces-actions {
    display: flex; align-items: center; gap: 0.35rem;
    margin-top: auto; padding-top: 0.85rem;
}

.ces-act {
    font: inherit;
    display: inline-flex; align-items: center; gap: 0.4rem;
    background: none; border: 0; cursor: pointer;
    color: var(--mu-text-muted);
    padding: 0.35rem 0.5rem;
    border-radius: var(--mu-border-radius-sm);
    transition: color 140ms ease, background 140ms ease;
    font-size: var(--mu-font-size-sm);
}
.ces-act:hover { color: var(--mu-text-bright); background: rgba(255,255,255,0.05); }
.ces-act:focus-visible { outline: 2px solid var(--mu-primary); outline-offset: 1px; }
.ces-act[data-liked="1"] { color: var(--mu-primary); }
/* The one flourish that fires on a real action rather than on arrival. */
.ces-act[data-liked="1"] i { animation: ces-pop 320ms cubic-bezier(0.2, 0.9, 0.3, 1.4); }
@keyframes ces-pop {
    0% { transform: scale(1); } 45% { transform: scale(1.35); } 100% { transform: scale(1); }
}

.ces-open {
    margin-left: auto;
    font-size: var(--mu-font-size-sm);
    color: var(--mu-text-muted);
    text-decoration: none;
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--mu-border-color);
    border-radius: var(--mu-border-radius-full);
    transition: color 140ms ease, border-color 140ms ease;
}
.ces-open:hover { color: var(--mu-primary); border-color: var(--mu-primary); }

.ces-empty { grid-column: 1 / -1; text-align: center; padding: 3.5rem 1rem; }
.ces-empty i { font-size: 2.2rem; color: var(--mu-text-muted); opacity: 0.5; }

.ces-skeleton { background: rgba(10, 12, 30, 0.55); border: 1px solid var(--mu-border-color);
    border-radius: var(--mu-border-radius-lg); overflow: hidden; }
.ces-skeleton .ces-preview { animation: ces-shimmer 1.4s ease-in-out infinite; }
@keyframes ces-shimmer { 0%,100% { opacity: 0.55; } 50% { opacity: 0.85; } }

@media (max-width: 560px) {
    .ces-grid { grid-template-columns: 1fr; }
    .ces-feed-title { font-size: 2.4rem; }
}

/* Someone who has asked for less motion gets the layout and none of the movement. */
@media (prefers-reduced-motion: reduce) {
    .ces-card, .ces-preview-stage, .ces-act i { animation: none !important; transition: none !important; }
    .ces-card { opacity: 1; }
    .ces-card:hover { transform: none; }
    .ces-card:hover .ces-preview-stage { transform: none; }
}

/* ── Owner surfaces (My Creations) ─────────────────────────────────────────────
 * The same card, carrying state and controls instead of likes. A creator looking
 * at their own shelf should recognise it as the thing other people see, with the
 * publish state written on it — that badge is the difference between "I made this"
 * and "the world can see this", and it is the one thing worth never guessing at.
 */

.ces-state {
    position: absolute; top: 10px; right: 10px; z-index: 2;
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase;
    border-radius: var(--mu-border-radius-full);
    padding: 0.2rem 0.6rem;
    background: rgba(13, 13, 26, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(4px);
    color: var(--mu-text-muted);
}
/* Public is the only state that reaches other people, so it is the only one that
 * gets the accent. Private and profile stay quiet. */
.ces-state[data-state="public"] { color: var(--mu-primary); border-color: rgba(25, 245, 170, 0.45); }

.ces-owner-actions {
    display: flex; align-items: center; gap: 0.4rem;
    flex-wrap: wrap;
    margin-top: auto; padding-top: 0.85rem;
}
.ces-mini {
    font: inherit; font-size: var(--mu-font-size-sm);
    display: inline-flex; align-items: center; gap: 0.35rem;
    background: none; border: 1px solid var(--mu-border-color);
    border-radius: var(--mu-border-radius-full);
    color: var(--mu-text-muted); cursor: pointer;
    padding: 0.3rem 0.7rem; text-decoration: none;
    transition: color 140ms ease, border-color 140ms ease;
}
.ces-mini:hover { color: var(--mu-text-bright); border-color: var(--mu-text-muted); }
.ces-mini:focus-visible { outline: 2px solid var(--mu-primary); outline-offset: 1px; }
.ces-mini-go { color: var(--mu-primary); border-color: rgba(25, 245, 170, 0.4); }
.ces-mini-go:hover { color: #06231a; background: var(--mu-primary); border-color: var(--mu-primary); }
/* Destructive stays quiet until deliberately reached for - a delete that advertises
 * itself on every card invites the accident it warns about. */
.ces-mini-danger { margin-left: auto; }
.ces-mini-danger:hover { color: var(--mu-danger); border-color: var(--mu-danger); }

/* A private creation reads as a draft rather than as something broken: the preview is
 * dimmed until hover, so the shelf visually separates published from not. */
.ces-card[data-private="1"] .ces-preview { filter: saturate(0.55) brightness(0.8); transition: filter 200ms ease; }
.ces-card[data-private="1"]:hover .ces-preview { filter: none; }

/* ── A single creation (view) ──────────────────────────────────────────────────
 * Opening something from the feed should feel like arriving at the work, not at a
 * record about it. So the title carries, the byline is quiet, and the piece itself
 * sits in the same dark stage the thumbnails used - the frame the reader has
 * already learned downstairs.
 */

.ces-view-head { margin-bottom: var(--mu-space-md); }
.ces-view-title {
    font-family: var(--mu-font-family);
    font-size: clamp(2rem, 5vw, 3rem);
    line-height: 1;
    margin: 0;
    color: var(--mu-text-bright);
}
.ces-view-by { margin: 0.4rem 0 0; color: var(--mu-text-muted); font-size: var(--mu-font-size-sm); }
.ces-view-by a { color: var(--mu-text); text-decoration: none; }
.ces-view-by a:hover { color: var(--mu-primary); }
/* The separator belongs to the type, not to the markup, so an unknown owner does not
   leave a dot floating on its own. */
#content-type:not(:empty)::before { content: " · "; }

/* The stage. Same well as a preview panel, sized by its content rather than cropped
 * to an aspect - a creation is whatever shape its author made it. */
.ces-stage {
    background: rgba(10, 12, 30, 0.55);
    border: 1px solid var(--mu-border-color);
    border-radius: var(--mu-border-radius-lg);
    overflow: hidden;
}
.ces-stage #canvas { border-radius: var(--mu-border-radius-lg); }

.ces-view-bar {
    display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap;
    margin-top: var(--mu-space-md);
}
.ces-view-bar .ces-act { font-size: var(--mu-font-size-md); }
.ces-view-note { margin-left: auto; color: var(--mu-text-muted); font-size: var(--mu-font-size-sm); }

.ces-feed-foot {
    display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
    padding: var(--mu-space-xl) 0 var(--mu-space-lg);
}
/* The end of an endless feed should feel like an ending, not like a failure to load. */
.ces-feed-foot p { margin: 0; letter-spacing: 0.04em; }

/* Comment bodies: @mentions and links are anchors the server built (social.js renderBody). */
.ces-comment-body a { color: rgb(14, 177, 217); text-decoration: none; word-break: break-word; }
.ces-comment-body a:hover { text-decoration: underline; }