/* ============================================================================
   PARITY B09: twin-yard — the shared surface every *_twin block renders into.
   Bespoke structure that Tailwind can't express: the standing cells' hover
   lift, the record's own paint arriving as currentColor, and the shared
   `state-dot` primitive (6px status pip) the twin cells and heroes use.
   Everything else in the yard/hero is plain Tailwind (see twin_yard.rs).
   ========================================================================== */

/* The twin panel composes `.glass-card` for its material but owns its own box
   (the header + grid children do the padding) — so select element+class and
   clear the pane padding, exactly as `section.gauge` does in dashboard.css
   (trap §3.5: vitrine.css loads late and its `.glass-card` padding would win). */
div.twin-yard {
  padding: 0;
}

/* The cells are links in the reference (router <Link>); the old app's preflight
   makes anchors inherit the text colour, so an uncoloured status dot inside a
   cell reads dark. The new app styles `a` accent-coloured by default — restore
   the reference behaviour for the cell face. */
a.twin-cell {
  color: inherit;
  text-decoration: none;
}

/* The hero's fact rail is a <dl>; the new base.css doesn't reset dl margins
   (the reference's Tailwind preflight does), so zero it here. */
.twin-facts {
  margin: 0;
}

/* The shared 6px status pip. Defined here because no other batch owns it yet;
   B07 (heroes) uses the same class — keep this rule identical if it lands
   anywhere else. Mirrors the reference's `.state-dot` in old app.css. */
.state-dot {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 9999px;
}

/* A standing twin lifts out of the grid on hover — the old yard's
   `group-hover:[transform:translateY(-5px)]` with its 170ms ease-out, which
   the Tailwind bundle doesn't emit for arbitrary-property transforms. */
.twin-cell .twin-figure {
  transition: transform 170ms cubic-bezier(0.2, 0.7, 0.3, 1);
  will-change: transform;
}
.twin-cell:hover .twin-figure {
  transform: translateY(-5px);
}

/* The yard is a grab surface in the reference (drag-to-orbit). Server-side
   there is no orbit, but keeping the grab affordance tells a viewer the twin
   is a manipulable object, not a chart. */
.twin-cell {
  cursor: grab;
  touch-action: pan-y;
}

/* The hero's stage rail — the old `lg:grid-cols-[minmax(0,1fr)_minmax(0,17rem)]`,
   which the Tailwind bundle won't compile as an arbitrary value. The twin
   takes the width, the facts take a 17rem rail. */
.twin-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1024px) {
  .twin-hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 17rem);
  }
}

/* The hero stage's plate — the sign written on the thing, reduced from a
   3D-projected fascia to a small board under the figure (the reference's
   Sign: BOARD #171c23, INK #f2ece0). */
.twin-plate {
  max-width: 12rem;
  margin-top: -0.5rem;
  border-radius: 4px;
  padding: 0.2rem 0.6rem;
  background: #171c23;
  color: #f2ece0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 1px 2px rgb(0 0 0 / 20%);
}