@davmash/bygone 0.9.7 → 0.10.0

package/web/presenter.css

@@ -1,15 +1,19 @@
 :root {
     --tour-rail-width: 300px;
-    --tour-accent-bright: #a99fff;
-    --tour-surface: #11131a;
-    --tour-border: rgba(255, 255, 255, 0.09);
-    --tour-muted: rgba(232, 235, 246, 0.84);
-    --tour-faint: rgba(232, 235, 246, 0.72);
-    --tour-body: #eef1fa;
-    --tour-body-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
     --tour-narrative-height: min(38vh, 360px);
 }
 
+/* Tour-specific layout and prose inherit the shared window theme. */
+body {
+    --tour-accent-bright: var(--bygone-accent);
+    --tour-surface: var(--bygone-surface);
+    --tour-border: var(--bygone-border);
+    --tour-muted: var(--bygone-muted);
+    --tour-faint: var(--bygone-muted);
+    --tour-body: var(--bygone-text);
+    --tour-body-font: var(--bygone-ui-font);
+}
+
 .tour-mode-controls { display: grid; gap: 6px; margin: 12px 0; }
 .tour-mode-controls[hidden], .tour-mode-controls [hidden] { display: none; }
 .tour-mode-controls select { width: 100%; min-width: 0; padding: 6px; color: var(--tour-body); background: var(--tour-surface); border: 1px solid var(--tour-border); border-radius: 4px; font: inherit; }
@@ -26,70 +30,23 @@ body.tour-derived-mode #tour-narrative { display: none; }
     box-sizing: border-box;
     flex-direction: column;
     overflow: hidden;
-    color: #f5f6fb;
+    color: var(--tour-body);
     border-right: 1px solid var(--tour-border);
     background: var(--tour-surface);
     box-shadow: 18px 0 45px rgba(0, 0, 0, 0.22);
-    font: 12px var(--tour-body-font);
+    font: var(--bygone-ui-font-size) var(--tour-body-font);
 }
 
 .tour-shell[hidden] {
     display: none;
 }
 
-.tour-review-toggle,
-.tour-review button {
-    border: 1px solid var(--tour-border);
-    border-radius: 6px;
-    padding: 7px 10px;
-    color: var(--tour-body);
-    background: rgba(255, 255, 255, 0.06);
-    font: inherit;
-    cursor: pointer;
-}
-
-.tour-review-toggle { margin-top: 12px; }
-.tour-review-toggle:hover, .tour-review button:hover { border-color: var(--tour-accent-bright); }
-.tour-review-toggle:focus-visible, .tour-review button:focus-visible { outline: 2px solid var(--tour-accent-bright); outline-offset: 2px; }
-.tour-review[hidden], .tour-review-toggle[hidden] { display: none; }
-
-.tour-review {
-    position: fixed;
-    top: 16px;
-    right: 16px;
-    z-index: 160;
-    display: flex;
-    flex-direction: column;
-    box-sizing: border-box;
-    width: min(480px, calc(100vw - var(--tour-rail-width) - 32px));
-    max-height: calc(100vh - 32px);
-    border: 1px solid var(--tour-border);
-    border-radius: 10px;
-    background: var(--tour-surface);
-    color: var(--tour-body);
-    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
-    font: 13px/1.5 var(--tour-body-font);
-}
-
-.tour-review-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--tour-border); }
-.tour-review-heading h2 { margin: 0; font-size: 18px; }
-.tour-review-content { overflow-y: auto; padding: 0 18px 18px; min-height: 0; overflow-wrap: anywhere; }
-.tour-review-content h3 { color: var(--tour-accent-bright); font-size: 13px; margin: 22px 0 10px; }
-.tour-review-item { border-top: 1px solid var(--tour-border); padding: 12px 0; }
-.tour-review-item h4 { font-size: 14px; margin: 0 0 6px; }
-.tour-review-item p { margin: 6px 0 10px; white-space: pre-wrap; }
-.tour-review-provenance, .tour-review-range, .tour-review-next { color: var(--tour-muted); }
-.tour-review-range { font-size: 12px; }
-.tour-review-evidence { display: block; width: 100%; text-align: left; margin: 6px 0; overflow-wrap: anywhere; }
-#tour-review-status:empty { display: none; }
-#tour-review-status { margin: 0; padding: 12px 18px; border-top: 1px solid var(--tour-border); }
-
 .tour-sidebar-hide,
 .tour-sidebar-show {
     border: 1px solid var(--tour-border);
     border-radius: 6px;
-    background: rgba(255, 255, 255, 0.07);
-    color: #f5f6fb;
+    background: var(--bygone-hover);
+    color: var(--tour-body);
     cursor: pointer;
     font: inherit;
 }
@@ -133,7 +90,7 @@ body.tour-derived-mode #tour-narrative { display: none; }
 .tour-sidebar-resizer:hover,
 .tour-sidebar-resizer:focus-visible,
 body.is-resizing-tour-sidebar .tour-sidebar-resizer {
-    background: rgba(169, 159, 255, 0.75);
+    background: color-mix(in srgb, var(--tour-accent-bright) 75%, transparent);
     outline: none;
 }
 
@@ -195,7 +152,7 @@ body.tour-mode #container {
 
 .tour-overview h1 > button#tour-title:hover,
 .tour-overview h1 > button#tour-title:focus-visible {
