/* DNA is the focal point; the editing canvas stays quiet. Every theme keeps its own palette. */
@font-face { font-family: 'Source Serif 4'; src: url('../fonts/source-serif-4-var.woff2') format('woff2'); font-weight: 200 900; font-display: swap; }
.dna-studio { font: 16px/1.6 var(--font-sans); color: var(--text); padding: 1.75rem 1rem 4rem; min-width: 0; max-width: 1560px; margin: auto; }
.dna-studio * { box-sizing: border-box; }
.dna-header { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: .25rem 0 1.75rem; }
.dna-header > div:first-child { min-width: 0; }
.dna-header h2 { font-family: var(--font-sans); font-size: 1.375rem; font-weight: 700; line-height: 1.4; max-width: 62ch; margin: 0 0 .35rem; letter-spacing: -.02em; text-wrap: pretty; }
.dna-header .dna-hint { margin: 0; }
.dna-header-actions { display: flex; align-items: center; gap: 1.25rem; flex-shrink: 0; }
.dna-header-actions .dna-draft-state { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; font-size: .9375rem; }
.dna-header-actions .dna-draft-state::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
.dna-header-actions .dna-draft-state[data-dirty="true"]::before { background: var(--warn); }
.dna-back { display: inline-flex; min-height: 44px; align-items: center; color: var(--text-dim); text-decoration: none; border-bottom: 1px solid transparent; }
.dna-back:hover { color: var(--text); border-bottom-color: var(--text-dim); }
.dna-back:visited { color: var(--text-dim); }
.dna-layout { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }
.dna-navigation { position: sticky; top: calc(var(--tabs-h, 49px) + 1.5rem); min-width: 0; max-height: calc(100vh - var(--tabs-h, 49px) - 3rem); overflow-y: auto; scrollbar-width: thin; padding: 0 .5rem .5rem 0; }
.dna-button { font: inherit; color: var(--text); background: transparent; border: 1px solid var(--border-strong); border-radius: 8px; min-height: 44px; padding: .6rem 1rem; cursor: pointer; text-align: left; transition: background-color 140ms, border-color 140ms; }
.dna-button:hover { background: var(--surface-2); }
.dna-button:focus-visible, .dna-studio select:focus-visible, .dna-studio textarea:focus-visible, .dna-studio summary:focus-visible, .dna-back:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.dna-button:disabled { opacity: .55; cursor: not-allowed; }
.dna-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 700; }
.dna-primary:hover { background: var(--accent); filter: brightness(1.08); }
.dna-map-disclosure { border: 0; }
.dna-map-disclosure > .dna-map-summary { display: none; }
.dna-map-content { padding: .25rem 0 1rem; }
.dna-map-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.dna-map-name { font-weight: 700; font-size: 1.0625rem; }
.dna-map-toolbar .dna-button { color: var(--text-dim); border-color: transparent; padding-right: .3rem; }
.dna-map-toolbar .dna-button:hover { color: var(--text); }
.dna-ring { position: relative; width: 100%; aspect-ratio: 1; margin: .75rem auto 0; max-width: 400px; }
.dna-ring svg { display: block; width: 100%; height: 100%; overflow: visible; }
.dna-orbit { fill: none; stroke: var(--border-strong); stroke-width: .7; stroke-dasharray: 1 7; opacity: .65; }
.dna-strand { fill: none; stroke: var(--accent); stroke-width: 1; opacity: .55; pointer-events: none; }
.dna-parent { fill: none; stroke: var(--accent); stroke-width: 1; opacity: .55; pointer-events: none; }
.dna-base-pair { fill: none; stroke: var(--accent); stroke-width: 1; opacity: .28; pointer-events: none; }
.dna-segment { fill: none; stroke: var(--border-strong); stroke-width: 8; cursor: pointer; transition: stroke 160ms ease-out, stroke-width 160ms ease-out; }
.dna-segment:hover { stroke: var(--accent); stroke-width: 18; }
.dna-segment.is-selected { stroke: var(--accent); stroke-width: 15; filter: drop-shadow(0 0 7px var(--accent)); }
.dna-selection-halo { fill: none; stroke: var(--accent); stroke-width: 32; opacity: .12; pointer-events: none; }
.dna-dot { fill: var(--bg); stroke: var(--border-strong); stroke-width: 1; pointer-events: none; }
.dna-dot.is-selected { fill: var(--text); stroke: var(--bg); stroke-width: 2; }
.dna-annotation { font: 400 24px var(--font-sans); fill: var(--text-dim); pointer-events: none; font-variant-numeric: tabular-nums; }
.dna-annotation.is-selected { fill: var(--accent); font-weight: 700; }
.dna-ring-center { position: absolute; inset: 24% 22%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: .75rem; pointer-events: none; }
.dna-ring-position { font-size: .9375rem; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.dna-ring-center strong { font-family: 'Source Serif 4', serif; font-weight: 500; font-size: 1.3125rem; line-height: 1.3; overflow-wrap: anywhere; text-wrap: balance; }
.dna-ring-center button { pointer-events: auto; font-size: .9375rem; padding: .4rem .9rem; }
.dna-map-hint { font-size: .9375rem; color: var(--text-dim); text-align: center; margin: .25rem 0 .5rem; }
.dna-field { display: flex; flex-direction: column; gap: .5rem; margin: 1rem 0; min-width: 0; }
.dna-field > span { font-weight: 700; font-size: .9375rem; }
.dna-studio select, .dna-studio textarea { font: inherit; color: var(--text); background: var(--surface-1); border: 1px solid var(--border-strong); border-radius: 8px; padding: .8rem .9rem; width: 100%; min-width: 0; max-width: 100%; }
.dna-studio select { min-height: 48px; text-overflow: ellipsis; }
.dna-studio textarea { line-height: 1.7; resize: vertical; }
.dna-next-prev, .dna-save-row, .dna-work-heading { display: flex; justify-content: space-between; gap: .6rem; flex-wrap: wrap; align-items: center; }
.dna-next-prev .dna-button { font-size: .9375rem; color: var(--text-dim); border-color: transparent; padding-inline: .25rem; }
.dna-next-prev .dna-button:hover { color: var(--text); }
.dna-workspace { min-width: 0; background: var(--surface-1); border: 1px solid var(--border); border-radius: 18px; padding: clamp(1.5rem, 3.2vw, 3.25rem); }
.dna-lesson-heading { padding-bottom: 1.25rem; }
.dna-breadcrumb, .dna-hint, .dna-draft-state { color: var(--text-dim); font-size: .9375rem; }
.dna-breadcrumb { margin: 0 0 .75rem; }
.dna-lesson-title { font-family: 'Source Serif 4', serif; font-weight: 500; font-size: clamp(1.75rem, 2.3vw, 2.5rem); line-height: 1.2; max-width: 32ch; margin: 0; letter-spacing: -.025em; text-wrap: pretty; }
.dna-tabs { display: flex; gap: 1.5rem; border-bottom: 1px solid var(--border); margin: 0 0 1.75rem; }
.dna-tabs button { border: 0; border-bottom: 3px solid transparent; border-radius: 0; text-align: center; color: var(--text-dim); padding: .7rem .1rem; }
.dna-tabs button:hover { color: var(--text); background: transparent; }
.dna-tabs button[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }
.dna-prose { max-width: 74ch; margin-inline: auto; }
.dna-prose h3 { font-size: 1.0625rem; margin: .5rem 0; }
.dna-prose .dna-field { margin: 1.5rem 0; }
.dna-prose textarea { background: var(--surface-1); }
.dna-prose > .dna-hint { margin: .65rem 0 1.5rem; }
.dna-work-heading .dna-button { font-size: .9375rem; padding: .5rem .75rem; border-color: transparent; color: var(--text-dim); }
.dna-work-heading .dna-button:hover { color: var(--text); }
.dna-studio .dna-script { min-height: 13rem; max-height: 65vh; field-sizing: content; font-family: 'Source Serif 4', serif; font-weight: 400; font-size: 1.25rem; line-height: 1.8; border-color: transparent; border-radius: 0; padding: .25rem 0 .75rem; margin: 0 0 1.5rem; background: transparent; }
.dna-studio .dna-script:hover { border-bottom-color: var(--border-strong); }
.dna-save-row { border-top: 1px solid var(--border); padding-top: 1.25rem; }
.dna-save-row + .dna-hint { margin: .75rem 0 0; }
.dna-warning { padding: .8rem 1rem; background: var(--warn-soft); color: var(--warn); border-radius: 8px; }
.dna-error { padding: .8rem 1rem; background: var(--danger-soft); color: var(--danger); border-radius: 8px; }
.dna-source { border-top: 1px solid var(--border); margin-top: 1.75rem; padding-top: .6rem; max-width: 74ch; margin-inline: auto; }
.dna-studio summary { min-height: 44px; padding: .6rem 0; cursor: pointer; font-weight: 700; }
.dna-source > summary { color: var(--text-dim); font-size: .9375rem; font-weight: 400; }
.dna-source-text { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 55vh; overflow-y: auto; padding: 1.25rem; background: var(--surface-2); border-radius: 8px; }
.dna-passage-list { border-top: 1px solid var(--border); margin-top: 1rem; padding-top: .5rem; }
.dna-passage-list > summary { font-size: .9375rem; color: var(--text-dim); font-weight: 400; }
.dna-passage-list ol { padding-left: 1.5rem; }
.dna-passage-list li { padding: .2rem 0; }
.dna-passage-list button { width: 100%; border: none; padding: .6rem; font-size: .9375rem; }
.dna-passage-list button[aria-current="true"] { color: var(--accent); background: var(--accent-soft); }
.dna-checks { padding-left: 1.4rem; }
.dna-checks > li { padding: 1.1rem 0; border-bottom: 1px solid var(--border); }
.dna-checks > li::marker { color: var(--text-dim); }
.dna-checks ul { padding-left: 1.2rem; margin-top: .7rem; }
@media (max-width: 1100px) {
  .dna-header-actions { flex-direction: column; align-items: flex-end; gap: .25rem; }
  .dna-layout { grid-template-columns: minmax(270px, 320px) minmax(0, 1fr); }
  .dna-workspace { padding: 1.75rem; }
  .dna-ring-center strong { font-size: 1.125rem; }
}
@media (max-width: 800px) {
  .dna-studio { padding: 1rem 0 2rem; }
  .dna-header { align-items: stretch; flex-direction: column; gap: .6rem; padding-bottom: 1rem; }
  .dna-header h2 { font-size: 1.125rem; line-height: 1.4; }
  .dna-header-actions { flex-direction: row; align-items: center; justify-content: space-between; gap: 1rem; }
  .dna-header-actions .dna-draft-state, .dna-back { font-size: .9375rem; }
  .dna-layout { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .dna-navigation { position: static; max-height: none; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .75rem; }
  .dna-map-disclosure { grid-column: 1 / -1; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-1); }
  .dna-map-disclosure > .dna-map-summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .8rem 1rem; font-size: 1rem; }
  .dna-map-summary::after { content: '+'; font-size: 1.25rem; color: var(--accent); }
  .dna-map-disclosure[open] > .dna-map-summary::after { content: '−'; }
  .dna-map-summary > .dna-hint { margin-left: auto; }
  .dna-map-content { padding: 0 1rem .5rem; }
  .dna-map-toolbar { justify-content: flex-end; }
  .dna-map-name { display: none; }
  .dna-map-toolbar .dna-button { padding: .3rem 0; font-size: .9375rem; }
  .dna-ring { max-width: 310px; margin-top: -.5rem; }
  .dna-ring-center strong { font-size: 1.0625rem; }
  .dna-ring-center { inset: 23% 21%; gap: .5rem; }
  .dna-annotation { font-size: 26px; }
  .dna-ring-position { font-size: .9375rem; }
  .dna-ring-center .dna-button { font-size: .9375rem; }
  .dna-navigation > .dna-field { margin: 0; }
  .dna-navigation > .dna-next-prev { display: none; }
  .dna-passage-list { grid-column: 1 / -1; margin: 0; padding: 0; border-top: 0; }
  .dna-passage-list > summary { padding: .3rem 0; }
  .dna-workspace { padding: 1.4rem 1.25rem; border-radius: 14px; }
  .dna-lesson-heading { padding-bottom: 1rem; }
  .dna-lesson-title { font-size: 1.75rem; line-height: 1.2; }
  .dna-tabs { gap: 1.25rem; margin-bottom: 1.25rem; }
  .dna-tabs button { font-size: .9375rem; }
  .dna-studio .dna-script { min-height: 13rem; max-height: 75vh; font-size: 1.125rem; line-height: 1.75; }
}
@media (prefers-reduced-motion: reduce) { .dna-segment, .dna-button { transition: none; } }
@media (forced-colors: active) {
  .dna-segment { stroke: CanvasText; }
  .dna-segment.is-selected { stroke: Highlight; filter: none; }
  .dna-annotation { fill: CanvasText; }
  .dna-annotation.is-selected { fill: Highlight; }
  .dna-strand, .dna-base-pair, .dna-parent, .dna-orbit { stroke: CanvasText; }
  .dna-dot.is-selected { fill: Highlight; }
  .dna-header-actions .dna-draft-state::before { background: CanvasText; }
}

