/* TREE — The Tree of Life: the diagram, its controls and tables, the lenses drawn over it, and the pages that explain where its arrangements came from.

   One of ten stylesheets split out of a single 10,361-line tree.css.
   THE ORDER MATTERS AND IS NOT ALPHABETICAL. The layout links them as
   base → tree → correspondences → reference → tarot → chrome → astrology → history → sections → editing,
   and the rules inside this file keep the order they had in the original,
   so the cascade resolves exactly as it did before the split. */

/* --- tradition switch --------------------------------------------------- */

.switch {
  margin-top: 1.25rem;
  border-top: 1px solid var(--rule);
  padding-top: 0.9rem;
}

.switch__legend {
  margin: 0 0 0.5rem;
  color: var(--ink-faint);
  font-size: 0.8rem;
  font-variant: small-caps;
  letter-spacing: 0.04em;
}

.switch__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.switch__link {
  display: block;
  max-width: 22rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--rule);
  color: var(--ink-muted);
  text-decoration: none;
}

.switch__link--active {
  border-color: var(--ink-faint);
  color: var(--ink);
}

.switch__name { display: block; font-size: 1rem; }

.switch__description {
  display: block;
  color: var(--ink-faint);
  font-size: 0.8rem;
}

/* --- the diagram -------------------------------------------------------- */

.tree__svg {
  /* The viewBox is 128 x 157, so width is derived from a height cap to avoid
     letterboxing on short screens. */
  width: 100%;
  max-width: calc(76vh * 128 / 157);
  height: auto;
  display: block;
  margin: 0 auto;
  overflow: visible;
}

.tree__diagram-layout {
  min-width: 0;
}

.tree__diagram-layout--regions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(9.5rem, 11.5rem);
  gap: 0.75rem;
  align-items: stretch;
}

.region-callouts {
  position: relative;
  min-height: 100%;
  border-left: 1px solid var(--rule);
}

