/* ============================================================================
   Web-only chrome: the control bar + hover cross-reference highlighting.
   Everything here is hidden or neutralised in print, and the highlight classes
   are colour-only (no box-model change) so they never perturb the daf layout.
   ========================================================================== */

#controls {
  position: fixed;
  top: 12px;
  inset-inline-start: 12px;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: #fffdf7;
  border: 1px solid #6b5836;
  border-radius: 7px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
  font-family: system-ui, sans-serif;
  font-size: 13px;
}
#controls button {
  font: inherit;
  cursor: pointer;
  padding: 4px 10px;
  border: 1px solid #6b5836;
  border-radius: 5px;
  background: #f4ecd9;
}
#controls button:hover {
  background: #e8dcc0;
}
/* The "main menu" link, dressed as a button. */
#controls a.ctl-home {
  font: inherit;
  padding: 4px 10px;
  border: 1px solid #6b5836;
  border-radius: 5px;
  background: #f4ecd9;
  color: inherit;
  text-decoration: none;
}
#controls a.ctl-home:hover {
  background: #e8dcc0;
}
#controls label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  user-select: none;
}

/* Collapse to the inline-start corner, leaving only the « handle. */
#controls .ctl-items {
  display: flex;
  align-items: center;
  gap: 12px;
}
#controls .ctl-handle {
  font-weight: 700;
  padding-inline: 9px;
}
#controls.collapsed {
  gap: 0;
  padding: 6px;
}
#controls.collapsed .ctl-items,
#controls:not(.collapsed) .ctl-expand {
  display: none;
}
/* Narrow screens: keep the bar inside the viewport and let its items wrap to rows. */
@media (max-width: 640px) {
  #controls {
    max-width: calc(100vw - 24px);
    flex-wrap: wrap;
  }
  #controls .ctl-items {
    flex-wrap: wrap;
    row-gap: 8px;
  }
}

/* Page range picker: From – To amud selects, flanked by prev/next. A single page is From = To. */
#controls .ctl-daf {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
#controls .ctl-daf select {
  font: inherit;
  cursor: pointer;
  padding: 3px 4px;
  border: 1px solid #6b5836;
  border-radius: 5px;
  background: #f4ecd9;
  color: inherit;
}
#controls .ctl-daf-sep {
  opacity: 0.55;
}
#controls .ctl-daf.is-disabled {
  opacity: 0.4;
}

/* Cross-reference highlight — a flat tint on each related element (the hovered/clicked
   word/verse/commentary, the union of referenced spans, and back-references). Colour
   only, no box-model impact, so it never reflows the frozen daf. Hover is a light tint;
   a click PINS the group with a stronger tint that persists until the next click. */
.xref-hot,
.xref-pin {
  border-radius: 2px;
  /* the hooks are inline spans, so the tint follows the (float-shaped) text across
     line breaks instead of filling a full-width block box */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.xref-hot {
  background: rgba(255, 214, 0, 0.25); /* hover — light, unobtrusive */
}
.xref-pin {
  background: rgba(255, 214, 0, 0.45); /* clicked: pinned, stronger; cleared by the next click */
}

/* Off-screen highlight indicators: small arrows pinned to the viewport edge, each pointing toward a
   highlighted element (hover or pinned) scrolled out of view — one per off-screen cluster, in any
   direction. Fixed to the viewport so they track scroll/zoom; pointer-events:none so they never
   block the daf, z-index below the control bar (1000). */
.xref-pointers {
  position: fixed;
  inset: 0;
  z-index: 1100; /* above the control bar (1000); pointer-events:none keeps the buttons clickable */
  pointer-events: none;
  overflow: hidden;
}
/* An arrow = a shaft (line) + a head, pointing +x by default; --a rotates it toward the target. The
   shaft gives it a clear orientation (not just a symmetric triangle). --c is the tint — keyed to the
   hover/pin colours, but opaque enough to read clearly as an arrow against the page. */
.xref-arrow {
  position: absolute;
  width: 34px;
  height: 22px;
  --c: rgba(255, 206, 0, 0.95); /* hover — bright */
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.5));
  transform: translate(-50%, -50%) rotate(var(--a, 0deg));
}
.xref-arrow.is-pin {
  --c: rgba(224, 148, 0, 1); /* pinned — deeper amber, fully opaque */
}
.xref-arrow::before {
  content: ""; /* the shaft */
  position: absolute;
  left: 0;
  top: 50%;
  width: 22px;
  height: 5.5px;
  transform: translateY(-50%);
  background: var(--c);
  border-radius: 3px;
}
.xref-arrow::after {
  content: ""; /* the head */
  position: absolute;
  right: 0;
  top: 50%;
  width: 0;
  height: 0;
  transform: translateY(-50%);
  border: solid transparent;
  border-width: 11px 0 11px 16px;
  border-left-color: var(--c);
}

@media print {
  #controls {
    display: none !important;
  }
  .xref-hot,
  .xref-pin {
    background: none !important;
  }
  .xref-pointers {
    display: none !important;
  }
}