/* The wheel is a captured circular gesture, independent of the lesson editor. */
.dna-ring { user-select: none; -webkit-user-select: none; }
.dna-ring svg { touch-action: none; pointer-events: none; }
.dna-ring svg:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 50%; }
.dna-scrub-track { fill: none; stroke: transparent; stroke-width: 60; pointer-events: stroke; touch-action: none; cursor: grab; }
.dna-segment { touch-action: none; pointer-events: stroke; cursor: grab; }
.dna-ring[data-scrubbing="true"] .dna-segment, .dna-ring[data-scrubbing="true"] .dna-scrub-track { cursor: grabbing; }
.dna-orbit, .dna-scrub-cursor { pointer-events: none; }
.dna-segment.is-preview { stroke: var(--accent); stroke-width: 16; }
.dna-ring[data-preview="true"] .dna-segment.is-selected:not(.is-preview) { stroke: var(--border-strong); stroke-width: 8; filter: none; }
.dna-scrub-halo { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.5; }
.dna-scrub-thumb { fill: var(--accent); stroke: var(--bg); stroke-width: 2; }
.dna-ring-center strong { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (forced-colors: active) {
  .dna-scrub-halo { fill: Canvas; stroke: Highlight; }
  .dna-scrub-thumb { fill: Highlight; stroke: Canvas; }
  .dna-ring[data-preview="true"] .dna-segment.is-selected:not(.is-preview) { stroke: CanvasText; }
  .dna-segment.is-preview { stroke: Highlight; }
}

/* A continuous manuscript: the page scrolls, each passage remains in context. */
.dna-studio [hidden] { display: none !important; }
.dna-navigation { padding: .5rem .75rem .75rem .5rem; }
.dna-manuscript { padding-top: .75rem; }
.dna-manuscript-passage { position: relative; padding-left: 1.5rem; border-left: 2px solid transparent; transition: border-color 160ms; }
.dna-manuscript-passage[data-active="true"] { border-left-color: var(--accent); }
.dna-passage-number { position: absolute; left: -.1rem; top: .5rem; transform: translateX(-100%); padding-right: .6rem; font: .75rem var(--font-sans); color: var(--text-dim); opacity: .65; font-variant-numeric: tabular-nums; }
.dna-studio .dna-manuscript .dna-script { display: block; min-height: 3rem; max-height: none; overflow: hidden; resize: none; margin: 0; padding: .3rem .4rem 1.6rem; field-sizing: content; }
.dna-studio .dna-manuscript-passage .dna-script:focus-visible { outline: none; background: var(--accent-soft); border-color: transparent; border-radius: 4px; }
.dna-studio .dna-manuscript > .dna-script { min-height: 24rem; }
.dna-save-row { position: sticky; bottom: .5rem; z-index: 3; padding: .75rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-1); box-shadow: 0 6px 24px #00000016; margin-top: 1rem; }
.dna-save-row .dna-hint { padding-inline: .5rem; }
.dna-browse { display: none; }
.dna-preview-banner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; background: var(--accent-soft); padding: .65rem .85rem; border-radius: 8px; font-size: .9375rem; }
.dna-preview-banner button { padding: .4rem .6rem; border-color: transparent; }
.dna-preview h3 { font-family: 'Source Serif 4', serif; font-size: 1.5rem; font-weight: 500; line-height: 1.3; }
.dna-preview-manuscript { position: relative; margin-top: 1.5rem; max-height: 65vh; overflow-y: auto; overscroll-behavior: contain; font: 1.25rem/1.8 'Source Serif 4', serif; }
.dna-preview-manuscript p { padding: .5rem 1rem; margin: 0 0 1rem; white-space: pre-wrap; }
.dna-preview-manuscript [data-preview-active="true"] { background: var(--accent-soft); border-left: 2px solid var(--accent); }
.dna-course-topics { border-top: 1px solid var(--border); margin-top: 1rem; }
.dna-course-topics ol { padding-left: 1.5rem; }
.dna-course-topics button { border: 0; width: 100%; padding: .65rem .4rem; font-size: .9375rem; }
@media (max-width: 800px) {
  .dna-studio { padding-top: .25rem; }
  .dna-header { position: relative; gap: .25rem; padding: 0 0 .5rem; }
  .dna-header h2 { font-size: .875rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding-right: 7rem; }
  .dna-header > div:first-child > .dna-hint { display: none; }
  .dna-header-actions { gap: .5rem; padding-right: 7.25rem; }
  .dna-header-actions .dna-draft-state { font-size: .8125rem; }
  .dna-header-actions .dna-back { font-size: .8125rem; min-height: 44px; }
  .dna-browse { display: block; position: absolute; right: 0; top: 0; font-size: .875rem; padding: .5rem .65rem; }
  .dna-navigation { display: none; }
  .dna-navigation[data-open="true"] { display: grid; padding: .4rem; border: 1px solid var(--border); border-radius: 12px; }
  .dna-workspace { padding: 1rem .9rem; }
  .dna-lesson-heading { padding-bottom: .75rem; }
  .dna-breadcrumb { font-size: .8125rem; margin-bottom: .4rem; }
  .dna-lesson-title { font-size: 1.5rem; line-height: 1.2; }
  .dna-tabs { margin-bottom: .75rem; gap: 1.25rem; }
  .dna-tabs button { min-height: 44px; padding-block: .4rem; }
  .dna-prose .dna-field { margin: .75rem 0; }
  .dna-prose > .dna-hint { margin: .5rem 0; }
  .dna-manuscript-passage { padding-left: .7rem; }
  .dna-passage-number { padding-right: .2rem; font-size: .625rem; }
  .dna-studio .dna-manuscript .dna-script { font-size: 1.125rem; line-height: 1.75; }
  .dna-work-heading .dna-button { font-size: .8125rem; padding-inline: .25rem; }
  .dna-save-row { bottom: .5rem; margin-inline: -.25rem; padding: .5rem; }
  .dna-save-row .dna-hint { font-size: .75rem; }
  .dna-course-topics { grid-column: 1 / -1; }
}

