/* lyptus-viz v1 styles. Versioned with the runtime (frozen major): posts
 * published against v1 depend on this file not changing incompatibly. */

.lyv-figure { margin: 0; }

.lyv-svg {
  display: block;
  width: 100%;
  height: auto;
  outline: none;
}
.lyv-svg:focus-visible {
  outline: 2px solid #2B2B2B;
  outline-offset: 3px;
}

.lyv-mark { cursor: pointer; }

/* chips header: native buttons, pressed = filled */
/* selector containers (the E1 design): one labelled card per toggle KIND,
 * segments as discrete pills inside - no dividers, on = warm tint pill */
.lyv-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 0.9rem;
  margin: 0 0 0.55rem 0;
  align-items: flex-start;
}
.lyv-chips {
  position: relative;
  display: inline-flex;
  flex-wrap: wrap;
  background: #FFFDF6;
  border: 1px solid #d8cfbb;
  border-radius: 10px;
  padding: 0.6rem 0.3rem 0.3rem;
}
/* plane/1 axis selector: the preset chip row stacked over the custom-pair
 * dropdowns, which appear only when "custom" is chosen */
.lyv-axissel { display: inline-flex; flex-direction: column; gap: 0.4rem; }
/* the custom axis pair + the region/arrow/label toggles share one row below
 * the primary chip groups (flex-basis 100% forces it onto its own line) */
.lyv-subrow {
  flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem;
  align-items: center; margin-top: 0.05rem;
}
/* show/hide layer toggles: a dashed container + a leading toggle dot per chip
 * (filled = shown, hollow = hidden) so they read as view switches, distinct
 * from the solid-bordered filter/selector groups */
