prreviewbuddy 0.90.0 → 0.92.0

package/static/sidebar.css

@@ -1068,7 +1068,7 @@
 .pr-helper-issue-card {
   border: 1px solid var(--color-border-default, #d0d7de);
   border-radius: 8px;
-  padding: 16px;
+  padding: 12px 14px;
   margin-bottom: 12px;
   /* Stated rather than inherited: the surface behind this is now the grey canvas. */
   background: #ffffff;
@@ -1437,7 +1437,7 @@
 .pr-helper-question-card {
   border: 1px solid var(--color-border-default, #d0d7de);
   border-radius: 8px;
-  padding: 16px;
+  padding: 12px 14px;
   margin-bottom: 12px;
   /* Stated rather than inherited: the surface behind this is now the grey canvas. */
   background: #ffffff;
@@ -1447,6 +1447,9 @@
    card would throw away the reviewer's own record that they resolved it. The check mark is the
    whole "done" signal; nothing else about the card recedes. */
 .pr-helper-question-card-answered { box-shadow: inset 3px 0 0 #1a7f37; }
+/* What an answer still needs is moot once the question is settled, and a tick moves the card here
+   without a redraw, so the drawer is what decides it. */
+.pr-helper-closed-findings .pr-helper-question-needed { display: none; }
 
 .pr-helper-question-card h5 {
   font-size: 10px;
@@ -1521,8 +1524,7 @@
    Deliberately lighter than the Guide's progress box (no bar, no "next up" line): the Guide is
    a workflow you walk in order, so it earns a full dashboard, whereas this is a flat list where
    the only useful fact is how many are still open. */
-.pr-helper-questions-progress,
-.pr-helper-findings-progress {
+.pr-helper-questions-progress {
   display: flex;
   align-items: center;
   gap: 8px;
@@ -1590,13 +1592,203 @@
 .pr-helper-closed-findings-list .pr-helper-issue-card:hover,
 .pr-helper-closed-findings-list .pr-helper-question-card:hover { opacity: 1; }
 
+/* ── Issues by kind ──
+   The pane opens on what the change touches and how much needs attention, then one section per
+   kind of decision. A section is a disclosure so a reader can fold away what they have dealt
+   with; its heading keeps the Questions tab's group style so the two tabs read as one product. */
+.pr-helper-issues-orientation {
+  margin-bottom: 16px;
+}
+
+.pr-helper-issues-orientation-text {
+  font-size: 14px;
+  color: var(--color-fg-default, #1f2328);
+  line-height: 1.5;
+  margin: 0 0 4px;
+  overflow-wrap: anywhere;
+}
+
+.pr-helper-issues-attention {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--color-fg-muted, #57606a);
+  margin: 0;
+}
+
+.pr-helper-issue-nav {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 10px;
+}
+
+.pr-helper-issue-nav[hidden] { display: none; }
+
+.pr-helper-issue-nav-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font: inherit;
+  font-size: 12px;
+  font-weight: 600;
+  padding: 3px 10px;
+  border: 1px solid var(--color-border-default, #d0d7de);
+  border-radius: 100px;
+  background: transparent;
+  color: var(--color-fg-default, #1f2328);
+  cursor: pointer;
+}
+
+.pr-helper-issue-nav-item:hover { border-color: #9333ea; }
+.pr-helper-issue-nav-item:focus-visible { outline: 2px solid #9333ea; outline-offset: 2px; }
+
+.pr-helper-issue-nav-count {
+  color: var(--color-fg-muted, #57606a);
+  font-variant-numeric: tabular-nums;
+}
+
+.pr-helper-issue-group { margin-bottom: 8px; }
+.pr-helper-issue-group[hidden] { display: none; }
+
+.pr-helper-issue-group-summary {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+  list-style: none;
+  padding: 4px 0;
+  margin-bottom: 6px;
+  color: #9333ea;
+  scroll-margin-top: 12px;
+}
+
+.pr-helper-issue-group-summary::-webkit-details-marker { display: none; }
+
+.pr-helper-issue-group-summary::before {
+  content: '';
+  width: 0;
+  height: 0;
+  border-left: 5px solid currentColor;
+  border-top: 4px solid transparent;
+  border-bottom: 4px solid transparent;
+  transition: transform 0.15s ease;
+}
+
+.pr-helper-issue-group[open] > .pr-helper-issue-group-summary::before { transform: rotate(90deg); }
+.pr-helper-issue-group-summary:focus-visible { outline: 2px solid #9333ea; outline-offset: 2px; border-radius: 2px; }
+
+.pr-helper-issue-group-title {
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  margin: 0;
+}
+
+.pr-helper-issue-group-count {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--color-fg-muted, #57606a);
+}
+
+/* The consequence, read first. The title row is shared with every card; these sit under it. */
+.pr-helper-issue-card .pr-helper-issue-title { overflow-wrap: anywhere; }
+
+.pr-helper-issue-impact { margin: 0 0 8px; }
+
+.pr-helper-issue-scenario {
+  font-size: 13px;
+  line-height: 1.5;
+  margin: 0 0 6px;
+  text-align: left;
+  overflow-wrap: anywhere;
+}
+
+.pr-helper-issue-next {
+  font-size: 13px;
+  line-height: 1.5;
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+
+.pr-helper-issue-next-label { font-weight: 600; }
+
+/* The technical account, one click away and never open on arrival. Same chevron as the closed
+   drawer, smaller and muted, because it belongs to one card rather than to the pane. */
+.pr-helper-issue-technical { margin-top: 8px; }
+
+/* A framed card's disclosure and actions share a row: closed, the summary sits left and the actions
+   right; opened, the disclosure takes the row and the actions wrap below its body. */
+.pr-helper-card-footer {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  column-gap: 12px;
+  row-gap: 8px;
+  margin-top: 8px;
+}
+.pr-helper-card-footer > .pr-helper-issue-technical { flex: 1 1 auto; min-width: 0; margin-top: 0; }
+.pr-helper-card-footer > .pr-helper-issue-technical[open] { flex-basis: 100%; }
+.pr-helper-card-footer > .pr-helper-issue-actions,
+.pr-helper-card-footer > .pr-helper-question-actions { margin-top: 0; margin-left: auto; }
+
+.pr-helper-issue-technical-summary {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+  list-style: none;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--color-fg-muted, #57606a);
+  padding: 2px 0;
+}
+
+.pr-helper-issue-technical-summary::-webkit-details-marker { display: none; }
+
+.pr-helper-issue-technical-summary::before {
+  content: '';
+  width: 0;
+  height: 0;
+  border-left: 5px solid currentColor;
+  border-top: 4px solid transparent;
+  border-bottom: 4px solid transparent;
+  transition: transform 0.15s ease;
+}
+
+.pr-helper-issue-technical[open] > .pr-helper-issue-technical-summary::before { transform: rotate(90deg); }
+.pr-helper-issue-technical-summary:hover { color: var(--color-fg-default, #1f2328); }
+.pr-helper-issue-technical-summary:focus-visible { outline: 2px solid #9333ea; outline-offset: 2px; border-radius: 2px; }
+
+.pr-helper-issue-technical-body {
+  margin-top: 8px;
+  padding-left: 11px;
+  border-left: 2px solid var(--color-border-muted, #d8dee4);
+  overflow-wrap: anywhere;
+}
+
+.pr-helper-issue-technical-title {
+  font-size: 13px;
+  font-weight: 600;
+  margin: 0 0 4px;
+}
+
+.pr-helper-issue-original { margin-bottom: 10px; }
+.pr-helper-issue-original h5 { margin: 0 0 4px; }
+
+.pr-helper-issue-original-title {
+  font-size: 13px;
+  font-weight: 600;
+  margin: 0 0 4px;
+}
+
 .pr-helper-question-actions {
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 12px;
-  margin-top: 12px;
+  margin-top: 8px;
 }
 
 /* Deliberately not a filled button, matching .pr-helper-guide-start-cta: this is "here's the
@@ -4827,7 +5019,7 @@
   align-items: center;
   justify-content: flex-end;
   gap: 12px;
-  margin-top: 12px;
+  margin-top: 8px;
 }
 
 /* margin-left:auto rather than relying on the row's space-between: the jump link beside it is