/* Five illustrative capability instruments, drawn in the Ginsi OS point language:
   evidence is a point, a reading is dense stipple over a hairline, an alternative is
   sparse stipple, a guide is exact dots, and each drawing has one lit Forest mark.
   Geometry is generated at build time (scripts/landing-v2/capability-instruments.mjs).
   The row owns interaction; this file owns only visual states. Every part rests in
   its resolved geometry and the selection only adds a one-shot `from` state, so
   removing data-selected never un-resolves a drawing while it fades out. */
.li-instrument {
  --li-ink: #131313;
  --li-trace: rgb(19 19 19 / 0.26);
  --li-line: rgb(19 19 19 / 0.14);
  --li-secondary: rgb(19 19 19 / 0.44);
  --li-dust: rgb(19 19 19 / 0.2);
  --li-guide: rgb(19 19 19 / 0.34);
  --li-label: rgb(19 19 19 / 0.58);
  --li-mark: #243a31;
  --li-ease: cubic-bezier(0.16, 1, 0.3, 1);
  width: 100%;
  max-width: 520px;
  flex: 0 1 520px;
  color: var(--li-ink);
  opacity: 0;
  transform: translateX(16px);
  transition:
    opacity 450ms ease,
    transform 600ms var(--li-ease);
}
.li-visual {
  position: relative;
  width: 100%;
  aspect-ratio: 520 / 200;
  container-type: inline-size;
}
.li-visual > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.cap-row[data-selected] .li-instrument {
  opacity: 1;
  transform: translateX(0);
}

/* Scaffold: exact 1px hairlines at every size. */
.li-hair,
.li-trace,
.li-leader,
.li-sheet {
  vector-effect: non-scaling-stroke;
  stroke-width: 1;
}
.li-hair {
  stroke: var(--li-line);
}
.li-trace {
  stroke: var(--li-trace);
}
.li-leader {
  stroke: var(--li-secondary);
}
.li-sheet {
  stroke: rgb(19 19 19 / 0.26);
}
.li-sheet-mid {
  stroke: rgb(19 19 19 / 0.17);
}
.li-sheet-old {
  stroke: rgb(19 19 19 / 0.1);
}
.li-sheet-current {
  stroke: rgb(19 19 19 / 0.42);
}

/* Points and stipple scale with the drawing, like the OS points with depth. */
.li-stipple,
.li-alt,
.li-row,
.li-guide {
  stroke-linecap: round;
}
.li-stipple {
  stroke: var(--li-ink);
  stroke-width: 1.6;
}
.li-stipple-trace {
  stroke-width: 1.75;
}
.li-stipple-carried {
  /* The carried entry keeps the size of the evidence points it left the record as. */
  stroke-width: 3.6;
}
.li-alt {
  stroke: var(--li-secondary);
  stroke-width: 1.35;
}
.li-row {
  stroke: var(--li-secondary);
  stroke-width: 1.35;
}
.li-guide {
  stroke: var(--li-guide);
  stroke-width: 1.2;
}
.li-ink {
  stroke: var(--li-ink);
  stroke-width: 1.25;
  stroke-linecap: round;
  /* One dash and a longer gap: the undrawn state leaves no round-cap dot behind. */
  stroke-dasharray: 1 2;
  stroke-dashoffset: 0;
}
.li-decision-line {
  stroke-width: 1;
}
.li-focus {
  stroke: var(--li-ink);
  stroke-width: 1.1;
  transform-box: fill-box;
  transform-origin: center;
}
.li-pt {
  fill: var(--li-ink);
}
.li-pt-dim {
  fill: var(--li-secondary);
}
.li-dust {
  fill: var(--li-dust);
}

/* The one lit mark per instrument: Ginsi's own colour, Earth family. */
.li-mark-core {
  fill: var(--li-mark);
  transform-box: fill-box;
  transform-origin: center;
}
.li-mark-ring {
  stroke: var(--li-mark);
  stroke-width: 1;
  opacity: 0.5;
  stroke-dasharray: 1 2;
  stroke-dashoffset: 0;
}

/* Labels sit over a box with the drawing's own ratio and ease down with it, never
   below a legible size. */
