.wall-page { max-width: 720px; margin: 0 auto; padding: var(--app-space-6) 0 var(--rhythm); display: grid; gap: var(--app-space-4); }
.wall-narrow h1, .wall-head h1 { margin: 0; }
.wall-head { display: grid; gap: var(--app-space-3); }
.wall-head p { margin: 0; max-width: 66ch; }
.wall-head-actions { display: grid; gap: var(--app-space-2); }
.wall-filter { overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: thin; }
.wall-filter ul { display: flex; gap: var(--app-space-2); list-style: none; margin: 0; padding: 0 0 var(--app-space-2); width: max-content; }
.wall-filter .tp-pill[aria-current="page"] { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.wall-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--app-space-3); }
.wall-card { display: grid; gap: var(--app-space-2); padding: var(--app-space-4); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; transition: background-color .3s; }
.wall-card:hover { background: color-mix(in srgb, var(--ink) 4%, var(--white)); }
.wall-card:focus-visible, .wall-report:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; box-shadow: 0 0 0 5px var(--focus-gap), 0 0 0 6px var(--focus-hair); }
.wall-card-own { border-left: 4px solid var(--burgundy); }
.wall-card-title { font-size: var(--app-headline-size); line-height: var(--app-headline-line); font-weight: var(--app-label-weight); overflow-wrap: anywhere; }
.wall-meta { margin: 0; font-size: var(--app-body-sm-size); line-height: var(--app-body-sm-line); color: var(--ink-muted); }
.wall-tags { display: flex; flex-wrap: wrap; gap: var(--app-space-2); }
.wall-tags:empty { display: none; }
.wall-tag { display: inline-block; padding: 2px var(--app-space-3); border: 1px solid var(--control-edge); border-radius: var(--radius-pill); font-size: var(--app-body-sm-size); line-height: var(--app-body-sm-line); margin: 0; }
.wall-tag-team { border-color: color-mix(in srgb, var(--burgundy) 15%, transparent); color: var(--burgundy); }
.wall-more { text-align: center; margin: 0; }
.wall-more .btn { width: 100%; }
.wall-empty { display: grid; justify-items: center; gap: var(--app-space-4); text-align: center; padding: var(--app-space-7) 0; }
.wall-empty .icon, .wall-stop-icon { width: 48px; height: 48px; display: inline-flex; }
.wall-empty .icon svg, .wall-stop-icon svg { width: 100%; height: 100%; }
.wall-empty p { margin: 0; max-width: 40ch; }
.wall-back { display: inline-flex; align-items: center; min-height: var(--app-tap); color: var(--ink); font-weight: var(--app-label-weight); }
.wall-title { font-size: var(--app-title-size); line-height: var(--app-title-line); overflow-wrap: anywhere; margin: 0; }
.wall-text { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 66ch; margin: 0; }
.wall-body { font-size: var(--app-body-size); line-height: var(--app-body-line); }
.wall-h2 { font-size: var(--app-headline-size); line-height: var(--app-headline-line); margin: var(--app-space-4) 0 0; }
.wall-reply { display: grid; gap: var(--app-space-2); padding: var(--app-space-4); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.wall-reply-team { border-color: color-mix(in srgb, var(--burgundy) 15%, transparent); }
.wall-reply-label { margin: 0; font-weight: var(--app-label-weight); }
.wall-caption { margin: 0; font-size: var(--app-caption-size, var(--app-body-sm-size)); color: color-mix(in srgb, var(--void) 62%, transparent); }
.wall-reason { margin: 0; font-size: var(--app-body-sm-size); line-height: var(--app-body-sm-line); }
.wall-report { display: inline-flex; align-items: center; min-height: var(--app-tap); color: var(--ink-muted); font-size: var(--app-body-sm-size); text-decoration: underline; }
.wall-form-page { display: flex; justify-content: center; padding: var(--app-space-6) 0 var(--rhythm); }
.wall-form { width: 100%; max-width: 560px; display: grid; gap: var(--app-space-4); }
.wall-form h1 { margin: 0; }
.wall-form p { margin: 0; }
.wall-help { font-size: var(--app-body-sm-size); line-height: var(--app-body-sm-line); color: var(--ink-muted); margin: var(--app-space-2) 0 0; }
.field textarea, .field select, .wall-comment textarea { width: 100%; padding: var(--app-space-3) var(--app-space-4); border: 1px solid var(--control-edge); border-radius: var(--radius-sm); background: var(--ground); color: var(--ink); font: inherit; font-size: var(--app-body-size); line-height: var(--app-body-line); }
.field select { min-height: 52px; }
.field textarea[aria-invalid="true"], .field select[aria-invalid="true"] { border: 1.5px solid var(--burgundy); }
.wall-rules { margin: 0; padding-left: var(--app-space-5); display: grid; gap: var(--app-space-2); }
.wall-consents { border: 0; padding: 0; margin: 0; }
.wall-legend { font-weight: var(--app-label-weight); padding: 0; margin-bottom: var(--app-space-2); }
.wall-comment { display: grid; gap: var(--app-space-3); margin-top: var(--app-space-4); }
.wall-stop { min-height: 70dvh; display: flex; align-items: center; justify-content: center; padding: var(--app-space-6) 0; }
.wall-stop-card { max-width: 480px; display: grid; gap: var(--app-space-4); justify-items: start; }
.wall-stop-card h1, .wall-stop-card p { margin: 0; }
@media (max-width: 767px) {
  .wall-report-dialog { width: 100%; max-width: none; margin: auto 0 0; border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
}
@media (min-width: 768px) {
  .wall-head-actions { display: flex; align-items: center; gap: var(--app-space-4); }
  .wall-filter { margin-inline: 0; padding-inline: 0; }
  .wall-filter ul { width: auto; flex-wrap: wrap; }
  .wall-more .btn { width: auto; }
}


/* Nová otázka na desktope: širší formulár, téma a nadpis vedľa seba (mobil bez zmeny). */
@media (min-width: 1000px) {
  .wall-form-page { padding-top: var(--app-space-7); }
  .wall-form { max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--app-space-5); padding: var(--app-space-7); }
  .wall-form > * { grid-column: 1 / -1; }
  .wall-form > .field:has(#topic), .wall-form > .field:has(#title) { grid-column: auto; }
  .wall-form > .btn-primary.full { justify-self: start; width: auto; min-width: 300px; }
  .wall-form > .wall-login { text-align: left; }
}