/* HumanLayer component styles. Every value reads a token from tokens.css. Prefix: hl- */
[data-theme]{color:var(--text-secondary)}
[data-theme] h1,[data-theme] h2,[data-theme] h3{color:var(--text-primary)}
.hl-num{font-variant-numeric:tabular-nums}

.hl-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-family:var(--font-sans);font-size:15px;line-height:1;font-weight:600;padding:12px 20px;border-radius:var(--radius-md);border:var(--border-width) solid transparent;cursor:pointer;text-decoration:none;transition:background-color .15s ease-out,border-color .15s ease-out}
.hl-btn:focus-visible{outline:var(--focus-width) solid var(--focus-ring);outline-offset:2px}
.hl-btn--primary{background:var(--brand-fill);color:var(--on-brand)}
.hl-btn--primary:hover{background:var(--brand-fill-hover)}
.hl-btn--secondary{background:transparent;color:var(--text-primary);border-color:var(--border-control)}
.hl-btn--secondary:hover{background:var(--surface-raised)}
.hl-btn--ghost{background:transparent;color:var(--text-secondary)}
.hl-btn--ghost:hover{background:var(--surface-raised);color:var(--text-primary)}
.hl-btn--confirm{background:var(--secondary-fill);color:var(--on-brand)}
.hl-btn--sm{font-size:13px;padding:8px 14px;border-radius:var(--radius-sm)}
.hl-btn--block{width:100%}

.hl-badge{display:inline-flex;align-items:center;gap:var(--space-1);font-family:var(--font-sans);font-size:12px;line-height:1;font-weight:500;padding:5px 10px;border-radius:var(--radius-pill);border:var(--border-width) solid currentColor;white-space:nowrap}
.hl-badge--platinum{color:var(--tier-platinum);background:var(--tier-platinum-wash);border-color:transparent}
.hl-badge--gold{color:var(--tier-gold);background:var(--tier-gold-wash);border-color:transparent}
.hl-badge--silver{color:var(--tier-silver);background:var(--tier-silver-wash);border-color:transparent}
.hl-badge--verified{color:var(--secondary-text);background:var(--secondary-wash);border-color:transparent}
.hl-badge--brand{color:var(--brand-text);background:var(--brand-wash);border-color:transparent}
.hl-badge--neutral{color:var(--text-secondary);background:var(--surface-raised);border-color:transparent}

.hl-card{background:var(--surface-card);border:var(--border-width) solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-4)}

.hl-stat{background:var(--surface-card);border:var(--border-width) solid var(--border-subtle);border-radius:var(--radius-md);padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-2);min-width:0}
.hl-stat__label{font-size:13px;line-height:1.3;font-weight:500;color:var(--text-muted)}
.hl-stat__value{font-size:32px;line-height:1.1;font-weight:600;letter-spacing:-0.02em;color:var(--text-primary);font-variant-numeric:tabular-nums}
.hl-stat--sm .hl-stat__value{font-size:20px;letter-spacing:-0.01em}
.hl-stat__delta{font-size:13px;font-weight:500;color:var(--secondary-text);font-variant-numeric:tabular-nums}

.hl-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);font-size:13px;line-height:1.3;font-weight:500;color:var(--text-muted)}
.hl-meta b{font-weight:600;color:var(--text-primary)}

.hl-track{height:6px;border-radius:var(--radius-pill);background:var(--border-subtle);overflow:hidden}
.hl-track > i{display:block;height:100%;border-radius:inherit;background:var(--brand-fill)}

.hl-tabbar{display:flex;justify-content:space-around;background:var(--surface-raised);border-top:var(--border-width) solid var(--border-subtle);padding:var(--space-2) var(--space-2) var(--space-3)}
.hl-tab{display:flex;flex-direction:column;align-items:center;gap:var(--space-1);font-size:12px;font-weight:500;color:var(--text-muted);text-decoration:none;padding:6px 10px;border-radius:var(--radius-sm)}
.hl-tab svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.hl-tab[aria-current="page"]{color:var(--brand-text)}
.hl-tab[aria-current="page"]::after{content:"";width:16px;height:3px;border-radius:var(--radius-pill);background:var(--brand-fill)}
.hl-tab:focus-visible{outline:var(--focus-width) solid var(--focus-ring);outline-offset:2px}