/*
  Gener8 style kit — the part card (opens when a part is tapped).

  Layout, top to bottom:
    grip bar (drag the card anywhere)            .grip
    layer, with its colour dot   .card-sys
    part name, big bold                          .title
    where it sits (Skeleton › Skull)             .card-path
    description, then its source line            .card-text, .card-src
    main action, full width (Open up)            .card-main
    actions with icons (Show only, Fade, Hide)   .card-acts

  The card is positioned by the viewer's JS (beside the part, never in the top of
  the screen), so only its look lives here.
*/
.card {
  position: absolute; z-index: 6;
  width: calc(var(--u) * 40); max-width: 60vw;
  padding: calc(var(--u) * 1.6) calc(var(--u) * 2) calc(var(--u) * 1.8);
  border-radius: var(--r-lg);
  touch-action: none; cursor: grab;
}
.card.dragging { cursor: grabbing; }
.card .grip { display: block; width: calc(var(--u) * 3.2); height: calc(var(--u) * .45); border-radius: 99px; background: var(--ink); opacity: .8; margin: 0 0 calc(var(--u) * 1.4); }
.card .iconbtn { position: absolute; top: calc(var(--u) * .8); right: calc(var(--u) * .8); }

.card-sys { display: flex; align-items: center; gap: calc(var(--u) * .7); margin-bottom: calc(var(--u) * .3); }
.card-sys i { width: calc(var(--u) * 1); height: calc(var(--u) * 1); border-radius: 50%; flex: none; }
.card .title { margin: 0 calc(var(--u) * 3) calc(var(--u) * .7) 0; }
.card-path { font-size: calc(var(--tu) * 1.2); color: var(--muted); margin-bottom: calc(var(--u) * 1.4); }

.card-text {
  margin: 0 0 calc(var(--u) * 1); font-size: calc(var(--tu) * 1.5); line-height: 1.5; color: var(--ink);
  max-height: calc(var(--u) * 22); overflow: auto;
}
.card-src { font-size: calc(var(--tu) * 1.2); color: var(--faint); margin: 0 0 calc(var(--u) * 1.2); }

.card-foot { border-top: 1px solid var(--line); padding-top: calc(var(--u) * 1.4); display: flex; flex-direction: column; gap: calc(var(--u) * .8); }
.card-acts { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * .7); }
.card-acts .btn { padding: 0 calc(var(--u) * .7); font-size: calc(var(--tu) * 1.3); gap: calc(var(--u) * .6); }
.card-acts .btn svg.i { width: calc(var(--u) * 1.9); height: calc(var(--u) * 1.9); }