:root {
  --bg: #0b1020;
  --bg-2: #121a33;
  --bg-3: #182345;
  --panel: #1a2448;
  --panel-2: #202c55;
  --text: #e7ecf7;
  --text-dim: #a6b0cf;
  /* Matrix word colors — 3-tone rotation. Previous values for word-b
     (#a6b0cf) and word-c (#7b87a8) faded too dim against the dark
     matrix background, leaving plain Hebrew letters hard to read on
     mobile (reported 2026-04-30). New values keep the rotation as a
     visual word-boundary cue but raise the contrast floor so every
     letter is comfortable to read. */
  --text-word-a: #e7ecf7;
  --text-word-b: #c5cbe3;
  --text-word-c: #a3acc8;
  --muted: #6b7aa0;
  --gold: #f6c453;
  --gold-2: #d4a23a;
  --gold-soft: rgba(246, 196, 83, 0.15);
  --gold-med: rgba(246, 196, 83, 0.35);
  --gold-strong: rgba(246, 196, 83, 0.55);
  --accent: #7aa7ff;
  --accent-2: #3d6fd9;
  --good: #7fd39a;
  --bad: #ff7b8a;
  --border: #2a3668;
  --border-2: #3a4a88;
  --hebrew-font: "Frank Ruhl Libre", "Noto Sans Hebrew", "SBL Hebrew", "Ezra SIL", "Times New Roman", serif;
  --hebrew-ui-font: "Heebo", "Noto Sans Hebrew", -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--hebrew-ui-font);
  font-size: 14px;
}

body {
  display: flex;
  flex-direction: column;
  /* App-shell layout: body is exactly viewport-tall and never scrolls.
     The topbar / tab-bar always sit at the top, the footer always at
     the bottom, and the main content area in between is the ONLY
     scrollable region (overflow:auto on .tabs-layout below). This
     replaces the previous min-height + sticky chrome combination
     which on mobile had three different "footer floats / tabs get
     overlaid / chrome scrolls away" failure modes (reported 2026-04-29
     and 2026-04-30 from iPhone). With overflow:hidden on body, none
     of those issues can occur — the chrome elements are physically
     incapable of scrolling out of view. svh = small viewport height
     (excludes the iOS Safari toolbar). 100vh fallback for older UAs
     stays as a backup. */
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

/* ===== Top bar ===== */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px;
  background: #000;
  border-bottom: 1px solid var(--gold-2);
  box-shadow: 0 2px 20px rgba(246,196,83,0.08);
  /* The body uses overflow:hidden + 100svh so the topbar physically
     sits outside the scrolling area. No sticky needed, no z-index
     fight with content. */
  flex: 0 0 auto;
}

.brand {
  display: flex; align-items: center; gap: 14px;
  text-decoration: none; color: inherit;
}
.brand:hover { opacity: 0.92; }
.brand-logo {
  width: 64px; height: 64px;
  object-fit: contain;
}
.brand-title {
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 1px;
  color: var(--gold);
}
.brand-sub {
  color: var(--text-dim);
  font-size: 12px;
  margin-top: 2px;
}

.topbar-right {
  display: flex; align-items: center; gap: 14px;
}

.archive-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid var(--gold-2);
  border-radius: 999px;
  color: var(--gold);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: all 160ms;
}
.archive-btn:hover { background: var(--gold); color: #000; }
.archive-btn-ico {
  width: 20px; height: 20px;
  object-fit: contain;
}

.auth-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid var(--border-2);
  border-radius: 999px;
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 120ms, color 120ms, background 120ms;
}
.auth-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(212, 175, 55, 0.06);
}
.auth-btn-text { font-weight: 600; }
.auth-btn-soon { display: none; }  /* legacy "coming soon" badge — feature is live */

/* Keyboard navigation — visible focus ring on every interactive element */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}
.fab-search:focus-visible { outline-offset: 4px; }

.icon-btn {
  width: 36px; height: 36px;
  background: transparent;
  border: 1px solid var(--border-2);
  border-radius: 50%;
  color: var(--gold);
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  font-family: inherit;
  transition: all 160ms;
}
.icon-btn:hover { background: var(--gold); color: #000; border-color: var(--gold); }

.results-top {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; margin-bottom: 0;
}
.results-top h2 { margin: 0; font-size: 13px; color: var(--gold); }

.stats-bar {
  display: flex; gap: 4px; flex-wrap: wrap;
}
.stat {
  display: flex; align-items: center; gap: 4px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 2px 7px;
}
.stat-label { font-size: 9px; color: var(--text-dim); }
.stat-value {
  font-weight: 700; font-size: 12px; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.stat:first-child { border-color: var(--gold); background: rgba(246,196,83,0.08); }
.stat:first-child .stat-value { color: var(--gold); font-size: 13px; }

select.inline-select {
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
  font-family: var(--hebrew-ui-font);
  outline: none;
  direction: rtl;
  width: 100%;
  cursor: pointer;
}
select.inline-select:focus { border-color: var(--gold); }
.stat.fwd { border-color: rgba(127,211,154,0.4); }
.stat.fwd .stat-value { color: var(--good); }
.stat.rev { border-color: rgba(122,167,255,0.4); }
.stat.rev .stat-value { color: var(--accent); }
.stat.flagged-stat { border-color: rgba(246,196,83,0.25); }
.stat.flagged-stat .stat-value { color: var(--gold); }

/* ── Clickable stat tiles (v2) ─────────────────────────────────
   Total / Forward / Reverse tiles act as direction filter buttons.
   Click "קדימה" → table shows only forward hits, etc. The active
   tile gets a gold underline + brighter background. */
.stat.clickable {
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.stat.clickable:hover {
  background: rgba(212, 175, 55, 0.07);
  transform: translateY(-1px);
}
.stat.clickable:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.stat.clickable.active {
  background: rgba(212, 175, 55, 0.14);
  box-shadow: inset 0 -2px 0 var(--gold), 0 0 12px rgba(212, 175, 55, 0.12);
}
.stat.clickable.active .stat-label {
  color: var(--gold);
  opacity: 1;
}
.stat.fwd.clickable.active {
  background: rgba(127, 211, 154, 0.12);
  box-shadow: inset 0 -2px 0 var(--good), 0 0 12px rgba(127, 211, 154, 0.14);
}
.stat.fwd.clickable.active .stat-label { color: var(--good); }
.stat.rev.clickable.active {
  background: rgba(122, 167, 255, 0.12);
  box-shadow: inset 0 -2px 0 var(--accent), 0 0 12px rgba(122, 167, 255, 0.14);
}
.stat.rev.clickable.active .stat-label { color: var(--accent); }
.stat.clickable:active { transform: translateY(0); }

.word-occ-numbers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 6px;
}
.word-occ-numbers label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 11px; color: var(--text-dim);
}
.word-occ-numbers input[type="number"] {
  width: 100%;
}

.results-actions {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  margin-inline-start: auto;  /* push to the right end of the header row */
}
.toggle-inline {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 11px;
  cursor: pointer;
  color: var(--text-dim);
}
.toggle-inline:hover { border-color: var(--gold); color: var(--text); }
.toggle-inline input { margin: 0; }
.toggle-inline input:checked + span { color: var(--gold); font-weight: 700; }
.results-actions button { padding: 3px 9px; font-size: 11px; }
.flag-count {
  display: inline-block;
  background: var(--gold);
  color: #000;
  border-radius: 999px;
  font-size: 10px;
  padding: 1px 7px;
  font-weight: 700;
  margin-inline-start: 4px;
}
.flag-count:empty, .flag-count[data-v="0"] { display: none; }
#flaggedViewBtn.active {
  background: var(--gold);
  color: #000;
  border-color: var(--gold);
}

.col-flag { width: 34px; text-align: center !important; cursor: pointer; color: var(--muted); }
.col-flag.flagged { color: var(--gold); }
td.col-flag { font-size: 18px; transition: color 120ms; user-select: none; }
td.col-flag:hover { color: var(--gold); filter: brightness(1.2); }

/* ===== Help modal ===== */
.help-modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.82);
  z-index: 9500;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  backdrop-filter: blur(6px);
}
.help-inner {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--gold);
  border-radius: 14px;
  padding: 32px 40px;
  max-width: 780px;
  width: 100%;
  max-height: 86vh;
  overflow-y: auto;
  direction: rtl;
  box-shadow: 0 10px 60px rgba(246,196,83,0.15);
}
.help-inner h2 { color: var(--gold); margin: 0 0 16px; font-size: 22px; }
.help-inner h3 { color: var(--gold); font-size: 15px; margin: 22px 0 8px; }
.help-inner p, .help-inner li { line-height: 1.7; font-size: 13.5px; color: var(--text); }
.help-inner ul { padding-inline-start: 22px; margin: 6px 0; }
.help-inner strong { color: var(--gold); }
.help-inner .muted { color: var(--text-dim); font-size: 12px; }
.help-close {
  position: absolute;
  top: 10px; left: 10px;
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 28px;
  cursor: pointer;
  width: 32px; height: 32px;
  line-height: 1;
}
.help-close:hover { color: var(--gold); }

