/* Shared element defaults and compatibility styles for legacy feature markup.
   Component-owned button, icon, shell, stack, grid and metric styles live with their components. */
.card {padding:var(--client-space-5);border:1px solid var(--client-border);border-radius:var(--client-radius);background:var(--client-surface-raised);min-width:0}
.card h2 {margin-bottom:12px;font-size:var(--client-text-label);text-transform:uppercase;letter-spacing:.12em;color:var(--client-text-muted);font-weight:400}
header {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;padding-bottom:4px}
header span {color:var(--client-accent);font:11px var(--client-mono);text-transform:uppercase;letter-spacing:.12em}
header h1 {margin:8px 0;font-size:20px;font-weight:650;line-height:1.15;letter-spacing:-.01em}
header p {color:var(--client-text-muted)}
.accent {color:var(--client-accent);background:var(--client-accent-weak)}
.success {color:var(--client-success)}
.warning {color:var(--client-warning)}
.danger {color:var(--client-danger)}
.muted,p {color:var(--client-text-muted)}
label {display:flex;flex-direction:column;gap:4px}
label span {font-size:var(--client-text-body);color:var(--client-text-muted)}
input,select {background:var(--client-surface);color:var(--client-text);border:1px solid var(--client-border);border-radius:var(--client-radius);padding:8px 12px}
section>.notice {padding:12px 16px;background:var(--client-surface-raised);color:var(--client-text-muted);font-size:var(--client-text-body)}
table {border-collapse:collapse;width:100%;text-align:left}
th,td {padding:12px;border-bottom:1px solid var(--client-border)}
th {font-size:var(--client-text-body);color:var(--client-text-muted);font-weight:500}
td small {display:block;color:var(--client-text-muted);font:12px var(--client-mono)}
ol {padding:0;list-style:none}
li {border-left:2px solid var(--client-border);padding:8px 0 24px 16px}
pre {max-height:24rem;overflow:auto;background:var(--client-surface);padding:16px;font:12px/1.6 var(--client-mono)}
hr {border:0;border-top:1px solid var(--client-border)}

/* Kit motion (kit-motion.js). While a figure counts, its real glyphs keep their place but are transparent and the running
   number (data-kit-count-now) is drawn over them in the element's own colour; Blazor's text node is never touched. */
[data-kit-counting] {position:relative;-webkit-text-fill-color:transparent}
[data-kit-counting]::after {content:attr(data-kit-count-now);position:absolute;inset:0;padding:inherit;-webkit-text-fill-color:currentcolor;text-align:inherit;white-space:nowrap;pointer-events:none}
@media (prefers-reduced-motion:reduce) {[data-kit-counting] {-webkit-text-fill-color:inherit}[data-kit-counting]::after {content:none}}