/* Components reference semantic tokens only. Every interactive element declares
   hover, active(press) and focus-visible; every disabled state drops opacity and
   removes the pointer. Hit targets never go below --hit-min on touch. */

/* ---- Button ---- */
.qb-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-family:var(--font-body);font-weight:var(--fw-semi);font-size:var(--fs-small);letter-spacing:0.01em;line-height:1;border:1px solid transparent;border-radius:var(--radius-2);padding:11px 18px;min-height:38px;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out),transform var(--dur-1) var(--ease-snap)}
.qb-btn:active:not(:disabled){transform:translateY(1px)}
.qb-btn:disabled,.qb-btn[aria-disabled=true]{opacity:0.42;cursor:not-allowed;transform:none}
.qb-btn--sm{font-size:var(--fs-micro);padding:8px 12px;min-height:30px;gap:var(--space-1)}
.qb-btn--lg{font-size:var(--fs-body);padding:15px 26px;min-height:50px}
.qb-btn--block{width:100%}
.qb-btn--primary{background:var(--accent);color:var(--text-on-accent)}
.qb-btn--primary:hover:not(:disabled){background:color-mix(in oklab,var(--accent) 82%,#fff)}
.qb-btn--primary:active:not(:disabled){background:var(--accent-press)}
.qb-btn--secondary{background:transparent;border-color:var(--border-strong);color:var(--text-1)}
.qb-btn--secondary:hover:not(:disabled){background:var(--surface-raised);border-color:var(--accent)}
.qb-btn--secondary:active:not(:disabled){background:var(--surface-card)}
.qb-btn--ghost{background:transparent;color:var(--text-2);padding-inline:10px}
.qb-btn--ghost:hover:not(:disabled){background:var(--surface-raised);color:var(--text-1)}
.qb-btn--danger{background:var(--status-fail);color:#fff}
.qb-btn--danger:hover:not(:disabled){background:color-mix(in oklab,var(--status-fail) 86%,#fff)}
.qb-btn--danger:active:not(:disabled){background:color-mix(in oklab,var(--status-fail) 84%,#000)}

/* ---- IconButton ---- */
.qb-iconbtn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:1px solid transparent;border-radius:var(--radius-2);background:transparent;color:var(--text-2);cursor:pointer;transition:background var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out)}
.qb-iconbtn:hover:not(:disabled){background:var(--surface-raised);color:var(--text-1)}
.qb-iconbtn:active:not(:disabled){background:var(--surface-card)}
.qb-iconbtn:disabled{opacity:0.42;cursor:not-allowed}
.qb-iconbtn--sm{width:28px;height:28px}
.qb-iconbtn--lg{width:44px;height:44px}
.qb-iconbtn--outline{border-color:var(--border-subtle)}
.qb-iconbtn--solid{background:var(--accent);color:var(--text-on-accent)}
.qb-iconbtn--solid:hover:not(:disabled){background:color-mix(in oklab,var(--accent) 82%,#fff);color:var(--text-on-accent)}
.qb-iconbtn[aria-pressed=true]{background:var(--accent-wash);color:var(--accent)}

/* ---- Icon (CSS-masked Lucide glyph, inherits currentColor) ---- */
.qb-icon{display:inline-block;flex:none;width:1em;height:1em;background-color:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}

/* ---- Badge / Tag ---- */
.qb-badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:var(--fs-mono);font-weight:var(--fw-medium);letter-spacing:var(--tr-mono);line-height:1;padding:5px 8px;border-radius:var(--radius-1);border:1px solid transparent}
.qb-badge--neutral{background:var(--surface-raised);color:var(--text-2);border-color:var(--border-subtle)}
.qb-badge--accent{background:var(--accent-wash);color:var(--accent);border-color:color-mix(in oklab,var(--accent) 38%,transparent)}
.qb-badge--pass{background:var(--status-pass-wash);color:var(--status-pass);border-color:color-mix(in oklab,var(--status-pass) 38%,transparent)}
.qb-badge--warn{background:var(--status-warn-wash);color:var(--status-warn);border-color:color-mix(in oklab,var(--status-warn) 38%,transparent)}
.qb-badge--fail{background:var(--status-fail-wash);color:var(--status-fail);border-color:color-mix(in oklab,var(--status-fail) 42%,transparent)}
.qb-badge--info{background:var(--status-info-wash);color:var(--status-info);border-color:color-mix(in oklab,var(--status-info) 38%,transparent)}
.qb-badge--solid{background:var(--accent);color:var(--text-on-accent);border-color:transparent}
.qb-tag{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-small);font-weight:var(--fw-medium);line-height:1;padding:6px 10px 6px 11px;border-radius:var(--radius-pill);background:var(--surface-raised);border:1px solid var(--border-subtle);color:var(--text-1)}
.qb-tag--selected{background:var(--accent-wash);border-color:var(--accent);color:var(--accent)}
.qb-tag__x{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border:0;padding:0;border-radius:var(--radius-pill);background:transparent;color:inherit;opacity:0.6;cursor:pointer;transition:opacity var(--dur-1) var(--ease-out)}
.qb-tag__x:hover{opacity:1}
button.qb-tag{cursor:pointer;transition:background var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out)}
button.qb-tag:hover{border-color:var(--border-strong)}

/* ---- Card ---- */
.qb-card{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-3);padding:var(--space-5)}
.qb-card--flat{background:transparent}
.qb-card--raised{background:var(--surface-raised);box-shadow:var(--shadow-2)}
.qb-card--inset{background:var(--surface-inset);border-style:dashed}
.qb-card--pad-sm{padding:var(--space-4)}
.qb-card--pad-lg{padding:var(--space-6)}
.qb-card--interactive{cursor:pointer;transition:border-color var(--dur-2) var(--ease-out),background var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out)}
.qb-card--interactive:hover{border-color:var(--border-strong);background:var(--surface-raised)}
.qb-card--interactive:active{transform:translateY(1px)}
.qb-card__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-3)}
.qb-card__title{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:20px;letter-spacing:var(--tr-tight);line-height:1.2}
.qb-card__eyebrow{font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:var(--tr-mono);color:var(--text-3)}

