/* SCOVR - QR IDENTITY CARD
   Single source of truth. Never edit a copy by hand.

   Vendored into each repo, because they deploy independently:
     SCOVR-APP   public/tokens/qr-card.css      <- canonical
     SCOVR-COM   web/tokens/qr-card.css

   Propagate a change:  node tools/sync-form-tokens.mjs
   Detect drift:        node tools/sync-form-tokens.mjs --check

   Plain ASCII on purpose: a box-drawing rule before a closing marker once
   left the parser inside a comment and swallowed the rules below.

   ---------------------------------------------------------------------------
   WHY A CARD, AND WHY A STACK

   The model is Apple Wallet. Cards OVERLAP rather than list: you see the top
   strip of each one behind, which is enough to recognise it, and tapping one
   pulls it out. Three identities cost 306px instead of 570px, and a fourth
   costs 58px rather than a screen.

   Recognition is by FACE, not by reading a label - the way UBS grey, SNB green
   and Amex green are told apart before a word is read. Each root ID gets its
   own face for the same reason.

   The card front is a summary, never a form: avatar, name, kind, handle. The
   QR is behind the tap, exactly as a Wallet card keeps its number behind one.

   USED BY
     SCOVR-APP   settings -> QR code (the full case: several root IDs, tiers)
     SCOVR-COM   get-started final step (one identity, no chrome)

   The sign-up flow renders the SAME card with one item and no section
   furniture, which is what keeps the two surfaces from drifting.
   --------------------------------------------------------------------------- */

:root {
  /* How much of a card behind shows. Wallet shows roughly its top strip -
     enough for the mark and one identifier. Below ~48px the name clips; above
     ~72px the stack stops reading as a stack. */
  --qr-card-peek: 58px;
  --qr-card-h: 190px;
  --qr-card-w: 300px;
  --qr-card-radius: 16px;
  /* Wallet's card motion: a long, heavily-eased slide. Not a bounce - a card
     being drawn out of a wallet does not overshoot. */
  --qr-card-ease: cubic-bezier(.32,.72,0,1);
  --qr-card-motion: .42s;
}

/* ---- the stack ---------------------------------------------------------- */
.qrw { width: var(--qr-card-w); position: relative; }

