/* ============================================================
Design System — Components
Faz 0: preview/index.html'den birebir taşındı (görsel-nötr).
Faz 1'de kanonik modifier sözlüğüne (--_tint/--_fg/--_edge +
nv-c-{role} + -sm/-md/-lg) refactor edilecek.
Bağımlılık: tokens/base.css (renk token'ları, --radius, font)
============================================================ */
/* ════════════════════════════════════════════════════════════
KANONİK MODİFİER SÖZLÜĞÜ (Faz 1) — DRY motoru
Base component private rol değişkenlerini okur (--_tint/--_fg/
--_edge/--_solid/--_text); nv-c-{role} sadece bunları remap eder.
→ Her renk TEK tanım, TÜM componentlerde bedava çalışır.
Kullanım:
Aktif
Sil
Dikkat
Size sözlüğü: -sm / (default) / -lg → density-aware control-height
════════════════════════════════════════════════════════════ */
.nv-c-primary { --_solid:var(--primary); --_fg:var(--primary-foreground); --_text:var(--primary); --_tint:color-mix(in oklch,var(--primary) 15%,transparent); --_edge:color-mix(in oklch,var(--primary) 30%,transparent); }
.nv-c-secondary { --_solid:var(--secondary); --_fg:var(--secondary-foreground); --_text:var(--secondary-foreground); --_tint:color-mix(in oklch,var(--secondary) 60%,transparent); --_edge:var(--border); }
.nv-c-success { --_solid:var(--success); --_fg:var(--success-foreground); --_text:var(--success); --_tint:color-mix(in oklch,var(--success) 15%,transparent); --_edge:color-mix(in oklch,var(--success) 30%,transparent); }
.nv-c-warning { --_solid:var(--warning); --_fg:var(--warning-foreground); --_text:color-mix(in oklch,var(--warning) 70%,var(--foreground)); --_tint:color-mix(in oklch,var(--warning) 15%,transparent); --_edge:color-mix(in oklch,var(--warning) 35%,transparent); }
.nv-c-danger { --_solid:var(--danger); --_fg:var(--danger-foreground); --_text:var(--danger); --_tint:color-mix(in oklch,var(--danger) 15%,transparent); --_edge:color-mix(in oklch,var(--danger) 30%,transparent); }
.nv-c-info { --_solid:var(--info); --_fg:var(--info-foreground); --_text:var(--info); --_tint:color-mix(in oklch,var(--info) 15%,transparent); --_edge:color-mix(in oklch,var(--info) 30%,transparent); }
.nv-c-accent { --_solid:var(--accent); --_fg:var(--accent-foreground); --_text:var(--accent); --_tint:color-mix(in oklch,var(--accent) 15%,transparent); --_edge:color-mix(in oklch,var(--accent) 30%,transparent); }
.nv-c-muted { --_solid:var(--muted-foreground); --_fg:var(--foreground); --_text:var(--muted-foreground); --_tint:color-mix(in oklch,var(--muted-foreground) 12%,transparent); --_edge:var(--border); }
/* ── Unified Button (nv-btn) — density-aware, nv-c-{role} destekli ── */
.nv-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--nv-space-2);height:var(--control-h-md);padding:0 var(--pad-x);border-radius:var(--radius-md);border:1px solid transparent;font-size:calc(0.8125rem * var(--font-scale));font-weight:500;font-family:inherit;cursor:pointer;transition:opacity .15s,background .15s;white-space:nowrap;background:var(--_solid,var(--primary));color:var(--_fg,var(--primary-foreground))}
.nv-btn:disabled{opacity:.5;cursor:not-allowed}
.nv-btn-sm{height:var(--control-h-sm);padding:0 calc(var(--pad-x) * .72);font-size:calc(0.75rem * var(--font-scale))}
.nv-btn-lg{height:var(--control-h-lg);padding:0 calc(var(--pad-x) * 1.3);font-size:calc(0.875rem * var(--font-scale))}
.nv-btn-soft{background:var(--_tint,color-mix(in oklch,var(--foreground) 7%,transparent));color:var(--_text,var(--foreground));border-color:var(--_edge,color-mix(in oklch,var(--foreground) 18%,transparent))}
.nv-btn-outline{background:transparent;color:var(--_text,var(--foreground));border-color:var(--_edge,var(--border))}
.nv-btn-ghost{background:transparent;color:var(--_text,var(--foreground));border-color:transparent}
.nv-btn-ghost:hover{background:var(--_tint,color-mix(in oklch,var(--foreground) 8%,transparent))}
/* ── Unified Badge (nv-badge) — nv-c-{role} destekli ── */
.nv-badge{display:inline-flex;align-items:center;gap:var(--nv-space-1);padding:var(--nv-space-1) var(--nv-space-2);border-radius:var(--radius-full);font-size:calc(0.6875rem * var(--font-scale));font-weight:500;border:1px solid var(--_edge,transparent);background:var(--_tint,color-mix(in oklch,var(--muted-foreground) 12%,transparent));color:var(--_text,var(--muted-foreground))}
.nv-badge-solid{background:var(--_solid,var(--primary));color:var(--_fg,var(--primary-foreground));border-color:transparent}
.nv-badge-sm{font-size:calc(0.625rem * var(--font-scale));padding:1px var(--nv-space-1)}
.nv-badge-lg{font-size:calc(0.75rem * var(--font-scale));padding:var(--nv-space-1) var(--nv-space-3)}
/* ── Unified Tag (nv-tag) — kare köşeli badge, nv-c-{role} ── */
.nv-tag{display:inline-flex;align-items:center;gap:var(--nv-space-1);padding:var(--nv-space-1) var(--nv-space-2);border-radius:var(--radius-sm);font-size:calc(0.6875rem * var(--font-scale));font-weight:500;background:var(--_tint,color-mix(in oklch,var(--muted-foreground) 12%,transparent));color:var(--_text,var(--muted-foreground));border:1px solid var(--_edge,var(--border))}
/* ── Unified Alert (nv-alert) — density-aware, nv-c-{role} ── */
.nv-alert{display:flex;gap:var(--nv-space-2);padding:var(--pad-y) var(--pad-x);border-radius:var(--radius-md);border-left:3px solid var(--_solid,var(--info));background:var(--_tint,color-mix(in oklch,var(--info) 10%,transparent));font-size:calc(0.8125rem * var(--font-scale));line-height:1.5;color:var(--foreground)}
.nv-alert .nv-alert-icon{width:16px;height:16px;flex-shrink:0;margin-top:1px;color:var(--_solid,var(--info))}
/* ── Unified Input (nv-input) — density-aware height ── */
.nv-input{width:100%;height:var(--control-h-md);padding:0 var(--pad-x);border-radius:var(--radius-md);border:1px solid var(--border);background:var(--card);color:var(--foreground);font-size:calc(0.8125rem * var(--font-scale));font-family:inherit;outline:none;transition:border-color .15s}
.nv-input::placeholder{color:var(--muted-foreground)}
.nv-input:focus{border-color:var(--primary)}
.nv-input-sm{height:var(--control-h-sm);font-size:calc(0.75rem * var(--font-scale))}
.nv-input-lg{height:var(--control-h-lg);font-size:calc(0.875rem * var(--font-scale))}
/* ── Unified Table (nv-dtable) — density-aware padding ── */
.nv-dtable{width:100%;border-collapse:collapse;font-size:calc(0.8125rem * var(--font-scale))}
.nv-dtable th{text-align:left;padding:var(--nv-space-2) var(--nv-space-3);font-size:calc(0.6875rem * var(--font-scale));font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted-foreground);border-bottom:1px solid var(--border)}
.nv-dtable td{padding:var(--nv-space-2) var(--nv-space-3);border-bottom:1px solid color-mix(in oklch,var(--border) 60%,transparent);color:var(--foreground)}
.nv-dtable tr:last-child td{border-bottom:none}
/* ════════════════════════════════════════════════════════════
LEGACY componentler (Faz 4'te nv-* eşlerine göç edecek — geriye uyumlu)
════════════════════════════════════════════════════════════ */
/* ── Button ─────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:var(--radius);font-size:13px;font-weight:500;border:1px solid transparent;cursor:pointer;font-family:inherit;transition:opacity .15s}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-primary{background:var(--primary);color:var(--primary-foreground)}
.btn-secondary{background:var(--secondary);color:var(--secondary-foreground);border-color:var(--border)}
.btn-outline{background:transparent;color:var(--foreground);border-color:var(--border)}
.btn-ghost{background:transparent;color:var(--foreground);border-color:transparent}
.btn-ghost:hover{background:color-mix(in oklch,var(--foreground) 8%,transparent)}
.btn-destructive{background:var(--destructive);color:var(--destructive-foreground)}
.btn-sm{padding:3px 10px;font-size:12px}
.btn-lg{padding:10px 20px;font-size:14px}
.btn-soft{background:color-mix(in oklch,var(--foreground) 7%,transparent);color:var(--foreground);border:1px solid color-mix(in oklch,var(--foreground) 18%,transparent);cursor:pointer;border-radius:var(--radius);font-family:inherit;font-size:12px;display:inline-flex;align-items:center;gap:6px}
.btn-soft:hover{background:color-mix(in oklch,var(--foreground) 13%,transparent)}
/* ── Badge ──────────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:500;border:1px solid transparent}
.badge-primary{background:color-mix(in oklch,var(--primary) 15%,transparent);color:var(--primary);border-color:color-mix(in oklch,var(--primary) 30%,transparent)}
.badge-success{background:color-mix(in oklch,var(--success) 15%,transparent);color:var(--success);border-color:color-mix(in oklch,var(--success) 30%,transparent)}
.badge-warning{background:color-mix(in oklch,var(--warning) 15%,transparent);color:color-mix(in oklch,var(--warning) 70%,var(--foreground));border-color:color-mix(in oklch,var(--warning) 35%,transparent)}
.badge-destructive{background:color-mix(in oklch,var(--destructive) 15%,transparent);color:var(--destructive);border-color:color-mix(in oklch,var(--destructive) 30%,transparent)}
.badge-info{background:color-mix(in oklch,var(--info) 15%,transparent);color:var(--info);border-color:color-mix(in oklch,var(--info) 30%,transparent)}
.badge-muted{background:color-mix(in oklch,var(--muted-foreground) 12%,transparent);color:var(--muted-foreground);border-color:var(--border)}
.badge-solid-primary{background:var(--primary);color:var(--primary-foreground)}
.badge-solid-success{background:var(--success);color:var(--success-foreground)}
.badge-solid-destructive{background:var(--destructive);color:var(--destructive-foreground)}
/* ── Card ───────────────────────────────────────────────────── */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.card-header{padding:var(--pad-y) var(--pad-x);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.card-body{padding:var(--pad-y) var(--pad-x)}
.card-footer{padding:var(--nv-space-2) var(--pad-x);border-top:1px solid var(--border);display:flex;align-items:center;justify-content:flex-end;gap:var(--nv-space-2)}
/* Semantic Card Variants — .card + .card-XX + padding (inline veya .card-body) */
.card-success{border-color:var(--success);background:color-mix(in oklch,var(--success) 8%,transparent)}
.card-warning{border-color:var(--warning);background:color-mix(in oklch,var(--warning) 8%,transparent)}
.card-destructive{border-color:var(--destructive);background:color-mix(in oklch,var(--destructive) 8%,transparent)}
.card-info{border-color:var(--info);background:color-mix(in oklch,var(--info) 8%,transparent)}
.card-accent{border-color:var(--accent);background:color-mix(in oklch,var(--accent) 8%,transparent)}
.card-top-accent{position:relative;overflow:hidden}
.card-top-accent::before{content:'';position:absolute;top:0;left:0;right:0;height:3px}
.card-top-primary::before{background:var(--primary)}
.card-top-success::before{background:var(--success)}
.card-top-warning::before{background:var(--warning)}
.card-top-info::before{background:var(--info)}
/* ── Alert ──────────────────────────────────────────────────── */
.alert{display:flex;gap:var(--nv-space-2);padding:calc(var(--pad-y) - 2px) calc(var(--pad-x) - 4px);border-radius:var(--radius);border-left:3px solid;font-size:13px;line-height:1.5}
.alert-info{background:color-mix(in oklch,var(--info) 10%,transparent);border-left-color:var(--info)}
.alert-success{background:color-mix(in oklch,var(--success) 10%,transparent);border-left-color:var(--success)}
.alert-warning{background:color-mix(in oklch,var(--warning) 10%,transparent);border-left-color:var(--warning)}
.alert-destructive{background:color-mix(in oklch,var(--destructive) 10%,transparent);border-left-color:var(--destructive)}
.alert-icon{width:16px;height:16px;flex-shrink:0;margin-top:1px}
.alert-info .alert-icon{color:var(--info)}.alert-success .alert-icon{color:var(--success)}.alert-warning .alert-icon{color:var(--warning)}.alert-destructive .alert-icon{color:var(--destructive)}
/* ── Table ──────────────────────────────────────────────────── */
.nv-table{width:100%;border-collapse:collapse;font-size:13px}
.nv-table th{text-align:left;padding:15px 10px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted-foreground);border-bottom:1px solid var(--border)}
.nv-table td{padding:10px;border-bottom:1px solid color-mix(in oklch,var(--border) 60%,transparent);color:var(--foreground)}
.nv-table tr:last-child td{border-bottom:none}
.nv-table tr:hover td{background:color-mix(in oklch,var(--foreground) 3%,transparent)}
.nv-table-sm th{padding:8px 10px}.nv-table-sm td{padding:5px 10px}
.nv-table-lg th{padding:22px 15px}.nv-table-lg td{padding:15px}
/* ── Form ───────────────────────────────────────────────────── */
.form-label{display:block;font-size:12px;font-weight:500;color:var(--foreground);margin-bottom:4px}
.form-input{width:100%;padding:calc(7px * var(--density-mult,1)) calc(10px * var(--density-mult,1));border-radius:var(--radius);border:1px solid var(--border);background:var(--card);color:var(--foreground);font-size:13px;font-family:inherit;outline:none}
.form-input:focus{border-color:var(--primary)}
.form-input.error{border-color:var(--destructive)}
.form-helper{font-size:11.5px;color:var(--muted-foreground);margin-top:3px}
.form-error{font-size:11.5px;color:var(--destructive);margin-top:3px}
/* ── Tab bar ────────────────────────────────────────────────── */
.tab-bar{display:flex;border-bottom:1px solid var(--border)}
.tab{padding:7px 0;margin-right:1.25rem;font-size:13px;font-weight:500;color:var(--muted-foreground);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;background:none;border-top:none;border-left:none;border-right:none;font-family:inherit;display:inline-flex;align-items:center;gap:6px}
.tab:hover{color:var(--foreground)}
.tab.active{color:var(--primary);border-bottom-color:var(--primary)}
/* ── Multi-select dropdown ──────────────────────────────────── */
.ms-wrap{position:relative;display:inline-block}
.ms-trigger{display:flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--radius);border:1px solid var(--border);background:transparent;cursor:pointer;font-size:12px;color:var(--foreground);font-family:inherit;white-space:nowrap}
.ms-trigger.applied{border-color:var(--primary);color:var(--primary);background:color-mix(in oklch,var(--primary) 8%,transparent)}
.ms-trigger svg{color:var(--muted-foreground);flex-shrink:0}
.ms-panel{position:absolute;top:calc(100% + 4px);left:0;min-width:220px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 4px 16px color-mix(in oklch,var(--foreground) 8%,transparent);z-index:300;display:none}
.ms-panel.open{display:block}
.ms-search-row{padding:7px 7px 4px;border-bottom:1px solid var(--border);position:relative}
.ms-search-row svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted-foreground);pointer-events:none}
.ms-search{width:100%;padding:5px 8px 5px 28px;border-radius:calc(var(--radius) - 2px);border:1px solid var(--border);background:var(--muted);color:var(--foreground);font-size:12px;font-family:inherit;outline:none}
.ms-clear{display:flex;align-items:center;gap:6px;width:100%;padding:5px 10px;background:none;border:none;border-bottom:1px solid var(--border);font-size:12px;color:var(--muted-foreground);cursor:pointer;font-family:inherit;text-align:left}
.ms-clear:hover{color:var(--foreground)}
.ms-list{max-height:200px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:transparent transparent}
.ms-list::-webkit-scrollbar{width:4px}
.ms-list::-webkit-scrollbar-track{background:transparent}
.ms-list::-webkit-scrollbar-thumb{background:transparent;border-radius:2px}
.ms-list:hover{scrollbar-color:color-mix(in oklch,var(--foreground) 20%,transparent) transparent}
.ms-list:hover::-webkit-scrollbar-thumb{background:color-mix(in oklch,var(--foreground) 20%,transparent)}
.ms-item{display:flex;align-items:center;justify-content:space-between;padding:7px 10px;font-size:13px;color:var(--foreground);cursor:pointer;gap:8px}
.ms-item:hover{background:var(--muted)}
.ms-item .ms-check{width:14px;height:14px;color:var(--primary);flex-shrink:0;opacity:0}
.ms-item.sel .ms-check{opacity:1}
.ms-item.sel{color:var(--primary)}
.result-count{display:inline-flex;align-items:center;padding:2px 10px;border-radius:20px;border:1px solid color-mix(in oklch,var(--primary) 30%,transparent);background:color-mix(in oklch,var(--primary) 12%,transparent);font-size:11px;font-weight:500;color:var(--primary);white-space:nowrap}
/* ── Empty state ────────────────────────────────────────────── */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 24px;text-align:center}
/* ── Skeleton ───────────────────────────────────────────────── */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.skeleton{background:color-mix(in oklch,var(--foreground) 10%,transparent);border-radius:4px;animation:pulse 1.5s ease-in-out infinite}
/* ── Inline code ────────────────────────────────────────────── */
code{font-family:var(--font-mono);font-size:11.5px;background:color-mix(in oklch,var(--foreground) 8%,transparent);padding:2px 6px;border-radius:4px;color:var(--primary)}
/* ── Code Block ─────────────────────────────────────────────── */
.code-block{background:color-mix(in oklch,var(--foreground) 5%,transparent);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;font-family:var(--font-mono);font-size:12.5px;line-height:1.7;overflow-x:auto;color:var(--foreground);white-space:pre;display:block;margin:0}
.code-block-wrap{position:relative}
.code-block-wrap .code-lang{position:absolute;top:8px;right:10px;font-family:var(--font-mono);font-size:10px;color:var(--muted-foreground);text-transform:uppercase;letter-spacing:.06em}
/* ── Inline Value / Val ─────────────────────────────────────── */
.val{font-family:var(--font-mono);font-size:11px;background:color-mix(in oklch,var(--foreground) 7%,transparent);border:1px solid color-mix(in oklch,var(--foreground) 15%,transparent);padding:1px 5px;border-radius:3px;color:var(--accent);white-space:nowrap;display:inline}
/* ── Step Block ─────────────────────────────────────────────── */
.step-block{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:10px}
.step-header{background:color-mix(in oklch,var(--foreground) 4%,transparent);border-bottom:1px solid var(--border);padding:calc(8px * var(--density-mult,1)) calc(14px * var(--density-mult,1));display:flex;align-items:center;gap:10px}
.step-num{font-family:var(--font-mono);font-size:10px;font-weight:600;color:var(--primary);background:color-mix(in oklch,var(--primary) 12%,transparent);border:1px solid color-mix(in oklch,var(--primary) 30%,transparent);padding:2px 7px;border-radius:4px;flex-shrink:0}
.step-title{font-size:13px;font-weight:600;color:var(--foreground);flex:1}
.step-where{font-family:var(--font-mono);font-size:10px;color:var(--muted-foreground)}
.step-body{padding:calc(14px * var(--density-mult,1)) calc(16px * var(--density-mult,1))}
/* ── Checklist (visual, non-form) ───────────────────────────── */
.checklist{list-style:none;display:flex;flex-direction:column;gap:4px}
.checklist li{display:flex;align-items:flex-start;gap:8px;font-size:13px;color:var(--foreground);padding:2px 0}
.checklist li::before{content:'☐';font-size:19px;line-height:16px;color:var(--muted-foreground);flex-shrink:0;font-family:var(--font-mono)}
.checklist li.done{color:var(--muted-foreground)}
.checklist li.done::before{content:'☑';font-size:19px;line-height:16px;color:var(--success)}
/* ── Search ─────────────────────────────────────────────────── */
.search-wrap{position:relative;width:100%}
.search-row{display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid var(--border);border-radius:var(--radius);background:var(--card);transition:border-color .15s}
.search-row:focus-within{border-color:var(--primary)}
.search-row-icon{color:var(--muted-foreground);flex-shrink:0;display:flex}
.search-input{flex:1;background:none;border:none;outline:none;font-size:13px;color:var(--foreground);font-family:var(--font-sans)}
.search-input::placeholder{color:var(--muted-foreground)}
.search-clear{display:none;align-items:center;justify-content:center;width:18px;height:18px;border-radius:3px;border:none;background:none;cursor:pointer;color:var(--muted-foreground);flex-shrink:0;padding:0}
.search-clear:hover{background:var(--muted);color:var(--foreground)}
.search-clear.visible{display:flex}
.search-kbd{font-size:10px;font-family:var(--font-mono);color:var(--muted-foreground);background:var(--muted);border:1px solid var(--border);border-radius:3px;padding:1px 5px;white-space:nowrap;flex-shrink:0}
.search-panel{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 8px 24px color-mix(in oklch,var(--foreground) 8%,transparent);z-index:300;display:none;overflow:hidden}
.search-panel.open{display:block}
.search-panel .nv-scroll-y{max-height:380px;padding:5px 0}
.search-group-label{padding:8px 12px 4px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--muted-foreground)}
.search-item{display:flex;align-items:center;gap:10px;padding:7px 12px;font-size:13px;color:var(--foreground);cursor:pointer;background:none;border:none;width:100%;text-align:left;font-family:var(--font-sans)}
.search-item:hover,.search-item.active{background:var(--muted)}
.search-item-icon{width:14px;height:14px;flex-shrink:0;color:var(--muted-foreground)}
.search-item-label{flex:1;font-weight:500}
.search-item-meta{font-size:11px;color:var(--muted-foreground)}
.search-divider{height:1px;background:var(--border);margin:4px 0}
.search-empty{padding:24px 12px;text-align:center;font-size:13px;color:var(--muted-foreground)}
/* ── Lists ──────────────────────────────────────────────────── */
.nv-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.nv-list li{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--foreground);line-height:1.6}
.nv-list-bullet li::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--primary);flex-shrink:0;margin-top:8px}
.nv-list-numbered{counter-reset:nv-counter}
.nv-list-numbered li{counter-increment:nv-counter}
.nv-list-numbered li::before{content:counter(nv-counter);min-width:18px;height:18px;border-radius:50%;background:color-mix(in oklch,var(--primary) 12%,transparent);border:1px solid color-mix(in oklch,var(--primary) 25%,transparent);color:var(--primary);font-size:10px;font-weight:600;font-family:var(--font-mono);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.nv-list-sm li{font-size:12px;gap:8px}.nv-list-sm.nv-list-bullet li::before{width:4px;height:4px;margin-top:7px}
.nv-list-lg li{font-size:14px;gap:12px}.nv-list-lg.nv-list-bullet li::before{width:6px;height:6px;margin-top:8px}
/* ── Accordion ──────────────────────────────────────────────── */
.accordion{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--card)}
.ac-item{border-bottom:1px solid var(--border)}
.ac-item:last-child{border-bottom:none}
.ac-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;padding:calc(12px * var(--density-mult,1)) calc(16px * var(--density-mult,1));background:none;border:none;cursor:pointer;font-family:inherit;font-size:13px;font-weight:500;color:var(--foreground);text-align:left;gap:8px}
.ac-trigger:hover{background:color-mix(in oklch,var(--foreground) 3%,transparent)}
.ac-chevron{flex-shrink:0;color:var(--muted-foreground);transition:transform .2s;width:14px;height:14px}
.ac-trigger.open .ac-chevron{transform:rotate(90deg)}
.ac-content{max-height:0;overflow:hidden;transition:max-height .25s ease,opacity .2s ease;opacity:0}
.ac-content.open{max-height:600px;opacity:1}
.ac-body{padding:0 calc(16px * var(--density-mult,1)) calc(14px * var(--density-mult,1));font-size:13px;color:var(--muted-foreground);line-height:1.6}
.ac-controls{display:flex;align-items:center;justify-content:flex-end;gap:4px;margin-bottom:6px}
.ac-ctrl-btn{background:none;border:none;font-size:12px;color:var(--muted-foreground);cursor:pointer;font-family:inherit;padding:2px 6px;border-radius:4px}
.ac-ctrl-btn:hover{color:var(--foreground);background:color-mix(in oklch,var(--foreground) 6%,transparent)}
/* ── Progress Steps (horizontal segmented) ──────────────────── */
.progress-steps{display:flex;gap:3px;margin-bottom:8px}
.progress-step{flex:1;height:4px;border-radius:2px;background:var(--muted)}
.progress-step.done{background:var(--success)}
.progress-step.active{background:var(--primary)}
.progress-labels{display:flex;gap:3px}
.progress-label{flex:1;font-size:10px;font-family:var(--font-mono);color:var(--muted-foreground);text-align:center}
.progress-label.done{color:var(--success)}
.progress-label.active{color:var(--primary);font-weight:600}
/* ── nv-glow — ambient radial glow layer ───────────────────────────────
Drop one (or more) inside a position:relative box. Color comes from the
canonical dictionary (nv-c-{role} → --_solid); position from nv-glow-{pos};
intensity from nv-glow-soft/strong. Multiple glows = multiple .nv-glow
elements in the same box. Keep content above (position:relative;z-index:1).
Scales with the box (size is %), so it works on big sections and small cards. */
.nv-glow{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;border-radius:inherit}
.nv-glow::before{
content:"";position:absolute;width:var(--glow-size,72%);aspect-ratio:1;border-radius:50%;
top:50%;left:50%;transform:translate(-50%,-50%);
background:radial-gradient(circle,
color-mix(in oklch, var(--_solid,var(--primary)) var(--glow-intensity,22%), transparent) 0%,
transparent 70%);
filter:blur(var(--glow-blur,40px));
}
/* Position = origin of the glow within the box */
.nv-glow-top::before {top:0; left:50%; transform:translate(-50%,-50%)}
.nv-glow-bottom::before {top:100%; left:50%; transform:translate(-50%,-50%)}
.nv-glow-left::before {top:50%; left:0; transform:translate(-50%,-50%)}
.nv-glow-right::before {top:50%; left:100%; transform:translate(-50%,-50%)}
.nv-glow-center::before {top:50%; left:50%; transform:translate(-50%,-50%)}
.nv-glow-top-left::before {top:0; left:0; transform:translate(-50%,-50%)}
.nv-glow-top-right::before {top:0; left:100%; transform:translate(-50%,-50%)}
.nv-glow-bottom-left::before {top:100%; left:0; transform:translate(-50%,-50%)}
.nv-glow-bottom-right::before {top:100%; left:100%; transform:translate(-50%,-50%)}
/* Intensity (color strength) */
.nv-glow-soft {--glow-intensity:14%}
.nv-glow-strong{--glow-intensity:34%}
/* Size (glow radius; md = default 72%) */
.nv-glow-sm{--glow-size:48%}
.nv-glow-md{--glow-size:72%}
.nv-glow-lg{--glow-size:104%}
/* ── nv-dots — dot-grid texture layer ──────────────────────────────────
Same layering model as nv-glow: an absolute layer inside a position:relative
box. Color from nv-c-{role} (default muted). Combine with nv-glow freely
(stack both in the same box). Gap via nv-dots-sm/lg or --dots-gap. */
.nv-dots{position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;
background-image:radial-gradient(circle,
color-mix(in oklch, var(--_solid,var(--muted-foreground)) var(--dots-intensity,26%), transparent) 1px,
transparent 1px);
background-size:var(--dots-gap,20px) var(--dots-gap,20px);
}
/* Gap (spacing between dots — the dot size stays 1px) */
.nv-dots-tight{--dots-gap:14px}
.nv-dots-loose{--dots-gap:28px}
/* ══ LAYOUT PRIMITIVES ═══════════════════════════════════════════════════
Composable page skeleton pieces (UIkit-inspired). Goal: build a page with
almost no custom HTML/CSS. Density-aware via --density-mult / --font-scale.
════════════════════════════════════════════════════════════════════════ */
/* ── nv-navbar — horizontal bar (app topbar or marketing nav) ─────────────
Full-bleed by default (own side padding). Wrap a .container inside to cap
width — the navbar then drops its own padding and the container becomes the
flex row. Slots: nv-navbar-left / -center / -right. */
.nv-navbar{
display:flex;
align-items:center;
gap:var(--nv-space-3);
height:56px; /* fixed — aligns with the 56px sidebar brand across the chrome */
border-bottom:1px solid var(--border);
background:var(--background);
flex-shrink:0;
transition:background .15s, border-color .15s;
}
.nv-navbar:not(:has(> .container)){
padding-left:calc(20px * var(--density-mult,1));
padding-right:calc(20px * var(--density-mult,1));
}
.nv-navbar > .container{display:flex;align-items:center;gap:var(--nv-space-4);width:100%}
/* Position */
.nv-navbar-sticky{position:sticky;top:0;z-index:200}
.nv-navbar-fixed {position:fixed;top:0;left:0;right:0;z-index:200}
.nv-navbar-transparent{background:transparent;border-color:transparent}
/* Slots — flex regions inside the navbar */
.nv-navbar-left {display:flex;align-items:center;gap:var(--nv-space-3);flex:1;min-width:0}
.nv-navbar-center{display:flex;align-items:center;gap:var(--nv-space-2);flex-shrink:0}
.nv-navbar-right {display:flex;align-items:center;gap:var(--nv-space-2);flex-shrink:0;margin-left:auto}
.nv-navbar-left + .nv-navbar-right{margin-left:0} /* left already claims the space */
/* Brand */
.nv-navbar-brand{
display:inline-flex;align-items:center;gap:8px;
font-weight:700;font-size:calc(1rem * var(--font-scale));
color:var(--foreground);text-decoration:none;white-space:nowrap;flex-shrink:0;
}
/* Horizontal nav list + items */
.nv-navbar-nav{display:flex;align-items:center;gap:var(--nv-space-1);list-style:none;margin:0;padding:0}
.nv-navbar-item{
display:inline-flex;align-items:center;gap:6px;
height:calc(34px * var(--density-mult,1));
padding:0 calc(12px * var(--density-mult,1));
border-radius:var(--radius-md);
font-size:calc(0.875rem * var(--font-scale));font-weight:500;
color:var(--muted-foreground);text-decoration:none;cursor:pointer;white-space:nowrap;
border:none;background:transparent;font-family:inherit;
transition:background .12s, color .12s;
}
.nv-navbar-item:hover{background:color-mix(in oklch, var(--foreground) 6%, transparent);color:var(--foreground)}
.nv-navbar-item.active,
.nv-navbar-item[aria-current="page"]{color:var(--foreground);background:color-mix(in oklch, var(--primary) 12%, transparent)}
/* ── nv-main — the scrollable content region beside/below the chrome ───────
flex:1 so it fills remaining space; min-width:0 prevents flex overflow;
owns vertical scroll with the same thin-on-hover scrollbar as nv-scroll-y. */
.nv-main{
flex:1 1 auto;min-width:0;
overflow-y:auto;overflow-x:hidden;
scrollbar-width:thin;scrollbar-color:transparent transparent;
}
.nv-main:hover{scrollbar-color:color-mix(in oklch, var(--foreground) 20%, transparent) transparent}
.nv-main::-webkit-scrollbar{width:4px;height:4px}
.nv-main::-webkit-scrollbar-track{background:transparent}
.nv-main::-webkit-scrollbar-thumb{background:transparent;border-radius:2px}
.nv-main:hover::-webkit-scrollbar-thumb{background:color-mix(in oklch, var(--foreground) 20%, transparent)}
/* ── nv-shell — top-level split: sidebar | content column ─────────────────
.nv-shell is the flex row (full height, no page scroll). Inside: an
.nv-sidebar and an .nv-shell-body (a flex-column holding a navbar + nv-main). */
.nv-shell{display:flex;height:100vh;overflow:hidden}
.nv-shell-body{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden}
/* ── nv-sidebar + nv-nav ──────────────────────────────────────────────────
Extracted verbatim from components/sidebar-nav.html — the icon/rail/guide
geometry was hand-tuned so icons never jump on collapse. DO NOT retune
these pixel values (icon 24, rail 56, guide 20/50, chrome pads 8/16, foot
13/30) without re-verifying the collapse against the reference.
Class map (old → canonical):
.sidebar → .nv-sidebar .sidebar-brand → .nv-sidebar-brand
.sidebar-scroll → .nv-sidebar-scroll .sidebar-nav → .nv-nav
.nav-l1 → .nv-nav-item .nav-l2 → .nv-nav-sub .nav-l3 → .nv-nav-leaf
.icon-l1/.icon-l2 → .nv-nav-icon .label-l1/.label-l2 → .nv-nav-label
.section → .nv-nav-group .subsection → .nv-nav-subgroup
.nav-children-l2/l3 → .nv-nav-children .chevron → .nv-nav-chevron
.nav-badge → .nv-nav-badge .sidebar-foot → .nv-sidebar-foot
.foot-icon → .nv-sidebar-toggle
─────────────────────────────────────────────────────────────────────── */
.nv-sidebar{width:256px;height:100vh;display:flex;flex-direction:column;background:var(--card);border-right:1px solid var(--border);overflow:hidden}
.nv-sidebar-brand{height:56px;display:flex;align-items:center;padding:0 16px;border-bottom:1px solid var(--border);flex-shrink:0}
.nv-sidebar-brand-name{font-size:15px;font-weight:800;color:var(--foreground);white-space:nowrap}
.nv-sidebar-scroll{flex:1;overflow-y:auto;overflow-x:hidden}
/* flex+gap → every top-level item (standalone or group) gets identical spacing.
Horizontal padding 8 → tighter rail; item highlight keeps 8 inner padding, icons at 16 left. */
.nv-nav{padding:16px 8px;display:flex;flex-direction:column;gap:2px}
/* ── L1 item ── */
.nv-nav-item{
display:flex;align-items:center;
min-height:32px; /* fixed → height doesn't change when label hides (no icon jump on collapse) */
padding:6px 8px; /* symmetric 8 → highlight bg isn't glued to the edge (icon: 16 nav + 8 pad = 24) */
border-radius:6px;cursor:pointer;
color:var(--foreground);text-decoration:none;width:100%;
background:none;border:none;font-family:inherit;transition:color .1s;
}
.nv-nav-item:hover{background:color-mix(in oklch, var(--foreground) 6%, transparent)}
.nv-nav-item.active{background:color-mix(in oklch, var(--primary) 12%, transparent);color:var(--primary)}
/* Icon container — L1/brand 24px, L2 16px; 10px right margin */
.nv-nav-icon{display:flex;align-items:center;justify-content:center;width:24px;flex-shrink:0;margin-right:10px}
.nv-nav-sub > .nv-nav-icon{width:16px}
/* Labels — L1 uppercase bold 11px, L2 13px medium */
.nv-nav-item > .nv-nav-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;flex:1;text-align:left;white-space:nowrap}
.nv-nav-sub > .nv-nav-label{font-size:13px;font-weight:500;flex:1;text-align:left;white-space:nowrap}
/* Chevron */
.nv-nav-chevron{width:14px;height:14px;flex-shrink:0;color:var(--muted-foreground);transition:transform .15s}
.nv-nav-group.open > .nv-nav-item .nv-nav-chevron,
.nv-nav-subgroup.open > .nv-nav-sub .nv-nav-chevron{transform:rotate(90deg)}
/* ── Group (L1 section) ── */
.nv-nav-group{position:relative}
.nv-nav-children{display:none;margin-top:2px}
.nv-nav-group.open > .nv-nav-children{display:block}
/* Vertical guide line — left aligned to L1 icon center */
.nv-nav-group.open::before{
content:'';position:absolute;
left:20px; /* L1 icon center (nav-pad 16 + item-pad 8 + icon-half 12 = 36 → within section 36-16) */
top:34px;bottom:0;width:1px;background:var(--border);
}
/* ── L2 item (nv-nav-sub) ── */
.nv-nav-sub{
display:flex;align-items:center;
min-height:30px;
padding:5px 8px 5px 42px; /* 34 indent + 8 → icon position unchanged, highlight bg full-width */
margin-left:0;border-radius:6px;cursor:pointer;
color:var(--muted-foreground);text-decoration:none;width:100%;
background:none;border:none;font-family:inherit;
}
.nv-nav-sub:hover{background:color-mix(in oklch, var(--foreground) 6%, transparent)}
.nv-nav-sub.active{background:color-mix(in oklch, var(--primary) 12%, transparent);color:var(--primary)}
/* ── Sub-group (L2 collapsible) ── */
.nv-nav-subgroup{position:relative}
.nv-nav-subgroup.open > .nv-nav-children{display:block}
.nv-nav-subgroup.open::before{
content:'';position:absolute;
left:50px; /* L2 icon center (nav-pad 16 + item-pad 42 + icon-half 8 = 66 → within section 66-16) */
top:32px;bottom:0;width:1px;background:color-mix(in oklch, var(--border) 70%, transparent);
}
/* ── L3 leaf — no icon, indented under L2 icon ── */
.nv-nav-leaf{
display:flex;align-items:center;white-space:nowrap;
padding:5px 8px 5px 68px; /* 60 indent + 8 → text position unchanged, highlight bg full-width */
margin-left:0;border-radius:6px;cursor:pointer;
color:var(--muted-foreground);text-decoration:none;width:100%;
font-size:12.5px;font-weight:400;transition:color .1s;
}
.nv-nav-leaf:hover{background:color-mix(in oklch, var(--foreground) 6%, transparent)}
.nv-nav-leaf.active{background:color-mix(in oklch, var(--primary) 12%, transparent);color:var(--primary)}
/* Nav mini-badge (e.g. "soon") */
.nv-nav-badge{
font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;
padding:1px 5px;border-radius:4px;margin-left:4px;flex-shrink:0;
background:color-mix(in oklch, var(--primary) 15%, transparent);color:var(--primary);
}
/* ── Sidebar footer — collapse toggle, left-aligned ── */
/* padding-left 13 → toggle glyph lands on the 28px axis (13 + 30/2 = 28), same as nav icon glyphs.
Uniform in open + rail (13+30+13=56) → the icon never jumps horizontally on collapse. */
.nv-sidebar-foot{height:44px;flex-shrink:0;border-top:1px solid var(--border);display:flex;align-items:center;padding:0 13px}
.nv-sidebar-toggle{width:30px;height:30px;border-radius:6px;border:none;background:transparent;cursor:pointer;color:var(--muted-foreground);display:flex;align-items:center;justify-content:center}
.nv-sidebar-toggle:hover{color:var(--foreground);background:color-mix(in oklch, var(--foreground) 7%, transparent)}
/* ── Collapse → icon rail (icons stay LEFT-aligned & in place; only labels hide → no jump) ── */
.nv-sidebar{transition:width .18s ease}
/* Rail width = 8 nav-pad + 8 item-pad + 24 icon + 8 item-pad + 8 nav-pad
→ icon keeps EXACTLY its open-state left offset (16px) and gets an equal 16px on the right. */
.nv-sidebar-rail{width:56px}
.nv-sidebar-rail:has(.nv-nav:hover){width:256px} /* peek on hover */
/* Collapsed: hide labels/badges/chevrons/children ONLY. Paddings untouched → icon left (16) and
hover-bg left edge (8) identical to open state; only the bg's right edge pulls in. Icons never hop. */
.nv-sidebar-rail:not(:has(.nv-nav:hover)) .nv-sidebar-brand-name,
.nv-sidebar-rail:not(:has(.nv-nav:hover)) .nv-nav-label,
.nv-sidebar-rail:not(:has(.nv-nav:hover)) .nv-nav-badge,
.nv-sidebar-rail:not(:has(.nv-nav:hover)) .nv-nav-chevron{display:none}
.nv-sidebar-rail:not(:has(.nv-nav:hover)) .nv-nav-children{display:none}
/* Drop the icon→label gap so the icon sits symmetrically (8px) inside its highlight box */
.nv-sidebar-rail:not(:has(.nv-nav:hover)) .nv-nav-item > .nv-nav-icon{margin-right:0}
/* A group whose active child is now hidden lights up its parent header instead */
.nv-sidebar-rail:not(:has(.nv-nav:hover)) .nv-nav-group:has(.active) > .nv-nav-item{background:color-mix(in oklch, var(--primary) 12%, transparent);color:var(--primary)}