.lyv-display-chips { border-style: dashed; border-color: #cfc4aa; }
.lyv-display-chips .lyv-chip { border-right-color: transparent; }
.lyv-display-chips .lyv-chip::before {
  content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%;
  border: 1.4px solid #a49b88; margin-right: 0.1rem;
}
.lyv-display-chips .lyv-chip[aria-pressed="true"]::before {
  background: #2B2B2B; border-color: #2B2B2B;
}
.lyv-axispair {
  display: inline-flex; gap: 0.9rem; padding: 0.1rem 0.2rem;
  font-family: 'IBM Plex Mono', monospace; font-size: 0.68rem; color: #8a8375;
}
.lyv-axisdrop-w { display: inline-flex; align-items: center; gap: 0.35rem; }
.lyv-axisdrop {
  font-family: 'IBM Plex Mono', monospace; font-size: 0.7rem; color: #2B2B2B;
  background: #FFFDF6; border: 1px solid #d8cfbb; border-radius: 6px; padding: 0.15rem 0.35rem;
}
.lyv-axisdrop:focus-visible { outline: 2px solid #F1544B; outline-offset: 1px; }
.lyv-chips-label {
  position: absolute;
  top: -0.68em;
  left: 0.65rem;
  background: #fffaf0;
  padding: 0 0.4rem;
  font-family: 'Newsreader', Georgia, serif;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #a49b88;
}
.lyv-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: 'Newsreader', Georgia, serif;
  font-size: 0.74rem;
  line-height: 1;
  color: #7d7462;
  background: transparent;
  border: none;
  border-right: 1px solid #ece5d2;   /* the shared dividers */
  border-radius: 0;
  padding: 0.3rem 0.6rem;
  cursor: pointer;
}
/* -of-type, not -child: the kicker <span> is the container's first child,
 * so -child selectors miss the first button entirely */
.lyv-chip:first-of-type { border-radius: 7px 0 0 7px; }
.lyv-chip:last-of-type { border-radius: 0 7px 7px 0; border-right: none; }
.lyv-chip:only-of-type { border-radius: 7px; }
.lyv-chip[aria-pressed="true"] {
  color: #2B2B2B;
  font-weight: 600;
  background: #f5eeda;
}
.lyv-chip:hover[aria-pressed="false"] { background: #faf5e8; }
.lyv-chip[aria-pressed="false"] { color: #a49b88; }
.lyv-chip[aria-pressed="false"] .lyv-chip-dot { opacity: 0.3; }
/* full-name reveal floats UNDER the segment - no inline expansion, so the
 * row never reflows and a lingering focus can't wedge it open */
.lyv-chip { position: relative; }
.lyv-chip-full {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-3px);
  background: #FFFDF6;
  border: 1px solid #d8cfbb;
  border-radius: 6px;
  padding: 0.28rem 0.55rem;
  box-shadow: 0 2px 8px rgba(43, 43, 43, 0.1);
  color: #2B2B2B;
  font-weight: 400;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  z-index: 60;
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.lyv-chip:hover .lyv-chip-full,
.lyv-chip:focus-visible .lyv-chip-full {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.lyv-chip:focus-visible {
  outline: 2px solid #2B2B2B;
  outline-offset: 1px;
}
.lyv-chip-dot {
  width: 0.64em;
  height: 0.64em;
  border-radius: 50%;
  flex: none;
}

/* tooltip: identifies, never narrates */
.lyv-tooltip {
  position: fixed;
  z-index: 120;
  max-width: 300px;
  background: #FFFDF6;
  border: 1px solid #d8cfbb;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(43, 43, 43, 0.12);
  padding: 0.5rem 0.7rem;
  font-family: 'Newsreader', Georgia, serif;
  font-size: 0.82rem;
  color: #2B2B2B;
  pointer-events: none;
}
.lyv-tooltip-title { font-weight: 700; margin-bottom: 0.2rem; }
.lyv-tooltip-row { display: flex; gap: 0.6rem; justify-content: space-between; }
.lyv-tooltip-key { color: #6b6b6b; }

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

/* multi-panel figures: sibling cards, column count fixed by panel count so
 * per-panel canvases stay readable instead of auto-fit postage stamps */
.lyv-panels {
  display: grid;
  /* column tracks are owned by panels.js (inline style, decided pre-render
   * from the figure width) - a viewport media query here stacked the grid
   * AFTER panels had rendered for their grid position, leaving trimmed
   * gutters and hidden axes on stacked panels */
  grid-template-columns: repeat(2, 1fr);
  gap: 0.1rem 0.35rem;
}
.lyv-panel-title {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 700;
  font-size: 0.78rem;
  color: #2B2B2B;
  margin: 0 0 0.1rem 0.15rem;
}

@media (prefers-reduced-motion: no-preference) {
  .lyv-chip { transition: box-shadow 120ms ease, color 120ms ease; }
}

.lyv-hit { cursor: pointer; }

/* symbol legend: non-interactive mark-shape explanations */
.lyv-symbols {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
  margin: 0.4rem 0 0 0.2rem;
}
.lyv-symbol {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: 'Newsreader', Georgia, serif;
  font-size: 0.78rem;
  color: #6b6b6b;
}

/* A storyboard is a wide diagram of fixed-size cards on a normalised canvas; it
 * cannot re-lay to a phone the way the charts do (they clamp their viewBox to
 * the container). Below a legibility floor it scrolls horizontally instead of
 * shrinking its labels to a few px. */
.lyv-storyboard-scroll { overflow-x: auto; overflow-y: hidden; }
.lyv-storyboard-scroll > .lyv-storyboard { min-width: 480px; }

/* storyboard/1: cards bind to the moment they came from */
.lyv-storyboard .lyv-card { cursor: default; }
.lyv-storyboard .lyv-card rect { transition: stroke 120ms ease, fill 120ms ease; }
.lyv-storyboard .lyv-card.is-lit rect { stroke: #cfc4aa; fill: #f5eeda; }
.lyv-storyboard g.is-lit circle,
.lyv-storyboard g.is-lit rect { filter: drop-shadow(0 0 4px rgba(43, 43, 43, 0.35)); }
/* hover: false - a pure diagram; no lit states, no pointer affordances */
.lyv-storyboard.is-static .lyv-card rect { transition: none; }
.lyv-storyboard.is-static .lyv-mark { cursor: default; }

/* answers/1: the document-artifact family - real, selectable reply text */
.lyv-answers-prompt {
  display: flex; align-items: center; gap: 0.7rem; margin: 0 0 0.7rem;
}
.lyv-answers-kicker {
  font-family: 'IBM Plex Mono', monospace; font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: #a49b88; flex: none;
}
.lyv-answers-q {
  margin: 0; padding: 0.45rem 1rem; background: #f5eeda; border: 1.4px solid #2B2B2B;
  border-radius: 14px; font-family: 'Newsreader', Georgia, serif; font-style: italic;
  font-size: 1rem; color: #2B2B2B;
}
.lyv-answers-body { display: grid; gap: 0.9rem; }
.lyv-answers-body.has-locator { grid-template-columns: minmax(240px, 0.8fr) 1.4fr; align-items: start; }
@media (max-width: 760px) { .lyv-answers-body.has-locator { grid-template-columns: 1fr; } }
.lyv-answers-cards { display: grid; gap: 0.6rem; }
/* duel: the two replies side by side, prompt and judge spanning both */
.lyv-answers-cards.is-duel { grid-template-columns: 1fr 1fr; align-items: start; }
.lyv-answers-cards.is-duel .lyv-span-all { grid-column: 1 / -1; }
@media (max-width: 760px) { .lyv-answers-cards.is-duel { grid-template-columns: 1fr; } }
.lyv-answer {
  background: #FFFDF6; border: 1px solid #d8cfbb; border-radius: 10px; padding: 0.6rem 0.8rem;
}
.lyv-answer.is-dashed { border-style: dashed; border-color: #a49b88; }
/* wrap on a phone-narrow card so a long name + badge + meta stack instead of
 * overlapping (the duel collapses to one column at 760px, halving the width) */
.lyv-answer header { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.35rem; }
.lyv-answer-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.5em; height: 1.5em; padding: 0 0.35em; border-radius: 999px;
  color: #fffaf0; font-family: 'Newsreader', Georgia, serif; font-size: 0.7rem; font-weight: 700;
}
.lyv-answer-name {
  font-family: 'IBM Plex Mono', monospace; font-size: 0.8rem; font-weight: 600; color: #2B2B2B;
}
.lyv-answer-meta {
  margin-left: auto; font-family: 'IBM Plex Mono', monospace; font-size: 0.68rem;
  color: #8a8375; border: 1px solid #e3dbc8; border-radius: 999px; padding: 0.1rem 0.5rem;
}
.lyv-answer-text {
  font-family: 'Newsreader', Georgia, serif; font-size: 0.92rem; line-height: 1.5;
  color: #2B2B2B; white-space: pre-wrap;
}
.lyv-answer-text.is-clamped {
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical;
  overflow: hidden; mask-image: linear-gradient(to bottom, #000 68%, transparent);
}
.lyv-answer-more {
  margin-top: 0.4rem; background: none; border: none; padding: 0;
  font-family: 'Newsreader', Georgia, serif; font-size: 0.78rem; color: #6b6b6b;
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.lyv-answer-more:hover { color: #2B2B2B; }
/* trait vector under a reply (answers/1 item.profile): what the panel reads
 * off the model, bars vs the base model. Key rows (the locator plane's axes)
 * ring in coral at full strength; the rest recede. The trailing ellipsis
 * stands for the unshown traits. */
.lyv-ansprof { margin-top: 0.6rem; display: grid; gap: 0.22rem; }
.lyv-ansprof-row {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.16rem 0.6rem 0.16rem 0.3rem; border: 1.6px solid transparent; border-radius: 999px;
}
.lyv-ansprof-row:not(.is-key) { opacity: 0.55; }
.lyv-ansprof-row.is-key { border-color: #F1544B; }
.lyv-ansprof-row.is-key .lyv-ansprof-lab { color: #2B2B2B; font-weight: 600; }
.lyv-ansprof-lab {
  flex: 0 0 6.8em; text-align: right; white-space: nowrap;
  font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem; color: #6b6b6b;
}
.lyv-ansprof-track { position: relative; flex: 1; height: 10px; border-radius: 6px; background: #ece5d2; }
.lyv-ansprof-track::after {
  content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: #cfc4aa;
}
.lyv-ansprof-bar { position: absolute; top: 0; bottom: 0; border-radius: 6px; }
.lyv-ansprof-more {
  text-align: right; padding-right: 0.6rem; line-height: 0.6;
  font-family: 'IBM Plex Mono', monospace; font-size: 0.8rem; color: #a49b88;
}

/* judge verdicts under the replies (the arena-game figure) */
.lyv-answers-judge {
  background: #FFFDF6; border: 1px solid #d8cfbb; border-radius: 10px;
  padding: 0.45rem 0.75rem 0.55rem;
}
.lyv-judge-row { display: flex; align-items: baseline; gap: 1rem; margin-top: 0.3rem; }
.lyv-judge-row.is-scale { align-items: center; }
.lyv-judge-trait {
  flex: 0 0 7.5em; font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem;
  color: #8a8375;
}
.lyv-judge-verdict {
  font-family: 'IBM Plex Mono', monospace; font-size: 0.78rem; color: #2B2B2B;
}
/* chip-on-rail verdicts: the two answers are the rail's ends, the chip's
 * position carries side and strength, its word confirms it. The ends row is a
 * 1fr/max-content/1fr grid so "tie" sits at the true rail midpoint regardless
 * of how wide the two end labels are. */
.lyv-judge-ends {
  flex: 1; display: grid; grid-template-columns: 1fr max-content 1fr; align-items: center;
  font-family: 'IBM Plex Mono', monospace; font-size: 0.64rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: #8a8375;
}
.lyv-judge-end { display: inline-flex; align-items: center; gap: 0.45rem; }
.lyv-judge-end:last-child { justify-self: end; }
/* keep the two answer names on one line each: a squeezed grid cell was wrapping
 * them two characters at a time on a phone. The badge still identifies the end
 * if a long name overflows. */
.lyv-judge-end > span:not(.lyv-answer-badge):not(.lyv-judge-key) { white-space: nowrap; }
/* a phone-narrow judge card: trim the trait gutter (7.5em ate half the width)
 * and shrink the rail-end labels so the chip rail keeps usable room */
@media (max-width: 520px) {
  .lyv-judge-trait { flex-basis: 4.5em; }
  .lyv-judge-ends { font-size: 0.56rem; }
  .lyv-answer-meta { font-size: 0.6rem; padding: 0.1rem 0.35rem; }
}
/* the badge is a descriptive tag, not a mono kicker - keep its own casing
 * rather than the uppercase the end-labels use */
.lyv-judge-end .lyv-answer-badge {
  text-transform: none; letter-spacing: 0; font-family: 'Newsreader', Georgia, serif;
}
.lyv-judge-key {
  display: inline-block; width: 14px; height: 9px; border: 1.4px solid #d8cfbb;
  border-radius: 3px; background: #FFFDF6;
}
.lyv-judge-key.is-dashed { border-style: dashed; border-color: #a49b88; }
.lyv-judge-row.is-scale { margin-top: 0.12rem; }
.lyv-judge-rail { position: relative; flex: 1; height: 19px; }
.lyv-judge-rail::before {
  content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid #d8cfbb;
}
.lyv-judge-rail::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px;
  border-radius: 50%; transform: translate(-50%, -50%); background: #cfc4aa;
}
.lyv-judge-chip {
  position: absolute; top: 50%; transform: translate(-50%, -50%); z-index: 1;
  font-family: 'IBM Plex Mono', monospace; font-size: 0.64rem; white-space: nowrap;
  padding: 0.08rem 0.5rem; border-radius: 999px; background: #FFFDF6;
  border: 1.2px solid #2B2B2B; color: #2B2B2B;
}
.lyv-judge-chip.is-tie { border-style: dashed; border-color: #cfc4aa; color: #8a8375; }
.lyv-judge-chip.at-min { transform: translate(0, -50%); }
.lyv-judge-chip.at-max { transform: translate(-100%, -50%); }

/* annotated/1: response, the traits its spans name, the profile they build.
 * The three panels share one bottom edge: columns stretch, the response and
 * profile cards grow to fill, and the middle column's trait cards share any
 * slack evenly so no column ends in a hole. The doubled-class selectors
 * outrank the site's .post-content p margins. */
.lyv-annotated { display: grid; grid-template-columns: 1.15fr 0.95fr 1.1fr; gap: 1rem; }
@media (max-width: 860px) { .lyv-annotated { grid-template-columns: 1fr; } }
.lyv-annot-col { display: flex; flex-direction: column; }
.lyv-annot-col .lyv-annot-response, .lyv-annot-col .lyv-annot-profile { flex: 1; }
.lyv-annot-col .lyv-annot-trait { margin-bottom: 0.55rem; flex: 1 0 auto; }
.lyv-annot-col .lyv-annot-trait:last-child { margin-bottom: 0; }
.lyv-annotated .lyv-annot-note { margin-top: 0.5rem; }
.lyv-annotated .lyv-annot-prompt { margin: 0 0 0.6rem; }
.lyv-annotated .lyv-annot-text { margin: 0; }
.lyv-annotated .lyv-annot-quote { margin: 0 0 0.3rem; }
.lyv-annotated .lyv-annot-name { margin: 0; }
.lyv-annot-col h4.lyv-annot-kicker {
  margin: 0 0 0.45rem; font-family: 'IBM Plex Mono', monospace; font-size: 0.66rem;
  font-weight: 600; font-style: normal; letter-spacing: 0.16em; text-transform: uppercase;
  color: #a49b88;
}
.lyv-annot-response, .lyv-annot-profile {
  background: #FFFDF6; border: 1px solid #d8cfbb; border-radius: 10px; padding: 0.7rem 0.85rem;
}
/* the profile fills its column, with the "n of 32" note anchored in the
 * card's bottom-right corner; the extra bottom padding reserves its line so
 * the trait rows can never run into it */
.lyv-annot-profile { position: relative; padding-bottom: 2rem; }
.lyv-annot-profile .lyv-annot-note {
  position: absolute; right: 0.85rem; bottom: 0.55rem; margin: 0;
}
.lyv-annot-prompt {
  margin: 0 0 0.6rem; font-family: 'IBM Plex Mono', monospace; font-size: 0.74rem;
  line-height: 1.5; color: #6b6b6b;
}
.lyv-annot-text {
  margin: 0; font-family: 'Newsreader', Georgia, serif; font-size: 1rem; line-height: 1.65; color: #2B2B2B;
}
.lyv-annot-span {
  background: color-mix(in srgb, var(--hue) 16%, transparent);
  box-shadow: inset 0 -2px 0 var(--hue); color: inherit; padding: 0.02em 0;
  border-radius: 2px; transition: background 120ms ease;
}
.lyv-annot-span.is-lit { background: color-mix(in srgb, var(--hue) 34%, transparent); }
.lyv-annot-trait {
  background: #FFFDF6; border: 1.4px solid color-mix(in srgb, var(--hue) 55%, #FFFDF6);
  border-radius: 10px;
  padding: 0.45rem 0.7rem; margin-bottom: 0.55rem; transition: border-color 120ms ease, background 120ms ease;
}
.lyv-annot-trait.is-lit { border-color: var(--hue); background: color-mix(in srgb, var(--hue) 7%, #FFFDF6); }
.lyv-annot-quote {
  margin: 0 0 0.25rem; font-family: 'Newsreader', Georgia, serif; font-style: italic;
  font-size: 0.86rem; color: #6b6b6b;
}
.lyv-annot-name { margin: 0; display: flex; align-items: baseline; gap: 0.55rem; }
.lyv-annot-name strong { font-family: 'IBM Plex Mono', monospace; font-size: 0.84rem; color: var(--hue); }
.lyv-annot-dir { font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem; color: #8a8375; }
.lyv-annot-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.32rem; }
.lyv-annot-rowlab {
  flex: 0 0 6.8em; text-align: right; white-space: nowrap; font-family: 'IBM Plex Mono', monospace;
  font-size: 0.74rem; color: #6b6b6b;
}
.lyv-annot-row.is-lit .lyv-annot-rowlab { color: #2B2B2B; font-weight: 600; }
.lyv-annot-track {
  position: relative; flex: 1; height: 11px; border-radius: 6px; background: #ece5d2;
}
.lyv-annot-track::after {
  content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: #cfc4aa;
}
.lyv-annot-bar { position: absolute; top: 0; bottom: 0; border-radius: 6px; }
.lyv-annot-val {
  flex: 0 0 3.2em; text-align: right; font-family: 'IBM Plex Mono', monospace;
  font-size: 0.74rem; color: #2B2B2B;
}
.lyv-annot-note {
  margin: 0.5rem 0 0; text-align: right; font-family: 'IBM Plex Mono', monospace;
  font-size: 0.68rem; color: #8a8375;
}