/* ---- Field / Input / Textarea / Select ---- */
.qb-field{display:flex;flex-direction:column;gap:6px}
.qb-field__label{font-size:var(--fs-small);font-weight:var(--fw-semi);color:var(--text-1)}
.qb-field__hint{font-size:var(--fs-small);color:var(--text-3);line-height:1.45}
.qb-field__error{display:flex;align-items:center;gap:6px;font-size:var(--fs-small);color:var(--status-fail)}
.qb-field__req{color:var(--status-fail);margin-left:3px}
.qb-input,.qb-textarea,.qb-select{width:100%;font-family:var(--font-body);font-size:var(--fs-small);color:var(--text-1);background:var(--surface-inset);border:1px solid var(--border-subtle);border-radius:var(--radius-2);padding:10px 12px;min-height:38px;transition:border-color var(--dur-1) var(--ease-out),background var(--dur-1) var(--ease-out)}
.qb-textarea{min-height:96px;line-height:1.55;resize:vertical}
.qb-input::placeholder,.qb-textarea::placeholder{color:var(--text-3)}
.qb-input:hover:not(:disabled),.qb-textarea:hover:not(:disabled),.qb-select:hover:not(:disabled){border-color:var(--border-strong)}
.qb-input:focus,.qb-textarea:focus,.qb-select:focus{outline:none;border-color:var(--accent);background:var(--surface-card)}
.qb-input:focus-visible,.qb-textarea:focus-visible,.qb-select:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring);outline-offset:1px}
.qb-input:disabled,.qb-textarea:disabled,.qb-select:disabled{opacity:0.45;cursor:not-allowed}
.qb-input--invalid,.qb-textarea--invalid,.qb-select--invalid{border-color:var(--status-fail)}
.qb-input--mono{font-family:var(--font-mono);letter-spacing:var(--tr-mono)}
.qb-select{-webkit-appearance:none;appearance:none;padding-right:32px;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 17px) 17px,calc(100% - 12px) 17px;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.qb-inputgroup{display:flex;align-items:center;gap:var(--space-2);background:var(--surface-inset);border:1px solid var(--border-subtle);border-radius:var(--radius-2);padding-inline:12px;transition:border-color var(--dur-1) var(--ease-out)}
.qb-inputgroup:focus-within{border-color:var(--accent)}
.qb-inputgroup > .qb-input{background:transparent;border:0;padding-inline:0}
.qb-inputgroup > .qb-input:focus{background:transparent}
.qb-inputgroup__affix{color:var(--text-3);display:inline-flex;flex:none}