.region-callouts__connectors {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.region-callouts__connectors line {
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  opacity: 0.8;
}

/* A button, not a link: selecting a band puts its commentary in the panel
   beside the diagram, and the research page is one click further on from
   inside the panel — the same contract markers already have. `top` is set in
   PIXELS from the measured solve; the percentage fallback only shows for the
   one frame before the layout effect runs. */
.region-callout {
  position: absolute;
  left: 10%;
  right: 0;
  display: block;
  width: auto;
  text-align: left;
  font: inherit;
  cursor: pointer;
  padding: 0.45rem 0.45rem 0.45rem 0.7rem;
  border: 0;
  border-left: 3px solid var(--region-color);
  color: var(--ink);
  text-decoration: none;
  /* The ground, nearly opaque: the diagram must show faintly through a
     callout, and the hover state is the lift. The DATA is --region-color on
     the left edge, never this. */
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  transition: background 140ms ease, border-color 140ms ease;
}

.region-callout:hover,
.region-callout:focus-visible {
  background: var(--ground-lift);
  outline: 1px solid var(--ink-faint);
  outline-offset: 2px;
}

/* The selected band. Its border does the work, because the panel beside it is
   already saying which one is open. */
.region-callout--on {
  background: var(--ground-lift);
  border-left-width: 6px;
}
.region-callout--on .region-callout__name { color: var(--ink); }

.region-callout__name,
.region-callout__note,
.region-callout__research {
  display: block;
}

.region-callout__name {
  font-size: 0.82rem;
  line-height: 1.25;
}

.region-callout__note {
  margin-top: 0.15rem;
  color: var(--ink-muted);
  font-size: var(--type-label);
  line-height: 1.3;
}



.tree__ground { fill: var(--ground); }

.path { cursor: pointer; outline: none; }

.path__line {
  stroke-width: 1.6;
  stroke-linecap: round;
  opacity: 0.85;
  pointer-events: none;
}

.path--selected .path__line {
  stroke-width: 2.8;
  opacity: 1;
}

/* When a sphere is selected, the paths that do not touch it recede. */
.path--dimmed .path__line,
.path--dimmed .path__label {
  opacity: 0.16;
}

.path__label { pointer-events: none; }

.path__plate {
  fill: var(--ground);
  stroke-width: 0.25;
  stroke-opacity: 0.8;
}

.path__letter {
  font-size: 3px;
  font-family: var(--hebrew);
}

.path__number {
  font-size: 1.9px;
  fill: var(--ink);
  font-family: var(--serif);
}

.path:focus-visible .path__plate,
.path:focus-visible .path__line {
  stroke-width: 2.4;
}

.path--selected .path__plate {
  stroke-width: 0.8;
}

.sphere { cursor: pointer; outline: none; }

.sphere__body,
.sphere__body--hollow {
  stroke: var(--ink);
  stroke-width: 0.5;
  vector-effect: non-scaling-stroke;
}

/* Endpoints of the selected path. Not colour alone — a heavier stroke. */
.sphere--endpoint .sphere__body,
.sphere--endpoint .sphere__body--hollow {
  stroke-width: 2.4;
}

.sphere__number {
  font-size: 3.4px;
  font-family: var(--serif);
  stroke-width: 0.9;
  paint-order: stroke;
  pointer-events: none;
}

/* On the middle pillar the name sits over the paths running behind it, so it
   carries a halo of the ground colour to punch through them. */
.sphere__name {
  font-size: 4px;
  fill: var(--ink);
  font-family: var(--serif);
  stroke: var(--ground);
  stroke-width: 1.4;
  paint-order: stroke;
  pointer-events: none;
}

/* Selection is a ring, never colour alone — the spheres are already ten
   meaningful colours, one of which is black. */
.sphere__ring {
  stroke: var(--ink);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  opacity: 0.9;
  animation: ring-in 180ms ease-out;
}

@keyframes ring-in {
  from { opacity: 0; stroke-width: 5; }
  to   { opacity: 0.9; stroke-width: 2; }
}

.sphere:focus-visible .sphere__body,
.sphere:focus-visible .sphere__body--hollow {
  stroke-width: 2;
  stroke-dasharray: 2 1.5;
}

@media (prefers-reduced-motion: reduce) {
  .sphere__ring { animation: none; }
  * { scroll-behavior: auto !important; }
}

/* --- controls ----------------------------------------------------------- */

.tree__controls {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 1rem 1.5rem;
}

.scale {
  display: inline-flex;
  gap: 1rem;
  align-items: baseline;
  border: 0;
  margin: 0;
  padding: 0;
}

.scale__legend {
  padding: 0;
  color: var(--ink-faint);
  font-size: 0.8rem;
  font-variant: small-caps;
  letter-spacing: 0.04em;
}

.scale__option {
  display: inline-flex;
  gap: 0.35rem;
  align-items: baseline;
  color: var(--ink-muted);
  font-size: var(--type-small);
  cursor: pointer;
}

.scale__option input { accent-color: var(--ink); }

/* --- detail panel ------------------------------------------------------- */

.detail {
  border-top: 1px solid var(--rule);
  padding-top: 1.25rem;
}

.detail--empty { color: var(--ink-muted); }

.detail__prompt {
  margin: 0 0 0.75rem;
  font-size: 1.05rem;
  max-width: 34ch;
}

.detail__header {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 0.75rem;
  align-items: baseline;
}

.detail__number {
  grid-row: 1 / 3;
  margin: 0;
  font-size: 2.5rem;
  line-height: 1;
  color: var(--ink-faint);
}

.detail__name {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 400;
}

.detail__title {
  margin: 0;
  color: var(--ink-muted);
  font-style: italic;
}

.detail__hebrew {
  grid-column: 1 / -1;
  margin: 0.4rem 0 0;
  font-size: 1.5rem;
  font-family: var(--hebrew);
  color: var(--ink);
}

.detail__summary {
  margin: 1rem 0 1.25rem;
  color: var(--ink-muted);
  font-size: 0.95rem;
}

/* A marker's commentary is prose, not a table of correspondences, so it reads
   at body measure rather than at the muted summary size. */
.detail__body {
  margin: 0 0 0.9rem;
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.6;
}

.detail__list {
  margin: 0;
  border-top: 1px solid var(--rule);
}

.detail__row {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 0.75rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: var(--type-small);
}

.detail__term {
  color: var(--ink-faint);
  font-variant: small-caps;
  letter-spacing: 0.03em;
}

.detail__value { margin: 0; }

.detail__value--color {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.detail__hex {
  color: var(--ink-faint);
  font-size: 0.85em;
}

.swatch {
  width: 0.95rem;
  height: 0.95rem;
  border: 1px solid var(--rule);
  flex: none;
  display: block;
}

.swatch--quartered {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

/* Quadrant order runs clockwise from 12:00, so the 2x2 grid is
   top-right, bottom-right, bottom-left, top-left. */
.swatch--quartered span:nth-child(1) { grid-area: 1 / 2; }
.swatch--quartered span:nth-child(2) { grid-area: 2 / 2; }
.swatch--quartered span:nth-child(3) { grid-area: 2 / 1; }
.swatch--quartered span:nth-child(4) { grid-area: 1 / 1; }

/* --- tables ------------------------------------------------------------- */

.tabs {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid var(--rule);
}

.tabs__tab {
  appearance: none;
  background: none;
  border: 1px solid transparent;
  border-bottom: 0;
  margin-bottom: -1px;
  padding: 0.45rem 0.9rem;
  color: var(--ink-faint);
  font-family: var(--serif);
  font-size: var(--type-small);
  cursor: pointer;
}

.tabs__tab--active {
  border-color: var(--rule);
  background: var(--ground-lift);
  color: var(--ink);
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  padding: 0.85rem 0;
}

.filter {
  display: inline-flex;
  gap: 0.4rem;
  align-items: baseline;
  font-size: var(--type-small);
}

.filter__label {
  color: var(--ink-faint);
  font-variant: small-caps;
  letter-spacing: 0.03em;
}

.filter__select {
  background: var(--ground-lift);
  color: var(--ink);
  border: 1px solid var(--rule);
  font-family: var(--serif);
  font-size: var(--type-small);
  padding: 0.15rem 0.3rem;
}

/* Wide content scrolls inside its own box; the page never scrolls sideways. */
.tables__scroll {
  overflow-x: auto;
  max-width: 100%;
}

.table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--type-small);
}

.table__caption {
  text-align: left;
  padding: 0.75rem 0;
  color: var(--ink-faint);
  font-size: var(--type-small);
}

.table__th {
  text-align: left;
  padding: 0.4rem 0.6rem 0.4rem 0;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-faint);
  font-variant: small-caps;
  font-weight: 400;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.table__th--numeric,
.table__td--numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.table__sort {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.table__caret { padding-left: 0.25em; }

.table__row { cursor: pointer; }

.table__row:hover { background: var(--ground-lift); }

.table__row--selected {
  background: var(--ground-lift);
  outline: 1px solid var(--ink-faint);
}

.table__td,
.table__rowhead {
  padding: 0.35rem 0.6rem 0.35rem 0;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  font-weight: 400;
  vertical-align: middle;
}

.table__select {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  text-align: left;
}

.cell__color {
  display: inline-flex;
  gap: 0.45rem;
  align-items: center;
  white-space: nowrap;
}

.tree__noscript {
  padding: 1rem 1.25rem;
  color: var(--ink-muted);
}

/* --- a tradition with no settled path set ------------------------------- */

/* Without lines the pillars carry the structure. This is the one place the two
   modes should look genuinely different, and that is the point. */
.pillar__band {
  fill: var(--ground-lift);
  stroke: var(--rule);
  stroke-width: 0.4;
  vector-effect: non-scaling-stroke;
}

.pillar__rule {
  stroke: var(--rule);
  stroke-width: 0.4;
  stroke-dasharray: 1.5 2;
  vector-effect: non-scaling-stroke;
}

/* Drawn, but not counted among the ten. */
.sphere--uncounted .sphere__body--uncounted {
  stroke-width: 0.6;
  stroke-dasharray: 2 1.6;
  vector-effect: non-scaling-stroke;
}

.sphere__inner-name {
  font-size: 2.4px;
  font-family: var(--serif);
  pointer-events: none;
}

.detail__caveat {
  margin: 0.75rem 0 0;
  color: var(--ink-faint);
  font-size: var(--type-small);
  font-style: italic;
}

.detail__number--none {
  color: var(--rule);
}

.paths-note {
  margin-top: 1.5rem;
  border-top: 1px solid var(--rule);
  padding-top: 1rem;
  max-width: 62ch;
}

.paths-note__heading {
  margin: 0 0 0.4rem;
  font-size: 1rem;
  font-weight: 400;
  font-variant: small-caps;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
}

.paths-note__body {
  margin: 0;
  color: var(--ink-faint);
  font-size: var(--type-small);
  line-height: 1.65;
}

.switch__group + .switch__group {
  margin-top: 0.75rem;
}

.switch__family {
  margin: 0 0 0.35rem;
  color: var(--ink-faint);
  font-size: var(--type-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* --- lenses -------------------------------------------------------------- */

.tree--wide {
  grid-template-columns: 15rem minmax(0, 1fr) 21rem;
  grid-template-areas:
    "masthead masthead masthead"
    "rail     toggle   aside"
    "rail     figure   aside";
}

.tree__rail { grid-area: rail; min-width: 0; }

.tree--wide .tree__rail {
  position: sticky;
  top: 1.5rem;
}

.lenses__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.5rem;
}

.lenses__heading {
  margin: 0;
  font-size: 1rem;
  font-weight: 400;
  font-variant: small-caps;
  letter-spacing: 0.05em;
  color: var(--ink-muted);
}

.lenses__clear,
.lenses__opener,
.share {
  appearance: none;
  background: none;
  border: 1px solid var(--rule);
  color: var(--ink-muted);
  font-family: var(--serif);
  font-size: 0.82rem;
  padding: 0.2rem 0.6rem;
  cursor: pointer;
}

.lenses__clear:hover,
.lenses__opener:hover,
.share:hover {
  color: var(--ink);
  border-color: var(--ink-faint);
}

.lenses__opener { font-size: 0.95rem; padding: 0.5rem 1rem; }

.lenses__sheet {
  margin-top: 0.75rem;
  border: 1px solid var(--rule);
  background: var(--ground-lift);
  padding: 0.75rem 1rem 1rem;
}

.lens-group {
  border: 0;
  border-bottom: 1px solid var(--rule);
  margin: 0;
  padding: 0.75rem 0;
}

.lens-group:last-of-type { border-bottom: 0; }

.lens-group__legend {
  padding: 0;
  color: var(--ink-faint);
  font-size: var(--type-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lens-group__rule {
  margin: 0.15rem 0 0.5rem;
  color: var(--ink-faint);
  font-size: var(--type-label);
  line-height: 1.4;
}

.lens {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem;
  align-items: start;
  padding: 0.3rem 0;
  cursor: pointer;
}

.lens input { margin-top: 0.35rem; accent-color: var(--ink); }

.lens__name { display: block; color: var(--ink); font-size: var(--type-small); }

.lens__summary {
  display: block;
  color: var(--ink-faint);
  font-size: var(--type-label);
  line-height: 1.45;
}

.lens__details {
  display: inline-block;
  margin-top: 0.45rem;
  color: var(--ink);
  font-size: var(--type-label);
  text-decoration: none;
  border-bottom: 1px solid var(--ink-faint);
}

.lens__details:hover { border-bottom-color: var(--ink); }

/* --- overlay marks ------------------------------------------------------- */

.overlay__shape {
  vector-effect: non-scaling-stroke;
  stroke-width: 1;
}

.overlay__marker-rule {
  stroke-width: 0.5;
  stroke-dasharray: 2 2;
  opacity: 0.65;
  vector-effect: non-scaling-stroke;
}

/* The arches carry the top of the diagram on their own, with no numerals or
   sphere colour beside them, so they are drawn a little heavier than the
   horizontal rules further down. */
.overlay__negative-veil {
  stroke-width: 0.8;
  stroke-dasharray: 3 2.5;
  opacity: 0.85;
}

.overlay__marker-label {
  /* Sits ON the rule, knocked out of it. Small enough that the longest name
     ("The Three Veils of Negative Existence") still clears the Kether label. */
  font-size: 2.7px;
  font-family: var(--serif);
  opacity: 0.85;
  stroke-width: 1.2;
  paint-order: stroke;
}

/* The veils are the headline of their lens and they sit in open space above
   the Tree, so they are set larger than the horizontal rules below. Changing
   this size means changing VEIL_CHAR_W and VEIL_ASCENT in lib/labelGeometry.js
   to match, or the collision solver clears boxes the renderer does not use. */
.overlay__negative-veil-label {
  font-size: 4.2px;
  font-weight: 600;
  letter-spacing: 0.04px;
}

/* The wide transparent copy of each rule, which is what a finger actually
   hits. `transparent` is hit-testable; `none` is not. */
.overlay__marker-hit {
  stroke: transparent;
  stroke-width: 6;
  fill: none;
  cursor: pointer;
  pointer-events: stroke;
}

/* Focus reads through the drawing, the same way it does on a sphere or a path:
   the shape changes, rather than a browser outline boxing an SVG glyph. */
.overlay__marker-control {
  cursor: pointer;
  pointer-events: auto;
  outline: none;
}

.overlay__marker-control:hover .overlay__marker-label,
.overlay__marker-control:focus-visible .overlay__marker-label,
.overlay__marker-control--selected .overlay__marker-label {
  text-decoration: underline;
  opacity: 1;
}

.overlay__marker-control:focus-visible .overlay__marker-label {
  text-decoration-style: dashed;
}

/* The selected rule brightens and stops dashing, the same way a selected path
   is repainted rather than recoloured. */
.marker--selected .overlay__marker-rule {
  opacity: 1;
  stroke-width: 0.9;
  stroke-dasharray: none;
}

.overlay__trace {
  stroke-width: 2.4;
  stroke-linejoin: round;
  stroke-linecap: round;
  opacity: 0.95;
}

/* The one segment with no path beneath it. Knocked out of the trace and drawn
   in a contrasting colour, because it is the point of the whole overlay. */
.overlay__orphan-knockout {
  stroke: var(--ground);
  stroke-width: 3.6;
}

.overlay__orphan {
  stroke: #f04e23;
  stroke-width: 2.4;
  stroke-dasharray: 3 2.4;
  stroke-linecap: round;
}

.overlay__cursor {
  stroke-width: 1.4;
  stroke-dasharray: 2.4 2;
  opacity: 0.9;
  vector-effect: non-scaling-stroke;
}

.overlay__traversed { stroke-width: 2.4; opacity: 0.9; }
.overlay__traversal-current { stroke-width: 3.2; opacity: 1; stroke-linecap: round; }

.overlay__badge-text {
  font-size: 3px;
  font-family: var(--serif);
  fill: var(--ground);
}

@media (prefers-reduced-motion: reduce) {
  .overlay__trace,
  .overlay__cursor,
  .overlay__traversal-current {
    transition: none !important;
    animation: none !important;
  }
}

/* --- transport ----------------------------------------------------------- */

.transport {
  margin-top: 0.9rem;
  border-top: 1px solid var(--rule);
  padding-top: 0.75rem;
}

.transport__controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.transport__button {
  appearance: none;
  background: var(--ground-lift);
  border: 1px solid var(--rule);
  color: var(--ink);
  font-size: var(--type-small);
  line-height: 1;
  min-width: 2.75rem;
  min-height: 2.75rem;
  cursor: pointer;
}

.transport__button[disabled] { opacity: 0.35; cursor: default; }

.transport__position {
  margin: 0 0 0 0.35rem;
  color: var(--ink-faint);
  font-size: var(--type-small);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.transport__announce {
  margin: 0.5rem 0 0;
  color: var(--ink-muted);
  font-size: var(--type-small);
  max-width: 60ch;
}

/* --- legend and commentary ---------------------------------------------- */

.legend {
  margin-top: 1.25rem;
  border-top: 1px solid var(--rule);
  padding-top: 0.9rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.legend__heading {
  margin: 0 0 0.4rem;
  font-size: 0.8rem;
  font-weight: 400;
  font-variant: small-caps;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}

.legend__list { margin: 0; padding: 0; list-style: none; }

.legend__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem;
  align-items: start;
  padding: 0.15rem 0;
  max-width: 34ch;
}

.legend__swatch {
  width: 0.7rem;
  height: 0.7rem;
  margin-top: 0.3rem;
  border: 1px solid var(--rule);
}

.legend__name { display: block; font-size: var(--type-small); }

.legend__note {
  display: block;
  color: var(--ink-faint);
  font-size: var(--type-label);
  line-height: 1.45;
}

/* The commentary is the study guide. It gets the typographic care. */
.commentary__lens + .commentary__lens {
  margin-top: 1.5rem;
  border-top: 1px solid var(--rule);
  padding-top: 1rem;
}

.commentary__name {
  margin: 0 0 0.3rem;
  font-size: 1.35rem;
  font-weight: 400;
}

.commentary__summary {
  margin: 0 0 0.9rem;
  color: var(--ink-muted);
  font-style: italic;
  max-width: 62ch;
}

.commentary__body {
  margin: 0 0 0.8rem;
  font-size: 0.95rem;
  line-height: 1.7;
  max-width: 65ch;
}

.commentary__step {
  margin: 1rem 0 0;
  border-left: 2px solid var(--ink-faint);
  padding-left: 0.8rem;
  font-size: 0.95rem;
  line-height: 1.65;
  max-width: 62ch;
}

.commentary__step-index {
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

/* Under a sequence lens the path network recedes to a ghost, so the descent
   reads as a separate structure over the same ten spheres. */
.tree__paths--muted .path__line { opacity: 0.25; }
.tree__paths--muted .path__label { opacity: 0.3; }

.overlay__orphan-caption {
  font-size: 2.6px;
  font-family: var(--serif);
  fill: #f04e23;
  stroke: var(--ground);
  stroke-width: 1.2;
  paint-order: stroke;
}

/* --- narrow: the picker is a bottom sheet, the transport a bottom bar ----- */

/* Five channel groups do not go in a phone sidebar. */
.tree:not(.tree--wide) {
  padding-bottom: 10rem;
}

.tree:not(.tree--wide) .tree__rail {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  background: var(--ground);
  border-top: 1px solid var(--rule);
  padding: 0.6rem 1.25rem calc(0.6rem + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.tree:not(.tree--wide) .lenses__opener {
  width: 100%;
  min-height: 2.75rem;
}

.tree:not(.tree--wide) .lenses__sheet {
  order: -1;
  margin: 0 0 0.6rem;
  max-height: 58vh;
  overflow-y: auto;
}

.transport--fixed {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 4rem;
  z-index: 19;
  margin: 0;
  background: var(--ground);
  border-top: 1px solid var(--rule);
  padding: 0.6rem 1.25rem;
}

.transport--fixed .transport__announce {
  font-size: 0.82rem;
  max-height: 3.4rem;
  overflow: hidden;
}

/* --- what a sequence has reached ---------------------------------------- */

/* Every sphere the descent has passed through carries a ring, not only the
   cursor. All of it is derived from the step, so clearing the lens or stepping
   back removes it — there is no state to reset. */
.sphere__sequence-ring {
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
  opacity: 0.85;
  pointer-events: none;
}

.sphere--sequence-current .sphere__sequence-ring {
  stroke-width: 2.6;
  opacity: 1;
}

/* The paths the sequence actually runs along, lifted back out of the muted
   network. The Lightning Flash uses eight of the twenty-two. */
.tree__paths--muted .path--in-sequence .path__line {
  opacity: 0.95;
}

.tree__paths--muted .path--in-sequence .path__label {
  opacity: 1;
}

.path__sequence-glow {
  stroke-width: 3.6;
  stroke-linecap: round;
  opacity: 0.28;
  pointer-events: none;
}

.path--sequence-current .path__sequence-glow {
  stroke-width: 5;
  opacity: 0.5;
}

@media (prefers-reduced-motion: reduce) {
  .sphere__sequence-ring,
  .path__sequence-glow {
    transition: none !important;
    animation: none !important;
  }
}

/* --- Tree | Table --------------------------------------------------------- */

.viewtoggle {
  display: inline-flex;
  align-self: start;
  border: 1px solid var(--rule);
}

.viewtoggle__tab {
  appearance: none;
  background: none;
  border: 0;
  color: var(--ink-faint);
  font-family: var(--serif);
  font-size: var(--type-small);
  padding: 0.4rem 1.1rem;
  min-height: 2.5rem;
  cursor: pointer;
}

.viewtoggle__tab + .viewtoggle__tab { border-left: 1px solid var(--rule); }

.viewtoggle__tab--on {
  background: var(--ground-lift);
  color: var(--ink);
  /* The fill alone is 1.05:1 against the ground — not a distinction anybody
     can see. The site nav marks its current entry with a rule; so do these. */
  box-shadow: inset 0 -2px 0 var(--ink);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* A region lens becomes row grouping in Table view. */
.table__subhead th {
  text-align: left;
  padding: 0.9rem 0 0.35rem;
  border-bottom: 1px solid var(--rule);
  font-weight: 400;
  font-variant: small-caps;
  letter-spacing: 0.04em;
  color: var(--ink);
}

.table__subhead .legend__swatch {
  display: inline-block;
  margin-right: 0.5rem;
  vertical-align: baseline;
}

/* A sequence lens becomes the sort order, with its step commentary in the
   column that usually holds the summary. */
.table__noterow td {
  padding: 0 0 0.5rem;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-faint);
  font-size: var(--type-small);
  line-height: 1.6;
  max-width: 0;
}

/* The label layer is painted last; nothing in it takes pointer events. */
.tree__labels { pointer-events: none; }
/* Astrological glyphs need the symbol stack ahead of anything that would
   substitute emoji, and they carry U+FE0E. Same rule as the chart wheel's. */
.sphere__planet-symbol,
.astro-glyph {
  font-family: "Apple Symbols", "Segoe UI Symbol", "Noto Sans Symbols 2",
    "Symbola", var(--serif), serif;
  font-variant-emoji: text;
}

.sphere__planet-symbol { font-size: 6px; }

.planet-link { color: inherit; }

.scale__note {
  margin: 0.4rem 0 0;
  font-size: var(--type-label);
  color: var(--ink-muted);
}

.sphere-inscription:disabled .scale__option { opacity: 0.55; }
.sphere__hebrew-name { font-size: 4px; }

.label--dim { opacity: 0.16; }
.label--lit { opacity: 1; }

.label__knockout {
  fill: var(--ground);
  opacity: 0.92;
}

/* --- the growing-line reveal --------------------------------------------- */

/* pathLength="100" makes the dash values percentages, so no getTotalLength(),
   no ref, and it stays correct when the SVG scales. */
.seq__segment {
  stroke-width: 2.4;
  stroke-linecap: round;
  transition: stroke-dashoffset 900ms ease-in-out;
}

.seq__segment--orphan { stroke-width: 2.4; }

.overlay__trace-ghost {
  stroke-width: 1.6;
  opacity: 0.18;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.seq__arrow {
  opacity: 0.95;
  stroke: var(--ink);
  stroke-width: 0.5;
  stroke-linejoin: round;
  paint-order: stroke;
  transition: opacity 180ms ease-in-out;
}

/* Every sequence segment advertises its direction immediately. The transport
   still distinguishes progress: arrows ahead of the current step stay quiet,
   while reached arrows carry the full emphasis. */
.seq__arrow--pending { opacity: 0.72; }
.seq__arrow--revealed { opacity: 0.95; }

/* Where two consecutive steps of the Serpent do not touch. */
.seq__jump {
  stroke-width: 0.6;
  stroke-dasharray: 0.8 2;
  opacity: 0.4;
  vector-effect: non-scaling-stroke;
}

.seq__badge { stroke: var(--ground); stroke-width: 0.4; }

.seq__badge-text {
  font-size: 2.6px;
  font-family: var(--serif);
  fill: var(--ground);
}

.seq__caption,
.seq__endpoint {
  font-size: 2.6px;
  font-family: var(--serif);
  stroke: var(--ground);
  stroke-width: 1.1;
  paint-order: stroke;
}

.seq__endpoint { font-size: 2.9px; font-style: italic; }

/* Reduced motion means JUMP, not skip: the segment still appears at each step,
   just instantly. */
@media (prefers-reduced-motion: reduce) {
  .seq__segment,
  .seq__arrow { transition: none; }
}

.seq-note {
  margin: 0.9rem 0 0;
  max-width: 65ch;
  color: var(--ink-muted);
  font-size: var(--type-small);
  line-height: 1.65;
}

.seq-note strong { color: var(--ink); font-weight: 400; }

.transport__speed select {
  background: var(--ground-lift);
  color: var(--ink);
  border: 1px solid var(--rule);
  font-family: var(--serif);
  font-size: 0.82rem;
  padding: 0.15rem 0.3rem;
}

/* --- header: one bar, under 120px ---------------------------------------- */

.bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
}

.tree__masthead .tree__heading {
  font-size: 1.6rem;
  margin: 0;
  flex: none;
}

.bar .switch { margin: 0; border: 0; padding: 0; }

/* Two traditions fitted a phone. Three do not, and a fourth arrangement will
   not either — so the control scrolls inside itself rather than pushing the
   page sideways, which is the rule everywhere else in this stylesheet. */
.switch {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}

.segmented {
  display: inline-flex;
  border: 1px solid var(--rule);
}

.segmented__item {
  display: block;
  padding: 0.4rem 0.9rem;
  min-height: 2.5rem;
  line-height: 1.7rem;
  color: var(--ink-faint);
  text-decoration: none;
  font-size: var(--type-small);
  white-space: nowrap;
}

.segmented__item + .segmented__item { border-left: 1px solid var(--rule); }

.segmented__item--on {
  background: var(--ground-lift);
  color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--ink);
}

.segmented__family {
  display: block;
  font-size: var(--type-label);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
  line-height: 1;
}

.bar .viewtoggle { margin-left: auto; }

.about {
  margin-top: 0.6rem;
  max-width: 68ch;
}

.about__summary {
  cursor: pointer;
  color: var(--ink-faint);
  font-size: var(--type-small);
  font-variant: small-caps;
  letter-spacing: 0.04em;
}

.about__lead {
  margin: 0.6rem 0 0.4rem;
  color: var(--ink-muted);
  font-size: 0.95rem;
}

.about__provenance {
  margin: 0;
  color: var(--ink-faint);
  font-size: var(--type-small);
  line-height: 1.65;
  border-left: 1px solid var(--rule);
  padding-left: 0.9rem;
}

/* --- transport sits with the diagram, not at the foot of the page -------- */

.tree--wide .transport {
  position: sticky;
  bottom: 0;
  z-index: 5;
  background: var(--ground);
  border-top: 1px solid var(--rule);
  padding: 0.6rem 0 0.4rem;
  margin-top: 0;
}

/* The tree is never underneath the bar. */
.tree--wide .tree__figure { padding-bottom: 0.5rem; }

.lens--none .lens__name { color: var(--ink-faint); }
.lens--on .lens__name { color: var(--ink); }

/* --- Detail-panel correspondence link ----------------------------------- */

.detail-link {
  margin-top: 1.25rem;
  border-top: 1px solid var(--rule);
  padding-top: 1rem;
}

.detail-link__heading {
  margin: 0 0 0.45rem;
  color: var(--ink-faint);
  font-size: 0.8rem;
  font-weight: 400;
  font-variant: small-caps;
  letter-spacing: 0.04em;
}

.detail-link__body {
  margin: 0 0 0.75rem;
  color: var(--ink-muted);
  font-size: var(--type-small);
}

.detail-link__button {
  display: inline-block;
  padding: 0.42rem 0.7rem;
  border: 1px solid var(--ink-faint);
  color: var(--ink);
  text-decoration: none;
  font-size: var(--type-small);
}

.detail-link__button:hover {
  background: var(--ground-lift);
  border-color: var(--ink);
}

.lens-page__section-intro {
  margin: -0.2rem 0 1rem;
  max-width: 60ch;
  color: var(--ink-muted);
  font-size: var(--type-small);
}

.lens-group-page__correspondences {
  display: inline-block;
  margin-top: 0.35rem;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ink-faint);
  font-size: 0.82rem;
}

.lens-group-page__correspondences:hover { border-bottom-color: var(--ink); }

/* --- Sephirah preview block --------------------------------------------- */

.preview {
  margin-top: 1.25rem;
  border-top: 1px solid var(--rule);
  padding-top: 1rem;
}

.preview__heading {
  margin: 0 0 0.6rem;
  font-size: 0.8rem;
  font-weight: 400;
  font-variant: small-caps;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}

.preview__list { margin: 0; }

.preview__row {
  display: grid;
  grid-template-columns: 8rem 1fr auto;
  gap: 0.5rem 0.75rem;
  align-items: baseline;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--rule);
}

.preview__label {
  color: var(--ink-faint);
  font-variant: small-caps;
  letter-spacing: 0.03em;
  font-size: 0.8rem;
}

.preview__value {
  margin: 0;
  color: var(--ink);
  font-size: var(--type-small);
}

.preview__more {
  margin: 0.85rem 0 0;
  font-size: var(--type-small);
}

.preview__more a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ink-faint);
}

.preview__more a:hover { border-bottom-color: var(--ink); }

/* --- Lens detail page ---------------------------------------------------- */

.lens-page {
  max-width: 62rem;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}

.lens-page__channel {
  margin: 0 0 0.25rem;
  color: var(--ink-faint);
  font-size: var(--type-label);
  font-variant: small-caps;
  letter-spacing: 0.04em;
}

.lens-page__title {
  margin: 0;
  font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem);
  font-weight: 400;
}

.lens-page__summary {
  margin: 0.35rem 0 0;
  max-width: 62ch;
  color: var(--ink-muted);
  line-height: 1.65;
}

.lens-page__section {
  margin-top: 2rem;
  border-top: 1px solid var(--rule);
  padding-top: 1rem;
}

.lens-page__section p {
  max-width: 68ch;
  color: var(--ink-muted);
}

.lens-page__heading {
  margin: 0 0 0.75rem;
  font-size: 1.05rem;
  font-weight: 400;
  font-variant: small-caps;
  letter-spacing: 0.03em;
}

.lens-group-page + .lens-group-page {
  margin-top: 1.4rem;
}

.lens-group-page__heading {
  margin: 0 0 0.25rem;
  font-size: 1rem;
  font-weight: 400;
}

.lens-group-page__heading a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ink-faint);
}

.lens-group-page__note {
  margin: 0 0 0.65rem;
  color: var(--ink-faint);
  font-size: var(--type-small);
}

.lens-group-page__items {
  margin: 0.5rem 0 0;
  padding-left: 1.35rem;
}

.lens-group-page__items li + li {
  margin-top: 0.55rem;
}

.lens-group-page__meta {
  display: block;
  color: var(--ink-faint);
  font-size: var(--type-small);
}

.lens-group-page__items p,
.lens-page__empty {
  margin: 0.15rem 0 0;
  color: var(--ink-muted);
  font-size: var(--type-small);
}

/* --- Region research pages --------------------------------------------- */

.region-research__parent {
  margin: 0.75rem 0 0;
  color: var(--ink-faint);
  font-size: var(--type-small);
}

.region-research__parent a,
.region-research__member-link {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ink-faint);
}

