/* Opt-in components: every selector is tl-* scoped. Load tokens.css first. */
.tl-theme { color:var(--tl-text); background:var(--tl-bg); font:var(--tl-font-sm)/var(--tl-line-height) var(--tl-font-sans); color-scheme:dark; }
.tl-theme *, .tl-theme *::before, .tl-theme *::after { box-sizing:border-box; }
.tl-mono { font-family:var(--tl-font-mono); font-variant-numeric:tabular-nums; }
.tl-muted { color:var(--tl-muted); }
.tl-label { font:var(--tl-font-xs)/1.5 var(--tl-font-mono); letter-spacing:var(--tl-tracking-label); text-transform:uppercase; }
.tl-title { margin:0; font-size:clamp(1.75rem,4vw,2.5rem); line-height:1.12; letter-spacing:-.045em; font-weight:var(--tl-weight-medium); }
.tl-stack { display:grid; gap:var(--tl-space-4); min-width:0; }
.tl-row { display:flex; align-items:center; gap:var(--tl-space-3); flex-wrap:wrap; }
.tl-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:var(--tl-space-4); }
.tl-panel { padding:var(--tl-space-6); border:1px solid var(--tl-border); border-radius:var(--tl-radius-lg); background:var(--tl-surface); min-width:0; }
.tl-panel-title { font-size:var(--tl-font-lg); margin:0 0 var(--tl-space-4); font-weight:var(--tl-weight-medium); }
.tl-button { box-sizing:border-box; display:inline-flex; justify-content:center; align-items:center; gap:var(--tl-space-2); min-height:var(--tl-control-height); padding:var(--tl-space-2) var(--tl-space-4); border:1px solid var(--tl-border-control); border-radius:var(--tl-radius-md); background:transparent; color:var(--tl-text); font:600 var(--tl-font-sm)/1.4 var(--tl-font-sans); text-decoration:none; cursor:pointer; }
.tl-button:hover { background:var(--tl-surface-raised); }
.tl-button-primary { background:var(--tl-accent); border-color:var(--tl-accent); color:var(--tl-on-accent); }
.tl-button-primary:hover { background:var(--tl-accent-hover); }
.tl-button-danger { color:var(--tl-danger); border-color:var(--tl-danger); background:var(--tl-danger-bg); }
.tl-button-danger:hover { background:#492c29; }
.tl-button:disabled { opacity:.5; cursor:not-allowed; }
.tl-button:focus-visible, .tl-input:focus-visible, .tl-select:focus-visible, .tl-textarea:focus-visible, .tl-check:focus-visible, .tl-link:focus-visible, .tl-disclosure:focus-visible, .tl-table-scroll:focus-visible { outline:var(--tl-focus-width) solid var(--tl-accent); outline-offset:3px; }
.tl-icon { width:24px; height:24px; flex:none; vertical-align:middle; }
.tl-icon-button { width:44px; padding:var(--tl-space-2); }
.tl-badge { display:inline-flex; gap:var(--tl-space-2); align-items:center; padding:var(--tl-space-1) var(--tl-space-3); border:1px solid var(--tl-border-control); border-radius:var(--tl-radius-pill); color:var(--tl-muted); font:var(--tl-font-xs)/1.5 var(--tl-font-mono); }
.tl-badge-success { color:var(--tl-success); background:var(--tl-success-bg); border-color:var(--tl-success); }
.tl-badge-danger { color:var(--tl-danger); background:var(--tl-danger-bg); border-color:var(--tl-danger); }
.tl-badge-warning { color:var(--tl-warning); background:var(--tl-warning-bg); border-color:var(--tl-warning); }
.tl-alert { display:flex; gap:var(--tl-space-3); padding:var(--tl-space-4); border:1px solid var(--tl-info); background:var(--tl-info-bg); color:var(--tl-info); border-radius:var(--tl-radius-md); }
.tl-alert-success { color:var(--tl-success); background:var(--tl-success-bg); border-color:var(--tl-success); }
.tl-alert-danger { color:var(--tl-danger); background:var(--tl-danger-bg); border-color:var(--tl-danger); }
.tl-alert-warning { color:var(--tl-warning); background:var(--tl-warning-bg); border-color:var(--tl-warning); }
.tl-field { display:grid; gap:var(--tl-space-2); font-size:var(--tl-font-sm); }
.tl-input, .tl-select, .tl-textarea { box-sizing:border-box; width:100%; min-height:var(--tl-control-height); padding:var(--tl-space-3); background:var(--tl-bg); border:1px solid var(--tl-border-control); border-radius:var(--tl-radius-sm); color:var(--tl-text); font:inherit; }
.tl-input::placeholder, .tl-textarea::placeholder { color:var(--tl-muted); opacity:1; }
.tl-input[aria-invalid=true] { border-color:var(--tl-danger); }
.tl-field-error { color:var(--tl-danger); font-size:var(--tl-font-xs); }
.tl-check-label { display:flex; align-items:center; gap:var(--tl-space-3); min-height:44px; }
.tl-check { width:20px; height:20px; accent-color:var(--tl-accent); }
.tl-kpi { display:grid; gap:var(--tl-space-2); }
.tl-kpi-value { font:var(--tl-weight-medium) var(--tl-font-xl)/1.2 var(--tl-font-mono); font-variant-numeric:tabular-nums; }
.tl-positive { color:var(--tl-success); }
.tl-negative { color:var(--tl-danger); }
.tl-table-scroll { overflow-x:auto; border:1px solid var(--tl-border); border-radius:var(--tl-radius-md); }
.tl-table { width:100%; border-collapse:collapse; font-size:var(--tl-font-sm); text-align:left; }
.tl-table caption { text-align:left; padding:var(--tl-space-4); color:var(--tl-muted); }
.tl-table th, .tl-table td { padding:var(--tl-space-3) var(--tl-space-4); border-bottom:1px solid var(--tl-border); }
.tl-table th { color:var(--tl-muted); font-weight:var(--tl-weight-medium); white-space:nowrap; }
.tl-table tbody tr:hover { background:var(--tl-surface-raised); }
.tl-number { text-align:right; font-family:var(--tl-font-mono); font-variant-numeric:tabular-nums; }
.tl-empty { display:grid; justify-items:center; text-align:center; padding:var(--tl-space-8); gap:var(--tl-space-3); }
.tl-illustration { display:block; width:240px; max-width:100%; height:auto; }
.tl-empty-title { margin:0; font-size:var(--tl-font-lg); }
.tl-empty-copy { max-width:40ch; margin:0; color:var(--tl-muted); }
.tl-link { color:var(--tl-accent); text-underline-offset:3px; }
.tl-code { display:block; padding:var(--tl-space-4); background:var(--tl-bg); border:1px solid var(--tl-border); border-radius:var(--tl-radius-sm); font:var(--tl-font-xs)/1.6 var(--tl-font-mono); white-space:pre-wrap; overflow-wrap:anywhere; user-select:all; }
.tl-disclosure { cursor:pointer; padding:var(--tl-space-3) 0; color:var(--tl-accent); min-height:44px; }
.tl-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }