@davmash/bygone 0.8.16 → 0.9.4

package/web/presenter.css

@@ -1,5 +1,5 @@
 :root {
-    --tour-rail-width: 360px;
+    --tour-rail-width: 300px;
     --tour-accent-bright: #a99fff;
     --tour-surface: #11131a;
     --tour-border: rgba(255, 255, 255, 0.09);
@@ -7,7 +7,7 @@
     --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: 296px;
+    --tour-narrative-height: min(38vh, 360px);
 }
 
 .tour-mode-controls { display: grid; gap: 6px; margin: 12px 0; }
@@ -37,6 +37,53 @@ body.tour-derived-mode #tour-narrative { display: none; }
     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);
@@ -117,10 +164,6 @@ body.tour-mode #container {
     margin-top: var(--tour-narrative-height);
 }
 
-body.tour-mode.tour-discussion #container {
-    visibility: hidden;
-}
-
 .tour-overview {
     position: relative;
     padding: 24px 46px 18px 22px;
@@ -128,12 +171,42 @@ body.tour-mode.tour-discussion #container {
 }
 
 .tour-overview h1 {
+    display: flex;
+    align-items: center;
+    min-width: 0;
     margin: 0 0 10px;
     font-size: 20px;
     line-height: 1.25;
     text-wrap: balance;
 }
 
+.tour-overview h1 > button#tour-title {
+    box-sizing: border-box;
+    min-width: 0;
+    padding: 0;
+    color: inherit;
+    border: 0;
+    border-left: 2px solid transparent;
+    background: none;
+    font: inherit;
+    text-align: left;
+    cursor: pointer;
+}
+
+.tour-overview h1 > button#tour-title:hover,
+.tour-overview h1 > button#tour-title:focus-visible {
+    color: #fff;
+}
+
+.tour-overview h1 > button#tour-title:focus-visible {
+    outline: 2px solid var(--tour-accent-bright);
+    outline-offset: 3px;
+}
+
+.tour-overview h1 > button#tour-title.is-active {
+    border-left-color: rgba(169, 159, 255, 0.72);
+}
+
 .tour-source {
     display: inline-block;
     margin-bottom: 10px;
@@ -180,12 +253,18 @@ body.tour-mode.tour-discussion #container {
 }
 
 .tour-coverage-item {
+    position: relative;
     display: grid;
     gap: 5px;
     padding-left: 8px;
     border-left: 2px solid var(--tour-accent-bright);
 }
 
+.tour-coverage-item:focus-visible {
+    outline: 2px solid var(--tour-accent-bright);
+    outline-offset: 3px;
+}
+
 .tour-coverage-item[data-metric="assignment"] {
     border-left-color: #74d6ad;
 }
@@ -300,12 +379,14 @@ body.tour-mode.tour-discussion #container {
     right: 0;
     left: var(--tour-rail-width);
     z-index: 90;
-    height: var(--tour-narrative-height);
+    height: min(38vh, 360px);
+    min-height: 0;
+    max-height: none;
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
-    overflow: auto;
-    padding: 20px 26px 18px;
+    overflow: hidden;
+    padding: 12px 24px 16px;
     color: #f5f6fb;
     border-bottom: 1px solid var(--tour-border);
     background: #151821;
@@ -317,68 +398,42 @@ body.tour-mode.tour-discussion #container {
     display: none;
 }
 
-.tour-narrative-resizer {
-    position: fixed;
-    z-index: 120;
-    top: calc(var(--tour-narrative-height) - 4px);
-    right: 0;
-    left: var(--tour-rail-width);
-    height: 8px;
-    cursor: row-resize;
-    touch-action: none;
-}
-
-.tour-narrative-resizer:hover,
-.tour-narrative-resizer:focus-visible,
-body.is-resizing-tour-narrative .tour-narrative-resizer {
-    background: rgba(169, 159, 255, 0.75);
-    outline: none;
-}
-
-body:not(.tour-mode) .tour-narrative-resizer,
-body.tour-discussion .tour-narrative-resizer {
-    display: none;
-}
-
-.tour-narrative-nav {
-    display: grid;
-    grid-template-columns: auto minmax(0, 1fr) auto;
+.tour-narrative-toolbar {
+    display: flex;
+    min-width: 0;
     gap: 12px;
     align-items: center;
-    margin-bottom: 14px;
-    padding: 0 0 10px;
+    flex-shrink: 0;
+    margin: 0 0 10px;
+    padding: 0 0 8px;
     border-bottom: 1px solid var(--tour-border);
     background: rgba(255, 255, 255, 0.025);
 }
 
-.tour-narrative-nav button {
-    min-width: 72px;
-    padding: 7px 10px;
+.tour-narrative-toolbar button {
+    padding: 5px 9px;
     color: var(--tour-muted);
-    border: 1px solid transparent;
-    border-radius: 6px;
-    background: transparent;
+    border: 1px solid var(--tour-border);
+    border-radius: 5px;
+    background: rgba(255, 255, 255, 0.035);
     cursor: pointer;
-    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
+    font: inherit;
 }
 
-.tour-narrative-nav button:hover,
-.tour-narrative-nav button:focus-visible {
+.tour-narrative-toolbar button:hover:not(:disabled),
+.tour-narrative-toolbar button:focus-visible,
+.tour-narrative-toolbar button[aria-pressed="true"] {
     color: #fff;
-    border-color: var(--tour-border);
-    background: rgba(255, 255, 255, 0.05);
+    border-color: rgba(169, 159, 255, 0.55);
+    background: rgba(169, 159, 255, 0.13);
 }
 
-.tour-narrative-nav button:focus-visible {
+.tour-narrative-toolbar button:focus-visible {
     outline: none;
     box-shadow: 0 0 0 2px rgba(128, 117, 255, 0.28);
 }
 
-.tour-narrative-nav button:last-child {
-    justify-self: end;
-}
-
-.tour-narrative-nav button:disabled {
+.tour-narrative-toolbar button:disabled {
     opacity: 0.35;
     cursor: default;
 }
@@ -499,31 +554,16 @@ body.tour-discussion .tour-narrative-resizer {
 }
 
 .tour-breadcrumb {
+    flex: 1 1 auto;
     min-width: 0;
     color: var(--tour-muted);
     font-family: var(--vscode-editor-font-family, monospace);
-    text-align: center;
+    text-align: left;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }
 
-.tour-rail-sections {
-    display: grid;
-    flex: 1;
-    min-height: 0;
-    grid-template-rows: minmax(150px, 1fr) minmax(150px, 1fr);
-}
-
-.tour-rail-section {
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    min-height: 0;
-}
-
-.tour-rail-section + .tour-rail-section { border-top: 1px solid var(--tour-border); }
-
 .tour-rail-heading {
     display: flex;
     align-items: center;
@@ -634,15 +674,8 @@ body.tour-discussion .tour-narrative-resizer {
 
 .tour-file.is-omitted .tour-file-meta { color: #d7aa7b; }
 
-.tour-chapter-title {
-    margin: 15px 10px 7px;
-    color: var(--tour-muted);
-    font-weight: 750;
-    letter-spacing: 0.09em;
-    text-transform: uppercase;
-}
-
 .tour-scene {
+    box-sizing: border-box;
     display: grid;
     width: 100%;
     grid-template-columns: 24px minmax(0, 1fr);
@@ -651,6 +684,7 @@ body.tour-discussion .tour-narrative-resizer {
     padding: 9px 10px;
     color: #e5e7f0;
     border: 1px solid transparent;
+    border-left-width: 2px;
     border-radius: 7px;
     background: transparent;
     text-align: left;
@@ -661,11 +695,6 @@ body.tour-discussion .tour-narrative-resizer {
     background: rgba(255, 255, 255, 0.045);
 }
 
-.tour-scene.is-active {
-    border-color: rgba(128, 117, 255, 0.44);
-    background: linear-gradient(90deg, rgba(101, 83, 255, 0.25), rgba(101, 83, 255, 0.07));
-}
-
 .tour-scene-number {
     padding-top: 1px;
     color: var(--tour-muted);
@@ -755,28 +784,57 @@ body.tour-discussion .tour-narrative-resizer {
     line-height: 1.35;
 }
 
-.tour-narrative-layout {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr) minmax(300px, 430px);
-    gap: 18px 24px;
+.tour-reading-item {
+    box-sizing: border-box;
+    min-width: 0;
+    padding: 9px 12px 11px 14px;
+    overflow-wrap: anywhere;
+    border-left: 2px solid transparent;
 }
 
-.tour-narrative-prose,
-.tour-narrative-side {
-    min-width: 0;
+.tour-reading-item + .tour-reading-item {
+    margin-top: 2px;
 }
 
-.tour-narrative-prose {
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
+.tour-reading-item.is-active {
+    border-left-color: rgba(169, 159, 255, 0.72);
 }
 
-.tour-narrative-side {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-    align-self: start;
+.tour-reading-item h1,
+.tour-reading-item h2,
+.tour-reading-item h3 {
+    margin: 0 0 8px;
+    line-height: 1.3;
+    text-wrap: balance;
+}
+
+.tour-reading-item[data-reading-kind="title"] h1 {
+    color: #fff;
+    font-size: 22px;
+    font-weight: 750;
+}
+
+.tour-reading-item[data-reading-kind="chapter"] h2 {
+    color: var(--tour-accent-bright);
+    font-size: 16px;
+    font-weight: 750;
+}
+
+.tour-reading-item[data-reading-kind="scene"] h2 {
+    color: #fff;
+    font-size: 20px;
+    font-weight: 700;
+}
+
+.tour-reading-item[data-reading-kind="step"] h3,
+.tour-reading-item .tour-step-title {
+    color: #fff;
+    font-size: 18px;
+    font-weight: 700;
+}
+
+#tour-narrative-content > .tour-reading-item:last-child {
+    min-height: max(0px, var(--tour-reading-viewport, 0px));
 }
 
 .tour-narrative-chapter {
@@ -789,7 +847,7 @@ body.tour-discussion .tour-narrative-resizer {
 
 .tour-narrative h2 {
     margin: 0 0 7px;
-    font-size: 19px;
+    font-size: 20px;
     text-wrap: balance;
 }
 
@@ -831,21 +889,73 @@ body.tour-discussion .tour-narrative-resizer {
     background: rgba(255, 255, 255, 0.015);
 }
 
-.tour-step {
-    box-sizing: border-box;
-    padding: 11px 13px 11px 15px;
-    border-left: 2px solid rgba(166, 140, 255, 0.46);
-    background: rgba(255, 255, 255, 0.02);
-}
-
-.tour-step[hidden],
 .tour-step-requirement[hidden],
 .tour-connection[hidden] {
     display: none;
 }
 
-.tour-step-title { color: #fff; font-size: 13px; font-weight: 750; }
-.tour-step-body { margin: 3px 0 0; color: var(--tour-body); line-height: 1.45; }
+.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;
+}
+
+.tour-step-context > summary {
+    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: "▸";
+}
+
+.tour-step-context[open] > summary::before {
+    content: "▾";
+}
+
+.tour-step-context > summary::-webkit-details-marker {
+    display: none;
+}
+
+.tour-step-context > summary::marker {
+    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;
+    color: var(--tour-muted);
+    border-left: 1px solid rgba(169, 159, 255, 0.28);
+    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;
@@ -891,173 +1001,396 @@ body.tour-discussion .tour-narrative-resizer {
     font-family: var(--vscode-editor-font-family, monospace);
 }
 
-body.tour-discussion .tour-narrative {
-    display: block;
-    bottom: 0;
-    height: auto;
-    padding: clamp(48px, 10vh, 100px) clamp(44px, 8vw, 120px);
+.tour-step-code {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 7px 10px;
+    align-items: center;
+    margin-top: 10px;
 }
 
-body.tour-discussion .tour-narrative-nav {
-    margin-bottom: clamp(22px, 4vh, 36px);
+.tour-step-code[hidden] {
+    display: none;
 }
 
-body.tour-discussion .tour-narration-controls {
-    max-width: 1000px;
-    margin-bottom: clamp(18px, 3vh, 28px);
+.tour-step-code-location {
+    flex: 1 1 12rem;
+    min-width: 0;
+    overflow-wrap: anywhere;
+    color: var(--tour-faint);
+    font-family: var(--vscode-editor-font-family, monospace);
+    white-space: normal;
 }
 
-body.tour-discussion .tour-narrative-layout {
-    display: block;
+.tour-show-in-code {
+    flex: none;
+    padding: 4px 8px;
+    color: var(--tour-accent-bright);
+    border: 1px solid rgba(169, 159, 255, 0.35);
+    border-radius: 5px;
+    background: rgba(169, 159, 255, 0.07);
+    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);
+    outline: none;
+}
+
+.tour-commit-oid {
+    margin-right: 6px;
+    color: var(--tour-accent-bright);
+    font-family: var(--vscode-editor-font-family, monospace);
+}
+
+/* Keep the complete reading order in one scrollable narrative viewport. */
+.tour-narrative-content {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+    padding-right: 8px;
+}
+
+.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:focus-visible,
+.tour-details > summary:focus-visible { outline: 2px solid var(--tour-accent-bright); outline-offset: 2px; }
+.tour-audio-settings > summary[hidden] { display: none; }
+.tour-narration-dock {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin-left: auto;
+    min-width: 0;
+}
+.tour-audio-settings { min-width: 0; }
+.tour-audio-settings[hidden] { display: none; }
+.tour-narration-dock .tour-narration-controls {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: none;
+}
+.tour-narration-dock #tour-listen {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    color: var(--tour-accent-bright);
+}
+.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 {
+    min-width: 0;
+    white-space: normal;
+    overflow-wrap: anywhere;
 }
+.tour-details { margin-top: 10px; font-size: 12px; }
+.tour-details .tour-source { display: inline-block; margin-top: 8px; }
+.tour-details .tour-source[hidden] { display: none; }
+.tour-files[hidden],
+.tour-outline-children[hidden] { display: none; }
 
-body.tour-discussion .tour-narrative h2 {
-    max-width: 900px;
-    font-size: clamp(30px, 4vw, 56px);
+.tour-outline-group {
+    margin: 0 0 5px;
+    border-left: 2px solid transparent;
 }
 
-body.tour-discussion .tour-narrative-summary {
-    max-width: 980px;
-    font-size: clamp(16px, 1.8vw, 24px);
+.tour-outline-group.has-active {
+    border-left-color: rgba(169, 159, 255, 0.58);
 }
 
-body.tour-discussion .tour-narrative-bullets {
+.tour-outline-heading {
+    display: flex;
+    min-width: 0;
+    align-items: stretch;
+}
+
+.tour-outline-toggle {
+    flex: 0 0 28px;
+    width: 28px;
+    padding: 0;
+    color: var(--tour-muted);
+    border: 0;
+    background: transparent;
+    cursor: pointer;
+    font: inherit;
+    line-height: 1.2;
+    text-align: center;
+}
+
+.tour-outline-toggle:hover,
+.tour-outline-toggle:focus-visible {
+    color: #fff;
+    background: rgba(255, 255, 255, 0.045);
+}
+
+.tour-outline-toggle:focus-visible {
+    outline: 2px solid var(--tour-accent-bright);
+    outline-offset: -2px;
+}
+
+.tour-outline-heading > .tour-scene,
+.tour-outline-heading > .tour-chapter-link {
+    flex: 1 1 auto;
+    min-width: 0;
+}
+
+.tour-outline-children {
     display: grid;
-    max-width: 1000px;
-    gap: 10px;
-    margin-top: 24px;
-    font-size: 15px;
+    gap: 3px;
+    margin: 2px 0 10px 28px;
+    border-left: 1px solid var(--tour-border);
+    padding-left: 9px;
 }
 
-body.tour-discussion .tour-narrative-takeaway {
-    max-width: 620px;
-    font-size: 14px;
+.tour-outline-step {
+    box-sizing: border-box;
+    border: 1px solid transparent;
+    border-left: 2px solid transparent;
+    border-radius: 5px;
+    background: none;
+    color: var(--tour-muted);
+    font: 12px/1.5 var(--tour-body-font);
+    text-align: left;
+    padding: 8px 10px 8px 9px;
+    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:focus-visible { outline: 2px solid var(--tour-accent-bright); outline-offset: 1px; }
 
-.tour-commit-oid {
-    margin-right: 6px;
-    color: var(--tour-accent-bright);
-    font-family: var(--vscode-editor-font-family, monospace);
+.tour-chapter-link {
+    display: block;
+    box-sizing: border-box;
+    min-width: 0;
+    padding: 8px 10px;
+    overflow-wrap: anywhere;
+    color: var(--tour-muted);
+    border: 1px solid transparent;
+    border-left: 2px solid transparent;
+    border-radius: 7px;
+    background: transparent;
+    text-align: left;
+    cursor: pointer;
+    font: inherit;
+}
+
+.tour-chapter-link:hover {
+    background: rgba(255, 255, 255, 0.045);
+}
+
+.tour-chapter-link.is-active,
+.tour-scene.is-active {
+    border-left-color: rgba(169, 159, 255, 0.72);
+}
+
+.tour-chapter-link:focus-visible {
+    outline: 2px solid var(--tour-accent-bright);
+    outline-offset: 1px;
 }
 
+#tour-listen { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
+#tour-listen svg { width: 14px; height: 14px; fill: currentColor; }
+
 @media (max-width: 1100px) {
     :root {
         --tour-rail-width: 285px;
-        --tour-narrative-height: 380px;
+        --tour-narrative-height: min(38vh, 360px);
     }
 
-    .tour-narrative-layout {
-        grid-template-columns: minmax(0, 1fr);
-    }
 }
 
-@media (max-width: 720px) {
-    :root {
-        --tour-rail-height: clamp(190px, 28vh, 260px);
-        --tour-rail-width: 0px;
-        --tour-narrative-height: clamp(300px, 42vh, 380px);
-    }
-
-    body.tour-mode {
-        --tour-rail-width: 0px;
+@media (prefers-reduced-motion: reduce) {
+    .tour-narration-segment {
+        transition: none;
     }
+}
 
-    .tour-shell {
-        inset: 0 0 auto;
-        display: grid;
-        width: 100%;
-        height: var(--tour-rail-height);
-        grid-template-columns: minmax(190px, 0.85fr) minmax(0, 1.15fr);
-        grid-template-rows: auto minmax(0, 1fr) auto;
-        border-right: 0;
-        border-bottom: 1px solid var(--tour-border);
-        box-shadow: 0 16px 36px rgba(0, 0, 0, 0.22);
-    }
+/* Exploration shares the evidence viewer, while both authored tours keep narration. */
+.tour-mode-label { color: var(--tour-muted); font-size: 12px; }
+.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: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; }
+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; }
+
+/* File inspection remains nested beneath the narrated directory overview. */
+.tour-directory-breadcrumb {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 8px;
+    padding-block: 8px;
+    font: 12px var(--tour-body-font);
+    color: var(--tour-muted);
+}
+.tour-directory-breadcrumb[hidden],
+.tour-directory-breadcrumb [hidden],
+body.tour-directory-overview #directory-return-toolbar,
+body.tour-directory-file-open #file-info { display: none; }
+.tour-directory-breadcrumb button {
+    border: 0;
+    border-radius: 4px;
+    padding: 4px 6px;
+    background: transparent;
+    color: var(--tour-accent-bright);
+    font: inherit;
+    cursor: pointer;
+}
+.tour-directory-breadcrumb button:hover { background: rgba(255, 255, 255, 0.07); }
+.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); }
 
-    .tour-sidebar-resizer {
-        display: none;
-    }
+/* Present uses one task navigator; secondary tools no longer compete for rail space. */
+.tour-overview {
+    flex: 0 0 auto;
+    padding: 16px 44px 12px 16px;
+}
 
-    body.tour-sidebar-hidden {
-        --tour-rail-height: 0px;
-    }
+.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-overview {
-        grid-row: 1 / span 3;
-        overflow: auto;
-        padding: 16px;
-        border-right: 1px solid var(--tour-border);
-        border-bottom: 0;
-    }
+.tour-navigator-tabs {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 4px;
+    padding: 8px;
+    border-bottom: 1px solid var(--tour-border);
+}
 
-    .tour-overview h1 {
-        font-size: 17px;
-    }
+.tour-navigator-tabs button {
+    min-width: 0;
+    padding: 7px 5px;
+    overflow: hidden;
+    color: var(--tour-muted);
+    border: 1px solid transparent;
+    border-radius: 5px;
+    background: transparent;
+    font: inherit;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    cursor: pointer;
+}
 
-    .tour-search {
-        grid-column: 2;
-        grid-row: 1;
-        padding: 7px 8px 4px;
-    }
+.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:focus-visible { outline: 2px solid var(--tour-accent-bright); outline-offset: 1px; }
 
-    .tour-search-results { max-height: 72px; }
+.tour-navigator-content,
+.tour-navigator-panel,
+.tour-commits-host {
+    display: flex;
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+}
 
-    .tour-rail-sections {
-        grid-column: 2;
-        grid-row: 2;
-    }
+.tour-navigator-panel { flex-direction: column; }
+.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: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; }
+.tour-evidence-controls { flex: 0 0 auto; padding: 8px; border-bottom: 1px solid var(--tour-border); }
+.tour-commits-host { flex-direction: column; }
+.tour-commits-section { flex: 0 0 auto; max-height: 34%; }
 
-    .tour-commits-section {
-        grid-column: 2;
-        grid-row: 3;
-        max-height: 72px;
-    }
+#history-rail.present-navigation-rail {
+    width: 100%;
+    min-width: 0;
+    flex: 1 1 auto;
+    padding: 0;
+    border: 0;
+    background: transparent;
+}
 
-    .tour-narrative {
-        top: var(--tour-rail-height);
-        left: 0;
-        padding: 16px 18px;
-    }
+.present-navigation-rail .history-rail-tabs { padding: 8px 8px 4px; }
+.present-navigation-rail .history-rail-tabs[hidden] { display: none; }
+.present-navigation-rail .history-rail-list { padding: 4px 8px 10px; }
 
-    .tour-narrative-resizer {
-        top: calc(var(--tour-rail-height) + var(--tour-narrative-height) - 4px);
-        left: 0;
-    }
+/* Narrative remains a stable viewport above the evidence. */
+.tour-narrative {
+    height: min(38vh, 360px);
+    max-height: none;
+    padding: 10px 18px 12px;
+}
 
-    body.tour-mode #container {
-        width: 100vw;
-        height: calc(100vh - var(--tour-rail-height) - var(--tour-narrative-height));
-        margin-top: calc(var(--tour-rail-height) + var(--tour-narrative-height));
-        margin-left: 0;
-    }
+.tour-narrative-toolbar { margin-bottom: 6px; padding-bottom: 6px; }
+.tour-narrative-content { flex: 1 1 auto; }
 
-    body.tour-discussion .tour-narrative {
-        top: var(--tour-rail-height);
-        padding: clamp(28px, 7vh, 56px) 24px;
-    }
+@media (max-width: 720px) {
+    :root { --tour-rail-width: 0px; }
 
-    .tour-narrative-nav {
-        gap: 6px;
+    .tour-shell {
+        inset: 0 auto 0 0;
+        display: flex;
+        width: min(88vw, 340px);
+        height: 100vh;
+        border-right: 1px solid var(--tour-border);
+        border-bottom: 0;
+        box-shadow: 18px 0 45px rgba(0, 0, 0, 0.34);
     }
 
-    .tour-narrative-nav button {
-        min-width: 64px;
-        padding-inline: 7px;
+    .tour-overview {
+        overflow: visible;
+        padding: 14px 44px 10px 14px;
+        border-right: 0;
+        border-bottom: 1px solid var(--tour-border);
     }
 
-    .tour-narration-controls select {
-        max-width: 150px;
-    }
+    .tour-sidebar-resizer { display: none; }
+    .tour-narrative { top: 0; left: 0; height: min(38vh, 360px); padding: 10px 14px 12px; }
+    .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-status {
-        width: 100%;
+    body.tour-mode #container {
+        width: 100vw;
+        height: calc(100vh - var(--tour-narrative-height));
+        margin-top: var(--tour-narrative-height);
         margin-left: 0;
-        text-align: left;
     }
 }
-
-@media (prefers-reduced-motion: reduce) {
-    .tour-narration-segment {
-        transition: none;
-    }
+.tour-commit-legend {
+    padding: 6px 12px;
+    margin: 0;
+    font-size: 12px;
+    opacity: .7;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px 12px;
+}
+.tour-commit-legend > span { white-space: nowrap; }
+.tour-range-swatch {
+    display: inline-block;
+    width: 3px;
+    height: 10px;
+    margin-right: 5px;
+    border-radius: 2px;
+    background: var(--bygone-tour-range-color, #a99bf5);
 }