.region-research__table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

.region-research__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.region-research__table th,
.region-research__table td {
  min-width: 8.5rem;
  padding: 0.55rem 0.7rem 0.55rem 0;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
  line-height: 1.45;
}

.region-research__table thead th {
  color: var(--ink-faint);
  font-weight: 400;
  font-variant: small-caps;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.region-research__table tbody th {
  color: var(--ink);
  font-weight: 400;
}

.region-research__number {
  display: inline-block;
  min-width: 1.5rem;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.region-research__member-link {
  white-space: nowrap;
}

/* --- Qabalah history and Gra arrangement ---------------------------------
   These pages are reading pages, not dashboards. Their small structures keep
   a long argument navigable without turning every paragraph into a card. */

.qabalah-history__terms,
.qabalah-history__principles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 1rem 0;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.qabalah-history__principles { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.qabalah-history__terms article,
.qabalah-history__principles article {
  padding: 1rem;
  background: var(--ground);
}

.qabalah-history__terms h3,
.qabalah-history__principles h3,
.gra-study__class h3,
.gra-study__plate-notes h3,
.qabalah-history__aside h3 {
  margin: 0;
  font-size: 0.96rem;
  font-weight: 500;
}

.qabalah-history__terms p,
.qabalah-history__principles p,
.qabalah-history__aside p {
  margin: 0.45rem 0 0;
  color: var(--ink-muted);
  font-size: var(--type-small);
  line-height: 1.6;
}

.qabalah-history__date {
  margin: 0 0 0.25rem !important;
  color: var(--ink-faint) !important;
  font-size: var(--type-label);
  font-variant: small-caps;
  letter-spacing: 0.05em;
}

.qabalah-history__cite {
  font-size: 0.72em;
  vertical-align: super;
  text-decoration: none;
}

.qabalah-history__aside {
  margin: 1.25rem 0;
  max-width: 68ch;
  padding: 1rem 1.15rem;
  border-left: 3px solid var(--ink-faint);
  background: var(--ground-lift);
}

.qabalah-history__next { margin-top: 1rem; font-size: var(--type-small); }

.qabalah-history__sources {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: research-source;
}

.qabalah-history__sources li {
  display: grid;
  grid-template-columns: 2rem max-content minmax(0, 1fr);
  gap: 0.35rem 0.7rem;
  align-items: baseline;
  padding: 0.85rem 0;
  border-top: 1px solid var(--rule);
  counter-increment: research-source;
  scroll-margin-top: 1rem;
}

.qabalah-history__sources li::before {
  content: counter(research-source) ".";
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.qabalah-history__sources li > a,
.qabalah-history__sources li > span:not(.badge) { grid-column: 3; }
.qabalah-history__sources li > span:not(.badge) { color: var(--ink-muted); font-size: 0.82rem; line-height: 1.5; }
.qabalah-history__sources .badge { grid-column: 2; grid-row: 1 / span 2; }

.gra-study__equation {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 1.25rem 0;
}

.gra-study__equation div {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.1rem 0.55rem;
  padding: 0.9rem;
  border: 1px solid var(--rule);
}

.gra-study__equation strong { grid-row: 1 / span 2; font-size: 1.9rem; font-weight: 400; }
.gra-study__equation span { color: var(--ink); font-size: var(--type-small); }
.gra-study__equation span[aria-hidden] { display: none; }
.gra-study__equation em { color: var(--ink-muted); font-size: var(--type-label); font-style: normal; }

.gra-study__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 1.5rem;
  max-width: 68ch;
  margin: 1rem 0;
}

.gra-study__facts div { padding: 0.65rem 0; border-top: 1px solid var(--rule); }
.gra-study__facts dt { font-size: var(--type-label); color: var(--ink-faint); }
.gra-study__facts dd { margin: 0.2rem 0 0; color: var(--ink-muted); font-size: var(--type-small); line-height: 1.5; }

.gra-study__classes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.gra-study__class { padding: 1rem; border: 1px solid var(--rule); }
.gra-study__class-orientation { margin: 0 0 0.2rem !important; color: var(--ink-faint) !important; font-size: var(--type-label); text-transform: uppercase; letter-spacing: 0.05em; }
.gra-study__class ol { margin: 0.75rem 0 0; padding: 0; list-style: none; }
.gra-study__class li { padding: 0.45rem 0; border-top: 1px solid var(--rule); }
.gra-study__class a { display: flex; align-items: baseline; gap: 0.45rem; text-decoration: none; }
.gra-study__class small { display: block; margin: 0.12rem 0 0 2rem; color: var(--ink-faint); font-size: var(--type-label); }
.gra-study__letter { min-width: 1.55rem; font-size: 1.15rem; color: var(--ink); }

.gra-study__plate-notes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 1rem 0 1.25rem;
}

.gra-study__plate-notes article { position: relative; padding: 1rem 1rem 1rem 3.6rem; border: 1px solid var(--rule); }
.gra-study__plate-notes p:not(.gra-study__plate-letter) { margin: 0.45rem 0 0; color: var(--ink-muted); font-size: var(--type-small); line-height: 1.55; }
.gra-study__plate-letter { position: absolute; left: 1rem; top: 0.72rem; margin: 0 !important; color: var(--ink) !important; font-size: 1.7rem; }

.gra-study__comparison-table { min-width: 44rem; }
.gra-study__comparison-table th,
.gra-study__comparison-table td { vertical-align: top; line-height: 1.55; }

.gra-study__limits { max-width: 68ch; margin: 0.5rem 0 0; padding-left: 1.2rem; color: var(--ink-muted); }
.gra-study__limits li { padding: 0.4rem 0; line-height: 1.6; }
.gra-study__limits strong { color: var(--ink); font-weight: 500; }

@media (max-width: 720px) {
  .qabalah-history__terms,
  .qabalah-history__principles,
  .gra-study__equation,
  .gra-study__classes,
  .gra-study__plate-notes { grid-template-columns: 1fr; }

  .qabalah-history__sources li { grid-template-columns: 1.8rem minmax(0, 1fr); }
  .qabalah-history__sources .badge { grid-column: 2; grid-row: auto; justify-self: start; }
  .qabalah-history__sources li > a,
  .qabalah-history__sources li > span:not(.badge) { grid-column: 2; }
}

@media (max-width: 480px) {
  .gra-study__facts { grid-template-columns: 1fr; }
}

.merkavah__badges { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.8rem; }
.lens-page__channel .icon { margin-right: 0.3rem; }

/* --- the chariot literature --------------------------------------------- */

.merkavah__period-source {
  border-left: 2px solid var(--rule);
  padding-left: 1rem;
  color: var(--ink-muted);
}

.merkavah__text {
  margin: 0 0 2.25rem;
  padding: 0 0 1.75rem;
  border-bottom: 1px solid var(--rule);
}
.merkavah__text:last-child { border-bottom: 0; }

.merkavah__title { margin: 0; font-size: 1.2rem; }
.merkavah__hebrew {
  margin-left: 0.5rem;
  font-size: 1.05rem;
  color: var(--ink-muted);
  font-weight: normal;
}
.merkavah__subtitle { margin: 0.1rem 0 0; font-style: italic; color: var(--ink-muted); }

/* The dating is a RANGE with a disagreement attached, never a year, so it is
   styled as a caveat rather than as a fact. */
.merkavah__dating {
  margin: 0.4rem 0 0.9rem;
  font-size: 0.8rem;
  font-variant: small-caps;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}

.merkavah__summary,
.merkavah__significance,
.merkavah__authorship {
  margin: 0 0 0.8rem;
  max-width: 72ch;
  line-height: 1.65;
}
.merkavah__significance { color: var(--ink-muted); }
.merkavah__authorship { font-size: var(--type-small); color: var(--ink-muted); }

.merkavah__contested {
  margin: 0 0 0.8rem;
  max-width: 72ch;
  font-size: var(--type-small);
  line-height: 1.6;
  color: var(--ink-muted);
}

.merkavah__editions { margin: 1rem 0 0; }
.merkavah__editions > div { margin: 0 0 0.7rem; }
.merkavah__editions dt { font-size: var(--type-small); color: var(--ink); }
.merkavah__editions dd {
  margin: 0.2rem 0 0;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--ink-muted);
  max-width: 72ch;
}

/* Free to read is not free to reproduce, and the badge says which. */
.merkavah__restricted {
  margin-left: 0.4rem;
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--rule);
  border-radius: 2px;
  font-size: var(--type-label);
  font-variant: small-caps;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
}

