/*  The Nexus Privilege Card.

    THE ARTWORK IS THE PRODUCT. A card carrying twenty thousand rand of credit that renders as a
    row in a table is a card nobody feels they have bought, and this is a design somebody drew for
    a reason - so it is reproduced rather than approximated: the tier gradients, the textures, the
    glow behind each one, the strip along the bottom edge.

    ONE STYLESHEET, THREE PLACES. The shop shows it before it is bought, the order page shows the
    one you now hold, and a counter can reprint it. A card that looks different in any of those is
    three cards as far as the person holding it is concerned.

    Sourced from nexus-privilege-card-v2_1.html. Where that file drew a five-by-five block of
    squares to stand in for a QR, this draws the real one - the card number, encoded.  */

/*  Border-box, scoped to the card.

    The design was drawn under a global reset. This stylesheet is loaded into pages that already
    have their own, and into one - the print page - that might not: without it the inner padding
    is added to a width of 100% and the right-hand third of the card is clipped by its own
    overflow, which looks exactly like a broken layout and is not one. */
.priv-card, .priv-card *, .priv-card *::before, .priv-card *::after { box-sizing: border-box; }

/*  THE CARD IS FLUID, NOT SCALED.

    It has to render at 560px on a product page and at 260px in a catalogue tile. The obvious
    approach - draw it at full size and transform: scale() it down - does not work: scale() takes
    a number, and there is no way in CSS to divide a container's width by a fixed one to get one.
    (calc(100cqw / 560) is a length, and a length in scale() is simply dropped, which is how the
    first attempt at this rendered a full-size card clipped to the tile.)

    So the card is its own container and every metric inside it is a percentage of its width -
    cqw, where 1cqw is a hundredth of the card. The design's pixel values, taken at its 560px
    reference width, are the same proportions: 38px of value type is 6.79cqw. Text stays crisp at
    any size, which a transform would not manage, and nothing has to know how wide the card is. */
/*  A CONTAINER CANNOT QUERY ITSELF, which is a rule with teeth: cqw units on the card's own
    properties do not resolve against the card, they fall back to the viewport - so a 3.6cqw
    corner radius came out as 3.6% of a 27-inch monitor and drew the card as a lozenge. The box
    is the container; the card sits inside it and both it and its contents measure against that. */
.priv-card-box { container-type: inline-size; width: 100%; max-width: 560px; }

.priv-card {
    width: 100%; max-width: 560px;
    aspect-ratio: 856 / 540;
    border-radius: 3.6cqw;
    position: relative; overflow: hidden;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .6);
    color: #E0F2FE;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/*  The mark scales with everything else - 148px of logo at the reference width. */
.priv-card .c-topbar svg { width: 26.4cqw; height: auto; }

.c-noise { position: absolute; inset: 0; opacity: .04;
           background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

.c-inner { position: relative; z-index: 4; width: 100%; height: 100%;
           display: grid; grid-template-rows: auto 1fr auto; padding: 3.6cqw 4.3cqw 2.9cqw; gap: 0; }
.c-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.8cqw; }
.c-tier-label { font-size: 2cqw; font-weight: 700; letter-spacing: .45cqw; text-transform: uppercase; }
.c-zones { display: grid; grid-template-columns: 1fr 1px 1fr; gap: 0; align-items: center; }
.c-store { display: flex; flex-direction: column; justify-content: center; padding: 0 3.2cqw 0 0; }
.c-zone-label { font-size: 1.45cqw; font-weight: 700; letter-spacing: .54cqw; text-transform: uppercase;
                opacity: .45; margin-bottom: 1.1cqw; }
.c-value { font-size: 6.8cqw; font-weight: 900; letter-spacing: -.36cqw; line-height: 1; margin-bottom: .7cqw; }
.c-store-sub { font-size: 1.6cqw; letter-spacing: .36cqw; text-transform: uppercase; opacity: .45; }
.c-divider-line { width: 1px; height: 14.3cqw; opacity: .18; align-self: center; }
.c-event { display: flex; flex-direction: column; justify-content: center; align-items: flex-end;
           padding: 0 0 0 3.2cqw; gap: 1.1cqw; }
