/* Compact discussion surface for Station pages. */
/*
 * The station template prints related releases before comments.  Flex ordering
 * fixes the presentation on the initial server render without moving nodes in
 * JavaScript, so it remains stable with the parent theme's PJAX updates.
 */
.single-station .entry-content-inner {
    display: flex;
    flex-direction: column;
}

.single-station .entry-content-inner > .user-bio { order: 1; }
.single-station .entry-content-inner > .station-content { order: 2; }
.single-station .entry-content-inner > .station-release { order: 3; }
.single-station .entry-content-inner > #comments.ofm-comments { order: 4; }
.single-station .entry-content-inner > .station-more-from { order: 5; }
.single-station .entry-content-inner > .entry-term { order: 6; }

#comments.ofm-comments {
    width: min(100%, 760px);
    align-self: center;
    max-width: 960px;
    margin: 28px auto 36px;
    padding: 24px;
    color: #f8f8f8;
    background: linear-gradient(145deg, #191919, #111);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 20px;
}
.ofm-comments *, .ofm-comments *::before, .ofm-comments *::after { box-sizing: border-box; }
.ofm-comments__header { display:flex; align-items:center; justify-content:space-between; gap:14px; margin:0 0 18px; }
.ofm-comments__header p { margin:0; color:#ffcb28; font-size:.7rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; }
.ofm-comments__header h2 { margin:5px 0 0; color:#fff; font-size:1.35rem; line-height:1.1; }
.ofm-comments__count { flex:0 0 auto; padding:6px 9px; color:#cfcfcf; background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.11); border-radius:999px; font-size:.72rem; font-weight:700; line-height:1.15; white-space:nowrap; }
.ofm-comments__list { display:grid; gap:10px; margin:0 0 20px; padding:0; list-style:none; }
.ofm-comments .children { display:grid; gap:10px; margin:10px 0 0 28px; padding:0; list-style:none; }
.ofm-comment { margin:0; }
.ofm-comment__body { display:flex; gap:11px; padding:13px; background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.09); border-radius:14px; }
.ofm-comment__avatar img { display:block; width:36px; height:36px; border-radius:50%; object-fit:cover; }
.ofm-comment__content { min-width:0; flex:1; }
.ofm-comment__meta { display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:.86rem; }
.ofm-comment__meta strong { color:#fff; }
.ofm-comment__meta time { color:#999; font-size:.76rem; }
.ofm-comment__text { margin:5px 0 7px; color:#d2d2d2; font-size:.9rem; line-height:1.45; word-break:break-word; }
.ofm-comment__text p { margin:0; }
.ofm-comment__actions { display:flex; flex-wrap:wrap; gap:4px 8px; align-items:center; margin:-4px; font-size:.73rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.ofm-comment__actions a, .ofm-comment__delete { display:inline-flex; align-items:center; min-height:40px; padding:0 8px; color:#ffcb28; background:none; border:0; border-radius:8px; cursor:pointer; font:inherit; text-decoration:none; }
.ofm-comment__actions a:hover, .ofm-comment__actions a:focus-visible, .ofm-comment__delete:hover, .ofm-comment__delete:focus-visible { color:#161000; background:#ffcb28; outline:none; }
.ofm-comment__delete { color:#aaa; }
.ofm-comments .comment-respond { margin-top:14px; padding-top:18px; border-top:1px solid rgba(255,255,255,.1); }
.ofm-comments .comment-reply-title { margin:0 0 10px; font-size:1rem; }
.ofm-comments .comment-form { display:grid; gap:10px; margin:0; }
.ofm-comments .comment-form p { margin:0; }
.ofm-comments .comment-form label { position:static !important; display:block !important; width:auto !important; height:auto !important; margin:0 0 6px !important; padding:0 !important; color:#fff !important; font-size:.78rem !important; font-weight:700 !important; transform:none !important; clip:auto !important; }
.ofm-comments .comment-form textarea { display:block; width:100%; min-height:82px; padding:11px 12px; resize:vertical; color:#f5f5f5; background:#101010; border:1px solid #393939; border-radius:12px; outline:0; font:inherit; }
.ofm-comments .comment-form textarea:focus { border-color:#ffcb28; box-shadow:0 0 0 3px rgba(255,203,40,.12); }
.ofm-emoji-tray { display:flex; gap:5px; flex-wrap:wrap; }
.ofm-emoji-tray button { display:grid; width:29px; height:29px; place-items:center; padding:0; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:9px; cursor:pointer; font-size:.86rem; transition:transform .16s ease, background-color .16s ease; }
.ofm-emoji-tray button:hover, .ofm-emoji-tray button:focus-visible { background:rgba(255,203,40,.14); transform:translateY(-1px); }
.ofm-comments__submit { width:auto !important; min-height:36px; margin:0 !important; padding:0 16px !important; color:#161000 !important; background:#ffcb28 !important; border:0 !important; border-radius:999px !important; box-shadow:none !important; cursor:pointer; font-weight:800 !important; }
.ofm-comments__gate { display:flex; align-items:center; gap:10px; padding:10px 12px; color:#bbb; background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.09); border-radius:12px; font-size:.88rem; }
.ofm-comments__gate p { flex:1; margin:0; }
.ofm-comments__gate a { display:inline-flex; align-items:center; min-height:40px; padding:0 10px; color:#161000; background:#ffcb28; border-radius:999px; font-weight:800; text-decoration:none; white-space:nowrap; }
.ofm-comments__gate a:hover, .ofm-comments__gate a:focus-visible { background:#fff; outline:none; }
.ofm-comments__closed { margin:0; color:#999; }
.ofm-comments .wpulike, .ofm-comments .comment-like, .ofm-comments .comment-reaction { display:none !important; }

@media (max-width: 640px) {
    #comments.ofm-comments { width:auto; margin:20px 14px 28px; padding:17px; border-radius:16px; }
    .ofm-comments .children { margin-left:14px; }
    .ofm-comment__body { padding:11px; }
}

@media (max-width: 420px) {
    .ofm-comments__header { align-items:flex-start; flex-wrap:wrap; }
    .ofm-comments__count { margin-top:2px; margin-left:auto; }
    .ofm-comments__gate { flex-wrap:wrap; }
    .ofm-comments__gate a { width:100%; justify-content:center; }
}