/* Share toast */
.share-toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gold);
  color: #000;
  padding: 10px 20px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  z-index: 8500;
  box-shadow: 0 8px 24px rgba(246,196,83,0.4);
  animation: toastIn 260ms ease-out;
}
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 20px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* Sortable column headers */
table.results-table th.sortable {
  cursor: pointer;
  user-select: none;
  transition: color 120ms;
}
table.results-table th.sortable:hover { color: #fff; background: var(--panel-2); }
.sort-arrow {
  display: inline-block;
  margin-inline-start: 4px;
  font-size: 11px;
  color: var(--muted);
}
th.sort-asc .sort-arrow::before { content: '▲'; color: var(--gold); }
th.sort-desc .sort-arrow::before { content: '▼'; color: var(--gold); }

/* Pagination */
.pagination {
  display: flex; align-items: center; justify-content: center;
  gap: 10px;
  padding: 3px 0;
  margin-top: 2px;
  font-size: 11px;
  color: var(--text-dim);
}
.pagination button { padding: 2px 10px; font-size: 11px; }
.pagination button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Books filter */
.books-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}
.book-check {
  display: flex; align-items: center; gap: 6px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
  transition: border-color 120ms;
}
.book-check:hover { border-color: var(--gold); }
.book-check input { margin: 0; }
.book-check span { color: var(--text); }

/* Loading overlay */
.search-loading {
  position: fixed; inset: 0;
  background: rgba(11, 16, 32, 0.7);
  display: flex; align-items: center; justify-content: center;
  z-index: 8000;
  backdrop-filter: blur(3px);
}
.search-loading-inner {
  background: var(--panel);
  border: 1px solid var(--gold);
  border-radius: 12px;
  padding: 24px 40px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  min-width: 260px;
}
.spinner {
  width: 40px; height: 40px;
  border: 3px solid var(--border);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.search-loading-text { font-size: 13px; color: var(--text); }
.search-loading-status {
  font-size: 13px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  text-align: center;
  min-width: 240px;
}
.search-loading-tip {
  font-size: 11px;
  color: var(--gold);
  background: rgba(246,196,83,0.08);
  border: 1px solid rgba(246,196,83,0.3);
  border-radius: 6px;
  padding: 6px 10px;
  text-align: center;
  line-height: 1.5;
}
.search-cancel-btn {
  margin-top: 8px;
  padding: 7px 16px;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-2);
  border-radius: 6px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: all 120ms;
}
.search-cancel-btn:hover { border-color: var(--bad); color: var(--bad); }
.search-cancel-btn:disabled { opacity: 0.6; cursor: wait; border-color: var(--muted); color: var(--muted); }

/* ===== Consent banner (bottom, non-blocking) ===== */
.consent-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: rgba(0, 0, 0, 0.95);
  border-top: 1px solid var(--gold);
  padding: 12px 20px;
  z-index: 7000;
  backdrop-filter: blur(8px);
  box-shadow: 0 -4px 30px rgba(0,0,0,0.6);
  animation: slideUp 260ms ease-out;
}
@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
.consent-banner-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 1200px;
  margin: 0 auto;
  direction: rtl;
}
.consent-banner-ico {
  width: 32px; height: 32px; object-fit: contain;
  flex-shrink: 0;
}
.consent-banner-text {
  flex: 1;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text);
}
.consent-banner-text strong { color: var(--gold); }
.consent-banner-btn {
  flex-shrink: 0;
  padding: 9px 20px;
  background: var(--gold);
  color: #000;
  border: none;
  border-radius: 8px;
  font-weight: 700;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: filter 120ms;
}
.consent-banner-btn:hover { filter: brightness(1.1); }

/* Attention flash when user tries to search without agreeing */
.consent-banner.consent-banner-attention {
  animation: attentionPulse 600ms ease-in-out 3;
  box-shadow: 0 -4px 40px rgba(246,196,83,0.6);
  border-top-width: 2px;
}
@keyframes attentionPulse {
  0%, 100% { background: rgba(0,0,0,0.95); }
  50% { background: rgba(246,196,83,0.18); }
}

/* Anchor letter highlight inside context cell */
.cell-hebrew .anchor-letter {
  color: var(--gold);
  font-weight: 900;
  background: var(--gold-soft);
  padding: 0 2px;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px var(--gold);
}

@media (max-width: 700px) {
  .consent-banner-inner { flex-direction: column; align-items: stretch; }
  .consent-banner-btn { width: 100%; }
}

.status {
  font-size: 12px;
  color: var(--text-dim);
  background: #111;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
}
.status.ready { color: var(--good); border-color: var(--good); }
.status.err { color: var(--bad); border-color: var(--bad); }

/* ============================================================
   PAPERS BANNER — slim row beneath the topbar linking to the two
   ELS papers backing this tool. Dismissible (closes for the session).
   ============================================================ */
.papers-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px;
  background: linear-gradient(90deg, #15110a 0%, #1a140b 50%, #15110a 100%);
  border-bottom: 1px solid rgba(212, 175, 55, 0.25);
  color: #e8d59a;
  font-size: 0.85rem;
  font-family: 'Heebo', 'Noto Sans Hebrew', sans-serif;
  position: relative;
  z-index: 5;
}
.papers-banner.is-hidden { display: none; }
.papers-banner-label {
  color: rgba(212, 175, 55, 0.85);
  font-weight: 600;
  white-space: nowrap;
}
.papers-banner-link {
  color: #f4d77a;
  text-decoration: none;
  border-bottom: 1px solid rgba(212, 175, 55, 0.4);
  padding: 1px 0;
  transition: color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}
.papers-banner-link:hover {
  color: #ffe28a;
  border-bottom-color: #ffe28a;
}
.papers-banner-sep {
  color: rgba(212, 175, 55, 0.5);
  user-select: none;
}
.papers-banner-close {
  margin-inline-start: auto;
  background: transparent;
  border: 1px solid rgba(212, 175, 55, 0.3);
  color: rgba(212, 175, 55, 0.7);
  width: 22px;
  height: 22px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.papers-banner-close:hover {
  color: #fff;
  border-color: rgba(212, 175, 55, 0.7);
  background: rgba(212, 175, 55, 0.1);
}
@media (max-width: 600px) {
  .papers-banner { font-size: 0.78rem; padding: 5px 10px; gap: 6px; flex-wrap: wrap; }
  .papers-banner-label { width: 100%; }
}

/* ============================================================
   TAB BAR — v2 redesign
   The ELS tool is split into 4 tabs (Search Settings / Results /
   ELS Tables / Search In Matrix). The tab bar lives between the
   topbar and main, sticky to the top so it's always reachable.
   Tab 4 (matrix-search) is hidden by default and only shown when
   the user clicks "search for more words here" on Tab 3.
   ============================================================ */
.tab-bar {
  display: flex;
  align-items: stretch;
  gap: 0;
  /* Solid black to match the .topbar above. The previous translucent
     gradient broke the chrome continuity — the cosmos pattern showed
     through the tab area while the header was opaque, making the tab
     bar look like a floating strip instead of part of the page header.
     Solid black gives an unbroken header → tabs surface so the brand
     and tab labels read consistently. */
  background: #000;
  border-bottom: 1px solid rgba(212, 175, 55, 0.32);
  padding: 0 16px;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  /* Tab-bar lives outside the scrolling region (body has overflow:
     hidden) so it is structurally always visible — no sticky tricks,
     no z-index battles with content. */
  flex: 0 0 auto;
  box-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}
.tab-btn {
  background: none;
  border: none;
  padding: 18px 26px 16px;
  font-family: 'Frank Ruhl Libre', serif;
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--gold-dim, #9e8556);
  cursor: pointer;
  position: relative;
  transition: color 0.25s ease, background 0.25s ease, transform 0.15s ease, text-shadow 0.25s ease;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 3px solid transparent;
  border-top: 3px solid transparent;
}
[lang="en"] .tab-btn,
.tab-btn[data-locale="en"] {
  font-family: 'Cinzel', serif;
  font-size: 0.84rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
/* Per-tab decorative glyph — sets the "what kind of tab is this?"
   visual identity. Sized in em so it scales with the tab font. */
.tab-btn::before {
  content: '';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1em;
  height: 1.1em;
  font-size: 1em;
  line-height: 1;
  color: rgba(212, 175, 55, 0.55);
  transition: color 0.25s ease, transform 0.25s ease, text-shadow 0.25s ease;
}
.tab-btn[data-tab="settings"]::before { content: '⊕'; }
.tab-btn[data-tab="results"]::before  { content: '☰'; }
.tab-btn[data-tab="tables"]::before   { content: '⊞'; }
.tab-btn[data-tab="matrix-search"]::before { content: '⌖'; font-size: 1.15em; }

.tab-btn:hover {
  color: var(--gold, #d4af37);
  background: rgba(212, 175, 55, 0.07);
  transform: translateY(-1px);
}
.tab-btn:hover::before {
  color: rgba(212, 175, 55, 0.85);
  transform: scale(1.08);
}
.tab-btn.active {
  color: var(--gold, #d4af37);
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.04) 0%, rgba(212, 175, 55, 0.16) 100%);
  border-bottom-color: var(--gold, #d4af37);
  text-shadow: 0 0 16px rgba(212, 175, 55, 0.4);
}
.tab-btn.active::before {
  color: var(--gold, #d4af37);
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.7);
  transform: scale(1.08);
}
.tab-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}
.tab-btn[hidden] { display: none !important; }
.tab-btn[disabled] {
  color: rgba(158, 133, 86, 0.4);
  cursor: not-allowed;
  background: none;
}
.tab-btn[disabled]:hover {
  color: rgba(158, 133, 86, 0.4);
  background: none;
  transform: none;
}
.tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.22) 0%, rgba(212, 175, 55, 0.10) 100%);
  color: var(--gold);
  font-family: 'Heebo', sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 99px;
  border: 1px solid rgba(212, 175, 55, 0.5);
  min-width: 24px;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: inset 0 0 10px rgba(212, 175, 55, 0.18), 0 0 6px rgba(212, 175, 55, 0.12);
}
.tab-badge[hidden] { display: none; }
.tab-meta {
  font-size: 0.76rem;
  color: var(--gold-dim);
  font-family: 'Heebo', sans-serif;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0.02em;
  opacity: 0.88;
  font-style: italic;
}
.tab-meta:not(:empty)::before {
  content: '·';
  margin-inline-end: 6px;
  opacity: 0.5;
  font-style: normal;
}
.tab-close {
  font-size: 1.1rem;
  font-weight: 400;
  opacity: 0.5;
  transition: opacity 0.2s, color 0.2s;
  padding: 0 4px;
  line-height: 1;
}
.tab-btn:hover .tab-close { opacity: 0.8; }
.tab-close:hover {
  opacity: 1 !important;
  color: #ff6961;
}
/* Pulse animation when results just arrived */
.tab-btn.tab-fresh {
  animation: tab-pulse 1.2s ease-out 2;
}
@keyframes tab-pulse {
  0%, 100% { background: rgba(212, 175, 55, 0.10); }
  50%      { background: rgba(212, 175, 55, 0.28); }
}