-    color: #fff;
+    color: var(--tour-body);
 }
 
 .tour-overview h1 > button#tour-title:focus-visible {
@@ -204,13 +161,13 @@ body.tour-mode #container {
 }
 
 .tour-overview h1 > button#tour-title.is-active {
-    border-left-color: rgba(169, 159, 255, 0.72);
+    border-left-color: var(--bygone-accent-strong);
 }
 
 .tour-source {
     display: inline-block;
     margin-bottom: 10px;
-    color: #bcb5ff;
+    color: var(--tour-accent-bright);
     text-decoration: none;
 }
 
@@ -219,7 +176,7 @@ body.tour-mode #container {
 }
 
 .tour-source:hover {
-    color: #fff;
+    color: var(--tour-body);
 }
 
 .tour-meta {
@@ -318,16 +275,16 @@ body.tour-mode #container {
     min-width: 0;
     box-sizing: border-box;
     padding: 6px 8px;
-    color: #f5f6fb;
+    color: var(--tour-body);
     border: 1px solid var(--tour-border);
     border-radius: 5px;
-    background: rgba(255, 255, 255, 0.055);
+    background: var(--bygone-hover);
     font: inherit;
 }
 
 .tour-search input:focus,
 .tour-search select:focus {
-    border-color: rgba(169, 159, 255, 0.7);
+    border-color: color-mix(in srgb, var(--tour-accent-bright) 70%, transparent);
     outline: none;
 }
 
@@ -348,7 +305,7 @@ body.tour-mode #container {
     display: grid;
     min-width: 0;
     padding: 6px 8px;
-    color: #e5e7f0;
+    color: var(--tour-body);
     border: 1px solid transparent;
     border-radius: 5px;
     background: transparent;
@@ -358,8 +315,8 @@ body.tour-mode #container {
 
 .tour-search-result:hover,
 .tour-search-result:focus-visible {
-    border-color: rgba(169, 159, 255, 0.28);
-    background: rgba(255, 255, 255, 0.055);
+    border-color: var(--bygone-accent-subtle);
+    background: var(--bygone-hover);
     outline: none;
 }
 
@@ -370,7 +327,7 @@ body.tour-mode #container {
     white-space: nowrap;
 }
 
