/* The live card (public/site/onboard/live-card.js): the one stylesheet for
   the pass front Cardr draws in the browser, the builder's
   (index.html #builderStage) and /edit's alike. Sizes are in cqw of the
   face, so the card is one drawing at any width; the page that holds it sets
   only its width (--pw). Colours come from the pass (--pass-bg, --pass-fg,
   --pass-lab, set by the stage from the server's own resolveColors). */
.ob-card.passcard{
  width:var(--pw,300px);aspect-ratio:1/1.27;height:auto;position:relative;
  border-radius:calc(var(--pw,300px) * .054);
  font-family:var(--body,"Switzer",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif);
}
.ob-card .f{position:absolute;inset:0;border-radius:inherit;overflow:hidden;display:flex;flex-direction:column;
  container-type:inline-size;transform:none;background:var(--pass-bg);color:var(--pass-fg)}
.ob-card .f::after{display:none}
.ob-card .pass-top{display:flex;align-items:center;justify-content:space-between;flex:none;
  padding:3.9cqw 4.4cqw 3.2cqw;color:var(--pass-fg)}
.ob-card .pass-top .who{display:flex;align-items:center;gap:2cqw;min-width:0;
  font-family:var(--disp,"Satoshi",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif);
  font-weight:700;font-size:3.9cqw;letter-spacing:-.022em}
.ob-card .pass-top .who i{width:4.9cqw;height:3.5cqw;border-radius:.8cqw;background:var(--pass-fg);position:relative;flex:none}
.ob-card .pass-top .who i::after{content:"";position:absolute;left:.75cqw;top:1.2cqw;width:1.7cqw;
  height:.6cqw;border-radius:.3cqw;background:var(--pass-bg)}
.ob-card .pass-top .upd{text-align:right;font-size:2.6cqw;line-height:1.25;letter-spacing:.09em;
  text-transform:uppercase;color:var(--pass-lab)}
.ob-card .pass-top .upd b{display:block;font-family:var(--disp,"Satoshi",sans-serif);font-weight:700;font-size:3.3cqw;
  letter-spacing:-.01em;text-transform:none;color:var(--pass-fg)}

/* the strip: two decoded images crossfading, never a half-loaded one */
.ob-card .ob-strip{flex:none;position:relative;overflow:hidden;height:auto;aspect-ratio:375/144;
  background:var(--pass-bg);box-shadow:none}
.ob-card .ob-strip img{position:absolute;inset:0;display:block;width:100%;height:100%;transition:opacity 180ms ease-out}
/* "Your name", set where nameOverlay() sets a name (x 22, baseline 118 of
   375x144, 30pt light), and only while the strip on show has none */
.ob-card .ob-nm{position:absolute;left:5.87cqw;bottom:5.1cqw;margin:0;z-index:2;
  font:300 8cqw/1 "Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:-.033em;
  color:rgba(255,255,255,.42);white-space:nowrap;pointer-events:none;transition:opacity 180ms ease-out}
.ob-card .ob-strip.has-name .ob-nm{opacity:0}
/* the holder's photo, as strip.js composites it: the right 58% of the strip,
   cover-cropped about the centre, fading in from the left over the name's
   side (PHOTO_HERO_FRACTION, PHOTO_MASK_STOPS in name-fit.js) */
.ob-card .ob-strip .ob-photo{inset:0 0 0 auto;width:58%;height:100%;object-fit:cover;object-position:center;z-index:1;
  -webkit-mask-image:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.55) 32%,#000 70%);
  mask-image:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.55) 32%,#000 70%);
  filter:saturate(.85) brightness(1.02) contrast(1.04)}
.ob-card .ob-strip img.ob-photo[hidden]{display:none}
/* a design with no strip (Wallet's generic style): the name, and the
   thumbnail beside it, where the strip would be */
.ob-card .ob-gen{display:flex;align-items:center;justify-content:space-between;gap:4cqw;
  aspect-ratio:375/144;padding:0 4.4cqw;flex:none}
