/* Graphs, the drill trail, and the second reading pane.
   Gold on paper by day, gold on dark at night. Both read as a chart of stars. */

/* ------------------------------------------------------------- crumb trail */

.crumbs {
  position: sticky;
  top: 3.4rem;
  z-index: 29;
  display: flex;
  align-items: center;
  gap: .2rem;
  flex-wrap: wrap;
  padding: .45rem clamp(1rem, 4vw, 2.4rem);
  background: color-mix(in srgb, var(--paper-2) 92%, transparent);
  border-bottom: 1px solid var(--rule-soft);
  backdrop-filter: blur(10px);
  font: 500 .76rem/1 var(--ui);
}
.crumbs .crumb {
  appearance: none;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--ink-2);
  padding: .35em .6em;
  border-radius: .4em;
  font: inherit;
}
.crumbs .crumb:hover { background: var(--paper-3); color: var(--ink); }
.crumbs .crumb + .crumb::before {
  content: '\203A';
  margin-right: .6em;
  color: var(--ink-3);
}
.crumbs .crumb.root { color: var(--gold); letter-spacing: .04em; }
.crumbs .crumb.here { color: var(--ink); }

/* --------------------------------------------------------------- the panel */

.panel.wide { width: min(46rem, 100vw); }

/* ---------------------------------------------------------------- the graph */

.graph-intro {
  margin: 0 0 .9rem;
  font: 400 .84rem/1.55 var(--ui);
  color: var(--ink-2);
}

.graph-stage {
  position: relative;
  height: min(56vh, 30rem);
  border: 1px solid var(--rule);
  border-radius: .8rem;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 108%, color-mix(in srgb, var(--gold) 14%, transparent), transparent 62%),
    linear-gradient(180deg, var(--paper-2), var(--paper));
}
.graph-canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
}
.graph-canvas:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}

.graph-hover {
  position: absolute;
  z-index: 3;
  max-width: 15rem;
  padding: .6rem .75rem;
  border: 1px solid var(--rule);
  border-radius: .55rem;
  background: var(--field);
  box-shadow: var(--shadow-2);
  pointer-events: none;
  font: 400 .78rem/1.5 var(--ui);
  color: var(--ink-2);
  transform: translateX(-50%);
}
.graph-hover.flip { transform: translateX(-88%); }
.graph-hover b {
  display: block;
  font: 600 .82rem/1.3 var(--ui);
  color: var(--ink);
}
.graph-hover em {
  display: block;
  font-style: normal;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
  margin: .15rem 0 .3rem;
}

.graph-controls {
  display: flex;
  align-items: center;
  gap: .8rem;
  flex-wrap: wrap;
  margin: .8rem 0 0;
}

.seg {
  display: inline-flex;
  border: 1px solid var(--rule);
  border-radius: 2em;
  overflow: hidden;
}
.seg button {
  appearance: none;
  border: 0;
  background: none;
  cursor: pointer;
  padding: .45em 1em;
  font: 500 .74rem/1 var(--ui);
  color: var(--ink-2);
}
.seg button + button { border-left: 1px solid var(--rule); }
.seg button[aria-pressed="true"] {
  background: color-mix(in srgb, var(--gold) 18%, transparent);
  color: var(--ink);
}

.linky {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  font: 500 .76rem/1.4 var(--ui);
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: .22em;
}
.linky:hover { color: var(--ink); }

.graph-legend {
  display: flex;
  gap: .9rem;
  flex-wrap: wrap;
  font: 400 .7rem/1 var(--ui);
  color: var(--ink-3);
  margin-right: auto;
}
.graph-legend .key { display: inline-flex; align-items: center; gap: .4em; }
.graph-legend .key i {
  width: 1.5rem;
  height: 0;
  border-top: 2.4px solid var(--gold);
}
.graph-legend .allusion i { border-top-width: 1.5px; opacity: .7; }
.graph-legend .thematic i { border-top: 1px dashed var(--gold-soft); }
.graph-legend .spouse i,
.graph-legend .parent i { border-top-width: 2px; }
.graph-legend .sibling i { border-top-width: 1.2px; opacity: .7; }
.graph-legend .inferred i { border-top: 1.5px dashed var(--gold-soft); }

/* ----------------------------------------------------------------- the card */

