/* =========================================================
   FAN Club™ feed — posts, composer, reactions, comments.

   Extends community.css and reuses its --cm-* tokens. Kept in
   its own file because it is a large, self-contained component
   and only the Community pages need it.
   ========================================================= */

.fd-wrap {
    max-width: 640px;
    margin: 0 auto;
}
.fd-stream {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Composer ─────────────────────────────────────────── */

.fc {
    background: var(--cm-surface);
    border: 1px solid var(--cm-border);
    border-radius: var(--cm-radius);
    padding: 16px;
    margin-bottom: 18px;
}
.fc__top { display: flex; gap: 12px; align-items: flex-start; }
/* Every avatar in the feed. The size belongs to the frame, never to the image:
   whatever gets uploaded is cropped to fill a fixed circle, so a 3000px photo
   and a 48px one look identical here. */
.fc__av,
.fp__av,
.fp-cm__av,
.fp__cav {
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    background: var(--g, #333);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    color: #fff;
    text-decoration: none;
}
/* The frame's own dimensions win over anything the image brings with it. */
.fc__av img,
.fp__av img,
.fp-cm__av img,
.fp__cav img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    display: block;
}
.fc__av { width: 42px; height: 42px; font-size: 16px; }
.fc__av img { width: 100%; height: 100%; object-fit: cover; }

.fc__input {
    flex: 1;
    min-width: 0;
    min-height: 44px;
    max-height: 200px;
    padding: 11px 14px;
    border-radius: 22px;
    border: 1px solid var(--cm-border);
    background: rgba(255, 255, 255, .04);
    color: var(--cm-text);
    font: inherit;
    font-size: 15px;
    line-height: 1.45;
    resize: none;
    overflow-y: auto;
}
.fc__input:focus { outline: none; border-color: var(--cm-gold); background: rgba(255, 255, 255, .06); }
.fc__input::placeholder { color: var(--cm-dim); }

.fc__previews {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 8px;
    margin-top: 12px;
}
.fc__tile {
    position: relative;
    aspect-ratio: 1;
    border-radius: 10px;
    overflow: hidden;
    background: var(--cm-surface-2);
    border: 1px solid var(--cm-border);
    display: flex;
    align-items: center;
    justify-content: center;
}
.fc__tile img { width: 100%; height: 100%; object-fit: cover; }
.fc__tile--video { grid-column: span 2; aspect-ratio: 16/9; }
.fc__tile-load { color: var(--cm-dim); font-size: 15px; }
.fc__tile-vid { color: var(--cm-soft); font-size: 12px; display: flex; align-items: center; gap: 7px; }
.fc__tile-x {
    position: absolute;
    top: 5px; right: 5px;
    width: 24px; height: 24px;
    border-radius: 50%;
    border: 0;
    background: rgba(0, 0, 0, .72);
    color: #fff;
    font-size: 10px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.fc__tile-x:hover { background: #ef4444; }

.fc__linkrow {
    display: flex;
    margin-top: 12px;
}
.fc__linkmain { flex: 1 1 auto; min-width: 0; }

.fc__linkfield {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--cm-border);
    transition: border-color 0.18s ease, background 0.18s ease;
}
.fc__linkrow.is-valid .fc__linkfield { border-color: rgba(34, 197, 94, 0.5); }
.fc__linkrow.is-bad   .fc__linkfield { border-color: rgba(239, 68, 68, 0.5); }

.fc__linkfield > i { color: #FF0000; flex-shrink: 0; }
.fc__linkrow.is-valid .fc__linkfield > i { color: var(--cm-green); }

.fc__linkfield input {
    flex: 1; min-width: 0;
    background: transparent; border: 0; color: var(--cm-text);
    font: inherit; font-size: 14px;
    /* A pasted watch URL is long; letting it scroll beats wrapping the row. */
    text-overflow: ellipsis;
}
.fc__linkfield input:focus { outline: none; }

.fc__linkfield button {
    flex-shrink: 0;
    border: 0; border-radius: 7px;
    padding: 6px 13px;
    background: var(--cm-gold); color: #0a0800;
    font-size: 13px; font-weight: 800; cursor: pointer;
    transition: opacity 0.15s ease;
}
/* Disabled until the link is one we recognise, so Add never looks available
   for something that cannot work. */
.fc__linkfield button:disabled { opacity: 0.4; cursor: not-allowed; }

.fc__linkx { background: transparent !important; color: var(--cm-dim) !important; padding: 6px 8px !important; opacity: 1 !important; cursor: pointer !important; }

.fc__linknote {
    margin: 6px 2px 0;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--cm-dim);
}
.fc__linkrow.is-valid .fc__linknote { color: var(--cm-green); }
.fc__linkrow.is-bad   .fc__linknote { color: #fca5a5; }

@media (prefers-reduced-motion: reduce) {
    .fc__linkfield, .fc__linkfield button { transition: none; }
}

.fc__err {
    margin: 11px 0 0;
    padding: 9px 13px;
    border-radius: 9px;
    background: rgba(239, 68, 68, .12);
    border: 1px solid rgba(239, 68, 68, .34);
    color: #fca5a5;
    font-size: 13px;
}

.fc__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px solid var(--cm-border);
    flex-wrap: wrap;
}
.fc__tools { display: flex; gap: 4px; flex-wrap: wrap; }
.fc__tool {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 13px;
    border: 0; border-radius: 9px;
    background: transparent; color: var(--cm-soft);
    font: inherit; font-size: 13.5px; font-weight: 600;
    cursor: pointer; transition: background .15s, color .15s;
}
.fc__tool:hover { background: rgba(255, 255, 255, .06); color: var(--cm-text); }
.fc__go { display: flex; align-items: center; gap: 12px; }
.fc__left { font-size: 11.5px; color: var(--cm-dim); }
.fc__post {
    border: 0; border-radius: 50px;
    padding: 9px 26px;
    background: linear-gradient(94deg, #FFE55C, #FFD700 55%, #d4a017);
    color: #0a0800;
    font: inherit; font-size: 14px; font-weight: 800;
    cursor: pointer; transition: transform .15s, opacity .15s;
}
.fc__post:hover:not(:disabled) { transform: translateY(-1px); }
.fc__post:disabled { opacity: .4; cursor: not-allowed; }

/* Quiet by design — present when looked for, never competing with the Post button. */
.fc__legal {
    margin: 10px 0 0;
    font-size: 11px; line-height: 1.5; color: var(--cm-dim);
}
.fc__legal a { color: var(--cm-dim); text-decoration: underline; }
.fc__legal a:hover { color: #FFD700; }

/* ── Post ─────────────────────────────────────────────── */

.fp {
    background: var(--cm-surface);
    border: 1px solid var(--cm-border);
    border-radius: var(--cm-radius);
    overflow: hidden;
}

.fp__head { display: flex; align-items: center; gap: 11px; padding: 14px 16px 0; position: relative; }
.fp__av { width: 42px; height: 42px; font-size: 16px; }
.fp__av img { width: 100%; height: 100%; object-fit: cover; }
.fp__who { min-width: 0; flex: 1; }
.fp__name {
    display: block;
    font-size: 15px; font-weight: 800; color: var(--cm-text);
    text-decoration: none;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fp__name:hover { color: var(--cm-gold); text-decoration: none; }
.fp__sub { display: block; font-size: 12px; color: var(--cm-dim); margin-top: 2px; }
.fp__role {
    display: inline-block;
    padding: 1px 7px; border-radius: 50px;
    font-size: 9.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
}
.fp__role--artist { background: var(--cm-gold-dim); color: var(--cm-gold); }
.fp__role--fan { background: rgba(34, 197, 94, .14); color: #4ade80; }

.fp__menu { position: relative; flex-shrink: 0; }
.fp__menu-btn {
    width: 32px; height: 32px; border-radius: 50%;
    border: 0; background: transparent; color: var(--cm-dim);
    cursor: pointer; font-size: 15px;
}
.fp__menu-btn:hover { background: rgba(255, 255, 255, .07); color: var(--cm-text); }
.fp__menu-pop {
    position: absolute; top: 100%; right: 0; z-index: 20;
    min-width: 172px;
    background: var(--cm-surface-2);
    border: 1px solid var(--cm-border-lit);
    border-radius: 10px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .55);
    overflow: hidden;
    padding: 5px;
}
.fp__menu-pop button {
    display: flex; align-items: center; gap: 10px;
    width: 100%;
    padding: 9px 11px;
    border: 0; border-radius: 7px;
    background: transparent; color: var(--cm-text);
    font: inherit; font-size: 13.5px; text-align: left; cursor: pointer;
}
.fp__menu-pop button:hover { background: rgba(255, 255, 255, .07); }

.fp__body {
    padding: 11px 16px 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--cm-text);
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
.fp__body a { color: var(--cm-gold); }

.fp__edit { padding: 11px 16px 0; }
.fp__edit textarea {
    width: 100%; min-height: 88px;
    padding: 11px 13px;
    border-radius: 10px;
    border: 1px solid var(--cm-border-lit);
    background: rgba(255, 255, 255, .04);
    color: var(--cm-text);
    font: inherit; font-size: 14.5px; line-height: 1.6; resize: vertical;
}
.fp__edit textarea:focus { outline: none; border-color: var(--cm-gold); }
.fp__edit-bar { display: flex; justify-content: flex-end; gap: 8px; margin-top: 9px; }
.fp__edit-bar button {
    border: 1px solid var(--cm-border-lit); border-radius: 8px;
    padding: 7px 15px;
    background: transparent; color: var(--cm-soft);
    font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.fp__edit-bar .is-primary { background: var(--cm-gold); border-color: var(--cm-gold); color: #0a0800; }

/* Photo collage — the shapes Facebook uses, because they read instantly. */
.fp__grid { display: grid; gap: 3px; margin-top: 12px; }
.fp__grid--1 { grid-template-columns: 1fr; }
.fp__grid--2 { grid-template-columns: 1fr 1fr; }
.fp__grid--3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.fp__grid--3 .fp__shot:first-child { grid-row: span 2; }
.fp__grid--4 { grid-template-columns: 1fr 1fr; }

.fp__shot {
    position: relative;
    display: block;
    overflow: hidden;
    background: var(--cm-surface-2);
    aspect-ratio: 1;
}
/* A single photo used to run to 620px, which is most of a laptop screen and
   nearly all of a phone's — one post filled the viewport and the feed stopped
   reading as a feed. Capped against the viewport as well as in pixels, so it
   behaves on a short window too. */
.fp__grid--1 .fp__shot { aspect-ratio: auto; max-height: min(520px, 62vh); }
.fp__grid--1 .fp__shot img { max-height: min(520px, 62vh); }
.fp__grid--2 .fp__shot { aspect-ratio: 1; }
.fp__grid--3 .fp__shot:first-child { aspect-ratio: auto; }
.fp__shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s; }
.fp__shot:hover img { transform: scale(1.03); }
.fp__more {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(7, 8, 13, .66);
    color: #fff; font-size: 28px; font-weight: 900;
}

/* Video */
.fp__media {
    position: relative;
    margin-top: 12px;
    aspect-ratio: 16/9;
    background: var(--g);
    cursor: pointer;
    overflow: hidden;
}
.fp__poster { width: 100%; height: 100%; object-fit: cover; display: block; }
.fp__play {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 56px; height: 56px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    padding-left: 4px;
    font-size: 18px; color: #0a0800;
    background: rgba(255, 215, 0, .94);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
    transition: transform .18s;
}
.fp__media:hover .fp__play { transform: translate(-50%, -50%) scale(1.08); }
.fp__dur {
    position: absolute; right: 10px; bottom: 10px;
    padding: 3px 8px; border-radius: 5px;
    background: rgba(0, 0, 0, .7); color: #fff;
    font-size: 10.5px; font-weight: 700;
}
.fp__player { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.fp__media.is-playing .fp__play,
.fp__media.is-playing .fp__dur,
.fp__media.is-playing .fp__poster { display: none; }
.fp__media.is-playing { cursor: default; }

/* Counts */
.fp__tally {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 11px 16px 0;
    font-size: 13px; color: var(--cm-dim);
}
.fp__rsum { display: inline-flex; align-items: center; gap: 3px; }
.fp__rchip {
    width: 19px; height: 19px;
    border-radius: 50%;
    background: var(--cm-surface-2);
    border: 1px solid var(--cm-surface);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-style: normal;
    margin-right: -5px;
}
.fp__rsum b { margin-left: 9px; font-weight: 600; color: var(--cm-soft); }
.fp__ccount {
    border: 0; background: transparent; color: var(--cm-dim);
    font: inherit; font-size: 13px; cursor: pointer; padding: 0;
}
.fp__ccount:hover { color: var(--cm-text); text-decoration: underline; }

/* Action row */
.fp__acts {
    display: flex;
    margin: 10px 10px 0;
    padding: 4px 0;
    border-top: 1px solid var(--cm-border);
}
.fp__react { position: relative; flex: 1; display: flex; }
.fp__act {
    flex: 1;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 9px 6px;
    border: 0; border-radius: 8px;
    background: transparent; color: var(--cm-soft);
    font: inherit; font-size: 13.5px; font-weight: 700;
    cursor: pointer; transition: background .15s, color .15s;
}
.fp__act:hover { background: rgba(255, 255, 255, .06); color: var(--cm-text); }
.fp__act.is-on { color: var(--cm-gold); }

/* The picker box sits flush against the top of the Like button (bottom: 100%)
   and creates the visual gap with padding instead. Reaching the emoji therefore
   never takes the cursor outside the hover area — with a real gap the pointer
   crossed dead space and the picker closed before it could be clicked. */
.fp__picker {
    position: absolute; bottom: 100%; left: 0; z-index: 25;
    padding-bottom: 8px;
    animation: fpPick .16s ease-out;
}
.fp__picker-pill {
    display: flex; gap: 2px;
    padding: 6px 8px;
    border-radius: 50px;
    background: var(--cm-surface-2);
    border: 1px solid var(--cm-border-lit);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .55);
}
@keyframes fpPick { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.fp__pick {
    width: 38px; height: 38px;
    border: 0; border-radius: 50%;
    background: transparent;
    font-size: 22px; line-height: 1; cursor: pointer;
    transition: transform .15s;
}
.fp__pick:hover { transform: scale(1.32) translateY(-3px); }

.fp__err {
    margin: 0 16px 12px;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(239, 68, 68, .12);
    border: 1px solid rgba(239, 68, 68, .3);
    color: #fca5a5;
    font-size: 12.5px;
}

/* ── Comments ─────────────────────────────────────────── */

.fp__comments { padding: 6px 16px 14px; border-top: 1px solid var(--cm-border); margin-top: 4px; }
.fp__more-cm {
    border: 0; background: transparent;
    color: var(--cm-soft); font: inherit; font-size: 13px; font-weight: 700;
    cursor: pointer; padding: 8px 0;
}
.fp__more-cm:hover { text-decoration: underline; color: var(--cm-text); }
.fp__thread.is-hidden { display: none; }

.fp-cm { display: flex; gap: 9px; padding: 6px 0; }
.fp-cm__av { width: 32px; height: 32px; font-size: 13px; }
.fp-cm__av img { width: 100%; height: 100%; object-fit: cover; }
.fp-cm__main { min-width: 0; flex: 1; }
.fp-cm__bubble {
    display: inline-block;
    max-width: 100%;
    padding: 8px 13px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .05);
}
.fp-cm__name {
    display: block;
    font-size: 12.5px; font-weight: 800; color: var(--cm-text);
    text-decoration: none; margin-bottom: 2px;
}
.fp-cm__name:hover { color: var(--cm-gold); text-decoration: none; }
.fp-cm__body {
    font-size: 13.5px; line-height: 1.5; color: var(--cm-soft);
    word-wrap: break-word; overflow-wrap: anywhere;
}
.fp-cm__body a { color: var(--cm-gold); }
.fp-cm__meta { display: flex; gap: 12px; padding: 4px 0 0 13px; font-size: 11.5px; color: var(--cm-dim); }
.fp-cm__act {
    border: 0; background: transparent; color: var(--cm-dim);
    font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; padding: 0;
}
.fp-cm__act:hover { color: var(--cm-text); text-decoration: underline; }
.fp-cm__act--del:hover { color: #f87171; }
.fp-cm__replies { margin-left: 8px; padding-left: 12px; border-left: 2px solid var(--cm-border); margin-top: 4px; }
.fp-cm--reply .fp-cm__av { width: 26px; height: 26px; font-size: 11px; }

/* Sits above the comment box while a reply is aimed at someone, with its own
   way out. */
.fp__replying {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0 -2px 41px;          /* lines up past the avatar column */
    padding: 6px 8px 6px 11px;
    border-radius: 9px;
    background: var(--cm-gold-dim, rgba(250, 204, 21, .1));
    border: 1px solid var(--cm-gold-dim, rgba(250, 204, 21, .22));
    font-size: 12px;
    color: var(--cm-soft, #94a3b8);
}
.fp__replying i { font-size: 11px; color: var(--cm-gold, #facc15); }
.fp__replying span { flex: 1; min-width: 0; }
.fp__replying strong { color: var(--cm-text, #e5e7eb); font-weight: 700; }
.fp__replying button {
    flex-shrink: 0;
    width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 50%;
    background: transparent;
    color: var(--cm-dim, #64748b);
    font-size: 11px; cursor: pointer;
    transition: background .15s, color .15s;
}
.fp__replying button:hover {
    background: rgba(255, 255, 255, .08);
    color: var(--cm-text, #e5e7eb);
}

@media (max-width: 560px) {
    .fp__replying { margin-left: 0; }
}

.fp__cbox { display: flex; align-items: flex-end; gap: 9px; margin-top: 10px; }
/* Was .fc__cav, which nothing rendered — the markup has always said fp__cav, so
   this avatar had no size at all and showed the upload at its natural width. */
.fp__cav { width: 32px; height: 32px; font-size: 13px; flex-shrink: 0; }
.fp__cbox textarea {
    flex: 1; min-width: 0;
    min-height: 38px; max-height: 160px;
    padding: 9px 14px;
    border-radius: 19px;
    border: 1px solid var(--cm-border);
    background: rgba(255, 255, 255, .04);
    color: var(--cm-text);
    font: inherit; font-size: 13.5px; line-height: 1.4;
    resize: none; overflow-y: auto;
}
.fp__cbox textarea:focus { outline: none; border-color: var(--cm-gold); }
/* Deliberately not a solid gold disc. The theme's floating scroll-to-top button
   is a 46px gold circle pinned to the bottom-right, and this button sits at the
   right edge of the card — scrolling brought the two together and they read as
   one broken control. Same accent, different weight. */
.fp__cbox button {
    flex-shrink: 0;
    width: 36px; height: 36px;
    border: 1px solid var(--cm-gold-dim, rgba(250, 204, 21, .28));
    border-radius: 50%;
    background: var(--cm-surface-2, rgba(255, 255, 255, .05));
    color: var(--cm-gold, #facc15);
    font-size: 13px; cursor: pointer;
    transition: background .16s, color .16s, border-color .16s;
}
.fp__cbox button:hover {
    background: var(--cm-gold, #facc15);
    border-color: var(--cm-gold, #facc15);
    color: #0a0800;
}
/* A visitor's comment box: looks and invites like the real one, but every part
   of it opens the sign-up dialog instead of accepting text. */
[data-cbox-guest] textarea { cursor: pointer; }
[data-cbox-guest] textarea::placeholder { color: var(--cm-dim); }
[data-cbox-guest] button { background: rgba(255, 255, 255, .08); color: var(--cm-soft); cursor: pointer; }
[data-cbox-guest]:hover textarea { border-color: var(--cm-gold); }
[data-cbox-guest]:hover button { background: var(--cm-gold); color: #0a0800; }
.fp__cav--guest { background: rgba(255, 255, 255, .07); color: var(--cm-dim); font-size: 12px; }

/* ── Feed chrome ──────────────────────────────────────── */

/* ── Gate dialog ──────────────────────────────────────── */

/* ── Editing a post's media ───────────────────────────── */

.fp__edit-media {
    display: flex; flex-wrap: wrap; gap: 7px;
    margin: 10px 0 2px;
}
.fp__edit-media[hidden] { display: none; }

.fp__edit-thumb {
    position: relative;
    width: 62px; height: 62px;
    border-radius: 9px;
    overflow: hidden;
    background: var(--cm-surface-2, rgba(255, 255, 255, .05));
    display: flex; align-items: center; justify-content: center;
    color: var(--cm-dim, #64748b);
}
.fp__edit-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fp__edit-thumb button {
    position: absolute; top: 3px; right: 3px;
    width: 19px; height: 19px;
    display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 50%;
    background: rgba(7, 8, 13, .8);
    color: #fff; font-size: 9px; cursor: pointer;
}
.fp__edit-thumb button:hover { background: #ef4444; }
.fp__edit-thumb button:disabled { opacity: .5; cursor: default; }

.fp__edit-add {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 13px;
    border: 1px dashed var(--cm-border-lit, rgba(255, 255, 255, .18));
    border-radius: 9px;
    color: var(--cm-soft, #94a3b8);
    font-size: 12.5px; font-weight: 600; cursor: pointer;
    transition: border-color .15s, color .15s;
}
.fp__edit-add:hover { border-color: var(--cm-gold, #facc15); color: var(--cm-gold, #facc15); }
.fp__edit-add[hidden] { display: none; }
.fp__edit-spacer { flex: 1; }

/* Amber, not red: the content filter is asking for a rewrite, not reporting a
   failure. Doubled class names on purpose — `.fp__err--warn` alone weighs the
   same as `.fp__err`, so whichever came later in this file would win and the
   notice stayed red. Specificity, not position. */
.fc__err.fc__err--warn,
.fp__err.fp__err--warn {
    background: rgba(245, 158, 11, .12);
    border-color: rgba(245, 158, 11, .4);
    color: #fcd34d;
    line-height: 1.55;
}
.fc__err.fc__err--warn::before,
.fp__err.fp__err--warn::before {
    content: "\f071";                       /* fa-exclamation-triangle */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 7px;
}

/* ── `hidden` must win ────────────────────────────────────
   The `[hidden]` attribute selector has the same specificity as a single
   class, so any component here that sets its own `display` out-ranks it
   whenever this file happens to load later. On the dashboard it does — the
   panel pulls these stylesheets in at the end of the body — and the dialog
   below, `display: flex` and `position: fixed`, put an invisible scrim over
   the whole viewport at z-index 10000 that swallowed every click on the page.

   Every component that pairs a `display` with the `hidden` attribute needs a
   guard. Add one here alongside any new component that does the same. */
.rbm[hidden],
.rbm__alt[hidden],
.rbm__perks[hidden],
.rbm__glow[hidden],
.fc__previews[hidden],
.fc__linkrow[hidden],
.fc__err[hidden],
.fp__picker[hidden],
.fp__replying[hidden],
.fp__comments[hidden],
.fp__menu-pop[hidden],
.fp__tally[hidden],
.fd-skel[hidden],
.fd-more[hidden],
.fd-end[hidden],
.cx__skel[hidden],
.cx__more[hidden],
.cx__spin[hidden] { display: none; }

.rbm {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px;
}
.rbm__scrim {
    position: absolute;
    inset: 0;
    background: rgba(4, 5, 9, .78);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity .2s;
}
.rbm.is-open .rbm__scrim { opacity: 1; }

.rbm__box {
    position: relative;
    width: 100%;
    max-width: 520px;                 /* medium — roomy but not a full sheet */
    max-height: calc(100vh - 44px);
    overflow-y: auto;
    padding: 34px 32px 28px;
    border-radius: 20px;
    background: linear-gradient(180deg, #171b2b 0%, #12151f 100%);
    border: 1px solid var(--cm-border-lit);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .7);
    text-align: center;
    opacity: 0;
    transform: translateY(14px) scale(.97);
    transition: opacity .2s ease-out, transform .2s cubic-bezier(.22, .8, .3, 1);
}
.rbm.is-open .rbm__box { opacity: 1; transform: none; }

/* Gold bloom behind the icon, clipped by the box's radius. */
.rbm__glow {
    position: absolute;
    top: -120px; left: 50%;
    width: 320px; height: 240px;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(255, 215, 0, .18), transparent 68%);
    pointer-events: none;
}

.rbm__x {
    position: absolute;
    top: 14px; right: 14px;
    width: 32px; height: 32px;
    border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .06);
    color: var(--cm-soft);
    font-size: 13px;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.rbm__x:hover { background: rgba(255, 255, 255, .14); color: #fff; }

.rbm__ic {
    position: relative;
    width: 66px; height: 66px;
    margin: 0 auto 18px;
    border-radius: 20px;
    display: flex; align-items: center; justify-content: center;
    font-size: 25px;
    color: #0a0800;
    background: linear-gradient(135deg, #FFE55C, #FFD700 55%, #d4a017);
    box-shadow: 0 12px 30px rgba(255, 215, 0, .28);
}

.rbm__title {
    position: relative;
    margin: 0 0 10px;
    font-size: 23px;
    font-weight: 900;
    letter-spacing: -.3px;
    color: #fff;
    line-height: 1.25;
}
.rbm__body {
    position: relative;
    margin: 0 auto;
    max-width: 400px;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--cm-soft);
}

.rbm__perks {
    position: relative;
    list-style: none;
    margin: 22px 0 0;
    padding: 16px 18px;
    text-align: left;
    border-radius: 13px;
    background: rgba(255, 255, 255, .035);
    border: 1px solid var(--cm-border);
}
.rbm__perks li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--cm-text);
}
.rbm__perks li + li { margin-top: 11px; }
.rbm__perks i {
    flex-shrink: 0;
    width: 18px; height: 18px;
    margin-top: 1px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 8px;
    color: #0a0800;
    background: var(--cm-gold);
}

.rbm__acts {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 24px;
}
/* Both routes as real buttons, side by side and equally weighted in size —
   the primary carries the emphasis through colour, not through the other one
   being demoted to small print. */
.rbm__pair { display: flex; gap: 10px; }
.rbm__cta,
.rbm__alt {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 20px;
    border-radius: 50px;
    font-size: 14.5px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .16s, box-shadow .16s, border-color .16s, background .16s;
}
.rbm__cta {
    background: linear-gradient(94deg, #FFE55C, #FFD700 55%, #d4a017);
    color: #0a0800;
    border: 1px solid transparent;
}
.rbm__cta:hover {
    color: #0a0800; text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(255, 215, 0, .32);
}
.rbm__alt {
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--cm-border-lit);
    color: var(--cm-text);
}
.rbm__alt:hover {
    color: #fff; text-decoration: none;
    border-color: var(--cm-gold);
    background: rgba(255, 255, 255, .09);
    transform: translateY(-2px);
}
/* Stacked below a phone's comfortable width for two pills side by side. */
@media (max-width: 420px) {
    .rbm__pair { flex-direction: column; }
}
.rbm__ghost {
    border: 0;
    background: transparent;
    color: var(--cm-dim);
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    padding: 8px;
    cursor: pointer;
}
.rbm__ghost:hover { color: var(--cm-text); }

@media (max-width: 560px) {
    .rbm { padding: 14px; align-items: flex-end; }
    .rbm__box { padding: 28px 20px 22px; border-radius: 20px 20px 14px 14px; }
    .rbm__title { font-size: 20px; }
    .rbm__ic { width: 58px; height: 58px; font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
    .rbm__scrim, .rbm__box { transition: none; }
    .rbm__box { transform: none; }
}

/* The unlock notice. Deliberately warm rather than an error state — it is an
   invitation to reserve, not a rejection. */
.gate {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 18px 20px;
    margin-bottom: 18px;
    border-radius: var(--cm-radius);
    background:
        radial-gradient(circle at 0% 0%, rgba(255, 215, 0, .10), transparent 60%),
        var(--cm-surface);
    border: 1px solid rgba(255, 215, 0, .3);
    cursor: pointer;
    transition: border-color .16s, transform .16s;
}
.gate:hover { border-color: rgba(255, 215, 0, .55); transform: translateY(-1px); }
.gate:focus-visible { outline: 2px solid var(--cm-gold); outline-offset: 2px; }
.gate__ic {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    color: var(--cm-gold);
    background: var(--cm-gold-dim);
    border: 1px solid rgba(255, 215, 0, .3);
}
.gate__txt { flex: 1; min-width: 190px; }
.gate__txt strong { display: block; font-size: 15.5px; font-weight: 800; color: var(--cm-text); }
.gate__txt p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--cm-soft); }
.gate__cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex-shrink: 0;
    padding: 11px 22px;
    border-radius: 50px;
    background: linear-gradient(94deg, #FFE55C, #FFD700 55%, #d4a017);
    color: #0a0800;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    transition: transform .16s, box-shadow .16s;
}
.gate__cta:hover {
    color: #0a0800;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(255, 215, 0, .3);
}

/* Inside the dashboard, where the surrounding card already supplies a border. */
.p-card__body > .gate { margin-bottom: 0; }

@media (max-width: 560px) {
    .gate { padding: 15px; gap: 12px; }
    .gate__cta { width: 100%; justify-content: center; }
}

.fd-more { padding: 10px 0; text-align: center; }
.fd-spin { color: var(--cm-dim); font-size: 13.5px; }
.fd-end { padding: 26px 0; text-align: center; color: var(--cm-dim); font-size: 13.5px; }

/* Announced to screen readers, invisible to everyone else — the skeleton
   carries the same message visually and is aria-hidden. */
.fd-sr {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
    white-space: nowrap;
}

/* ── Skeleton ─────────────────────────────────────────────
   Placeholder cards shaped like the real thing, so the column keeps its
   rhythm while the next page is in flight instead of collapsing to a
   spinner and then jolting back open. */

.fd-skel { display: grid; gap: 14px; margin-top: 14px; }

.fd-skel__card {
    background: var(--cm-card, #12121a);
    border: 1px solid var(--cm-line, rgba(255, 255, 255, .07));
    border-radius: 16px;
    padding: 16px;
}

.fd-skel__head { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.fd-skel__who { display: grid; gap: 7px; flex: 1; min-width: 0; }
.fd-skel__acts {
    display: flex; gap: 8px; margin-top: 14px; padding-top: 12px;
    border-top: 1px solid var(--cm-line, rgba(255, 255, 255, .07));
}

.sk {
    display: block; position: relative; overflow: hidden;
    border-radius: 7px;
    background: rgba(255, 255, 255, .055);
}

/* One sweep travelling across every placeholder. */
.sk::after {
    content: ''; position: absolute; inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg,
        transparent, rgba(255, 255, 255, .075) 55%, transparent);
    animation: skSweep 1.5s ease-in-out infinite;
}
@keyframes skSweep { to { transform: translateX(100%); } }

.sk--av { width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto; }
.sk--name { width: 44%; height: 13px; }
.sk--meta { width: 26%; height: 10px; }
.sk--line { width: 100%; height: 11px; margin-bottom: 8px; }
.sk--line-2 { width: 72%; }
.sk--media { width: 100%; height: 190px; border-radius: 12px; margin-top: 12px; }
.sk--act { flex: 1; height: 30px; border-radius: 9px; }

/* A post that just went up: a brief ring so the author can see it landed. */
.fp--fresh { animation: fpFresh 1.6s ease-out 1; }
@keyframes fpFresh {
    0%   { box-shadow: 0 0 0 0 rgba(250, 204, 21, .5); }
    100% { box-shadow: 0 0 0 14px rgba(250, 204, 21, 0); }
}

/* ── Show more members ────────────────────────────────── */

.cx__more {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; margin-top: 10px; padding: 11px 14px;
    border: 1px solid var(--cm-line, rgba(255, 255, 255, .09));
    border-radius: 12px;
    background: transparent;
    color: var(--cm-soft, #94a3b8);
    font: inherit; font-size: 13px; font-weight: 600;
    cursor: pointer;
    transition: background .16s, color .16s, border-color .16s;
}
.cx__more:hover {
    background: var(--cm-gold-dim, rgba(250, 204, 21, .1));
    border-color: var(--cm-gold, #facc15);
    color: var(--cm-gold, #facc15);
}
.cx__more:disabled { opacity: .6; cursor: default; }
.cx__more i { font-size: 11px; }
.cx__more[data-busy] i { animation: skSpin .7s linear infinite; }
@keyframes skSpin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .cx__more[data-busy] i { animation: none; }
}

/* Same placeholder vocabulary for the member panel while a filter loads. */
.cx__skel { display: grid; gap: 8px; }
.cx__skel-row {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 10px;
    border: 1px solid var(--cm-line, rgba(255, 255, 255, .07));
    border-radius: 12px;
}
.cx__skel-who { display: grid; gap: 6px; flex: 1; min-width: 0; }

@media (prefers-reduced-motion: reduce) {
    .sk::after { animation: none; }
    .fp--fresh { animation: none; }
}

/* ── Lightbox ─────────────────────────────────────────── */

.fp-lb {
    position: fixed; inset: 0; z-index: 9999;
    display: none;
    align-items: center; justify-content: center;
    background: rgba(4, 5, 9, .94);
    padding: 40px 60px;
}
.fp-lb.is-open { display: flex; }
.fp-lb img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; }
.fp-lb__x,
.fp-lb__nav {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, .2);
    background: rgba(255, 255, 255, .08);
    color: #fff;
    cursor: pointer;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s;
}
.fp-lb__x:hover, .fp-lb__nav:hover { background: rgba(255, 255, 255, .2); }
.fp-lb__x { top: 20px; right: 20px; width: 42px; height: 42px; font-size: 24px; line-height: 1; }
.fp-lb__nav { top: 50%; transform: translateY(-50%); width: 46px; height: 46px; font-size: 30px; line-height: 1; }
.fp-lb__nav--prev { left: 16px; }
.fp-lb__nav--next { right: 16px; }
.fp-lb__n {
    position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
    color: var(--cm-soft); font-size: 13px;
}

/* ── Community: members + feed on one page ────────────── */

/* Members left, feed right, the pair centred so posts stay a readable width
   rather than stretching across a wide monitor. */
.cx {
    display: grid;
    grid-template-columns: 300px minmax(0, 640px);
    gap: 26px;
    justify-content: center;
    align-items: start;
}
.cx__side { grid-column: 1; grid-row: 1; }
.cx__main { grid-column: 2; grid-row: 1; min-width: 0; }

/* The page scrolls, not the columns. The members panel sticks so it stays with
   you as the feed goes by, and its list scrolls inside itself when long. */
.cx__panel {
    position: sticky;
    top: 88px;
    background: var(--cm-surface);
    border: 1px solid var(--cm-border);
    border-radius: var(--cm-radius);
    padding: 16px;
}
.cx__panel-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin-bottom: 13px;
}
.cx__panel-head h2 {
    margin: 0; display: flex; align-items: center; gap: 9px;
    font-size: 12px; font-weight: 800; letter-spacing: 1.3px;
    text-transform: uppercase; color: var(--cm-dim);
}
.cx__panel-head h2 i { color: var(--cm-gold); }
.cx__count {
    padding: 2px 9px; border-radius: 50px;
    background: rgba(255, 255, 255, .06);
    font-size: 11.5px; font-weight: 800; color: var(--cm-soft);
}

.cx__search { position: relative; margin-bottom: 11px; }
.cx__search i {
    position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
    font-size: 12px; color: var(--cm-dim); pointer-events: none;
}
.cx__search input {
    width: 100%; height: 38px;
    padding: 0 13px 0 34px;
    border-radius: 50px;
    border: 1px solid var(--cm-border);
    background: rgba(255, 255, 255, .04);
    color: var(--cm-text); font: inherit; font-size: 13.5px;
}
.cx__search input:focus { outline: none; border-color: var(--cm-gold); }
.cx__search input::placeholder { color: var(--cm-dim); }
.cx__spin {
    position: absolute; right: 13px; top: 50%; transform: translateY(-50%);
    font-size: 11px; color: var(--cm-gold);
}

/* Swapping the list shouldn't make the panel jump. */
[data-cx-results] { min-height: 40px; }

.cx__filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.cx__filters .cm-chip { padding: 5px 11px; font-size: 12px; }

/* The list scrolls inside the panel so the page scroll stays with the feed. */
.cx__list {
    display: flex; flex-direction: column; gap: 2px;
    max-height: calc(100vh - 300px);
    overflow-y: auto;
    margin: 0 -6px;
    padding: 0 6px;
    overscroll-behavior: contain;
}
.cx__list::-webkit-scrollbar { width: 6px; }
.cx__list::-webkit-scrollbar-thumb { background: var(--cm-border-lit); border-radius: 6px; }
.cx__none { margin: 6px 0 0; font-size: 13px; color: var(--cm-soft); line-height: 1.6; }
.cx__none a { color: var(--cm-gold); }

/* One member. A row here, a card in the mobile rail below. */
.cmm {
    display: flex; align-items: center; gap: 10px;
    padding: 8px; border-radius: 10px;
    text-decoration: none;
    transition: background .15s;
}
.cmm:hover { background: rgba(255, 255, 255, .05); text-decoration: none; }
.cmm__av {
    position: relative;
    width: 38px; height: 38px; flex-shrink: 0;
    border-radius: 50%;
    background: var(--g);
    overflow: visible;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; font-weight: 900; color: #fff;
}
.cmm__av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.cmm__lock {
    position: absolute; right: -2px; bottom: -2px;
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--cm-surface); border: 1px solid var(--cm-border-lit);
    display: flex; align-items: center; justify-content: center;
    font-size: 7px; color: var(--cm-soft); font-style: normal;
}
.cmm__txt { min-width: 0; flex: 1; }
.cmm__name {
    display: block; font-size: 13.5px; font-weight: 700; color: var(--cm-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cmm__meta { display: flex; align-items: center; gap: 7px; margin-top: 2px; }
.cmm__role {
    font-size: 9px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
    padding: 1px 6px; border-radius: 50px;
}
.cmm__role--artist { background: var(--cm-gold-dim); color: var(--cm-gold); }
.cmm__role--fan { background: rgba(34, 197, 94, .14); color: #4ade80; }
.cmm__n { font-size: 10.5px; color: var(--cm-dim); }
.cmm__chips { display: flex; gap: 3px; flex-shrink: 0; }
.cmm__chip {
    width: 18px; height: 18px; border-radius: 5px;
    display: flex; align-items: center; justify-content: center;
    font-size: 9px; font-style: normal; color: #fff; background: var(--b);
}
/* The overflow count. Deliberately unbranded so it does not read as a platform. */
.cmm__chip--more {
    width: auto; min-width: 18px; padding: 0 5px;
    background: rgba(255, 255, 255, .08);
    color: var(--cm-soft, #94a3b8);
    font-size: 9.5px; font-weight: 800;
}

/* ── Responsive ───────────────────────────────────────── */

/* Tablet: the sidebar is too narrow to be useful, so members become the rail. */
@media (max-width: 1024px) {
    .cx { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .cx__side { grid-column: 1; grid-row: 1; }
    .cx__main { grid-column: 1; grid-row: 2; max-width: 640px; margin: 0 auto; width: 100%; }

    .cx__panel { position: static; padding: 14px; }
    .cx__panel-head { margin-bottom: 11px; }

    /* Horizontal rail: members stay reachable without pushing the feed off the
       screen, which is what a stacked member grid would do. */
    .cx__list {
        flex-direction: row;
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 8px;
        padding-bottom: 8px;
        scroll-snap-type: x proximity;
    }
    .cx__list::-webkit-scrollbar { height: 5px; }
    .cmm {
        position: relative;          /* the corner badge anchors to this */
        flex-direction: column;
        gap: 5px;
        width: 116px;
        flex-shrink: 0;
        /* Extra room at the top is the badge's lane. Without it the avatar
           started level with the badge and the two collided in the corner. */
        padding: 22px 8px 12px;
        text-align: center;
        border: 1px solid var(--cm-border);
        background: rgba(255, 255, 255, .02);
        scroll-snap-align: start;
    }
    .cmm__av { width: 46px; height: 46px; font-size: 18px; }
    .cmm__txt { width: 100%; flex: none; }
    /* Two lines instead of one clipped one: "Md Masuk Mia" was rendering as
       "Md Masuk…", which tells you nothing about who it is. The tile is wider
       to match, and still narrow enough that the next one peeks in and the row
       reads as scrollable. */
    .cmm__name {
        font-size: 11.5px;
        line-height: 1.3;
        white-space: normal;
        text-overflow: clip;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        /* Holds the tile height steady whether a name takes one line or two. */
        min-height: 2.6em;
    }
    /* The role badge moves to the tile's top corner. Inline it cost a whole row
       of height on every tile to say one word. */
    .cmm__meta { display: contents; }
    .cmm__role {
        position: absolute;
        top: 6px; right: 6px;
        z-index: 1;
        font-size: 8px;
        padding: 2px 5px;
        letter-spacing: .4px;
        /* Sits in its own lane above the avatar — see .cmm's top padding. */
        line-height: 1.4;
    }
    .cmm__n { display: none; }
    /* The platform icons are the point of the directory — they were switched
       off here, so a phone showed no way to tell one member from another. */
    .cmm__chips { display: flex; justify-content: center; margin-top: 6px; }
}

@media (max-width: 767px) {
    .fd-wrap { max-width: none; }
    .cx__main { max-width: none; }
    /* 84px could not hold a real name on two lines — "Bartholomew Fitzgerald"
       still came out clipped. Wide enough to read, narrow enough that the next
       tile peeks in and the row reads as scrollable. */
    .cmm { width: 108px; }
    .cmm__av { width: 42px; height: 42px; font-size: 16px; }
    .fc { padding: 13px; border-radius: 12px; }
    .fc__tool span { display: none; }
    .fc__tool { padding: 9px 14px; }
    .fc__bar { gap: 8px; }
    .fp { border-radius: 12px; }
    .fp__head { padding: 12px 13px 0; }
    .fp__body { padding: 10px 13px 0; font-size: 14px; }
    .fp__tally { padding: 10px 13px 0; }
    .fp__acts { margin: 8px 8px 0; }
    .fp__act { font-size: 12.5px; gap: 6px; }
    .fp__comments { padding: 6px 13px 12px; }
    .fp__play { width: 48px; height: 48px; font-size: 15px; }
    .fp__pick { width: 34px; height: 34px; font-size: 20px; }
    .fp-lb { padding: 16px; }
    .fp-lb__nav { width: 38px; height: 38px; font-size: 24px; }
    .fp-lb__nav--prev { left: 6px; }
    .fp-lb__nav--next { right: 6px; }
    .fp-cm__replies { margin-left: 4px; padding-left: 9px; }
}

@media (prefers-reduced-motion: reduce) {
    .fp__shot img,
    .fp__picker,
    .fp__pick,
    .fp__play { transition: none !important; animation: none !important; }
    .fp__shot:hover img { transform: none; }
}

/* ── Upload progress ─────────────────────────────────────────
   A full-width row per file, directly under the Photo / Video / Link buttons.
   Progress used to live inside the 90px preview square, which is why it was
   there but unreadable. The square now appears only once the file is stored. */

.fc__guide {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.6;
    color: var(--cm-dim);
}
.fc__guide i { color: var(--cm-gold); margin-top: 2px; }
.fc__guide strong { color: var(--cm-soft); font-weight: 600; }

.fc__uploads {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--cm-border);
}

.fc__u {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 13px;
    border: 1px solid var(--cm-border);
    border-radius: 10px;
    background: var(--cm-surface-2);
    animation: fcRowIn 0.2s ease both;
}

@keyframes fcRowIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

.fc__u-ico  { flex: 0 0 auto; font-size: 14px; color: var(--cm-dim); }
.fc__u-main { flex: 1 1 auto; min-width: 0; }

.fc__u-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.fc__u-name {
    font-size: 12.5px;
    color: var(--cm-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fc__u-pct {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 700;
    color: var(--cm-gold);
    font-variant-numeric: tabular-nums;
}

.fc__u-track {
    height: 6px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.fc__u-fill {
    position: relative;
    height: 100%;
    width: 0;
    border-radius: 6px;
    overflow: hidden;
    background: linear-gradient(90deg, var(--cm-gold), #ffe680);
    /* Slower than the events arrive, so the bar glides rather than stepping. */
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* A sheen while bytes are in flight: a bar that only grows looks frozen
   whenever the connection pauses. */
.fc__u-fill::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    animation: fcSheen 1.2s ease-in-out infinite;
}

@keyframes fcSheen {
    from { transform: translateX(-100%); }
    to   { transform: translateX(100%); }
}

.fc__u-meta {
    margin-top: 5px;
    font-size: 11px;
    color: var(--cm-dim);
    font-variant-numeric: tabular-nums;
}
.fc__u-done { color: var(--cm-soft); font-weight: 600; }

/* Bytes are up, the server is still working. */
.fc__u.is-processing .fc__u-fill {
    width: 100% !important;
    background: linear-gradient(90deg, var(--cm-gold-dim), var(--cm-gold), var(--cm-gold-dim));
    background-size: 200% 100%;
    animation: fcPulse 1.1s linear infinite;
}
.fc__u.is-processing .fc__u-fill::after { display: none; }
.fc__u.is-processing .fc__u-pct { color: var(--cm-dim); }

@keyframes fcPulse {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

.fc__u.is-complete .fc__u-fill { background: var(--cm-green); }
.fc__u.is-complete .fc__u-fill::after { display: none; }
.fc__u.is-complete .fc__u-pct  { color: var(--cm-green); }
.fc__u.is-complete .fc__u-meta { color: var(--cm-green); }

.fc__u.is-failed {
    border-color: rgba(239, 68, 68, 0.45);
    background: rgba(239, 68, 68, 0.07);
}
.fc__u.is-failed .fc__u-ico { color: #f87171; }

.fc__u-msg { font-size: 11.5px; line-height: 1.55; color: #fca5a5; }

.fc__u-acts { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }

.fc__u-retry,
.fc__u-drop {
    font: inherit;
    font-size: 11px;
    padding: 5px 10px;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid var(--cm-border);
    background: rgba(255, 255, 255, 0.05);
    color: var(--cm-soft);
    transition: background 0.15s ease, color 0.15s ease;
}
.fc__u-retry { border-color: var(--cm-gold-dim); color: var(--cm-gold); }
.fc__u-retry:hover { background: var(--cm-gold-dim); }
.fc__u-drop  { padding: 5px 8px; }
.fc__u-drop:hover { background: rgba(255, 255, 255, 0.1); color: var(--cm-text); }

/* The same rows inside the post edit box. */
.fp__upl {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 8px 0;
    padding: 10px 12px;
    border: 1px solid var(--cm-border);
    border-radius: 9px;
    background: var(--cm-surface-2);
}
.fp__upl-main { flex: 1 1 auto; min-width: 0; }
.fp__upl-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 10px; margin-bottom: 6px;
}
.fp__upl-name {
    font-size: 12px; color: var(--cm-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fp__upl-pct { font-size: 11.5px; font-weight: 700; color: var(--cm-gold); font-variant-numeric: tabular-nums; }
.fp__upl-track { height: 6px; border-radius: 6px; background: rgba(255,255,255,0.1); overflow: hidden; }
.fp__upl-fill {
    height: 100%; width: 0; border-radius: 6px;
    background: linear-gradient(90deg, var(--cm-gold), #ffe680);
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.fp__upl-meta { margin-top: 5px; font-size: 11px; color: var(--cm-dim); font-variant-numeric: tabular-nums; }
.fp__upl.is-processing .fp__upl-fill {
    width: 100% !important;
    background: linear-gradient(90deg, var(--cm-gold-dim), var(--cm-gold), var(--cm-gold-dim));
    background-size: 200% 100%;
    animation: fcPulse 1.1s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .fc__u { animation: none; }
    .fc__u-fill, .fp__upl-fill { transition: none; }
    .fc__u-fill::after,
    .fc__u.is-processing .fc__u-fill,
    .fp__upl.is-processing .fp__upl-fill { animation: none; }
}

/* A poster frame alone reads as a photo, so a video keeps a play badge over it. */
.fc__tile-play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    border: 1.5px solid rgba(255, 255, 255, 0.85);
    color: #fff;
    font-size: 12px;
    pointer-events: none;
    /* Nudged right: the glyph's own bearing makes a centred triangle look left. */
    padding-left: 3px;
    box-sizing: border-box;
}

/* The poster is a frame from the clip, so it fills the tile like a photo. */
.fc__tile--video img { width: 100%; height: 100%; object-fit: cover; }