/* Proposals review queue + entity version history / blame. Classes prefixed pr-. Reuses the app tokens so it is
   correct in light and dark. Kept self-contained and defensive. */
#v-proposals.on { display: grid; grid-template-columns: var(--list) minmax(0, 1fr); }
@media (max-width: 860px) { #v-proposals.on { grid-template-columns: 1fr; } #v-proposals .pr-center { display: none; } #v-proposals.pr-detail .pr-list { display: none; } #v-proposals.pr-detail .pr-center { display: block; } }

.pr-list { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); background: var(--bg); }
.pr-lh { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-3) var(--sp-2) var(--sp-4); }
.pr-lh h2 { font-size: var(--fs-4); font-weight: 600; }
.pr-lf { padding: 0 var(--sp-3) var(--sp-2) var(--sp-4); }
/* The status filter must fit the left column. Fill the padded row, share the width across the five tabs and tighten
   the button padding so Pending / Applied / Rejected / Failed / All stay on one line instead of spilling past the
   column's right edge (the inline-flex default overflowed ~40px into the detail pane). */
#v-proposals .pr-lf .seg { display: flex; }
#v-proposals .pr-lf .seg button { flex: 1; white-space: nowrap; padding: 0 var(--sp-1); }
.pr-search { margin: 0 var(--sp-3) var(--sp-2) var(--sp-4); height: 28px; display: flex; align-items: center; gap: var(--sp-2); padding: 0 var(--sp-2); border-radius: var(--r8); background: var(--bg); box-shadow: 0 0 0 1px var(--line); color: var(--fg-3); flex: none; }
.pr-search:focus-within { box-shadow: 0 0 0 1px var(--line-2); }
.pr-search input { border: 0; outline: 0; background: transparent; flex: 1; min-width: 0; font-size: var(--fs-2); color: var(--fg); }
.pr-rows { overflow: auto; flex: 1; min-height: 0; padding-bottom: var(--sp-4); }
.pr-pad { padding: var(--sp-4); color: var(--fg-3); font-size: var(--fs-3); }

.pr-qi .ti { display: flex; align-items: center; gap: var(--sp-2); }
.pr-kind { font: 500 var(--fs-1) var(--mono); color: var(--accent-deep); }
.pr-st { text-transform: lowercase; }
.pr-st.pending { background: var(--warn-soft); color: var(--warn); }
.pr-st.applied { background: var(--ok-soft); color: var(--ok); }
.pr-st.rejected, .pr-st.failed { background: var(--err-soft); color: var(--err); }

.pr-center { overflow: auto; min-height: 0; background: var(--bg-2); }
.pr-ch { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); background: var(--bg-2); border-bottom: 1px solid var(--line); }
.pr-ch .end { margin-left: auto; display: flex; gap: var(--sp-2); }
.pr-body { padding: var(--sp-5) var(--sp-6); max-width: 920px; }
.pr-sec { margin-bottom: var(--sp-5); }
.pr-sec h3 { font-size: var(--fs-2); text-transform: uppercase; letter-spacing: .04em; color: var(--fg-3); margin-bottom: var(--sp-2); }
.pr-title { font-size: var(--fs-6); font-weight: 600; margin-bottom: var(--sp-1); }

.pr-lin { border: 1px solid var(--line); border-radius: var(--r12); overflow: hidden; }
.pr-lin .row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--line-soft); font-size: var(--fs-3); }
.pr-lin .row:last-child { border-bottom: 0; }
.pr-lin .k { color: var(--fg-3); }
.pr-lin .v { color: var(--fg); word-break: break-word; }

.pr-steps { list-style: none; display: flex; flex-direction: column; gap: var(--sp-1); }
.pr-steps li { display: flex; gap: var(--sp-2); align-items: baseline; font-size: var(--fs-2); color: var(--fg-2); }
.pr-steps .ev { font: 600 var(--fs-2) var(--mono); color: var(--accent-deep); min-width: 84px; }

.pr-diff, .pr-blame { border: 1px solid var(--line); border-radius: var(--r12); overflow: auto; font: var(--fs-2) / 1.5 var(--mono); background: var(--bg); max-height: 540px; }
.pr-diff pre { padding: var(--sp-3); white-space: pre-wrap; word-break: break-word; }
.pr-diff .add { color: var(--ok); background: var(--ok-soft); display: block; }
.pr-diff .del { color: var(--err); background: var(--err-soft); display: block; }
.pr-diff .at { color: var(--accent-deep); display: block; }
.pr-preview { border: 1px solid var(--line); border-radius: var(--r12); padding: var(--sp-3) var(--sp-4); background: var(--bg); max-height: 540px; overflow: auto; }

.pr-blame table { width: 100%; border-collapse: collapse; }
.pr-blame td { padding: 1px var(--sp-2); vertical-align: top; }
.pr-blame .ln { color: var(--fg-3); text-align: right; user-select: none; width: 44px; }
.pr-blame .cm { color: var(--accent-deep); width: 92px; white-space: nowrap; overflow: hidden; }
.pr-blame .tx { white-space: pre-wrap; word-break: break-word; }
.pr-blame tr:hover { background: var(--bg-3); }

.pr-hist { display: flex; flex-direction: column; gap: var(--sp-2); }
.pr-hist .c { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; gap: var(--sp-2); align-items: baseline; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line); border-radius: var(--r8); font-size: var(--fs-3); }
.pr-hist .c .sha { font: 600 var(--fs-2) var(--mono); color: var(--accent-deep); }
.pr-hist .c .su { color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-hist .c .me { color: var(--fg-3); font-size: var(--fs-2); }
.pr-detailbody { padding: var(--sp-5) var(--sp-6); max-width: 960px; }
@media (max-width: 860px) { .pr-detailbody { padding: var(--sp-4); } }
.pr-tabs { display: flex; gap: var(--sp-1); margin-bottom: var(--sp-3); }
.pr-in { height: 28px; padding: 0 var(--sp-3); border-radius: var(--r8); background: var(--bg); box-shadow: 0 0 0 1px var(--line-2); font-size: var(--fs-3); color: var(--fg); }
.pr-row { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; margin-bottom: var(--sp-3); }