/* Tabs layout — replaces .layout grid. The whole chain is flex
   column so the active tab-panel fills the viewport between
   header+tab-bar and footer, and the matrix-pane (also flex
   column) inside can flex-fill its tab-panel — which is what the
   legacy .layout grid achieved via minmax(0, 1.4fr) row sizing.
   Without this height-inheritance chain the matrix-wrap (flex:1)
   has no bounded parent, expands unboundedly, and the user sees
   "footer in a random place" + giant empty area on iPhone. */
/* Tabs-layout: the ONE and only scrolling area in the app. flex:1
   makes it consume all space between topbar/tab-bar above and the
   footer below; overflow:auto lets the active panel's content scroll
   internally while the chrome stays fixed in place. Body has
   overflow:hidden + height:100svh, so this is the user's scroll
   surface. Replaces the prior tabs-layout-as-content-sizer model
   (2026-04-29 and 2026-04-30 produced "footer floating" and
   "tab-bar overlaid" bugs that all derived from chrome elements
   trying to scroll-stick at viewport edges). */
.tabs-layout {
  display: flex;
  flex-direction: column;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
/* Settings tab (Tab 1) — natural-height form. */
.tab-panel {
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 12px;
  /* Center desktop content while leaving the tab-panel itself a
     full-width flex container; max-width applies to the inner pane
     (.sidebar/.results-pane/.matrix-pane) below. */
}
.tab-panel[hidden] { display: none !important; }
/* All tab panels are content-sized inside the scrolling main area.
   No min-height needed any more — the tabs-layout handles scrolling.
   Each panel just lays out its own content top-to-bottom. */
/* Sidebar (Tab 1) — input form. Natural height, page scrolls if it
   overflows. overflow-y:visible disables the legacy 100vh-based
   scroll from .sidebar that capped it under the old grid. */
.tab-panel > .sidebar {
  grid-row: auto;
  max-height: none;
  overflow-y: visible;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
}
/* Results pane (Tab 2) — flex-fills the tab-panel so its internal
   table + pagination layout works; results-table has its own
   horizontal scroll on phone. */
.tab-panel > .results-pane {
  grid-row: auto;
  max-height: none;
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
}
/* Matrix pane (Tab 3) — flex-fills the tab-panel; the matrix-wrap
   inside (flex:1, overflow:auto) gets bounded height and scrolls
   internally, exactly as the legacy grid layout worked. This is
   the actual fix for the "huge empty area + giant matrix table +
   floating footer" iPhone bug. */
.tab-panel > .matrix-pane {
  grid-row: auto;
  max-height: none;
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
}
/* Mobile (≤700px) — tighten tab bar for phone screens */
@media (max-width: 700px) {
  /* Phone-sized tabs: generous tap targets, clear labels.
     Reported 2026-04-30 — earlier values felt cramped under the thumb.
     Now 16px font, 16px vertical padding, full-row spread so the
     four tabs occupy the bar comfortably. */
  .tab-bar { padding: 0 6px; }
  .tab-btn {
    padding: 16px 14px;
    font-size: 1rem;
    letter-spacing: 0.02em;
    gap: 8px;
  }
  [lang="en"] .tab-btn { font-size: 0.88rem; letter-spacing: 0.08em; }
  .tab-badge { font-size: 0.78rem; padding: 2px 8px; min-width: 20px; }
  .tab-meta { display: none; }
  .tab-panel { padding: 8px; }
  .panel h2 { font-size: 18px; }
  .panel h3 { font-size: 15px; }
}
/* Tab 4 placeholder — visible while the matrix-search Tab is empty */
.matrix-search-placeholder {
  text-align: center;
  padding: 60px 20px;
  color: var(--gold-dim);
  font-family: 'Frank Ruhl Libre', serif;
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 520px;
  margin: 0 auto;
  opacity: 0.7;
}
/* ── END TAB BAR ─────────────────────────────────────────────── */

/* ===== Layout (LEGACY 2-column grid — kept for reference but no
   longer used; .tabs-layout above replaces it) ===== */
.layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  /* When a result is selected, the matrix becomes the focal point — give it
     more room. Default ratio: results 42%, matrix 58%. The user can still
     hit ⛶ הגדל on either pane for fullscreen. */
  grid-template-rows: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 12px;
  padding: 12px;
  flex: 1;
  min-height: 0;
}
/* When the user has explicitly expanded the results pane, override (results-pane.fullscreen handles it). */
.sidebar {
  grid-row: span 2;
  overflow-y: auto;
  max-height: calc(100vh - 140px);
}

/* ===== Panel ===== */
.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 14px;
}
.panel h2 {
  margin: 0 0 14px 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.3px;
}

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.label-text { font-size: 15px; color: var(--text-dim); font-weight: 600; }
.hint { font-size: 14px; color: var(--muted); line-height: 1.5; }
.hint.warn {
  color: var(--bad);
  background: rgba(255, 123, 138, 0.08);
  border: 1px solid rgba(255, 123, 138, 0.3);
  padding: 6px 10px;
  border-radius: 6px;
}
.checkbox-field { flex-direction: row; align-items: center; gap: 8px; }
.checkbox-field input { margin: 0; flex-shrink: 0; }
.checkbox-field span { font-size: 13px; color: var(--text); }

.smart-hint {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px;
  color: var(--accent);
  background: rgba(122, 167, 255, 0.08);
  border: 1px solid rgba(122, 167, 255, 0.3);
  border-radius: 6px;
  padding: 6px 10px;
  margin-top: 2px;
}
.mini-btn {
  background: var(--accent-2);
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 3px 10px;
  font-size: 11px;
  cursor: pointer;
  font-family: inherit;
}
.mini-btn:hover { background: var(--accent); }

/* ===== Advanced ===== */
.advanced-panel { padding: 10px 12px; }
.advanced-toggle {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  padding: 4px 2px;
  text-align: start;
}
.advanced-toggle:hover { color: var(--gold); }
.advanced-chev {
  display: inline-block;
  transition: transform 160ms;
  font-size: 10px;
  color: var(--muted);
}
.advanced-toggle.open .advanced-chev { transform: rotate(90deg); color: var(--gold); }
.advanced-body { padding-top: 12px; }
.advanced-body .field:last-child { margin-bottom: 0; }

/* ===== Inputs ===== */
input[type="text"], input[type="number"] {
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-family: var(--hebrew-ui-font);
  outline: none;
  transition: border-color 120ms;
  text-align: right;
  direction: rtl;
}
input[type="number"] { direction: ltr; text-align: left; }
input[type="text"]:focus, input[type="number"]:focus { border-color: var(--gold); }

textarea {
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-family: var(--hebrew-ui-font);
  outline: none;
  text-align: right;
  direction: rtl;
  resize: vertical;
  min-height: 54px;
  width: 100%;
  box-sizing: border-box;
  line-height: 1.5;
}
textarea:focus { border-color: var(--gold); }
#target {
  font-family: var(--hebrew-font);
  font-size: 24px;
  text-align: right;
  letter-spacing: 1px;
  font-weight: 600;
}

.range-pair { display: flex; align-items: center; gap: 8px; }
.range-pair input { flex: 1; min-width: 0; }
.range-pair .sep { color: var(--muted); font-size: 12px; }