/* ---- the card ----------------------------------------------------------- */
.qrc {
  position: absolute; left: 0; right: 0;
  height: var(--qr-card-h);
  border-radius: var(--qr-card-radius);
  padding: 16px 18px;
  display: flex; flex-direction: column;
  cursor: pointer; overflow: hidden;
  /* The hairline on top is what separates two overlapping cards; the drop
     shadow is what puts one in front of the other. Both are needed - without
     the hairline the stack reads as one tall block. */
  box-shadow: 0 -1px 0 rgba(255,255,255,.10), 0 8px 24px rgba(0,0,0,.55);
  transition: transform var(--qr-card-motion) var(--qr-card-ease), opacity .3s;
  text-align: left;
  border: none;
  font-family: inherit;
  color: #F0F0F0;
  width: 100%;
}
.qrc:focus-visible { outline: 2px solid #F0F0F0; outline-offset: 3px; }

.qrc-top { display: flex; align-items: flex-start; gap: 10px; }
.qrc-id  { display: flex; align-items: center; gap: 9px; min-width: 0; }
/* Name over kind, not name beside kind. Side by side, the kind label is
   nowrap and the name is the only thing that can give, so "Mohammed
   Al-Rashid" ellipsised at 120px while 90px sat next to it holding the words
   LEGAL IDENTITY. Stacked, the name has the whole row and the kind reads as
   a subtitle of it. Both stay inside the 58px peek, so a card behind still
   shows who it is and what kind it is. */
.qrc-idtext { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.qrc-av {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
  background: rgba(255,255,255,.16);
  display: flex; align-items: center; justify-content: center;
}
.qrc-av img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Root ID: the face is sealed with the name until she releases it.
   The radius is proportional to the circle — a fixed blur that reads right at
   64px turns the 34px face to flat colour, which says "no picture" rather than
   "a picture you have not been shown". scale(1.06) hides the transparent fringe
   blur pulls in from outside the image edge.
   NOT security: the sharp file is still in the DOM. See avatarHTML() in
   qr-card.js — the real seal never ships the original. */
.qrc-sealed { filter: blur(5px); transform: scale(1.06); }
.qrc-hero .qrc-sealed { filter: blur(9px); }

/* The name is progressive: a fresh account has only a first name, so this has
   to sit correctly at "Michael" and at "Michael H.W. Schmitz" alike. */
.qrc-name {
  display: flex; align-items: center; gap: 1px;
  font-size: 15px; font-weight: 600; letter-spacing: -.01em; min-width: 0;
}
.qrc-name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The verification mark sits RIGHT of the name, hard against it (1px, set by
   .qrc-name's gap) and RAISED above its centre, so it reads as a mark ON the
   name rather than a bullet beside it — the same treatment the name carries in
   Messenger and on the me.html hero. .PLUS only. */
.qrc-tick {
  width: 15px; height: 15px; flex-shrink: 0;
  position: relative; top: -4px;
}

/* Under the name now, so it needs no padding to sit on the name's baseline -
   and it ellipsises rather than nowraps, because a long org domain on the
   Business face must not push the card wider than the stack. */
.qrc-kind {
  font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  opacity: .72; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* The address sits alone here now — the green shield that used to hold the
   right edge is gone, so there is nothing for space-between to push against. */
.qrc-foot { margin-top: auto; display: flex; align-items: flex-end; min-width: 0; }
/* min-width:0 lets the flex child shrink below its content width — without it
   a long work email on a business card pushes past the card's right edge
   instead of ellipsing. */
.qrc-slug { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; opacity: .8;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- the faces ----------------------------------------------------------
   One per identity kind. A gradient rather than a flat fill because a flat
   dark rectangle on a dark page has no edge; the gradient gives the card a
   top-lit surface, which is what makes it read as an object. */
.qrc--legal  { background: linear-gradient(150deg, #1F3D2E 0%, #0E2119 100%); }
.qrc--artist { background: linear-gradient(150deg, #3A3A3C 0%, #1C1C1E 100%); }
.qrc--nick   { background: linear-gradient(150deg, #4A3B2A 0%, #241C14 100%); }
/* Free tier: one identity, and it is deliberately the quietest face - there is
   no second card for it to be told apart from. */
.qrc--free   { background: linear-gradient(150deg, #2A2A2C 0%, #141416 100%); }

/* ---- avatar above the card edge (the sign-up treatment) -----------------
   WhatsApp's shape, and what the sign-up final step uses: the picture
   straddles the card's top edge rather than sitting in the face, so it is
   read first and costs the card no height.

   Opt in with .qrc-open--hero. The stack does NOT use it: 64px circles
   overlapping every 58px would collide, which is exactly why the stacked
   card keeps its avatar inside the face. */
.qrc-open--hero { position: relative; margin-top: 32px; }
.qrc-open--hero .qrc { padding-top: 44px; }
/* The face's own avatar is redundant once the hero one is showing. */
.qrc-open--hero .qrc-av { display: none; }
.qrc-hero {
  position: absolute; top: -32px; left: 50%; transform: translateX(-50%);
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--etoupe, #222); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  /* The ring is the CARD colour, not a border - that is what makes it read
     as sitting ON the card rather than punched into it, and it follows the
     card into light mode instead of staying dark. */
  box-shadow: 0 0 0 3px var(--mid, #1C1C1E);
  z-index: 2;
}
.qrc-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- the opened card ---------------------------------------------------- */
.qrc-open {
  width: var(--qr-card-w);
  background: var(--mid, #1C1C1E);
  border-radius: var(--qr-card-radius);
  padding: 0 0 16px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0,0,0,.6);
}
/* Inside the open state the card is a header, not a button: it no longer
   moves, and its bottom corners meet the panel. */
.qrc-open .qrc {
  position: relative; height: auto; min-height: 150px;
  box-shadow: none; border-radius: var(--qr-card-radius) var(--qr-card-radius) 0 0;
  cursor: default;
}
.qrc-panel { padding: 18px 16px 4px; display: flex; flex-direction: column; align-items: center; }
.qrc-qr { background: #F0F0F0; border-radius: 12px; padding: 12px; position: relative; display: flex; }
.qrc-qr canvas, .qrc-qr svg { display: block; image-rendering: pixelated; }
/* A real code comes back from qrcode.createSvgTag({scalable:true}) with a
   viewBox and NO intrinsic size, so without this it collapses to a few pixels —
   the decorative <canvas> it replaced carried width/height attributes of its
   own. 150px matches that canvas exactly, so the panel does not resize when a
   card has a real payload and the next one does not. */
.qrc-qr > svg { width: 150px; height: 150px; }
/* The SCOVR mark in the middle of the code: it says which app the code opens,
   which is the one thing a bare QR cannot. */
.qrc-badge {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 38px; height: 38px; border-radius: 10px;
  background: #F0F0F0; border: 2px solid #F0F0F0;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px #1C1C1E;
}
/* The caption is the one line addressed to the SCANNER rather than the holder:
   everything else on the card describes who you are, this says what happens if
   they scan. It is full strength, not muted — a greyed sentence with a single
   bright word in it read as a disabled label with the name shouting through. */
.qrc-cap { font-size: 12.5px; color: var(--fg, #F0F0F0); text-align: center; margin-top: 12px; }
.qrc-cap b { color: var(--fg, #F0F0F0); font-weight: 600; }

.qrc-link {
  display: flex; align-items: center; gap: 7px; width: 100%; margin-top: 12px;
  padding: 0 12px; height: 40px;
  background: #000; border: 1px solid var(--border, #2E2E2E); border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px;
  color: var(--muted2, #8A8A8E);
}
.qrc-link > span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qrc-link button {
  background: #2C2C2E; border: none; border-radius: 6px; width: 26px; height: 26px;
  color: var(--fg, #F0F0F0); cursor: pointer; display: flex; align-items: center;
  justify-content: center; flex-shrink: 0;
}
/* The confirmation swaps the glyph rather than recolouring it: a green copy
   icon still reads as "copy", a tick reads as "done". */
.qrc-link button .i-done { display: none; }
.qrc-link button.copied { background: rgba(0,186,119,.15); color: #00BA77; }
.qrc-link button.copied .i-copy { display: none; }
.qrc-link button.copied .i-done { display: block; }

.qrc-back {
  margin: 14px auto 0; display: block;
  background: none; border: none; color: var(--muted2, #8A8A8E);
  font-family: inherit; font-size: 13px; cursor: pointer;
}
.qrc-back:hover { color: var(--fg, #F0F0F0); }

/* ---- section furniture (settings only) ---------------------------------- */
.qrc-head { display: flex; align-items: baseline; justify-content: space-between; width: var(--qr-card-w); margin-bottom: 14px; }
.qrc-title { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.qrc-count { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: var(--muted, #4A4A4A); }
.qrc-add {
  width: var(--qr-card-w); margin-top: 12px;
  border: 1px dashed var(--border2, #3A3A3A); border-radius: 14px;
  background: none; color: var(--muted2, #8A8A8E);
  font-family: inherit; font-size: 13.5px; padding: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 7px;
}
.qrc-add:hover { border-color: #00BA77; color: #00BA77; }
/* Free tier is TOLD why there is one card, rather than just shown one. */
.qrc-lock {
  width: var(--qr-card-w); margin-top: 12px;
  border: 1px solid var(--border, #2E2E2E); border-radius: 14px;
  background: var(--mid, #1C1C1E); padding: 13px 15px;
  font-size: 12.5px; color: var(--muted2, #8A8A8E); line-height: 1.55;
}
.qrc-lock b { color: var(--accent, #C59972); font-weight: 600; }

/* Reduced motion: the stack still works, it just does not slide. */
@media (prefers-reduced-motion: reduce) {
  .qrc { transition: none; }
}