/* Numbered citations and the evidence bubble they open.
 *
 * The upstream reference page ships its own dark palette; none of it comes
 * across. Everything here resolves against the shared design tokens so the markers
 * read as part of this site in both themes.
 *
 * The one non-negotiable: a marker is never hover-only. It is a link, it takes
 * focus, and it has a touch target — the presentation policy sets
 * hover_only_forbidden, and a citation a phone cannot open is not a citation. */

/* --- the marker ------------------------------------------------------- */

.lp-cites {
  display: inline;
  white-space: nowrap;
}

.lp-cite {
  display: inline;
  vertical-align: super;
  margin-left: .06em;
  padding: 0 .1em;
  border: 0;
  background: transparent;
  color: var(--cyan);
  font-size: .58em;
  font-weight: 900;
  letter-spacing: .02em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: color .18s ease;
}

.lp-cite::before { content: "["; }
.lp-cite::after { content: "]"; }

.lp-cite:hover { text-decoration: underline; }

.lp-cite:focus-visible {
  outline: 2px solid var(--lavender);
  outline-offset: 2px;
  border-radius: 3px;
}

/* A chip or an inline number carries a figure behind it; a silent citation only
   carries provenance. They must not look alike, or the reader learns nothing
   from the difference. */
.lp-cite--chip,
.lp-cite--inline {
  color: var(--lavender);
}

/* Touch targets. The marker stays visually small but stays tappable — the
   presentation policy forbids hover-only affordances. */
@media (pointer: coarse) {
  .lp-cite {
    display: inline-block;
    padding: .35em .3em;
    margin: -.35em 0;
  }
}

/* --- the register ----------------------------------------------------- */

/* The bibliography, inside Proof. It is a disclosure rather than an open block:
   collapsed it costs one summary line, and a reader who wants the sources opens
   the one element that holds all of them. It is also where every unit actually
   lives in the served HTML — the bubble clones from here. */
.lp-evidence-register {
  margin-top: 2.4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  padding: 1.1rem 1.35rem;
}

.lp-evidence-register > summary {
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  align-items: baseline;
  font-weight: 700;
  letter-spacing: -.01em;
}

.lp-evidence-register > summary::marker { color: var(--cyan); }

.lp-evidence-count {
  color: var(--silver);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.lp-evidence-intro {
  margin: 1rem 0 0;
  max-width: 68ch;
  color: var(--silver);
  font-size: .88rem;
}

.lp-evidence-list {
  margin: 1.2rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .8rem;
}

/* --- one evidence unit ------------------------------------------------ */

/* This base is the unit as it reads in the register, in normal flow. The bubble
   overrides it further down for the clone it displays. */
.lp-evidence-unit {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  padding: 1rem 1.1rem;
  scroll-margin-top: .6rem;
}

/* Landing on a unit from a marker has to be visible, or the no-JS path is a
   jump with no feedback. */
.lp-evidence-unit:target,
.lp-evidence-unit:focus-visible {
  border-color: var(--cyan);
  outline: none;
}

.lp-evidence-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  align-items: center;
  margin: 0 0 .55rem;
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--silver);
}

.lp-evidence-number { color: var(--cyan); font-weight: 800; }

.lp-evidence-kind {
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: .1rem .5rem;
  font-weight: 700;
}

.lp-evidence-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  text-transform: none;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.lp-evidence-observation {
  margin: 0 0 .55rem;
  max-width: 72ch;
  font-size: .98rem;
}

.lp-evidence-context {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .8rem;
  margin: 0 0 .7rem;
  color: var(--silver);
  font-size: .84rem;
}

.lp-evidence-period::before { content: "· "; }

/* The boundary is the field that makes the rest publishable, so it is set apart
   rather than folded under the observation. */
.lp-evidence-boundary {
  margin: 0 0 .7rem;
  border-left: 3px solid var(--warning);
  padding-left: .8rem;
  max-width: 72ch;
  color: var(--paper);
  font-size: .86rem;
}