.seg {
  display: flex;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.seg-btn {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-dim);
  padding: 6px 8px;
  font-size: 11.5px;
  font-family: inherit;
  cursor: pointer;
  transition: all 120ms;
}
.seg-btn:hover { color: var(--text); background: var(--panel-2); }
.seg-btn.active { background: var(--accent-2); color: #fff; font-weight: 600; }
/* Mode tabs (חיפוש חופשי / אות מוצא) — visually more tab-like and less button-y so users
   don't click them expecting a search action. */
.seg-btn[data-mode] { font-size: 11px; padding: 5px 8px; font-weight: 500; }

button.primary {
  width: 100%;
  padding: 12px;
  background: linear-gradient(180deg, var(--gold), var(--gold-2));
  color: #1a1410;
  border: none;
  border-radius: 8px;
  font-weight: 800;
  font-size: 15px;
  font-family: inherit;
  cursor: pointer;
  letter-spacing: 0.5px;
  transition: filter 120ms;
}
button.primary:hover { filter: brightness(1.1); }

button.secondary {
  padding: 7px 14px;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
}
button.secondary:hover { border-color: var(--gold); color: var(--gold); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }

.secondary-presets {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-top: 6px;
}
.mini-preset {
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
  direction: rtl;
}
.mini-preset:hover { border-color: var(--gold); color: var(--gold); }
.chip {
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
  direction: rtl;
}
.chip:hover { color: var(--text); border-color: var(--gold); }

/* ===== Results ===== */
.results-pane {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 12px;
  display: flex; flex-direction: column;
  min-height: 0; overflow: hidden;
}
/* Fullscreen mode for results pane */
.results-pane.fullscreen {
  position: fixed; inset: 0;
  z-index: 5000;
  border-radius: 0;
  padding: 16px;
}
/* Compact header: stats + meta + actions all on ONE row when there's room */
.results-header {
  display: flex; flex-direction: row; flex-wrap: wrap;
  align-items: center; gap: 6px 10px;
  margin-bottom: 4px;
}
.results-header h2 { margin: 0; font-size: 13px; color: var(--gold); flex-shrink: 0; }
.results-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; }
.results-top h2 { font-size: 13px !important; }
.results-meta {
  font-size: 11px;
  color: var(--text-dim);
  text-align: start;
  padding: 2px 9px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  line-height: 1.3;
  flex: 1 1 auto;
  min-width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.results-wrap {
  flex: 1; overflow: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  min-height: 0;
}

table.results-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  direction: rtl;
  table-layout: auto;
}
table.results-table th, table.results-table td {
  padding: 4px 8px;
  text-align: right;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
table.results-table { font-size: 12px; }
table.results-table tbody tr.main-row td { line-height: 1.3; }
table.results-table th {
  background: var(--bg-3);
  color: var(--gold);
  font-weight: 700;
  position: sticky; top: 0; z-index: 2;
  white-space: nowrap;
  font-size: 12px;
  letter-spacing: 0.3px;
}
table.results-table tbody tr.main-row { cursor: pointer; transition: background 120ms; }
table.results-table tbody tr.main-row:hover { background: var(--panel-2); }
table.results-table tbody tr.selected { background: var(--gold-soft); }
table.results-table tbody tr.selected td { border-color: var(--gold); }

/* Accordion expansion row */
tr.expansion { background: var(--bg-2); }
tr.expansion td { padding: 0; border-bottom: 1px solid var(--gold); }
.expansion-panel {
  padding: 14px 18px;
  font-size: 13px;
  direction: rtl;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}
.exp-letter {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  display: flex; align-items: center; gap: 10px;
}
.exp-letter .exp-char {
  font-family: var(--hebrew-font);
  font-size: 28px;
  font-weight: 700;
  color: var(--gold);
  min-width: 28px; text-align: center;
}
.exp-letter .exp-pos {
  font-size: 11px; color: var(--text-dim);
  display: flex; flex-direction: column; gap: 2px;
}
.exp-letter .exp-pos .big { color: var(--text); font-weight: 700; font-size: 13px; }

.col-score { width: 110px; text-align: center !important; font-variant-numeric: tabular-nums; line-height: 1.2; }
.col-score.has-matches { color: var(--gold); font-weight: 700; }
.col-score.no-matches { color: var(--muted); }
/* Notability v2 heat colours — at-a-glance reading. The score is in
 * [0, 1]; banded high/mid/low to match the user's "show me the
 * interesting ones" workflow. (2026-05-01) */
.col-score.v2-high { color: #6effa6; font-weight: 800; }   /* >=0.65 — bright green */
.col-score.v2-mid  { color: #ffdc5a; font-weight: 700; }   /* 0.35..0.65 — gold */
.col-score.v2-low  { color: var(--text-dim); font-weight: 600; }
/* Score breakdown stays on a SINGLE line by default — keeps rows compact.
   The full breakdown is also in the title (tooltip) when more detail is wanted. */
.col-score .score-breakdown {
  font-size: 9px; color: var(--text-dim);
  display: block; margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 110px;
}
.col-num   { width: 42px;  text-align: center !important; color: var(--muted); }
.col-skip  { width: 90px;  font-variant-numeric: tabular-nums; font-weight: 700; color: var(--gold); font-size: 14px; }
.col-step  { width: 72px;  font-variant-numeric: tabular-nums; color: var(--text-dim); }
.col-step.hidden { display: none; }
.col-dir   { width: 70px;  text-align: center !important; }
.col-start { width: 100px; font-variant-numeric: tabular-nums; }
.col-book  { width: 72px; }
.col-word  { min-width: 110px; }
.col-ctx   { min-width: 200px; }

.cell-hebrew {
  font-family: var(--hebrew-font);
  font-size: 17px;
  direction: rtl;
  text-align: right;
  letter-spacing: 1px;
  line-height: 1.3;
}
.cell-hebrew.word {
  color: var(--gold);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 2px;
}
.dir-arrow { font-size: 13px; }
.dir-arrow.fwd { color: var(--good); }
.dir-arrow.rev { color: var(--accent); }

/* ===== Matrix ===== */
.matrix-pane {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  display: flex; flex-direction: column;
  min-height: 0; overflow: hidden;
}
.matrix-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px; gap: 10px; flex-wrap: wrap;
}
.matrix-header h2 { margin: 0; font-size: 15px; color: var(--gold); }
.matrix-controls {
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; color: var(--text-dim); flex-wrap: wrap;
}
.matrix-controls label { display: inline-flex; align-items: center; gap: 5px; }
.matrix-controls input[type="number"] { width: 54px; padding: 5px 8px; }

.matrix-meta-row {
  display: flex; gap: 10px; align-items: center;
  margin-bottom: 6px;
  direction: rtl;
}
.matrix-meta {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
  direction: rtl;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.matrix-meta-more {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.5;
  padding: 6px 10px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 8px;
  direction: rtl;
}
.more-toggle {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 11px;
  font-family: inherit;
  padding: 3px 10px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.more-toggle:hover { border-color: var(--gold); color: var(--gold); }
.more-chev {
  transition: transform 160ms;
  font-size: 9px;
}
.more-toggle.open .more-chev { transform: rotate(90deg); color: var(--gold); }

.matrix-wrap {
  flex: 1; overflow: auto;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  min-height: 0;
  display: flex;
  /* `safe center` falls back to flex-start when the table is WIDER than
     the wrap, otherwise the table gets pinned to the center of the
     overflow box and the user can't scroll left to see the right-most
     (start-of-text in RTL) cells. Without `safe`, justify-content:center
     causes scroll-to-anchor to silently fail because the start-edge of
     the table is "behind" the visible viewport. */
  justify-content: safe center;
  align-items: flex-start;
}

.matrix-table {
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--hebrew-font);
  font-size: 24px;
  direction: rtl;
}
.matrix-table td {
  width: 30px; height: 32px;
  text-align: center;
  border: 1px solid transparent;
  padding: 0;
  unicode-bidi: isolate;
  font-weight: 600;
}
/* 3-tone rotating word colors */
.matrix-table td.word-a { color: var(--text-word-a); }
.matrix-table td.word-b { color: var(--text-word-b); }
.matrix-table td.word-c { color: var(--text-word-c); }

.matrix-table td.in-els {
  background: var(--gold);
  color: #1a1410 !important;
  font-weight: 900;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px var(--gold), 0 0 14px 4px rgba(246,196,83,0.6);
  position: relative;
  z-index: 3;
  font-size: 24px;
}
.matrix-table td.anchor {
  background: var(--gold);
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 2px var(--gold), 0 0 18px 6px rgba(246,196,83,0.8);
  z-index: 4;
}

/* Crossing ELSs from other results in current search — same skip, different anchors */
.matrix-table td.cross-els {
  background: rgba(122, 167, 255, 0.22);
  color: #d4e3ff !important;
  font-weight: 800;
  border: 1.5px solid var(--accent);
  position: relative;
  z-index: 2;
}
/* Multiples of the current skip — same column (every Kth row) */
.matrix-table td.mult-els {
  background: rgba(127, 211, 154, 0.18);
  color: #d4f0e0 !important;
  font-weight: 700;
  border: 1.5px dashed var(--good);
  position: relative;
  z-index: 2;
}

/* Per-occurrence corner badge — stamped on the FIRST letter of each
   secondary-term ELS so the user can tell "תורה #1" from "תורה #5"
   when many occurrences cluster in the same matrix. Only the start
   letter carries the badge so the table doesn't look polluted; the
   tooltip on every cell still includes the full "#N" context. */
.matrix-table td[data-occ] { position: relative; }
.matrix-table td[data-occ]::after {
  content: attr(data-occ);
  position: absolute;
  top: -2px;
  inset-inline-start: 0;
  font-family: 'Heebo', sans-serif;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  padding: 1px 3px 1px 3px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.65);
  color: #ffd97f;
  z-index: 5;
  pointer-events: none;
  letter-spacing: 0;
  border: 1px solid rgba(212, 175, 55, 0.4);
}

.matrix-legend {
  display: flex; gap: 6px;
  font-size: 11px; color: var(--text-dim);
  margin-bottom: 4px;
  min-height: 22px;
  /* Compact one-line strip with horizontal scroll for overflow.
     Saves vertical space; user can still see all chips by scrolling
     horizontally or by using the matrix-pane fullscreen view (where the
     legend gets its own area on the right rail). */
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}
.matrix-legend::-webkit-scrollbar { height: 5px; width: 5px; }
.matrix-legend::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.matrix-legend .chip-legend { flex-shrink: 0; }
/* In fullscreen, the legend gets vertical space (the right side rail) and can wrap */
.matrix-pane.fullscreen .matrix-legend {
  flex-wrap: wrap; overflow: visible; max-height: none; white-space: normal;
}
.matrix-legend .chip-legend {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  font-family: var(--hebrew-ui-font);
}
.matrix-legend .chip-word { font-size: 13px !important; letter-spacing: 0.5px !important; }
.matrix-legend .chip-count { font-size: 10px !important; }
.matrix-legend .chip-legend.empty { opacity: 0.45; }
.matrix-legend .chip-legend[data-term] { cursor: pointer; transition: all 120ms; }
.matrix-legend .chip-legend[data-term]:hover { border-color: var(--gold); }
.matrix-legend .chip-legend.hidden-term {
  opacity: 0.4;
  text-decoration: line-through;
  text-decoration-color: var(--muted);
}
/* Cross-highlight from matrix cell → legend chip */
.matrix-legend .chip-legend.chip-hover {
  border-color: var(--gold);
  background: rgba(230, 186, 74, 0.10);
  transform: scale(1.04);
}
.matrix-legend .chip-legend.chip-locked {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(230, 186, 74, 0.35);
  background: rgba(230, 186, 74, 0.14);
}
/* "+N ללא התאמה" summary pill that replaces a flood of empty chips when many flex targets are active */
.matrix-legend .chip-legend.chip-summary {
  opacity: 0.6;
  border-style: dashed;
  cursor: help;
}
/* Click-to-jump arrow on chips with at least 1 hit */
.matrix-legend .chip-legend .chip-jump {
  margin-inline-start: 4px;
  font-size: 10px;
  color: var(--gold);
  opacity: 0.7;
  font-weight: 700;
  letter-spacing: 0;
}
.matrix-legend .chip-legend.chip-jumpable:hover .chip-jump {
  opacity: 1;
}
.matrix-legend .chip-legend.chip-jumpable {
  position: relative;
}
/* X button on each chip — hide/show that target's hits */
.matrix-legend .chip-legend .chip-x {
  margin-inline-start: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 100ms;
}
.matrix-legend .chip-legend .chip-x:hover {
  background: rgba(220, 80, 80, 0.18);
  border-color: rgba(220, 80, 80, 0.5);
  color: #ff8080;
}
.matrix-legend .chip-legend.hidden-term .chip-x {
  background: rgba(120, 240, 160, 0.10);
  border-color: rgba(120, 240, 160, 0.4);
  color: #a8f5c1;
}

/* In-matrix-search chip — yellow theme to match the matrix overlay */
.matrix-legend .chip-legend.chip-in-window {
  border-color: #ffdc5a;
  background: rgba(255, 220, 90, 0.10);
}
.matrix-legend .chip-legend.chip-in-window .chip-word {
  color: #ffdc5a;
}
.matrix-legend .chip-legend .legend-dot.in-window-dot {
  background: rgba(255, 220, 90, 0.30);
  border: 1.5px dashed #ffdc5a;
}

/* ============================================================================
   CONSENT GATE — full-screen modal overlay shown on first visit. Bilingual.
   ============================================================================ */
#tfvConsentOverlay {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(8, 12, 24, 0.92);
  backdrop-filter: blur(8px);
  /* align-items: flex-start (not center) so when the modal is TALLER than
     the viewport the user can scroll all the way to the top. With
     align-items: center, the modal's top extends beyond the viewport in a
     non-scrollable way — known flexbox bug, cuts off the top of the
     consent modal on mobile. margin:auto-0 on the modal still vertically
     centers it when there IS room. */
  display: flex; align-items: flex-start; justify-content: center;
  padding: 20px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  font-family: var(--hebrew-ui-font, 'Heebo', system-ui, sans-serif);
  animation: tfvConsentFadeIn 220ms ease-out;
}
@keyframes tfvConsentFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
#tfvConsentOverlay.tfv-consent-fadeout {
  animation: tfvConsentFadeOut 200ms ease-in forwards;
}
@keyframes tfvConsentFadeOut {
  to { opacity: 0; }
}
.tfv-consent-modal {
  background: linear-gradient(180deg, #0f1530 0%, #0b1024 100%);
  border: 1px solid rgba(246, 196, 83, 0.35);
  border-radius: 16px;
  padding: 28px 32px 24px;
  max-width: 720px;
  width: 100%;
  /* margin auto on the cross axis = center vertically when room allows;
     the overlay handles overflow scroll. Removed max-height + overflow-y
     here so we don't have nested scroll containers. */
  margin: auto 0;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(246, 196, 83, 0.15);
  color: #d4dbef;
  position: relative;
}
.tfv-consent-langbar {
  position: absolute;
  top: 16px;
  inset-inline-end: 16px;
}
.tfv-consent-langbtn {
  background: rgba(246, 196, 83, 0.10);
  border: 1px solid rgba(246, 196, 83, 0.35);
  color: #f6c453;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 120ms;
}
.tfv-consent-langbtn:hover {
  background: rgba(246, 196, 83, 0.20);
}
.tfv-consent-title {
  margin: 0 0 6px 0;
  font-size: 22px;
  font-weight: 800;
  color: #f6c453;
  letter-spacing: 0.3px;
  padding-inline-end: 80px;  /* room for the lang button */
}
.tfv-consent-subtitle {
  margin: 0 0 18px 0;
  font-size: 13px;
  color: #a6b0cf;
}
.tfv-consent-sections {
  display: flex; flex-direction: column; gap: 14px;
  margin-bottom: 20px;
}
.tfv-consent-section {
  display: flex; gap: 14px;
  background: rgba(20, 28, 56, 0.6);
  border: 1px solid rgba(122, 167, 255, 0.18);
  border-radius: 10px;
  padding: 14px 16px;
}
.tfv-consent-icon {
  font-size: 28px;
  flex-shrink: 0;
  line-height: 1;
  padding-top: 2px;
}
.tfv-consent-content h2 {
  margin: 0 0 6px 0;
  font-size: 14px;
  font-weight: 700;
  color: #f6c453;
}
.tfv-consent-content p {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: #c5cce6;
}
.tfv-consent-content strong {
  color: #fff;
  font-weight: 700;
}
.tfv-consent-footer {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding-top: 14px;
  border-top: 1px solid rgba(122, 167, 255, 0.18);
}
.tfv-consent-termslink {
  font-size: 12px;
  color: #7aa7ff;
  text-decoration: none;
  border-bottom: 1px dotted rgba(122, 167, 255, 0.5);
  padding-bottom: 1px;
}
.tfv-consent-termslink:hover {
  color: #a6c4ff;
  border-bottom-color: #a6c4ff;
}
.tfv-consent-tinynote {
  font-size: 11px;
  color: #8893b8;
  margin: 0;
  text-align: center;
}
.tfv-consent-accept {
  margin-top: 4px;
  background: linear-gradient(180deg, #f6c453 0%, #e2a826 100%);
  border: none;
  color: #1a1410;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 12px 32px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(246, 196, 83, 0.30);
  transition: all 150ms;
  font-family: inherit;
}
.tfv-consent-accept:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 26px rgba(246, 196, 83, 0.42);
}
.tfv-consent-accept:active {
  transform: translateY(0);
}
@media (max-width: 600px) {
  .tfv-consent-modal { padding: 22px 18px 18px; }
  .tfv-consent-title { font-size: 18px; padding-inline-end: 70px; }
  .tfv-consent-section { padding: 10px 12px; gap: 10px; }
  .tfv-consent-icon { font-size: 22px; }
  .tfv-consent-content p { font-size: 12.5px; }
}

/* Collapse buttons for header / footer */
.collapse-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 11px;
  cursor: pointer;
  transition: all 120ms;
}
.collapse-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
}
.topbar.collapsed {
  height: 28px !important;
  padding: 2px 16px !important;
  overflow: hidden;
}
.topbar.collapsed .brand-text,
.topbar.collapsed .auth-btn,
.topbar.collapsed .archive-btn,
.topbar.collapsed .status,
.topbar.collapsed .icon-btn:not(.collapse-btn),
.topbar.collapsed .brand-logo {
  display: none !important;
}
.topbar.collapsed::before {
  content: 'TFV ELS';
  color: var(--gold);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1px;
}
.footer.collapsed {
  padding: 2px 8px !important;
}
.footer.collapsed .footer-inner {
  display: none;
}
.footer.collapsed::before {
  content: '· · ·';
  color: var(--text-dim);
  font-size: 10px;
}
.footer-collapse {
  margin-inline-start: 8px;
  vertical-align: middle;
}

