    /* Kill padding on the <main>/<section> wrappers inherited from base.html
       so the reading shell can fill the viewport edge-to-edge. */
    main,
    main > section,
    #main.container-fluid {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* The shell itself stays LTR so the eScriptorium base template chrome is
       unaffected. RTL is opted-in only inside the panel bodies that actually
       render Hebrew text. */
    .reading-shell {
        display: flex;
        flex-direction: column;
        height: calc(100vh - 56px);
        font-family: "SBL Hebrew", "Ezra SIL", serif;
        background: var(--background);
        color: var(--text1);
    }
    /* The eScriptorium base CSS gives every <a> inside the main view the
       global --secondary blues (#1761b5 / #14549d on hover) — too dark to
       read against the dark panel chrome inside the Fragment-Match and
       Citations panels. Override just there, only in dark mode, with a
       light blue. The dark-mode class is set on <html>. */
    html.dark-mode .panel[data-panel-type="match"] a,
    html.dark-mode .panel[data-panel-type="citations"] a,
    html.dark-mode .panel[data-panel-type="metadata"] a {
        color: #6cb6ff;
    }
    html.dark-mode .panel[data-panel-type="match"] a:hover,
    html.dark-mode .panel[data-panel-type="citations"] a:hover,
    html.dark-mode .panel[data-panel-type="metadata"] a:hover {
        color: #9bcdff;
    }

    /* RTL applies to the transcription body and to apparatus rows
       (which read Token → Alternative → Witnesses from the right edge
       inward). Alignment/citations/pericope panels keep their LTR row
       chrome and set RTL on the inner Hebrew spans themselves (see
       .align-base, .citation-snippet, .line, etc.). */
    .panel[data-panel-type="transcription"] .text-panel {
        direction: rtl;
        text-align: right;
    }

    .topbar {
        display: flex;
        gap: 10px;
        align-items: center;
        padding: 10px 12px;
        background: var(--background1);
        border-bottom: 1px solid var(--background2);
        direction: ltr;
        color: var(--text1);
    }

    .topbar select {
        font-family: sans-serif;
        font-size: 14px;
        padding: 6px 10px;
        background: var(--background2);
        color: var(--text1);
        border: 1px solid var(--background2-dark);
        border-radius: 4px;
    }
    /* Highlight the currently-active option (open dropdown). <option>
       styling is honoured inconsistently across browsers; the inline
       background on the selected option in the template is the cross-
       browser path that always wins. */
    .topbar select option:checked {
        background: var(--success, #28a745);
        color: #fff;
        font-weight: 600;
    }

    .nav-link {
        font-family: sans-serif;
        font-size: 14px;
        color: var(--primary);
        text-decoration: none;
    }

    .nav-link:hover {
        text-decoration: underline;
        color: var(--primary-dark);
    }

    .topbar .spacer {
        flex: 1;
    }

    .topbar label,
    .topbar .meta {
        font-family: sans-serif;
        font-size: 13px;
        color: var(--text2);
    }

    /* Reader tools moved into the top navbar. */
    .reader-tools {
        gap: 12px;
    }
    .navbar .meta,
    .reader-tools .meta {
        font-family: sans-serif;
        font-size: 13px;
        color: var(--text2);
        white-space: nowrap;
    }

    /* Horizontally-scrolling layout of columns. RTL direction flips the
       flex main axis so DOM order [first … last] reads visually right-to-
       left: first appended column sits on the far right, new columns
       appended to DOM end land on the visual left. Scroll-start is at the
       right edge, which is where the primary (first) panel lives. */
    .layout {
        display: flex;
        flex-direction: row;
        direction: rtl;
        gap: 0;
        flex: 1;
        min-height: 0;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .panel-column {
        display: flex;
        flex-direction: column;
        /* Columns share the layout width evenly: 2 → 50%, 3 → 33%, 4 → 25%, …
           flex-basis 0 makes them ignore intrinsic content width. min-width
           keeps each column readable; if there are more columns than fit at
           the min width, the layout falls back to horizontal scroll. */
        flex: 1 1 0;
        min-width: 320px;
        min-height: 0;
        border-left: 1px solid var(--background2);
    }
    .panel-column:first-child {
        border-left: none;
    }

    /* Resizer bar between two columns. The 1px column border is masked by
       this 4px flex item; the cursor and hover hint make the affordance
       discoverable. The DOM is patched up by refreshResizers() whenever the
       column set changes. */
    .layout > .resizer {
        flex: 0 0 5px;
        cursor: col-resize;
        background: transparent;
        position: relative;
        z-index: 2;
    }
    .layout > .resizer::before {
        content: "";
        position: absolute;
        top: 0; bottom: 0; left: 2px; width: 1px;
        background: var(--background2);
    }
    .layout > .resizer:hover::before,
    .layout > .resizer.dragging::before {
        background: var(--primary);
        width: 2px;
        left: 1.5px;
    }
    body.column-resizing,
    body.column-resizing * {
        cursor: col-resize !important;
        user-select: none;
    }

    /* Row resizer: same idea as the column resizer, but vertical. Lives
       inside a stacked column between two .panel siblings; suppressed in
       tabs mode where panels overlap. */
    .panel-column > .row-resizer {
        flex: 0 0 5px;
        cursor: row-resize;
        background: transparent;
        position: relative;
        z-index: 2;
    }
    .panel-column > .row-resizer::before {
        content: "";
        position: absolute;
        left: 0; right: 0; top: 2px; height: 1px;
        background: var(--background2);
    }
    .panel-column > .row-resizer:hover::before,
    .panel-column > .row-resizer.dragging::before {
        background: var(--primary);
        height: 2px;
        top: 1.5px;
    }
    body.row-resizing,
    body.row-resizing * {
        cursor: row-resize !important;
        user-select: none;
    }

    .panel-column > .panel {
        flex: 1 1 0;
        min-height: 180px;
        /* A user-resized (fixed-height) panel must never grow past its
           column: the layout clips vertical overflow without a way to
           scroll back. */
        max-height: 100%;
        display: flex;
        flex-direction: column;
        border-top: 1px solid var(--background2);
    }
    .panel-column > .panel:first-child {
        border-top: none;
    }

    /* Drag state: 5 drop zones
       - top / bottom of panel → stack within same column
       - left  / right        → new column on that side
       - center               → merge with target panel as tabs */
    .panel.dragging {
        opacity: 0.45;
    }
    .panel.drop-target-top {
        box-shadow: inset 0 4px 0 var(--primary);
    }
    .panel.drop-target-bottom {
        box-shadow: inset 0 -4px 0 var(--primary);
    }
    .panel.drop-target-left {
        box-shadow: inset 4px 0 0 var(--primary);
    }
    .panel.drop-target-right {
        box-shadow: inset -4px 0 0 var(--primary);
    }
    .panel.drop-target-center {
        box-shadow: inset 0 0 0 3px var(--primary);
        background: rgba(40, 166, 150, 0.08);
    }

    /* Tab-mode column: multiple panels share a slot with a tab bar on top. */
    .panel-column[data-mode="tabs"] > .tab-bar {
        display: flex;
        background: var(--background2);
        border-bottom: 1px solid var(--background2-dark);
        padding: 4px 6px 0;
        gap: 2px;
        overflow-x: auto;
        flex: 0 0 auto;
    }
    .panel-column:not([data-mode="tabs"]) > .tab-bar {
        display: none;
    }
    .panel-column[data-mode="tabs"] .tab-btn {
        padding: 5px 10px;
        border: 1px solid var(--background2-dark);
        border-bottom: none;
        border-radius: 4px 4px 0 0;
        background: var(--background1);
        color: var(--text2);
        font-size: 12px;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        white-space: nowrap;
        font-family: sans-serif;
    }
    .panel-column[data-mode="tabs"] .tab-btn.active {
        background: var(--background);
        color: var(--text1);
        border-color: var(--primary);
        border-bottom: 1px solid var(--background);
        margin-bottom: -1px;
    }
    .panel-column[data-mode="tabs"] .tab-btn .tab-close {
        color: var(--text3);
        font-size: 14px;
        line-height: 1;
        cursor: pointer;
    }
    .panel-column[data-mode="tabs"] .tab-btn .tab-close:hover {
        color: #e57373;
    }
    .panel-column[data-mode="tabs"] > .panel {
        display: none;
        border-top: none;
    }
    .panel-column[data-mode="tabs"] > .panel.active-tab {
        display: flex;
    }
    /* Hide the individual panel header in tab mode — the tab bar is the header. */
    .panel-column[data-mode="tabs"] > .panel > .panel-header {
        display: none;
    }

    /* Minimized panel: only the header stays visible, the panel collapses
       to header height and hands its column-flex back to its siblings. In a
       multi-panel column this means clicking one header collapses just that
       panel and the other one(s) grow into the freed space. */
    .panel[data-minimized="true"] > :not(.panel-header) {
        display: none;
    }
    .panel[data-minimized="true"] {
        flex: 0 0 auto;
        min-height: 0;
    }
    .panel-header {
        cursor: default;
    }

    #apparatus-panel {
        flex: 1;
        overflow-y: auto;
        padding: 10px 12px;
        box-sizing: border-box;
        direction: ltr;
        font-family: sans-serif;
        font-size: 13px;
        color: var(--text1);
    }

    /* Apparatus row: head (Token right, Token-ID left in grey) on top,
       body (alternative + grouped witnesses) on the line below, left-
       aligned. Each cell is bidi-isolated so Latin sigla can't pull
       spaces into the wrong place against neighbouring Hebrew. */
    .apparatus-row {
        padding: 6px 10px;
        border-bottom: 1px solid var(--background2-dark);
        cursor: pointer;
    }
    .apparatus-row:hover {
        background: var(--background2);
    }
    .apparatus-row.active {
        background: var(--selected-background);
    }
    .apparatus-row .app-head {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 12px;
        margin-bottom: 3px;
    }
    .apparatus-row .app-tokenid {
        font-family: monospace;
        font-size: 10px;
        color: var(--text3);
        direction: ltr;
        unicode-bidi: isolate;
        white-space: nowrap;
    }
    .apparatus-row .app-versif {
        font-family: monospace;
        font-size: 10px;
        color: var(--text2);
        direction: ltr;
        unicode-bidi: isolate;
        white-space: nowrap;
    }
    .apparatus-row .app-token {
        font-family: "SBL Hebrew", "Ezra SIL", serif;
        font-size: 15px;
        font-weight: 600;
        direction: rtl;
        unicode-bidi: isolate;
        color: var(--text1);
        flex: 1;
        text-align: right;
    }
    .apparatus-row .app-body {
        direction: rtl;
        text-align: left;
        font-family: "SBL Hebrew", "Ezra SIL", serif;
        font-size: 14px;
        line-height: 1.6;
    }
    /* All inter-element gaps come from CSS margins, NOT literal source
       whitespace. A bare " " at a bidi boundary (Hebrew → Latin, or
       between rtl-isolated variants) gets reattached to the "wrong"
       run by the bidi algorithm and ends up visually before the Hebrew
       word instead of after it. Margins live in CSS layout space,
       outside bidi reordering, so they always land where we put them. */
    .apparatus-row .app-variant {
        display: inline;
        direction: rtl;
        unicode-bidi: isolate;
        color: var(--text1);
    }
    .apparatus-row .app-variant + .app-variant::before {
        content: ";";
        color: var(--text3);
        font-family: sans-serif;
        /* Gap *after* the semicolon (toward the next variant's alt),
           but no gap *before* it — the ; should sit flush against the
           preceding witness siglum. */
        margin-inline-end: 6px;
    }
    .apparatus-row .app-alt {
        direction: rtl;
        unicode-bidi: isolate;
        /* Gap toward the wits cell. inline-end of an rtl element is the
           LEFT edge → exactly the boundary between alt and the
           following wits in rtl flow. */
        margin-inline-end: 6px;
    }
    .apparatus-row .app-wits {
        direction: ltr;
        unicode-bidi: isolate;
        font-family: sans-serif;
        font-weight: 600;
        font-size: 12px;
        color: var(--primary);
    }
    .apparatus-row .app-wits .sigla {
        direction: ltr;
        unicode-bidi: isolate;
    }
    /* Comma separator carries the post-comma space as margin-right (its
       inline-end), so we don't rely on a literal " " character in the
       markup at the boundary. */
    .apparatus-row .app-wits .sigla-sep {
        color: var(--text3);
        font-weight: normal;
        margin-inline-end: 4px;
    }

    /* Fragment-Match panel: summary header + ranked similarity table. */
    .match-body {
        font-family: sans-serif;
        font-size: 13px;
        color: var(--text1);
    }
    .match-summary {
        padding: 10px 12px;
        border-bottom: 1px solid var(--background2);
        background: var(--background1);
    }
    .match-summary .match-witness {
        font-weight: 600;
        font-size: 14px;
    }
    .match-summary .match-group,
    .match-table .match-group {
        display: inline-block;
        padding: 0 5px;
        margin-left: 4px;
        font-size: 10px;
        color: var(--text3);
        background: var(--background2);
        border-radius: 8px;
        font-weight: normal;
        vertical-align: middle;
    }
    .match-summary .match-meta {
        color: var(--text2);
        font-size: 12px;
        margin-top: 2px;
    }
    .match-list { padding: 6px 8px; }
    .match-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 12px;
    }
    .match-table th,
    .match-table td {
        padding: 4px 8px;
        text-align: left;
        border-bottom: 1px solid var(--background2);
    }
    .match-table th {
        color: var(--text3);
        font-weight: 600;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }
    .match-table td.num,
    .match-table th.num {
        text-align: right;
        font-variant-numeric: tabular-nums;
    }
    .match-table tr.is-gen .match-siglum { color: var(--primary); }
    .match-table .match-cov {
        color: var(--text3);
        font-size: 11px;
    }
    .match-table a.match-siglum {
        color: var(--primary);
        text-decoration: none;
        font-weight: 600;
    }
    .match-table a.match-siglum:hover { text-decoration: underline; }
    .match-folios {
        margin-top: 3px;
        display: flex;
        flex-wrap: wrap;
        gap: 3px 4px;
    }
    .match-folio {
        display: inline-flex;
        align-items: stretch;
        font-size: 10px;
        line-height: 1.4;
        background: var(--background2);
        border-radius: 8px;
        overflow: hidden;
    }
    .match-folio:hover { background: var(--primary-focus, var(--background2-dark)); }
    .match-folio-link {
        padding: 1px 6px;
        color: var(--text2);
        text-decoration: none;
        max-width: 140px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .match-folio:hover .match-folio-link { color: var(--primary); }
    .match-folio-add {
        appearance: none;
        background: transparent;
        border: none;
        border-left: 1px solid var(--background2-dark);
        padding: 0 6px;
        font-size: 11px;
        line-height: 1;
        color: var(--text3);
        cursor: pointer;
    }
    .match-folio-add:hover {
        background: var(--primary);
        color: var(--background1);
    }
    .match-folio-more {
        font-size: 10px;
        color: var(--text3);
        padding: 1px 4px;
    }
    /* Per-row drill-down button: opens (or reuses) an Apparatus panel
       filtered to alignment units where this fragment and the row's
       sibling witness disagree. */
    .match-drill {
        appearance: none;
        background: transparent;
        border: none;
        padding: 0 4px;
        color: var(--text3);
        font-size: 14px;
        line-height: 1;
        cursor: pointer;
    }
    .match-drill:hover { color: var(--primary); }

    /* Active match-filter chip in the Apparatus body. */
    .apparatus-filter-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 8px;
        padding: 2px 4px 2px 10px;
        background: var(--success, #28a745);
        color: #fff;
        border-radius: 12px;
        font-size: 11px;
        font-weight: 600;
        font-family: sans-serif;
    }
    .apparatus-filter-clear {
        appearance: none;
        background: transparent;
        border: none;
        color: #fff;
        font-size: 14px;
        line-height: 1;
        padding: 0 4px;
        cursor: pointer;
        opacity: 0.85;
    }
    .apparatus-filter-clear:hover { opacity: 1; }

    /* Translation panel: rich-text editor with edit/save toolbar. */
    .translation-body {
        font-family: sans-serif;
        font-size: 14px;
        color: var(--text1);
    }
    .translation-toolbar {
        display: flex;
        gap: 6px;
        align-items: center;
        padding: 6px 10px;
        border-bottom: 1px solid var(--background2);
        background: var(--background1);
        font-size: 12px;
        flex: 0 0 auto;
    }
    .translation-toolbar button {
        appearance: none;
        background: var(--background2);
        color: var(--text1);
        border: 1px solid var(--background2-dark);
        border-radius: 3px;
        padding: 3px 10px;
        font-size: 12px;
        cursor: pointer;
    }
    .translation-toolbar button:hover {
        border-color: var(--primary);
        color: var(--primary);
    }
    .translation-status {
        margin-left: auto;
        color: var(--text3);
        font-size: 11px;
    }
    .translation-editor {
        flex: 1;
        overflow-y: auto;
        padding: 12px 14px;
        outline: none;
        line-height: 1.55;
        direction: ltr;
        text-align: left;
    }
    .translation-editor.is-editing {
        background: var(--background1);
        box-shadow: inset 0 0 0 2px var(--primary-focus, var(--background2-dark));
    }
    .translation-editor p { margin: 0 0 0.6em; }
    .translation-editor .placeholder {
        color: var(--text3);
        font-style: italic;
    }

    /* Comments panel: scrollable list above a compose box. */
    .comments-body {
        font-family: sans-serif;
        font-size: 13px;
        color: var(--text1);
    }
    .comment-row {
        margin-bottom: 12px;
        padding-bottom: 10px;
        border-bottom: 1px solid var(--background2);
    }
    .comment-row:last-child { border-bottom: none; }
    .comment-meta {
        display: flex;
        align-items: baseline;
        gap: 8px;
        font-size: 11px;
        color: var(--text3);
        margin-bottom: 3px;
    }
    .comment-author { font-weight: 600; color: var(--text2); }
    .comment-time { flex: 1; }
    .comment-delete {
        appearance: none;
        background: transparent;
        border: none;
        color: var(--text3);
        font-size: 14px;
        line-height: 1;
        cursor: pointer;
        padding: 0 4px;
    }
    .comment-delete:hover { color: #e57373; }
    .comment-body { white-space: pre-wrap; }
    .comments-compose {
        display: flex;
        gap: 6px;
        padding: 8px 10px;
        border-top: 1px solid var(--background2);
        background: var(--background1);
        flex: 0 0 auto;
    }
    .comments-input {
        flex: 1;
        resize: vertical;
        min-height: 32px;
        padding: 4px 6px;
        background: var(--background2);
        color: var(--text1);
        border: 1px solid var(--background2-dark);
        border-radius: 3px;
        font-family: sans-serif;
        font-size: 13px;
    }
    .comments-input:focus {
        outline: none;
        border-color: var(--primary);
    }
    .comments-submit {
        appearance: none;
        background: var(--primary);
        color: var(--background1);
        border: none;
        border-radius: 3px;
        padding: 0 12px;
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
    }
    .comments-submit:hover { background: var(--primary-dark, var(--primary)); }

    /* Shrink the OSD navigator (mini-map) — the default 200x200 eats a
       big chunk of every IIIF panel. */
    .iiif-viewer .navigator {
        width: 100px !important;
        height: 100px !important;
    }
    .match-bar {
        position: relative;
        height: 14px;
        min-width: 100px;
        background: var(--background2);
        border-radius: 3px;
        overflow: hidden;
    }
    .match-bar-fill {
        position: absolute;
        top: 0; bottom: 0; left: 0;
        background: var(--success, #28a745);
    }
    .match-bar-label {
        position: relative;
        z-index: 1;
        display: block;
        padding: 0 6px;
        line-height: 14px;
        font-size: 10px;
        font-weight: 600;
        color: var(--text1);
        text-shadow: 0 0 2px var(--background1);
    }

    /* Hover-preview tooltip for IIIF token crops */
    .token-preview {
        position: fixed;
        z-index: 1000;
        background: var(--background1);
        border: 1px solid var(--background2-dark);
        border-radius: 4px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        padding: 4px;
        display: none;
        pointer-events: none;
        max-width: 400px;
    }
    .token-preview img {
        display: block;
        max-width: 380px;
        max-height: 180px;
    }
    /* "?" marker shown only when the token has no IIIF crop. */
    .token-preview.no-image::after {
        content: "?";
        display: flex;
        align-items: center;
        justify-content: center;
        width: 56px;
        height: 56px;
        font-size: 26px;
        font-family: sans-serif;
        color: var(--text3, #888);
    }
    .token-preview .preview-caption {
        font-family: sans-serif;
        font-size: 11px;
        color: var(--text2);
        margin-top: 2px;
        text-align: center;
        direction: ltr;
    }

    .apparatus-row .sigla {
        cursor: help;
    }
    .token {
        position: relative;
    }

    .translation-toolbar {
        display: flex;
        gap: 4px;
        padding: 6px 10px;
        border-bottom: 1px solid var(--background2);
        background: var(--background2);
        direction: ltr;
    }

    .translation-toolbar button {
        background: var(--background1);
        color: var(--text1);
        border: 1px solid var(--background2-dark);
        border-radius: 3px;
        padding: 3px 8px;
        font-size: 13px;
        cursor: pointer;
        font-family: sans-serif;
        min-width: 28px;
    }

    .translation-toolbar button:hover {
        background: var(--background2-dark);
    }

    .translation-toolbar button.is-active {
        background: var(--primary);
        color: var(--background1);
        border-color: var(--primary);
    }

    .translation-toolbar .sep {
        width: 1px;
        background: var(--background2-dark);
        margin: 2px 4px;
    }

    .translation-status {
        margin-left: auto;
        font-size: 12px;
        color: var(--text3);
        align-self: center;
    }

    .translation-meta {
        padding: 4px 12px;
        border-bottom: 1px solid var(--background2);
        background: var(--background1);
        font-size: 12px;
        color: var(--text2);
        font-family: sans-serif;
        direction: ltr;
        display: flex;
        gap: 12px;
        align-items: center;
    }

    .translation-meta .version-pill {
        display: inline-block;
        padding: 1px 6px;
        background: var(--background2);
        border-radius: 3px;
        font-size: 11px;
        color: var(--text2);
    }

    .translation-meta select {
        font-family: sans-serif;
        font-size: 12px;
        padding: 2px 6px;
        background: var(--background2);
        color: var(--text1);
        border: 1px solid var(--background2-dark);
        border-radius: 3px;
        max-width: 220px;
    }

    .translation-meta .meta-label {
        color: var(--text3);
    }

    .viewing-banner {
        padding: 6px 12px;
        background: var(--selected-background);
        border-bottom: 1px solid var(--background2-dark);
        font-size: 12px;
        color: var(--text1);
        font-family: sans-serif;
        display: none;
        gap: 8px;
        align-items: center;
        direction: ltr;
    }

    .viewing-banner button {
        background: var(--primary);
        color: var(--background1);
        border: none;
        border-radius: 3px;
        padding: 2px 8px;
        font-size: 12px;
        cursor: pointer;
    }

    .viewing-banner button.secondary {
        background: var(--background2);
        color: var(--text1);
        border: 1px solid var(--background2-dark);
    }

    #translation-editor {
        flex: 1;
        overflow-y: auto;
        padding: 18px;
        box-sizing: border-box;
        font-family: sans-serif;
        font-size: 15px;
        line-height: 1.6;
        color: var(--text1);
        direction: ltr;
        text-align: left;
        outline: none;
    }

    #translation-editor[contenteditable="true"]:focus {
        background: var(--background2-focus);
    }

    #translation-editor p {
        margin: 0 0 0.6em 0;
    }
    #translation-editor p:last-child {
        margin-bottom: 0;
    }

    #translation-editor h1,
    #translation-editor h2,
    #translation-editor h3 {
        margin: 1em 0 0.4em;
        font-weight: 600;
        color: var(--text1);
    }
    #translation-editor h1 { font-size: 1.6em; }
    #translation-editor h2 { font-size: 1.35em; }
    #translation-editor h3 { font-size: 1.15em; }

    #translation-editor blockquote {
        margin: 0.6em 0;
        padding: 4px 12px;
        border-left: 3px solid var(--background2-dark);
        color: var(--text2);
        font-style: italic;
    }

    #translation-editor a {
        color: var(--primary);
    }

    #translation-editor sup.footnote-marker {
        color: var(--primary);
        cursor: pointer;
        font-weight: 600;
        padding: 0 1px;
    }
    #translation-editor sup.footnote-marker:hover {
        text-decoration: underline;
    }

    #translation-editor .footnote-list {
        margin: 1.5em 0 0;
        padding-top: 0.6em;
        border-top: 1px solid var(--background2-dark);
        font-size: 0.85em;
        color: var(--text2);
    }
    #translation-editor .footnote-list ol {
        margin: 0;
        padding-left: 1.5em;
    }
    #translation-editor .footnote-list li {
        margin: 0.2em 0;
    }

    .translation-toolbar select {
        background: var(--background1);
        color: var(--text1);
        border: 1px solid var(--background2-dark);
        border-radius: 3px;
        padding: 3px 6px;
        font-size: 13px;
        font-family: sans-serif;
    }

    .panel {
        background: var(--background1);
        color: var(--text1);
        min-height: 0;
        overflow: hidden;
        position: relative;
    }

    .panel + .panel {
        border-right: 1px solid var(--background2);
    }

    .panel-header {
        /* Fixed height keeps the row identical for every panel — without it
           Chromium's native <select> bloats the transcription header to ~32px
           while button-only headers measure ~21px. With min-height:32px and
           vertical padding dropped, align-items:center centers buttons and
           the (now natively-sized) dropdown alike. */
        min-height: 32px;
        padding: 0 10px;
        border-bottom: 1px solid var(--background2);
        background: var(--background2);
        font-family: sans-serif;
        font-size: 13px;
        color: var(--text1);
        direction: ltr;
        display: flex;
        align-items: center;
        gap: 6px;
        flex: 0 0 auto;
    }
    .panel-header .panel-title {
        font-weight: 600;
        /* Shrink (and ellipsis-truncate) so source dropdowns don't push
           the close button out of a narrow column. The drag-handle's
           tooltip + title attribute keep the full label accessible. */
        flex: 0 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 140px;
    }
    .panel-header .panel-folio {
        color: var(--text2);
        font-size: 12px;
        /* Truncate long folio labels with an ellipsis instead of letting
           them push the close button out of the header. */
        max-width: 220px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        flex: 0 1 auto;
    }
    .panel-header .panel-spacer {
        flex: 1;
    }
    .panel-header button.hdr-btn {
        background: var(--background1);
        color: var(--text1);
        border: 1px solid var(--background2-dark);
        border-radius: 3px;
        padding: 2px 7px;
        font-size: 12px;
        cursor: pointer;
        line-height: 1.2;
    }
    .panel-header button.hdr-btn:hover {
        border-color: var(--primary);
        color: var(--primary);
    }
    .panel-header button.hdr-btn.close-btn {
        color: var(--text3);
    }
    .panel-header button.hdr-btn.close-btn:hover {
        color: #e57373;
        border-color: #e57373;
    }
    .panel-header .drag-handle {
        cursor: grab;
        color: var(--text3);
        padding: 0 2px;
        font-size: 14px;
        user-select: none;
    }
    .panel-header .drag-handle:active {
        cursor: grabbing;
    }
    .panel-header .variant-select,
    .panel-header .source-witness-select,
    .panel-header .source-surface-select {
        /* Native <select> enforces a minimum height in WebKit/Chromium
           regardless of CSS unless we strip its default appearance. With
           appearance:none we can pin the height to .hdr-btn's. The OS
           chevron disappears with that, so we paint a small ▾ via a
           background-image data URI on the right (4px right-padding so the
           label doesn't run into it). */
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        /* Match the panel-header background so dropdowns blend in instead
           of calling attention to themselves. */
        background: var(--background2)
            url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 8 5%27><path d=%27M0 0l4 5 4-5z%27 fill=%27%238a8a8a%27/></svg>")
            no-repeat right 5px center / 7px 5px;
        color: var(--text2);
        border: 1px solid var(--background2-dark);
        border-radius: 3px;
        height: 22px;
        padding: 0 16px 0 6px;
        font-size: 11px;
        line-height: 1;
        cursor: pointer;
        font-family: sans-serif;
        box-sizing: border-box;
    }
    .panel-header .variant-select:hover,
    .panel-header .source-witness-select:hover,
    .panel-header .source-surface-select:hover {
        border-color: var(--primary);
        color: var(--text1);
    }
    .panel-header .source-witness-select { max-width: 75px; }
    .panel-header .source-surface-select { max-width: 140px; min-width: 60px; }

    /* Folio prev/next icons — no button chrome, just an arrow glyph that
       brackets the witness+folio pair. Hidden when navigation in that
       direction isn't possible. */
    .panel-header .folio-prev,
    .panel-header .folio-next {
        appearance: none;
        background: transparent;
        border: none;
        padding: 0 2px;
        color: var(--text3);
        font-size: 16px;
        line-height: 1;
        cursor: pointer;
        font-family: sans-serif;
    }
    .panel-header .folio-prev:hover,
    .panel-header .folio-next:hover {
        color: var(--primary);
    }

    /* Highlight the currently-selected option inside the open dropdown.
       Browser support for styling <option> is uneven; where it works
       (Firefox, Chromium native popup) the active row stands out. */
    .panel-header .variant-select option:checked,
    .panel-header .source-witness-select option:checked,
    .panel-header .source-surface-select option:checked {
        background: var(--success, #28a745);
        color: #fff;
        font-weight: 600;
    }

    /* Link-group dropdown: same chrome as the other selects, plus a colour
       chip behind the letter so coupled panels are easy to spot. */
    .panel-header .link-group-select {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background: var(--background1)
            url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 8 5%27><path d=%27M0 0l4 5 4-5z%27 fill=%27%238a8a8a%27/></svg>")
            no-repeat right 4px center / 6px 4px;
        color: var(--text1);
        border: 1px solid var(--background2-dark);
        border-radius: 3px;
        height: 22px;
        width: 40px;
        padding: 0 12px 0 6px;
        font-size: 11px;
        line-height: 1;
        font-weight: 600;
        text-align: center;
        cursor: pointer;
        font-family: sans-serif;
        box-sizing: border-box;
    }
    .panel-header .link-group-select:hover { border-color: var(--primary); }
    /* Per-letter accent — distinct enough that two open IIIF panels with
       different groups don't look identical on hover. */
    .panel[data-link-group="A"] > .panel-header .link-group-select { background-color: #ffd166; color: #5a3c00; border-color: #d9a93f; }
    .panel[data-link-group="B"] > .panel-header .link-group-select { background-color: #06d6a0; color: #073d2b; border-color: #03a37a; }
    .panel[data-link-group="C"] > .panel-header .link-group-select { background-color: #4cc9f0; color: #0b384a; border-color: #2d9bbe; }
    .panel[data-link-group="D"] > .panel-header .link-group-select { background-color: #f72585; color: #ffe9f3; border-color: #c01b6c; }
    .panel[data-link-group="E"] > .panel-header .link-group-select { background-color: #b07cf3; color: #2c0a4d; border-color: #8e58cb; }
    .panel[data-link-group="F"] > .panel-header .link-group-select { background-color: #ffb86b; color: #5a300a; border-color: #d68f4a; }

    /* Scribal-markup highlighting inside the transcription body (only in the
       raw "text" view; norm1/norm2 display a plain string). */
    .token .markup-del {
        text-decoration: line-through;
        text-decoration-color: #e57373;
        color: #c65c5c;
    }
    .token .markup-ins {
        color: #3ea56c;
        border-bottom: 1px solid #3ea56c;
    }
    /* Tokens without a reading in the currently-selected scribal layer are
       hidden outright rather than falling back to the raw text. */
    .token.variant-empty {
        display: none;
    }
    /* Variant indicator (˚) and editorial half-brackets (⸢…⸣) for
       multi-token alignment spans. Both live on the ::before/::after
       pseudo-elements of the token; we combine them into a single content
       string per pseudo so a token that's both span-end and variant-bearing
       renders the bracket immediately followed by the marker. */

    /* Opening half-bracket on the first token of a multi-token alignment. */
    .token[data-span-start="true"]::before {
        content: "⸢";
        color: var(--alert, #e84f4f);
        font-weight: 600;
        margin-inline-end: 1px;
    }
    /* Variant marker only — the common case. */
    .token[data-has-variant="true"]:not([data-span-end="true"])::after {
        content: "˚";
        color: var(--alert, #e84f4f);
        font-size: 0.85em;
        font-weight: 600;
        margin-inline-start: 1px;
        vertical-align: super;
        line-height: 0;
    }
    /* Closing half-bracket only (multi-token span without variant). */
    .token:not([data-has-variant="true"])[data-span-end="true"]::after {
        content: "⸣";
        color: var(--alert, #e84f4f);
        font-weight: 600;
        margin-inline-start: 1px;
    }
    /* Closing half-bracket + variant marker on the same token. */
    .token[data-has-variant="true"][data-span-end="true"]::after {
        content: "⸣˚";
        color: var(--alert, #e84f4f);
        font-weight: 600;
        margin-inline-start: 1px;
    }
    /* Toggle: when the host carries .no-variant-markers, suppress all
       editorial pseudo-elements without losing the underlying data attrs. */
    .text-panel.no-variant-markers .token[data-span-start="true"]::before,
    .text-panel.no-variant-markers .token[data-has-variant="true"]::after,
    .text-panel.no-variant-markers .token[data-span-end="true"]::after {
        content: none;
    }

    /* Add Panel dropdown */
    .add-panel-wrapper {
        position: relative;
    }
    /* Pill-shaped primary action. The plus glyph rides just above the
       baseline for optical centering against the label cap height. */
    #add-panel-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 16px;
        border-radius: 999px;
        background: var(--primary);
        color: var(--button-text);
        border: 1px solid var(--primary);
        font-family: inherit;
        font-size: 13px;
        font-weight: 500;
        line-height: 1;
        cursor: pointer;
        transition: background 0.15s ease, box-shadow 0.15s ease,
                    transform 0.05s ease;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
    }
    #add-panel-btn:hover {
        background: var(--primary-dark, var(--primary));
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    }
    #add-panel-btn:active {
        transform: translateY(1px);
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
    }
    #add-panel-btn:focus-visible {
        outline: 2px solid var(--primary);
        outline-offset: 2px;
    }
    #add-panel-btn .plus {
        font-size: 16px;
        font-weight: 600;
        line-height: 1;
        translate: 0 -0.5px;
    }
    .add-panel-menu {
        position: absolute;
        top: 100%;
        right: 0;
        margin-top: 4px;
        background: var(--background1);
        border: 1px solid var(--background2-dark);
        border-radius: 4px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.25);
        /* Above the OSD viewer chrome (.osd-controls is z-index:100) so the
           dropdown items aren't obscured by IIIF panels sitting under the
           topbar. */
        z-index: 1100;
        min-width: 180px;
        display: none;
        font-size: 13px;
    }
    .add-panel-menu.open { display: block; }
    .add-panel-menu button {
        display: block;
        width: 100%;
        text-align: left;
        padding: 8px 12px;
        background: transparent;
        border: none;
        color: var(--text1);
        cursor: pointer;
        font-size: 13px;
    }
    .add-panel-menu button:hover {
        background: var(--background2);
        color: var(--primary);
    }

    #viewer {
        width: 100%;
        height: calc(100% - 42px);
        min-height: 500px;
        background: var(--background);
        position: relative;
    }

    .osd-controls {
        position: absolute;
        top: 8px;
        left: 10px;
        z-index: 100;
        display: flex;
        gap: 4px;
    }

    .osd-controls button {
        width: 32px;
        height: 32px;
        border: 1px solid var(--background2-dark);
        border-radius: 4px;
        background: var(--background1);
        font-size: 18px;
        line-height: 1;
        cursor: pointer;
        color: var(--text1);
        padding: 0;
    }

    .osd-controls button:hover {
        background: var(--background2);
        border-color: var(--text3);
    }
    .osd-controls button.active {
        background: #1976d2;
        border-color: #1976d2;
        color: #fff;
    }
    /* Inline-SVG OSD buttons (Lines/segmentation icon, etc.) — center the
       glyph and size the artwork. The Lines icon comes straight from
       eScriptorium's SegmentationToolbar.LinesIcon. */
    .osd-controls button.osd-seg-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .osd-controls button.osd-seg-btn svg {
        width: 18px;
        height: 18px;
    }

    /* Segmentation overlay (regions + line baselines + line numbers).
       Drawn as a single SVG positioned over the IIIF image via OSD's
       addOverlay(); the SVG's viewBox matches the image so coordinates
       are written in image-pixel space directly. */
    .seg-overlay {
        width: 100%;
        height: 100%;
        pointer-events: none;
    }
    .seg-overlay .seg-region {
        fill: rgba(25, 118, 210, 0.06);
        stroke: rgba(25, 118, 210, 0.85);
        stroke-width: 4;
        vector-effect: non-scaling-stroke;
    }
    .seg-overlay .seg-mask {
        fill: none;
        stroke: rgba(220, 50, 50, 0.45);
        stroke-width: 2;
        stroke-dasharray: 6 4;
        vector-effect: non-scaling-stroke;
    }
    .seg-overlay .seg-baseline {
        fill: none;
        stroke: #d32f2f;
        stroke-width: 3;
        vector-effect: non-scaling-stroke;
    }
    .seg-overlay .seg-lineno {
        font-family: sans-serif;
        font-weight: 600;
        font-size: 32px;
        fill: #d32f2f;
        paint-order: stroke;
        stroke: #fff;
        stroke-width: 4;
        text-anchor: start;
        dominant-baseline: middle;
    }

    /* Diplomatic-view panel: a clean SVG render of the transcription
       laid out at the manuscript baseline coordinates (no image),
       modelled after eScriptorium's VisuPanel ("transcription-panel").
       Each line gets a polygon mask outline, an invisible baseline
       path, and a <textPath> that draws the line content along that
       baseline so slanted/curved scripts follow their natural curve. */
    .diplo-host {
        background: #fff;
        color: #111;
        overflow: hidden;
    }
    .diplo-stage {
        flex: 1;
        min-height: 0;
        overflow: auto;
        position: relative;
        cursor: grab;
    }
    .diplo-stage.grabbing { cursor: grabbing; }
    .diplo-canvas {
        position: absolute;
        top: 0;
        left: 0;
        transform-origin: 0 0;
    }
    .diplo-svg {
        display: block;
    }
    .diplo-svg .diplo-text {
        font-family: "SBL Hebrew", "Ezra SIL", serif;
        fill: #111;
    }

    /* Rectified view: each manuscript line is laid down on a clean
       canonical horizontal grid (rotation/scale removed). The host
       reuses the diplo-stage scroll/transform pattern. Strips show
       the line content rendered at uniform height so cross-line and
       cross-witness comparison is straightforward. */
    .rect-host {
        background: #fff;
        color: #111;
        overflow: hidden;
    }
    .rect-stage {
        flex: 1;
        min-height: 0;
        overflow: auto;
        position: relative;
        cursor: grab;
    }
    .rect-stage.grabbing { cursor: grabbing; }
    .rect-canvas {
        position: absolute;
        top: 0;
        left: 0;
        transform-origin: 0 0;
    }
    .rect-svg {
        display: block;
    }
    .rect-svg .rect-strip {
        fill: rgba(0, 0, 0, 0.03);
        stroke: rgba(0, 0, 0, 0.18);
        stroke-width: 1;
        vector-effect: non-scaling-stroke;
    }
    .rect-svg .rect-baseline {
        stroke: rgba(0, 0, 0, 0.20);
        stroke-width: 1;
        stroke-dasharray: 4 4;
        vector-effect: non-scaling-stroke;
    }
    .rect-svg .rect-text {
        font-family: "SBL Hebrew", "Ezra SIL", serif;
        fill: #111;
    }

    .rect-svg .rect-letters {
        font-family: "SBL Hebrew", "Ezra SIL", serif;
        fill: #111;
        direction: rtl;
    }
    .rect-svg .rect-lineno {
        font-family: sans-serif;
        font-size: 11px;
        fill: rgba(0, 0, 0, 0.45);
    }

    /* Close button shown only while OSD is in fullscreen mode. */
    .osd-fullscreen-close {
        position: fixed;
        top: 12px;
        right: 12px;
        z-index: 2147483647;
        width: 40px;
        height: 40px;
        border: 1px solid var(--background2-dark);
        border-radius: 50%;
        background: var(--background1);
        color: var(--text1);
        font-size: 20px;
        line-height: 1;
        cursor: pointer;
        padding: 0;
        display: none;
        box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    }
    .osd-fullscreen-close:hover {
        background: var(--background2);
        border-color: var(--primary);
        color: var(--primary);
    }
    body.osd-is-fullpage .osd-fullscreen-close {
        display: block;
    }

    #text-panel,
    .text-panel {
        flex: 1;
        overflow-y: scroll;
        padding: 18px;
        box-sizing: border-box;
        color: var(--text1);
    }

    .bottom-tabs {
        display: flex;
        background: var(--background2);
        border-top: 1px solid var(--background2-dark);
        border-bottom: 1px solid var(--background2-dark);
        padding: 0 8px;
        gap: 0;
        font-family: sans-serif;
        font-size: 13px;
    }

    .bottom-tabs button {
        padding: 6px 14px;
        border: none;
        background: transparent;
        cursor: pointer;
        color: var(--text2);
        border-bottom: 2px solid transparent;
        font-size: 13px;
    }

    .bottom-tabs button:hover {
        color: var(--text1);
    }

    .bottom-tabs button.active {
        color: var(--text1);
        border-bottom-color: var(--primary);
        font-weight: bold;
    }

    .tab-content {
        height: 180px;
        overflow-y: auto;
        padding: 10px 16px;
        box-sizing: border-box;
        font-family: sans-serif;
        font-size: 14px;
        direction: ltr;
        text-align: left;
        background: var(--background1);
        color: var(--text1);
    }

    .tab-content[hidden] {
        display: none;
    }

    .tab-content .variant-row {
        display: flex;
        gap: 8px;
        padding: 3px 0;
        direction: rtl;
        color: var(--text1);
    }

    .tab-content .variant-row.base-row {
        border-bottom: 1px solid var(--background2);
        padding-bottom: 6px;
        margin-bottom: 4px;
        font-weight: bold;
    }

    .tab-content .variant-siglum {
        font-weight: bold;
        min-width: 60px;
        text-align: left;
        direction: ltr;
        color: var(--text2);
        flex-shrink: 0;
    }

    .tab-content .variant-text {
        flex: 1;
        color: var(--text1);
    }

    .tab-content .placeholder {
        color: var(--text3);
        font-style: italic;
    }

    .citation-row {
        padding: 6px 8px;
        direction: ltr;
        border-radius: 4px;
        cursor: pointer;
        border: 1px solid transparent;
    }

    .citation-row:hover {
        background: var(--background2);
        border-color: var(--background2-dark);
    }

    .citation-row.active {
        background: var(--selected-background);
        border-color: var(--primary);
    }

    .citation-row a {
        color: var(--primary);
        text-decoration: none;
        font-weight: 600;
    }

    .citation-row a:hover {
        text-decoration: underline;
        color: var(--primary-dark);
    }

    .citation-snippet {
        color: var(--text2);
        direction: rtl;
        display: block;
        margin-top: 2px;
        font-family: "SBL Hebrew", "Ezra SIL", serif;
        font-size: 14px;
    }

    .citation-text {
        color: var(--text2);
        direction: rtl;
        display: inline;
    }

    .citation-no-tokens {
        color: var(--text3);
        font-style: italic;
        font-size: 11px;
    }

    /* Tokens linked to a citation get a subtle marker so users notice them. */
    .token.has-citation {
        background: rgba(255, 200, 100, 0.2);
        border-radius: 3px;
    }
    .token.citation-active {
        background: rgba(255, 165, 0, 0.55);
        outline: 1px solid var(--primary);
    }
    .token.alignment-active {
        background: var(--primary-focus);
        outline: 1px solid var(--primary);
    }

    /* Alignment row list, mirrors the citation-row styling */
    .alignment-row {
        padding: 6px 8px;
        direction: ltr;
        border-radius: 4px;
        cursor: pointer;
        border: 1px solid transparent;
        margin-bottom: 2px;
    }
    .alignment-row:hover {
        background: var(--background2);
        border-color: var(--background2-dark);
    }
    .alignment-row.active {
        background: var(--selected-background);
        border-color: var(--primary);
    }
    .alignment-row .align-header {
        display: flex;
        gap: 10px;
        align-items: baseline;
        margin-bottom: 2px;
    }
    /* Reader entry to the compare page (#58): per-unit action link in
       the alignment/apparatus row headers. */
    .compare-link {
        margin-inline-start: auto;
        color: var(--text3, #888);
        text-decoration: none;
        font-size: 12px;
        padding: 0 4px;
    }
    .compare-link:hover { color: var(--primary, #e53935); }
    .alignment-row .align-order {
        font-family: monospace;
        color: var(--text3);
        font-size: 11px;
        min-width: 60px;
    }
    .alignment-row .align-versif {
        font-family: monospace;
        color: var(--text2);
        font-size: 11px;
    }
    .alignment-row .align-base {
        font-family: "SBL Hebrew", "Ezra SIL", serif;
        font-size: 15px;
        direction: rtl;
        color: var(--text1);
        font-weight: 600;
        flex: 1;
        text-align: right;
    }
    .alignment-row .align-variants {
        display: flex;
        flex-wrap: wrap;
        gap: 6px 12px;
        margin-top: 2px;
        font-size: 12px;
    }
    .alignment-row .align-variant {
        display: inline-flex;
        gap: 4px;
        align-items: baseline;
    }
    .alignment-row .align-variant .siglum {
        color: var(--text3);
        font-weight: 600;
        font-family: sans-serif;
    }
    .alignment-row .align-variant .text {
        color: var(--text2);
        font-family: "SBL Hebrew", "Ezra SIL", serif;
        direction: rtl;
    }
    .alignment-row .align-variant.variant .text {
        color: var(--primary);
    }
    .token.pericope-active {
        outline: 1px dashed var(--primary);
        background: rgba(40, 166, 150, 0.18);
    }

    .pericope-bar {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        align-items: center;
        padding: 6px 12px;
        background: var(--background2);
        border-bottom: 1px solid var(--background2-dark);
        direction: ltr;
        font-family: sans-serif;
        font-size: 12px;
    }

    .pericope-bar .label {
        color: var(--text3);
        margin-right: 4px;
    }

    .pericope-chip {
        display: inline-flex;
        gap: 6px;
        align-items: center;
        padding: 3px 8px;
        background: var(--background1);
        border: 1px solid var(--background2-dark);
        border-radius: 12px;
        cursor: pointer;
        color: var(--text1);
    }
    .pericope-chip:hover {
        border-color: var(--primary);
    }
    .pericope-chip.active {
        background: var(--primary);
        color: var(--background1);
        border-color: var(--primary);
    }
    .pericope-chip .count {
        opacity: 0.7;
        font-size: 11px;
    }

    .token.versification-active {
        outline: 1px dashed var(--secondary);
        background: rgba(40, 110, 200, 0.18);
    }
    .versification-summary {
        padding: 8px 12px;
        background: var(--background2);
        border-bottom: 1px solid var(--background2-dark);
        font-family: sans-serif;
        font-size: 12px;
        color: var(--text1);
    }
    .versification-range-label {
        color: var(--text3);
        margin-right: 4px;
    }
    .versification-arrow {
        color: var(--text3);
    }
    .versification-meta {
        color: var(--text3);
        margin-left: 6px;
    }
    .versification-legend {
        font-size: 10px;
        color: var(--text3);
        margin-top: 3px;
    }
    .versification-list {
        padding: 6px 8px;
    }
    .versification-group {
        margin-bottom: 10px;
    }
    .versification-group-head {
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--text3);
        padding: 4px 4px 6px;
        border-bottom: 1px solid var(--background2-dark);
        margin-bottom: 4px;
    }
    .versification-group-items {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
    }
    .versification-row {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 3px 8px;
        background: var(--background1);
        border: 1px solid var(--background2-dark);
        border-radius: 12px;
        cursor: pointer;
        color: var(--text1);
        font-family: sans-serif;
        font-size: 12px;
    }
    .versification-row:hover {
        border-color: var(--secondary);
    }
    .versification-row.active {
        background: var(--secondary);
        color: var(--background1);
        border-color: var(--secondary);
    }
    .versification-key {
        font-variant-numeric: tabular-nums;
    }
    .versification-count {
        opacity: 0.7;
        font-size: 11px;
    }

    /* Versification-Nav panel: cascading megillah/parasha/pereq/davar
       selectors that broadcast a source change to link-group siblings
       (IIIF/transcription/etc.) when the user picks a davar. */
    .versnav-body {
        padding: 10px 12px;
        font-family: sans-serif;
        font-size: 13px;
        color: var(--text1);
        display: flex;
        flex-direction: column;
        height: 100%;
        box-sizing: border-box;
    }
    /* Tree of nested <details> elements: megillah → parasha → davar.
       Each <summary> is the row label; pereq leaves are buttons that
       drive the witness list below the tree. */
    .versnav-tree {
        flex: 1;
        min-height: 120px;
        max-height: 60%;
        overflow-y: auto;
        border: 1px solid var(--background2-dark);
        border-radius: 4px;
        padding: 6px 8px;
        background: var(--background2);
    }
    .versnav-tree details {
        margin: 1px 0;
    }
    .versnav-tree summary {
        cursor: pointer;
        list-style: none;
        padding: 2px 4px;
        border-radius: 3px;
        user-select: none;
    }
    .versnav-tree summary::-webkit-details-marker { display: none; }
    .versnav-tree summary::before {
        content: "▸";
        display: inline-block;
        width: 1em;
        color: var(--text3);
        transition: transform 0.1s;
    }
    .versnav-tree details[open] > summary::before {
        transform: rotate(90deg);
    }
    .versnav-tree summary:hover {
        background: var(--background1);
    }
    .versnav-tree details details {
        margin-inline-start: 14px;
    }
    .versnav-tree .versnav-pereq-list {
        margin-inline-start: calc(14px + 1em);
        margin-top: 2px;
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
    }
    .versnav-tree .versnav-pereq-btn {
        background: var(--background1);
        color: var(--text1);
        border: 1px solid var(--background2-dark);
        border-radius: 3px;
        padding: 2px 8px;
        font-size: 12px;
        cursor: pointer;
        font-family: monospace;
    }
    .versnav-tree .versnav-pereq-btn:hover {
        border-color: var(--primary);
    }
    .versnav-tree .versnav-pereq-btn.active {
        background: var(--primary);
        color: var(--background1);
        border-color: var(--primary);
    }
    .versnav-status {
        margin-top: 8px;
        font-size: 12px;
        color: var(--text3);
        font-style: italic;
    }
    .versnav-status .versnav-target {
        color: var(--primary);
        font-style: normal;
        font-weight: 600;
    }
    .versnav-witnesses-head {
        margin-top: 12px;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--text3);
    }
    .versnav-witnesses {
        margin-top: 6px;
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }
    .versnav-witness-chip {
        display: inline-flex;
        align-items: baseline;
        gap: 6px;
        padding: 4px 10px;
        background: var(--background1);
        color: var(--text1);
        border: 1px solid var(--background2-dark);
        border-radius: 12px;
        cursor: pointer;
        font-size: 13px;
        max-width: 240px;
        min-width: 0;
    }
    .versnav-witness-chip:hover {
        border-color: var(--primary);
    }
    /* Truncate the folio label with an ellipsis when it's too long
       (Genizah filenames like "495404_L_St_Petersburg_…_L2F0B0S1"
       would otherwise blow up the chip width). The siglum and group
       chips don't shrink — only the folio label takes the cut. */
    .versnav-witness-chip .versnav-chip-folio {
        color: var(--text3);
        font-size: 11px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
        flex: 1 1 auto;
    }
    .versnav-witness-chip .versnav-chip-siglum,
    .versnav-witness-chip .versnav-chip-group {
        flex: 0 0 auto;
    }
    .versnav-witness-chip .versnav-chip-group {
        color: var(--primary);
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .line {
        margin-bottom: 8px;
        font-size: 22px;
        line-height: 1.5;
        direction: rtl;
        unicode-bidi: plaintext;
        color: var(--text1);
        word-spacing: -3px;
    }

    /* Line number gutter — small ltr counter pinned to the physical right
       edge of each line (which lines up with the rtl text's natural start).
       Hidden when the panel is in `.no-linenos` mode. */
    .text-panel:not(.no-linenos) .line {
        position: relative;
        padding-right: 1.6em;
    }
    .text-panel:not(.no-linenos) .line::before {
        content: attr(data-line-no);
        position: absolute;
        right: 0;
        top: 0.35em;
        direction: ltr;
        font-family: sans-serif;
        font-size: 11px;
        color: var(--text3);
        width: 1.4em;
        text-align: right;
        user-select: none;
    }

    /* Auto-generated structural heading rows inserted by
       markStructuralHeadings as siblings of `.line`. Each parasha / pereq /
       davar transition gets its own dedicated row above the affected
       transcription line. Green = parasha, red = pereq, smaller italic red
       = versification (megillah.parasha.pereq.davar). */
    .heading-line {
        display: block;
        font-family: sans-serif;
        font-weight: 600;
        direction: ltr;
        text-align: right;
        margin: 8px 0 2px;
        padding: 2px 6px;
        border-radius: 3px;
    }
    .heading-line.parasha {
        color: #009900;
        font-size: 16px;
        border-right: 3px solid #009900;
        background: rgba(0, 153, 0, 0.05);
    }
    .heading-line.pereq {
        color: #c0392b;
        font-size: 14px;
        border-right: 3px solid #c0392b;
        background: rgba(192, 57, 43, 0.05);
    }
    .heading-line.versification {
        color: #c0392b;
        font-size: 12px;
        font-weight: 500;
        font-style: italic;
        margin: 4px 0 0;
        padding: 0 6px;
        background: transparent;
    }

    .text-panel.no-headings .heading-line { display: none; }

    .transcription-toolbar {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 4px 8px;
        background: var(--background2);
        border-bottom: 1px solid var(--background2-dark);
    }
    .transcription-toolbar button {
        background: var(--background1);
        border: 1px solid var(--background2-dark);
        color: var(--text2);
        font-size: 13px;
        line-height: 1;
        padding: 3px 7px;
        border-radius: 3px;
        cursor: pointer;
    }
    .transcription-toolbar button.active {
        background: var(--primary);
        color: var(--background1);
        border-color: var(--primary);
    }
    .transcription-toolbar button:hover {
        border-color: var(--primary);
    }
    /* Multi-column manuscript layout. The host becomes a grid; rtl
       direction puts the first column (which carries the rightmost
       lines) on the right, matching how a Hebrew bicolumnar codex
       reads. Each .text-column is an independent vertical stack of
       lines + structural heading rows. */
    .text-panel.multi-column {
        display: grid;
        grid-template-columns: repeat(var(--cols, 1), 1fr);
        gap: 18px;
        direction: rtl;
    }
    .text-panel.multi-column .text-column {
        min-width: 0;
        border-inline-start: 1px solid var(--background2-dark);
        padding-inline-start: 12px;
    }
    .text-panel.multi-column .text-column:first-child {
        border-inline-start: none;
        padding-inline-start: 0;
    }

    .token {
        cursor: pointer;
        padding: 0 2px;
        border-radius: 3px;
        display: inline;
        color: var(--text1);
    }

    .token:hover {
        background: var(--primary-focus);
    }

    .token.active {
        background: var(--primary);
        color: var(--background1);
    }

    .token.has-alignment {
        border-bottom: 2px dotted var(--text3);
    }

    .status,
    .end-marker,
    .error-marker {
        font-family: sans-serif;
        direction: ltr;
        text-align: left;
        font-size: 13px;
        color: var(--text2);
        padding: 8px 0;
    }

    .error-marker {
        color: #e57373;
    }

    /* Translation textarea matches theme */
    #translation-input {
        width: 100%;
        box-sizing: border-box;
        font-size: 14px;
        padding: 8px;
        border: 1px solid var(--background2-dark);
        border-radius: 4px;
        resize: vertical;
        background: var(--background2);
        color: var(--text1);
    }

    #translation-input:focus {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 2px var(--primary-focus);
    }

    .ov-host { display:flex; flex-direction:column; min-height:0; height:100%; background:#fff; color:#111; }
    .ov-toolbar { display:flex; align-items:center; gap:8px; padding:4px 8px; }
    .ov-unit-label { font-size:12px; opacity:0.7; }
    .ov-stage-wrap { flex:1; min-height:0; overflow:auto; }
    .ov-stage { position:relative; overflow:hidden; width:100%; height:100%; cursor:grab; }
    .ov-stage.grabbing { cursor:grabbing; }
    .ov-canvas { position:absolute; left:0; top:0; transform-origin:top left; }
    .ov-canvas .ov-layer { position:absolute; left:0; top:0; transform-origin:top left; pointer-events:none; }
    .ov-controls { display:flex; flex-wrap:wrap; gap:12px; padding:6px 8px; border-top:1px solid rgba(0,0,0,0.1); max-height:30%; overflow:auto; }
    .ov-ctrl-row { display:flex; align-items:center; gap:6px; font-size:12px; }
    .ov-ctrl-row input[type=range] { width:90px; }

    .lc-host { display:flex; flex-direction:column; min-height:0; height:100%; background:#fff; color:#111; }
    .lc-toolbar { padding:4px 8px; font-size:12px; opacity:0.75; }
    .lc-rows { flex:1; min-height:0; overflow:auto; display:flex; flex-direction:column; gap:8px; padding:6px 8px; }
    .lc-row { display:flex; flex-direction:column; gap:2px; }
    .lc-row .lc-sig { font-size:11px; color:#444; }
    .lc-strip-wrap { overflow-x:auto; }
    .lc-row img { height:64px; display:block; max-width:none; }

    #share-btn {
        margin-left: 8px;
        background: none;
        border: none;
        padding: 0 4px;
        cursor: pointer;
        color: inherit;
        font-size: 1.1rem;
        line-height: 1;
    }

    .to-host { display:flex; flex-direction:column; min-height:0; height:100%; background:#fff; color:#111; }
    .to-toolbar { display:flex; align-items:center; gap:8px; padding:4px 8px; }
    .to-label { font-size:12px; opacity:0.75; }
    .to-stage-wrap { flex:1; min-height:0; overflow:auto; display:flex; align-items:flex-start; justify-content:center; padding:8px; }
    .to-stage { position:relative; overflow:hidden; }
    .to-stage .to-layer { position:absolute; left:0; top:0; width:100%; height:100%; object-fit:fill; pointer-events:none; }
    .to-opacities { display:flex; flex-wrap:wrap; gap:10px; padding:6px 8px; border-top:1px solid rgba(0,0,0,0.1); }
    .to-op-row { display:flex; align-items:center; gap:6px; font-size:12px; }

.fg-group { border-bottom: 1px solid var(--border, #444); padding: 8px 10px; }
.fg-group-title { font: 600 13px sans-serif; color: var(--text1); margin-bottom: 6px; }
.fg-frag { margin: 4px 0 8px; }
.fg-frag-shelf { font: 12px monospace; color: var(--text2, #aaa); margin-bottom: 3px; }
.fg-thumbs { display: flex; flex-wrap: wrap; gap: 4px; }
.fg-thumb { height: 90px; width: auto; border: 1px solid var(--border, #444); cursor: pointer; }
.fg-thumb:hover { outline: 2px solid #e53935; }

.jg-card { border-bottom: 1px solid var(--border, #444); padding: 8px 10px; }
.jg-head { font: 600 12px monospace; color: var(--text2, #aaa); margin-bottom: 6px; }
.jg-pair { display: flex; gap: 10px; }
.jg-cell { display: flex; flex-direction: column; align-items: center; }
.jg-thumbwrap { position: relative; cursor: pointer; }
.jg-thumb { width: 160px; height: auto; border: 1px solid var(--border, #444); display: block; }
.jg-arc-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.jg-arc { fill: none; stroke: #e53935; stroke-width: 6; }
.jg-caption { font: 11px monospace; color: var(--text2, #aaa); margin-top: 2px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jg-thumbwrap:hover .jg-thumb { outline: 2px solid #e53935; }

.jv-stage { position: absolute; inset: 0; overflow: hidden; cursor: grab; }
.jv-stage.grabbing { cursor: grabbing; }
.jv-canvas { transform-origin: 0 0; }
.jv-svg { display: block; }
.jv-band { fill: rgba(229, 57, 53, 0.10); stroke: #e53935; stroke-dasharray: 14 10; }
.jv-band-label { fill: #e53935; font-family: sans-serif; font-weight: 600; text-anchor: middle; dominant-baseline: middle; }
.jv-badge { position: absolute; top: 6px; right: 8px; background: #e53935; color: #fff; font: 600 11px sans-serif; padding: 2px 8px; border-radius: 3px; z-index: 2; }
.jg-assemble { margin-left: 8px; }

.joinview-body { display: flex; flex-direction: column; }
.jv-stage-wrap { position: relative; flex: 1; min-height: 0; }
.jv-lower { max-height: 40%; overflow-y: auto; border-top: 1px solid var(--border, #444); padding: 6px 10px; }
.jv-legend { font: 11px sans-serif; color: var(--text2, #999); margin-bottom: 6px; display: flex; gap: 14px; flex-wrap: wrap; }
.jv-legend-item { display: inline-flex; align-items: center; gap: 5px; }
.jv-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.jv-side-a { background: #5da9ff; }
.jv-side-b { background: #ffab40; }
.jv-text { direction: rtl; text-align: right; font-size: 15px; color: var(--text1); }
.jv-line { margin: 2px 0; }
.jv-line.jv-joined { border-right: 2px solid var(--border, #555); padding-right: 6px; }
.jv-tok-a { color: #5da9ff; }
.jv-tok-b { color: #ffab40; }
.jv-gap { color: var(--text2, #999); font-style: italic; }

/* Hover-driven token <-> image interaction (issue #46) */
.token.hover {
    background: var(--primary-focus);
}

#hover-transcription {
    position: fixed;
    z-index: 1000;
    direction: rtl;
    background: var(--background1, #fff);
    color: var(--text1, #222);
    border: 1px solid #999;
    padding: 2px 8px;
    font-size: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    pointer-events: none;
    display: none;
    max-width: 400px;
}

/* Transmogrified twin panel (issue #61) */
.tm-host { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.tm-toolbar {
    display: flex; gap: 10px; align-items: center;
    padding: 4px 8px; font-size: 12px;
}
.tm-toolbar .tm-status { color: var(--text3, #888); }
.tm-stage {
    flex: 1; min-height: 0; position: relative; overflow: hidden;
    background: var(--background, #f4f1ea); cursor: grab;
}
.tm-stage:active { cursor: grabbing; }
.tm-canvas { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.tm-slot {
    position: absolute; border: 1px dashed rgba(150, 130, 90, 0.35);
    pointer-events: none;
}
/* Blank placeholder line (witness lacks the whole master line):
   the master's text shows muted inside the dashed box. */
.tm-slot-text {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%; overflow: hidden;
    color: #8a8a8a; font-size: 1rem; direction: rtl;
}
.tm-run { position: absolute; overflow: hidden; }
.tm-run-img {
    position: absolute; max-width: none; user-select: none;
    transform-origin: center;
}
/* Chips, missing-unit boxes and blank slots share one unified look:
   muted grey text in the slot guide's dashed frame. */
.tm-chip {
    position: absolute; display: flex; align-items: center;
    justify-content: center;
    border: 1px dashed rgba(150, 130, 90, 0.35);
    color: #8a8a8a; font-size: 1rem;
    background: transparent; overflow: hidden;
    direction: rtl;
}
/* Missing master units (.tm-missing) share the unified chip style;
   the class stays for semantics (transcript filtering). */
/* Imitated line filler (#79) / versification mark (#80): decoration,
   not a lacuna — fainter. */
.tm-chip.tm-filler,
.tm-chip.tm-mark {
    border: 1px dotted #b5b5b5;
    background: transparent;
    color: #a5a5a5;
    font-style: italic;
}
.tm-chip.tm-mark { border: none; }
/* Paratext line (margin/interlinear imitation, #78). */
.tm-slot.tm-slot-paratext {
    border-color: rgba(120, 140, 190, 0.45);
}

.tm-controls {
    position: absolute; top: 6px; left: 6px; z-index: 5;
    display: flex; gap: 4px;
}
.tm-run.tm-active, .tm-chip.tm-active {
    outline: 3px solid #e53935;
    outline-offset: 1px;
}
.tm-run { cursor: pointer; }
.tm-chip { cursor: pointer; }

.tm-panes { position: absolute; inset: 0; display: flex; }
.tm-pane { position: relative; flex: 1; min-width: 0; overflow: hidden; }
.tm-pane-master {
    border-right: 1px solid rgba(0, 0, 0, 0.15);
    display: none;
}
.tm-host.tm-master-on .tm-pane-master { display: block; }
.tm-pane-virtual:not(:last-child) {
    border-right: 1px solid rgba(0, 0, 0, 0.1);
}
.tm-pane-label {
    position: absolute; top: 4px; right: 6px; z-index: 4;
    font-size: 11px; padding: 0 4px; border-radius: 3px;
    background: rgba(255, 255, 255, 0.75); color: #333;
    pointer-events: none; direction: ltr;
}
/* Empty-pane coverage hint: folios of the master where the selected
   witness has aligned content, as jump buttons (#66). */
.tm-coverage {
    position: absolute; top: 26px; right: 6px; z-index: 4;
    max-height: 55%; max-width: 46%; overflow-y: auto;
    background: rgba(255, 255, 255, 0.9); border-radius: 4px;
    padding: 4px 6px; font-size: 11px; direction: ltr;
}
.tm-coverage-head { font-weight: 600; margin-bottom: 2px; color: #555; }
.tm-coverage-folio {
    display: inline-block; margin: 1px 2px; padding: 0 5px;
    border: 1px solid #bbb; border-radius: 8px; background: #fff;
    cursor: pointer; font-size: 11px; color: #333;
}
.tm-coverage-folio:hover { background: #eee; }
.tm-witness-chip {
    display: inline-flex; align-items: center; gap: 3px;
    border: 1px solid var(--background2-dark, #ccc);
    border-radius: 10px; padding: 0 6px; margin-inline-end: 4px;
    font-size: 11px;
}
.tm-witness-remove {
    border: none; background: none; cursor: pointer;
    font-size: 13px; padding: 0; color: #a33; line-height: 1;
}
.tm-toolbar .tm-modes { display: flex; gap: 4px; }
.tm-mode-btn[aria-pressed="true"] {
    background: var(--primary, #e53935);
    color: var(--background1, #fff);
}
.tm-transcript-group { margin-bottom: 10px; }
.tm-transcript-witness {
    font-weight: 600; font-size: 12px; color: var(--text3, #777);
}
.tm-canvas-master, .tm-canvas-virtual {
    position: absolute; left: 0; top: 0; transform-origin: 0 0;
}
.tm-master-img { display: block; user-select: none; cursor: pointer; }

.tm-transcript {
    flex: 0 0 auto; max-height: 34%; overflow-y: auto;
    padding: 6px 10px;
    /* One column per witness pane, side by side (LTR order matches
       the panes above); the text inside each group is RTL. */
    display: flex; gap: 12px; align-items: flex-start;
    font-size: 16px; line-height: 1.6;
    border-top: 1px solid rgba(0, 0, 0, 0.15);
    background: var(--background1, #fff); color: var(--text1, #222);
}
.tm-transcript-group, .tm-transcript-spacer { flex: 1 1 0; min-width: 0; }
.tm-transcript-group { direction: rtl; text-align: right; }
.tm-transcript-run { cursor: pointer; padding: 0 2px; border-radius: 3px; }
.tm-transcript-run:hover { background: var(--primary-focus, #ffef9e); }
.tm-transcript-run.tm-active {
    outline: none; background: rgba(229, 57, 53, 0.25);
}

/* Transcript strip mirrors the transcription panel's line layout */
.tm-transcript-line {
    margin-bottom: 8px;
    font-size: 22px;
    line-height: 1.5;
    direction: rtl;
    unicode-bidi: plaintext;
    color: var(--text1);
}
.tm-transcript-run.tm-active {
    background: var(--primary, #e53935);
    color: var(--background1, #fff);
}

/* Strips panel (issue #62) */
.ts-host { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.ts-toolbar {
    display: flex; gap: 10px; align-items: center;
    padding: 4px 8px; font-size: 12px;
}
.ts-toolbar .ts-passage { font-weight: 600; }
.ts-toolbar .ts-status { color: var(--text3, #888); }
.ts-body {
    flex: 1; min-height: 0; overflow: auto; padding: 8px;
    direction: rtl;
    background: var(--background1, #fff);
}
.ts-grid {
    display: grid; gap: 6px 4px; align-items: end;
    justify-items: center; width: max-content;
}
.ts-siglum {
    font-weight: 600; font-size: 13px; align-self: center;
    padding: 0 6px; direction: ltr; color: var(--text1, #222);
}
.ts-cell { cursor: pointer; border-radius: 4px; padding: 2px 1px; }
.ts-cell:hover { background: var(--primary-focus, #ffef9e); }
.ts-cell-runs { display: flex; gap: 2px; align-items: center; }
.ts-run { display: block; user-select: none; }
.ts-chip {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 32px; height: 56px; border: 1px dashed #999; color: #555;
    background: #f7f7f7; font-size: 14px; padding: 0 6px; direction: rtl;
}
.ts-cell-text {
    font-size: 15px; text-align: center; margin-top: 2px;
    direction: rtl; unicode-bidi: plaintext; color: var(--text1, #222);
}
.ts-empty { min-width: 12px; cursor: default; }
.ts-empty:hover { background: transparent; }
.ts-cell.ts-active { outline: 3px solid #e53935; outline-offset: 1px; }

    /* Metadata panel (issue #127). LTR: the labels are English and the
       values are shelfmarks, filenames and numbers. */
    .metadata-body {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        padding: 10px 12px;
        box-sizing: border-box;
        direction: ltr;
        font-family: sans-serif;
        font-size: 13px;
        color: var(--text1);
    }

    .metadata-body .meta-section + .meta-section {
        margin-top: 14px;
        border-top: 1px solid var(--background2);
        padding-top: 10px;
    }

    .metadata-body h4 {
        font-size: 13px;
        font-weight: 600;
        margin: 0 0 8px;
    }

    .metadata-body h5 {
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        opacity: 0.7;
        margin: 10px 0 4px;
    }

    .metadata-body .meta-rows {
        display: grid;
        grid-template-columns: minmax(90px, 34%) 1fr;
        gap: 2px 10px;
        margin: 0;
    }

    .metadata-body .meta-rows dt {
        opacity: 0.7;
        font-weight: 400;
    }

    .metadata-body .meta-rows dd {
        margin: 0;
        overflow-wrap: anywhere;
    }

    .metadata-body .meta-hint {
        opacity: 0.55;
        font-size: 11px;
    }

    .metadata-body .meta-chip {
        display: inline-block;
        padding: 1px 6px;
        margin: 0 2px 2px 0;
        border-radius: 8px;
        background: var(--background2);
        font-size: 11px;
    }

    .metadata-body .meta-surface-link {
        padding: 0;
        border: none;
        background: none;
        color: inherit;
        font: inherit;
        text-decoration: underline dotted;
        cursor: pointer;
    }


.crop-strip[data-v-2024baf5] {
    position: fixed; z-index: 1000; display: flex; gap: 8px;
    padding: 6px; background: #fff; border: 1px solid #999;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); pointer-events: none;
}
.crop-strip figure[data-v-2024baf5] { margin: 0; text-align: center;
}
.crop-strip img[data-v-2024baf5] { height: 80px; display: block;
}
.crop-strip figcaption[data-v-2024baf5] { font-size: 11px; color: #555;
}


.patchgrid-controls[data-v-47fd1947] {
    display: flex; gap: 12px; align-items: center;
    margin-bottom: 12px; font-size: 13px; flex-wrap: wrap;
}
.patchgrid-controls .passage-code[data-v-47fd1947] { font-weight: bold;
}
.patch-grid[data-v-47fd1947] { display: grid; gap: 12px; align-items: start;
}
.patch-column[data-v-47fd1947] { background: #fff; border: 1px solid #ddd;
}
.patch-column.master[data-v-47fd1947] { border-color: #b48200;
}
.patch-header[data-v-47fd1947] {
    padding: 4px 8px; background: #f3f3f3;
    font-weight: bold; font-size: 12px;
}
.patch-header .master-badge[data-v-47fd1947] {
    color: #b48200; font-weight: normal; margin-left: 6px;
}
.patch-view[data-v-47fd1947] { position: relative; width: 420px; max-width: 100%;
}
.patch-view img[data-v-47fd1947] { display: block; width: 100%;
}
.word[data-v-47fd1947] { position: absolute; cursor: pointer;
}
.word.highlight[data-v-47fd1947] {
    background: rgba(255, 230, 0, 0.35);
    outline: 2px solid rgba(180, 130, 0, 0.9);
}
.word.inverse[data-v-47fd1947] {
    background: rgba(200, 40, 40, 0.25);
    outline: 2px solid rgba(180, 30, 30, 0.8);
}
.warnings[data-v-47fd1947] { color: #997000; font-size: 12px; margin-top: 8px;
}
.empty[data-v-47fd1947] { color: #999; padding: 12px;
}
.error[data-v-47fd1947] { color: #b00; padding: 12px;
}


.reflow-controls[data-v-38a13ea4] {
    display: flex; gap: 12px; align-items: center;
    margin-bottom: 12px; font-size: 13px; flex-wrap: wrap;
}
.reflow-controls .passage-code[data-v-38a13ea4] { font-weight: bold;
}
.display-grid[data-v-38a13ea4] {
    display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    align-items: start;
}
.display[data-v-38a13ea4] { border: 1px solid #ddd; background: #fff;
}
.display-header[data-v-38a13ea4] {
    padding: 4px 8px; background: #f3f3f3;
    font-weight: bold; font-size: 12px;
}
.viewport[data-v-38a13ea4] {
    position: relative; overflow: hidden; touch-action: none;
    aspect-ratio: var(--aspect); background: #f9f6ef; cursor: grab;
}
.viewport[data-v-38a13ea4]:active { cursor: grabbing;
}
.layer[data-v-38a13ea4] { position: absolute; inset: 0;
}
.master-img[data-v-38a13ea4] {
    position: absolute; left: 0; top: 0; width: 100%; display: block;
    user-select: none;
}
.slot-outline[data-v-38a13ea4] {
    border: 1px dashed rgba(150, 130, 90, 0.4); pointer-events: none;
}
.word-box[data-v-38a13ea4] { cursor: pointer;
}
.word-crop[data-v-38a13ea4] { object-fit: fill; cursor: pointer; user-select: none;
}
.word-chip[data-v-38a13ea4] {
    display: flex; align-items: center; justify-content: center;
    border: 1px dashed #999; color: #555; background: #f7f7f7;
    font-size: 11px; overflow: hidden; cursor: pointer; direction: rtl;
}
.word-box.highlight[data-v-38a13ea4], .word-crop.highlight[data-v-38a13ea4], .word-chip.highlight[data-v-38a13ea4] {
    outline: 2px solid rgba(180, 130, 0, 0.9);
    background: rgba(255, 230, 0, 0.35);
}
.warnings[data-v-38a13ea4] { color: #997000; font-size: 12px; margin-top: 8px;
}
.empty[data-v-38a13ea4] { color: #999; padding: 12px;
}
.error[data-v-38a13ea4] { color: #b00; padding: 12px;
}


.strips-controls[data-v-e55497fe] {
    display: flex; gap: 12px; align-items: center;
    margin-bottom: 12px; font-size: 13px; flex-wrap: wrap;
}
.strips-controls .passage-code[data-v-e55497fe] { font-weight: bold;
}
.strip-rows[data-v-e55497fe] { display: flex; flex-direction: column; gap: 6px;
}
.strip-row[data-v-e55497fe] { display: flex; align-items: center; gap: 8px;
}
.strip-label[data-v-e55497fe] {
    flex: 0 0 90px; font-weight: bold; font-size: 12px;
    text-align: right;
}
.strip-label .master-badge[data-v-e55497fe] {
    display: block; color: #b48200; font-weight: normal; font-size: 10px;
}
.strip-scroll[data-v-e55497fe] { overflow-x: auto; direction: rtl; flex: 1 1 auto;
}
.strip-words[data-v-e55497fe] {
    direction: rtl; display: inline-flex; gap: 4px; align-items: center;
}
.word-crop[data-v-e55497fe] { height: 100%; width: auto; display: block; cursor: pointer;
}
.word-chip[data-v-e55497fe] {
    display: inline-flex; align-items: center; height: 100%;
    padding: 0 6px; border: 1px dashed #999; color: #555;
    font-size: 13px; background: #f7f7f7; cursor: pointer;
    direction: rtl;
}
.word-crop.highlight[data-v-e55497fe], .word-chip.highlight[data-v-e55497fe] {
    outline: 2px solid rgba(180, 130, 0, 0.9);
    background: rgba(255, 230, 0, 0.35);
}
.warnings[data-v-e55497fe] { color: #997000; font-size: 12px; margin-top: 8px;
}
.empty[data-v-e55497fe] { color: #999; padding: 12px;
}
.error[data-v-e55497fe] { color: #b00; padding: 12px;
}


.beta-view-body[data-v-3b7d70a4] { height: 100%; overflow: auto; padding: 8px;
}
.empty[data-v-3b7d70a4] { color: #999; padding: 12px;
}