.lp-evidence-boundary-label {
  display: block;
  margin-bottom: .2rem;
  color: var(--warning);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.lp-evidence-sources {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin: 0;
}

.lp-evidence-sources a {
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: .35rem .6rem;
  color: var(--paper);
  font-size: .78rem;
  text-decoration: none;
}

.lp-evidence-sources a:hover,
.lp-evidence-sources a:focus-visible { border-color: var(--cyan); color: var(--cyan); }

/* --- the bubble ------------------------------------------------------- */

/* A speech bubble, deliberately small. The first build of this was 496px wide
   and 400 tall, which on the blockchain hero covered the headline the citation
   was attached to — answering a question by hiding the sentence that raised it.
   A citation checked in passing needs a mini window, not a panel: wide enough
   for one bounded observation at reading measure, and no wider.
 *
 * A popover is laid out by the UA as a centred box with auto margins. All of
 * that is overridden — the script places it against its own marker in viewport
 * coordinates. Being a popover is still what earns the top layer, so no
 * ancestor's `overflow` can clip a citation opened mid-column. */
.lp-evidence-bubble {
  position: fixed;
  inset: auto;
  margin: 0;
  width: min(21rem, calc(100vw - 1.5rem));
  /* The tail hangs outside the box, so the scrolling happens one level in. */
  overflow: visible;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--navy);
  color: var(--paper);
  box-shadow: 0 18px 48px rgba(6, 8, 32, .55);
  padding: 0;
  font-size: .78rem;
}

/* Tall enough that a whole unit — boundary included — fits without scrolling.
   A bubble is capped on width, not on content: a boundary truncated mid-sentence
   at the fold is worse than no bubble, because the reader takes the observation
   and leaves the limit behind. Short units still size to their content. */
.lp-evidence-bubble-scroll {
  max-height: min(27rem, calc(100vh - 3rem));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: .7rem .8rem .75rem;
}

.lp-evidence-bubble:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

/* The tail. A rotated square with two borders showing reads as a point without
   needing a second element or an SVG. ``--tail-x`` is the marker's centre,
   measured by the script relative to the bubble's own left edge, so the tail
   keeps pointing at the citation even when the bubble is clamped against the
   edge of the viewport. */
.lp-evidence-bubble::after {
  content: "";
  position: absolute;
  left: var(--tail-x, 50%);
  width: 11px;
  height: 11px;
  transform: translateX(-50%) rotate(45deg);
  background: var(--navy);
  border: 1px solid var(--line-strong);
}

.lp-evidence-bubble.is-below::after {
  top: -6px;
  border-right: 0;
  border-bottom: 0;
}

.lp-evidence-bubble.is-above::after {
  bottom: -6px;
  border-left: 0;
  border-top: 0;
}

/* Reading a source should cost a glance, so the clone is set tighter than the
   register entry it came from. It drops no field while doing it: a boundary the
   reader has to open a second surface to find is the exact defect this component
   exists to prevent. */
.lp-evidence-bubble .lp-evidence-unit {
  border: 0;
  background: transparent;
  padding: 0;
}

.lp-evidence-bubble .lp-evidence-observation {
  margin: 0 0 .35rem;
  max-width: none;
  font-size: .82rem;
  line-height: 1.5;
}

.lp-evidence-bubble .lp-evidence-context {
  gap: .15rem .5rem;
  margin: 0 0 .45rem;
  font-size: .7rem;
  line-height: 1.45;
}

.lp-evidence-bubble .lp-evidence-boundary {
  margin: 0 0 .5rem;
  border-left-width: 2px;
  padding-left: .55rem;
  max-width: none;
  font-size: .72rem;
  line-height: 1.5;
}

.lp-evidence-bubble .lp-evidence-boundary-label {
  margin-bottom: .1rem;
  font-size: .6rem;
  letter-spacing: .08em;
}

.lp-evidence-bubble .lp-evidence-meta {
  gap: .35rem;
  margin: 0 0 .3rem;
  font-size: .58rem;
}