/* "Search in this matrix" overlay — yellow dotted outline so it's distinct from
   regular secondary palette colors and from the gold anchor ELS. */
/* Multi-term in-matrix search overlay. The visual is intentionally
 * golden-anchor-like (so each hit reads as "an ELS, important") but
 * subordinate to the main anchor — anchor keeps its solid gold fill +
 * full glow + 900-weight letters, while a search hit gets a tinted
 * background, 2px solid colored border, 700-weight letter, and a
 * very small color-matched glow. User reported 2026-04-30: the prior
 * 1.5px outline-only treatment was too understated; the user wanted
 * "similar graphics to the anchored golden, but a bit less impressive
 * so the anchor will get its' place". This is that compromise.
 *
 * Color rotation is per-hit (per term × skip) so each hit has its
 * own palette slot — see pickColor() in app.js. */
.matrix-table td.in-window-search {
  position: relative;
  cursor: pointer;
  font-weight: 700;
  color: #fff;
  z-index: 2;
}
.matrix-table td.in-window-search.in-window-color-0 {
  background: rgba(255, 220,  90, 0.32);
  border: 2px solid #ffdc5a !important;
  box-shadow: 0 0 8px 1px rgba(255, 220,  90, 0.45);
}
.matrix-table td.in-window-search.in-window-color-1 {
  background: rgba( 92, 230, 255, 0.30);
  border: 2px solid #5ce6ff !important;
  box-shadow: 0 0 8px 1px rgba( 92, 230, 255, 0.45);
}
.matrix-table td.in-window-search.in-window-color-2 {
  background: rgba(255, 123, 255, 0.30);
  border: 2px solid #ff7bff !important;
  box-shadow: 0 0 8px 1px rgba(255, 123, 255, 0.45);
}
.matrix-table td.in-window-search.in-window-color-3 {
  background: rgba(181, 255,  92, 0.30);
  border: 2px solid #b5ff5c !important;
  box-shadow: 0 0 8px 1px rgba(181, 255,  92, 0.45);
}
.matrix-table td.in-window-search.in-window-color-4 {
  background: rgba(255, 155,  92, 0.30);
  border: 2px solid #ff9b5c !important;
  box-shadow: 0 0 8px 1px rgba(255, 155,  92, 0.45);
}
.matrix-table td.in-window-search.in-window-color-5 {
  background: rgba(195, 155, 255, 0.30);
  border: 2px solid #c39bff !important;
  box-shadow: 0 0 8px 1px rgba(195, 155, 255, 0.45);
}
.matrix-table td.in-window-search.in-window-color-6 {
  background: rgba(255, 138, 166, 0.30);
  border: 2px solid #ff8aa6 !important;
  box-shadow: 0 0 8px 1px rgba(255, 138, 166, 0.45);
}
/* Click-to-isolate state. When the user clicks a hit cell, that hit
 * becomes "focused" (intensified glow) and every OTHER hit becomes
 * "dimmed" (low-opacity, no glow) so the chosen ELS reads as a
 * single connected unit. The visual effect approximates a
 * connecting line — the focused hit's bright cells form a clear
 * trail through the dimmed background. Reported 2026-04-30 — when
 * many search hits overlap a user could not tell which letters
 * belonged to which ELS. */
