/*
  Physical-card type is treated like a small printed object: strong hierarchy,
  restrained dimensional type, and a quiet contrast surface only where details
  need to remain readable over the artwork.
*/
.physical-card {
  --card-detail-panel: rgb(255 255 255 / 72%);
  --card-detail-border: rgb(255 255 255 / 88%);
  --card-ink-shadow: 0 1px 0 rgb(255 255 255 / 72%), 0 5px 15px rgb(17 35 50 / 16%);
  border: 1px solid rgb(255 255 255 / 36%);
  box-shadow: 0 2px 0 rgb(255 255 255 / 28%) inset, 0 18px 29px rgb(23 38 56 / 25%), 0 29px 48px rgb(23 38 56 / 12%);
  text-rendering: geometricPrecision;
}

.physical-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(118deg, rgb(255 255 255 / 8%), transparent 31%, transparent 69%, rgb(0 0 0 / 7%));
}

.physical-card > *:not(.card-art) {
  z-index: 2;
}

.physical-brand b,
.physical-brand small,
.physical-person p,
.physical-person h3,
.physical-contact-lines,
.physical-card-url {
  text-shadow: var(--card-ink-shadow);
}

.physical-brand {
  align-items: center;
}

.physical-brand b {
  font-size: clamp(11px, 1.05vw, 13px);
  font-weight: 800;
  letter-spacing: .28px;
  line-height: 1.12;
}

.physical-brand small {
  margin-top: 3px;
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 1.12px;
}

.physical-logo {
  box-shadow: 0 2px 0 rgb(255 255 255 / 24%) inset, 0 5px 12px rgb(13 30 43 / 18%);
}

.physical-person {
  padding: 7px 9px 8px;
  border: 1px solid var(--card-detail-border);
  border-radius: 10px;
  background: linear-gradient(110deg, transparent, var(--card-detail-panel));
  box-shadow: 0 1px 0 rgb(255 255 255 / 42%) inset, 0 7px 17px rgb(17 34 47 / 11%);
  backdrop-filter: blur(5px);
}

.physical-person p {
  margin-bottom: 4px;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .12px;
}

.physical-person h3 {
  font-size: clamp(19px, 1.75vw, 24px);
  font-weight: 800;
  letter-spacing: -.72px;
  line-height: 1;
  -webkit-text-stroke: .18px currentColor;
  paint-order: stroke fill;
}

.physical-contact-lines {
  max-width: 48%;
  gap: 5px;
  font-size: 8.5px;
  font-weight: 700;
  line-height: 1.15;
}

.physical-contact-lines span,
.physical-card-url {
  box-sizing: border-box;
  border: 1px solid var(--card-detail-border);
  border-radius: 5px;
  background: var(--card-detail-panel);
  box-shadow: 0 1px 0 rgb(255 255 255 / 38%) inset, 0 4px 10px rgb(17 34 47 / 9%);
  backdrop-filter: blur(4px);
}

.physical-contact-lines span {
  display: block;
  overflow: hidden;
  padding: 3px 5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.physical-card-url {
  max-width: 43%;
  overflow: hidden;
  padding: 3px 5px;
  font-size: 8px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Dark cards use deep glass so the bright type keeps its intended character. */
.card-executive,
.card-studio {
  --card-detail-panel: rgb(3 15 38 / 58%);
  --card-detail-border: rgb(255 255 255 / 24%);
  --card-ink-shadow: 0 1px 0 rgb(0 0 0 / 78%), 0 5px 16px rgb(0 0 0 / 46%);
}

.card-executive .physical-person,
.card-studio .physical-person {
  background: linear-gradient(110deg, rgb(4 16 39 / 15%), var(--card-detail-panel));
}

.card-ocean {
  --card-detail-panel: rgb(255 255 255 / 76%);
  --card-detail-border: rgb(255 255 255 / 92%);
  --card-ink-shadow: 0 1px 0 rgb(255 255 255 / 74%), 0 4px 12px rgb(0 74 111 / 19%);
}

.card-verdant,
.card-saffron,
.card-classic {
  --card-detail-panel: rgb(255 255 255 / 78%);
  --card-detail-border: rgb(255 255 255 / 94%);
}

.library-card-visual .physical-person,
.editor-template-card .physical-person {
  padding: 5px 7px 6px;
  border-radius: 8px;
}

.library-card-visual .physical-contact-lines,
.editor-template-card .physical-contact-lines {
  gap: 3px;
}

.library-card-visual .physical-contact-lines span,
.editor-template-card .physical-contact-lines span,
.library-card-visual .physical-card-url,
.editor-template-card .physical-card-url {
  padding: 2px 4px;
}

/* On phones the card is a normal, live preview above the form. Editing keeps
   the exact scroll position; the creator can deliberately scroll up to review it. */
@media (max-width: 800px) {
  .editor-template-stage {
    position: static;
  }

  .physical-person h3 {
    font-size: clamp(18px, 5.1vw, 22px);
  }

  .editor-template-card .physical-person h3 {
    font-size: clamp(17px, 4.8vw, 21px);
  }
}

@media (max-width: 460px) {
  .physical-brand b {
    font-size: 10px;
  }

  .physical-brand small {
    font-size: 6.5px;
  }

  .physical-person {
    padding: 5px 6px 6px;
    border-radius: 8px;
  }

  .physical-person h3 {
    font-size: 16px;
  }

  .physical-person p {
    font-size: 7.5px;
  }

  .physical-contact-lines {
    gap: 3px;
  }

  .physical-contact-lines span,
  .physical-card-url {
    padding: 2px 4px;
  }
}