/* One plain line, not a bordered chip: at this size a chip is a button-shaped
   object competing with the observation for the eye. */
.lp-evidence-bubble .lp-evidence-sources a {
  border: 0;
  padding: 0;
  color: var(--cyan);
  font-size: .7rem;
  line-height: 1.4;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* The unit id is the stable identity and it belongs in the register, where it
   can be quoted. In a bubble it is a line of machine text between the reader
   and the observation they asked for. */
.lp-evidence-bubble .lp-evidence-id { display: none; }

.lp-evidence-bubble-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .5rem;
  margin-bottom: .45rem;
}

.lp-evidence-bubble-title {
  margin: 0;
  color: var(--cyan);
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .09em;
  line-height: 1.35;
  text-transform: uppercase;
}

/* A peek has nothing to dismiss — the pointer leaving is the dismissal. The
   close button and the register link appear once the bubble is pinned, which is
   also the only state in which it holds focus. */
.lp-evidence-bubble-close,
.lp-evidence-bubble-foot { display: none; }

.lp-evidence-bubble.is-pinned .lp-evidence-bubble-close { display: block; }
.lp-evidence-bubble.is-pinned .lp-evidence-bubble-foot { display: block; }

.lp-evidence-bubble-close {
  flex: none;
  margin: -.15rem -.15rem 0 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--silver);
  cursor: pointer;
  padding: 0 .25rem;
  font-size: .95rem;
  line-height: 1.3;
}

.lp-evidence-bubble-close:hover,
.lp-evidence-bubble-close:focus-visible { color: var(--cyan); }

.lp-evidence-bubble-foot {
  margin: .5rem 0 0;
  padding-top: .45rem;
  border-top: 1px solid var(--line);
  font-size: .68rem;
}

.lp-evidence-bubble-foot a { color: var(--cyan); }

/* --- without JavaScript ------------------------------------------------- */

/* A marker is a link to its register entry, and that link is what works when
   the script never runs — a stale cache, a blocked file, JavaScript off, or a
   browser with no Popover API. The reader lands on the full unit inside Proof.

   The register is a collapsed ``<details>``, and a fragment inside a closed
   disclosure is auto-expanded by the UA on navigation. Where that behaviour is
   missing the anchor still resolves, so the entry is reached by opening one
   summary rather than by running anything.

   This is the path a crawler and an agent take too: every unit is in the served
   HTML, in both languages, whether or not anything executes. */
.lp-evidence-register:has(.lp-evidence-unit:target) { border-color: var(--cyan); }

/* Touch has no hover, so the bubble is only ever pinned there. Docking it to
   the bottom of the screen beats anchoring it to a 12px marker under a thumb. */
@media (pointer: coarse) {
  .lp-evidence-bubble { width: calc(100vw - 1.5rem); }
  .lp-evidence-bubble::after { display: none; }
}

/* --- the scope gate --------------------------------------------------- */

/* Candidate regimes under the pitch. The cards are a grid rather than a list
   because they are alternatives to be compared, not steps to be read in order —
   the reader is looking for the one that describes them. */
.lp-scope-gate {
  margin-top: 2.2rem;
  border-top: 1px solid var(--line);
  padding-top: 1.6rem;
}

.lp-scope-gate-title {
  margin: 0 0 .5rem;
  color: var(--cyan);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.lp-scope-gate-intro {
  margin: 0 0 1.3rem;
  max-width: 78ch;
  color: var(--silver);
  font-size: .92rem;
  line-height: 1.65;
}

.lp-scope-gate-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

.lp-scope-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  padding: 1.05rem 1.1rem;
}

.lp-scope-card-name {
  margin: 0 0 .7rem;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: -.01em;
}

.lp-scope-claim {
  margin: 0 0 .65rem;
  font-size: .88rem;
  line-height: 1.6;
}

/* The scope condition is the claim, not a disclaimer under it, so it is set at
   the same weight as the requirement above and marked in the boundary colour
   the register already uses for a limit. */