.matrix-table td.in-window-search.search-focus {
  filter: brightness(1.25) saturate(1.25);
  z-index: 5;
}
.matrix-table td.in-window-search.search-focus.in-window-color-0 { box-shadow: 0 0 14px 3px rgba(255, 220,  90, 0.85); }
.matrix-table td.in-window-search.search-focus.in-window-color-1 { box-shadow: 0 0 14px 3px rgba( 92, 230, 255, 0.85); }
.matrix-table td.in-window-search.search-focus.in-window-color-2 { box-shadow: 0 0 14px 3px rgba(255, 123, 255, 0.85); }
.matrix-table td.in-window-search.search-focus.in-window-color-3 { box-shadow: 0 0 14px 3px rgba(181, 255,  92, 0.85); }
.matrix-table td.in-window-search.search-focus.in-window-color-4 { box-shadow: 0 0 14px 3px rgba(255, 155,  92, 0.85); }
.matrix-table td.in-window-search.search-focus.in-window-color-5 { box-shadow: 0 0 14px 3px rgba(195, 155, 255, 0.85); }
.matrix-table td.in-window-search.search-focus.in-window-color-6 { box-shadow: 0 0 14px 3px rgba(255, 138, 166, 0.85); }
.matrix-table td.in-window-search.search-dim {
  opacity: 0.18;
  box-shadow: none !important;
  filter: none;
}

/* In-matrix search busy state. Reported 2026-04-30 round 7 — the
 * previous busy state was so subtle the user had to look hard to
 * confirm the click registered. Now the button visibly shifts:
 * BRIGHTER gold gradient, a moving outline-ring around it, and the
 * text changes to "⏳ מחפש..." (set by JS). Impossible to miss
 * while still calm enough that the user is reassured rather than
 * alarmed. Clear "I'm working" without the "alert" feeling. */
#matrixSearchBtn.searching,
#matrixSearchBtn:disabled {
  background: linear-gradient(180deg, #ffe066, #f6c453) !important;
  color: #1a1410 !important;
  pointer-events: none;
  cursor: progress;
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  animation: tfv-search-pulse 0.9s ease-in-out infinite;
}
@keyframes tfv-search-pulse {
  0%, 100% {
    outline-offset: 2px;
    box-shadow: 0 0 10px 2px rgba(246, 196, 83, 0.55);
  }
  50% {
    outline-offset: 5px;
    box-shadow: 0 0 22px 6px rgba(246, 196, 83, 0.90);
  }
}
/* An animated bar that appears at the top of the matrix-in-window
 * panel during a search. Spans full panel width; gold gradient
 * sweeps left→right at 1.2s, looping until the search finishes.
 * Element added/removed from the DOM by app.js around the search. */
.matrix-in-window.searching::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: -1px;
  height: 3px;
  width: 30%;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  border-radius: 2px;
  animation: tfv-search-bar 1.2s linear infinite;
  pointer-events: none;
}
@keyframes tfv-search-bar {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}
.matrix-in-window {
  position: relative;
  overflow: hidden;
}
/* Make the result-line "מחפש..." pulse so it's clearly active state */
#matrixSearchResult.searching {
  color: var(--gold) !important;
  font-weight: 700;
  animation: tfv-result-fade 0.9s ease-in-out infinite;
}
@keyframes tfv-result-fade {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}
/* Results pane busy state — sweeping gold bar at top of the pane
 * during sort / re-render. Same animation as the matrix-in-window
 * busy bar so the visual language is consistent across the app.
 * Reported 2026-04-30 round 4 — sorting felt stuck without a
 * visible indicator. */