.merkavah__links { margin: 0.8rem 0 0; font-size: 0.82rem; }
.merkavah__links a { margin-right: 0.9rem; }

/* A shadcn-style collapsible card for a record whose title and date are enough
   to scan the collection. The full record, including every nested source and
   caveat disclosure, remains directly underneath its trigger. */
.reference-card { padding: 0; overflow: clip; }
.reference-card__trigger {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.7rem;
  align-items: start;
  min-height: 54px;
  padding: 0.9rem 1rem;
  cursor: pointer;
  list-style: none;
}
.reference-card__trigger::-webkit-details-marker { display: none; }
.reference-card__trigger:hover { background: var(--history-band); }
.reference-card__icon { color: var(--ink-faint); }
.reference-card__identity,
.reference-card__meta { display: block; }
.reference-card__meta { margin-top: 0.2rem; color: var(--ink-faint); font-size: var(--type-label); line-height: 1.4; }
.reference-card__chevron {
  width: 0.42rem;
  height: 0.42rem;
  margin-top: 0.35rem;
  border-right: 1.5px solid var(--ink-faint);
  border-bottom: 1.5px solid var(--ink-faint);
  transform: rotate(-45deg);
}
.reference-card[open] .reference-card__chevron { transform: rotate(45deg); }
.reference-card__body { padding: 1rem; border-top: 1px solid var(--rule); }
.reference-card__body > :first-child { margin-top: 0; }

.about__more { margin: 0.8rem 0 0; font-size: var(--type-small); }