/* ---- Checkbox / Radio / Switch ---- */
.qb-choice{display:inline-flex;align-items:flex-start;gap:var(--space-3);cursor:pointer;font-size:var(--fs-small);color:var(--text-1);line-height:1.4;min-height:22px}
.qb-choice--disabled{opacity:0.45;cursor:not-allowed}
.qb-choice__body{display:flex;flex-direction:column;gap:2px}
.qb-choice__desc{font-size:var(--fs-small);color:var(--text-3)}
.qb-check,.qb-radio{-webkit-appearance:none;appearance:none;flex:none;width:18px;height:18px;margin:1px 0 0;background:var(--surface-inset);border:1px solid var(--border-strong);cursor:inherit;display:grid;place-content:center;transition:background var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out)}
.qb-check{border-radius:var(--radius-1)}
.qb-radio{border-radius:var(--radius-pill)}
.qb-check:hover:not(:disabled),.qb-radio:hover:not(:disabled){border-color:var(--accent)}
.qb-check:checked,.qb-radio:checked{background:var(--accent);border-color:var(--accent)}
.qb-check:checked::after{content:"";width:10px;height:10px;background-color:var(--text-on-accent);-webkit-mask:var(--qb-check-glyph) center/contain no-repeat;mask:var(--qb-check-glyph) center/contain no-repeat}
.qb-check:indeterminate{background:var(--accent);border-color:var(--accent)}
.qb-check:indeterminate::after{content:"";width:9px;height:2px;background:var(--text-on-accent)}
.qb-radio:checked::after{content:"";width:7px;height:7px;border-radius:var(--radius-pill);background:var(--text-on-accent)}
.qb-check:disabled,.qb-radio:disabled{cursor:not-allowed}
.qb-switch{-webkit-appearance:none;appearance:none;flex:none;position:relative;width:38px;height:22px;border-radius:var(--radius-pill);background:var(--surface-raised);border:1px solid var(--border-strong);cursor:inherit;transition:background var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out)}
.qb-switch::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:var(--radius-pill);background:var(--text-2);transition:transform var(--dur-2) var(--ease-snap),background var(--dur-2) var(--ease-out)}
.qb-switch:hover:not(:disabled){border-color:var(--accent)}
.qb-switch:checked{background:var(--accent);border-color:var(--accent)}
.qb-switch:checked::after{transform:translateX(16px);background:var(--text-on-accent)}
.qb-switch:disabled{cursor:not-allowed}

