* { box-sizing: border-box; }

/* `display:flex` on an overlay beats the `hidden` attribute's UA default of
   `display:none`, so a hidden overlay would keep painting and swallow every
   click on the page beneath it. Anything hidden stays hidden. */
[hidden] { display: none !important; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    direction: rtl;
    font-family: "Times New Roman", "David", "Frank Ruehl CLM", serif;
    background: #faf8f4;
    color: #222;
}

/* ---------------------------------------------------------------- header */

header.site-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 20px;
    background: #2e2a24;
    color: #f3ead9;
    position: sticky;
    top: 0;
    z-index: 20;
    font-family: Arial, sans-serif;
}
header.site-header h1 { font-size: 18px; margin: 0; }
header.site-header label { font-size: 13px; cursor: pointer; }

.search-open-btn {
    font-family: Arial, sans-serif;
    border: 1px solid #6b6151;
    background: transparent;
    color: #f3ead9;
    border-radius: 4px;
    padding: 4px 12px;
    font-size: 13px;
    cursor: pointer;
}
.search-open-btn:hover { background: #4a4030; }
.search-open-btn { margin-inline-start: auto; }

.placeholder-msg { color: #8a8172; font-size: 14px; font-family: Arial, sans-serif; }

/* -------------------------------------------------------- synopsis panel */

.bottom-panel {
    position: fixed;
    bottom: 0;
    inset-inline: 0;
    height: 260px;
    background: #fffdf8;
    border-top: 2px solid #ddd6c8;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, .08);
    overflow: auto;
    padding: 8px 14px 14px;
    z-index: 15;
}
.bottom-panel-title {
    font-family: Arial, sans-serif;
    font-size: 12px;
    color: #7a7060;
    margin-bottom: 8px;
}
/* Keep the docked panel from covering the tail of the synopsis. */
body:not(.synopsis-off) .fullsyn-body { padding-bottom: 280px; }

.witness-synopsis-scroll { overflow-x: auto; }
table.witness-synopsis { border-collapse: collapse; font-size: 17px; }
.syn-strip-label {
    font-family: Arial, sans-serif;
    font-size: 11px;
    color: #5a5245;
    background: #f0ece3;
    border: 1px solid #e3ddd0;
    padding: 2px 7px;
    position: sticky;
    inset-inline-start: 0;
    white-space: nowrap;
    cursor: help;
}
.syn-strip-base .syn-strip-label { background: #f0b429; color: #2e2a24; font-weight: bold; }
.synw {
    border: 1px solid #eee8db;
    padding: 2px 6px;
    white-space: nowrap;
    text-align: center;
}
.synw-clickable { cursor: pointer; }
.synw-clickable:hover { background: #fdf0cd; }
.synw-current { background: #f0b429; color: #2e2a24; }
.synw-gap { color: #c2baa9; }
/* A witness's own text with no counterpart in the base -- tinted so it reads
   as an interpolation rather than as a variant of the word beside it. */
.synw-addition { background: #eef5e8; color: #3d5c2a; font-size: 15px; }

/* --------------------------------------------------- word / image panel */
/* Shown under the word-synopsis once a clicked word has manuscript image
   data: a montage of per-witness crops (via IIIF/plain-JPEG percentage
   positioning), grouped by shared reading. */

#wordPanel { margin-top: 14px; border-top: 1px solid #e3ddd0; padding-top: 10px; }
.word-panel-stack { padding: 6px 2px; }

.bottom-panel-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}
.bottom-panel-title-row .bottom-panel-title { margin-bottom: 0; }

.wp-mode-toggle { display: flex; gap: 2px; flex: none; }
.wp-mode-btn {
    font-family: Arial, sans-serif;
    font-size: 11px;
    color: #5a5245;
    background: #f0ece3;
    border: 1px solid #e3ddd0;
    padding: 3px 10px;
    cursor: pointer;
}
.wp-mode-btn:first-child { border-radius: 3px 0 0 3px; }
.wp-mode-btn:last-child { border-radius: 0 3px 3px 0; }
.wp-mode-btn.active { background: #f0b429; color: #2e2a24; border-color: #d9a220; }
.wp-mode-btn:hover:not(.active) { background: #e6e0d2; }

/* Single-image ("witness view") mode: one witness at a time, shown large.
   The panel's height chain needs to be explicit top-to-bottom for the
   percentage heights below to resolve (percentages need a sized ancestor). */
body.wp-mode-single .bottom-panel { height: 78vh; display: flex; flex-direction: column; }
body.wp-mode-single #wordPanel { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.word-panel-single { display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; min-height: 0; }
.wps-witness-picker { display: flex; gap: 4px; flex-wrap: wrap; flex: none; }
.wps-witness-btn {
    font-family: Arial, sans-serif;
    font-size: 12px;
    color: #5a5245;
    background: #f0ece3;
    border: 1px solid #e3ddd0;
    border-radius: 3px;
    padding: 2px 9px;
    cursor: pointer;
}
.wps-witness-btn:hover:not(.active) { background: #e6e0d2; }
.wps-witness-btn.active { background: #f0b429; color: #2e2a24; border-color: #d9a220; }
/* Image on the left, running text on the right. Flex row-direction follows
   inline direction, which is RTL here (inline-start = right) -- so
   row-reverse puts the first DOM child (.wps-viewer) at inline-end (left)
   and the second (.wps-text) at inline-start (right), as intended. */
.wps-body { display: flex; flex-direction: row-reverse; gap: 12px; flex: 1 1 auto; min-height: 0; }
.wps-viewer {
    position: relative;
    flex: 1 1 55%;
    min-height: 0;
    overflow: hidden;
    border: 1px solid #ddd6c8;
    border-radius: 4px;
    background: #eee repeating-linear-gradient(45deg, #e8e4d8 0 8px, #eee 8px 16px);
    cursor: grab;
}
.wps-viewer.wps-dragging { cursor: grabbing; }
.wps-viewer img {
    position: absolute;
    max-width: none;
    user-select: none;
    -webkit-user-drag: none;
}
.wps-hi {
    position: absolute;
    border: 2px solid #d9534f;
    background: rgba(217, 83, 79, .12);
    pointer-events: none;
}
/* Every other word on the page with bbox data -- faint until hovered, and
   clickable to jump the selection there (mirrors clicking the word in text). */
.wps-box {
    position: absolute;
    border: 1px solid rgba(217, 83, 79, .35);
    cursor: pointer;
}
.wps-box:hover { background: rgba(255, 210, 80, .35); border-color: #d9534f; }
/* The word the synopsis click actually opened the panel on -- a separate,
   cooler-colored ring that stays put even while wps-hi (the word currently
   being looked at) moves around as the reader clicks other words/witnesses. */
.wps-focus-ring {
    position: absolute;
    border: 2px dashed #3a6fa8;
    border-radius: 2px;
    pointer-events: none;
}
.wps-zoom-controls {
    position: absolute;
    inset-inline-end: 8px;
    top: 8px;
    display: flex;
    gap: 4px;
    z-index: 2;
}
.wps-zoom-controls button {
    font-family: Arial, sans-serif;
    font-size: 13px;
    width: 26px;
    height: 26px;
    border-radius: 3px;
    border: 1px solid #c8b89a;
    background: #fffdf8;
    cursor: pointer;
}
.wps-zoom-controls button:hover { background: #f5f0e5; }

/* The witness's full running text for this page, word-linked to the image:
   each word with bbox coverage is clickable and pans/highlights it there.
   Single-column witnesses render one .wps-text-col; two-column manuscripts
   (common for London, occasional for Vat31/Oxford -- see wpsSplitColumns)
   render two side by side, right column first to match manuscript reading
   order under this dir="rtl" page. */
.wps-text {
    flex: 1 1 45%;
    min-width: 200px;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    gap: 14px;
    font-size: 18px;
    line-height: 2.1;
    padding: 6px 10px;
    border-inline-start: 3px solid #e3ddd0;
}
.wps-text-col {
    flex: 1 1 0;
    min-width: 0;
    padding-inline-end: 10px;
    border-inline-end: 1px dotted #e3ddd0;
}
.wps-text-col:last-child { border-inline-end: none; padding-inline-end: 0; }
.wps-text-line { white-space: normal; }
.wps-word { border-radius: 2px; padding: 0 1px; transition: background-color .15s ease; }
.wps-word-linked { cursor: pointer; }
.wps-word-linked:hover { background: #fdf0cd; }
.wps-word-current { background: #f0b429; color: #2e2a24; }
.wps-word-unlinked { color: #b0a894; }
/* Mirrors .wps-focus-ring: the synopsis-origin word, kept visibly marked even
   when a different word is "current" (isCur) after the reader clicks around. */
.wps-word-focus { outline: 2px dashed #3a6fa8; outline-offset: 1px; }

.wp-empty { color: #8a8172; font-family: Arial, sans-serif; font-size: 13px; }

/* Montage (grid) layout for the stack view: witnesses grouped by shared
   reading, each group a labelled grid of small crops. */
.wp-montage-group { margin-bottom: 28px; }
.wp-montage-reading {
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #5a5245;
    border-bottom: 1px solid #e3ddd0;
    padding-bottom: 5px;
    margin-bottom: 14px;
}
.wp-montage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 22px 18px;
}
.wp-montage-cell { display: flex; flex-direction: column; gap: 5px; }
.wp-montage-cell .wp-crop { max-width: 100%; }
.wp-montage-caption {
    font-family: Arial, sans-serif;
    font-size: 11px;
    color: #5a5245;
    background: #f0ece3;
    border: 1px solid #e3ddd0;
    border-radius: 3px;
    padding: 1px 6px;
    text-align: center;
    cursor: help;
}

.wp-witness-block { margin-bottom: 14px; }
.wp-witness-label {
    font-family: Arial, sans-serif;
    font-size: 11px;
    color: #5a5245;
    background: #f0ece3;
    border: 1px solid #e3ddd0;
    border-radius: 3px;
    padding: 1px 6px;
    display: inline-block;
    margin-bottom: 4px;
    cursor: help;
}

/* Crop viewport: a fixed-size window onto the full page image, scrolled so
   the word's bbox sits centred -- avoids fetching/decoding a cropped image
   server-side, which IIIF region requests would need scaling for anyway
   (see README "Coordinate space") and plain-JPEG witnesses don't support at
   all. */
.wp-crop {
    position: relative;
    width: 100%;
    max-width: 340px;
    height: 170px;
    overflow: hidden;
    border: 1px solid #ddd6c8;
    border-radius: 4px;
    background: #eee repeating-linear-gradient(45deg, #e8e4d8 0 8px, #eee 8px 16px);
    cursor: zoom-in;
}
.wp-crop img {
    position: absolute;
    max-width: none;
}
.wp-crop-box {
    position: absolute;
    border: 2px solid #d9534f;
    background: rgba(217, 83, 79, .12);
    pointer-events: none;
}
.wp-crop-loading {
    font-family: Arial, sans-serif;
    font-size: 12px;
    color: #8a8172;
    padding: 8px;
}

.wp-line {
    font-size: 17px;
    line-height: 1.8;
    padding: 4px 8px;
    border-inline-start: 3px solid #e3ddd0;
    margin-bottom: 10px;
}
.wp-line b { background: #f0b429; color: #2e2a24; }

/* Full-page overlay for the expanded (click-to-zoom) image view. */
.wp-zoom-view {
    position: fixed;
    inset: 0;
    background: rgba(20, 18, 14, .85);
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
}
.wp-zoom-view img { max-width: 92vw; max-height: 92vh; }
.wp-zoom-box {
    position: absolute;
    border: 3px solid #d9534f;
    background: rgba(217, 83, 79, .15);
    pointer-events: none;
}

/* ---------------------------------------------------------------- search */

.search-view {
    position: fixed;
    inset: 0;
    background: #faf8f4;
    z-index: 40;
    display: flex;
    flex-direction: column;
}
.search-bar {
    display: flex;
    gap: 8px;
    padding: 12px 20px;
    background: #2e2a24;
}
.search-bar input {
    flex: 1;
    font-family: inherit;
    font-size: 17px;
    padding: 6px 10px;
    border: 1px solid #6b6151;
    border-radius: 4px;
}
.search-bar button {
    font-family: Arial, sans-serif;
    font-size: 13px;
    padding: 6px 14px;
    border-radius: 4px;
    border: 1px solid #6b6151;
    background: transparent;
    color: #f3ead9;
    cursor: pointer;
}
.search-bar button:hover { background: #4a4030; }
.search-results-meta {
    font-family: Arial, sans-serif;
    font-size: 12px;
    color: #7a7060;
    padding: 8px 20px 0;
}
.search-results { overflow-y: auto; padding: 10px 20px 30px; }
.search-hit-block { margin-bottom: 16px; }
.search-hit-title {
    display: block;
    font-family: Arial, sans-serif;
    font-size: 13px;
    color: #8a6a10;
    text-decoration: none;
    margin-bottom: 4px;
}
.search-hit-title:hover { text-decoration: underline; }
.search-kwic {
    font-size: 17px;
    line-height: 1.7;
    padding: 3px 8px;
    border-inline-start: 3px solid #e3ddd0;
    cursor: pointer;
}
.search-kwic:hover { background: #fdf0cd; }
.search-kwic b { background: #f0b429; color: #2e2a24; }

/* Each search hit renders as a synoptic strip (the same witness-synopsis
   table the main view builds on a word click), so a result reads like the
   comparison a reader actually wants -- not a single-witness KWIC line. */
.search-hit-syn {
    margin-bottom: 10px;
    padding: 6px 8px;
    border-inline-start: 3px solid #e3ddd0;
    cursor: pointer;
}
.search-hit-syn:hover { border-inline-start-color: #f0b429; }
.search-hit-syn table.witness-synopsis { font-size: 15px; }
.search-hit-loading {
    font-family: Arial, sans-serif;
    font-size: 12px;
    color: #8a8172;
    padding: 4px 0;
}

@media (max-width: 800px) {
    header.site-header { flex-wrap: wrap; gap: 8px; }
}

/* Genizah fragments: one column per Kahana catalogue entry, tinted so the
   reader can see at a glance which columns are fragmentary evidence. The
   siglum is the catalogue number (ג_93-95); the full shelfmark is the
   tooltip, since it is too long to sit in a column head. */
.syn-strip-genizah { background: #e8eef5; color: #2f4a63; }

/* ------------------------------------------- full-page aligned synopsis */

.fullsyn-view {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 49px);
    background: #faf8f4;
}
.fullsyn-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 8px 16px;
    background: #2e2a24;
    color: #f3ead9;
    font-family: Arial, sans-serif;
    font-size: 12px;
}
.fullsyn-title { font-weight: bold; }
.fullsyn-nav { display: flex; align-items: center; gap: 4px; }
.fullsyn-nav button,
.fs-layout-btn {
    border: 1px solid #6b6151;
    background: transparent;
    color: #f3ead9;
    border-radius: 4px;
    padding: 3px 10px;
    font-size: 13px;
    font-family: Arial, sans-serif;
    cursor: pointer;
}
.fullsyn-nav button:hover,
.fs-layout-btn:hover { background: #4a4030; }
.fs-layout-btn.active { background: #f0b429; color: #2e2a24; border-color: #f0b429; }
.fullsyn-nav input {
    width: 62px;
    font-family: Arial, sans-serif;
    font-size: 12px;
    padding: 3px 6px;
    border: 1px solid #6b6151;
    border-radius: 4px;
    text-align: center;
}
.fs-toggle { cursor: pointer; }
.fullsyn-legend { display: flex; gap: 6px; margin-inline-start: auto; }
.fullsyn-legend .lg {
    border-radius: 3px;
    padding: 1px 7px;
    color: #2e2a24;
}
.lg-subst { background: #f6c9c2; }
.lg-ortho { background: #fdf0cd; }
.lg-multi { background: #dfe4f2; }
.lg-omit  { background: #ece8e0; color: #8a8172; }
.lg-add   { background: #d9ead0; }

.fullsyn-body { flex: 1; overflow: auto; padding: 12px 16px 28px; }
.fs-scroll { overflow-x: auto; }

table.fs-grid { border-collapse: collapse; font-size: 16px; }
.fs-ruler th {
    font-family: Arial, sans-serif;
    font-size: 9px;
    font-weight: normal;
    color: #a89f8d;
    padding: 0 4px 2px;
    text-align: center;
}
/* The siglum column stays put while the grid scrolls sideways -- without it
   you lose track of which row you are reading within a few screens. */
.fs-label {
    position: sticky;
    inset-inline-start: 0;
    z-index: 2;
    background: #f0ece3;
    border: 1px solid #e3ddd0;
    font-family: Arial, sans-serif;
    font-size: 11px;
    font-weight: normal;
    color: #5a5245;
    padding: 2px 8px;
    white-space: nowrap;
    cursor: help;
}
.fs-label-genizah { background: #e8eef5; color: #2f4a63; }
.fs-row-base .fs-label,
.fs-label-base { background: #f0b429; color: #2e2a24; font-weight: bold; }

.fs-cell {
    border: 1px solid #eee8db;
    padding: 2px 7px;
    white-space: nowrap;
    text-align: center;
    cursor: pointer;
}
.fs-base-cell { background: #fffaf0; font-weight: bold; }
.fs-row-base .fs-cell { background: #fffaf0; }
.fs-current { outline: 2px solid #f0b429; outline-offset: -2px; }

/* Reading classification. Substantive variants are the loudest, orthographic
   ones quieter, since a page typically has several times more of the latter. */
.rd-same   { background: #fff; }
.rd-subst  { background: #f6c9c2; }
.rd-ortho  { background: #fdf0cd; }
.rd-multi  { background: #dfe4f2; font-size: 14px; }
.rd-omit   { background: #ece8e0; color: #c2baa9; }
.fs-add    { background: #d9ead0; color: #2f4a2a; font-size: 14px; }
/* The individual letters that differ, inside an orthographic variant. */
.lt-diff { color: #b3401f; font-weight: bold; }

.fs-bands { display: flex; flex-direction: column; gap: 18px; }
.fs-band { border-inline-start: 3px solid #e3ddd0; padding-inline-start: 10px; }
.fs-band-head {
    font-family: Arial, sans-serif;
    font-size: 11px;
    color: #a89f8d;
    margin-bottom: 3px;
}

.fs-grid-vertical .fs-cell { text-align: right; white-space: normal; }
.fs-rownum {
    position: sticky;
    inset-inline-start: 0;
    z-index: 2;
    background: #f0ece3;
    border: 1px solid #e3ddd0;
    font-family: Arial, sans-serif;
    font-size: 9px;
    font-weight: normal;
    color: #a89f8d;
    padding: 0 5px;
}