/* Post Room (#482, #211). Uses ONLY --sg-* tokens and shared component classes; no colour, font or size is invented here.
   Desktop (1024 and up): the board at about 62% and the Post Room at about 38%. Phones: the board alone, the Post Room a full-screen sheet. */
.pr-split { display: flex; gap: var(--sg-space-2); align-items: stretch; min-width: 0; }
.pr-split__board { flex: 0 0 var(--pr-board, 78%); min-width: 0; transition: flex-basis 0.25s ease; }
.pr-split--dragging .pr-split__board { transition: none; }
.pr-side { flex: 1 1 0; min-width: 0; }
.pr-side > .pr { position: sticky; top: var(--sgx-top-h, 120px); height: calc(100vh - var(--sgx-top-h, 120px) - var(--sg-space-4)); max-height: none; }
.pr-split__handle { flex: 0 0 10px; cursor: col-resize; border-radius: var(--sg-radius-pill); background: var(--sg-border); align-self: stretch; touch-action: none; }
.pr-split__handle:hover, .pr-split__handle:focus-visible, .pr-split--dragging .pr-split__handle { background: var(--sg-accent); outline: none; }
.pr-board { display: block; width: 100%; height: calc(100vh - 190px); min-height: 640px; border: 1px solid var(--sg-border); border-radius: var(--sg-radius-l); background: var(--sg-bg); }

.pr { display: flex; flex-direction: column; gap: var(--sg-space-4); padding: var(--sg-space-4); background: var(--sg-surface); border: 1px solid var(--sg-border);
  border-radius: var(--sg-radius-l); color: var(--sg-text); font-family: var(--sg-font-body); min-width: 0;
  max-height: calc(100vh - 190px); min-height: 640px; overflow-y: auto; }
.pr-empty { display: flex; flex-direction: column; gap: var(--sg-space-2); padding: var(--sg-space-6) var(--sg-space-3); }
.pr-empty__title, .pr-h { font-family: var(--sg-font-display); font-weight: var(--sg-fw-regular); font-size: var(--sg-fs-xl); line-height: var(--sg-lh-tight); margin: 0; }
.pr-top { display: flex; align-items: center; gap: var(--sg-space-3); }
.pr-top__title { min-width: 0; flex: 1 1 auto; }
.pr-back { display: none; }
.pr-sub { margin: var(--sg-space-1) 0 0; color: var(--sg-text-muted); font-size: var(--sg-fs-s); }
.pr-none { margin: 0; color: var(--sg-text-muted); font-size: var(--sg-fs-s); }

.pr-hero { display: flex; flex-direction: column; gap: var(--sg-space-3); }
.pr-media { display: flex; flex-direction: column; gap: var(--sg-space-1); }
.pr-media__img { display: block; width: 100%; max-height: 380px; object-fit: contain; background: var(--sg-media-bg); border-radius: var(--sg-radius-m); }
.pr-media__none { display: flex; align-items: center; justify-content: center; min-height: 220px; padding: var(--sg-space-4); text-align: center; color: var(--sg-text-muted);
  background: var(--sg-media-bg); border-radius: var(--sg-radius-m); border: 1px dashed var(--sg-border); }
.pr-chips, .pr-status, .pr-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sg-space-2); }
.pr-chip[data-state="needs"] { border-color: var(--sg-accent); color: var(--sg-text); background: var(--sg-accent-soft); }
.pr-chip[data-state="progress"] { border-color: var(--sg-state-progress); background: var(--sg-state-progress-soft); }
.pr-badge[data-state="live"] { background: var(--sg-state-live-soft); color: var(--sg-state-live); }
.pr-badge[data-state="queued"], .pr-badge[data-state="accepted"] { background: var(--sg-state-scheduled-soft); color: var(--sg-state-scheduled); }
.pr-badge[data-state="held"], .pr-badge[data-state="failed"], .pr-badge[data-state="fail"] { background: var(--sg-state-failed-soft); color: var(--sg-state-failed); }
.pr-badge[data-state="pass"] { background: var(--sg-success-soft); color: var(--sg-success); }

.pr-sec { display: flex; flex-direction: column; gap: var(--sg-space-2); padding-top: var(--sg-space-3); border-top: 1px solid var(--sg-border); }
.pr-sec__title { margin: 0; font: var(--sg-fw-bold) var(--sg-fs-xs) var(--sg-font-body); letter-spacing: var(--sg-tracking-label); text-transform: uppercase; color: var(--sg-accent); }
.pr-kvs { display: flex; flex-direction: column; gap: var(--sg-space-2); }
.pr-kv { display: grid; grid-template-columns: minmax(6.5em, 30%) 1fr; gap: var(--sg-space-3); align-items: baseline; }
.pr-kv__k { color: var(--sg-text-muted); font-size: var(--sg-fs-s); }
.pr-kv__v { font-size: var(--sg-fs-s); overflow-wrap: anywhere; }
.pr-caption__text { margin: 0 0 var(--sg-space-2); white-space: pre-wrap; overflow-wrap: anywhere; line-height: var(--sg-lh-body); }
.pr-score { display: flex; align-items: center; gap: var(--sg-space-3); }
.pr-score__n { font-family: var(--sg-font-display); font-size: var(--sg-fs-2xl); line-height: var(--sg-lh-tight); }
.pr-findings, .pr-thread { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sg-space-2); }
.pr-finding { display: flex; gap: var(--sg-space-2); align-items: baseline; font-size: var(--sg-fs-s); }
.pr-finding__mark { flex: 0 0 auto; min-width: 3.2em; font-weight: var(--sg-fw-semibold); }
.pr-finding[data-state="fail"] .pr-finding__mark { color: var(--sg-state-failed); }
.pr-finding[data-state="pass"] .pr-finding__mark { color: var(--sg-success); }
.pr-reco { margin: 0; line-height: var(--sg-lh-body); }
.pr-thread__item { display: flex; flex-direction: column; gap: var(--sg-space-1); padding-left: var(--sg-space-3); border-left: 2px solid var(--sg-border-strong); font-size: var(--sg-fs-s); overflow-wrap: anywhere; }
.pr-thread__at { color: var(--sg-text-muted); font-size: var(--sg-fs-xs); }
.pr-actions { display: flex; flex-direction: column; gap: var(--sg-space-3); }
.pr-note { width: 100%; min-height: calc(var(--sg-tap) * 2); box-sizing: border-box; }
.pr-result { margin: 0; color: var(--sg-text); font-size: var(--sg-fs-s); min-height: 1.2em; }

@media (max-width: 1023.98px) {
  .pr-split { display: block; }
  .pr-split__handle { display: none; }
  .pr-side > .pr { position: static; height: auto; }
  .pr-side > .pr.pr--open { position: fixed; height: auto; }
  .pr-split__board { width: 100%; }
  .pr-side { position: static; }
  .pr { display: none; }
  .pr.pr--open { display: flex; position: fixed; inset: 0; z-index: var(--sg-z-sheet); max-height: none; min-height: 0; border-radius: 0; border: 0; }
  .pr-back { display: inline-flex; flex: 0 0 auto; }
  .pr-board { height: calc(100vh - 220px); min-height: 480px; }
}