@import './diffSyntax.css';
body[data-view=review] #main, body[data-view=docs] #main { max-width:none; width:100% }
.pr-workspace { --mint:color-mix(in srgb,var(--green,#238636) 12%,var(--bg)); --rose:color-mix(in srgb,var(--red,#da3633) 12%,var(--bg)); --selected:color-mix(in srgb,var(--yellow,#d29922) 22%,var(--bg)) }
.pr-status { padding:.8rem 1rem; margin:0 0 .8rem }
.pr-status h3 { font-size:1.12rem; margin:0 0 .5rem; line-height:1.35 }
.pr-status .dim { font-size:.75rem; line-height:1.8 }
.pr-status .tag { border:0; background:var(--bg); text-transform:none; font-size:.7rem }
.pr-split { display:grid; grid-template-columns:minmax(220px,var(--review-prose-width,38%)) 8px minmax(0,1fr); gap:.35rem; height:max(14rem,calc(100dvh - var(--review-top,12rem) - var(--commander-height,12rem) - 1rem)); align-items:stretch }
.pr-reader, .pr-diffs { min-width:0; overflow:auto; overscroll-behavior:contain; scrollbar-gutter:stable; border:1px solid var(--line); border-radius:8px; background:var(--panel); scroll-padding-top:1rem }
.pr-reader { padding:0 1rem 1.5rem; container-type:inline-size }
.pr-reader > .card { border:0; padding:0; background:transparent }
.pr-reader [data-pr-section] { scroll-margin-top:1rem; border-bottom:1px solid var(--line); padding:1rem 0 }
.pr-reader h2 { font-size:1.12rem; margin:.3rem 0 1rem }
.pr-reader .pr-prose { margin:0 }
.pr-controls:empty { display:none }
.pr-command-row { flex-wrap:wrap; gap:.35rem }
.pr-command-row > * { flex:0 0 auto; width:auto; white-space:nowrap }
.pr-command-row button.action { padding:.35rem .55rem }
body[data-preview-readonly] #composer button.action:disabled { opacity:.45; cursor:not-allowed }
.pr-diff-provenance { display:flex; gap:.3rem .8rem; justify-content:space-between; padding:.4rem .7rem; border-bottom:1px solid var(--line); font-size:.78rem; color:var(--dim) }
.pr-file { scroll-margin-top:.5rem; border-bottom:1px solid var(--line) }
.pr-file-heading { display:flex; flex-wrap:wrap; gap:.25rem .8rem; align-items:baseline; padding:.4rem .7rem; background:var(--panel); border-bottom:1px solid var(--line) }
/* The path no longer claims a row of its own: it wraps to one only when it cannot share with the
   stats and links, so a wide pane spends one line per file heading instead of two. */
.pr-file-heading h3 { font:600 .78rem ui-monospace,monospace; margin:0; margin-right:auto; max-width:100%; overflow-wrap:anywhere }
.pr-file-heading small, .pr-file-heading a { font-size:.72rem; color:var(--dim) }
.pr-file-body { overflow-x:auto; min-height:6rem; background:var(--bg) }
.pr-file-body .rd-lines { padding:.3rem 0; font:12px/1.6 ui-monospace,SFMono-Regular,monospace; tab-size:3; outline-offset:-2px }
.pr-file-body .rd-line { display:flex; width:100%; min-width:0; align-items:flex-start }
.pr-file-body .rd-line code { flex:1; min-width:0; white-space:pre-wrap; padding:0 .35rem; font:inherit; overflow-wrap:anywhere }
.pr-file-body .rd-number { box-sizing:border-box; flex:0 0 calc(var(--rd-number-width,3ch) + .5rem); width:calc(var(--rd-number-width,3ch) + .5rem); padding:0 .25rem; border:0; border-radius:0; display:flex; justify-content:flex-end; align-items:flex-start; align-self:stretch; font:inherit; background:transparent; color:var(--dim); user-select:none; cursor:pointer }
.pr-file-body .rd-add { background:var(--mint) }
.pr-file-body .rd-remove { background:var(--rose) }
.pr-file-body .rd-add .rd-number { background:light-dark(#c1e8c8,#214d32); color:light-dark(#175d27,#b6f0c2); font-weight:600 }
.pr-file-body .rd-remove .rd-number { background:light-dark(#f8caca,#622d34); color:light-dark(#942d2d,#ffc4c4); font-weight:600 }
.pr-file-body .rd-hunk { color:var(--blue); padding:.5rem 0; background:var(--panel) }
.pr-file-body .rd-selected { background:var(--selected); box-shadow:inset 3px 0 var(--blue) }
.pr-notice { padding:.7rem; color:var(--dim); font-size:.8rem; border-left:3px solid var(--yellow) }
.pr-conversation-comment { border-top:1px solid var(--line); padding:.75rem 0 }
.pr-comment-heading { display:flex; flex-wrap:wrap; gap:.4rem .7rem; cursor:pointer; font-size:.8rem; align-items:center }
details > .pr-comment-heading { display:list-item }
.pr-comment-heading small { color:var(--dim); font-size:.7rem }
.pr-conversation-comment .md { padding-top:.5rem }
.pr-conversation-since { display:flex; align-items:center; gap:.5rem; margin:.9rem 0 0; color:var(--yellow); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; scroll-margin-top:.5rem }
.pr-conversation-since::before, .pr-conversation-since::after { content:''; flex:1; height:1px; background:var(--yellow); opacity:.5 }
.pr-comment-fresh { box-shadow:inset 3px 0 var(--yellow); padding-left:.6rem }
.pr-conversation-comment .tag { font-size:.65rem }
@media(min-width:801px) { body.board-nav-open #composer { left:var(--board-nav-width,20rem)!important } }
@media(max-width:1000px) { .pr-split { grid-template-columns:1fr; height:auto } .pr-reader, .pr-diffs { max-height:65dvh; min-height:18rem } }

body[data-view=docs] .doc, body[data-view=docs] [data-section-key] { scroll-margin-top:4rem }

.pr-reader-toolbar { display:flex; justify-content:flex-end; gap:.5rem; padding:0 0 .5rem }
.pr-reader-toolbar button { padding:.25rem .7rem; font-size:.8rem }
.pr-diff-hidden { grid-template-columns:minmax(0,1fr) }
.pr-split > [hidden] { display:none!important }
.pr-diff-provenance { position:sticky; top:0; z-index:2; background:var(--panel); flex-wrap:wrap; align-items:center }
.pr-diff-provenance select { width:100%; margin:0; font:12px ui-monospace,monospace; min-width:0 }
.pr-diff-provenance select[aria-label="Diff scope"] { width:auto; flex:0 0 auto; font:inherit }
.pr-diff-ws { display:inline-flex; align-items:center; gap:.3rem; flex:0 0 auto; white-space:nowrap; cursor:pointer; user-select:none }
.pr-diff-ws input { margin:0; cursor:pointer }
/* The declarations a hunk sits inside, kept on screen while you scroll through it. A diff shows
   you changed lines and never says what they are PART OF; the class and the method scrolled off
   the top of the pane long before you reached the change. Rests directly under the provenance
   row, whose height JS measures — the two are the pane's whole "where am I", so neither may
   cover the other. Monospace and one line each: these are source lines, and a wrapped one would
   push the diff itself down the screen. */
.pr-diff-context { position:sticky; z-index:1; display:flex; flex-direction:column; background:var(--panel); border-bottom:1px solid var(--line); box-shadow:0 1px 4px #0002 }
.pr-diff-context-line { display:block; width:100%; margin:0; padding:.1rem .7rem; border:0; border-radius:0; background:transparent; color:var(--dim);
	font:12px/1.5 ui-monospace,SFMono-Regular,monospace; tab-size:3; text-align:left; white-space:pre; overflow:hidden; text-overflow:ellipsis; cursor:pointer }
.pr-diff-context-line:hover { background:color-mix(in srgb,var(--fg) 6%,var(--panel)); color:var(--fg) }
/* The outermost level often comes from the hunk header rather than from a line of source in the
   diff — git's own answer, quoted, so it is marked as a quotation rather than dressed up as a
   line you are looking at. */
.pr-diff-context-hunk { font-style:italic; opacity:.85 }
.ci-dropdown { display:inline-block; position:relative }
.ci-dropdown > summary { cursor:pointer; list-style:none }
.ci-dropdown > summary::after, .ci-dropdown > button::after { content:' ▾' }
.ci-dropdown > div { position:absolute; z-index:20; top:100%; left:0; width:22rem; max-width:80vw; padding:.65rem; border:1px solid var(--line); border-radius:6px; background:var(--panel); box-shadow:0 6px 20px #0005 }
.ci-dropdown a { display:block; padding:.35rem; overflow-wrap:anywhere }
.ci-dropdown > div[popover] { position:fixed; inset:auto; margin:0; box-sizing:border-box; max-width:calc(100vw - 16px); overflow:auto; color:var(--fg) }
@media(max-width:1000px) { .pr-split > .pane-resize { display:none } }

.pr-reader-toolbar button { color:var(--fg); background:var(--panel); border:1px solid var(--line); border-radius:5px; cursor:pointer }

/* One type scale for narrative, examples and code maps across both hosts. */
.pr-reader { padding:0 1.4rem 1.8rem; font-size:14px; line-height:1.7 }
.pr-tour-provenance { font-size:.68rem; color:var(--dim); padding:.9rem 0; border-bottom:1px solid var(--line); margin:0; letter-spacing:.02em }
.pr-context-label { color:var(--dim); font-size:.72rem; padding:.7rem; margin:0; border-bottom:1px solid var(--line) }
.pr-reader, .pr-diffs, .board-navigation { scrollbar-width:thin; scrollbar-color:var(--line) transparent }
.pr-status { background:transparent; border:0; border-bottom:1px solid var(--line); border-radius:0; padding:.5rem 0 .8rem }
.pr-status h3 { font-size:1.05rem; font-weight:600 }
.pr-reader-toolbar { padding-bottom:.4rem }

.pr-split { position:relative }
.pr-reader-toolbar { position:absolute; top:.45rem; right:.55rem; z-index:5; padding:0 }
.pr-reader-toolbar button { box-shadow:0 1px 5px #0003; padding:.2rem .5rem }
.pr-diff-provenance { padding-right:6rem; gap:.5rem }
.pr-reader { padding:0 1.1rem 1rem; line-height:1.55 }
.pr-reader [data-pr-section] { padding:.75rem 0 }
.pr-tour-provenance { padding:.6rem 4.8rem .6rem 0 }
.pr-reader .pr-prose p, .pr-reader .pr-prose li { margin:.3rem 0 }
.pr-file-body .rd-lines:has(.pr-finding-pin) { padding-left:1.6rem }
.pr-file-body .rd-line { position:relative }
.pr-finding-pin { cursor:pointer; border:1px solid var(--blue); border-radius:4px; color:var(--blue); background:var(--panel); font:10px/1.4 system-ui; padding:0 .15rem }
.rd-line > .pr-finding-pin { position:absolute; left:-1.5rem; top:.1rem }
.pr-finding-popover { position:fixed; inset:auto; margin:0; box-sizing:border-box; overflow:auto; padding:.8rem; color:var(--fg); background:var(--panel); border:1px solid var(--blue); border-radius:8px; box-shadow:0 8px 32px #0008; font:14px/1.5 system-ui }
.pr-finding-title { display:flex; justify-content:space-between; align-items:center; gap:.6rem }
.pr-finding-title button { cursor:pointer; color:var(--fg); background:transparent; border:0; font-size:1.2rem }
.pr-finding-popover small { color:var(--dim); overflow-wrap:anywhere }
.pr-finding-popover p { margin:.6rem 0 }
.pr-finding-select { display:flex; align-items:center; gap:.4rem; border-top:1px solid var(--line); margin-top:.8rem; padding-top:.6rem; font-size:.75rem }
.pr-finding-select input { width:auto; margin:0 }
@media(max-width:1000px), (orientation:portrait) {
 body[data-view=review] { overflow:hidden; height:100dvh }
 body[data-view=review] #main { padding-bottom:0 }
 .pr-status h3 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
 .pr-status .dim { max-height:3.5rem; overflow:auto }
 .pr-split { position:fixed; top:var(--review-top,10rem); bottom:calc(var(--commander-height,12rem) + .4rem); left:1rem; right:1rem; height:auto; grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr) 8px minmax(0,min(var(--review-diff-height,40%),calc(100% - 108px))); gap:0 }
 .pr-reader, .pr-diffs { height:100%; min-height:0; max-height:none }
 .pr-split > .pane-resize { display:block; width:100%; height:8px; cursor:row-resize }
 .pr-split.pr-diff-hidden { grid-template-rows:minmax(0,1fr) }
 .pr-diff-provenance { padding-right:.7rem }
 .pr-reader-toolbar { top:.3rem; right:.6rem }
}
@media(min-width:801px) and (max-width:1000px), (min-width:801px) and (orientation:portrait) {
 body.board-nav-open .pr-split { left:calc(var(--board-nav-width,20rem) + 1rem) }
}
@media(max-width:1000px), (orientation:portrait) {
 html:has(body[data-view=review]) { overflow:clip; height:100dvh }
 body[data-view=review] { overflow:clip }
 body[data-view=review] #extnotice { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:.4rem .6rem; font-size:.72rem }
 .pr-command-row button.action { padding:.28rem .4rem }
}

.pr-state { display:inline-block; padding:.05rem .45rem; margin:0 .25rem; border-radius:1rem; font-weight:650; background:var(--line); color:var(--fg) }
.pr-state[data-state=open] { background:color-mix(in srgb,var(--green) 16%,var(--panel)); color:var(--green) }
.pr-state[data-state=merged] { background:color-mix(in srgb,#8957e5 16%,var(--panel)); color:#8957e5 }
.pr-state[data-state=closed] { background:color-mix(in srgb,var(--red) 16%,var(--panel)); color:var(--red) }

.pr-reviewers { display:flex; gap:.35rem .6rem; flex-wrap:wrap; margin-top:.35rem; font-size:.75rem }
.pr-reviewer { color:var(--dim) }
.pr-reviewer.approved { color:var(--green) }
.pr-reviewer.changes_requested { color:var(--red) }
.pr-status { display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:1rem }
.pr-status h3 { grid-column:1; min-width:0 }
.pr-status-stats { grid-column:1; grid-row:2 }
.pr-status-toggle { display:none; padding:0; border:0; color:inherit; background:transparent; font:inherit; text-align:left; cursor:default }
.pr-reviewers { grid-column:2; grid-row:1 / span 2; flex-direction:column; align-items:flex-end; justify-content:center; gap:.2rem; margin:0; text-align:right; max-width:min(35vw,18rem) }
.pr-reviewer { display:flex; align-items:center; gap:.4rem; white-space:nowrap; max-width:100% }
.pr-reviewer > span:first-child { overflow:hidden; text-overflow:ellipsis }
.pr-reviewer-icon { display:inline-block; width:1rem; text-align:center; font-size:.9rem; font-weight:650 }
@media(max-width:700px) {
 .pr-status { margin:0 0 .4rem; padding:.2rem 0 .4rem; column-gap:.6rem }
 .pr-status h3 { grid-column:1 / -1; position:relative; display:block; margin:0; line-height:1.5 }
 .pr-status-title { display:block; padding:.2rem 1.5rem .2rem 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
 .pr-status-toggle { display:block; position:absolute; inset:0; width:100%; cursor:pointer }
 .pr-status-toggle::after { content:'⌄'; position:absolute; right:.2rem; top:.2rem }
 .pr-status-expanded .pr-status-toggle::after { content:'⌃' }
 .pr-status:not(.pr-status-expanded) .pr-status-stats, .pr-status:not(.pr-status-expanded) .pr-reviewers { display:none }
 .pr-status-expanded .pr-status-stats { max-height:30dvh; margin-top:.35rem }
 .pr-status .pr-reviewers { grid-row:2; justify-content:flex-start; margin-top:.35rem; max-height:30dvh; overflow:auto; font-size:.7rem }
}

@media(orientation:portrait) {
 body.board-nav-open #composer { left:0!important; z-index:1001 }
 .board-navigation, .board-navigation > .pane-resize { bottom:var(--commander-height,9rem)!important }
}
.pr-finding-index { margin:.3rem 0; padding-left:1.4rem }
.pr-finding-index li { margin:.35rem 0 }
.pr-finding-index code { overflow-wrap:anywhere }
.pr-status .tag[data-findings-link] { cursor:pointer; text-decoration:underline dotted }
.pr-finding-undelivered { margin:0 0 0 .35rem; white-space:nowrap }