/* Mastercard symbol is an inline SVG in the header (see index.html). */

/* Hide Alpine-cloaked elements (mobile nav backdrop) until Alpine boots. */
[x-cloak] { display: none !important; }

/* Phone readability: nudge up the densest micro-labels below the Tailwind
   `sm` breakpoint (640px). Desktop keeps its compact 9/10/11px sizing.
   !important needed because the Tailwind runtime injects its base rules
   after this stylesheet in source order. */
@media (max-width: 639px) {
  .text-\[9px\]  { font-size: 10.5px !important; line-height: 1.35 !important; }
  .text-\[10px\] { font-size: 11.5px !important; line-height: 1.4 !important; }
  .text-\[11px\] { font-size: 12.5px !important; line-height: 1.45 !important; }
}

/* code accent */
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* smooth confidence ring + bars */
svg circle {
  transition: stroke-dasharray 0.6s ease;
}

pre {
  max-height: 320px;
}

/* Dark theme: native form controls + scrollbars render dark; muted placeholders. */
:root { color-scheme: dark; }
input, select, textarea { color-scheme: dark; }
::placeholder { color: rgba(255, 255, 255, 0.35); }