/* 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; }

/* 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; }
}