@media (max-width: 800px) {
  .dna-prose:has(.dna-manuscript) > .dna-hint:first-of-type { display: none; }
  .dna-manuscript { padding-top: .25rem; }
}

/* The open ends continue to the lessons immediately before and after this one. */
.dna-thread { position: absolute; top: 0; transform: translate(-50%, -50%); z-index: 2; min-width: 64px; min-height: 44px; padding: .3rem .45rem; font-size: .8125rem; text-align: center; background: var(--bg); border-color: transparent; color: var(--text-dim); }
.dna-thread-previous { left: 39.05%; }
.dna-thread-next { left: 60.95%; }
.dna-thread:hover, .dna-thread:focus-visible { color: var(--accent); background: var(--surface-2); }
.dna-parent.is-end { opacity: .15; stroke-dasharray: 2 4; }
.dna-ring[data-neighbor="previous"] .dna-parent-previous, .dna-ring[data-neighbor="next"] .dna-parent-next { opacity: 1; stroke-width: 2.5; }
.dna-thread:disabled { opacity: .4; }
@media (max-width: 800px) { .dna-ring:has(.dna-thread) { margin-top: 1.25rem; } }

.dna-thread-hit { fill: none; stroke: transparent; stroke-width: 24; pointer-events: none; }
.dna-thread-hit[data-neighbor-target] { pointer-events: stroke; cursor: pointer; touch-action: none; }
@media (max-width: 800px) {
  .dna-thread { width: 48px; min-width: 44px; padding: .25rem .1rem; font-size: .75rem; line-height: 1.2; }
}