.li-label,
.li-connect-source,
.li-connect-case {
  position: absolute;
  margin: 0;
  font-family: var(--ginsi-public-font);
  font-size: 12px;
  font-size: clamp(10.5px, 2.35cqi, 12px);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.015em;
}
.li-label {
  color: var(--li-label);
  white-space: nowrap;
}
.li-label-primary {
  color: var(--li-ink);
}
.li-read-label {
  left: 60.4%;
  top: 86%;
}
.li-advice-evidence-label {
  left: 13.5%;
  top: 58%;
  translate: -50% 0;
}
.li-advice-option-label {
  left: 49.4%;
  top: 71%;
  translate: -50% 0;
}
.li-advice-decision-label {
  left: 85.8%;
  top: 67%;
  translate: -50% 0;
}
.li-connect-source {
  left: 3.85%;
  max-width: 31%;
  color: var(--li-label);
  translate: 0 -100%;
}
.li-connect-source-one {
  top: 15%;
}
.li-connect-source-two {
  top: 47%;
}
.li-connect-source-three {
  top: 79%;
}
.li-connect-case {
  left: 73.1%;
  top: 50%;
  width: 27%;
  translate: 0 -50%;
}
.li-connect-case > span {
  display: block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-size: clamp(10px, 2.1cqi, 11px);
  color: var(--li-label);
  margin-bottom: 8px;
}
.li-connect-case > strong {
  display: block;
  font-size: 20px;
  font-size: clamp(15px, 3.85cqi, 20px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.04em;
}
.li-warn-label {
  left: 75.8%;
  top: 22.5%;
}
.li-memory-past-label {
  left: 8.5%;
  top: 86%;
}
.li-memory-now-label {
  left: 67.7%;
  top: 86%;
}

/* Selection plays one short condense/draw, left to right, then everything is still. */
.cap-row[data-selected] :is(.li-hair, .li-trace, .li-leader, .li-sheet, .li-guide) {
  animation: li-develop 700ms ease var(--d, 0ms) both;
}
.cap-row[data-selected] :is(.li-stipple, .li-alt, .li-row) {
  animation: li-flow var(--t, 640ms) var(--li-ease) var(--d, 0ms) both;
}
.cap-row[data-selected] :is(.li-pt, .li-dust) {
  animation: li-condense 760ms var(--li-ease) var(--d, 0ms) both;
}
.cap-row[data-selected] :is(.li-ink, .li-mark-ring) {
  animation: li-draw var(--t, 460ms) var(--li-ease) var(--d, 0ms) both;
}
.cap-row[data-selected] .li-mark-core {
  animation: li-land 480ms var(--li-ease) var(--d, 0ms) both;
}
.cap-row[data-selected] .li-focus {
  animation: li-focus var(--t, 520ms) var(--li-ease) var(--d, 0ms) both;
}
.cap-row[data-selected] :is(.li-label, .li-connect-source, .li-connect-case) {
  animation: li-develop 520ms ease var(--d, 0ms) both;
}

@keyframes li-develop {
  from {
    opacity: 0;
  }
}
@keyframes li-flow {
  from {
    stroke-dashoffset: var(--len);
  }
}
@keyframes li-condense {
  from {
    opacity: var(--o, 0);
    transform: translate(var(--dx, -10px), var(--dy, 0px));
  }
}
@keyframes li-draw {
  from {
    stroke-dashoffset: 1.02;
  }
}
@keyframes li-land {
  from {
    opacity: 0;
    transform: scale(0.35);
  }
}
@keyframes li-focus {
  from {
    opacity: 0;
    transform: scale(1.3);
  }
}

@media (max-width: 700px) {
  .li-instrument {
    max-width: none;
  }
}
/* Keep the stipple legible when the drawing itself is small (phone and narrow columns). */
@container (max-width: 440px) {
  .li-stipple {
    stroke-width: 2;
  }
  .li-stipple-trace {
    stroke-width: 2.1;
  }
  .li-stipple-carried {
    stroke-width: 3.6;
  }
  .li-alt,
  .li-row {
    stroke-width: 1.7;
  }
  .li-connect-case > span {
    margin-bottom: 6px;
  }
}

/* Reduced motion: the resolved drawing appears with its row, with no animation. */
@media (prefers-reduced-motion: reduce) {
  .li-instrument,
  .li-instrument * {
    animation: none !important;
    transition: none !important;
  }
  .li-instrument {
    transform: none;
  }
}