/* ---- Tabs ---- */
.qb-tabs{display:flex;align-items:stretch;gap:var(--space-5);border-bottom:1px solid var(--border-subtle)}
.qb-tab{position:relative;background:none;border:0;padding:0 0 12px;font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:var(--tr-mono);color:var(--text-3);cursor:pointer;display:inline-flex;align-items:center;gap:8px;min-height:32px;transition:color var(--dur-1) var(--ease-out)}
.qb-tab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:var(--border-thick);background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-2) var(--ease-out)}
.qb-tab:hover{color:var(--text-1)}
.qb-tab[aria-selected=true]{color:var(--text-1)}
.qb-tab[aria-selected=true]::after{transform:scaleX(1)}
.qb-tab__count{font-size:var(--fs-micro);color:var(--text-3)}
.qb-tabs--pill{border:0;gap:var(--space-1);background:var(--surface-inset);padding:4px;border-radius:var(--radius-2);display:inline-flex}
.qb-tabs--pill .qb-tab{padding:7px 14px;border-radius:var(--radius-1)}
.qb-tabs--pill .qb-tab::after{display:none}
.qb-tabs--pill .qb-tab[aria-selected=true]{background:var(--surface-raised)}

/* ---- Dialog ---- */
.qb-overlay{position:fixed;inset:0;background:#050c0dcc;display:grid;place-items:center;padding:var(--space-5);z-index:60;animation:qb-fade var(--dur-2) var(--ease-out)}
@keyframes qb-fade{from{opacity:0}}
.qb-dialog{width:min(560px,100%);max-height:86vh;overflow:auto;background:var(--surface-card);border:1px solid var(--border-strong);border-radius:var(--radius-4);box-shadow:var(--shadow-key);animation:qb-pop var(--dur-2) var(--ease-out)}
@keyframes qb-pop{from{opacity:0;transform:translateY(10px) scale(.99)}}
.qb-dialog__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);padding:var(--space-5) var(--space-5) var(--space-3)}
.qb-dialog__title{font-family:var(--font-display);font-size:26px;font-weight:var(--fw-bold);letter-spacing:var(--tr-tight);line-height:1.15}
.qb-dialog__body{padding:0 var(--space-5) var(--space-5);color:var(--text-2);font-size:var(--fs-small);line-height:1.6}
.qb-dialog__foot{display:flex;justify-content:flex-end;gap:var(--space-2);padding:var(--space-4) var(--space-5);border-top:1px solid var(--border-subtle);background:var(--surface-inset)}

/* ---- Toast ---- */
.qb-toast{display:flex;align-items:flex-start;gap:var(--space-3);width:min(420px,100%);background:var(--surface-raised);border:1px solid var(--border-strong);border-radius:var(--radius-3);padding:var(--space-4);box-shadow:var(--shadow-3)}
.qb-toast__chip{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:var(--radius-1);font-size:14px}
.qb-toast--pass .qb-toast__chip{background:var(--status-pass-wash);color:var(--status-pass)}
.qb-toast--fail .qb-toast__chip{background:var(--status-fail-wash);color:var(--status-fail)}
.qb-toast--warn .qb-toast__chip{background:var(--status-warn-wash);color:var(--status-warn)}
.qb-toast--info .qb-toast__chip{background:var(--status-info-wash);color:var(--status-info)}
.qb-toast__title{font-size:var(--fs-small);font-weight:var(--fw-semi);color:var(--text-1)}
.qb-toast__msg{font-size:var(--fs-small);color:var(--text-2);margin-top:2px;line-height:1.5}
.qb-toast__actions{display:flex;gap:var(--space-3);margin-top:var(--space-3)}

/* ---- Tooltip ---- */
.qb-tip{position:relative;display:inline-flex}
.qb-tip__bubble{position:absolute;z-index:50;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);background:var(--qb-ink);color:var(--qb-ground);font-size:var(--fs-micro);font-weight:var(--fw-medium);line-height:1.35;padding:6px 9px;border-radius:var(--radius-1);white-space:nowrap;box-shadow:var(--shadow-2);pointer-events:none}
.qb-tip__bubble--below{top:calc(100% + 8px);bottom:auto}
.qb-tip__bubble--mono{font-family:var(--font-mono);letter-spacing:var(--tr-mono)}