.results-pane.is-busy {
  position: relative;
}
.results-pane.is-busy::before {
  content: '';
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  height: 3px;
  width: 30%;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  border-radius: 2px;
  animation: tfv-search-bar 1.2s linear infinite;
  pointer-events: none;
  z-index: 100;
}
/* Per-color chip/dot variants in the legend */
.matrix-legend .chip-legend.in-window-color-0 { border-color: #ffdc5a; background: rgba(255, 220, 90, 0.10); }
.matrix-legend .chip-legend.in-window-color-1 { border-color: #5ce6ff; background: rgba( 92, 230, 255, 0.10); }
.matrix-legend .chip-legend.in-window-color-2 { border-color: #ff7bff; background: rgba(255, 123, 255, 0.10); }
.matrix-legend .chip-legend.in-window-color-3 { border-color: #b5ff5c; background: rgba(181, 255,  92, 0.10); }
.matrix-legend .chip-legend.in-window-color-4 { border-color: #ff9b5c; background: rgba(255, 155,  92, 0.10); }
.matrix-legend .chip-legend.in-window-color-5 { border-color: #c39bff; background: rgba(195, 155, 255, 0.10); }
.matrix-legend .chip-legend.in-window-color-6 { border-color: #ff8aa6; background: rgba(255, 138, 166, 0.10); }
.matrix-legend .chip-legend.in-window-color-0 .legend-dot.in-window-dot { border-color: #ffdc5a; background: rgba(255, 220, 90, 0.30); }
.matrix-legend .chip-legend.in-window-color-1 .legend-dot.in-window-dot { border-color: #5ce6ff; background: rgba( 92, 230, 255, 0.30); }
.matrix-legend .chip-legend.in-window-color-2 .legend-dot.in-window-dot { border-color: #ff7bff; background: rgba(255, 123, 255, 0.30); }
.matrix-legend .chip-legend.in-window-color-3 .legend-dot.in-window-dot { border-color: #b5ff5c; background: rgba(181, 255,  92, 0.30); }
.matrix-legend .chip-legend.in-window-color-4 .legend-dot.in-window-dot { border-color: #ff9b5c; background: rgba(255, 155,  92, 0.30); }
.matrix-legend .chip-legend.in-window-color-5 .legend-dot.in-window-dot { border-color: #c39bff; background: rgba(195, 155, 255, 0.30); }
.matrix-legend .chip-legend.in-window-color-6 .legend-dot.in-window-dot { border-color: #ff8aa6; background: rgba(255, 138, 166, 0.30); }
/* Hidden chip — user clicked to release the highlight but hasn't
 * removed the hit. Visual: faded chip body + dotted instead of solid
 * border so it reads as "stashed, click to restore". */
.matrix-legend .chip-legend.is-hidden {
  opacity: 0.45;
  border-style: dotted;
}
.matrix-legend .chip-legend.is-hidden .chip-word {
  text-decoration: line-through;
}
/* Clear-all chip — neutral red x to distinguish from per-hit ✕. */
.matrix-legend .chip-in-window-clear-all {
  border-color: rgba(255, 123, 138, 0.5);
  background: rgba(255, 123, 138, 0.05);
  color: #ff7b8a;
  cursor: pointer;
  font-weight: 700;
}
.matrix-legend .chip-in-window-clear-all:hover {
  background: rgba(255, 123, 138, 0.15);
}
/* In-matrix search row */
.matrix-in-window {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 6px;
  padding: 6px 10px;
  background: rgba(230, 186, 74, 0.05);
  border: 1px solid rgba(230, 186, 74, 0.2);
  border-radius: 8px;
  flex-wrap: wrap;
}
.matrix-in-window input[type="text"],
.matrix-in-window input[type="number"] {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 6px; padding: 4px 8px; color: var(--text);
  font-size: 13px;
}

/* Monte Carlo p-value badge + run button */
.mc-pvalue {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(122, 167, 255, 0.15);
  border: 1px solid rgba(122, 167, 255, 0.4);
  color: #b8d0ff;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  cursor: help;
}
.mc-pvalue.mc-medium {
  background: rgba(255, 196, 90, 0.18);
  border-color: rgba(255, 196, 90, 0.5);
  color: #ffd994;
}
.mc-pvalue.mc-strong {
  background: rgba(120, 240, 160, 0.18);
  border-color: rgba(120, 240, 160, 0.55);
  color: #a8f5c1;
}
.mc-run-btn {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 11px;
  cursor: pointer;
  transition: all 120ms;
}
.mc-run-btn:hover {
  border-color: var(--gold);
  color: var(--text);
  background: rgba(230, 186, 74, 0.08);
}

/* Cluster-mode flex controls — visible only in cluster mode */
.cluster-flex-controls {
  display: flex; flex-wrap: wrap; gap: 12px 18px;
  align-items: center; padding: 8px 0 4px;
}
.cluster-flex-controls .inline-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--text-dim);
}
.cluster-flex-controls input[type="number"] {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 6px; padding: 4px 8px; color: var(--text);
  font-size: 13px; font-variant-numeric: tabular-nums;
}
.cluster-flex-controls input[type="checkbox"] {
  accent-color: var(--gold);
}
.matrix-legend .chip-word { font-family: var(--hebrew-font); font-size: 15px; font-weight: 700; letter-spacing: 1px; }
.matrix-legend .chip-count { font-weight: 700; font-size: 11px; font-variant-numeric: tabular-nums; }
.legend-dot {
  display: inline-block; width: 12px; height: 12px; border-radius: 3px;
}
.legend-dot.primary { background: var(--gold); border: 1px solid #fff; }
.legend-dot.cross { background: rgba(122,167,255,0.3); border: 1px solid var(--accent); }
.legend-dot.mult { background: rgba(127,211,154,0.22); border: 1px dashed var(--good); }

/* Empty-state diagnostic — full-width container directly under the results
   header. Only shown when a search returns 0 hits. */
.empty-state-diag {
  margin: 12px 0 16px;
  padding: 14px 16px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(212, 175, 55, 0.18);
  border-radius: 12px;
  max-width: 100%;
  box-sizing: border-box;
}
.empty-state-diag table { width: 100%; }
.empty-state-diag .diag-details summary {
  list-style: none;
  cursor: pointer;
  color: var(--gold);
  font-size: 0.95em;
  user-select: none;
  padding: 4px 0;
}
.empty-state-diag .diag-details summary::-webkit-details-marker { display: none; }
.empty-state-diag .diag-details summary::before {
  content: '▸';
  display: inline-block;
  margin-inline-end: 8px;
  transition: transform 150ms;
}
.empty-state-diag .diag-details[open] > summary::before { transform: rotate(90deg); }

/* Floating Action Button — always-visible Search.
   Bottom-right in HE (RTL), bottom-left in EN (LTR). inset-inline-start
   resolves to: visually-right in dir=rtl, visually-left in dir=ltr —
   exactly what we want (the FAB sits where the reading flow begins). */
/* The floating-action button (FAB) is hidden by default — the inline
 * search button below the primary input is the canonical search
 * action since 2026-04-30 round 5. Kept in the DOM (and JS still
 * binds clicks to it) as a defensive fallback in case any browser
 * extension or future feature wants to show it again. To re-enable,
 * delete this rule. */
.fab-search { display: none !important; }

/* ------------------------------------------------------------------ */
/* Inline gold search buttons — shared design language between the
 * primary search button (in the search panel) and the in-matrix
 * "search in this table" button. Both have the same gold gradient
 * + Cinzel-style typography so users recognise BOTH as primary
 * search actions. The 'searching' state animates a yellow glowing
 * ring around the button while the search runs. Reported 2026-04-30
 * round 5 — user wanted (a) no floating FAB and (b) a recognisable
 * loading indicator on the in-matrix search button. */
.primary-search-btn,
#matrixSearchBtn {
  background: linear-gradient(180deg, var(--gold), var(--gold-2));
  color: #1a1410;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  padding: 10px 22px;
  font-family: var(--hebrew-ui-font);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.5px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(246, 196, 83, 0.28), 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
  white-space: nowrap;
}
.primary-search-btn:hover,
#matrixSearchBtn:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 6px 18px rgba(246, 196, 83, 0.42), 0 2px 5px rgba(0, 0, 0, 0.3);
}
.primary-search-btn:active,
#matrixSearchBtn:active { transform: translateY(0); }

/* Sized-down variant for the in-matrix search button (it sits inline
 * with the smaller skip-range inputs). Reported 2026-04-30 round 7
 * — the previous sizing felt too big and had a visible inner frame.
 * Trimmed padding, font, and radius; removed the dark inner border. */
#matrixSearchBtn {
  padding: 5px 12px;
  font-size: 13px;
  border-radius: 5px;
  border: none;
  font-weight: 700;
  letter-spacing: 0.3px;
}

/* Searching state: animated gold ring grows/shrinks around the button
 * to clearly signal "I'm working". Same animation key as the FAB-era
 * pulse for consistency. */
.primary-search-btn.searching,
#matrixSearchBtn.searching {
  pointer-events: none;
  cursor: progress;
  animation: tfv-search-pulse 0.9s ease-in-out infinite;
}

/* Layout: input + button on one row inside the primary-input field. */
.primary-input-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.primary-input-row > input {
  flex: 1 1 auto;
  min-width: 0;
}
.primary-input-row > .primary-search-btn {
  flex: 0 0 auto;
}

.fab-search {
  position: fixed;
  /* iOS keyboard avoidance — TWO-LAYER fallback because visualViewport
     alone proved unreliable on the user's iPhone (FAB still under the
     keyboard after the first fix, reported 2026-04-30 round 2).
     Layer A: body.keyboard-open is set by focusin/focusout listeners
     in app.js whenever any form field is focused. Provides a static
     lift of 300px, well above any iOS keyboard. Reliable on every
     iOS version regardless of visualViewport behaviour.
     Layer B: --kbd-inset is set by the visualViewport listener with
     the precise keyboard height when supported. body.keyboard-open
     blocks below uses max(--kbd-inset, 300px) so on browsers that
     give us a real number we use it; on browsers that don't, the
     300px static lift carries the day.
     env(safe-area-inset-bottom) keeps the FAB above the iPhone
     home indicator on notched devices when the keyboard is closed. */
  bottom: calc(24px + var(--kbd-inset, 0px) + env(safe-area-inset-bottom, 0px));
  right: auto;
  left: auto;
  inset-inline-start: 24px;
  z-index: 6000;
  transition: bottom 200ms ease;
  /* Force its own stacking context so body overflow:hidden never clips
     the FAB on iOS Safari. */
  will-change: transform;
  background: linear-gradient(180deg, var(--gold), var(--gold-2));
  color: #1a1410;
  border: none;
  border-radius: 999px;
  padding: 14px 28px;
  font-size: 16px;
  font-weight: 800;
  font-family: var(--hebrew-ui-font);
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(246,196,83,0.35), 0 2px 8px rgba(0,0,0,0.3);
  letter-spacing: 1px;
  transition: transform 120ms, box-shadow 120ms, filter 120ms;
}
.fab-search:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(246,196,83,0.5), 0 4px 10px rgba(0,0,0,0.4);
  filter: brightness(1.05);
}
.fab-search:active { transform: translateY(0); }
/* Removed the body.keyboard-open hide-FAB rule (was causing the FAB
 * to disappear unexpectedly — reported 2026-04-30 round 4 "the חפש
 * button was hidden, removed or something"). The keyboard avoidance
 * is now purely visualViewport-based via --kbd-inset; on browsers
 * that don't report it, the FAB simply stays at its normal position
 * and the user uses the keyboard's native Search key
 * (enterkeyhint="search") to submit while the keyboard is open. */
.fab-search.searching {
  opacity: 0.7;
  cursor: wait;
}
.fab-search.searching::after {
  content: '...';
  display: inline-block;
  margin-inline-start: 6px;
}
@media (max-width: 700px) {
  /* Push the FAB above the footer copyright line so it doesn't overlap. */
  .fab-search { bottom: 56px; padding: 10px 20px; font-size: 14px; }
}

/* Hover / click group highlight: emphasize all cells of one ELS match */
.matrix-table td.group-hover,
.matrix-table td.group-locked {
  outline: 3px solid #fff;
  outline-offset: -3px;
  filter: brightness(1.35) saturate(1.3);
  z-index: 10 !important;
}
.matrix-table td.group-locked {
  outline: 3px solid var(--gold);
}

/* Six secondary-term palettes */
.matrix-table td.sec-0 { background: rgba(180,100,255,0.32); color: #ece0ff !important; border: 1.5px solid #b07aff; font-weight: 800; }
.matrix-table td.sec-1 { background: rgba(240,100,180,0.32); color: #ffe0f0 !important; border: 1.5px solid #f070b0; font-weight: 800; }
.matrix-table td.sec-2 { background: rgba(250,160,80,0.32); color: #ffe8c0 !important; border: 1.5px solid #e09030; font-weight: 800; }
.matrix-table td.sec-3 { background: rgba(80,210,190,0.32); color: #c0f5ea !important; border: 1.5px solid #60c0b0; font-weight: 800; }
.matrix-table td.sec-4 { background: rgba(180,230,80,0.30); color: #e8f5b8 !important; border: 1.5px solid #a0c040; font-weight: 800; }
.matrix-table td.sec-5 { background: rgba(220,120,100,0.32); color: #ffd0c0 !important; border: 1.5px solid #c07060; font-weight: 800; }

/* Legend dot variants matching sec palette */
.legend-dot.sec-0 { background: rgba(180,100,255,0.32); border: 1px solid #b07aff; }
.legend-dot.sec-1 { background: rgba(240,100,180,0.32); border: 1px solid #f070b0; }
.legend-dot.sec-2 { background: rgba(250,160,80,0.32); border: 1px solid #e09030; }
.legend-dot.sec-3 { background: rgba(80,210,190,0.32); border: 1px solid #60c0b0; }
.legend-dot.sec-4 { background: rgba(180,230,80,0.30); border: 1px solid #a0c040; }
.legend-dot.sec-5 { background: rgba(220,120,100,0.32); border: 1px solid #c07060; }

/* Fullscreen matrix
   Layout: matrix takes most of the viewport; the "search in this table" panel
   docks to the right as a side rail since at this point the user has signaled
   they're focused on this specific cluster. */
.matrix-pane.fullscreen {
  position: fixed;
  inset: 0;
  z-index: 5000;
  border-radius: 0;
  max-height: 100vh !important;
  padding: 20px;
  display: grid !important;
  grid-template-columns: 1fr 320px;
  grid-template-rows: auto auto auto auto 1fr;
  grid-template-areas:
    "header     header"
    "meta       sidebar"
    "metaMore   sidebar"
    "legend     sidebar"
    "matrix     sidebar";
  gap: 10px;
}
.matrix-pane.fullscreen .matrix-header { grid-area: header; }
.matrix-pane.fullscreen .matrix-meta-row { grid-area: meta; margin: 0; }
.matrix-pane.fullscreen .matrix-meta-more { grid-area: metaMore; margin: 0; }
.matrix-pane.fullscreen .matrix-legend { grid-area: legend; margin: 0; }
.matrix-pane.fullscreen .matrix-wrap {
  grid-area: matrix;
  max-height: calc(100vh - 220px);
  overflow: auto;
}
/* The "search in this table" panel docks to the right side rail in fullscreen */
.matrix-pane.fullscreen .matrix-in-window {
  grid-area: sidebar;
  flex-direction: column;
  align-items: stretch;
  align-self: stretch;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  margin: 0;
  height: 100%;
  overflow-y: auto;
}
.matrix-pane.fullscreen .matrix-in-window::before {
  content: 'חפש בטבלה זו';
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  direction: rtl;
}
.matrix-pane.fullscreen .matrix-in-window .inline-label {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  font-size: 13px;
}
.matrix-pane.fullscreen .matrix-in-window .inline-label > span {
  color: var(--text-dim);
  font-size: 12px;
}
.matrix-pane.fullscreen .matrix-in-window input[type="text"],
.matrix-pane.fullscreen .matrix-in-window input[type="number"] {
  width: 100% !important;
  box-sizing: border-box;
}
.matrix-pane.fullscreen .matrix-in-window button {
  width: 100%;
  margin-top: 6px;
}
.matrix-pane.fullscreen .matrix-in-window .hint {
  display: block;
  margin: 8px 0 0 0 !important;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-dim);
  white-space: normal;
}
/* word boundary visuals removed per feedback — the 3-tone color rotation alone marks words */

/* ===== Footer ===== */
.footer {
  padding: 3px 12px;
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  font-size: 10px;
  color: var(--muted);
  display: flex; align-items: center; gap: 8px;
  position: relative;
  min-height: 22px;
  /* Body uses height:100svh + overflow:hidden so the footer sits
     structurally at the bottom of the viewport — no flex tricks,
     no margin-top:auto, no sticky. Always visible, always pinned. */
  flex: 0 0 auto;
}
.footer-inner {
  display: flex; gap: 8px;
  justify-content: center; align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.footer-link {
  color: var(--gold);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.4px;
}
.footer-link:hover { text-decoration: underline; }
.footer-sep { color: var(--border-2); }

/* Scrollbar polish */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-2); }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-2); }

@media (max-width: 900px) {
  .layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    padding: 6px;
    gap: 8px;
  }
  .sidebar { grid-row: auto; max-height: none; }
  .results-pane, .matrix-pane { max-height: 60vh; }
}

/* ─── Phones (≤ 700px wide) — research-grade tool, best on desktop. On phones
   we focus on READABILITY and a USABLE search panel. Tables horizontally
   scroll so they don't break the layout. iOS zoom-on-focus prevented by
   16px font on inputs. */
@media (max-width: 700px) {
  .topbar { padding: 6px 10px; flex-wrap: wrap; gap: 6px; }
  .brand-text .brand-sub { display: none; }
  .topbar-right .auth-btn,
  .topbar-right .archive-btn { display: none; }
  .status { font-size: 10px; }

  .layout::before {
    content: '⚠ הכלי מותאם בעיקר למחשב. במובייל ייתכן שתצטרכו לגלול לרוחב.';
    grid-column: 1 / -1;
    display: block;
    padding: 8px 12px;
    background: rgba(246, 196, 83, 0.10);
    border: 1px solid rgba(246, 196, 83, 0.35);
    border-radius: 8px;
    color: #f6c453;
    font-size: 12px;
    text-align: center;
    line-height: 1.5;
    margin-bottom: 4px;
  }
  html[lang="en"] .layout::before {
    content: '⚠ This tool is optimized for desktop. On mobile you may need to scroll horizontally.';
  }

  .panel { padding: 10px; }
  .panel h2 { font-size: 13px; }
  .field { margin-bottom: 10px; }
  input[type="text"], input[type="number"], textarea, select { font-size: 16px; }
  .seg-btn { padding: 6px 10px; font-size: 12px; }
  .secondary-presets { gap: 4px; }
  .secondary-presets .mini-preset { padding: 4px 8px; font-size: 11px; }
  .cluster-flex-controls { flex-direction: column; align-items: flex-start; gap: 8px; }
  .cluster-flex-controls .inline-label { width: 100%; }

  .results-pane { padding: 6px; }
  .results-header { gap: 4px 6px; }
  .results-top { gap: 6px; }
  .results-top h2 { font-size: 12px; }
  .stat-label { font-size: 8px; }
  .stat-value { font-size: 11px; }
  .stats-bar { gap: 3px; }
  .stat { padding: 1px 5px; }
  .results-meta { font-size: 10px; min-width: 0; padding: 1px 6px; }
  .results-actions button { padding: 2px 6px; font-size: 10px; }
  .toggle-inline { padding: 2px 6px; font-size: 10px; }
  .results-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  table.results-table { font-size: 11px; min-width: 600px; }
  table.results-table th, table.results-table td { padding: 3px 5px; }

  .matrix-pane { padding: 8px; max-height: 70vh; }
  .matrix-controls { font-size: 10px; gap: 6px; }
  .matrix-controls input[type="number"] { width: 42px; padding: 3px 5px; }
  .matrix-controls .secondary { padding: 3px 8px; font-size: 10px; }
  .matrix-meta { font-size: 11px; }
  .matrix-table td { width: 22px; height: 24px; font-size: 16px; }

  .pagination { gap: 6px; font-size: 10px; padding: 2px 0; }
  .pagination button { padding: 2px 6px; font-size: 10px; }

  .footer { padding: 4px 8px; font-size: 9px; }
  .footer-inner { gap: 4px; }
}