/* Looks (opentron-design-system SPEC UI-XAPP-09): one item, two shapes side by side, each in its own shape. */
.look-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.look { overflow: hidden; cursor: pointer; display: flex; flex-direction: column; }
.look:hover, .look:focus-visible { border-color: var(--ot-accent); }
.look-shapes { display: flex; gap: 8px; align-items: flex-end; padding: 12px 12px 0; height: 172px; }
.shape-tile { position: relative; border: 0; padding: 0; border-radius: 6px; overflow: hidden; background: var(--mam-slate); color: var(--mam-slate-text); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 4px; cursor: pointer; height: 100%; }
.shape-tile.s16x9 { aspect-ratio: 16 / 9; height: auto; width: calc(100% - 96px - 8px); }
.shape-tile.s9x16 { aspect-ratio: 9 / 16; width: 96px; flex: none; }
.shape-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shape-tile .kind { font: 600 11px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.75; }
.shape-tile .shape-label { position: absolute; left: 4px; top: 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; background: var(--mam-slate); padding: 0 4px; border-radius: 4px; }
.shape-tile .dur { position: absolute; right: 4px; bottom: 4px; font: 11px var(--mono); background: var(--mam-slate); padding: 0 4px; border-radius: 4px; }
.shape-tile.missing { background: transparent; border: 1.5px dashed var(--ot-warn); color: var(--ot-muted); }
.shape-tile.missing .shape-label { background: transparent; color: var(--ot-muted); }
.shape-tile.missing .need { color: var(--ot-warn); font-weight: 600; font-size: 12px; text-align: center; padding: 0 4px; }
.shape-tile.missing .muted { font-size: 11px; }
.shape-tile.missing:hover:not(:disabled) { background: var(--mam-tint); }
.sync-note { margin: 8px 0 0; font-size: 12px; color: var(--ot-warn); }
.look-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0; }
.pair-cell { border: 1px solid var(--ot-line); border-radius: var(--radius-sm); padding: 8px 12px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; min-width: 0; }
.pair-cell.here { border-color: var(--ot-accent); background: var(--mam-tint); }
.pair-cell .btn { padding-left: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.look-candidates { margin: 4px 0 12px; }
.chip.pick { cursor: pointer; }
.chip.pick:hover { border-color: var(--ot-accent); color: var(--ot-accent); }
@media (max-width: 600px) { .look-grid { grid-template-columns: 1fr; } }