-.tour-search-location { color: #fff; font-weight: 650; }
+.tour-search-location { color: var(--tour-body); font-weight: 650; }
 .tour-search-preview { margin-top: 2px; color: var(--tour-muted); font-family: var(--vscode-editor-font-family, monospace); }
 
 .tour-narrative {
@@ -387,11 +344,11 @@ body.tour-mode #container {
     flex-direction: column;
     overflow: hidden;
     padding: 12px 24px 16px;
-    color: #f5f6fb;
+    color: var(--tour-body);
     border-bottom: 1px solid var(--tour-border);
-    background: #151821;
+    background: var(--bygone-surface-raised);
     scrollbar-gutter: stable;
-    font: 12px var(--tour-body-font);
+    font: var(--bygone-ui-font-size) var(--tour-body-font);
 }
 
 .tour-narrative[hidden] {
@@ -412,7 +369,7 @@ body.tour-mode #container {
 .tour-narrative-resizer:hover,
 .tour-narrative-resizer:focus-visible,
 body.is-resizing-tour-narrative .tour-narrative-resizer {
-    background: rgba(169, 159, 255, 0.75);
+    background: color-mix(in srgb, var(--tour-accent-bright) 75%, transparent);
     outline: none;
 }
 
@@ -423,6 +380,7 @@ body.tour-derived-mode .tour-narrative-resizer {
 
 .tour-narrative-toolbar {
     display: flex;
+    flex-wrap: wrap;
     min-width: 0;
     gap: 12px;
     align-items: center;
@@ -433,6 +391,17 @@ body.tour-derived-mode .tour-narrative-resizer {
     background: rgba(255, 255, 255, 0.025);
 }
 
+.tour-navigation {
+    display: flex;
+    flex: 0 0 auto;
+    gap: 6px;
+    white-space: nowrap;
+}
+
+.tour-narrative-toolbar .tour-navigation button {
+    color: var(--tour-body);
+}
+
 .tour-narrative-toolbar button {
     padding: 5px 9px;
     color: var(--tour-muted);
@@ -446,14 +415,14 @@ body.tour-derived-mode .tour-narrative-resizer {
 .tour-narrative-toolbar button:hover:not(:disabled),
 .tour-narrative-toolbar button:focus-visible,
 .tour-narrative-toolbar button[aria-pressed="true"] {
-    color: #fff;
-    border-color: rgba(169, 159, 255, 0.55);
-    background: rgba(169, 159, 255, 0.13);
+    color: var(--tour-body);
+    border-color: color-mix(in srgb, var(--tour-accent-bright) 55%, transparent);
+    background: var(--bygone-selection);
 }
 
 .tour-narrative-toolbar button:focus-visible {
     outline: none;
-    box-shadow: 0 0 0 2px rgba(128, 117, 255, 0.28);
+    box-shadow: 0 0 0 2px var(--bygone-accent-subtle);
 }
 
 .tour-narrative-toolbar button:disabled {
@@ -534,10 +503,10 @@ body.tour-derived-mode .tour-narrative-resizer {
 .tour-narration-transport button:hover:not(:disabled),
 .tour-narration-transport button:focus-visible,
 .tour-narration-controls select:focus-visible {
-    color: #fff;
+    color: var(--tour-body);
     outline: none;
-    background: rgba(169, 159, 255, 0.13);
-    box-shadow: inset 0 0 0 1px rgba(169, 159, 255, 0.55);
+    background: var(--bygone-selection);
+    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tour-accent-bright) 55%, transparent);
 }
 
 .tour-narration-transport button:disabled,
@@ -572,8 +541,8 @@ body.tour-derived-mode .tour-narrative-resizer {
 }
 
 .tour-narration-segment.is-speaking.is-paused {
-    background: rgba(169, 159, 255, 0.16);
-    box-shadow: inset 0 -2px 0 rgba(169, 159, 255, 0.72);
+    background: color-mix(in srgb, var(--tour-accent-bright) 16%, transparent);
+    box-shadow: inset 0 -2px 0 var(--bygone-accent-strong);
 }
 
 .tour-breadcrumb {
@@ -606,7 +575,7 @@ body.tour-derived-mode .tour-narrative-resizer {
     margin-left: auto;
     padding: 2px 6px;
     color: var(--tour-accent-bright);
-    border: 1px solid rgba(169, 159, 255, 0.28);
+    border: 1px solid var(--bygone-accent-subtle);
     border-radius: 4px;
     background: transparent;
     cursor: pointer;
@@ -616,7 +585,7 @@ body.tour-derived-mode .tour-narrative-resizer {
 }
 
 .tour-return-focus[hidden] { display: none; }
-.tour-return-focus:hover { color: #fff; background: rgba(169, 159, 255, 0.1); }
+.tour-return-focus:hover { color: var(--tour-body); background: color-mix(in srgb, var(--tour-accent-bright) 10%, transparent); }
 
 .tour-scenes {
     flex: 1;
@@ -634,7 +603,7 @@ body.tour-derived-mode .tour-narrative-resizer {
     gap: 7px;
     align-items: start;
     padding: 6px 9px;
-    color: #e5e7f0;
+    color: var(--tour-body);
     border: 1px solid transparent;
     border-radius: 6px;
     background: transparent;
@@ -642,11 +611,11 @@ body.tour-derived-mode .tour-narrative-resizer {
     cursor: pointer;
 }
 
-.tour-file:hover:not(:disabled) { background: rgba(255, 255, 255, 0.045); }
+.tour-file:hover:not(:disabled) { background: var(--bygone-hover); }
 
 .tour-file.is-active {
-    border-color: rgba(128, 117, 255, 0.4);
-    background: rgba(101, 83, 255, 0.14);
+    border-color: var(--bygone-accent-subtle);
+    background: var(--bygone-selection);
 }
 
 .tour-file:disabled { opacity: 0.62; cursor: default; }
@@ -686,7 +655,7 @@ body.tour-derived-mode .tour-narrative-resizer {
 }
 
 .tour-file-path {
-    color: #f5f6fb;
+    color: var(--tour-body);
     font-family: var(--vscode-editor-font-family, monospace);
 }
 
@@ -701,11 +670,11 @@ body.tour-derived-mode .tour-narrative-resizer {
     box-sizing: border-box;
     display: grid;
     width: 100%;
-    grid-template-columns: 24px minmax(0, 1fr);
+    grid-template-columns: minmax(0, 1fr);
     gap: 7px;
     align-items: start;
     padding: 9px 10px;
-    color: #e5e7f0;
+    color: var(--tour-body);
     border: 1px solid transparent;
     border-left-width: 2px;
     border-radius: 7px;
@@ -715,7 +684,7 @@ body.tour-derived-mode .tour-narrative-resizer {
 }
 
 .tour-scene:hover {
-    background: rgba(255, 255, 255, 0.045);
+    background: var(--bygone-hover);
 }
 
 .tour-scene-number {
@@ -738,7 +707,7 @@ body.tour-derived-mode .tour-narrative-resizer {
 
 .tour-scene-title {
     margin-bottom: 3px;
-    color: #fff;
+    color: var(--tour-body);
     font-weight: 650;
 }
 
@@ -820,7 +789,7 @@ body.tour-derived-mode .tour-narrative-resizer {
 }
 
 .tour-reading-item.is-active {
-    border-left-color: rgba(169, 159, 255, 0.72);
+    border-left-color: var(--bygone-accent-strong);
 }
 
 .tour-reading-item h1,
@@ -832,7 +801,7 @@ body.tour-derived-mode .tour-narrative-resizer {
 }
 
 .tour-reading-item[data-reading-kind="title"] h1 {
-    color: #fff;
+    color: var(--tour-body);
     font-size: 22px;
     font-weight: 750;
 }
@@ -844,14 +813,14 @@ body.tour-derived-mode .tour-narrative-resizer {
 }
 
 .tour-reading-item[data-reading-kind="scene"] h2 {
-    color: #fff;
+    color: var(--tour-body);
     font-size: 20px;
     font-weight: 700;
 }
 
 .tour-reading-item[data-reading-kind="step"] h3,
 .tour-reading-item .tour-step-title {
-    color: #fff;
+    color: var(--tour-body);
     font-size: 18px;
     font-weight: 700;
 }
@@ -860,6 +829,11 @@ body.tour-derived-mode .tour-narrative-resizer {
     min-height: max(0px, var(--tour-reading-viewport, 0px));
 }
 
+.tour-reading-item[data-reading-kind="title"],
+.tour-reading-item[data-reading-kind="chapter"] {
+    min-height: var(--tour-bookend-viewport, 0px);
+}
+
 .tour-narrative-chapter {
     margin-bottom: 5px;
     color: var(--tour-accent-bright);
@@ -908,7 +882,7 @@ body.tour-derived-mode .tour-narrative-resizer {
     box-sizing: border-box;
     padding: 8px 11px 8px 13px;
     color: var(--tour-body);
-    border-left: 2px solid rgba(128, 117, 255, 0.28);
+    border-left: 2px solid var(--bygone-accent-subtle);
     background: rgba(255, 255, 255, 0.015);
 }
 
@@ -919,67 +893,80 @@ body.tour-derived-mode .tour-narrative-resizer {
 
 .tour-step-body { margin: 8px 0 0; max-width: 85ch; color: var(--tour-body); font-size: 15px; line-height: 1.6; }
 
-.tour-step-context {
-    margin: 0 0 9px;
+/* One heading stays with the entire scene, including its steps. */
+.tour-reading-item.tour-scene-group {
+    padding: 0;
+    border-left: 0;
 }
 
-.tour-step-context > summary {
+.tour-scene-header {
+    position: sticky;
+    top: 0;
+    z-index: 2;
     display: flex;
-    align-items: center;
-    min-width: 0;
-    gap: 6px;
-    padding: 4px 0;
-    overflow-wrap: anywhere;
-    color: var(--tour-muted);
-    font-size: 13px;
-    line-height: 1.4;
-    cursor: pointer;
-    list-style: none;
-}
-
-.tour-step-context > summary::before {
-    color: var(--tour-faint);
-    content: "▸";
+    align-items: flex-start;
+    gap: 8px;
+    padding: 9px 12px 8px 14px;
+    border-left: 2px solid transparent;
+    background: var(--bygone-surface-raised);
 }
 
-.tour-step-context[open] > summary::before {
-    content: "▾";
-}
+.tour-scene-header.is-stuck { box-shadow: 0 1px var(--tour-border); }
+.tour-scene-header .tour-scene-heading { flex: 1; min-width: 0; margin: 0; }
+.tour-scene-title-toggle { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
+.tour-scene-title-toggle:disabled { opacity: 1; cursor: text; }
+.tour-scene-title-toggle:focus-visible { outline: 2px solid var(--tour-accent-bright); }
+.tour-scene-overview { padding: 0 12px 11px 14px; border-left: 2px solid transparent; }
+.tour-scene-group.is-active > .tour-scene-header,
+.tour-scene-group.is-active > .tour-scene-overview { border-left-color: var(--bygone-accent-strong); }
+.tour-scene-group:last-child > .tour-reading-item:last-child { min-height: var(--tour-reading-viewport, 0px); }
 
-.tour-step-context > summary::-webkit-details-marker {
-    display: none;
+.tour-scene-context { flex: 0 0 auto; }
+.tour-scene-context > summary {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    color: var(--tour-body);
+    background: var(--tour-surface);
+    cursor: pointer;
+    list-style: none;
+    border-radius: 4px;
 }
-
-.tour-step-context > summary::marker {
+.tour-scene-header:not(.is-stuck) .tour-scene-context { visibility: hidden; }
+.tour-scene-context > summary::before {
     content: "";
-}
-
-.tour-step-context > summary:hover,
-.tour-step-context > summary:focus-visible {
-    color: #fff;
-}
-
-.tour-step-context > summary:focus-visible {
-    outline: 2px solid var(--tour-accent-bright);
-    outline-offset: 2px;
-}
-
-.tour-step-context-body {
-    margin: 2px 0 8px;
-    padding: 7px 0 3px 12px;
+    width: 7px;
+    height: 7px;
+    border-right: 2px solid currentColor;
+    border-bottom: 2px solid currentColor;
+    transform: rotate(-45deg);
+}
+.tour-scene-context[open] > summary::before { transform: rotate(45deg); }
+.tour-scene-context > summary::-webkit-details-marker { display: none; }
+.tour-scene-context > summary::marker { content: ""; }
+.tour-scene-context > summary:hover { color: var(--tour-body); background: var(--tour-surface); }
+.tour-scene-context > summary:focus-visible { outline: 2px solid var(--tour-accent-bright); }
+
+.tour-scene-context-body {
+    position: absolute;
+    top: 100%;
+    left: 2px;
+    right: 0;
+    box-sizing: border-box;
+    max-height: calc(var(--tour-reading-viewport, 200px) / 2);
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    padding: 12px 14px;
     color: var(--tour-muted);
-    border-left: 1px solid rgba(169, 159, 255, 0.28);
+    border: 1px solid var(--tour-border);
+    background: var(--bygone-surface-raised);
+    box-shadow: 0 5px 12px rgba(0, 0, 0, .25);
     font-size: 13px;
     line-height: 1.45;
 }
 
-.tour-step-context-body .tour-narrative-summary,
-.tour-step-context-body .tour-narrative-bullets,
-.tour-step-context-body .tour-narrative-tags,
-.tour-step-context-body .tour-narrative-takeaway {
-    color: inherit;
-}
-
 .tour-step-requirement {
     display: flex;
     flex-wrap: wrap;
@@ -992,7 +979,7 @@ body.tour-derived-mode .tour-narrative-resizer {
 
 .tour-requirement-chip {
     padding: 1px 6px;
-    border: 1px solid rgba(166, 140, 255, 0.34);
+    border: 1px solid var(--bygone-accent-subtle);
     border-radius: 9px;
     color: var(--tour-body);
     font-size: 12px;
@@ -1020,7 +1007,7 @@ body.tour-derived-mode .tour-narrative-resizer {
     margin-top: 7px;
     padding-top: 7px;
     color: var(--tour-faint);
-    border-top: 1px solid rgba(166, 140, 255, 0.2);
+    border-top: 1px solid var(--bygone-accent-subtle);
     font-family: var(--vscode-editor-font-family, monospace);
 }
 
@@ -1049,18 +1036,18 @@ body.tour-derived-mode .tour-narrative-resizer {
     flex: none;
     padding: 4px 8px;
     color: var(--tour-accent-bright);
-    border: 1px solid rgba(169, 159, 255, 0.35);
+    border: 1px solid color-mix(in srgb, var(--tour-accent-bright) 35%, transparent);
     border-radius: 5px;
-    background: rgba(169, 159, 255, 0.07);
+    background: color-mix(in srgb, var(--tour-accent-bright) 7%, transparent);
     cursor: pointer;
     font: inherit;
 }
 
 .tour-show-in-code:hover,
 .tour-show-in-code:focus-visible {
-    color: #fff;
-    border-color: rgba(169, 159, 255, 0.7);
-    background: rgba(169, 159, 255, 0.14);
+    color: var(--tour-body);
+    border-color: color-mix(in srgb, var(--tour-accent-bright) 70%, transparent);
+    background: color-mix(in srgb, var(--tour-accent-bright) 14%, transparent);
     outline: none;
 }
 
@@ -1074,6 +1061,7 @@ body.tour-derived-mode .tour-narrative-resizer {
 .tour-narrative-content {
     flex: 1 1 auto;
     min-height: 0;
+    overflow-anchor: none;
     overflow-x: hidden;
     overflow-y: auto;
     padding-right: 8px;
@@ -1082,7 +1070,7 @@ body.tour-derived-mode .tour-narrative-resizer {
 .tour-audio-settings > summary, .tour-details > summary {
     cursor: pointer; color: var(--tour-muted); padding: 5px 0; line-height: 1.5;
 }
-.tour-audio-settings > summary:hover, .tour-details > summary:hover { color: #fff; }
+.tour-audio-settings > summary:hover, .tour-details > summary:hover { color: var(--tour-body); }
 .tour-audio-settings > summary:focus-visible,
 .tour-details > summary:focus-visible { outline: 2px solid var(--tour-accent-bright); outline-offset: 2px; }
 .tour-audio-settings > summary[hidden] { display: none; }
@@ -1104,18 +1092,46 @@ body.tour-derived-mode .tour-narrative-resizer {
 .tour-narration-dock #tour-listen {
     display: inline-flex;
     align-items: center;
+    justify-content: center;
+    flex: 0 0 auto;
     gap: 5px;
     color: var(--tour-accent-bright);
 }
+.tour-narration-dock #tour-listen-label { min-width: 7ch; }
 .tour-narration-dock #tour-listen svg { width: 12px; height: 12px; fill: currentColor; }
 .tour-narration-dock #tour-narration { flex-shrink: 0; }
 .tour-narration-dock #tour-narration-voice { max-width: 150px; }
 .tour-narration-dock .tour-narration-status {
+    flex: 0 0 28ch;
+    width: 28ch;
     min-width: 0;
-    white-space: normal;
-    overflow-wrap: anywhere;
+    padding-inline: 4px;
+    box-sizing: border-box;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-variant-numeric: tabular-nums;
 }
 .tour-details { margin-top: 10px; font-size: 12px; }
+.tour-details[open] { max-height: 50vh; overflow-y: auto; padding-right: 6px; }
+#tour-audience { border-top: 1px solid var(--tour-border); margin-top: 12px; line-height: 1.55; overflow-wrap: anywhere; }
+#tour-audience h2 { font-size: 13px; margin: 14px 0 6px; }
+#tour-audience p { margin: 6px 0; }
+#tour-audience summary { cursor: pointer; padding: 5px 0; }
+#tour-audience dt { color: var(--tour-muted); margin-top: 6px; }
+#tour-audience dd { margin: 0; }
+.tour-feedback-actions { display: flex; flex-wrap: wrap; gap: 6px; }
+.tour-feedback-dialog { box-sizing: border-box; width: min(620px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; color: var(--tour-body); background: var(--tour-surface); border: 1px solid var(--tour-border); border-radius: 8px; padding: 24px; }
+.tour-feedback-dialog::backdrop { background: rgb(0 0 0 / 55%); }
+.tour-feedback-dialog h2 { font-size: 20px; margin: 0; }
+.tour-feedback-dialog p { line-height: 1.5; }
+.tour-feedback-dialog label { display: block; margin-bottom: 6px; }
+.tour-feedback-dialog textarea { box-sizing: border-box; width: 100%; color: var(--tour-body); background: var(--tour-surface); border: 1px solid var(--tour-border); padding: 8px; font: inherit; resize: vertical; }
+.tour-feedback-dialog details { margin: 12px 0; }
+.tour-feedback-dialog summary { cursor: pointer; }
+.tour-feedback-dialog pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 220px; overflow: auto; font-size: 12px; }
+.tour-feedback-dialog button { color: var(--tour-body); background: var(--tour-surface); border: 1px solid var(--tour-border); border-radius: 4px; padding: 7px 12px; cursor: pointer; }
+.tour-feedback-dialog :focus-visible, #tour-audience summary:focus-visible { outline: 2px solid var(--tour-accent-bright); outline-offset: 2px; }
 .tour-details .tour-source { display: inline-block; margin-top: 8px; }
 .tour-details .tour-source[hidden] { display: none; }
 .tour-files[hidden],
@@ -1127,7 +1143,7 @@ body.tour-derived-mode .tour-narrative-resizer {
 }
 
 .tour-outline-group.has-active {
-    border-left-color: rgba(169, 159, 255, 0.58);
+    border-left-color: color-mix(in srgb, var(--tour-accent-bright) 58%, transparent);
 }
 
 .tour-outline-heading {
@@ -1151,8 +1167,8 @@ body.tour-derived-mode .tour-narrative-resizer {
 
 .tour-outline-toggle:hover,
 .tour-outline-toggle:focus-visible {
-    color: #fff;
-    background: rgba(255, 255, 255, 0.045);
+    color: var(--tour-body);
+    background: var(--bygone-hover);
 }
 
 .tour-outline-toggle:focus-visible {
@@ -1187,8 +1203,8 @@ body.tour-derived-mode .tour-narrative-resizer {
     cursor: pointer;
     overflow-wrap: anywhere;
 }
-.tour-outline-step:hover { background: rgba(255,255,255,.05); }
-.tour-outline-step.is-active { border-left-color: rgba(169,159,255,.72); }
+.tour-outline-step:hover { background: var(--bygone-hover); }
+.tour-outline-step.is-active { border-left-color: var(--bygone-accent-strong); }
 .tour-outline-step:focus-visible { outline: 2px solid var(--tour-accent-bright); outline-offset: 1px; }
 
 .tour-chapter-link {
@@ -1208,12 +1224,12 @@ body.tour-derived-mode .tour-narrative-resizer {
 }
 
 .tour-chapter-link:hover {
-    background: rgba(255, 255, 255, 0.045);
+    background: var(--bygone-hover);
 }
 
 .tour-chapter-link.is-active,
 .tour-scene.is-active {
-    border-left-color: rgba(169, 159, 255, 0.72);
+    border-left-color: var(--bygone-accent-strong);
 }
 
 .tour-chapter-link:focus-visible {
@@ -1243,16 +1259,35 @@ body.tour-derived-mode .tour-narrative-resizer {
 .tour-mode-tabs { display: flex; flex-wrap: wrap; gap: 5px; }
 .tour-mode-tabs button { padding: 5px 8px; border: 1px solid var(--tour-border); border-radius: 5px; background: var(--tour-surface); color: var(--tour-body); font: inherit; font-size: 12px; cursor: pointer; }
 .tour-mode-tabs button:hover { border-color: var(--tour-accent-bright); }
-.tour-mode-tabs button.is-active { color: #fff; border-color: var(--tour-accent-bright); background: rgba(169, 159, 255, 0.13); }
+.tour-mode-tabs button.is-active { color: var(--tour-body); border-color: var(--tour-accent-bright); background: var(--bygone-selection); }
 .tour-mode-tabs button:focus-visible { outline: 2px solid var(--tour-accent-bright); outline-offset: 2px; }
 .tour-mode-description { margin: 2px 0; color: var(--tour-muted); font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
 .tour-evidence-controls { display: grid; gap: 6px; }
 .tour-evidence-controls[hidden] { display: none; }
-.tour-evidence-actions { display: flex; flex-wrap: wrap; gap: 6px; }
-.tour-evidence-actions button { padding: 5px 8px; border: 1px solid var(--tour-border); border-radius: 5px; background: var(--tour-surface); color: var(--tour-body); font: inherit; font-size: 12px; cursor: pointer; }
-.tour-evidence-actions button:hover { border-color: var(--tour-accent-bright); }
-.tour-evidence-actions button:disabled { opacity: .5; cursor: default; }
-#tour-compare-scope { font-size: 12px; overflow-wrap: anywhere; }
+.tour-selection-toolbar { display: flex; align-items: center; gap: 6px; min-width: 0; }
+.tour-selection-summary { display: grid; gap: 3px; flex: 1; min-width: 0; }
+.tour-selection-count { color: var(--tour-body); font-size: 12px; font-weight: 600; }
+.tour-selection-hint { color: var(--tour-muted); font-size: 12px; line-height: 1.4; }
+.tour-evidence-controls button,
+.tour-selection-more > summary { border: 1px solid transparent; border-radius: 6px; color: var(--tour-body); font: inherit; font-size: 12px; cursor: pointer; }
+.tour-evidence-controls button:focus-visible,
+.tour-selection-more > summary:focus-visible { outline: 2px solid var(--tour-accent-bright); outline-offset: 2px; }
+.tour-evidence-controls button:disabled { opacity: .45; cursor: default; }
+.tour-evidence-controls .tour-selection-apply { padding: 6px 11px; background: var(--bygone-selection); color: var(--tour-accent-bright); border-color: color-mix(in srgb, var(--tour-accent-bright) 35%, transparent); font-weight: 600; }
+.tour-evidence-controls .tour-selection-apply:not(:disabled):hover { border-color: var(--tour-accent-bright); }
+.tour-selection-more { position: relative; flex: 0 0 auto; }
+.tour-selection-more > summary { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; list-style: none; }
+.tour-selection-more > summary::-webkit-details-marker { display: none; }
+.tour-selection-more > summary svg { width: 18px; height: 18px; fill: currentColor; }
+.tour-selection-more > summary:hover,
+.tour-selection-more[open] > summary { background: var(--bygone-hover); }
+.tour-selection-menu { position: absolute; z-index: 20; top: calc(100% + 6px); right: 0; width: 208px; padding: 4px; border: 1px solid var(--tour-border); border-radius: 8px; background: var(--tour-surface); box-shadow: 0 6px 20px #0003; }
+.tour-selection-menu button { display: block; width: 100%; padding: 8px; background: transparent; text-align: left; }
+.tour-selection-menu button[hidden] { display: none; }
+.tour-selection-menu button:not(:disabled):hover { background: var(--bygone-hover); }
+.tour-selection-menu button span { display: block; margin-top: 3px; color: var(--tour-muted); font-size: 12px; }
+.tour-selection-menu hr { margin: 4px; border: 0; border-top: 1px solid var(--tour-border); }
+.tour-comparison-scope { color: var(--tour-muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 body.tour-derived-mode .tour-search { display: none; }
 body.tour-derived-mode .tour-overview { flex-shrink: 0; }
 body.tour-derived-mode .tour-shell { overflow-y: auto; }
@@ -1264,7 +1299,7 @@ body.tour-derived-mode .tour-shell { overflow-y: auto; }
     flex-wrap: wrap;
     gap: 8px;
     padding-block: 8px;
-    font: 12px var(--tour-body-font);
+    font: var(--bygone-ui-font-size) var(--tour-body-font);
     color: var(--tour-muted);
 }
 .tour-directory-breadcrumb[hidden],
@@ -1280,7 +1315,7 @@ body.tour-directory-file-open #file-info { display: none; }
     font: inherit;
     cursor: pointer;
 }
-.tour-directory-breadcrumb button:hover { background: rgba(255, 255, 255, 0.07); }
+.tour-directory-breadcrumb button:hover { background: var(--bygone-hover); }
 .tour-directory-breadcrumb button:focus-visible { outline: 2px solid var(--tour-accent-bright); }
 .tour-directory-file { overflow-wrap: anywhere; color: var(--tour-body); }
 .tour-directory-narration-context { margin-left: auto; color: var(--tour-faint); }
@@ -1293,7 +1328,6 @@ body.tour-directory-file-open #file-info { display: none; }
 
 .tour-overview h1 { margin-bottom: 6px; font-size: 18px; }
 .tour-mode-controls { margin: 8px 0 0; }
-.tour-review-toggle { margin-top: 8px; }
 .tour-details { margin-top: 8px; }
 
 .tour-navigator-tabs {
@@ -1318,8 +1352,9 @@ body.tour-directory-file-open #file-info { display: none; }
     cursor: pointer;
 }
 
-.tour-navigator-tabs button:hover { background: rgba(255, 255, 255, 0.05); }
-.tour-navigator-tabs button.is-active { color: #fff; border-color: var(--tour-border); background: rgba(169, 159, 255, 0.13); }
+.tour-navigator-tabs button:disabled { opacity: 0.4; cursor: default; }
+.tour-navigator-tabs button:not(:disabled):hover { background: var(--bygone-hover); }
+.tour-navigator-tabs button.is-active { color: var(--tour-body); border-color: var(--tour-border); background: var(--bygone-selection); }
 .tour-navigator-tabs button:focus-visible { outline: 2px solid var(--tour-accent-bright); outline-offset: 1px; }
 
 .tour-navigator-content,
@@ -1335,7 +1370,7 @@ body.tour-directory-file-open #file-info { display: none; }
 .tour-navigator-panel[hidden] { display: none; }
 .tour-search-disclosure { flex: 0 0 auto; border-bottom: 1px solid var(--tour-border); }
 .tour-search-disclosure > summary { padding: 8px 12px; color: var(--tour-muted); cursor: pointer; }
-.tour-search-disclosure > summary:hover { color: #fff; }
+.tour-search-disclosure > summary:hover { color: var(--tour-body); }
 .tour-search-disclosure > summary:focus-visible { outline: 2px solid var(--tour-accent-bright); outline-offset: -2px; }
 .tour-search-disclosure .tour-search { border-bottom: 0; }
 .tour-scenes, .tour-files { min-height: 0; }
@@ -1392,6 +1427,7 @@ body.tour-directory-file-open #file-info { display: none; }
     .tour-narrative-toolbar { gap: 6px; }
     .tour-narration-controls select { max-width: 150px; }
     .tour-narration-status { width: 100%; margin-left: 0; text-align: left; }
+    .tour-narration-dock .tour-narration-status { flex-basis: 100%; width: 100%; }
 
     body.tour-mode #container {
         width: 100vw;
@@ -1418,3 +1454,128 @@ body.tour-directory-file-open #file-info { display: none; }
     border-radius: 2px;
     background: var(--bygone-tour-range-color, #a99bf5);
 }
+
+.tour-copy-location {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    margin-inline-start: 6px;
+    padding: 3px;
+    vertical-align: middle;
+    color: inherit;
+    background: transparent;
+    border: 0;
+    border-radius: 4px;
+    opacity: 0;
+    pointer-events: none;
+    cursor: pointer;
+}
+.tour-reading-item :is(h1, h2, h3):is(:hover, :focus-within) .tour-copy-location,
+.tour-copy-location.is-copied { opacity: .75; pointer-events: auto; }
+.tour-copy-location:hover,
+.tour-copy-location:focus-visible { opacity: 1; background: var(--tour-surface); }
+.tour-copy-location:focus-visible { outline: 2px solid var(--vscode-focusBorder, #68a9ef); }
+.tour-copy-location svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
+.tour-link-check, .tour-copy-location.is-copied .tour-link-chain { display: none; }
+.tour-copy-location.is-copied .tour-link-check { display: block; }
+@media (hover: none) { .tour-copy-location { opacity: .75; pointer-events: auto; } }
+.tour-link-target { outline: 2px solid var(--vscode-focusBorder, #68a9ef); outline-offset: -2px; }
+.export-notice { padding: 10px; font-size: 12px; }
+
+.export-host #refresh-session,
+.export-host [data-dir-add-side],
+.export-host [data-dir-remove-side] { display: none !important; }
+
+.export-host .multi-pane-actions { display: none !important; }
+
+/* Image steps replace the evidence workspace; the reading document stays live. */
+body.tour-image-active #container > #header,
+body.tour-image-active #container > #diff-workspace { display: none; }
+.tour-image-evidence {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    min-width: 0;
+    min-height: 0;
+    margin: 0;
+    padding: 12px;
+    gap: 10px;
+    overflow: hidden;
+}
+.tour-image-evidence figcaption { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
+.tour-image-evidence img { display: block; min-height: 0; width: 100%; flex: 1; object-fit: contain; }
+.tour-image-evidence button, .tour-image-dialog button {
+    flex: none;
+    padding: 6px 12px;
+    color: var(--tour-body);
+    background: var(--bygone-hover);
+    border: 1px solid var(--tour-border);
+    border-radius: 4px;
+    font: inherit;
+    cursor: pointer;
+}
+.tour-image-dialog {
+    max-width: 96vw;
+    max-height: 96vh;
+    padding: 12px;
+    color: var(--tour-body);
+    background: var(--tour-surface);
+    border: 1px solid var(--tour-border);
+}
+.tour-image-dialog::backdrop { background: rgba(0, 0, 0, .8); }
+.tour-image-dialog button { display: block; margin: 0 0 10px auto; }
+.tour-image-dialog img { display: block; max-width: 90vw; max-height: 84vh; object-fit: contain; }
+
+/* The shared view tabs occupy one row above the existing panel stack. */
+:root { --workspace-toolbar-height: 0px; }
+#workspace-view { display: contents; }
+#tour-mode-controls {
+    position: fixed;
+    inset: 0 0 auto;
+    z-index: 145;
+    margin: 0;
+    background: var(--tour-surface);
+}
+.tour-shell { top: var(--workspace-toolbar-height); }
+.tour-sidebar-show { top: calc(var(--workspace-toolbar-height) + 14px); }
+.tour-narrative { top: var(--workspace-toolbar-height); }
+.tour-narrative-resizer { top: calc(var(--workspace-toolbar-height) + var(--tour-narrative-height) - 4px); }
+body.tour-mode #container {
+    position: fixed;
+    top: calc(var(--workspace-toolbar-height) + var(--tour-narrative-height));
+    height: calc(100vh - var(--workspace-toolbar-height) - var(--tour-narrative-height));
+    margin-top: 0;
+}
+#workspace-view > .workspace-empty-view {
+    position: fixed;
+    inset: var(--workspace-toolbar-height) 0 0 var(--tour-rail-width);
+    box-sizing: border-box;
+    background: var(--tour-surface);
+}
+body.workspace-empty-tour #container { display: none; }
+@media (max-width: 720px) {
+    .tour-shell { height: calc(100vh - var(--workspace-toolbar-height)); }
+}
+/* Bookends and chapter passages have no evidence. Keep the reading geometry
+   stable while scrolling across scene boundaries; hide stale renderer content. */
+body.tour-discussion #container { visibility: hidden; pointer-events: none; }
+.tour-scene-orientation { color: var(--tour-muted); font-size: 0.9em; overflow-wrap: anywhere; }
+.tour-overview-purpose { font-weight: 600; }
+.tour-passage-title { overflow-wrap: anywhere; }
+
+.tour-route { list-style: none; padding-left: 0; }
+.tour-route > li { padding-left: 0; margin: 0 0 1em; }
+.tour-route-link { color: var(--tour-accent-bright); background: none; border: 0; padding: 0; font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
+.tour-route-number { color: var(--tour-muted); font-variant-numeric: tabular-nums; }
+.tour-route-link:hover { text-decoration: underline; }
+.tour-route-link:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
+.tour-step-orientation { color: var(--tour-muted); font-size: 0.9em; overflow-wrap: anywhere; }
+
+/* Bookends use the space otherwise reserved for code; evidence keeps its saved split. */
+body.tour-bookend.tour-discussion:not(.tour-derived-mode) #tour-narrative { height: calc(100vh - var(--workspace-toolbar-height)) !important; }
+body.tour-bookend.tour-discussion #tour-narrative-resizer { display: none; }
+
+.tour-route-chapter { margin-top: 1.5em; }
+.tour-route-chapter > .tour-route { margin-top: 1em; padding-left: 1em; border-left: 2px solid var(--tour-border); }