prreviewbuddy 0.82.4 → 0.85.0

package/static/shell.css

@@ -154,7 +154,8 @@
   --lh-body:  1.55;
   --lh-tight: 1.3;
 
-  --rail-width: 268px;
+  --rail-full-width: 268px;
+  --rail-width: var(--rail-full-width);
   /* A proportion, not a number: the assistant is part of the workspace rather than a widget
      docked to its edge, so it should take a share of whatever room there is. The floor keeps it
      wide enough for a code block; the ceiling keeps the review itself the larger pane. A width
@@ -172,6 +173,8 @@
 :root[data-theme='dark']  { color-scheme: dark; }
 
 * { box-sizing: border-box; }
+/* No link in the workspace is underlined, at rest or on hover: colour says it is a link. */
+a { text-decoration: none; }
 
 html, body {
   height: 100%;
@@ -416,15 +419,6 @@ body > * { flex: 0 0 auto; }
   color: var(--text-tertiary, var(--text-secondary));
   opacity: 0.75;
 }
-.prb-feedback {
-  color: inherit;
-  text-decoration: underline;
-  text-underline-offset: 2px;
-}
-.prb-feedback:hover { color: var(--text-primary); opacity: 1; }
-/* The words, and only the words, above phone width. The icon is the phone-width form, where the
-   strip has no room for a text link; see the 600px block. */
-.prb-feedback-icon { display: none; }
 
 /* ── The global strip ──
  *
@@ -459,17 +453,9 @@ body > * { flex: 0 0 auto; }
 /* Quieter than the wordmark on a marketing page and quieter than the branch below it: at this size
    it is a mark saying which product this is, not a title. */
 .prb-strip .prb-wordmark { font-size: var(--t-body); }
-/* The push comes from the wordmark, so everything after it packs to the far end whether or not the
-   narrow-window places are in flow. A `margin-left: auto` on the bell instead would put the bell
-   beside the wordmark at every width the places are hidden, which is most of them. */
+/* The push comes from the wordmark, so everything after it packs to the far end. */
 .prb-strip .prb-wordmark { margin-right: auto; }
 .prb-strip .prb-build { margin: 0; }