.c-event-content { display: flex; flex-direction: column; align-items: flex-end; gap: .9cqw; width: 100%; }
.c-access-badge { font-size: 1.6cqw; font-weight: 700; letter-spacing: .36cqw; text-transform: uppercase;
                  padding: .54cqw 1.8cqw; border-radius: .7cqw; align-self: flex-end; }
.c-access-level { font-size: 2.3cqw; font-weight: 800; letter-spacing: -.05cqw; text-align: right; }
.c-event-sub { font-size: 1.6cqw; opacity: .45; text-align: right; letter-spacing: .05cqw; line-height: 1.4; }
.c-zone-label-r { font-size: 1.45cqw; font-weight: 700; letter-spacing: .54cqw; text-transform: uppercase;
                  opacity: .45; margin-bottom: 1.1cqw; text-align: right; }

/*  The QR sits where the drawn stand-in did, at the same size, on white - a code printed on a
    tinted panel is a code a phone camera argues with. */
.c-qr { width: 11.1cqw; height: 11.1cqw; border-radius: 1.25cqw; padding: .7cqw; flex-shrink: 0; background: #fff; }
.c-qr img { width: 100%; height: 100%; display: block; }
.c-qr-pending { width: 11.1cqw; height: 11.1cqw; border-radius: 1.25cqw; display: flex; align-items: center;
                justify-content: center; text-align: center; font-size: 1.25cqw; line-height: 1.25;
                letter-spacing: .09cqw; padding: .9cqw; }

.c-bottombar { display: flex; align-items: flex-end; justify-content: space-between;
               margin-top: 1.8cqw; padding-top: 1.4cqw; }
.c-code-lbl, .c-exp-lbl { font-size: 1.25cqw; letter-spacing: .36cqw; text-transform: uppercase;
                          opacity: .35; margin-bottom: .36cqw; }
.c-code-val { font-size: 2cqw; font-weight: 700; letter-spacing: .54cqw; font-family: 'Courier New', monospace; }
.c-exp-val { font-size: 1.8cqw; font-weight: 600; opacity: .7; text-align: right; }
.c-url { font-size: 1.45cqw; opacity: .2; letter-spacing: .18cqw; text-align: right; }

/* ── Tier 1: Skepsel — indigo, circuit lines */
.sk-card { background: linear-gradient(145deg, #0F1535 0%, #1a1f3e 55%, #0A0E2A 100%); }
.sk-glow { position: absolute; top: -60px; left: -60px; width: 280px; height: 280px; border-radius: 50%;
           background: radial-gradient(circle, rgba(99,102,241,0.16), transparent 70%); }
.sk-strip { position: absolute; bottom: 0; left: 0; right: 0; height: 1.43cqw;
            background: linear-gradient(90deg, #6366F1, #818CF8, #4338CA 80%, transparent); }
.sk-stripline { position: absolute; bottom: 1.43cqw; left: 0; right: 0; height: .75px; background: #818CF8; opacity: .4; }
.sk-lines { position: absolute; inset: 0; z-index: 1; opacity: .06;
            background: repeating-linear-gradient(62deg, transparent 0, transparent 40px, #818CF8 40px, #818CF8 41px); }
.sk .c-tier-label { color: #A5B4FC; }
.sk .c-value { color: #E0E7FF; }
.sk .c-store-sub, .sk .c-zone-label, .sk .c-zone-label-r, .sk .c-event-sub, .sk .c-url { color: #C7D2FE; }
.sk .c-divider-line { background: #818CF8; }
.sk .c-code-val, .sk .c-exp-val { color: #C7D2FE; }
.sk .c-access-badge { background: rgba(99,102,241,0.22); border: 1px solid rgba(99,102,241,0.4); color: #818CF8; }
.sk .c-access-level { color: #A5B4FC; }
.sk .c-qr-pending { background: rgba(99,102,241,0.14); border: 1px solid rgba(99,102,241,0.28); color: #818CF8; }

/* ── Tier 2: ZamaZama — terracotta and flame, diagonal slashes */
.zz-card { background: linear-gradient(145deg, #2D0C00 0%, #4A1500 45%, #1E0800 100%); }
.zz-glow1 { position: absolute; top: -40px; right: -40px; width: 260px; height: 260px; border-radius: 50%;
            background: radial-gradient(circle, rgba(251,99,20,0.28), transparent 70%); }
.zz-glow2 { position: absolute; bottom: -60px; left: -40px; width: 220px; height: 220px; border-radius: 50%;
            background: radial-gradient(circle, rgba(239,68,68,0.15), transparent 70%); }
.zz-strip { position: absolute; bottom: 0; left: 0; right: 0; height: 1.79cqw;
            background: linear-gradient(90deg, #FF4500, #F97316, #FB923C, #EA580C); }
.zz-stripline { position: absolute; bottom: 1.79cqw; left: 0; right: 0; height: 1px; background: #F97316; opacity: .6; }
.zz-slash { position: absolute; inset: 0; z-index: 1; opacity: .07;
            background: repeating-linear-gradient(30deg, transparent 0, transparent 18px, #F97316 18px, #F97316 20px); }
.zz .c-tier-label { color: #FCA87F; }
.zz .c-value { background: linear-gradient(135deg, #FFE0A0, #FB923C, #EF4444);
               -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.zz .c-store-sub, .zz .c-zone-label, .zz .c-zone-label-r, .zz .c-event-sub, .zz .c-url { color: #FDE8C8; }
.zz .c-divider-line { background: #F97316; }
.zz .c-code-val, .zz .c-exp-val { color: #FDE8C8; }
.zz .c-access-badge { background: rgba(249,115,22,0.2); border: 1px solid rgba(249,115,22,0.42); color: #FB923C; }
.zz .c-access-level { color: #FCA87F; }
.zz .c-qr-pending { background: rgba(249,115,22,0.12); border: 1px solid rgba(249,115,22,0.3); color: #F97316; }

/* ── Tier 3: Bronze — earthy metal, dot grid */
.bz-card { background: linear-gradient(145deg, #1C0E00 0%, #3A200A 40%, #522E10 70%, #1C0E00 100%); }
.bz-glow1 { position: absolute; top: -50px; left: -50px; width: 300px; height: 300px; border-radius: 50%;
            background: radial-gradient(circle, rgba(205,127,50,0.26), transparent 70%); }
.bz-glow2 { position: absolute; bottom: -40px; right: -40px; width: 200px; height: 200px; border-radius: 50%;
            background: radial-gradient(circle, rgba(139,69,19,0.2), transparent 70%); }
.bz-strip { position: absolute; bottom: 0; left: 0; right: 0; height: 1.61cqw;
            background: linear-gradient(90deg, #8B4513, #CD7F32, #B8860B, #A0522D); }
.bz-stripline { position: absolute; bottom: 1.61cqw; left: 0; right: 0; height: .75px; background: #CD7F32; opacity: .5; }
.bz-dots { position: absolute; inset: 0; z-index: 1; opacity: .07;
           background-image: radial-gradient(circle, #CD7F32 1px, transparent 1px); background-size: 16px 16px; }
.bz .c-tier-label { color: #E8A45A; }
.bz .c-value { background: linear-gradient(135deg, #FFE8A0, #CD7F32, #8B4513);
               -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.bz .c-store-sub, .bz .c-zone-label, .bz .c-zone-label-r, .bz .c-event-sub, .bz .c-url { color: #E8B87A; }
.bz .c-divider-line { background: #CD7F32; }
.bz .c-code-val, .bz .c-exp-val { color: #E8B87A; }
.bz .c-access-badge { background: rgba(205,127,50,0.18); border: 1px solid rgba(205,127,50,0.4); color: #CD7F32; }
.bz .c-access-level { color: #E8A45A; }
.bz .c-qr-pending { background: rgba(205,127,50,0.1); border: 1px solid rgba(205,127,50,0.28); color: #CD7F32; }

/* ── Tier 4: Chrome — gunmetal, scanlines */
.ch-card { background: linear-gradient(145deg, #0D1218 0%, #1A2332 50%, #0F1822 100%); }
.ch-glow1 { position: absolute; top: -60px; left: 50%; transform: translateX(-50%); width: 320px; height: 200px;
            border-radius: 50%; background: radial-gradient(ellipse, rgba(203,213,225,0.1), transparent 70%); }
.ch-glow2 { position: absolute; bottom: -40px; right: -40px; width: 220px; height: 220px; border-radius: 50%;
            background: radial-gradient(circle, rgba(148,163,184,0.08), transparent 70%); }
.ch-strip { position: absolute; bottom: 0; left: 0; right: 0; height: 1.43cqw;
            background: linear-gradient(90deg, #475569, #CBD5E1, #94A3B8, #64748B); }
.ch-stripline { position: absolute; bottom: 1.43cqw; left: 0; right: 0; height: .75px; background: #CBD5E1; opacity: .4; }
.ch-scan { position: absolute; inset: 0; z-index: 1; opacity: .05;
           background: repeating-linear-gradient(0deg, transparent 0, transparent 4px, #94A3B8 4px, #94A3B8 5px); }
.ch .c-tier-label { color: #E2E8F0; }
.ch .c-value { background: linear-gradient(135deg, #FFFFFF, #E2E8F0, #94A3B8, #CBD5E1);
               -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.ch .c-store-sub, .ch .c-zone-label, .ch .c-zone-label-r, .ch .c-event-sub, .ch .c-url { color: #94A3B8; }
.ch .c-divider-line { background: #94A3B8; }
.ch .c-code-val, .ch .c-exp-val { color: #CBD5E1; }
.ch .c-access-badge { background: rgba(148,163,184,0.15); border: 1px solid rgba(148,163,184,0.32); color: #CBD5E1; }
.ch .c-access-level { color: #E2E8F0; }
.ch .c-qr-pending { background: rgba(148,163,184,0.1); border: 1px solid rgba(148,163,184,0.24); color: #94A3B8; }

/* ── Tier 5: Gold — 24k on near-black, diagonal hatch */
.go-card { background: linear-gradient(145deg, #0F0900 0%, #1E1400 40%, #2A1C00 65%, #0F0900 100%); }
.go-glow1 { position: absolute; top: -50px; left: -50px; width: 320px; height: 320px; border-radius: 50%;
            background: radial-gradient(circle, rgba(212,175,55,0.3), transparent 70%); }
.go-glow2 { position: absolute; bottom: -60px; right: -60px; width: 260px; height: 260px; border-radius: 50%;
            background: radial-gradient(circle, rgba(146,112,42,0.2), transparent 70%); }
.go-strip { position: absolute; bottom: 0; left: 0; right: 0; height: 1.61cqw;
            background: linear-gradient(90deg, #92702A, #F5D060, #D4AF37, #B8860B, #92702A); }
.go-stripline { position: absolute; bottom: 1.61cqw; left: 0; right: 0; height: .75px; background: #D4AF37; opacity: .6; }
.go-hatch { position: absolute; inset: 0; z-index: 1; opacity: .055;
            background: repeating-linear-gradient(-45deg, transparent 0, transparent 8px, #D4AF37 8px, #D4AF37 9px); }
.go .c-tier-label { color: #F5D060; }
.go .c-value { background: linear-gradient(135deg, #FFF5A0, #D4AF37, #B8860B, #F5D060);
               -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
               filter: drop-shadow(0 0 8px rgba(212,175,55,0.3)); }
.go .c-store-sub, .go .c-zone-label, .go .c-zone-label-r, .go .c-event-sub, .go .c-url { color: #F5D060; }
.go .c-divider-line { background: #D4AF37; }
.go .c-code-val, .go .c-exp-val { color: #F5D060; }
.go .c-access-badge { background: rgba(212,175,55,0.18); border: 1px solid rgba(212,175,55,0.44); color: #D4AF37; }
.go .c-access-level { color: #F5D060; }
.go .c-qr-pending { background: rgba(212,175,55,0.1); border: 1px solid rgba(212,175,55,0.28); color: #D4AF37; }

/* ── Tier 6: Platinum — icy blue-white, concentric arcs */
.pt-card { background: linear-gradient(145deg, #060D1C 0%, #0D1A2E 45%, #0A1524 100%); }
.pt-glow1 { position: absolute; top: -60px; left: -40px; width: 300px; height: 300px; border-radius: 50%;
            background: radial-gradient(circle, rgba(226,232,240,0.12), transparent 70%); }
.pt-glow2 { position: absolute; bottom: -50px; right: -50px; width: 260px; height: 260px; border-radius: 50%;
            background: radial-gradient(circle, rgba(34,211,238,0.14), transparent 70%); }
.pt-strip { position: absolute; bottom: 0; left: 0; right: 0; height: 1.61cqw;
            background: linear-gradient(90deg, #22D3EE, #E2E8F0, #94A3B8, #38BDF8, transparent); }
.pt-stripline { position: absolute; bottom: 1.61cqw; left: 0; right: 0; height: .75px;
                background: linear-gradient(90deg, #22D3EE, #E2E8F0); opacity: .55; }
.pt-arcs { position: absolute; right: -80px; top: 50%; transform: translateY(-50%); width: 300px; height: 300px;
           z-index: 1; opacity: .06; border-radius: 50%; border: 1px solid #E2E8F0;
           box-shadow: 0 0 0 20px rgba(226,232,240,0.03), 0 0 0 40px rgba(226,232,240,0.02), 0 0 0 60px rgba(226,232,240,0.01); }
.pt .c-tier-label { color: #E2E8F0; }
.pt .c-value { background: linear-gradient(135deg, #FFFFFF, #E2E8F0, #38BDF8, #94A3B8);
               -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.pt .c-store-sub, .pt .c-zone-label, .pt .c-zone-label-r, .pt .c-event-sub, .pt .c-url { color: #94A3B8; }
.pt .c-divider-line { background: linear-gradient(180deg, #22D3EE, #E2E8F0); }
.pt .c-code-val, .pt .c-exp-val { color: #E2E8F0; }
.pt .c-access-badge { background: rgba(226,232,240,0.1); border: 1px solid rgba(226,232,240,0.3); color: #E2E8F0; }
.pt .c-access-level { background: linear-gradient(90deg, #E2E8F0, #22D3EE);
                      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.pt .c-qr-pending { background: rgba(226,232,240,0.08); border: 1px solid rgba(226,232,240,0.2); color: #94A3B8; }

/* ── Tier 7: Diamond — prismatic violet and cyan, star field */
.di-card { background: linear-gradient(145deg, #040810 0%, #080E20 35%, #0A0D1F 65%, #040810 100%); }
.di-glow1 { position: absolute; top: -80px; left: -80px; width: 360px; height: 360px; border-radius: 50%;
            background: radial-gradient(circle, rgba(196,181,253,0.22), transparent 70%); }
.di-glow2 { position: absolute; bottom: -80px; right: -80px; width: 340px; height: 340px; border-radius: 50%;
            background: radial-gradient(circle, rgba(34,211,238,0.22), transparent 70%); }
.di-glow3 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 200px; height: 200px;
            border-radius: 50%; background: radial-gradient(circle, rgba(129,140,248,0.08), transparent 70%); }
.di-strip { position: absolute; bottom: 0; left: 0; right: 0; height: 1.79cqw;
            background: linear-gradient(90deg, #22D3EE, #818CF8, #C4B5FD, #818CF8, #22D3EE);
            background-size: 200% 100%; animation: nx-shimmer 3s linear infinite; }
.di-stripline { position: absolute; bottom: 1.79cqw; left: 0; right: 0; height: 1px;
                background: linear-gradient(90deg, #22D3EE, #C4B5FD, #22D3EE); opacity: .6; }
.di-prism { position: absolute; inset: 0; z-index: 1; opacity: .04;
            background: repeating-linear-gradient(72deg, transparent 0, transparent 30px, rgba(196,181,253,1) 30px, rgba(196,181,253,1) 31px, transparent 31px, transparent 50px, rgba(34,211,238,1) 50px, rgba(34,211,238,1) 51px); }
.di-stars { position: absolute; inset: 0; z-index: 1; opacity: .35;
            background-image: radial-gradient(circle, rgba(255,255,255,0.8) 1px, transparent 1px),
                              radial-gradient(circle, rgba(196,181,253,0.6) 1px, transparent 1px),
                              radial-gradient(circle, rgba(34,211,238,0.5) 1px, transparent 1px);
            background-size: 60px 60px, 90px 90px, 120px 120px;
            background-position: 0 0, 30px 30px, 60px 15px; }
.di .c-tier-label { background: linear-gradient(90deg, #C4B5FD, #22D3EE);
                    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.di .c-value { background: linear-gradient(110deg, #E0F2FE, #C4B5FD, #22D3EE, #F0F9FF);
               -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
               filter: drop-shadow(0 0 18px rgba(34,211,238,0.35)); }
.di .c-store-sub, .di .c-zone-label, .di .c-zone-label-r, .di .c-event-sub, .di .c-url { color: #A5B4FC; }
.di .c-divider-line { background: linear-gradient(180deg, #C4B5FD, #22D3EE); }
.di .c-code-val, .di .c-exp-val { color: #C4B5FD; }
.di .c-access-badge { background: linear-gradient(90deg, rgba(196,181,253,0.16), rgba(34,211,238,0.16));
                      border: 1px solid rgba(196,181,253,0.4); color: #C4B5FD; }
.di .c-access-level { background: linear-gradient(90deg, #C4B5FD, #22D3EE);
                      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
                      filter: drop-shadow(0 0 8px rgba(34,211,238,0.4)); }
.di .c-qr-pending { background: rgba(99,102,241,0.12); border: 1px solid rgba(196,181,253,0.26); color: #818CF8; }

@keyframes nx-shimmer { 0% { background-position: 0% 0; } 100% { background-position: 200% 0; } }

/*  THE CARD AT ANY SIZE, WITHOUT REDRAWING IT SMALLER.

    Its type and spacing are in pixels because that is what the design specifies, so a card in a
    catalogue tile cannot simply be given a narrower width - the text would keep its size and
    spill. It is drawn at its real width and scaled, which keeps every proportion the design set,
    including the ones nobody would think to re-derive by hand.

    Container units rather than a fixed factor, so one rule serves a 15rem tile and a 40rem
    product page. */
.priv-card-fit { width: 100%; }
.priv-card-fit .priv-card-box, .priv-card-fit .priv-card { max-width: none; }

/*  SMALL CARD, BIGGER TYPE.

    Every metric on the card is a percentage of its width, which keeps the design's proportions
    exactly at full size - and makes the card illegible in a catalogue tile, where 13px of access
    level at the 560px reference becomes six. Proportion is the right rule for the artwork and the
    wrong one for reading.

    So below 26rem the type is stepped up by about half while the layout stays where it is. The
    card no longer matches the design ratio-for-ratio at that size; it does something better, which
    is say what it is to somebody scanning a shop page. */
@container (max-width: 26rem) {
    .c-tier-label   { font-size: 3cqw; letter-spacing: .5cqw; }
    .c-zone-label,
    .c-zone-label-r { font-size: 2.3cqw; letter-spacing: .5cqw; }
    .c-value        { font-size: 9.5cqw; }
    .c-store-sub    { font-size: 2.3cqw; }
    .c-access-badge { font-size: 2.3cqw; padding: .7cqw 2cqw; }
    .c-access-level { font-size: 3.4cqw; }
    .c-event-sub    { font-size: 2.3cqw; }
    .c-code-lbl,
    .c-exp-lbl      { font-size: 2cqw; }
    .c-code-val     { font-size: 3cqw; letter-spacing: .5cqw; }
    .c-exp-val      { font-size: 2.6cqw; }
    .c-url          { font-size: 2cqw; }
    .c-qr           { width: 15cqw; height: 15cqw; }
    .c-qr-pending   { width: 15cqw; height: 15cqw; font-size: 2cqw; }
    .priv-card .c-topbar svg { width: 32cqw; }
}

/*  A card being printed is a card leaving the screen it was drawn on. Backgrounds are forced,
    because a browser dropping them prints seven identical white rectangles. */
@media print {
    .priv-card { -webkit-print-color-adjust: exact; print-color-adjust: exact;
                 box-shadow: none; break-inside: avoid; }
    .no-print { display: none !important; }
}