/**
 * Selection Studio — Capsule Picker Resident
 * Location: /studio/css/capsule-picker.css
 */

.capsule-picker-shell { display:flex; flex-direction:column; width:100%; height:100%; min-height:0; overflow:hidden; color:var(--studio-text-primary); }
.capsule-picker-header { flex:0 0 auto; padding:var(--space-6,32px) var(--space-6,32px) var(--space-5,24px); border-bottom:1px solid var(--color-border-subtle,rgba(255,255,255,.08)); }
.capsule-picker-header-row { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-4,16px); margin-bottom:var(--space-4,16px); }
.capsule-picker-heading { min-width:0; }
.capsule-picker-title { margin:0; color:var(--studio-text-primary); font-size:var(--studio-type-dialog-title-size); font-weight:var(--studio-font-weight-medium); line-height:var(--studio-type-dialog-title-line-height); letter-spacing:var(--studio-type-dialog-title-letter-spacing); }
.capsule-picker-description { margin:var(--space-2,8px) 0 0; color:var(--studio-text-secondary); font-size:var(--studio-type-body-compact-size); font-weight:var(--studio-font-weight-regular); line-height:var(--studio-type-body-compact-line-height); }

.capsule-picker-close { appearance:none; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; width:32px; height:32px; padding:0; border:0; border-radius:6px; background:transparent; color:var(--studio-text-muted); font:inherit; font-size:18px; cursor:pointer; transition:color 160ms ease,background-color 160ms ease; }
.capsule-picker-close:hover { background:rgba(255,255,255,.08); color:#fff; }
.capsule-picker-search-wrap { width:100%; }
.capsule-picker-search { width:100%; height:44px; padding:0 var(--space-4,16px); border:1px solid var(--color-border-default,#1b2a38); border-radius:var(--radius-medium,8px); outline:none; background:var(--color-bg-input,rgba(6,9,12,.8)); color:var(--studio-text-primary); font:inherit; font-size:var(--studio-type-body-compact-size); font-weight:var(--studio-font-weight-regular); line-height:var(--studio-type-body-compact-line-height); transition:border-color 160ms ease,box-shadow 160ms ease; }
.capsule-picker-search::-webkit-search-cancel-button { appearance:none; }
.capsule-picker-search::placeholder { color:var(--studio-text-muted); }
.capsule-picker-search:focus { border-color:var(--studio-gold,#d4b483); box-shadow:0 0 0 3px rgba(212,180,131,.15); }

.capsule-picker-body { flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:var(--space-5,24px) var(--space-6,32px) var(--space-6,32px); }
.capsule-picker-body::-webkit-scrollbar { width:6px; }
.capsule-picker-body::-webkit-scrollbar-track { background:transparent; }
.capsule-picker-body::-webkit-scrollbar-thumb { border-radius:var(--radius-pill,999px); background:rgba(255,255,255,.10); }
.capsule-picker-body::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,.16); }
.capsule-picker-results-meta { min-height:18px; margin-bottom:var(--space-4,16px); color:var(--studio-text-muted); font-size:var(--studio-type-meta-size); font-weight:var(--studio-font-weight-regular); line-height:var(--studio-type-meta-line-height); }
.capsule-picker-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:var(--space-3,12px); min-width:0; }

.capsule-picker-card { appearance:none; display:flex; align-items:flex-start; min-width:0; min-height:142px; gap:var(--space-3,12px); padding:var(--space-4,16px); border:1px solid var(--color-border-default,#1b2a38); border-radius:var(--radius-medium,8px); background:rgba(255,255,255,.018); color:var(--studio-text-primary); font:inherit; text-align:left; cursor:pointer; transition:border-color 160ms ease,background-color 160ms ease,transform 160ms ease; }
.capsule-picker-card:hover { border-color:var(--color-border-strong,#3a4d5e); background:rgba(255,255,255,.05); transform:translateY(-1px); }
.capsule-picker-card.is-selected { border-color:var(--color-accent-border,#d4b483); background:linear-gradient(180deg,rgba(212,180,131,.11),rgba(212,180,131,.035)); }
.capsule-picker-card-icon { display:inline-flex; align-items:center; justify-content:center; flex:0 0 32px; width:32px; height:32px; border-radius:6px; background:rgba(255,255,255,.05); color:var(--studio-text-secondary); font-size:17px; }
.capsule-picker-card.is-selected .capsule-picker-card-icon { background:rgba(212,180,131,.13); color:var(--studio-text-accent); }
.capsule-picker-card-copy { display:flex; flex:1 1 auto; flex-direction:column; min-width:0; gap:3px; }
.capsule-picker-card-label { overflow:hidden; color:var(--studio-text-primary); font-size:var(--studio-type-card-title-size); font-weight:var(--studio-font-weight-strong); line-height:var(--studio-type-card-title-line-height); text-overflow:ellipsis; white-space:nowrap; }
.capsule-picker-card-description { display:-webkit-box; overflow:hidden; color:var(--studio-text-secondary); font-size:var(--studio-type-body-compact-size); font-weight:var(--studio-font-weight-regular); line-height:var(--studio-type-body-compact-line-height); -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.capsule-picker-card-type,.capsule-picker-card-category,.capsule-picker-card-tags { overflow:hidden; color:var(--studio-text-muted); font-size:var(--studio-type-meta-size); font-weight:var(--studio-font-weight-regular); line-height:var(--studio-type-meta-line-height); text-overflow:ellipsis; white-space:nowrap; }
.capsule-picker-card-type { margin-top:auto; font-family:var(--studio-font-mono); }
.capsule-picker-card-category,.capsule-picker-card-tags { color:var(--studio-text-secondary); }
.capsule-picker-empty { grid-column:1 / -1; padding:var(--space-7,40px) var(--space-4,16px); border:1px dashed var(--color-border-default,#1b2a38); border-radius:var(--radius-medium,8px); color:var(--studio-text-muted); font-size:var(--studio-type-body-compact-size); font-weight:var(--studio-font-weight-regular); line-height:var(--studio-type-body-compact-line-height); text-align:center; }

.capsule-picker-footer { flex:0 0 auto; padding:var(--space-5,24px) var(--space-6,32px); border-top:1px solid var(--color-border-subtle,rgba(255,255,255,.08)); background:rgba(15,23,30,.5); }
.capsule-picker-error { margin-bottom:var(--space-3,12px); padding:var(--space-2,8px) var(--space-3,12px); border:1px solid rgba(255,105,97,.28); border-radius:var(--radius-small,6px); background:rgba(255,105,97,.12); color:var(--studio-text-danger); font-size:var(--studio-type-body-compact-size); font-weight:var(--studio-font-weight-regular); line-height:var(--studio-type-body-compact-line-height); }
.capsule-picker-error[hidden] { display:none; }
.capsule-picker-actions { display:flex; align-items:center; justify-content:flex-end; gap:var(--space-3,12px); }
.capsule-picker-cancel,.capsule-picker-submit { appearance:none; height:32px; min-height:32px; padding:0 14px; border-radius:6px; font:inherit; font-size:var(--studio-type-ui-label-size); cursor:pointer; }
.capsule-picker-cancel { border:0; background:transparent; color:var(--studio-text-muted); font-weight:var(--studio-font-weight-medium); line-height:1; transition:background-color 160ms ease,color 160ms ease; }
.capsule-picker-cancel:hover { background:rgba(255,255,255,.05); color:#fff; }
.capsule-picker-submit { display:inline-flex; align-items:center; justify-content:center; gap:6px; border:1px solid var(--studio-gold,#d4b483); background:rgba(212,180,131,.08); color:var(--studio-text-accent); font-weight:var(--studio-font-weight-strong); line-height:1; transition:background-color 160ms ease,border-color 160ms ease,box-shadow 160ms ease,color 160ms ease,opacity 160ms ease; }
.capsule-picker-submit .resident-action-arrow { display:inline-block; transition:transform 180ms ease; }
.capsule-picker-submit:hover:not(:disabled) { background:var(--studio-gold,#d4b483); color:#06090c; box-shadow:0 0 12px rgba(212,180,131,.25); }
.capsule-picker-submit:hover:not(:disabled) .resident-action-arrow { transform:translateX(4px); }
.capsule-picker-submit:disabled { opacity:.5; cursor:not-allowed; box-shadow:none; }

.capsule-picker-close:focus-visible,.capsule-picker-search:focus-visible,.capsule-picker-card:focus-visible,.capsule-picker-cancel:focus-visible,.capsule-picker-submit:focus-visible { outline:2px solid var(--studio-gold,#d4b483); outline-offset:2px; }

@media (max-width:640px) {
    .capsule-picker-header,.capsule-picker-body,.capsule-picker-footer { padding-inline:var(--space-4,16px); }
    .capsule-picker-grid { grid-template-columns:1fr; }
    .capsule-picker-actions { align-items:stretch; flex-direction:column-reverse; }
    .capsule-picker-cancel,.capsule-picker-submit { width:100%; }
}

@media (prefers-reduced-motion:reduce) {
    .capsule-picker-card,.capsule-picker-submit .resident-action-arrow { transition:none; }
    .capsule-picker-card:hover,.capsule-picker-submit:hover:not(:disabled) .resident-action-arrow { transform:none; }
}