/* ---- Callout (gutter-labelled block) ---- */
.qb-callout{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-4);padding:var(--space-4) var(--space-5);border:1px solid var(--border-subtle);border-radius:var(--radius-3);background:var(--surface-card)}
.qb-callout__label{font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:var(--tr-micro);text-transform:uppercase;color:var(--text-3);padding-top:2px}
.qb-callout--pass{border-color:color-mix(in oklab,var(--status-pass) 34%,transparent);background:var(--status-pass-wash)}
.qb-callout--pass .qb-callout__label{color:var(--status-pass)}
.qb-callout--fail{border-color:color-mix(in oklab,var(--status-fail) 34%,transparent);background:var(--status-fail-wash)}
.qb-callout--fail .qb-callout__label{color:var(--status-fail)}
.qb-callout--warn{border-color:color-mix(in oklab,var(--status-warn) 34%,transparent);background:var(--status-warn-wash)}
.qb-callout--warn .qb-callout__label{color:var(--status-warn)}
.qb-callout--info{border-color:color-mix(in oklab,var(--status-info) 34%,transparent);background:var(--status-info-wash)}
.qb-callout--info .qb-callout__label{color:var(--status-info)}
.qb-callout__body{font-size:var(--fs-small);color:var(--text-2);line-height:1.6}
@media (max-width:560px){.qb-callout{grid-template-columns:minmax(0,1fr);gap:var(--space-2)}}

/* ---- RuleCard (signature primitive) ---- */
.qb-rule{display:grid;grid-template-columns:var(--gutter-rail) minmax(0,1fr);gap:var(--space-5);padding:var(--space-5) 0;border-top:1px solid var(--border-subtle)}
.qb-rule__rail{display:flex;flex-direction:column;gap:8px;font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:var(--tr-mono)}
.qb-rule__id{color:var(--text-3)}
.qb-rule__verdict{display:inline-flex;align-items:center;gap:6px;font-weight:var(--fw-medium)}
.qb-rule--never .qb-rule__verdict{color:var(--status-fail)}
.qb-rule--always .qb-rule__verdict{color:var(--status-pass)}
.qb-rule--prefer .qb-rule__verdict{color:var(--status-warn)}
.qb-rule__title{font-family:var(--font-display);font-size:22px;font-weight:var(--fw-bold);letter-spacing:var(--tr-tight);line-height:1.2;color:var(--text-1)}
.qb-rule__body{font-size:var(--fs-small);color:var(--text-2);margin-top:6px;line-height:1.6;max-width:var(--measure)}
.qb-rule__list{display:flex;flex-direction:column;gap:6px;margin:var(--space-3) 0 0;padding:0;list-style:none}
.qb-rule__item{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-2);font-size:var(--fs-small);color:var(--text-2)}
.qb-rule__mark{font-family:var(--font-mono);color:var(--status-fail)}
.qb-rule__item--do .qb-rule__mark{color:var(--status-pass)}
@media (max-width:720px){.qb-rule{grid-template-columns:minmax(0,1fr);gap:var(--space-2)}.qb-rule__rail{flex-direction:row;align-items:center;gap:var(--space-4)}}

/* ---- ScoreMeter ---- */
.qb-score{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--space-4)}
.qb-score__label{font-size:var(--fs-small);color:var(--text-2)}
.qb-score__track{display:flex;gap:3px}
.qb-score__seg{width:22px;height:8px;border-radius:1px;background:var(--surface-raised);border:1px solid var(--border-subtle)}
.qb-score__seg--on{background:var(--accent);border-color:var(--accent)}
.qb-score--fail .qb-score__seg--on{background:var(--status-fail);border-color:var(--status-fail)}
.qb-score--warn .qb-score__seg--on{background:var(--status-warn);border-color:var(--status-warn)}
.qb-score__value{font-family:var(--font-mono);font-size:var(--fs-mono);color:var(--text-3);letter-spacing:var(--tr-mono);min-width:34px;text-align:right}
.qb-score--sm .qb-score__seg{width:14px;height:6px}