.selection-system,.selection-panel{--selection-surface:#fff;--selection-border:#d9d9d9;--selection-hover:#b8b8b8;--selection-focus:#737373;--selection-control-border:#939393;--ring:#737373;font-family:var(--font-sans);color:var(--foreground)}.dark .selection-system,.dark .selection-panel{--selection-surface:#262626;--selection-border:#525252;--selection-hover:#737373;--selection-focus:#a3a3a3;--selection-control-border:#737373;--ring:#a3a3a3}.selection-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px;max-width:880px;display:grid}.selection-group+.selection-group{margin-top:32px}.selection-group>h3{margin-bottom:16px;font-size:14px;font-weight:500}.selection-field{border:0;min-width:0;padding:0}.selection-field>h3,.selection-field>legend{font-size:12px;font-weight:500;line-height:16px}.selection-hint{color:var(--muted-foreground);margin:4px 0 12px;font-size:12px;line-height:16px}.selection-trigger{z-index:1;background:var(--selection-surface);border:1px solid var(--selection-border);min-width:0;height:28px;min-height:28px;box-shadow:none;border-radius:6px;gap:8px;padding:0 8px;font-size:14px;line-height:20px;transition:border-color .12s ease-out}.selection-trigger:hover:not(:disabled):not([data-disabled]){border-color:var(--selection-hover)}.selection-trigger:focus-visible{outline:2px solid var(--selection-focus);outline-offset:-1px;border-color:var(--selection-focus);box-shadow:none}.selection-trigger:has(input:focus-visible){outline:2px solid var(--selection-focus);outline-offset:-1px;border-color:var(--selection-focus);box-shadow:none}.selection-trigger:focus-within{box-shadow:none}.selection-trigger input{min-width:0;height:24px;font:inherit;caret-color:var(--foreground);box-shadow:none;outline:none;padding:0}.selection-trigger input::placeholder{color:var(--muted-foreground);opacity:1}.selection-trigger:disabled{color:var(--muted-foreground);cursor:not-allowed;background:var(--accent);opacity:1}.selection-trigger:where(:disabled) span{color:inherit}.selection-panel{background:var(--selection-surface);border:1px solid var(--selection-border);border-radius:6px;box-shadow:0 4px 12px #00000014}.selection-panel [role=listbox]{scrollbar-color:var(--selection-border) transparent;scrollbar-width:thin;max-height:240px}.selection-panel [role=option]{min-height:28px;color:var(--foreground);border-radius:4px;gap:8px;padding:4px 8px;font-size:14px;line-height:20px}.selection-panel [role=option]:focus-visible{outline:2px solid var(--selection-focus);outline-offset:-2px}.selection-panel [role=option]:disabled{color:var(--muted-foreground);opacity:1}.selection-panel [role=status]{padding:12px;font-size:12px;line-height:16px}.selection-panel svg{width:16px;height:16px}.selection-multiple{height:auto;padding-block:0}.selection-multiple>div{gap:4px}.selection-chip{border-radius:4px;gap:4px;height:20px;padding:0 4px;font-size:12px;line-height:16px}.selection-chip button{border-radius:4px;width:20px;height:20px;margin:0}.selection-chip button:focus-visible{outline:2px solid var(--selection-focus);outline-offset:-2px;box-shadow:none}.selection-switch{gap:8px;min-height:28px;display:flex}.selection-switch [role=switch]{background:var(--muted-foreground);width:36px;height:20px;padding:4px}.selection-switch [role=switch][aria-checked=true]{background:var(--peec-green-text)}.selection-switch [role=switch]>div{width:12px;height:12px;box-shadow:none;background:#fff}.selection-switch [role=switch]>div>div{width:12px;height:12px}.selection-switch label{font-size:14px;line-height:28px}.selection-switch:has(:disabled) label{color:var(--muted-foreground);cursor:not-allowed}.selection-check,.selection-radio>label{align-items:center;gap:8px;min-height:28px;display:flex}.selection-check [role=checkbox],.selection-radio [role=radio]{border-color:var(--selection-control-border);border-width:1px;width:20px;height:20px}.selection-check [role=checkbox]{border-radius:4px}.selection-check [role=checkbox][aria-checked=true],.selection-check [role=checkbox][aria-checked=mixed]{color:var(--background);background:var(--foreground);border-color:var(--foreground)}.selection-radio [role=radio][aria-checked=true]{border-color:var(--foreground)}.selection-radio [role=radio]>span{background:var(--foreground)}.selection-check>span,.selection-radio label>span{gap:4px}.selection-children{margin-left:28px}.selection-radio{gap:4px}.selection-system :is([role=switch],[role=checkbox],[role=radio]):focus-visible{outline:2px solid var(--selection-focus);outline-offset:2px;box-shadow:none}.selection-tabs{max-width:880px}.selection-tabs [role=tablist]{gap:16px}.selection-tabs [role=tab]{height:28px;min-height:28px;padding:0 4px;font-size:14px;line-height:20px}.tab-count{font-variant-numeric:tabular-nums;min-width:18px;height:18px;color:var(--muted-foreground);background:var(--secondary);border-radius:999px;justify-content:center;align-items:center;margin-left:6px;padding:0 6px;font-size:11px;font-weight:500;line-height:1;display:inline-flex}[role=tab][aria-selected=true] .tab-count{color:var(--foreground)}.view-switch [role=tablist]{border-bottom:0;gap:4px}.view-switch [role=tab]{justify-content:center;width:24px;height:28px;min-height:28px;margin-bottom:0;padding:0}.selection-tabs [role=tab]:disabled{cursor:not-allowed;opacity:.5}.selection-tabs [role=tab]:focus-visible,.selection-tabs [role=tabpanel]:focus-visible{outline:2px solid var(--selection-focus);outline-offset:2px;box-shadow:none}.selection-tabs [role=tabpanel]{color:var(--muted-foreground);padding-top:16px;font-size:14px;line-height:20px}@media (max-width:600px){.selection-grid{grid-template-columns:minmax(0,1fr)}}@media (prefers-reduced-motion:reduce){.selection-trigger{transition:none}}
.expansion-system,.system-overlay{--ring:#737373;font-family:var(--font-sans);color:var(--foreground);font-size:14px;line-height:20px}.dark .expansion-system,.dark .system-overlay{--ring:#a3a3a3}.expansion-system{margin-top:48px}.expansion-intro{max-width:640px;color:var(--muted-foreground);margin-bottom:24px}.expansion-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;max-width:880px;display:grid}.expansion-stack{gap:32px;display:grid}.overlay-demo-row{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.overlay-demo-row .utility-hint{margin:0}.expansion-system :is(button,a):focus-visible,.system-overlay :is(button,a,input):focus-visible,.system-theme-control:focus-visible{outline:2px solid var(--ring,#737373);outline-offset:2px;box-shadow:none}.system-overlay h3{font-size:18px;font-weight:600;line-height:24px}.overlay-heading{justify-content:space-between;align-items:center;gap:16px;display:flex}.overlay-heading-actions{flex:none;align-items:center;gap:12px;display:flex}.overlay-description{color:var(--muted-foreground);margin:12px 0 16px}.overlay-icon-button{flex:0 0 28px;width:28px;padding:0}.overlay-actions{justify-content:flex-end;gap:8px;margin-top:24px;display:flex}.overlay-summary{gap:16px;margin-top:16px;display:grid}.overlay-summary dt{color:var(--muted-foreground);margin-bottom:4px;font-size:12px;line-height:16px}.overlay-summary dd{overflow-wrap:anywhere;margin:0}.system-modal{border-radius:16px;max-width:440px;max-height:calc(100dvh - 32px);overflow-y:auto}.system-drawer{width:440px;max-width:min(100vw,520px);padding:24px}.system-drawer .overlay-heading{border-bottom:1px solid var(--border);padding-bottom:16px}.overlay-drawer-body{flex:1;min-height:0;overflow-y:auto}.system-drawer .overlay-drawer-body{padding-top:24px}.system-bottom-sheet{background:var(--background);border-radius:16px 16px 0 0}.system-bottom-sheet h2{font-size:18px;font-weight:600;line-height:24px}.system-bottom-sheet p{font-size:14px;line-height:20px}.system-popover{width:min(304px,100vw - 32px);padding:16px}.system-popover h3{font-size:14px;line-height:20px}.system-tooltip{border-radius:6px;max-width:min(280px,100vw - 32px);padding:8px;font-size:12px;line-height:16px}.system-command{border-radius:12px}.system-command [role=option]{min-height:28px;font-size:14px;line-height:20px}.system-command [role=option]>span:first-child{background:var(--ds-option-hover)}.system-command input{font-family:var(--font-sans);line-height:20px}.system-command input:focus-visible{outline:none}.table-example-toolbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin:0 0 12px;display:flex}.table-example-toolbar .utility-hint{margin:0}.system-data-table{background:var(--background);border-radius:8px}.system-data-table table{width:100%;margin:0}.system-data-table th{font-size:12px;font-weight:500;line-height:16px}.system-data-table td{font-size:14px;line-height:20px}.system-data-table :is(td,th){padding-block:0}.system-data-table button{max-height:28px}.system-data-table [role=checkbox]{width:16px;height:16px}.badge-variant-group{margin-top:16px}.badge-examples{flex-wrap:wrap;gap:8px;margin-top:8px;display:flex}.system-banner{background:var(--sidebar);border:1px solid var(--border);border-radius:8px}.system-banner [data-slot=alert-description]{font-size:14px;line-height:20px}.banner-restore{margin-top:8px}.system-toasts{--button-radius:6px}.system-toast-surface{background:var(--background);border-radius:12px}.system-toast-title{font-size:14px;font-weight:500;line-height:20px}.system-toast-description{font-size:12px;line-height:16px}.system-toast-action{border-radius:6px;height:28px;max-height:28px;padding:0 8px;font-size:12px;line-height:16px}.system-toast-close{border-radius:6px;width:28px;height:28px}.system-card{border-radius:12px}.system-card [data-slot=card-description],.system-card [data-slot=card-content]{font-size:14px;line-height:20px}.card-metric{font-size:18px;font-weight:500;line-height:24px}.card-metric span{margin-left:4px;font-size:12px}.system-theme-control{width:28px;height:28px;color:var(--foreground);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:6px}.system-theme-control:hover{background:var(--accent)}@media (max-width:639px){.expansion-grid{grid-template-columns:minmax(0,1fr);gap:24px}.system-drawer{padding:16px}}@media (prefers-reduced-motion:reduce){.expansion-system *,.system-overlay *{transition:none}}.system-overlay-scrim{z-index:80}.system-drawer{z-index:90}.system-popover{background:var(--popover);border:1px solid var(--border);border-radius:12px}.system-toast-surface{box-shadow:0 4px 16px #00000014}
