/* D02 component library — tokens only (no color literals). Prefix ui-. Usage rules: _dev/design/components.md */
.ui-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);min-height:40px;padding:0 var(--sp-4);border:1px solid transparent;border-radius:var(--rd-sm);font:var(--fw-med) var(--fs-md)/1 var(--font-body);cursor:pointer;background:var(--c-white);color:var(--c-starlight);border-color:var(--c-n200);transition:background-color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease)}
.ui-btn:hover,.ui-btn.is-hover{background:var(--c-n50);border-color:var(--c-n300)}
.ui-btn:active,.ui-btn.is-active{transform:translateY(1px);background:var(--c-n100)}
.ui-btn:focus-visible,.ui-btn.is-focus,.ui-field:focus-visible,.ui-field.is-focus,.ui-tab:focus-visible,.ui-seg button:focus-visible{outline:2px solid var(--c-blue);outline-offset:2px}
.ui-btn:disabled,.ui-btn.is-disabled{opacity:.5;cursor:not-allowed;transform:none}
.ui-btn.primary{background:var(--c-starlight);border-color:var(--c-starlight);color:var(--c-white)}
.ui-btn.primary:hover,.ui-btn.primary.is-hover{background:var(--c-starlight-dark);border-color:var(--c-starlight-dark)}
.ui-btn.ghost{background:transparent;border-color:transparent}.ui-btn.ghost:hover,.ui-btn.ghost.is-hover{background:var(--c-n100)}
.ui-btn.danger{background:var(--c-danger);border-color:var(--c-danger);color:var(--c-white)}
.ui-btn.sm{min-height:32px;padding:0 var(--sp-3);font-size:var(--fs-sm)}.ui-btn.lg{min-height:48px;padding:0 var(--sp-6);font-size:var(--fs-lg)}
.ui-btn.is-loading{position:relative;color:transparent;pointer-events:none}.ui-btn.is-loading:after{content:"";position:absolute;width:16px;height:16px;border:2px solid var(--c-n300);border-top-color:var(--c-starlight);border-radius:50%;animation:ui-spin .8s linear infinite}.ui-btn.primary.is-loading:after{border-color:rgba(var(--c-white-rgb),.4);border-top-color:var(--c-white)}
@keyframes ui-spin{to{transform:rotate(360deg)}}
.ui-field{display:block;width:100%;min-height:40px;padding:var(--sp-2) var(--sp-3);border:1px solid var(--c-n300);border-radius:var(--rd-sm);background:var(--c-white);color:var(--c-starlight);font:var(--fw-reg) var(--fs-md)/var(--lh-body) var(--font-body)}
.ui-field:hover,.ui-field.is-hover{border-color:var(--c-n500)}.ui-field:focus,.ui-field.is-focus{border-color:var(--c-blue);box-shadow:0 0 0 3px rgba(var(--c-blue-rgb),.25)}
.ui-field:disabled,.ui-field.is-disabled{background:var(--c-n100);color:var(--c-n600);cursor:not-allowed}.ui-field.is-error{border-color:var(--c-danger)}
.ui-label{display:grid;gap:var(--sp-1);font-size:var(--fs-sm);font-weight:var(--fw-med);color:var(--c-n700)}.ui-help{font-size:var(--fs-xs);color:var(--c-n600)}.ui-help.is-error{color:var(--c-danger)}
.ui-check{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-md);color:var(--c-starlight)}.ui-check input{width:18px;height:18px;accent-color:var(--c-starlight)}
.ui-switch{position:relative;display:inline-block;width:42px;height:24px}.ui-switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}.ui-switch i{position:absolute;inset:0;border-radius:var(--rd-pill);background:var(--c-n300);transition:background-color var(--dur-fast) var(--ease)}.ui-switch i:after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--c-white);transition:transform var(--dur-fast) var(--ease)}.ui-switch input:checked+i{background:var(--c-starlight)}.ui-switch input:checked+i:after{transform:translateX(18px)}.ui-switch input:focus-visible+i{outline:2px solid var(--c-blue);outline-offset:2px}
.ui-seg{display:inline-flex;padding:2px;border-radius:var(--rd-sm);background:var(--c-n100)}.ui-seg button{min-height:32px;padding:0 var(--sp-3);border:0;border-radius:6px;background:transparent;color:var(--c-n700);font:var(--fw-med) var(--fs-sm) var(--font-body);cursor:pointer}.ui-seg button[aria-pressed=true]{background:var(--c-white);color:var(--c-starlight);box-shadow:var(--sh-1)}
.ui-chip,.ui-badge,.ui-pill{display:inline-flex;align-items:center;gap:var(--sp-1);min-height:24px;padding:0 var(--sp-2);border-radius:var(--rd-pill);font-size:var(--fs-xs);font-weight:var(--fw-med);background:var(--c-n100);color:var(--c-n700);border:1px solid var(--c-n200)}
.ui-chip{min-height:32px;padding:0 var(--sp-3);cursor:pointer;font-size:var(--fs-sm)}.ui-chip[aria-pressed=true]{background:var(--c-starlight);border-color:var(--c-starlight);color:var(--c-white)}
.ui-pill.success{background:var(--c-success-soft);color:var(--c-success);border-color:transparent}.ui-pill.warning{background:var(--c-warning-soft);color:var(--c-warning);border-color:transparent}.ui-pill.danger{background:var(--c-danger-soft);color:var(--c-danger);border-color:transparent}.ui-pill.info{background:var(--c-blue-soft);color:var(--c-starlight);border-color:transparent}
.ui-card{background:var(--c-white);border:1px solid var(--c-n200);border-radius:var(--rd-md);box-shadow:var(--sh-1);padding:var(--sp-4)}.ui-card.raised{box-shadow:var(--sh-2)}.ui-card h3{margin:0 0 var(--sp-2);font:var(--fw-bold) var(--fs-lg)/var(--lh-tight) var(--font-head);color:var(--c-starlight)}
.ui-table{width:100%;border-collapse:collapse;font-size:var(--fs-md)}.ui-table th{text-align:left;padding:var(--sp-3);background:var(--c-n50);color:var(--c-n600);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--c-n200)}.ui-table td{padding:var(--sp-3);border-bottom:1px solid var(--c-n100)}.ui-table.dense td,.ui-table.dense th{padding:var(--sp-1) var(--sp-3)}.ui-table tbody tr:hover td{background:var(--c-n50)}
.ui-tabs{display:flex;gap:var(--sp-1);border-bottom:1px solid var(--c-n200);overflow-x:auto}.ui-tab{min-height:40px;padding:0 var(--sp-4);border:0;border-bottom:2px solid transparent;background:transparent;color:var(--c-n600);font:var(--fw-med) var(--fs-md) var(--font-body);cursor:pointer;white-space:nowrap}.ui-tab[aria-selected=true]{color:var(--c-starlight);border-bottom-color:var(--c-sand)}
.ui-kpi{display:grid;gap:var(--sp-1);background:var(--c-white);border:1px solid var(--c-n200);border-radius:var(--rd-md);padding:var(--sp-4)}.ui-kpi b{font:var(--fw-bold) var(--fs-2xl)/var(--lh-tight) var(--font-head);color:var(--c-starlight)}.ui-kpi span{font-size:var(--fs-sm);color:var(--c-n600)}
.ui-progress{height:8px;border-radius:var(--rd-pill);background:var(--c-n100);overflow:hidden}.ui-progress i{display:block;height:100%;background:var(--c-starlight);border-radius:inherit}
.ui-skeleton{display:block;border-radius:var(--rd-sm);background:linear-gradient(90deg,var(--c-n100),var(--c-n50),var(--c-n100));background-size:200% 100%;animation:ui-shimmer 1.4s linear infinite;min-height:14px}@keyframes ui-shimmer{to{background-position:-200% 0}}
.ui-empty{display:grid;justify-items:center;gap:var(--sp-2);padding:var(--sp-8) var(--sp-4);text-align:center;color:var(--c-n600)}.ui-empty b{color:var(--c-starlight);font-size:var(--fs-lg)}
.ui-avatar{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--c-starlight);color:var(--c-white);font-weight:var(--fw-bold);font-size:var(--fs-sm)}
.ui-toast{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-radius:var(--rd-md);background:var(--c-starlight);color:var(--c-white);box-shadow:var(--sh-3);font-size:var(--fs-md)}.ui-toast.success{background:var(--c-success)}.ui-toast.danger{background:var(--c-danger)}
.ui-tip{position:relative;display:inline-block}.ui-tip [role=tooltip]{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);padding:var(--sp-1) var(--sp-2);border-radius:6px;background:var(--c-starlight);color:var(--c-white);font-size:var(--fs-xs);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity var(--dur-fast) var(--ease)}.ui-tip:hover [role=tooltip],.ui-tip:focus-within [role=tooltip],.ui-tip.is-open [role=tooltip]{opacity:1}
.ui-modal,.ui-drawer{background:var(--c-white);border:1px solid var(--c-n200);border-radius:var(--rd-lg);box-shadow:var(--sh-3);padding:var(--sp-5);max-width:420px}.ui-drawer{border-radius:var(--rd-lg) var(--rd-lg) 0 0}
.sg{display:grid;gap:var(--sp-6);padding:var(--sp-4);max-width:1100px;margin:0 auto}.sg h2{margin:0;font:var(--fw-bold) var(--fs-xl) var(--font-head);color:var(--c-starlight)}.sg h3{margin:0 0 var(--sp-2);font-size:var(--fs-sm);color:var(--c-n600);text-transform:uppercase;letter-spacing:.05em}.sg-row{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center}.sg-grid{display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}.sg-sec{display:grid;gap:var(--sp-3)}.sg-note{font-size:var(--fs-sm);color:var(--c-n600)}
@media(prefers-reduced-motion:reduce){.ui-skeleton,.ui-btn.is-loading:after{animation-duration:1.5s}.ui-btn,.ui-field,.ui-switch i,.ui-switch i:after,.ui-tip [role=tooltip]{transition:none}}

/* D02 icons: one 24x24 stroke set (m-icons.js). Size follows font-size; colour follows currentColor. */
.ui-icon{display:inline-block;width:1.25em;height:1.25em;flex:none;vertical-align:-.2em}
.ui-icon svg{width:100%;height:100%;display:block}
.ui-check input:focus-visible,.ui-switch input:focus-visible{outline:2px solid var(--c-blue);outline-offset:2px}