/* ACCUS license card — shared by the admin (Card designs, Digital license,
   print previews) and each driver's own license page (/license/…).
   VERTICAL card, 54 × 85.6 mm = 27 × 42.8 units. Every size is a multiple of
   --k, so changing --k scales the whole card (10px → 270 × 428 px).
   Drawn by public/card/card.js. */
.lic { --k: 10px; --year: #1f8f3f; --cnavy: #16285a; --cred: #c8102e;
  width: calc(var(--k)*27); height: calc(var(--k)*42.8); border-radius: calc(var(--k)*1.6); overflow: hidden; position: relative; flex: none;
  font-family: "Helvetica Neue", Arial, sans-serif; color: #10183a; background: #fff; line-height: 1.15;
  box-shadow: 0 2px 5px rgba(20,32,63,.12), 0 12px 30px rgba(20,32,63,.18); }
.lic * { box-sizing: border-box; }
.lic img { display: block; }

/* Front concepts: one finished picture per design */
.f-img { background: #16285a; }
.f-img img { width: 100%; height: 100%; object-fit: cover; }

/* ---------------- the information side (back) */
.b .hdr { position: absolute; left: calc(var(--k)*1.6); top: calc(var(--k)*1.5); height: calc(var(--k)*2.8); }
.b .yr { position: absolute; right: calc(var(--k)*1.6); top: calc(var(--k)*1.1); text-align: right; }
.b .yr b { display: block; font-size: calc(var(--k)*2.2); font-weight: 900; color: var(--year); line-height: 1; }
.b .photo { position: absolute; left: calc(var(--k)*1.6); top: calc(var(--k)*5.4); width: calc(var(--k)*11.2); height: calc(var(--k)*13.6); background: #e7ebf3; border-radius: calc(var(--k)*.3); overflow: hidden; }
.b .photo svg, .b .photo img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 50% 30%; }
/* framed on the face (card.js photoImg): the photo placed so the box shows just that part */
.b .photo img.framed { position: absolute; max-width: none; object-fit: fill; }
.b .role { position: absolute; left: calc(var(--k)*1.6); top: calc(var(--k)*19.2); width: calc(var(--k)*11.2); height: calc(var(--k)*2.9); background: var(--cnavy); color: #fff;
  display: grid; place-items: center; border-radius: calc(var(--k)*.2); }
.b .role span { font-size: calc(var(--k)*1.6); font-weight: 900; letter-spacing: .06em; }      /* DRIVER / ENTRANT / OFFICIAL — big, so it stands out (Chris) */
.b .grade { position: absolute; left: calc(var(--k)*14); right: calc(var(--k)*1.6); top: calc(var(--k)*5.3); text-align: center; }
.b .grade small { display: block; font-size: calc(var(--k)*.52); letter-spacing: .1em; font-weight: 700; color: #44506e; }
.b .grade b { display: block; font-size: calc(var(--k)*3.2); font-weight: 900; line-height: 1.05; }
.b .grade.l b { font-size: calc(var(--k)*2); padding-top: calc(var(--k)*.6); }
.b .grade.xl b { font-size: calc(var(--k)*1.5); padding-top: calc(var(--k)*.9); }
.b .grade em { display: block; font-style: normal; font-size: calc(var(--k)*.9); font-weight: 800; }
.b .qr { position: absolute; left: calc(var(--k)*15.2); top: calc(var(--k)*11); width: calc(var(--k)*9); height: calc(var(--k)*9); background: #fff; padding: calc(var(--k)*.4); border: 1px solid #e3e7ef; border-radius: calc(var(--k)*.3); }
.b .qr svg { width: 100%; height: 100%; display: block; }
.b .qrcap { position: absolute; left: calc(var(--k)*14); right: calc(var(--k)*1.6); top: calc(var(--k)*20.4); text-align: center; color: #44506e; }
.b .qrcap span { font-size: calc(var(--k)*.48); letter-spacing: .08em; font-weight: 700; }
.b .name { position: absolute; left: calc(var(--k)*1.6); right: calc(var(--k)*1.6); top: calc(var(--k)*22.5); }
.b .name span { font-size: calc(var(--k)*2.05); font-weight: 900; line-height: .98; text-transform: uppercase; letter-spacing: -.01em; display: block; }
.b .name.l span { font-size: calc(var(--k)*1.55); }
.b .rows { position: absolute; left: calc(var(--k)*1.6); right: calc(var(--k)*1.6); top: calc(var(--k)*27.1); }
.b .rows .r { display: grid; grid-template-columns: calc(var(--k)*6.4) 1fr; column-gap: calc(var(--k)*.4); border-bottom: 1px solid #e3e7ef; padding: calc(var(--k)*.17) 0; align-items: baseline; }
.b .rows .r span { font-size: calc(var(--k)*.72); font-weight: 800; color: #44506e; letter-spacing: .03em; }
.b .rows .r strong { font-size: calc(var(--k)*.78); font-weight: 800; text-align: right; white-space: nowrap; }
.b .rows .r.auth { grid-template-columns: 1fr auto; padding: calc(var(--k)*.2) 0; }
.b .rows .r.auth span { line-height: 1.2; }
.b .rows .r.auth strong { color: var(--cnavy); align-self: center; }
/* Entrants: no grade box, so the QR sits beside the photo; the team name leads */
.b.ent .qr { top: calc(var(--k)*8.2); }
.b.ent .qrcap { top: calc(var(--k)*17.6); }
.b .name.team span { line-height: 1; }
/* Officials and entrants have three lines, so they get room to breathe */
/* drivers carry the most lines (number, issued, expiry, birth date, medical, eyesight, WADB, authorization) */
.b .rows.dense .r { padding: calc(var(--k)*.06) 0; }
.b .rows.dense .r span { font-size: calc(var(--k)*.66); }
.b .rows.dense .r strong { font-size: calc(var(--k)*.72); }
.b .rows.dense .r.auth { padding: calc(var(--k)*.1) 0; }
.b .rows.few { top: calc(var(--k)*27.4); }
.b .rows.few .r { padding: calc(var(--k)*.36) 0; }
.b .rows.few .r span { font-size: calc(var(--k)*.85); }
.b .rows.few .r strong { font-size: calc(var(--k)*.95); }
.b .name.team em { display: block; font-style: normal; font-size: calc(var(--k)*.95); font-weight: 800; margin-top: calc(var(--k)*.35); text-transform: uppercase; }
.b .name.team em small { font-size: calc(var(--k)*.5); letter-spacing: .1em; color: #44506e; margin-right: calc(var(--k)*.3); }
.b .note { position: absolute; left: calc(var(--k)*1.6); right: calc(var(--k)*1.6); top: calc(var(--k)*36.9); text-align: center; color: var(--cred);
  font-size: calc(var(--k)*1.08); line-height: 1.15; }
.b .note span { font-weight: 900; letter-spacing: .02em; }
.b .addr { position: absolute; left: calc(var(--k)*1.2); right: calc(var(--k)*1.2); top: calc(var(--k)*38.55); text-align: center; color: #44506e;
  font-size: calc(var(--k)*.48); line-height: 1.3; }
.b .yearbar { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--k)*2.5); background: var(--year); color: #fff; display: flex; justify-content: space-between;
  align-items: center; padding: 0 calc(var(--k)*1.6); }
.b .yearbar span { font-size: calc(var(--k)*1.2); font-weight: 900; letter-spacing: .05em; }