-/* The workspace places in the strip exist for the width at which the rail is hidden, and only then.
-   Declared here, above the 860px block that reveals it: the two rules have the same specificity, so
-   whichever comes last wins, and while this one sat at the foot of the file the media query could
-   never take effect — the places were hidden at every width, including the only one that needed
-   them. */
-.prb-header-nav { display: none; align-items: center; gap: 16px; font-size: var(--t-meta); }
 
 /* The workspace pages that are not a review: the same rail and the same one-viewport shell as a
    review page, with the content scrolling in its own pane beside it.
@@ -552,6 +538,17 @@ body > * { flex: 0 0 auto; }
   background: var(--border-strong);
 }
 
+/* New review in the strip is the rail's labelled button standing in while the rail is hidden, so it
+   is drawn only then: below 860px and in a review's focus mode, both revealed further down. Declared
+   here, above the 860px block, so that block can win at equal specificity. Filled, as the rail's is:
+   wherever it is, it is the primary action. */
+.prb-strip .prb-strip-new-review { display: none; background: var(--brand); color: var(--on-brand); }
+.prb-strip .prb-strip-new-review:hover { background: var(--brand-hover); color: var(--on-brand); }
+.prb-strip .prb-strip-new-review:focus-visible { outline-color: var(--brand-ink); }
+/* Show sidebar: the way back from Hidden, and drawn only while the reader has hidden it. */
+.prb-strip .prb-sidebar-restore { display: none; }
+:root[data-sidebar-hidden] .prb-strip .prb-sidebar-restore { display: flex; }
+
 /* Why a control cannot be pressed, beside the control rather than inside a `title` nobody hovers
    and no keyboard reaches. Quiet as the strip is quiet: it is an explanation, not a warning. */
 .prb-strip-note {
@@ -763,7 +760,7 @@ body[data-server-stopped] .prb-shell { opacity: 0.55; pointer-events: none; }
 .prb-author::before { content: 'by'; color: var(--text-muted); }
 .prb-author-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .prb-author-handle { color: var(--text-muted); }
-a.prb-author:hover .prb-author-name { color: var(--text-primary); text-decoration: underline; }
+a.prb-author:hover .prb-author-name { color: var(--text-primary); }
 
 .prb-pr-empty, .prb-pr-provenance, .prb-pr-truncated {
   font-size: var(--t-body);
@@ -780,7 +777,7 @@ a.prb-author:hover .prb-author-name { color: var(--text-primary); text-decoratio
   margin-bottom: 26px;
 }
 .prb-pr-provenance a { color: var(--brand); font-weight: 400; text-decoration: none; }
-.prb-pr-provenance a:hover { text-decoration: underline; }
+.prb-pr-provenance a:hover { opacity: 0.8; }
 .prb-pr-title { color: var(--pane-ink); }
 .prb-pr-counts, .prb-pr-provenance time { color: var(--pane-ink-faint); font-size: var(--t-meta); }
 
@@ -851,7 +848,7 @@ a.prb-author:hover .prb-author-name { color: var(--text-primary); text-decoratio
 }
 .prb-pr-comment-meta { display: flex; gap: 8px; align-items: baseline; font-size: var(--t-meta); }
 .prb-pr-comment-meta a { color: var(--brand); font-weight: 400; text-decoration: none; }
-.prb-pr-comment-meta a:hover { text-decoration: underline; }
+.prb-pr-comment-meta a:hover { opacity: 0.8; }
 .prb-pr-comment-meta time { color: var(--pane-ink-faint); }
 /* Someone else's words, rendered as the Markdown they wrote rather than as one flat block. Light
    pane, so literals throughout: see pane_palette.test.ts. */
@@ -1082,6 +1079,144 @@ a.prb-rail-item { text-decoration: none; }
   color: var(--text-primary);
 }
 .prb-rail-item:focus-visible { outline: 2px solid var(--brand-hover); outline-offset: -2px; }
+
+/* New review, at the head of the workspace rows: the primary action, and the one filled thing in
+   the sidebar, as the Buddy AI send button is in its pane. Everything else there stays neutral, so
+   nothing competes with it. Inset so its icon lines up with the rows' icons. The focus ring is the
+   brand's ink rather than its hover colour, which would vanish against the fill. */
+.prb-rail-new { padding: 0 12px 10px; }
+.prb-new-review {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  min-height: 36px;
+  padding: 0 8px;
+  border: 0;
+  border-radius: 8px;
+  background: var(--brand);
+  color: var(--on-brand);
+  font: inherit;
+  font-weight: 600;
+  text-align: left;
+  cursor: pointer;
+}
+.prb-new-review svg { width: 16px; height: 16px; flex: none; }
+.prb-new-review-label { flex: 1; min-width: 0; }
+.prb-new-review-key { font: 500 var(--t-micro) / 1 ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace; color: var(--on-brand-quiet); }
+.prb-new-review:hover { background: var(--brand-hover); }
+.prb-new-review:focus-visible { outline: 2px solid var(--brand-ink); outline-offset: 2px; }
+
+/* The sidebar's own toggle, the last row of its foot. Both drawings are on the page and the state
+   says which shows, so pressing it changes nothing here but an attribute and its words. */
+.prb-sidebar-collapse-icon,
+.prb-sidebar-expand-icon { display: flex; }
+.prb-sidebar-expand-icon,
+:root[data-sidebar-compact] .prb-sidebar-collapse-icon { display: none; }
+:root[data-sidebar-compact] .prb-sidebar-expand-icon { display: flex; }
+
+/* ── The sidebar's three states ──
+   Expanded is the default and needs nothing. Compact and Hidden are attributes on <html>, drawn by
+   the server from `ui.json` so the first paint is already right (see `sidebarAttributes`).
+
+   Both change only `--rail-width`, which every grid with a rail column reads, so the review page's
+   three columns and the other pages' two follow without a template of their own. Hidden keeps the
+   rail in grid flow at no width rather than `display: none`: out of flow, the next pane would drop
+   into the rail's column, which is the defect the 860px block below had to be rewritten for. */
+:root[data-sidebar-compact] { --rail-width: 56px; }
+:root[data-sidebar-hidden] { --rail-width: 0px; }
+:root[data-sidebar-hidden] .prb-rail { visibility: hidden; overflow: hidden; padding: 0; border: 0; }
+
+/* Compact is drawn by every rule below that waits on `:not([data-sidebar-peek])`. While the reader
+   rests the pointer on it, or tabs into it, `client/sidebar.ts` sets `data-sidebar-peek` and those
+   rules stop applying: the sidebar is drawn exactly as Expanded, at its full width, over the page
+   rather than beside it. Its own column stays narrow, so nothing under it moves. It slides because
+   its width is transitioned from the column's to the full one; the labels are clipped as it grows. */
+:root[data-sidebar-compact] .prb-rail {
+  position: relative;
+  z-index: 5;
+  width: var(--rail-width);
+  transition: width 0.16s ease, box-shadow 0.16s ease;
+}
+:root[data-sidebar-compact][data-sidebar-peek] .prb-rail {
+  width: var(--rail-full-width);
+  box-shadow: 8px 0 24px var(--shadow-float);
+}
+
+/* Compact: every row is its icon, named in a tooltip beside it on hover and keyboard focus. The
+   tooltip is the row's own label, moved out to the right, so the name a screen reader hears is
+   the one it always heard. What has no icon (headings, the numbered review path, the folds, the
+   counts) waits for Expanded. The rail lets the tooltips out past its edge, and sits above the
+   pane beside it so they draw over it. */
+:root[data-sidebar-compact]:not([data-sidebar-peek]) .prb-rail { overflow: visible; }
+:root[data-sidebar-compact]:not([data-sidebar-peek]) .prb-rail-item {
+  position: relative;
+  justify-content: center;
+  align-items: center;
+  gap: 0;
+  padding: 9px 0;
+  border-left-width: 0;
+}
+:root[data-sidebar-compact]:not([data-sidebar-peek]) .prb-rail-item .prb-rail-label {
+  position: absolute;
+  top: 50%;
+  left: calc(100% + 6px);
+  transform: translateY(-50%);
+  padding: 5px 8px;
+  border-radius: 6px;
+  background: var(--text-primary);
+  color: var(--bg);
+  font-size: var(--t-micro);
+  font-weight: 500;
+  line-height: 1.4;
+  white-space: nowrap;
+  opacity: 0;
+  pointer-events: none;
+  z-index: 1;
+}
+:root[data-sidebar-compact]:not([data-sidebar-peek]) .prb-rail-item .prb-rail-label * { color: inherit; font: inherit; }
+:root[data-sidebar-compact]:not([data-sidebar-peek]) .prb-rail-item:hover .prb-rail-label,
+:root[data-sidebar-compact]:not([data-sidebar-peek]) .prb-rail-item:focus-visible .prb-rail-label { opacity: 1; transition: opacity 0.1s 0.35s; }
+:root[data-sidebar-compact]:not([data-sidebar-peek]) .prb-rail-count,
+:root[data-sidebar-compact]:not([data-sidebar-peek]) .prb-rail-selected,
+:root[data-sidebar-compact]:not([data-sidebar-peek]) .prb-rail-twisty,
+:root[data-sidebar-compact]:not([data-sidebar-peek]) .prb-rail-heading,
+:root[data-sidebar-compact]:not([data-sidebar-peek]) .prb-rail-subhead,
+:root[data-sidebar-compact]:not([data-sidebar-peek]) .prb-rail-path { display: none; }
+:root[data-sidebar-compact]:not([data-sidebar-peek]) .prb-rail-body { margin: 0; border-left: 0; }
+:root[data-sidebar-compact]:not([data-sidebar-peek]) .prb-rail-body .prb-rail-item { padding-left: 0; }
+:root[data-sidebar-compact]:not([data-sidebar-peek]) .prb-rail-group + .prb-rail-group { margin-top: 12px; padding-top: 12px; }
+/* New review is the square + at the top, its name and shortcut in the strip's own tooltip. */
+:root[data-sidebar-compact]:not([data-sidebar-peek]) .prb-rail-new { padding: 0 10px 10px; }
+:root[data-sidebar-compact]:not([data-sidebar-peek]) .prb-new-review { position: relative; justify-content: center; width: 36px; padding: 0; }
+:root[data-sidebar-compact]:not([data-sidebar-peek]) .prb-new-review-label,
+:root[data-sidebar-compact]:not([data-sidebar-peek]) .prb-new-review-key { display: none; }
+:root[data-sidebar-compact]:not([data-sidebar-peek]) .prb-new-review[data-tip]::after {
+  content: attr(data-tip);
+  position: absolute;
+  top: 50%;
+  left: calc(100% + 6px);
+  transform: translateY(-50%);
+  padding: 5px 8px;
+  border-radius: 6px;
+  background: var(--text-primary);
+  color: var(--bg);
+  font-size: var(--t-micro);
+  font-weight: 500;
+  line-height: 1.4;
+  white-space: nowrap;
+  opacity: 0;
+  pointer-events: none;
+  z-index: 1;
+}
+:root[data-sidebar-compact]:not([data-sidebar-peek]) .prb-new-review[data-tip]:hover::after,
+:root[data-sidebar-compact]:not([data-sidebar-peek]) .prb-new-review[data-tip]:focus-visible::after { opacity: 1; transition: opacity 0.1s 0.35s; }
+
+/* Hidden: the strip's square New review stands in, as it does whenever the rail is not drawn. Send
+   feedback belongs to the sidebar and goes with it; the strip has no copy of it at any width. */
+:root[data-sidebar-hidden] .prb-strip .prb-strip-new-review { display: flex; }
+/* The page title is set in the rail's column, so it keeps its own width while that column narrows. */
+:root:is([data-sidebar-compact], [data-sidebar-hidden]) .prb-context:has(.prb-index-controls) .prb-page-title { width: auto; }
 /* The pages under a review type (Issues, Questions, Files, PR context) and the links at the foot
    share the group rows' white, so the grey themes in the review path read as their own list.
    Weight still separates these from the group rows above them. Must come after `.prb-rail-item`:
@@ -2111,12 +2246,10 @@ a.prb-rail-item { text-decoration: none; }
   color: inherit;
   font: inherit;
   font-weight: 400;
-  text-decoration: underline;
-  text-decoration-color: var(--brand);
-  text-underline-offset: 3px;
+  color: var(--pane-accent);
   cursor: pointer;
 }
-.prb-doc-note-link:hover { color: var(--pane-ink); text-decoration-thickness: 2px; }
+.prb-doc-note-link:hover { color: var(--pane-ink); }
 
 .prb-doc-note {
   margin: 0 0 14px;
@@ -2263,25 +2396,21 @@ a.prb-rail-item { text-decoration: none; }
 /* Everything that is not the primary action. Text, not a box: as bordered buttons these competed
    with Update review and the panel read as four equal choices.
 
-   Resting at full contrast with a brand underline, which is where they used to arrive only on
-   hover. Muted grey on a grey rule was quiet to the point of being scenery: half of these are the
-   only way to do the thing the sentence beside them is describing, and a control nobody can see is
-   not restraint. Hover thickens the rule instead, so pointing at one still answers. */
+   Resting in the link colour, not muted grey. Grey was quiet to the point of being scenery: half of
+   these are the only way to do the thing the sentence beside them is describing, and a control
+   nobody can see is not restraint. Hover takes them to the primary ink, so pointing at one answers. */
 .prb-fresh-quiet {
   padding: 2px 0;
   border: 0;
   background: none;
-  color: var(--text-primary);
+  color: var(--link);
   font: inherit;
   font-size: var(--t-micro);
-  text-decoration: underline;
-  text-decoration-color: var(--brand);
-  text-underline-offset: 3px;
   /* It sits inside a sentence now, so it sits on that sentence's baseline. */
   vertical-align: baseline;
   cursor: pointer;
 }
-.prb-fresh-quiet:hover:not(:disabled) { text-decoration-thickness: 2px; }
+.prb-fresh-quiet:hover:not(:disabled) { color: var(--text-primary); }
 .prb-fresh-quiet:disabled { opacity: 0.55; cursor: default; }
 
 /* Dismissal, at the end of the row it dismisses. An icon rather than the word `Close`, because it
@@ -2468,17 +2597,14 @@ a.prb-rail-item { text-decoration: none; }
 .prb-update-alt > summary,
 .prb-fresh-more > summary {
   display: inline-block;
-  color: var(--text-primary);
-  text-decoration: underline;
-  text-decoration-color: var(--brand);
-  text-underline-offset: 3px;
+  color: var(--link);
   cursor: pointer;
   list-style: none;
 }
 .prb-update-alt > summary::-webkit-details-marker,
 .prb-fresh-more > summary::-webkit-details-marker { display: none; }
 .prb-update-alt > summary:hover,
-.prb-fresh-more > summary:hover { text-decoration-thickness: 2px; }
+.prb-fresh-more > summary:hover { color: var(--text-primary); }
 /* Only this one announces itself as expandable. `Start a new review` reads as an action beside
    `Check review status` and a caret would advertise the disclosure rather than the choice; `More
    details` has nothing to offer except opening, so it says so. */
@@ -2773,9 +2899,11 @@ a.prb-guide-pick { text-decoration: none; }
   .prb-body:not([data-ask='open']),
   .prb-body[data-ask='open'] { grid-template-columns: minmax(0, 1fr); }
   .prb-rail { display: none; }
+  .prb-strip .prb-strip-new-review { display: flex; }
+  /* No sidebar fits at this width, so Show sidebar would bring back nothing. */
+  :root[data-sidebar-hidden] .prb-strip .prb-sidebar-restore { display: none; }
   .prb-guide-picker { display: flex; }
   .prb-shell { grid-template-columns: minmax(0, 1fr); }
-  .prb-header-nav { display: flex; }
   /* The assistant is an overlay at this width, not a column, so there is no boundary to drag. */
   .prb-ask-resize { display: none; }
   /* Anchored to the body it covers, not to a sum of the bars above it. That sum assumed the header
@@ -2801,24 +2929,10 @@ a.prb-guide-pick { text-decoration: none; }
    scrolled sideways. Placed after every base rule it overrides (the header, the strip, the change
    ref, the stats), because at equal specificity the later rule wins. */
 @media (max-width: 600px) {
-  /* The strip keeps every control and the build; it gives up spacing and the feedback link's words.
-     The accessible name stays "Send feedback", from the visually hidden label. */
+  /* The strip keeps every control and the build; it gives up spacing. */
   .prb-strip { gap: 4px; padding: 0 16px; }
   .prb-strip .prb-wordmark { min-width: 0; overflow: hidden; }
   .prb-strip .prb-build { margin-left: 4px; }
-  .prb-feedback { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; color: var(--text-muted); opacity: 1; }
-  .prb-feedback:hover { background: var(--surface-2); }
-  .prb-feedback-icon { display: inline-flex; }
-  .prb-feedback-icon svg { width: 16px; height: 16px; }
-  .prb-feedback-label {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    clip-path: inset(50%);
-    white-space: nowrap;
-  }
 
   /* The review bar becomes two rows: what the review is of, then its facts and controls. It grows
      with its content rather than clipping it; the panes below take what is left, and Buddy AI is
@@ -2971,7 +3085,7 @@ a.prb-guide-pick { text-decoration: none; }
   opacity: 0.8;
   cursor: pointer;
 }
-.prb-code-deletion-toggle:hover { opacity: 1; text-decoration: underline; }
+.prb-code-deletion-toggle:hover { opacity: 1; }
 .prb-code-deleted { background: rgba(248, 81, 73, 0.1); }
 .prb-code-deleted .prb-code-num { box-shadow: inset 2px 0 0 #cf222e; color: #a40e26; }
 .prb-code-deleted .prb-code-line { color: #6e7781; }
@@ -2984,7 +3098,6 @@ a.prb-guide-pick { text-decoration: none; }
   background: none;
   font: inherit;
   color: #57606a;
-  text-decoration: underline;
   cursor: pointer;
 }
 .prb-code-long-toggle:hover { color: #1f2328; }
@@ -4259,7 +4372,7 @@ a.prb-guide-pick { text-decoration: none; }
 .prb-arch-trail { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 26px; font-size: var(--t-meta); color: #57606a; }
 .prb-arch-crumb { padding: 3px 0; border: 0; background: none; font: inherit; color: inherit; }
 button.prb-arch-crumb { color: #7e22ce; cursor: pointer; }
-button.prb-arch-crumb:hover { text-decoration: underline; }
+button.prb-arch-crumb:hover { opacity: 0.8; }
 button.prb-arch-crumb:focus-visible { outline: 2px solid #9333ea; outline-offset: 1px; }
 .prb-arch-crumb[aria-current] { font-weight: 600; color: #1f2328; }
 .prb-arch-crumb-sep { color: #8c959f; }
@@ -4298,7 +4411,7 @@ button.prb-arch-crumb:focus-visible { outline: 2px solid #9333ea; outline-offset
   cursor: pointer;
   overflow-wrap: anywhere;
 }
-.prb-arch-location:hover { text-decoration: underline; }
+.prb-arch-location:hover { opacity: 0.8; }
 .prb-arch-location:focus-visible { outline: 2px solid #9333ea; outline-offset: 1px; }
 span.prb-arch-location { color: #57606a; cursor: default; }
 span.prb-arch-location:hover { text-decoration: none; }
@@ -4537,7 +4650,7 @@ span.prb-arch-location:hover { text-decoration: none; }
   text-align: left;
   cursor: pointer;
 }
-.prb-map-goto:hover { text-decoration: underline; }
+.prb-map-goto:hover { opacity: 0.8; }
 
 .prb-map-edges {
   position: absolute;
@@ -5297,7 +5410,7 @@ span.prb-arch-location:hover { text-decoration: none; }
   cursor: pointer;
 }
 .prb-kiss-location:hover { background: rgba(147, 51, 234, 0.14); }
-.prb-kiss-location:hover .pr-helper-path-name { text-decoration: underline; }
+.prb-kiss-location:hover .pr-helper-path-name { opacity: 0.8; }
 /* The filename is a block, so the two markers that qualify it need a line of their own to share
    with it rather than one each above and below it. Baseline-aligned: they are small caps beside
    ordinary text and should sit on its line, not be centred against its box. */
@@ -5517,7 +5630,6 @@ select.prb-addreview-control {
   /* Clear of the sticky bars when arrived at by its anchor. */
   scroll-margin-top: 96px;
 }
-.prb-help-topic:first-of-type { padding-top: 4px; }
 .prb-help-topic:last-of-type { border-bottom: 0; }
 .prb-help-topic h2 { margin: 0 0 12px; font-size: var(--t-section); font-weight: 600; color: var(--text-primary); }
 .prb-help-topic h3 { margin: 20px 0 8px; font-size: var(--t-body); font-weight: 600; color: var(--text-primary); }
@@ -5525,13 +5637,89 @@ select.prb-addreview-control {
 .prb-help-topic ul { margin: 0 0 10px; padding-left: 20px; }
 .prb-help-topic li { margin-bottom: 4px; }
 .prb-help-topic code { font-size: var(--t-code); color: var(--text-primary); }
+/* Welcome: a small capitalised label over the line the product stands on, and the principles as
+   three short statements, each named in the primary ink and explained in the secondary. */
+.prb-help-topic .prb-help-eyebrow {
+  margin: 0 0 6px;
+  font-size: var(--t-micro);
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--text-tertiary, var(--text-secondary));
+}
+.prb-help-topic h3.prb-help-eyebrow { margin-top: 24px; margin-bottom: 10px; }
+.prb-help-topic .prb-help-headline { margin: 0 0 14px; font-size: var(--t-title); line-height: 1.3; }
+.prb-help-principles { display: grid; gap: 12px; margin: 0; }
+.prb-help-principles dt { font-weight: 600; color: var(--text-primary); }
+.prb-help-principles dd { margin: 2px 0 0; }
+.prb-help-tour { margin-top: 20px; }
+/* An action, not a reference: it starts something, so it looks like the tour's own Next. */
+/* Through `.prb-help-topic a`, whose link colour would otherwise be drawn on the button's own purple. */
+.prb-help-topic a.prb-help-tour-action {
+  display: inline-block;
+  padding: 5px 12px;
+  border-radius: 8px;
+  background: var(--brand);
+  color: var(--on-brand);
+  font-weight: 600;
+}
+.prb-help-topic a.prb-help-tour-action:hover { background: var(--brand-hover); }
 .prb-help-topic a { color: var(--link); }
-/* The topic index: links in a wrapping row, above the first topic and ruled off from it. */
-.prb-help-contents { padding: 16px 0; border-bottom: 1px solid var(--border); }
-.prb-help-contents ul { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0; padding: 0; list-style: none; }
-.prb-help-contents a { font-size: var(--t-body); color: var(--text-secondary); text-decoration: none; }
-.prb-help-contents a:hover { color: var(--text-primary); text-decoration: underline; }
-.prb-help-contents + .prb-help-topic { padding-top: 20px; }
+/* Wider than the 960px every other page keeps, by the index's column, so the topics keep the
+   measure they had when the index sat above them. */
+.prb-shell > .prb-help {
+  padding-inline: max(24px, calc((100% - 1200px) / 2 + 24px));
+  container-type: inline-size;
+}
+/* The topics, and their index in a column beside them that stays in view while they scroll. The
+   index comes first in the document and is placed second here. */
+.prb-help-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 208px;
+  column-gap: 32px;
+  align-items: start;
+}
+.prb-help-layout > .prb-page-panel { grid-column: 1; grid-row: 1; }
+.prb-help-contents {
+  grid-column: 2;
+  grid-row: 1;
+  position: sticky;
+  /* The pane's own top padding is the gap, at rest and stuck alike, so the index never jumps. */
+  top: 0;
+  max-height: calc(100dvh - 160px);
+  overflow-y: auto;
+  padding: 4px 0;
+}
+.prb-help-contents ul { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--border); }
+/* The rail's mark for where you are: a brand rule on the left and the tinted ground, here over the
+   list's own rule so the mark sits on the track it moves along. */
+.prb-help-contents a {
+  display: block;
+  margin-left: -1px;
+  padding: 5px 10px 5px 14px;
+  border-left: 2px solid transparent;
+  border-radius: 0 6px 6px 0;
+  font-size: var(--t-meta);
+  line-height: 1.4;
+  color: var(--text-secondary);
+  text-decoration: none;
+}
+.prb-help-contents a:hover { color: var(--text-primary); background: var(--surface-hover); }
+.prb-help-contents a[aria-current] {
+  border-left-color: var(--brand);
+  background: var(--brand-muted);
+  color: var(--text-primary);
+  font-weight: 500;
+}
+.prb-help-contents a:focus-visible { outline: 2px solid var(--brand-hover); outline-offset: -2px; }
+/* Too narrow for a column beside the prose: the index goes back above the topics, as a wrapping
+   row, and stops following the scroll. After the rules above, which it overrides. */
+@container (max-width: 760px) {
+  .prb-help-layout { display: block; }
+  .prb-help-contents { position: static; max-height: none; margin: 0 0 16px; padding: 0; }
+  .prb-help-contents ul { display: flex; flex-wrap: wrap; gap: 4px; border-left: 0; }
+  .prb-help-contents a { margin-left: 0; padding: 4px 10px; border-left: 0; border-radius: 6px; }
+}
 /* A diagram's spacing is its meaning, so it never wraps: a narrow window scrolls it instead. */
 .prb-help-diagram {
   margin: 0 0 12px;
@@ -5694,7 +5882,7 @@ a.prb-notification-open:focus-visible { outline: 2px solid var(--brand-hover); o
 .prb-toast[data-kind='updated'] { border-left-color: var(--brand); }
 .prb-toast-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .prb-toast-open { flex: none; color: var(--wordmark-accent); font-weight: 600; text-decoration: none; }
-.prb-toast-open:hover { text-decoration: underline; text-underline-offset: 2px; }
+.prb-toast-open:hover { opacity: 0.8; }
 .prb-toast-close {
   flex: none;
   width: 24px;
@@ -5723,6 +5911,10 @@ a.prb-notification-open:focus-visible { outline: 2px solid var(--brand-hover); o
    and without depending on this block staying last. */
 body .prb-body[data-focus] { grid-template-columns: minmax(0, 1fr); }
 body .prb-body[data-focus] .prb-rail { display: none; }
+/* The rail's New review goes with it, so the strip's square one stands in, as below 860px. */
+body:has(.prb-body[data-focus]) .prb-strip .prb-strip-new-review { display: flex; }
+/* Focus is left from the pane it expanded, so Show sidebar would bring back nothing here. */
+body:has(.prb-body[data-focus]) .prb-strip .prb-sidebar-restore { display: none; }
 
 /* A document surface, which is every view but the assistant: the review pane takes the width, and
    gets more room to use it. Prose stays a readable measure; a diff and a drawing are the things here
@@ -6349,7 +6541,6 @@ select.prb-addreview-control { padding-right: 32px; }
   color: var(--link);
   font: inherit;
   font-size: var(--t-micro);
-  text-decoration: underline;
   cursor: pointer;
 }
 .prb-addreview-retry { margin-left: calc(1em + 8px); }
@@ -6437,7 +6628,7 @@ select.prb-addreview-control { padding-right: 32px; }
 }
 .prb-selection-goto[hidden] { display: none; }
 .prb-selection-sep { color: var(--pane-ink-faint); white-space: pre; }
-.prb-selection-goto:hover [data-feedback-goto-label] { text-decoration: underline; }
+.prb-selection-goto:hover [data-feedback-goto-label] { opacity: 0.8; }
 .prb-selection-spacer { flex: 1; }
 .prb-selection-button {
   padding: 6px 12px;
@@ -6614,3 +6805,85 @@ select.prb-addreview-control { padding-right: 32px; }
   .prb-runs-count { padding: 8px 10px; }
   .prb-runs-count dd { font-size: var(--t-section); }
 }
+
+
+/* ── Guided tour ──
+   A modal dialog as big as the window, so everything under it is inert; the spotlight's shadow is
+   the dim, and the card sits beside whatever the spotlight is on. Positions are set by tour.ts. */
+.prb-tour {
+  position: fixed;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  max-width: none;
+  max-height: none;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  overflow: hidden;
+  color: var(--text-primary);
+  font: inherit;
+}
+.prb-tour::backdrop { background: transparent; }
+/* No target to light: the welcome, or a stop this layout does not draw. The whole page dims. */
+.prb-tour[data-spotless] { background: var(--backdrop); }
+.prb-tour-spot {
+  position: fixed;
+  border-radius: 10px;
+  outline: 2px solid var(--brand);
+  outline-offset: 0;
+  box-shadow: 0 0 0 200vmax var(--backdrop);
+  pointer-events: none;
+}
+.prb-tour-card {
+  position: fixed;
+  box-sizing: border-box;
+  padding: 20px 22px 18px;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  background: var(--surface-raised);
+  box-shadow: 0 12px 32px var(--shadow-float);
+}
+.prb-tour[data-welcome] .prb-tour-card { padding: 26px 28px 22px; }
+.prb-tour-count {
+  margin: 0 0 8px;
+  font-size: var(--t-meta);
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--brand-hover);
+}
+.prb-tour-title { margin: 0 0 8px; font-size: var(--t-section); font-weight: 650; line-height: 1.3; }
+.prb-tour[data-welcome] .prb-tour-title { font-size: 20px; }
+.prb-tour-text p { margin: 0 0 8px; font-size: var(--t-body); line-height: var(--lh-body); color: var(--text-secondary); }
+.prb-tour-actions { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
+.prb-tour-actions button {
+  padding: 7px 14px;
+  border-radius: 8px;
+  border: 1px solid var(--border);
+  background: var(--surface-2);
+  color: var(--text-primary);
+  font: inherit;
+  font-size: var(--t-body);
+  cursor: pointer;
+}
+.prb-tour-actions button:hover { border-color: var(--border-strong); }
+.prb-tour-actions button:focus-visible { outline: 2px solid var(--brand-hover); outline-offset: 2px; }
+.prb-tour-actions .prb-tour-skip {
+  margin-right: auto;
+  padding-left: 0;
+  padding-right: 0;
+  border-color: transparent;
+  background: transparent;
+  color: var(--text-secondary);
+}
+.prb-tour-actions .prb-tour-skip:hover { border-color: transparent; color: var(--text-primary); }
+.prb-tour-actions .prb-tour-next {
+  border-color: var(--brand);
+  background: var(--brand);
+  color: var(--on-brand);
+  font-weight: 600;
+}
+.prb-tour-actions .prb-tour-next:hover { border-color: var(--brand-hover); background: var(--brand-hover); }
+.prb-tour-actions button[hidden] { display: none; }