/* A long manuscript keeps its identity and save outcome within reach. */
.dna-document-tools { position: sticky; top: var(--tabs-h, 49px); z-index: 4; background: var(--surface-1); border-bottom: 1px solid var(--border); padding: .35rem 0 .6rem; }
.dna-document-tools .dna-work-heading { flex-wrap: nowrap; }
.dna-document-title { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dna-document-tools .dna-button { flex-shrink: 0; }
.dna-reading-position { display: block; color: var(--text-dim); font-size: .8125rem; font-variant-numeric: tabular-nums; }
.dna-reading-position[data-semantic-context="true"] { min-height: 2.9em; line-height: 1.45; color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.dna-save-dock { position: sticky; bottom: .5rem; z-index: 5; margin-top: 1rem; background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 6px 24px #00000016; }
.dna-save-dock .dna-save-row { position: static; margin: 0; border: 0; box-shadow: none; padding: .65rem; justify-content: flex-start; }
.dna-save-dock .dna-draft-state { margin-right: auto; }
.dna-save-dock .dna-error { margin: 0 .65rem .65rem; font-size: .875rem; }
.dna-save-dock .dna-button:not(.dna-primary) { border-color: transparent; font-size: .875rem; padding-inline: .5rem; }
@media (max-width: 800px) {
  .dna-document-tools { top: var(--tabs-h, 49px); padding-block: .1rem .35rem; }
  .dna-document-title { font-size: .9375rem !important; }
  .dna-document-tools .dna-button { font-size: .8125rem; }
  .dna-save-dock { bottom: max(.5rem, env(safe-area-inset-bottom)); margin-inline: -.25rem; }
  .dna-save-dock .dna-save-row { margin: 0; gap: .25rem; }
  .dna-save-dock .dna-draft-state { font-size: .8125rem; }
}

/* Recorded sources and local find sit beside the working manuscript. */
.dna-document-actions { display: flex; align-items: center; gap: .4rem; }
.dna-document-actions .dna-reading-position { margin-right: auto; }
.dna-document-actions .dna-button { border-color: transparent; padding: .35rem .65rem; font-size: .875rem; }
.dna-map-view { min-width: 0; }
.dna-inspector-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem; }
.dna-inspector-heading h3 { font-size: 1.0625rem; margin: .5rem 0; }
.dna-inspector-heading .dna-button { border-color: transparent; padding: .35rem .4rem; font-size: .875rem; }
.dna-inspector-lesson { font-family: 'Source Serif 4', serif; font-size: 1.25rem; line-height: 1.4; margin: .75rem 0 1rem; }
.dna-inspector-source { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 1rem; line-height: 1.7; }
.dna-inspector input { font: inherit; width: 100%; min-height: 48px; color: var(--text); background: var(--surface-1); border: 1px solid var(--border-strong); border-radius: 8px; padding: .7rem; }
.dna-inspector input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.dna-find-controls { display: flex; gap: .5rem; }
.dna-find-controls .dna-button { font-size: .875rem; flex: 1; padding: .5rem; }
.dna-find-results { padding-left: 1.25rem; }
.dna-find-results li { padding-bottom: .6rem; }
.dna-find-results button { width: 100%; font-size: .9375rem; border-color: transparent; padding: .6rem; }
.dna-find-results button[aria-current="true"] { color: var(--accent); background: var(--accent-soft); }
@media (max-width: 800px) {
  .dna-header h2 { -webkit-line-clamp: 1; }
  .dna-map-view { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .75rem; }
  .dna-map-view > .dna-field { margin: 0; }
  .dna-map-view > .dna-next-prev { display: none; }
  .dna-navigation[data-open="true"]:not([data-inspector="map"]) { position: fixed; inset: auto .5rem max(.5rem, env(safe-area-inset-bottom)); display: block; z-index: 20; max-height: 58vh; max-height: 58dvh; overflow-y: auto; padding: 1rem; background: var(--surface-1); box-shadow: 0 -8px 40px #00000040; border: 1px solid var(--border-strong); border-radius: 16px; }
  .dna-inspector-heading { position: sticky; top: -1rem; background: var(--surface-1); z-index: 1; padding-top: .25rem; }
  .dna-inspector-heading h3 { font-size: 1rem; }
  .dna-inspector-lesson { font-size: 1.0625rem; }
  .dna-document-actions { gap: .1rem; }
  .dna-document-actions .dna-button { padding-inline: .4rem; }
}
@media (max-width: 800px) {
  .dna-document-tools .dna-work-heading { min-height: 20px; }
  .dna-prose .dna-document-title { margin: 0; line-height: 1.3; }
  .dna-document-actions { padding-right: 0; }
  .dna-document-tools .dna-script-mode { position: absolute; right: 0; bottom: .35rem; width: 62px; font-size: 0; padding-inline: .1rem; }
  .dna-document-tools .dna-script-mode::after { content: attr(data-mode-label); font-size: .8125rem; }
}
.dna-change { padding: 1rem 0; border-top: 1px solid var(--border); }
.dna-change h4 { margin: 0 0 .75rem; font-size: .9375rem; }
.dna-change-label { color: var(--text-dim); font-size: .8125rem; font-weight: 700; }
.dna-change p, .dna-change pre { white-space: pre-wrap; overflow-wrap: anywhere; font: .9375rem/1.6 var(--font-sans); margin: .35rem 0 1rem; }
.dna-change-before { opacity: .8; }
.dna-change-after { background: var(--accent-soft); padding: .65rem; border-radius: 6px; }
@media (max-width: 800px) {
  .dna-document-actions { flex-wrap: wrap; padding-right: 0; }
  .dna-document-actions .dna-reading-position { flex: 0 0 100%; }
  .dna-document-actions .dna-button { min-width: 44px; }
  .dna-document-tools .dna-script-mode { bottom: .35rem; }
}
@media (max-width: 800px) {
  .dna-lesson-heading { padding-bottom: .5rem; }
  .dna-tabs { margin-bottom: .5rem; }
}
.dna-recovery-links { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0 .65rem .65rem; }
.dna-recovery-links:has(button:not([hidden])) { border-top: 1px solid var(--border); padding-top: .5rem; }
.dna-recovery-links:not(:has(button:not([hidden]))) { display: none; }
.dna-recovery-links .dna-button { font-size: .875rem; padding: .45rem .6rem; }
.dna-recovery-actions { display: grid; gap: .5rem; }
.dna-recovery-actions .dna-button { text-align: center; font-size: .9375rem; }
.dna-inspector textarea { min-height: 16rem; font: .9375rem/1.6 var(--font-sans); }

.dna-map-back { display: none; }
.dna-navigation[data-overlay="true"] .dna-map-back { display: block; grid-column: 1 / -1; position: sticky; top: 0; z-index: 2; background: var(--surface-1); }
@media (max-width: 800px) {
  .dna-document-actions .dna-button { padding-inline: 0; font-size: .8125rem; }
  .dna-navigation[data-open="true"][data-overlay="true"] { position: fixed; inset: auto .5rem max(.5rem, env(safe-area-inset-bottom)); display: block; z-index: 20; max-height: 78vh; max-height: 78dvh; overflow-y: auto; padding: .75rem; background: var(--surface-1); border: 1px solid var(--border-strong); border-radius: 16px; box-shadow: 0 -8px 40px #00000040; }
}

/* Direct course contents complements the spatial DNA overview. */
.dna-contents-action { border-color: transparent; padding-inline: .6rem; font-size: .875rem; }
.dna-contents-label { display: block; color: var(--text-dim); font-size: .75rem; line-height: 1.4; }
.dna-contents-excerpt { display: block; margin-top: .25rem; line-height: 1.5; }
.dna-contents-results { list-style: none; padding: 0; }
.dna-contents-results li { padding-bottom: .25rem; }
.dna-contents-results button { text-align: left; }
@media (max-width: 800px) {
  .dna-document-tools .dna-contents-action { padding: .3rem .4rem; min-height: 44px; }
}

.dna-contents-search { position: sticky; top: 0; z-index: 2; background: var(--surface-1); padding-bottom: .25rem; }
.dna-contents-search .dna-inspector-heading { position: static; }
.dna-contents-search .dna-find-controls { margin-top: .5rem; }
.dna-contents-search .dna-hint { margin-block: .5rem; }
@media (max-width: 800px) {
  .dna-navigation[data-open="true"][data-inspector="contents"] { max-height: 78vh; max-height: 78dvh; }
  .dna-contents-search { top: -1rem; padding-top: .25rem; }
}

.dna-navigation[data-inspector="contents"] .dna-inspector-lesson { font: .8125rem/1.4 var(--font-sans); color: var(--text-dim); margin: .5rem 0; }

/* A folded ribbon: one continuous course path, with light and overlap for depth. */
.course-fold-shadow, .course-fold-backbone, .course-fold-light, .course-fold-turn, .course-fold-crease { pointer-events: none; }
.course-fold-shadow { fill: none; stroke: var(--bg); stroke-width: 13; opacity: .7; }
.course-fold-backbone { fill: none; stroke-width: 9; stroke-linecap: round; }
.course-fold-light { fill: none; stroke: var(--text); stroke-width: 1; opacity: .45; }
.dna-parent { stroke-width: 5; opacity: .8; }
.course-fold-crease { fill: none; stroke: var(--text); stroke-width: 1; opacity: .55; }
.course-fold-turn.is-end, .course-fold-crease.is-end { opacity: .15; }
.dna-segment:not(.is-selected):not(.is-preview) { stroke: transparent; stroke-width: 18; }
.dna-segment.is-selected, .dna-segment.is-preview { stroke-linecap: round; }
.dna-segment.is-selected { filter: drop-shadow(0 0 4px var(--accent)); }
@media (forced-colors: active) {
  .course-fold-shadow, .course-fold-light, .course-fold-turn, .course-fold-crease { display: none; }
  .course-fold-backbone { stroke: CanvasText; stroke-width: 3; }
  .dna-parent { stroke: CanvasText; }
}

.dna-preview { position: sticky; top: calc(var(--tabs-h, 49px) + 1rem); }

/* Two representations, one lesson. The manuscript nodes survive every switch. */
.dna-script-views { display: inline-flex; gap: .2rem; padding: .2rem; margin: .45rem 0 .2rem; border-radius: 10px; background: var(--surface-2); }
.dna-script-views .dna-button { border: 0; padding: .4rem .85rem; color: var(--text-dim); }
.dna-script-views .dna-button[aria-pressed="true"] { background: var(--surface-1); color: var(--text); box-shadow: 0 1px 4px #00000020; }
.dna-view-toolbar { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.dna-card-navigation { display: flex; gap: .35rem; }
.dna-card-navigation .dna-button { min-width: 44px; min-height: 44px; padding: .4rem; text-align: center; font-size: 1.1rem; }
.dna-card-announcement { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.dna-semantic-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; padding: 1.25rem 0 2rem; }
.dna-semantic-card { overflow: hidden; min-width: 0; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-1); transition: border-color 160ms; }
.dna-semantic-card:hover { border-color: var(--border-strong); }
.dna-semantic-card[data-active="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.dna-semantic-card[data-active="true"] .dna-card-position { color: var(--accent); }
.dna-semantic-card:has(> .dna-card-image) { display: grid; grid-template-columns: 88px minmax(0, 1fr); }
.dna-card-image { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: #e9e5dc; }
.dna-semantic-card > .dna-card-image { height: 100%; aspect-ratio: auto; }
.dna-card-content { padding: 1.05rem 1.1rem 1rem; }
.dna-card-position { color: var(--text-dim); font-size: .75rem; font-variant-numeric: tabular-nums; }
.dna-prose .dna-card-content h3 { font: 650 1.15rem/1.3 var(--font-sans); letter-spacing: -.02em; margin: .45rem 0 .6rem; text-wrap: pretty; }
.dna-card-summary { font-size: .9375rem; line-height: 1.6; margin: 0 0 .7rem; color: var(--text-dim); }
.dna-card-content .dna-button { color: var(--accent); border-color: transparent; font-size: .8125rem; padding: .35rem 0; }
.dna-card-content .dna-button:hover { background: transparent; text-decoration: underline; }
.dna-preview > .dna-card-image { border-radius: 12px; max-height: 300px; margin-top: 1.25rem; }
.dna-preview-topic { font-size: clamp(1.5rem, 2.5vw, 2rem); letter-spacing: -.025em; margin: 1rem 0 .5rem; }
.dna-preview-summary { font: 1.2rem/1.65 'Source Serif 4', serif; max-width: 52ch; margin: 0 0 1rem; }
.dna-preview-full > summary { font-size: .875rem; color: var(--text-dim); }
.dna-semantic-cards[hidden], .dna-manuscript[hidden] { display: none; }
@media (max-width: 1000px) and (min-width: 801px) { .dna-semantic-cards { grid-template-columns: 1fr; } }
@media (max-width: 520px) {
  .dna-semantic-cards { grid-template-columns: 1fr; gap: 1rem; }
  .dna-script-views { margin-top: .3rem; }
}
@media (prefers-reduced-motion: reduce) { .dna-semantic-card { transition: none; } }

/* The lesson is the primary surface. Exploration stays on its edges. */
.dna-studio[data-primary="document"] { max-width: 1120px; padding: 1.25rem 1.5rem 3rem; }
.dna-studio[data-primary="document"]:has(.dna-filmstrip) { padding-bottom: calc(148px + 5rem + env(safe-area-inset-bottom, 0px)); }
.dna-studio[data-primary="document"]:has(.dna-filmstrip[data-collapsed="true"]) { padding-bottom: calc(44px + 5rem + env(safe-area-inset-bottom, 0px)); }
.dna-studio[data-primary="document"] .dna-header { padding-bottom: 1.25rem; gap: 1.5rem; }
.dna-studio[data-primary="document"] .dna-header h2 { font-size: 1rem; font-weight: 400; color: var(--text-dim); max-width: 60ch; }
.dna-studio[data-primary="document"] .dna-header > div:first-child > .dna-hint { display: none; }
.dna-studio[data-primary="document"] .dna-header-actions { gap: 1rem; }
.dna-studio[data-primary="document"] .dna-header-actions .dna-back { font-size: .8125rem; }
.dna-studio[data-primary="document"] .dna-browse { display: none; }
.dna-studio[data-primary="document"] .dna-layout { display: block; }
.dna-studio[data-primary="document"] .dna-navigation { display: none; }
.dna-studio[data-primary="document"] .dna-navigation[data-open="true"] { display: block; position: fixed; top: 5.5rem; left: max(1rem, calc((100vw - 1440px) / 2)); bottom: calc(148px + 1rem + env(safe-area-inset-bottom, 0px)); width: 320px; max-height: none; z-index: 30; padding: 1.25rem; background: var(--surface-1); border: 1px solid var(--border-strong); border-radius: 14px; box-shadow: 0 12px 40px #00000025; overflow-y: auto; }
.dna-studio[data-primary="document"] .dna-workspace { padding: 2.5rem clamp(1.5rem, 6vw, 5rem); border-radius: 14px; min-width: 0; }
.dna-studio[data-primary="document"] .dna-lesson-heading { max-width: 68ch; margin-inline: auto; padding-bottom: 1.25rem; }
.dna-studio[data-primary="document"] .dna-lesson-title { font-size: clamp(2rem, 4vw, 3rem); max-width: 28ch; line-height: 1.15; }
.dna-studio[data-primary="document"] .dna-breadcrumb { font-size: .8125rem; margin-bottom: .75rem; }
.dna-studio[data-primary="document"] .dna-tabs { max-width: 68ch; margin-inline: auto; gap: 1.75rem; margin-bottom: 1.5rem; }
.dna-studio[data-primary="document"] .dna-prose { max-width: 66ch; }
.dna-studio[data-primary="document"] .dna-manuscript { padding-top: 1.25rem; }
.dna-studio[data-primary="document"] .dna-manuscript-passage { margin-bottom: .75rem; padding-left: 1.2rem; }
.dna-studio[data-primary="document"] .dna-prose .dna-passage-heading { font: 700 .9375rem/1.4 var(--font-sans); color: var(--text); margin: 0 0 .4rem .4rem; letter-spacing: 0; }
.dna-studio[data-primary="document"] .dna-passage-heading[data-topic-valid="false"] { color: var(--text-dim); font-weight: 400; }
.dna-studio[data-primary="document"] .dna-passage-number { top: .15rem; font-size: .6875rem; }
.dna-studio[data-primary="document"] .dna-manuscript .dna-script { font-size: 1.25rem; line-height: 1.75; padding-bottom: 1.25rem; }
.dna-studio[data-primary="document"] .dna-manuscript-passage .dna-script:focus-visible { background: transparent; }
.dna-studio[data-primary="document"] .dna-document-tools { padding: .25rem 0 .5rem; }
.dna-studio[data-primary="document"] .dna-document-tools .dna-work-heading { gap: .3rem; flex-wrap: nowrap; }
.dna-studio[data-primary="document"] .dna-document-title { flex: 1; font: 600 .875rem/1.4 var(--font-sans); margin: 0; }
.dna-studio[data-primary="document"] .dna-reading-position { font-size: .8125rem; line-height: 1.4; min-height: 1.4em; padding: .1rem 0 0; font-weight: 400; color: var(--text-dim); }
.dna-studio[data-primary="document"] .dna-reading-position[data-semantic-context="true"] { min-height: 1.4em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dna-more-tools { position: relative; flex-shrink: 0; }
.dna-studio .dna-more-tools > summary { display: flex; min-height: 44px; padding: .5rem .65rem; align-items: center; font-size: .875rem; font-weight: 400; list-style: none; color: var(--text-dim); border-radius: 8px; }
.dna-more-tools > summary::-webkit-details-marker { display: none; }
.dna-more-tools > summary:hover, .dna-more-tools[open] > summary { background: var(--surface-2); color: var(--text); }
.dna-tools-panel { position: absolute; right: 0; top: calc(100% + .4rem); z-index: 40; width: min(310px, calc(100vw - 3rem)); padding: .5rem; display: grid; gap: .2rem; background: var(--surface-1); border: 1px solid var(--border-strong); border-radius: 12px; box-shadow: 0 12px 40px #00000030; }
.dna-studio[data-primary="document"] .dna-tools-panel .dna-button { position: static; width: 100%; min-height: 44px; font-size: .875rem; padding: .55rem .7rem; color: var(--text); border: 0; }
.dna-studio[data-primary="document"] .dna-tools-panel .dna-script-mode::after { display: none; }
.dna-tools-panel .dna-view-toolbar { display: block; border-top: 1px solid var(--border); margin-top: .2rem; padding-top: .25rem; }
.dna-tools-panel .dna-script-views { width: 100%; }
.dna-tools-panel .dna-card-navigation { justify-content: center; margin-block: .3rem; }
.dna-studio[data-primary="document"] .dna-save-dock { bottom: calc(148px + .5rem + env(safe-area-inset-bottom, 0px)); }
.dna-studio[data-primary="document"]:has(.dna-filmstrip[data-collapsed="true"]) .dna-save-dock { bottom: calc(44px + .5rem + env(safe-area-inset-bottom, 0px)); }
.dna-context-controls { position: fixed; bottom: calc(148px + 1rem + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); z-index: 70; display: flex; align-items: center; gap: .4rem; padding: .35rem .5rem; max-width: calc(100vw - 1rem); background: var(--surface-1); border: 1px solid var(--border-strong); border-radius: 12px; box-shadow: 0 6px 24px #00000030; }
.dna-context-controls > span { font-size: .8125rem; color: var(--text-dim); padding-inline: .4rem; white-space: nowrap; }
.dna-context-controls .dna-button { border-color: transparent; font-size: .875rem; min-height: 44px; padding: .4rem .6rem; }
@media (min-width: 1260px) { .dna-studio[data-primary="document"]:has(.dna-navigation[data-open="true"]) .dna-workspace { margin-left: 240px; padding-inline: 2rem; } }
@media (max-width: 800px) {
  .dna-studio[data-primary="document"] { padding: .5rem 0 2rem; }
  .dna-studio[data-primary="document"] .dna-header { padding: 0 .5rem .6rem; flex-direction: row; align-items: center; gap: .5rem; }
  .dna-studio[data-primary="document"] .dna-header h2 { font-size: .8125rem; padding: 0; -webkit-line-clamp: 1; }
  .dna-studio[data-primary="document"] .dna-header-actions { padding: 0; gap: .25rem; }
  .dna-studio[data-primary="document"] .dna-header-actions .dna-draft-state { font-size: .75rem; }
  .dna-studio[data-primary="document"] .dna-header-actions .dna-back { display: none; }
  .dna-studio[data-primary="document"] .dna-workspace { padding: 1.25rem .85rem; border-radius: 12px; }
  .dna-studio[data-primary="document"] .dna-lesson-title { font-size: 1.875rem; }
  .dna-studio[data-primary="document"] .dna-document-title { font-size: .8125rem !important; }
  .dna-studio[data-primary="document"] .dna-prose .dna-passage-heading { font-size: .875rem; }
  .dna-studio[data-primary="document"] .dna-manuscript .dna-script { font-size: 1.125rem; line-height: 1.7; }
  .dna-studio[data-primary="document"] .dna-navigation[data-open="true"] { inset: auto .5rem calc(136px + .75rem + env(safe-area-inset-bottom, 0px)); width: auto; max-height: calc(100dvh - 136px - 2rem); padding: .9rem; }
  .dna-studio[data-primary="document"]:has(.dna-filmstrip[data-collapsed="true"]) .dna-navigation[data-open="true"] { bottom: calc(44px + .75rem + env(safe-area-inset-bottom, 0px)); max-height: calc(100dvh - 44px - 2rem); }
}
@media (max-width: 600px) {
  .dna-studio[data-primary="document"]:has(.dna-filmstrip) { padding-bottom: calc(136px + 4rem + env(safe-area-inset-bottom, 0px)); }
  .dna-studio[data-primary="document"] .dna-save-dock, .dna-context-controls { bottom: calc(136px + .5rem + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) { .dna-studio[data-primary="document"] .dna-manuscript-passage { transition: none; } }

/* A single reservation follows the actual navigator size, including collapse. */
.dna-studio[data-primary="document"] { --dna-footer-height: 0px; }
.dna-studio[data-primary="document"]:has(.dna-filmstrip) { --dna-footer-height: 148px; padding-bottom: calc(var(--dna-footer-height) + 5rem + env(safe-area-inset-bottom, 0px)); }
.dna-studio[data-primary="document"] .dna-save-dock { bottom: calc(var(--dna-footer-height) + .5rem + env(safe-area-inset-bottom, 0px)); }
.dna-studio[data-primary="document"] .dna-context-controls { bottom: calc(var(--dna-footer-height) + 1rem + env(safe-area-inset-bottom, 0px)); }
.dna-studio[data-primary="document"] .dna-navigation[data-open="true"] { bottom: calc(var(--dna-footer-height) + .75rem + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 600px) { .dna-studio[data-primary="document"]:has(.dna-filmstrip) { --dna-footer-height: 136px; } }
.dna-studio[data-primary="document"]:has(.dna-filmstrip[data-collapsed="true"]) { --dna-footer-height: 44px; }

/* Section addresses stay readable; phone cards stack the complete visual above the text. */
.dna-studio[data-primary="document"] .dna-passage-number { position: static; display: block; transform: none; margin: 0 0 .25rem .4rem; padding: 0; opacity: 1; }
@media (max-width: 800px) {
  .dna-semantic-cards { grid-template-columns: minmax(0, 1fr); }
  .dna-semantic-card:has(> .dna-card-image) { display: block; }
  .dna-semantic-card > .dna-card-image,
  .dna-preview > .dna-card-image { width: 100%; height: auto; aspect-ratio: 3 / 2; max-height: none; object-fit: contain; object-position: center; }
  .dna-semantic-card > .dna-card-image { border-bottom: 1px solid var(--border); }
  .dna-card-content { padding: 1.1rem 1.15rem 1.25rem; }
}

/* One continuous owner list: previews disclose the original native editor. */
.dna-studio[data-primary="document"] .dna-continuous-sections { display: block; padding: 1.25rem 0 2rem; }
.dna-studio[data-primary="document"] .dna-section-owner { padding: 0; border-left: 0; margin: 0 0 2rem; }
.dna-section-previews { display: grid; gap: .75rem; }
.dna-studio[data-primary="document"] .dna-section-previews .dna-card-content .dna-passage-heading { font: 650 1.15rem/1.3 var(--font-sans); letter-spacing: -.02em; margin: .45rem 0 .6rem; text-wrap: pretty; }
.dna-studio[data-primary="document"] .dna-section-previews .dna-semantic-card:has(> .dna-card-image) { display: grid; grid-template-columns: minmax(160px, 30%) minmax(0, 1fr); }
.dna-studio[data-primary="document"] .dna-section-previews .dna-card-image { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; align-self: start; }
.dna-section-actions { display: flex; flex-wrap: wrap; gap: .25rem .65rem; margin-top: .75rem; }
.dna-section-actions .dna-button { min-height: 44px; padding: .4rem .15rem; border: 0; color: var(--accent); background: transparent; }
.dna-section-actions .dna-button[aria-expanded="true"] { color: var(--text-dim); }
.dna-section-script { padding: 1.1rem .5rem .25rem 1rem; border-left: 2px solid var(--border); margin: .7rem 0 1.25rem; }
.dna-section-script[hidden] { display: none; }
.dna-studio[data-primary="document"] .dna-section-script .dna-script { margin: 0; padding: 0 0 .6rem; }
.dna-studio[data-primary="document"] .dna-section-script .dna-script[readonly] { cursor: text; }
.dna-section-script:focus-within { border-left-color: var(--accent); }
@media (max-width: 800px) {
  .dna-studio[data-primary="document"] .dna-section-previews .dna-semantic-card:has(> .dna-card-image) { display: block; }
  .dna-studio[data-primary="document"] .dna-section-previews .dna-card-image { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; max-height: none; object-fit: contain; }
  .dna-studio[data-primary="document"] .dna-section-owner { margin-bottom: 1.4rem; }
  .dna-section-script { padding-left: .65rem; padding-right: 0; }
}

/* Reading actions stay in the existing lesson, with a quiet native inspector. */
.dna-studio[data-primary="document"] .dna-card-content .dna-topic-action { display: block; width: 100%; min-height: 0; padding: 0; margin: 0; border: 0; border-radius: 2px; background: transparent; color: inherit; font: inherit; letter-spacing: inherit; text-align: left; white-space: normal; }
.dna-studio[data-primary="document"] .dna-card-content .dna-topic-action:hover { text-decoration: none; }
.dna-studio[data-primary="document"] .dna-card-content .dna-topic-action:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* Reading mode leads with the continuous script; Cards retains the visual previews. */
@media (max-width: 800px) {
  .dna-studio[data-primary="document"]:has(.dna-manuscript[data-density="manuscript"]) .dna-workspace { padding-top:1rem; }
  .dna-studio[data-primary="document"]:has(.dna-manuscript[data-density="manuscript"]) .dna-lesson-heading { padding-bottom:.5rem; }
  .dna-studio[data-primary="document"]:has(.dna-manuscript[data-density="manuscript"]) .dna-lesson-title { font-size:1.375rem; line-height:1.2; }
  .dna-studio[data-primary="document"]:has(.dna-manuscript[data-density="manuscript"]) .dna-breadcrumb { margin-bottom:.35rem; }
  .dna-studio[data-primary="document"]:has(.dna-manuscript[data-density="manuscript"]) .dna-tabs { margin-bottom:.75rem; }
  .dna-studio[data-primary="document"] .dna-manuscript[data-density="manuscript"] .dna-section-previews .dna-semantic-card { display:block; }
  .dna-studio[data-primary="document"] .dna-manuscript[data-density="manuscript"] .dna-section-previews .dna-card-image,
  .dna-studio[data-primary="document"] .dna-manuscript[data-density="manuscript"] .dna-card-summary { display:none; }
  .dna-studio[data-primary="document"]:has(.dna-manuscript[data-density="manuscript"]) .dna-document-tools { display:flex; align-items:center; gap:.5rem; }
  .dna-studio[data-primary="document"]:has(.dna-manuscript[data-density="manuscript"]) .dna-document-tools .dna-work-heading { order:1; margin:0; flex-shrink:0; }
  .dna-studio[data-primary="document"]:has(.dna-manuscript[data-density="manuscript"]) .dna-document-title { display:none; }
  .dna-studio[data-primary="document"]:has(.dna-manuscript[data-density="manuscript"]) .dna-reading-position { flex:1; min-width:0; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
  .dna-studio[data-primary="document"] .dna-manuscript[data-density="manuscript"] { padding-top:.5rem; }
  .dna-studio[data-primary="document"] .dna-manuscript[data-density="manuscript"] .dna-semantic-cards { padding-top:0; }
  .dna-studio[data-primary="document"] .dna-manuscript[data-density="manuscript"] .dna-section-script { margin-top:.5rem; padding-top:.5rem; }
  .dna-studio[data-primary="document"] .dna-manuscript[data-density="manuscript"] [data-script-open="true"] .dna-section-actions [aria-controls][aria-expanded="true"] { display:none; }
  .dna-studio[data-primary="document"] .dna-manuscript[data-density="manuscript"] .dna-card-content { display:grid; grid-template-columns:max-content minmax(0,1fr); gap:.35rem .5rem; align-items:baseline; padding:.5rem .65rem; }
  .dna-studio[data-primary="document"] .dna-manuscript[data-density="manuscript"] .dna-card-content .dna-passage-heading { margin:0; font-size:1rem; }
  .dna-studio[data-primary="document"] .dna-manuscript[data-density="manuscript"] .dna-section-actions { grid-column:1 / -1; margin:0; }
}
.dna-section-actions .dna-details-action { color: var(--text-dim); }
.dna-section-details > .dna-card-image { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; margin: .75rem 0 .25rem; border-radius: 8px; }
.dna-contents-group { padding-top: .75rem; }
.dna-contents-group > h4 { margin: .4rem 0 .7rem; font: 700 .9375rem/1.35 var(--font-sans); }
.dna-contents-scopes { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin: .6rem 0; }
.dna-contents-scopes .dna-button { min-height: 36px; padding: .25rem 0; border: 0; color: var(--accent); font-size: .8125rem; }
.dna-contents-results .dna-contents-topic { display: block; font-size: .9375rem; font-weight: 700; line-height: 1.4; color: var(--text); }
.dna-contents-results .dna-contents-label { display: block; margin-top: .25rem; font-size: .75rem; font-weight: 400; color: var(--text-dim); }
.dna-contents-results .dna-contents-match { display: block; margin-top: .4rem; padding-top: .4rem; border-top: 1px solid var(--border); font-size: .8125rem; line-height: 1.5; color: var(--text-dim); }

/* UNDER THE CONSOLE'S TAB BAR (2026-10-29, console navigation): this view no longer hides the tabs, and above 700 px
   the tab bar sticks to the top of the window (console.css .tabs, z-index 20), so the view's own sticky parts stand
   below it, at its height (--tabs-h, 49px, the figure console.css's sticky table heads use). On a phone the tab bar
   scrolls away with the page, so they stick to the top again. */
@media (max-width: 700px) {
  .dna-document-tools { top: 0; }
  .dna-preview { top: 1rem; }
}