/* Supplemental controls; layout and typography come from compact-theme.css. */
.card-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.card-field>span { color: #60717a; font-size: 12px; font-weight: 500; line-height: 1.4; }
.production-album-view .track-more .card-field :is(input,select,textarea),.composer-dialog :is(input,select),.production-album-view .composer-menu input { box-sizing: border-box; width: 100%; min-width: 0; border: 1px solid #d5dfe4; border-radius: 5px; background: #fafbfc; color: #263238; padding: 6px 9px; font: inherit; font-size: 13px; line-height: 1.5; min-height: 32px; }
.track-grip,.card-icon-button,.composer-add { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; height: 28px; min-width: 24px; padding: 4px; gap: 3px; color: #60717a; background: transparent; border: 0; border-radius: 4px; cursor: pointer; }
.track-grip { cursor: grab; touch-action: none; font-variant-numeric: tabular-nums; min-width: 0; width: 100%; padding: 0; gap: 1px; font: inherit; font-size: 11px; }
.track-grip:active { cursor: grabbing; }
:is(.track-grip,.card-icon-button,.composer-chips,.composer-create,.card-materials,.track-header-actions) svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.track-grip svg { width: 10px; stroke-width: 3; }
.card-icon-button:hover,.composer-add:hover,.track-grip:hover { background: #eef4f7; color: #086eac; }
:is(.compact-track-form,.composer-dialog) :is(button,input,textarea,select):focus-visible { outline: 2px solid #086eac; outline-offset: 2px; }
.card-authors { position: relative; min-width: 0; padding-left: 5px; }
.composer-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; min-height: 22px; }
.composer-chips>span { display: inline-flex; align-items: center; gap: 2px; color: #60717a; font-size: 11px; line-height: 20px; }
.composer-chips>span button { display: inline-flex; padding: 2px; border: 0; border-radius: 3px; background: none; color: #60717a; cursor: pointer; }
.composer-chips>span button:hover { background: #eef4f7; color: #086eac; }
.composer-chips svg { width: 12px; height: 12px; }
.composer-add { height: 24px; padding: 3px; color: #086eac; }
.card-materials { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.card-materials label { display: flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 9px; border: 1px solid #d5dfe4; border-radius: 5px; font-size: 13px; color: #465963; cursor: pointer; background: #fafbfc; }
.card-materials input { appearance: auto; width: 17px; height: 17px; accent-color: #086eac; margin: 0; }
.card-materials label:has(:checked) { background: #e9f4fb; border-color: #a8ccdf; color: #065786; }
.card-materials label:has(:disabled) { opacity: .65; cursor: default; }
.production-track-row.is-dragging { opacity: .5; outline: 2px dashed #086eac; outline-offset: -2px; }
.composer-menu { position: absolute; z-index: 12; top: 100%; left: 0; width: max(100%,290px); max-width: min(400px,82vw); background: white; border: 1px solid #cbd7df; border-radius: 8px; padding: 8px; }
.composer-options { max-height: 220px; overflow-y: auto; margin-top: 6px; }
.composer-options button { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; background: none; color: #263238; border: 0; padding: 8px; border-radius: 4px; font: inherit; font-size: 13px; cursor: pointer; }
.composer-options button:hover,.composer-options button:focus { background: #edf5fa; }
.composer-options small { color: #60717a; font-size: 11px; }
.composer-create { display: flex; gap: 7px; align-items: center; padding: 9px 8px; width: 100%; border: 0; border-top: 1px solid #e6ebee; background: white; color: #086eac; font: inherit; font-size: 13px; cursor: pointer; }
.composer-menu p { margin: 8px; font-size: 13px; }
.composer-dialog { width: 540px; max-width: calc(100vw - 32px); box-sizing: border-box; border: 1px solid #d5dfe4; border-radius: 10px; padding: 20px; color: #263238; background: white; font-family: Onest,sans-serif; }
.composer-dialog::backdrop { background: rgb(23 36 44 / 35%); }
.composer-dialog header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.composer-dialog h2 { margin: 0; font-size: 18px; }
.composer-create-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.composer-dialog footer { display: flex; justify-content: end; gap: 8px; margin-top: 20px; }

@media(max-width:760px) {
 .production-album-view .track-more .card-field :is(input,select,textarea),.production-album-view .composer-menu input { font-size: 16px; }
 .composer-create-fields { grid-template-columns: 1fr; }
 .composer-chips>span { overflow-wrap: anywhere; }
 .composer-menu { width: min(290px,calc(100vw - 110px)); max-width: calc(100vw - 110px); }
 .card-materials label { min-height: 40px; }
}