.ob-card .ob-gen[hidden]{display:none}
.ob-card.is-generic .ob-strip{display:none}
.ob-card .ob-gen-name{margin:0;min-width:0;font:600 7cqw/1.08 var(--disp,"Satoshi",sans-serif);letter-spacing:-.03em;color:var(--pass-fg);
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ob-card .ob-gen-thumb{flex:none;width:24cqw;height:24cqw;border-radius:2.4cqw;object-fit:cover;
  transition:opacity 180ms ease-out}
.ob-card .ob-gen-thumb:not([src]){visibility:hidden}

/* the rows: as typed in the builder (labelled Role and Company), or as the
   pass prints them (.is-front: frontOf's fields, unlabelled where the pass
   leaves them so) */
.ob-card .rows{padding:3.8cqw 4.4cqw 0;display:grid;grid-template-columns:1fr 1fr;gap:3.2cqw 3.4cqw;flex:none;box-shadow:none}
.ob-card .rows div{min-width:0}
.ob-card .rows>[hidden]{display:none}
.ob-card .rows span{display:block;font-size:2.4cqw;letter-spacing:.11em;text-transform:uppercase;
  color:var(--pass-lab);margin-bottom:.6cqw}
.ob-card .rows b{display:block;min-height:1.2em;font-family:var(--disp,"Satoshi",sans-serif);font-weight:700;font-size:3.85cqw;
  letter-spacing:-.022em;color:var(--pass-fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ob-card .rows b.is-empty,.ob-card .qcap.is-empty{opacity:.5}
.ob-card.is-front .rows{grid-template-columns:1fr}
.ob-card.is-front .pass-top{justify-content:flex-start;min-height:12cqw}
.ob-card .ob-logo{width:8cqw;height:8cqw;border-radius:1.8cqw;object-fit:cover;flex:none;transition:opacity 180ms ease-out}
.ob-card .ob-logo[hidden]{display:none}
/* the tile's place is kept until the pass says whether there is one, so the
   company beside it never moves when it arrives */
.ob-card .ob-logo:not([src]){visibility:hidden}
/* no name yet: an empty tile in the placeholders' tint, no glyph; the
   monogram replaces it with a fade (opacity only) and the same box */
.ob-card .ob-logo.is-ghost{visibility:visible;background:var(--pass-fg);opacity:.2}
.ob-card .ob-logo-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:4.2cqw}
.ob-card .ob-logo-text.is-empty{opacity:.5}
.ob-card .ob-extra{display:contents}

.ob-card .qr{margin:auto auto 0;width:27%;aspect-ratio:1;background:#fff;border-radius:1.8cqw;padding:1.5cqw;flex:none}
.ob-card.is-front .qr{margin-bottom:6cqw}
.ob-card .qr svg{width:100%;height:100%;display:block}
/* the live card's own QR: it opens the page */
.ob-card .qr .ob-qr{display:block;width:100%;height:100%;image-rendering:pixelated;transition:opacity 180ms ease-out}
.ob-card .qcap{margin:0;text-align:center;font-size:2.4cqw;letter-spacing:.13em;text-transform:uppercase;
  color:var(--pass-lab);padding:1.9cqw 0 2.6cqw;flex:none}
.ob-card .pass-foot{margin-top:auto;padding:2.7cqw 4.4cqw;display:flex;align-items:center;justify-content:space-between;flex:none;
  font-size:3.2cqw;color:var(--pass-lab);border-top:1px solid rgba(255,255,255,.15)}
.ob-card .pass-foot i{width:4.4cqw;height:4.4cqw;border-radius:99px;display:grid;place-items:center;
  border:1px solid currentColor;font-style:normal;font-size:2.6cqw;font-family:var(--disp,"Satoshi",sans-serif)}
/* a light design keeps its hairlines and the QR's edge visible */
.ob-card.is-light .pass-foot{border-top-color:rgba(0,0,0,.12)}
.ob-card.is-light .qr{box-shadow:0 0 0 1px rgba(0,0,0,.1)}
/* an image appears once it has loaded: a slow one is a blank, never a broken box */
.ob-card img.ob-wait{opacity:0}

/* a page holding the card without the builder (/edit): its width and depth */
.lcard{display:grid;justify-items:center}
.lcard .ob-card.passcard{--pw:min(340px,100%);
  box-shadow:0 30px 60px -28px rgba(4,22,64,.55),0 2px 8px -3px rgba(4,22,64,.28)}

@media (prefers-reduced-motion:reduce){
  .ob-card .ob-strip img,.ob-card .ob-nm,.ob-card .ob-gen-thumb,.ob-card .qr .ob-qr,.ob-card .ob-logo{transition:none}
}