/* <cv-barcode> — the inline account-card strip and its enlarged, scanner-facing view.
   Shared by every account type that carries a scannable number, so it lives here rather than in
   account-drawer.css. Both surfaces are deliberately hardcoded to a white field: the bars are a
   machine-read image (barcode.js paints them #000), not themeable text. */

cv-barcode { display: block; }

.barcode-strip {
  /* Now a real <button> (keyboard + AT for free) — neutralize the UA button styles */
  width: 100%;
  font: inherit;
  color: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  margin-block: var(--space-2);
  padding: var(--space-4) var(--space-3);
  background: #fff; /* a scannable barcode needs dark bars on a light field */
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  cursor: pointer;

  & svg { width: 100%; height: auto; display: block; }

  & .barcode-number {
    font-family: var(--font-mono);
    letter-spacing: .16em;
    font-size: .85rem;
    color: var(--brand);
  }

  & .barcode-tap-hint {
    font-size: .75rem;
    color: var(--ink-muted);
  }

  &:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
  }

  /* A card whose symbology we can't draw: the number, and why there's no barcode. Not tappable —
     there is nothing to enlarge. */
  &.is-unsupported {
    cursor: default;

    & .barcode-tap-hint { text-align: center; text-wrap: balance; }
  }
}

/* ---- Enlarged view ------------------------------------------------------ */
/* Above the drawer (31) and the scan overlay (50), below toasts (60) so a message still lands. */
.cv-barcode-full {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
  background: #fff;
  overscroll-behavior: contain;
}

/* Fill the screen in whatever orientation the app is in — deliberately no rotation. Rotating into
   landscape made the code span the phone's long edge, which overshot the reading window of the
   Parks department's scanner: a code wider than the scanner's field of view can't be captured at
   all. Screen width is the useful ceiling, and turning the phone is the citizen's own lever.
   The bars stretch to this box in both axes (barcodeSvg `stretch`) rather than letterboxing, so a
   short card number gets the same full width as a long one. */
.cv-barcode-full__stage {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: var(--space-4);

  & svg { width: 100%; height: 100%; display: block; }

  & .cv-barcode-full__number {
    font-family: var(--font-mono);
    letter-spacing: .22em;
    font-size: 1.1rem;
    color: #000;
    text-align: center;
  }
}

/* In normal flow at the foot of the overlay, not floated over it — the barcode now reaches the
   bottom of its box, and a button laid over the bars is a button laid over the scan target. */
.cv-barcode-full__close {
  align-self: center;
  padding: var(--space-2) var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill, 999px);
  background: #fff;
  color: var(--brand);
  font: inherit;
  cursor: pointer;
}