/* All numeric dimensions come from tokens.css. No raw px exceptions. */
.kp-page,.kp-page * { box-sizing:border-box; }
.kp-page { margin:var(--kp-0) auto; padding:var(--kp-6); max-width:var(--kp-page); background:var(--bg); color:var(--ink); font-family:var(--kp-font); font-size:var(--kp-fs-md); line-height:var(--kp-lh); }
.kp-stack { align-content:start; display:grid; gap:var(--kp-4); }
.kp-row { display:flex; flex-wrap:wrap; align-items:center; gap:var(--kp-2); }
.kp-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(var(--kp-full),var(--kp-column)),1fr)); gap:var(--kp-6); }
.kp-btn,.kp-file-button,.kp-select,.kp-text-input,.kp-choice-chip { --kp-control-height:var(--kp-md); --kp-control-font:var(--kp-fs-md); --kp-control-pad:var(--kp-4); min-height:var(--kp-control-height); padding:var(--kp-1) var(--kp-control-pad); border:var(--kp-border) solid var(--muted); border-radius:var(--kp-radius); font-family:var(--kp-font); font-size:var(--kp-control-font); font-weight:var(--kp-semibold); line-height:var(--kp-lh-control); color:var(--ink); background:var(--paper); max-width:var(--kp-full); }
.kp-btn,.kp-file-button,.kp-choice-chip { display:inline-flex; align-items:center; justify-content:center; gap:var(--kp-2); cursor:pointer; text-decoration:none; position:relative; }
.kp-btn--sm,.kp-select--sm,.kp-text-input--sm,.kp-choice-chip--sm { --kp-control-height:var(--kp-sm); --kp-control-font:var(--kp-fs-sm); --kp-control-pad:var(--kp-3); }
/* Native macOS menulists ignore min-height; keep native behavior with a CSS arrow. */
.kp-select { appearance:none; width:max-content; flex-shrink:0; padding-right:var(--kp-select-arrow-space); text-overflow:ellipsis; background-image:linear-gradient(45deg,transparent var(--kp-half),var(--muted) var(--kp-half)),linear-gradient(135deg,var(--muted) var(--kp-half),transparent var(--kp-half)); background-size:calc(var(--kp-select-arrow-width) / 2) calc(var(--kp-select-arrow-width) / 2); background-position:right calc(var(--kp-select-arrow-inset) + var(--kp-select-arrow-width) / 2) center,right var(--kp-select-arrow-inset) center; background-repeat:no-repeat; }
.kp-btn--primary { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.kp-btn--secondary { background:var(--paper); }
.kp-btn--quiet { background:transparent; border-color:transparent; }
.kp-btn--danger { color:var(--error); border-color:var(--error); }
.kp-btn--icon { width:var(--kp-control-height); padding:var(--kp-0); }
.kp-icon { width:var(--kp-icon); height:var(--kp-icon); flex-shrink:var(--kp-0); fill:none; stroke:currentColor; }
.kp-btn:hover:not(:disabled),.kp-file-button:hover:not(:has(:disabled)),.kp-choice-chip:hover:not(:has(:disabled)),.kp-select:hover:not(:disabled) { background-color:var(--soft); color:var(--ink); border-color:var(--accent); }
.kp-page :focus-visible,.kp-file-button:focus-within,.kp-choice-chip:has(:focus-visible) { outline:var(--kp-focus) solid var(--orange); outline-offset:var(--kp-focus-offset); }
.kp-btn:disabled,.kp-select:disabled,.kp-text-input:disabled,.kp-textarea:disabled,.kp-range:disabled,.kp-check:disabled,.kp-radio:disabled,.kp-page :disabled,.kp-btn[aria-disabled="true"],.kp-file-button:has(:disabled),.kp-choice-chip:has(:disabled) { opacity:var(--kp-disabled); cursor:default; }
.kp-btn[aria-pressed="true"],.kp-choice-chip:has(:checked),.kp-choice-chip[aria-checked="true"],.kp-tabs [aria-selected="true"] { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.kp-file-button input[type="file"] { position:absolute; inset:var(--kp-0); width:var(--kp-full); height:var(--kp-full); opacity:var(--kp-0); cursor:inherit; }
.kp-check,.kp-radio { width:var(--kp-check); height:var(--kp-check); margin:var(--kp-0); accent-color:var(--accent); }
.kp-check-label { display:inline-flex; align-items:center; gap:var(--kp-2); min-height:var(--kp-sm); padding:var(--kp-1); }
.kp-range { appearance:none; width:var(--kp-range); max-width:var(--kp-full); height:var(--kp-sm); margin:var(--kp-0); background:transparent; accent-color:var(--accent); }
.kp-range::-webkit-slider-runnable-track { height:var(--kp-1); background:var(--muted); border-radius:var(--kp-pill); }
.kp-range::-webkit-slider-thumb { appearance:none; width:var(--kp-thumb); height:var(--kp-thumb); margin-top:calc((var(--kp-1) - var(--kp-thumb))/2); background:var(--accent); border-radius:var(--kp-pill); }
.kp-range::-moz-range-track { height:var(--kp-1); background:var(--muted); }
.kp-range::-moz-range-thumb { width:var(--kp-thumb); height:var(--kp-thumb); background:var(--accent); border:var(--kp-0); border-radius:var(--kp-pill); }
.kp-field { display:grid; gap:var(--kp-2); min-width:var(--kp-0); }
.kp-label { font-weight:var(--kp-semibold); }
.kp-help,.kp-error { font-size:var(--kp-fs-sm); margin:var(--kp-0); }
.kp-help { color:var(--muted); }.kp-error { color:var(--error); }
.kp-page [aria-invalid="true"] { border-color:var(--error); outline:var(--kp-border) solid var(--error); }
.kp-textarea { width:var(--kp-full); min-height:var(--kp-textarea); padding:var(--kp-3); border:var(--kp-border) solid var(--muted); border-radius:var(--kp-radius); background:var(--paper); color:var(--ink); font:inherit; resize:vertical; }
.kp-tabs { align-items:center; align-self:start; display:flex; flex-wrap:wrap; gap:var(--kp-2); border-bottom:var(--kp-border) solid var(--line); padding-bottom:var(--kp-2); }
.kp-badge,.kp-tape { display:inline-flex; align-items:center; padding:var(--kp-1) var(--kp-2); font-size:var(--kp-fs-xs); font-weight:var(--kp-bold); background:var(--soft); color:var(--ink); border-radius:var(--kp-pill); }
.kp-tape { border-radius:var(--kp-radius); border-block:var(--kp-border) solid var(--muted); }
.kp-section-heading h1,.kp-section-heading h2 { font-size:var(--kp-fs-xl); line-height:var(--kp-lh-title); margin:var(--kp-0); }
.kp-section-heading h3 { font-size:var(--kp-fs-lg); margin:var(--kp-0); }
.kp-eyebrow { font-size:var(--kp-fs-xs); font-weight:var(--kp-bold); color:var(--orange); margin:var(--kp-0); }
.kp-metric { display:grid; gap:var(--kp-1); }.kp-metric strong { font-family:var(--kp-mono); font-size:var(--kp-fs-xl); font-weight:var(--kp-semibold); }
.kp-card { border:var(--kp-border) solid var(--line); border-radius:var(--kp-radius-card); background:var(--paper); padding:var(--kp-4); min-width:var(--kp-0); }
.kp-code { font-family:var(--kp-mono); font-size:var(--kp-code-size); line-height:var(--kp-lh); overflow-wrap:anywhere; }
.kp-text-input:hover:not(:disabled),.kp-textarea:hover:not(:disabled) { border-color:var(--accent); }
.kp-type-2xs { font-size:var(--kp-fs-2xs); }.kp-type-xs { font-size:var(--kp-fs-xs); }.kp-type-sm { font-size:var(--kp-fs-sm); }.kp-type-md { font-size:var(--kp-fs-md); }.kp-type-lg { font-size:var(--kp-fs-lg); }.kp-type-xl { font-size:var(--kp-fs-xl); }