.lp-scope-card-boundary {
  margin: auto 0 0;
  border-left: 3px solid var(--warning);
  padding-left: .75rem;
  padding-top: .1rem;
  font-size: .8rem;
  line-height: 1.55;
}

.lp-scope-card-boundary-label {
  display: block;
  margin-bottom: .15rem;
  color: var(--warning);
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  .lp-cite { transition: none; }
}

/* --------------------------------------------------------------------------
   Evidence graph (EUG)

   The chart inside a register entry. It sits between the observation and the
   boundary, so nothing here may grow tall enough to push the limit out of
   sight: the figure is capped and the whole card stays one scroll.

   Every colour is a token. The chart is drawn with CSS classes rather than
   inline fills precisely so it follows the light/dark switch like the rest of
   the page instead of carrying a baked-in palette.
   -------------------------------------------------------------------------- */

.lp-eug {
  margin: .85rem 0 .9rem;
  padding: .8rem .85rem .7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.lp-eug-question {
  margin: 0 0 .6rem;
  color: var(--silver);
  font-size: .74rem;
  font-weight: 700;
  line-height: 1.5;
}

.lp-eug-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* The bar's unfilled remainder. It is what makes a 6,84 % bar read as a small
   share of a bounded scale rather than as a short bar of unknown extent. */
.lp-eug-track { fill: var(--line); opacity: .45; }
.lp-eug-bar { fill: var(--cyan); }
.lp-eug-axis { stroke: var(--line-strong); stroke-width: 1; }
.lp-eug-whisker { stroke: var(--paper); stroke-width: 1.5; opacity: .75; }

.lp-eug-label {
  fill: var(--silver);
  font-size: 11px;
  font-family: inherit;
}

.lp-eug-value {
  fill: var(--paper);
  font-size: 11px;
  font-weight: 700;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
}

.lp-eug-tick {
  fill: var(--silver);
  font-size: 9.5px;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
}

/* Paired dots: the connector carries the movement, the two dots carry the
   conditions. The "from" dot is hollow so the direction reads without colour
   alone doing the work. */
.lp-eug-connector { stroke: var(--line-strong); stroke-width: 2; }
.lp-eug-dot-from { fill: var(--surface); stroke: var(--silver); stroke-width: 2; }
.lp-eug-dot-to { fill: var(--cyan); }

.lp-eug-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin: .5rem 0 0;
  font-size: .68rem;
  color: var(--silver);
}

.lp-eug-legend-item { display: inline-flex; align-items: center; gap: .3rem; }

.lp-eug-legend-item::before {
  content: "";
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--silver);
}

.lp-eug-legend-item--1::before {
  background: var(--cyan);
  border-color: var(--cyan);
}

/* Heterogeneous measures. Not a chart, because 288 bytes, 10 ms and a 19-60x
   range share no axis and drawing them as bars would invent a comparison the
   source never makes. */
.lp-eug-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: .6rem;
  margin: 0;
}

.lp-eug-metric {
  padding: .5rem .6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.lp-eug-metric-label {
  margin: 0 0 .2rem;
  color: var(--silver);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.35;
}

.lp-eug-metric-value {
  margin: 0;
  color: var(--paper);
  font-size: .95rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.lp-eug-answer {
  margin: .6rem 0 0;
  color: var(--paper);
  font-size: .8rem;
  line-height: 1.55;
}

.lp-eug-note {
  margin: .35rem 0 0;
  color: var(--silver);
  font-size: .66rem;
  line-height: 1.5;
  opacity: .85;
}

/* Under ~34rem the label gutter is a third of a 640-unit viewBox scaled into a
   phone, which is unreadable. The chart keeps its aspect ratio and is allowed
   to scroll inside its own box rather than shrinking the type further. */
@media (max-width: 34rem) {
  .lp-eug-svg { min-width: 30rem; }

  .lp-eug > .lp-eug-svg {
    max-width: none;
  }

  .lp-eug {
    overflow-x: auto;
  }
}