.farm-figure {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  min-width: 0;
  padding: clamp(1rem, 1.6vw, 1.25rem);
  border: 1px solid var(--line);
  border-radius: var(--capsai-card-radius, 1.15rem);
  background: var(--panel);
}

.farm-figure__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 650;
  letter-spacing: -.01em;
}

.farm-figure__toolbar,
.farm-figure__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1rem;
}

.farm-figure__toolbar {
  justify-content: space-between;
}

.farm-figure__views {
  display: flex;
  gap: .35rem;
}

.farm-figure__tab,
.farm-figure__design,
.farm-figure__sequence,
.farm-figure__reset {
  min-height: var(--control-size);
  padding: .35rem .7rem;
  border: 1px solid var(--control-edge);
  border-radius: var(--control-radius);
  color: var(--text);
  background: var(--surface-raised);
  font: inherit;
  font-size: .85rem;
}

.farm-figure__tab[aria-selected="true"] {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--panel-2);
  box-shadow: var(--shadow-inset);
}

.farm-figure__tab:focus-visible,
.farm-figure__design:focus-visible,
.farm-figure__sequence:focus-visible,
.farm-figure__reset:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.farm-figure__channel {
  display: grid;
  grid-template-columns: auto auto minmax(7rem, 12rem) 3.5rem;
  align-items: center;
  gap: .5rem;
  font-size: .82rem;
}

.farm-figure__channel-name { font-weight: 600; }
.farm-figure__channel-stop { color: var(--muted); }

.farm-figure__channel input[type="range"] {
  min-width: 0;
  accent-color: var(--accent);
}

.farm-figure__channel-value {
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  text-align: end;
}

.farm-figure__frame {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: .8rem;
  background-color: var(--draft-surface);
  background-image: var(--draft-texture);
  background-size: 32px 32px;
}

.farm-figure__svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Farm relationships ------------------------------------------------------ */

.farm-figure__band {
  fill: color-mix(in srgb, var(--accent) 12%, transparent);
  stroke: var(--control-edge);
  stroke-width: 1;
}

.farm-figure__band--lifted {
  fill: color-mix(in srgb, var(--accent) 16%, transparent);
  stroke: var(--accent);
  stroke-dasharray: 5 4;
}

.farm-figure__hinge-ring {
  stroke: var(--trigger);
  stroke-width: 1.5;
  stroke-dasharray: 6 4;
}

.farm-figure__plant,
.farm-figure__ring {
  fill: color-mix(in srgb, var(--crop-stroke) 24%, transparent);
  stroke: var(--crop-stroke);
  stroke-width: 1;
}

.farm-figure__ring {
  fill: none;
  stroke: var(--control-edge);
}

.farm-figure__ring--lifted {
  stroke: var(--accent);
  stroke-dasharray: 4 5;
}

.farm-figure__petal {
  stroke: var(--trigger);
  stroke-width: 6;
  stroke-linecap: round;
}

.farm-figure__petal--stowed {
  stroke: color-mix(in srgb, var(--trigger) 28%, transparent);
  stroke-width: 3;
  stroke-dasharray: 3 5;
}

.farm-figure__pivot {
  fill: var(--trigger);
}

.farm-figure__stage-readout {
  fill: var(--muted);
  font: 600 12px ui-monospace, SFMono-Regular, Menlo, monospace;
}

.farm-figure__svg [data-component-id] {
  cursor: pointer;
}

.farm-figure__svg [data-component-id]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.farm-figure__target--selected {
  stroke: var(--text);
  stroke-width: 2.5;
}

.farm-figure__band.farm-figure__target--selected,
.farm-figure__plant.farm-figure__target--selected {
  fill: color-mix(in srgb, var(--text) 45%, transparent);
}

.farm-figure__pivot.farm-figure__target--selected,
.farm-figure__ring.farm-figure__target--selected {
  stroke: var(--text);
}

/* Readouts ---------------------------------------------------------------- */

.farm-figure__readout {
  margin: 0;
  min-height: 3.5rem;
  padding: .6rem .75rem;
  border: 1px solid var(--line);
  border-radius: .6rem;
  color: var(--text);
  background: var(--panel-2, var(--panel));
  font-size: .82rem;
  line-height: 1.5;
}

.farm-figure__status {
  margin: 0;
  min-height: 1.1rem;
  color: var(--muted);
  font-size: .8rem;
}

.farm-figure[data-state="error"] .farm-figure__frame {
  outline: 1px solid var(--status-error);
  outline-offset: -1px;
}

.farm-figure[data-state="error"] .farm-figure__status {
  color: var(--status-error);
}

.farm-figure__caption {
  margin: 0;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.5;
}

@media (max-width: 720px) {
  .farm-figure__channel {
    grid-template-columns: 1fr;
    gap: .25rem;
  }

  .farm-figure__toolbar {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (prefers-reduced-motion: reduce) {
  .farm-figure * {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}