/*
 * js/pages/forum/forum.css: what /forum adds on top of pons.css. The frame is pons's own forum
 * (.memestock-layout, .memestock-post, .memestock-composer, .memestock-sidebar-card); this file drops the vote rail
 * (posts on the board are not voted on), adds the title field, the room marks in the sidebar and the room card.
 */
.ponduo-forum-main .memestock-layout { padding: 0 0 24px; }
.ponduo-post { grid-template-columns: minmax(0, 1fr); }
.ponduo-post.is-reply { padding: 12px 0 12px 14px; border-left: 2px solid var(--divider); border-bottom: 0; margin-bottom: 8px; }
.memestock-post-body p { margin: 0; font-size: 14px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.memestock-post.is-expanded .memestock-post-body p { font-size: 15px; }
.memestock-post-title { overflow-wrap: anywhere; }
h1.memestock-post-title { font-size: 21px; }
.ponduo-post-link { color: var(--text-primary); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 2px; overflow-wrap: anywhere; }
.memestock-header h1 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; overflow-wrap: anywhere; }
.memestock-header > div:first-child { min-width: 0; }

/* the post box: a title line in the textarea's look, the byte counters, the reason a post cannot go */
.ponduo-composer { padding: 14px; border-radius: var(--radius-card); border: 1px solid var(--divider); background: var(--bg-white); }
.ponduo-composer .memestock-textarea { background: transparent; }
.ponduo-title-input { resize: none; min-height: 44px; }
.ponduo-composer-note { margin: 0; font-size: 12px; color: var(--accent-red); }
.ponduo-composer-note:empty { display: none; }
.memestock-composer-count.is-over { color: var(--accent-red); }
.ponduo-room-line { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-muted); }
.memestock-textarea:disabled { opacity: .7; cursor: not-allowed; }
.ponduo-forum-count { margin: 0; font-size: 12px; color: var(--text-muted); }
.ponduo-open-launch { border: 1px solid var(--divider); }

/* the holder rooms list: a small mark before each ticker */
.memestock-sidebar-ranks li a { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ponduo-room-mark { width: 18px; height: 18px; border-radius: 6px; overflow: hidden; flex: none; display: inline-grid; place-items: center; background: var(--panel-blue); }
.ponduo-room-mark img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ponduo-room-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ponduo-rooms-empty { color: var(--text-muted); font-size: 13px; padding: 4px 0; }
.memestock-sidebar-card > .memestock-action { align-self: flex-start; }

/* the room card above the list on a room page */
.ponduo-room-card-head { display: flex; gap: 12px; align-items: center; min-width: 0; }
.ponduo-room-card-head > div { min-width: 0; }
.ponduo-room-card-head h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ponduo-room-card-img { width: 44px; height: 44px; border-radius: 14px; overflow: hidden; flex: none; display: inline-grid; place-items: center; background: var(--panel-blue); }
.ponduo-room-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ponduo-room-card .ui-btn { width: 100%; }

@media (max-width: 900px) { .memestock-sidebar { position: static; } }
@media (max-width: 560px) {
  .memestock-header { flex-direction: column; align-items: stretch; }
  .memestock-header-actions { justify-content: flex-start; flex-wrap: wrap; }
}
@media (max-width: 768px) {
  .memestock-primary, .memestock-action, .memestock-sort-tabs button, .memestock-back, .ponduo-room-card .ui-btn { min-height: 44px; }
  .memestock-sidebar-ranks li a { min-height: 40px; }
}

/* pons's dark badge rule wins over the lime "mod" look; keep the creator badge lime and readable */
html[data-theme="dark"] .memestock-badge.memestock-badge-mod, .memestock-badge.memestock-badge-mod { background: var(--accent); color: var(--accent-contrast); }
.memestock-main > h1 { margin: 0; font-size: 26px; font-weight: 500; letter-spacing: var(--tracking); }
@media (max-width: 768px) { .memestock-main .ui-btn-sm { min-height: 44px; } }