.graph-card {
  margin-top: 1.1rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--rule);
  border-radius: .7rem;
  background: var(--field);
}
.graph-card .card-ref {
  margin: 0 0 .4rem;
  font: 600 .72rem/1 var(--ui);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
}
.graph-card .card-text {
  margin: 0 0 .6rem;
  font: 400 1rem/1.6 var(--serif);
  color: var(--ink);
}
.graph-card .card-meta {
  margin: .3rem 0;
  font: 400 .76rem/1.5 var(--ui);
  color: var(--ink-3);
}

.rel-list {
  list-style: none;
  margin: .6rem 0;
  padding: 0;
  display: grid;
  gap: .3rem;
  font: 400 .8rem/1.5 var(--ui);
  color: var(--ink-2);
  max-height: 11rem;
  overflow: auto;
}
.rel-list .how {
  display: inline-block;
  min-width: 5.4rem;
  color: var(--ink-3);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.rel-list .how.inferred { font-style: italic; }
.anchor, .verse-chips button {
  appearance: none;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  border-radius: 2em;
  padding: .2em .7em;
  cursor: pointer;
  font: 500 .72rem/1.5 var(--ui);
  color: var(--gold);
}
.anchor:hover, .verse-chips button:hover { border-color: var(--gold-soft); color: var(--ink); }
.verse-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  max-height: 4.6rem;
  overflow: hidden;
}
.verse-chips.open { max-height: none; }

/* ---------------------------------------------------------- text equivalent */

.graph-table { margin-top: 1rem; }
.graph-table h3 {
  margin: 1rem 0 .5rem;
  font: 600 .72rem/1 var(--ui);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
}
.graph-table .node-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .5rem;
}
.graph-table .node-list button {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  font: 500 .8rem/1.5 var(--ui);
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: .2em;
  text-decoration-color: var(--gold-soft);
}
.graph-table table {
  width: 100%;
  border-collapse: collapse;
  font: 400 .76rem/1.5 var(--ui);
}
.graph-table th {
  text-align: left;
  font-weight: 600;
  color: var(--ink-3);
  border-bottom: 1px solid var(--rule);
  padding: .3rem .4rem;
}
.graph-table td {
  padding: .3rem .4rem;
  border-bottom: 1px solid var(--rule-soft);
  color: var(--ink-2);
}

/* -------------------------------------------------------------- split pane */

.split-pane {
  position: fixed;
  z-index: 45;
  /* Under the header, never over it. The toolbar has to stay reachable while a
     second passage is open. */
  top: 3.4rem;
  right: 0;
  bottom: 0;
  width: min(34rem, 46vw);
  padding: 1.3rem 0 3rem;
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--paper-2);
  border-left: 1px solid var(--rule);
  box-shadow: var(--shadow-1);
  animation: split-in .26s var(--ease) both;
}
@keyframes split-in {
  from { opacity: 0; transform: translateX(1.2rem); }
  to { opacity: 1; transform: none; }
}
.split-head {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: 0 1.6rem .8rem;
  border-bottom: 1px solid var(--rule-soft);
}
.split-ref {
  margin: 0;
  margin-right: auto;
  font: 600 .72rem/1 var(--ui);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
}
.split-pane .passage {
  padding: 1.4rem 1.6rem 0;
  font-size: .94em;
}
.split-pane .verse.lit {
  background: color-mix(in srgb, var(--gold) 16%, transparent);
  border-radius: .25em;
}
body.split-open #app { padding-right: min(34rem, 46vw); }

/* An explorer that opens a passage keeps both on screen: the panel holds the
   right edge, the passage slides in beside it. */
.panel:not([hidden]) ~ .split-pane {
  right: min(27rem, 100vw);
  width: min(28rem, 34vw);
}
.panel.wide:not([hidden]) ~ .split-pane {
  right: min(46rem, 100vw);
  width: min(26rem, 30vw);
}

@media (max-width: 56.25rem) {
  .split-pane {
    top: auto;
    left: 0;
    width: 100vw;
    height: 58vh;
    padding-top: 1rem;
    z-index: 45;
    border-left: 0;
    border-top: 1px solid var(--rule);
    box-shadow: var(--shadow-2);
  }
  body.split-open #app { padding-right: 0; padding-bottom: 58vh; }
  .panel:not([hidden]) ~ .split-pane,
  .panel.wide:not([hidden]) ~ .split-pane { right: 0; width: 100vw; }
  .panel.wide { width: 100vw; }
  .graph-stage { height: 20rem; }
}

@media (prefers-reduced-motion: reduce) {
  .split-pane { animation: none; }
}