/* wall.css, structural/layout rules only. All look-and-feel (colors, borders,
   rotation, fonts) lives in /wall/themes/*.css so admin can swap themes
   without this file changing. */

.wall-root { max-width: 900px; margin: 0 auto; padding: 10px 20px 40px; box-sizing: border-box; }
.wall-root * { box-sizing: border-box; }

.wall-heading { text-align: center; margin-bottom: 4px; }
.wall-heading p { margin: 6px 0 20px; }

.wall-controls { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.wall-sort { display: flex; gap: 6px; }

.wall-authbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 0.8rem; margin-bottom: 10px; }
.wall-authbar .switch { cursor: pointer; text-decoration: underline; background: none; border: none; padding: 0; font: inherit; }

.wall-compose { margin: 0 auto 26px; max-width: 560px; }
.wall-compose textarea { width: 100%; min-height: 60px; resize: vertical; }
.wall-compose-file { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 0.78rem; flex-wrap: wrap; }
.wall-filelabel { cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.wall-filelabel input[type=file] { display: none; }
.wall-filelabel-small { font-size: 0.9rem; padding: 0 2px; }
.wall-compose-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.wall-compose-foot input[type=text] { width: 140px; }

.wall-attachment-img { display: block; margin-bottom: 10px; }
.wall-attachment-img img { max-width: 100%; max-height: 220px; border-radius: 6px; display: block; }
.wall-attachment-file { display: inline-block; margin-bottom: 10px; text-decoration: none; }

.wall-authform { display: none; gap: 8px; flex-wrap: wrap; margin: 10px 0 20px; max-width: 400px; margin-left: auto; margin-right: auto; }
.wall-authform.open { display: flex; }
.wall-authform input { flex: 1 1 120px; }
.wall-authform .err { width: 100%; font-size: 0.78rem; }

.wall-grid { columns: 2 280px; column-gap: 18px; }
@media (max-width: 700px) { .wall-grid { columns: 1; } }

.wall-post { break-inside: avoid; display: inline-block; width: 100%; margin: 0 0 16px; padding: 14px 16px 12px; }

.wall-post-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.wall-post-body { margin: 0 0 12px; line-height: 1.45; white-space: pre-wrap; }
.wall-post-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.wall-reacts { display: flex; gap: 10px; }
.wall-reacts button { background: none; border: none; cursor: pointer; padding: 0; font: inherit; }
.wall-reacts button:disabled { cursor: default; opacity: 0.55; }
.wall-reacts button.is-active { font-weight: 700; opacity: 1; }
.wall-replylink { background: none; border: none; cursor: pointer; padding: 0; margin-left: auto; text-decoration: underline; font: inherit; }

.wall-thread { margin-top: 12px; padding-left: 14px; display: none; }
.wall-thread.open { display: block; }
.wall-reply { padding: 8px 10px; margin-bottom: 8px; }
.wall-reply-head { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 3px; }

.wall-replybox { display: flex; gap: 8px; margin-top: 8px; }
.wall-replybox input[type=text] { flex: 1; }

.wall-loadmore { display: block; margin: 6px auto 0; }
.wall-annot { text-align: center; margin-top: 10px; font-size: 0.7rem; }
.wall-empty { text-align: center; padding: 30px 10px; }
.wall-standalone-link { text-align: center; margin: 20px 0; }