:root {
  --bg: #faf8f0; --border: #c8b89a; --header-bg: #e8e0d0;
  --marker: #8b0000; --damaged: #999; --uncertain: #c06000;
  --reconstructed: #006699; --marginal: #5a8a5a; --talmud: #6a5acd;
}
* { box-sizing: border-box; }
body {
  font-family: 'SBL Hebrew', 'Frank Ruehl CLM', 'David CLM', 'Noto Sans Hebrew',
               'Times New Roman', serif;
  direction: rtl; background: var(--bg); color: #222;
  margin: 0; padding: 16px; font-size: 15px; line-height: 1.6;
}
a { color: #444; } a:hover { color: var(--marker); }
h1 { font-size: 20px; } h2 { font-size: 17px; }
.nav { background: var(--header-bg); padding: 8px 12px; border-radius: 4px;
       margin-bottom: 12px; font-size: 13px; }
.nav a { margin-left: 12px; }

/* Tractate index */
.tract-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
              gap: 8px; }
.tract-card { background: #fff; border: 1px solid var(--border); border-radius: 4px;
              padding: 8px 12px; }
.tract-card h3 { margin: 0 0 4px; font-size: 15px; }
.tract-card .count { font-size: 12px; color: #666; }

/* Synopsis */
.mishnah-block {
  background: #fff; border: 1px solid var(--border); border-radius: 6px;
  margin: 12px 0; padding: 10px 14px;
}
.mishnah-header {
  font-weight: bold; color: var(--marker); font-size: 14px;
  border-bottom: 1px solid var(--border); padding-bottom: 4px; margin-bottom: 6px;
}
.witness-row {
  display: flex; gap: 10px; padding: 4px 0;
  border-bottom: 1px dotted #e8e0d0; font-size: 14px;
  align-items: baseline;
}
.witness-row:last-child { border-bottom: none; }
.witness-row:hover { background: #f5f0e5; }
.witness-label {
  flex-shrink: 0; width: 160px; font-size: 11px; color: #666;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  direction: ltr; text-align: right;
}
.witness-text { flex: 1; }
.wt-n { }
.wt-nt, .wt-damaged { color: var(--damaged); }
.wt-nth { color: #777; text-decoration: underline dotted; }
.wt-nF { color: var(--uncertain); font-style: italic; }
.wt-nb { color: var(--reconstructed); }
.wt-nd { color: var(--deleted); text-decoration: line-through; }
.wt-nc { color: var(--marker); font-weight: bold; }
.wt-nm { color: var(--marginal); font-size: 0.9em; }
.wt-gj { color: var(--talmud); }
.wt-nv { background: #fff0d0; padding: 0 1px; border-radius: 1px; }
.wt-linkhl { background: #ffe082; outline: 2px solid #d4a017; border-radius: 3px; }
.wt-para { color: #999; font-size: 0.85em; font-style: italic; border-top: 1px dotted #ccc; padding-top: 2px; }
.break-mark { color: #ccc; font-size: 11px; }
.empty-note { color: #bbb; font-style: italic; font-size: 12px; }
.alignment-warning {
  background: #fff8e1; border: 1px solid #f0d97a; border-radius: 4px;
  padding: 4px 8px; margin: 4px 0; font-size: 11px; color: #7a5a10;
}
.alignment-warning summary { cursor: pointer; font-weight: 500; }
.alignment-warning ul { margin: 4px 0 0 0; padding-right: 16px; }
.alignment-warning li { font-size: 10px; color: #6a4a08; }

/* Witness type filters */
.type-filters { font-size: 12px; margin-bottom: 8px; display: flex; gap: 6px; align-items: center; }
.type-filters label { cursor: pointer; padding: 2px 8px; border: 1px solid var(--border);
                       border-radius: 3px; white-space: nowrap; user-select: none; }
.type-filters label:hover { background: #f5f0e5; }
.type-filters input[type="checkbox"] { margin-left: 4px; }
.type-filters .type-count { font-size: 10px; color: #999; }
.wt-badge { display: inline-block; font-size: 9px; padding: 0 4px; border-radius: 2px;
            margin-right: 4px; vertical-align: middle; }
.wt-badge-genizah_fragment { background: #e8f0e8; color: #2a6a2a; }
.wt-badge-mishnah_ms { background: #e0e8f8; color: #2a4a8a; }
.wt-badge-bavli_excerpt { background: #f8f0e0; color: #8a6a2a; }
.wt-badge-yerushalmi { background: #f0e0f0; color: #6a2a6a; }

/* Two-axis witness badges: physical form (ms_type) × text type (work_type).
   Rendered next to every synopsis witness name; also drive client-side
   show/hide in the two-group filter below (see .axis-filters). */
.wt-form-manuscript { background: #e0e8f8; color: #2a4a8a; }
.wt-form-fragment   { background: #e8f0e8; color: #2a6a2a; }
.wt-form-print      { background: #efe7dd; color: #6a4a2a; }
.wt-form-binding    { background: #efe0ee; color: #7a2a6a; }
.wt-work-mishnah    { background: #dfeaff; color: #244a9a; }
.wt-work-bavli      { background: #f8efda; color: #8a5a1a; }
.wt-work-yerushalmi { background: #f3e2f3; color: #6a2a6a; }

/* Single-letter row badge (synopsis witness name column). .wt-1 fixes the
   width so a blank spacer (default Mishnah manuscript) lines the names up. */
.wt-badge.wt-1 { width: 15px; min-width: 15px; box-sizing: border-box;
                 padding: 0; text-align: center; font-size: 11px; font-weight: 700;
                 line-height: 15px; border-radius: 3px; }
.wt-mishnah    { background: #dfeaff; color: #244a9a; }
.wt-bavli      { background: #f8efda; color: #8a5a1a; }
.wt-yerushalmi { background: #f3e2f3; color: #6a2a6a; }
.wt-genizah    { background: #e2efe2; color: #2a6a2a; }
.wt-binding    { background: #efe0ee; color: #7a2a6a; }
.wt-print      { background: #efe7dd; color: #6a4a2a; }
.wt-blank      { background: transparent; }
/* Clickable badge cluster → witness metadata modal */
.wit-badges { cursor: pointer; display: inline-flex; gap: 2px; vertical-align: middle; }
.wit-badges:hover .wt-badge:not(.wt-blank) { outline: 1px solid #d4a017; }
body.reorder-mode .wit-badges { pointer-events: none; }
.axis-filters { font-size: 12px; margin-bottom: 8px; display: flex; flex-wrap: wrap;
                gap: 6px 14px; align-items: center; }
.axis-filters .axis-group { display: flex; gap: 6px; align-items: center; }
.axis-filters .axis-label { color: #666; font-weight: bold; }
.axis-filters label { cursor: pointer; padding: 2px 8px; border: 1px solid var(--border);
                      border-radius: 3px; white-space: nowrap; user-select: none; }
.axis-filters label:hover { background: #f5f0e5; }
.axis-filters input[type="checkbox"] { margin-left: 4px; }
.synopsis-hidden { display: none !important; }

/* Alignment table */
.align-table {
  border-collapse: collapse; width: 100%; font-size: 13px;
  direction: rtl; margin-top: 6px;
}
.align-table th {
  background: var(--header-bg); font-size: 11px; font-weight: normal;
  color: #666; padding: 2px 4px; border: 1px solid var(--border);
  position: sticky; top: 0; z-index: 1;
}
.align-table td {
  padding: 2px 4px; border: 1px solid #e8e0d0;
  white-space: nowrap; text-align: center;
}
.align-table .colon-sep {
  border-left: 3px solid var(--marker);
}
.align-table .wit-label {
  text-align: right; background: #faf8f0; font-size: 11px; color: #666;
  position: sticky; right: 0; z-index: 1; white-space: nowrap;
  max-width: 120px; overflow: hidden; text-overflow: ellipsis;
}
.align-table tr:hover td { background: #f5f0e5; }
.al-match { }
.al-variant { background: #fff3cc; }
.al-add { background: #e6ffe6; color: #060; font-size: 11px; }
.al-miss { background: #fee; color: #ccc; font-size: 10px; }
.al-base { font-weight: bold; }
.catchword { font-size: 10px; color: #999; text-decoration: underline dotted; }

/* Zigzag borders for fragment edges (left/right sides of cells) */
.fragment-start {
  border-right: 3px solid transparent;
  border-image: repeating-linear-gradient(
    0deg,
    #8b7355 0px, #8b7355 3px,
    transparent 3px, transparent 6px,
    #8b7355 6px, #8b7355 9px,
    transparent 9px, transparent 12px
  ) 0 1 0 0;
  position: relative;
}
.fragment-start::before {
  content: '';
  position: absolute;
  right: -3px;
  top: 0;
  bottom: 0;
  width: 3px;
  background: repeating-linear-gradient(
    45deg,
    #8b7355 0px, #8b7355 2px,
    transparent 2px, transparent 4px
  );
  opacity: 0.5;
}

.fragment-end {
  border-left: 3px solid transparent;
  border-image: repeating-linear-gradient(
    0deg,
    #8b7355 0px, #8b7355 3px,
    transparent 3px, transparent 6px,
    #8b7355 6px, #8b7355 9px,
    transparent 9px, transparent 12px
  ) 0 0 0 1;
  position: relative;
}
.fragment-end::before {
  content: '';
  position: absolute;
  left: -3px;
  top: 0;
  bottom: 0;
  width: 3px;
  background: repeating-linear-gradient(
    135deg,
    #8b7355 0px, #8b7355 2px,
    transparent 2px, transparent 4px
  );
  opacity: 0.5;
}

.view-toggle { font-size: 12px; margin-bottom: 6px; }
.view-toggle a { margin-left: 8px; padding: 2px 8px; border: 1px solid var(--border);
                 border-radius: 3px; text-decoration: none; }
.view-toggle a.active { background: var(--header-bg); font-weight: bold; }

/* Compare view */
.cmp-container { display: flex; gap: 0; direction: rtl; height: calc(100vh - 80px); }
.cmp-panel { flex: 1; overflow-y: auto; padding: 8px 12px; border-left: 1px solid var(--border); }
.cmp-panel:last-child { border-left: none; }
.cmp-panel-header { position: sticky; top: 0; background: var(--header-bg); padding: 4px 8px;
                    font-size: 12px; font-weight: bold; z-index: 2; border-radius: 3px;
                    margin-bottom: 6px; }
.cmp-section { margin-bottom: 12px; padding: 6px; border-radius: 4px; }
.cmp-section.has-diff { background: #fffbe6; border: 1px solid #e8d888; }
.cmp-section.no-diff { background: #fff; border: 1px solid #eee; }
.cmp-section.only-one { background: #f0f0f8; border: 1px solid #ccd; }
.cmp-lval { font-size: 10px; color: #999; }
.cmp-word { display: inline; }
.cmp-word-match { }
.cmp-word-diff { background: #ffe0a0; padding: 0 2px; border-radius: 2px; }
.cmp-word-only { background: #c8e8c8; padding: 0 2px; border-radius: 2px; }
.cmp-word-miss { color: #ccc; font-size: 0.85em; }
.cmp-nav { position: fixed; bottom: 12px; left: 50%; transform: translateX(-50%);
           background: #fff; border: 1px solid var(--border); border-radius: 6px;
           padding: 4px 12px; font-size: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.15);
           z-index: 50; display: flex; gap: 8px; align-items: center; }
.cmp-nav button { background: var(--header-bg); border: 1px solid var(--border);
                  border-radius: 3px; padding: 2px 10px; cursor: pointer; font-size: 13px; }
.cmp-nav button:hover { background: #f5f0e5; }