/* ------------------------------------------------------- cross-references -- */
/* The panel opened by double-clicking a unit (links.js), plus the marks that
 * say which units have references at all. */

#linkPanel {
  position: fixed; top: 14px; right: 14px; bottom: 14px; width: 372px;
  display: flex; flex-direction: column; z-index: 40;
  background: var(--panel-bg); color: var(--panel-ink);
  border: 1px solid #4a4030; border-radius: 10px;
  box-shadow: 0 18px 46px rgba(0, 0, 0, .5);
}
body.lp-open #reader { padding-right: 400px; }

#linkPanel header {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-bottom: 1px solid #3a3226; flex: none;
}
#linkPanel .lp-title {
  flex: 1; font-family: var(--serif); font-size: 19px;
  color: var(--accent-bright); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#linkPanel .lp-close {
  flex: none; width: 26px; height: 26px; line-height: 1;
  background: #2e281e; color: var(--panel-dim);
  border: 1px solid #463d2c; border-radius: 6px; cursor: pointer; font-size: 17px;
}
#linkPanel .lp-close:hover { color: var(--accent-bright); }

.lp-body { flex: 1; overflow-y: auto; padding: 4px 0 14px; }
.lp-slot { padding: 12px 14px 2px; }
.lp-slot + .lp-slot { border-top: 1px solid #322b20; }
.lp-slot h3 {
  font-family: var(--serif); font-size: 15px; font-weight: 400;
  color: var(--panel-ink); margin-bottom: 8px;
}
.lp-slot h3 small {
  font-family: var(--ui); font-size: 9px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--panel-dim); margin-right: 6px;
}

.lp-group { margin-bottom: 10px; }
.lp-corpus {
  display: flex; align-items: baseline; gap: 8px;
  padding: 3px 0 4px; border-bottom: 1px solid #2a2419; margin-bottom: 3px;
}
.lp-corpus span { font-family: var(--serif); font-size: 13px; color: var(--accent); }
.lp-corpus small {
  margin-left: auto; font-size: 9px; letter-spacing: .14em;
  text-transform: uppercase; color: #6e6249;
}

.lp-row {
  display: block; padding: 5px 7px; border-radius: 5px;
  text-decoration: none; color: inherit; cursor: pointer;
}
.lp-row:hover { background: #2b2418; }
.lp-ref {
  display: block; font-family: var(--serif); font-size: 15px;
  color: var(--panel-ink); line-height: 1.3;
}
.lp-row:hover .lp-ref { color: var(--accent-bright); }
/* the shared letters, as the matcher found them: no points, no word breaks
   the edition did not have */
.lp-ev {
  display: block; font-family: var(--serif); font-size: 12.5px;
  color: #8a7d64; line-height: 1.35; margin-top: 1px;
  padding-left: 34px;                      /* room for the floated letter count */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lp-n {
  float: left; margin-top: -17px; font-size: 9.5px; color: #6e6249;
  letter-spacing: .06em;
}
.lp-n::after { content: " ℓ"; }

.lp-more {
  display: block; width: 100%; margin-top: 4px; padding: 5px;
  background: #2a2419; color: var(--panel-dim);
  border: 1px solid #3a3226; border-radius: 6px; cursor: pointer;
  font-family: var(--ui); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
}
.lp-more:hover { color: var(--accent-bright); border-color: var(--accent); }

/* ---------------------------------------------------------------- marks -- */
/* Which units have references, and where to click. The numbered readers say it
 * with the number they already print -- it turns gold and becomes the handle,
 * so nothing in the justified text moves. The Gemara has no numbers on the
 * daf, so its segments get a hairline and a small badge. */
.haslinks { cursor: pointer; }

.refhandle {
  color: var(--accent) !important; font-weight: 700;
  cursor: pointer; border-radius: 4px; padding: 0 2px;
}
.refhandle:hover { color: var(--accent-bright) !important; background: rgba(176, 141, 63, .2); }

.seg.haslinks {
  text-decoration: underline dotted rgba(176, 141, 63, .38);
  text-underline-offset: 5px;
}
.refbadge {
  font-family: var(--ui); font-size: 10px; color: #7a6633; cursor: pointer;
  border: 1px solid #cdbf9e; border-radius: 9px; padding: 0 6px;
  margin-left: 6px; vertical-align: middle; white-space: nowrap; user-select: none;
}
.refbadge::before { content: "⇄ "; }
.refbadge:hover { background: #e9dcc0; color: #5a4520; }
.verse.linkopen, .seg.linkopen, .mishnah.linkopen, .unit.linkopen {
  background: rgba(176, 141, 63, .22); border-radius: 4px;
}

@media (max-width: 900px) {
  #linkPanel {
    top: auto; left: 8px; right: 8px; bottom: 8px; width: auto; max-height: 62vh;
  }
  body.lp-open #reader { padding-right: 0; padding-bottom: 64vh; }
}